/*
 * The visitors' frame in the new look: home page, sign-up and the other public pages
 * (laravel/resources/views/layouts/outgame-new.blade.php, pages/guest-new). Colours and
 * components come from css/haftir-ui.css.
 */

html { scroll-padding-top: 72px; }
body.hx-guest { margin: 0; background: var(--hx-ink); color: var(--hx-bone); min-height: 100vh; }
body.hx-guest a { text-decoration: none; }
body.hx-guest .hx-link { color: var(--hx-kraft); }
.hx-skip { position: absolute; right: 8px; top: -60px; z-index: 100; background: var(--hx-kraft); color: var(--hx-ink) !important; padding: 6px 12px; border-radius: 5px; }
.hx-skip:focus { top: 8px; }
.hx-gtop .hx-brand { flex: none; width: 160px; height: 60px; background: url(/images/logo-wide.png) no-repeat left center; background-size: auto 60px; }
.hx-gacts { display: flex; gap: 8px; flex: none; }
.hx-trust { margin: 8px 0; }
.hx-gtop { position:sticky; top:0; z-index:40; height:60px; display:flex; align-items:center; gap:18px;
  padding:0 0 0 16px; background:linear-gradient(#1a1412,#110e0c); border-bottom:2px solid var(--hx-blood); }
.hx-gnav { display:flex; gap:4px; flex:1; }
.hx-gnav a { color:var(--hx-dust); padding:6px 10px; border-radius:5px; font-size:13.5px; }
.hx-gnav a:hover, .hx-gnav a.hx-cur { color:var(--hx-bone); background:var(--hx-ash2); }

.hx-gwrap { max-width:1100px; margin:0 auto; padding:18px 16px 40px; }
.hx-hero { position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--hx-line);
  min-height:330px; display:grid; grid-template-columns:1fr 330px; gap:0;
  background:#120e0c url(/images/home/home-hero.jpg) center / cover no-repeat; }
.hx-hero::before { content:""; position:absolute; inset:0;
  background:linear-gradient(270deg, rgba(13,11,10,.86) 0%, rgba(13,11,10,.62) 50%, rgba(13,11,10,.22) 100%); }
.hx-hero > * { position:relative; }
.hx-hero-text { padding:34px 30px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.hx-hero-text h1 { font-family:var(--hx-display); font-weight:400; font-size:40px; line-height:1.25; margin:0; }
.hx-hero-text h1 em { font-style:normal; color:var(--hx-flare); }
.hx-hero-text p { margin:0; color:#d6ccc2; font-size:15px; max-width:520px; line-height:1.9; }
.hx-hero-facts { display:flex; gap:22px; flex-wrap:wrap; }
.hx-hero-facts b { display:block; font-size:20px; color:var(--hx-kraft); }
.hx-hero-facts small { color:var(--hx-dust); font-size:12px; }
.hx-hero .hx-btn { min-height:44px; padding:9px 22px; font-size:15px; }
.hx-login { margin:18px; align-self:center; background:rgba(22,18,16,.94); backdrop-filter:blur(3px); }
.hx-login .hx-h2 { margin-bottom:2px; }
.hx-login .hx-btn { width:100%; min-height:42px; }
.hx-login .hx-links2 { display:flex; justify-content:space-between; font-size:12px; }
.hx-login .hx-links2 a { color:var(--hx-dust); }
.hx-sec { margin-top:26px; }
.hx-sec > .hx-h2 { margin-bottom:12px; }
.hx-feat { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.hx-feat article { background:var(--hx-ash); border:1px solid var(--hx-line); border-radius:6px; overflow:hidden; }
.hx-feat img { display:block; width:100%; aspect-ratio:2/1; object-fit:cover; }
.hx-feat div { padding:10px 12px 12px; }
.hx-feat b { display:block; font-size:15px; margin-bottom:3px; }
.hx-feat span { color:var(--hx-dust); font-size:12.5px; line-height:1.8; }
.hx-prize { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.hx-prize > div { background:var(--hx-ash); border:1px solid var(--hx-line); border-radius:6px; padding:14px; text-align:center; }
.hx-prize > div:first-child { border-color:#7a6740; }
.hx-prize i { font-size:26px; color:var(--hx-kraft); }
.hx-prize > div:nth-child(2) i { color:#c9c4bd; }
.hx-prize > div:nth-child(3) i { color:#b07a4f; }
.hx-prize b { display:block; font-size:19px; margin-top:4px; }
.hx-prize small { color:var(--hx-dust); }
.hx-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; counter-reset:s; }
.hx-steps li { list-style:none; background:var(--hx-ash); border:1px solid var(--hx-line); border-radius:6px; padding:12px 14px; display:flex; gap:10px; align-items:flex-start; }
.hx-steps li::before { counter-increment:s; content:counter(s, persian); flex:none; width:30px; height:30px; border-radius:50%; background:var(--hx-blood); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.hx-steps ol { margin:0; padding:0; display:contents; }
.hx-steps b { display:block; } .hx-steps span { color:var(--hx-dust); font-size:12.5px; }
.hx-cta { margin-top:26px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:linear-gradient(90deg,#2a0e0d,#1c1412); border:1px solid #5c1a17; border-radius:8px; padding:18px 20px; }
.hx-cta b { font-family:var(--hx-display); font-weight:400; font-size:22px; }
.hx-gfoot { border-top:1px solid var(--hx-line); margin-top:30px; padding:18px 16px 30px; text-align:center; color:var(--hx-dust); font-size:12.5px; }
.hx-gfoot nav { display:flex; gap:6px 16px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }
.hx-gfoot a { color:var(--hx-dust); }
.hx-narrow { max-width:520px; margin:10px auto 0; }
.hx-reg-pic { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:6px; border:1px solid var(--hx-line); }
.hx-reg-side { display:grid; grid-template-columns:1fr 300px; max-width:860px; margin:10px auto 0; gap:16px; align-items:start; }


@media (max-width: 900px) {
  .hx-gnav { display:none; }
  .hx-gtop { gap:8px; padding-left:10px; }
  .hx-gtop .hx-brand { width:120px; background-size:auto 46px; }
  .hx-gacts { gap:6px; }
  .hx-gtop .hx-btn { padding:5px 10px; min-height:34px; font-size:12.5px; }
  .hx-gwrap { padding:12px 12px 30px; }
  .hx-hero { grid-template-columns:1fr; background-position:center top; background-size:auto 260px; }
  .hx-hero::before { background:linear-gradient(180deg, rgba(13,11,10,.55) 0, rgba(13,11,10,.95) 230px, #0d0b0a 330px); }
  .hx-hero-text { padding:110px 16px 6px; }
  .hx-hero-text h1 { font-size:30px; }
  .hx-login { margin:10px 12px 14px; }
  .hx-feat { grid-template-columns:1fr 1fr; }
  .hx-steps { grid-template-columns:1fr; }
  .hx-prize { gap:8px; } .hx-prize > div { padding:10px 6px; } .hx-prize b { font-size:15px; }
  .hx-reg-side { grid-template-columns:1fr; }
  .hx-reg-pic { aspect-ratio:2/1; }
}
.hx .hx-prize1 { flex-direction:row; align-items:center; gap:14px; border-color:#7a6740; padding:16px 18px; }
.hx .hx-prize1 > i { font-size:34px; color:var(--hx-kraft); }
.hx .hx-prize1 > div { display:flex; flex-direction:column; gap:2px; }
.hx-form-page { max-width: 560px; margin: 10px auto 0; }
.hx-form-page.hx-wide { max-width: 860px; }
.hx-form-page .hx-btn-primary[type="submit"] { min-height: 44px; }
body.hx-guest .hx-card p { margin: 0; }