/* ==========================================================================
   ix7 game — page-level compositions
   Each page gets its own hero treatment so no two pages read the same.
   ========================================================================== */

/* ==========================================================
   1. HOME — cinematic hero with ember particles + device
   ========================================================== */
.hero{
  position:relative;min-height:min(100svh,880px);
  display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + clamp(1.4rem,3vw,2.6rem));
  padding-bottom:clamp(2.6rem,5vw,4rem);
  overflow:clip;
}
.hero h1.display{font-size:clamp(2.05rem,4.5vw,3.35rem)}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(900px 620px at 22% 28%,rgba(180,24,46,.42),transparent 62%),
    radial-gradient(700px 520px at 82% 18%,rgba(212,175,55,.14),transparent 62%),
    linear-gradient(180deg,#0B0B0F 0%,#150609 45%,#0B0B0F 100%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:conic-gradient(from 210deg at 70% 40%,transparent 0deg,rgba(225,6,0,.10) 60deg,transparent 140deg,rgba(212,175,55,.07) 240deg,transparent 320deg);
  animation:slowSpin 40s linear infinite;
}
@keyframes slowSpin{to{transform:rotate(360deg)}}
/* Three grid items — copy-top, device, copy-bottom — laid out with named areas
   so the phone mockup can sit beside the copy on desktop but drop between the
   headline and the bonus button on mobile, using one shared markup order.
   No z-index here on purpose: a stacking context would isolate the logo's
   screen blend. Tree order already paints this above .hero-bg and the canvas. */
.hero-in{
  position:relative;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  grid-template-areas:"top device" "bottom device";
  column-gap:clamp(2rem,4vw,4.5rem);
  row-gap:.5rem;
  align-items:center;
}
.hero-copy-top{grid-area:top;max-width:620px;align-self:end}
.hero-copy-bottom{grid-area:bottom;max-width:620px;align-self:start}
.device-stage{grid-area:device;align-self:center}
.hero-copy-top .kicker{margin-bottom:1.35rem;animation:riseIn .9s var(--ease-out) both .1s}
.hero-copy-top h1{margin-bottom:1.25rem;animation:riseIn .9s var(--ease-out) both .22s}
.hero-copy-top h1 em{font-style:normal;display:block}
.hero-copy-top .lede{animation:riseIn .9s var(--ease-out) both .34s}
.hero-copy-bottom .btn-row{margin-top:2rem;animation:riseIn .9s var(--ease-out) both .5s}
.hero-trust{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1.6rem;animation:riseIn .9s var(--ease-out) both .62s}
.hero-trust div b{display:block;font-family:var(--font-num);font-size:1.35rem;color:var(--gold-2);line-height:1.1}
.hero-trust div span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.bonus-badge{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:.7rem 1.35rem .7rem .8rem;border-radius:999px;margin-bottom:1.5rem;
  border:1px solid rgba(212,175,55,.42);
  background:linear-gradient(120deg,rgba(180,24,46,.35),rgba(11,11,15,.6));
  box-shadow:0 0 30px -8px rgba(212,175,55,.5);
  animation:riseIn .9s var(--ease-out) both .42s,badgeGlow 3.4s ease-in-out infinite 1.4s;
}
@keyframes badgeGlow{0%,100%{box-shadow:0 0 30px -10px rgba(212,175,55,.45)}50%{box-shadow:0 0 44px -6px rgba(212,175,55,.8)}}
.bonus-badge .bb-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gradient-gold);color:#231a03;flex:none}
.bonus-badge .bb-ic svg{width:18px;height:18px}
.bonus-badge b{font-family:var(--font-num);font-size:1.25rem;color:var(--gold-2);line-height:1}
.bonus-badge small{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute)}


/* ==========================================================
   2. OG BANNER SECTION (home)
   ========================================================== */
.og-sec{padding-block:clamp(3rem,6vw,5rem)}
.og-frame{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid rgba(212,175,55,.34);
  box-shadow:0 40px 90px -46px rgba(0,0,0,.95),0 0 70px -30px rgba(225,6,0,.6);
  background:#0B0B0F;
}
.og-frame::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 46%,transparent 58%);
  transform:translateX(-120%);animation:ogSweep 6s var(--ease-out) infinite 1.5s;
}
@keyframes ogSweep{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
.og-frame img{width:100%;height:auto;display:block}
.og-overlay{
  position:absolute;inset:auto 0 0 0;z-index:3;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,2.4vw,1.7rem) clamp(1.1rem,2.8vw,2.2rem);
  background:linear-gradient(180deg,transparent,rgba(11,11,15,.88) 55%);
}
.og-overlay p{font-size:.9rem;color:var(--text-mute);max-width:52ch}
.og-overlay b{color:var(--gold-2)}
.og-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-top:1.4rem}
.og-meta div{
  padding:.9rem 1.1rem;border-radius:14px;border:1px solid rgba(243,239,232,.08);
  background:linear-gradient(160deg,rgba(44,44,51,.5),rgba(11,11,15,.7));
}
.og-meta small{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.25rem}
.og-meta b{font-size:.92rem;color:var(--text-light);font-weight:700;word-break:break-word}

/* ==========================================================
   3. SCREENSHOT SLIDER (home + download)
   ========================================================== */
.shots-sec{position:relative}
.shots-sec::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(800px 500px at 50% 0%,rgba(180,24,46,.2),transparent 65%);
  pointer-events:none;
}
.shot{
  flex:0 0 auto;width:clamp(190px,22vw,258px);
  border-radius:26px;padding:8px;
  background:linear-gradient(150deg,#33333b,#0d0d11 40%,#26262d 100%);
  box-shadow:0 26px 56px -30px rgba(0,0,0,.95),0 0 0 1px rgba(212,175,55,.2);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.shot:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 36px 70px -30px rgba(0,0,0,.95),0 0 0 1px rgba(212,175,55,.55),0 0 44px -16px rgba(212,175,55,.55)}
.shot-inner{border-radius:19px;overflow:hidden;background:#000;aspect-ratio:560/1246;position:relative}
.shot-inner img{width:100%;height:100%;object-fit:cover;object-position:top center}
.shot-cap{
  margin-top:.75rem;text-align:center;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim);
}
.shot-badge{
  position:absolute;top:.55rem;left:50%;transform:translateX(-50%);z-index:2;
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  padding:.2rem .6rem;border-radius:999px;background:rgba(11,11,15,.82);
  border:1px solid var(--hairline);color:var(--gold-2);backdrop-filter:blur(4px);
}

/* carousel game tile */
.slide-card{flex:0 0 auto;width:clamp(148px,17vw,196px)}

/* ==========================================================
   4. PROMO BAND (diagonal crimson)
   ========================================================== */
.promo{
  position:relative;margin-block:clamp(2rem,4vw,3.5rem);
  padding-block:clamp(3rem,6vw,5rem);
  background:linear-gradient(115deg,#6E0D1C 0%,#B4182E 38%,#4a0a13 72%,#0B0B0F 100%);
  overflow:clip;
  clip-path:polygon(0 4%,100% 0,100% 96%,0 100%);
}
.promo::before{
  content:"";position:absolute;inset:0;opacity:.3;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 26px);
}
.promo::after{
  content:"";position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(400px,45%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.34),transparent 65%);
}
.promo-in{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr auto;gap:2.5rem;align-items:center}
.promo h2{margin-bottom:.9rem}
.promo p{color:rgba(243,239,232,.85);max-width:60ch}
.coin{
  width:clamp(92px,11vw,140px);aspect-ratio:1;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#FFF3CB,var(--gold-2) 30%,var(--gold-1) 58%,#8A6F1E 100%);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;color:#4a3a08;
  font-size:clamp(1.7rem,3vw,2.6rem);
  box-shadow:0 22px 46px -20px rgba(0,0,0,.9),inset 0 -6px 16px rgba(0,0,0,.28),inset 0 6px 14px rgba(255,255,255,.5);
  animation:coinSpin 7s linear infinite;
}
@keyframes coinSpin{
  0%{transform:rotateY(0) rotateZ(-6deg)}
  50%{transform:rotateY(180deg) rotateZ(6deg)}
  100%{transform:rotateY(360deg) rotateZ(-6deg)}
}

/* ==========================================================
   5. INNER PAGE HEROES (one per page, deliberately distinct)
   ========================================================== */
.phead{position:relative;padding-top:calc(var(--nav-h) + clamp(3rem,6vw,5.5rem));padding-bottom:clamp(2.6rem,5vw,4.5rem);overflow:clip}
.phead h1{margin-bottom:1.1rem}
.phead .lede{max-width:62ch}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.78rem;color:var(--text-dim);margin-bottom:1.4rem}
.crumbs a:hover{color:var(--gold-2)}
.crumbs span{opacity:.45}

/* about — animated gold hairline field (no particles) */
.phead-lines::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:repeating-linear-gradient(90deg,rgba(212,175,55,.14) 0 1px,transparent 1px 78px);
  mask-image:radial-gradient(ellipse 70% 80% at 30% 40%,#000,transparent 72%);
  animation:lineDrift 22s linear infinite;
}
@keyframes lineDrift{to{background-position:78px 0}}
.phead-lines::after{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:repeating-linear-gradient(0deg,rgba(180,24,46,.16) 0 1px,transparent 1px 78px);
  mask-image:radial-gradient(ellipse 60% 70% at 75% 55%,#000,transparent 70%);
}
.phead > *{position:relative;z-index:2}

/* games — arcade glow grid */
.phead-grid::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(600px 400px at 15% 20%,rgba(225,6,0,.3),transparent 60%),
    radial-gradient(600px 400px at 85% 30%,rgba(212,175,55,.14),transparent 60%);
}
.phead-grid::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:70%;z-index:0;
  background-image:linear-gradient(rgba(212,175,55,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.1) 1px,transparent 1px);
  background-size:52px 52px;
  transform:perspective(340px) rotateX(58deg);transform-origin:bottom;
  mask-image:linear-gradient(180deg,transparent,#000 70%);
  animation:gridRun 3.4s linear infinite;
}
@keyframes gridRun{to{background-position:0 52px}}

/* download — vertical light shafts */
.phead-shafts::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(90deg,transparent 8%,rgba(212,175,55,.11) 9%,transparent 10%),
    linear-gradient(90deg,transparent 28%,rgba(225,6,0,.14) 29.5%,transparent 31%),
    linear-gradient(90deg,transparent 62%,rgba(212,175,55,.1) 63%,transparent 64%),
    linear-gradient(90deg,transparent 84%,rgba(225,6,0,.12) 85%,transparent 86.5%),
    radial-gradient(900px 500px at 50% -10%,rgba(180,24,46,.32),transparent 65%);
  mask-image:linear-gradient(180deg,#000,transparent 92%);
}

/* contact — soft radial spotlight */
.phead-spot::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(700px 460px at 50% 0%,rgba(212,175,55,.2),transparent 62%),
             radial-gradient(900px 600px at 50% 30%,rgba(180,24,46,.28),transparent 66%);
}
.phead-spot::after{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(760px,110%);height:100%;z-index:0;
  border-radius:0 0 50% 50%/0 0 100% 100%;
  border:1px solid rgba(212,175,55,.18);border-top:0;
  mask-image:linear-gradient(180deg,#000,transparent 80%);
}

/* legal — calm, minimal */
.phead-calm{background:linear-gradient(180deg,#0e0e13,#0B0B0F)}
.phead-calm::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(700px 340px at 20% 0%,rgba(212,175,55,.1),transparent 62%);
}

/* game detail — cinematic banner */
.gd-hero{position:relative;padding-top:var(--nav-h);overflow:clip}
.gd-banner{position:relative;min-height:clamp(300px,42vw,460px);display:flex;align-items:flex-end;overflow:clip}
.gd-banner-bg{position:absolute;inset:0;z-index:0}
.gd-banner-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.7) blur(3px);transform:scale(1.12)}
.gd-banner-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,15,.78) 0%,rgba(11,11,15,.88) 42%,var(--obsidian) 97%),
    radial-gradient(760px 440px at 22% 60%,rgba(180,24,46,.42),transparent 66%);
}
.gd-banner-in{position:relative;z-index:2;padding-block:clamp(2rem,4vw,3.4rem);width:100%}
.gd-lock{display:flex;gap:clamp(1rem,2.4vw,1.9rem);align-items:flex-end;flex-wrap:wrap}
.gd-thumb{
  width:clamp(110px,15vw,168px);aspect-ratio:1;border-radius:20px;overflow:hidden;flex:none;
  border:1px solid rgba(212,175,55,.55);
  box-shadow:0 26px 54px -24px rgba(0,0,0,.95),0 0 44px -18px rgba(212,175,55,.7);
}
.gd-thumb img{width:100%;height:100%;object-fit:cover}
.gd-titles{flex:1 1 320px}
.gd-titles h1{font-size:clamp(1.85rem,4.4vw,3.1rem);margin-bottom:.6rem}
.gd-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.85rem}
.gd-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:.75rem;margin-top:1.6rem}
.gd-spec div{
  padding:.8rem 1rem;border-radius:14px;text-align:center;
  border:1px solid rgba(243,239,232,.08);background:rgba(11,11,15,.62);backdrop-filter:blur(8px);
}
.gd-spec small{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.3rem}
.gd-spec b{font-family:var(--font-num);font-size:1.02rem;color:var(--gold-2)}
.gd-layout{display:grid;grid-template-columns:1fr 350px;gap:clamp(1.6rem,3vw,2.8rem);align-items:start}
.gd-side{position:sticky;top:calc(var(--nav-h) + 18px)}
.gd-side .panel + .panel{margin-top:1rem}
.gd-play-card{text-align:center}
.gd-play-card .amt{font-family:var(--font-num);font-size:2.3rem;font-weight:800;line-height:1;
  background:var(--gradient-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin:.35rem 0 .2rem}

/* ==========================================================
   6. ABOUT — split + timeline
   ========================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.split-media{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--hairline)}
.split-media img{width:100%;display:block}

.timeline{position:relative;display:flex;gap:1.1rem;overflow-x:auto;padding-bottom:1.4rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.timeline::before{content:"";position:absolute;left:0;right:0;top:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-1),var(--gold-1),transparent);opacity:.35}
.tl-item{position:relative;flex:0 0 auto;width:min(300px,78vw);scroll-snap-align:start;padding-top:64px}
.tl-item::before{
  content:"";position:absolute;top:26px;left:0;width:17px;height:17px;border-radius:50%;
  background:var(--gradient-gold);box-shadow:0 0 0 5px rgba(212,175,55,.14),0 0 20px rgba(212,175,55,.7);
}
.tl-item b{display:block;font-family:var(--font-num);font-size:1.1rem;color:var(--gold-2);margin-bottom:.4rem;letter-spacing:.06em}
.tl-item h4{font-size:1.02rem;font-weight:800;margin-bottom:.45rem}
.tl-item p{font-size:.9rem;color:var(--text-mute);line-height:1.78}

/* value cards with gold outline hover */
.vcard{
  position:relative;padding:clamp(1.5rem,2.4vw,2.1rem);border-radius:var(--radius-l);
  background:rgba(11,11,15,.55);border:1px solid rgba(243,239,232,.07);overflow:hidden;
  transition:border-color .45s var(--ease),transform .5s var(--ease-out)}
.vcard::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),transparent 0deg,rgba(212,175,55,.7) 40deg,transparent 90deg);
  opacity:0;transition:opacity .45s var(--ease);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;-webkit-mask-composite:xor;padding:1px;
}
.vcard:hover{transform:translateY(-6px);border-color:rgba(212,175,55,.34)}
.vcard:hover::after{opacity:1;animation:sweepAngle 2.6s linear infinite}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes sweepAngle{to{--a:360deg}}

/* ==========================================================
   7. DOWNLOAD — stepper, QR, feature strip
   ========================================================== */
.dl-hero{display:grid;grid-template-columns:1fr .9fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.qr-box{
  display:flex;align-items:center;gap:1.15rem;padding:1.1rem;border-radius:var(--radius-l);
  border:1px solid var(--hairline);background:linear-gradient(150deg,rgba(44,44,51,.6),rgba(11,11,15,.75));
  max-width:400px;
}
.qr{
  width:104px;height:104px;flex:none;border-radius:12px;padding:8px;background:#fff;
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.qr img,.qr canvas{width:100%;height:100%;image-rendering:pixelated}
.qr::after{
  content:"";position:absolute;left:0;right:0;height:34%;
  background:linear-gradient(180deg,rgba(225,6,0,.22),transparent);
  animation:scanLine 2.6s var(--ease) infinite;
}
@keyframes scanLine{0%{top:-34%}100%{top:100%}}
.qr-box b{display:block;font-size:.98rem;margin-bottom:.25rem}
.qr-box p{font-size:.82rem;color:var(--text-mute);line-height:1.7}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;counter-reset:s}
.step{
  position:relative;padding:1.6rem 1.4rem 1.4rem;border-radius:var(--radius-l);counter-increment:s;
  background:linear-gradient(165deg,rgba(44,44,51,.55),rgba(11,11,15,.85));
  border:1px solid rgba(243,239,232,.07);overflow:hidden;
  transition:transform .5s var(--ease-out),border-color .4s var(--ease);
}
.step:hover{transform:translateY(-6px);border-color:rgba(212,175,55,.4)}
.step::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;right:.6rem;top:.1rem;font-family:var(--font-num);font-weight:800;
  font-size:4.2rem;line-height:1;color:rgba(212,175,55,.11);
}
.step .s-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:.95rem;
  background:var(--gradient-cta);color:#fff;box-shadow:0 10px 24px -12px rgba(225,6,0,.9)}
.step .s-ic svg{width:21px;height:21px}
.step h4{font-size:1rem;font-weight:800;margin-bottom:.45rem}
.step p{font-size:.9rem;color:var(--text-mute);line-height:1.78}

.dl-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:rgba(212,175,55,.16);
  border:1px solid rgba(212,175,55,.16);border-radius:var(--radius-l);overflow:hidden}
.dl-strip div{background:linear-gradient(170deg,rgba(26,26,31,.95),rgba(11,11,15,.98));padding:1.3rem 1.2rem;text-align:center;
  transition:background .4s var(--ease)}
.dl-strip div:hover{background:linear-gradient(170deg,rgba(44,44,51,.95),rgba(20,10,13,.98))}
.dl-strip small{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.35rem}
.dl-strip b{font-family:var(--font-num);font-size:1.06rem;color:var(--gold-2)}

/* ==========================================================
   8. GAMES — sticky filter bar
   ========================================================== */
.filterbar{
  position:sticky;top:var(--nav-h);z-index:40;
  padding-block:.9rem;margin-bottom:1.6rem;
  background:linear-gradient(180deg,rgba(11,11,15,.96),rgba(11,11,15,.82));
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(212,175,55,.14);
}
.filter-row{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;flex:1 1 auto}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;cursor:pointer;white-space:nowrap;border:1px solid rgba(243,239,232,.1);
  background:rgba(243,239,232,.03);color:var(--text-mute);
  padding:.55rem 1.05rem;border-radius:999px;font-size:.84rem;font-weight:700;
  transition:all .35s var(--ease);
}
.chip:hover{color:var(--text-light);border-color:rgba(212,175,55,.45)}
.chip.on{background:var(--gradient-gold);color:#231a03;border-color:transparent;box-shadow:0 8px 22px -10px rgba(212,175,55,.9)}
.chip .n{opacity:.6;font-size:.76rem;margin-left:.3rem}
.search{
  position:relative;flex:0 1 260px;min-width:190px;
}
.search input{
  width:100%;padding:.62rem 1rem .62rem 2.5rem;border-radius:999px;
  border:1px solid rgba(243,239,232,.1);background:rgba(243,239,232,.04);
  color:var(--text-light);font-size:.86rem;outline:0;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s;
}
.search input::placeholder{color:var(--text-dim)}
.search input:focus{border-color:rgba(212,175,55,.6);box-shadow:0 0 0 3px rgba(212,175,55,.12);background:rgba(243,239,232,.07)}
.search svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-dim);pointer-events:none}
select.chip{
  -webkit-appearance:none;appearance:none;
  padding:.55rem 2.1rem .55rem 1.05rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-1) 50%),linear-gradient(135deg,var(--gold-1) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
select.chip option{background:#14141a;color:var(--text-light)}
.count-note{font-size:.82rem;color:var(--text-dim);margin-bottom:1.2rem}
.count-note b{color:var(--gold-2);font-family:var(--font-num)}
.empty{padding:4rem 1rem;text-align:center;color:var(--text-dim)}
.game-card.hidden{display:none}
.load-more-wrap{display:flex;justify-content:center;margin-top:2.4rem}

/* ==========================================================
   9. CONTACT — form
   ========================================================== */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,3vw,2.8rem);align-items:start}
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-1);margin-bottom:.5rem;font-weight:700}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem 1.05rem;border-radius:12px;
  border:1px solid rgba(243,239,232,.1);background:rgba(11,11,15,.6);
  color:var(--text-light);font-size:.94rem;outline:0;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.7}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:rgba(212,175,55,.65);background:rgba(11,11,15,.85);
  box-shadow:0 0 0 3px rgba(212,175,55,.13),0 0 26px -12px rgba(212,175,55,.7);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim)}
.form-note{font-size:.82rem;color:var(--text-dim);line-height:1.75;margin-top:1rem}
.form-msg{
  margin-top:1rem;padding:.9rem 1.1rem;border-radius:12px;font-size:.88rem;display:none;
  border:1px solid rgba(212,175,55,.4);background:rgba(212,175,55,.09);color:var(--gold-2);
}
.form-msg.show{display:block;animation:fadeSlide .5s var(--ease-out)}

.contact-big{
  display:flex;gap:1.15rem;align-items:flex-start;padding:1.4rem;border-radius:var(--radius-l);
  border:1px solid rgba(42,171,238,.26);
  background:linear-gradient(150deg,rgba(42,171,238,.12),rgba(11,11,15,.55));
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.contact-big:hover{transform:translateY(-5px);border-color:rgba(42,171,238,.65);box-shadow:0 22px 44px -24px rgba(42,171,238,.9)}
.contact-big .tg-ic{width:54px;height:54px}
.contact-big .tg-ic svg{width:27px;height:27px}
.contact-big h3{font-size:1.06rem;font-weight:800;margin-bottom:.35rem}
.contact-big p{font-size:.88rem;color:var(--text-mute);line-height:1.75;margin-bottom:.65rem}
.contact-big code{
  font-family:var(--font-num);font-size:.84rem;color:#7FD0FF;
  background:rgba(42,171,238,.12);padding:.15rem .5rem;border-radius:6px;
}

/* ==========================================================
   10. LEGAL PAGES — readable column + jump links
   ========================================================== */
.legal-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(1.8rem,4vw,3.6rem);align-items:start}
.jump{position:sticky;top:calc(var(--nav-h) + 20px)}
.jump h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-1);margin-bottom:1rem}
.jump ul{list-style:none;display:grid;gap:.12rem;border-left:1px solid rgba(243,239,232,.1)}
.jump a{
  display:block;padding:.48rem .9rem;font-size:.86rem;color:var(--text-dim);
  border-left:2px solid transparent;margin-left:-1px;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.jump a:hover,.jump a.active{color:var(--gold-2);border-left-color:var(--gold-1);background:rgba(212,175,55,.05)}
.legal-body{max-width:74ch}
.legal-body section{margin-bottom:clamp(2.2rem,4vw,3.2rem);padding:0;overflow:visible}
.legal-body h2{
  font-family:var(--font-display);font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:800;
  margin-bottom:1rem;padding-bottom:.65rem;position:relative;
}
.legal-body h2::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:2px;background:var(--gradient-gold);border-radius:2px}
.legal-body h3{font-size:1.05rem;font-weight:800;margin:1.7rem 0 .65rem;color:var(--gold-2)}
.legal-body p{color:var(--text-mute);margin-bottom:1rem;line-height:1.9}
.legal-body ul{list-style:none;display:grid;gap:.65rem;margin-bottom:1.2rem}
.legal-body ul li{position:relative;padding-left:1.5rem;color:var(--text-mute);line-height:1.85}
.legal-body ul li::before{content:"";position:absolute;left:.2rem;top:.78em;width:6px;height:6px;border-radius:50%;background:var(--gold-1)}
.legal-body strong{color:var(--text-light)}
.legal-note{
  padding:1.2rem 1.4rem;border-radius:var(--radius);margin-bottom:1.5rem;
  border:1px solid rgba(225,6,0,.3);background:rgba(225,6,0,.07);
}
.legal-note p{color:var(--text-light);margin:0;font-size:.92rem}
.updated{font-size:.82rem;color:var(--text-dim);margin-bottom:2rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(243,239,232,.08)}

/* ==========================================================
   11. Shared content blocks
   ========================================================== */
.cta-band{
  position:relative;text-align:center;padding:clamp(2.6rem,5vw,4.2rem) clamp(1.4rem,3vw,3rem);
  border-radius:var(--radius-xl);overflow:hidden;
  background:linear-gradient(150deg,rgba(180,24,46,.32),rgba(11,11,15,.9) 60%);
  border:1px solid rgba(212,175,55,.28);
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 50% 0%,rgba(212,175,55,.2),transparent 65%);
}
.cta-band > *{position:relative;z-index:2}
.cta-band h2{margin-bottom:1rem}
.cta-band p{max-width:62ch;margin-inline:auto}
.cta-band .btn-row{justify-content:center;margin-top:1.9rem}

.kw-cloud{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.kw-cloud a,.kw-cloud span{
  font-size:.78rem;padding:.42rem .9rem;border-radius:999px;color:var(--text-mute);
  border:1px solid rgba(243,239,232,.09);background:rgba(243,239,232,.025);
  transition:all .35s var(--ease);
}
.kw-cloud a:hover{color:var(--gold-2);border-color:rgba(212,175,55,.5);background:rgba(212,175,55,.07)}

.two-col-text{columns:2;column-gap:clamp(1.8rem,3.5vw,3rem)}
.two-col-text p{break-inside:avoid;margin-bottom:1.05rem;color:var(--text-mute)}

.quote{
  position:relative;padding:clamp(1.5rem,3vw,2.4rem) clamp(1.5rem,3vw,2.6rem);
  border-radius:var(--radius-l);border-left:3px solid var(--gold-1);
  background:linear-gradient(100deg,rgba(212,175,55,.09),rgba(11,11,15,.4));
}
.quote p{font-family:var(--font-display);font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.6;color:var(--text-light)}
.quote cite{display:block;margin-top:1rem;font-style:normal;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-1)}

/* payment / provider logos as text pills */
.logo-row{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center}
.logo-row span{
  padding:.6rem 1.2rem;border-radius:12px;font-weight:800;font-size:.88rem;letter-spacing:.04em;
  color:var(--text-mute);border:1px solid rgba(243,239,232,.09);
  background:linear-gradient(160deg,rgba(44,44,51,.5),rgba(11,11,15,.6));
  transition:all .4s var(--ease);
}
.logo-row span:hover{color:var(--gold-2);border-color:rgba(212,175,55,.4);transform:translateY(-3px)}

/* ==========================================================
   12. Responsive
   ========================================================== */
@media (max-width:1024px){
  /* single column: headline copy, then the phone mockup, then the bonus
     button — the mockup sits directly above the ₹10,000 CTA it's selling. */
  .hero-in{
    grid-template-columns:1fr;
    grid-template-areas:"top" "device" "bottom";
    row-gap:1.8rem;
  }
  .hero-copy-top,.hero-copy-bottom{max-width:none;text-align:center;margin-inline:auto;align-self:auto}
  .hero-copy-bottom .btn-row,.hero-trust{justify-content:center}
  .gd-layout{grid-template-columns:1fr}
  .gd-side{position:static}
  .contact-grid{grid-template-columns:1fr}
  .legal-layout{grid-template-columns:1fr}
  .jump{position:static;margin-bottom:1.8rem}
  .jump ul{display:flex;flex-wrap:wrap;border-left:0;gap:.4rem}
  .jump a{border:1px solid rgba(243,239,232,.1);border-radius:999px;padding:.4rem .85rem;font-size:.8rem;margin:0}
  .jump a:hover,.jump a.active{border-color:rgba(212,175,55,.5)}
  .dl-hero{grid-template-columns:1fr;text-align:center}
  .dl-hero .qr-box{margin-inline:auto;text-align:left}
  .dl-hero .btn-row{justify-content:center}
  .split{grid-template-columns:1fr}
  .promo-in{grid-template-columns:1fr;text-align:center;justify-items:center}
  .two-col-text{columns:1}
}
@media (max-width:620px){
  .hero{min-height:auto}
  .og-overlay{position:static;background:rgba(11,11,15,.8)}
  .filterbar{padding-block:.7rem}
  .gd-lock{align-items:center}
  .cta-band .btn-row .btn{width:100%}
}