/* ═══════════════════════════════════════════════════════════════════
   GRAVYPASS — "Get Paid To Scroll" landing page
   Plain HTML / CSS / JS. No frameworks, no build step.

   TO GO LIVE: set OFFER_URL in the <script> at the bottom of this file.
   Theme colours: change --hue-a / --hue-b below.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --hue-a: 219;
  --hue-b: 232;
  --a:  oklch(0.72 0.19 var(--hue-a));   /* accent A            */
  --b:  oklch(0.72 0.19 var(--hue-b));   /* accent B            */
  --as: oklch(0.85 0.12 var(--hue-a));   /* accent A, softened  */
  --bs: oklch(0.85 0.12 var(--hue-b));   /* accent B, softened  */
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  background:#03090F; color:#fff;
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  letter-spacing:-0.01em;
  min-height:100vh; min-height:100dvh;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button{ font-family:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
input, textarea{ font-size:16px; }
img{ max-width:100%; }

#root{
  min-height:100vh; min-height:100dvh;
  width:100%;
  background:#0A1626;
  display:flex; justify-content:center;
}
.stage{ width:100%; max-width:100%; }

/* ───────── page shell ───────── */
.card{
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100dvh;
  background:linear-gradient(180deg,#0A1626 0%,#061320 60%,#03090F 100%);
  padding-top:max(18px, env(safe-area-inset-top));
  padding-bottom:max(32px, env(safe-area-inset-bottom));
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
}
/* film grain for depth */
.card::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.045; mix-blend-mode:overlay;
}
.blob{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.blob-a{ top:-50px; left:-40px; width:240px; height:240px;
  background:radial-gradient(circle, color-mix(in oklch, var(--a) 35%, transparent) 0%, transparent 65%); }
.blob-b{ top:140px; right:-60px; width:220px; height:220px;
  background:radial-gradient(circle, color-mix(in oklch, var(--b) 30%, transparent) 0%, transparent 65%); }

.content{ position:relative; z-index:1; animation:riseIn .75s cubic-bezier(0.16,1,0.3,1) both; }

/* ───────── top bar ───────── */
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo img{ width:34px; height:34px; border-radius:8px; display:block;
  box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08); }
.logo span{ font-family:"Poppins",-apple-system,sans-serif; font-weight:700; font-size:21px;
  letter-spacing:-0.02em; color:#fff; line-height:1; }

.livepill{
  display:flex; align-items:center; gap:6px;
  font-size:10.5px; color:var(--as); font-weight:600; letter-spacing:.01em;
  background:color-mix(in oklch, var(--a) 12%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:7px 13px; border-radius:99px;
  border:1px solid color-mix(in oklch, var(--a) 24%, transparent);
  white-space:nowrap;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--a);
  box-shadow:0 0 8px var(--a); animation:fcPulse 1.2s ease-in-out infinite; flex-shrink:0; }

/* ───────── headline ───────── */
h1.headline{
  font-family:"Inter Tight",sans-serif; font-weight:900;
  font-size:40px; line-height:.96; letter-spacing:-0.04em;
  text-align:center; margin:10px 0 12px;
}
.hl1{
  display:inline-block;
  background:linear-gradient(100deg,#fff 0%,#fff 43%,#CFF3FF 50%,#fff 57%,#fff 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:headlineShine 13s linear infinite;
}
.hl2{
  display:inline-block; font-size:min(58px,12.5vw); line-height:.95;
  background:linear-gradient(100deg, var(--as) 0%, var(--as) 40%, #FFFFFF 50%, var(--bs) 60%, var(--bs) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 24px color-mix(in oklch, var(--a) 42%, transparent));
  animation:headlineShine 13s linear infinite;
}
p.sub{ text-align:center; font-size:13.5px; color:rgba(255,255,255,.65); margin:0 8px 12px; line-height:1.45; }

/* ───────── rank ladder ───────── */
.ladder{ margin:2px 0 16px; }
.ladder-head{
  display:flex; align-items:center; gap:7px; margin:0 2px 8px;
  font-size:9.5px; font-weight:800; letter-spacing:.16em;
  color:rgba(255,255,255,.34); text-transform:uppercase;
}
.ladder-head i{ flex:1; height:1px; font-style:normal; }
.ladder-head i:first-child{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.14)); }
.ladder-head i:last-child{  background:linear-gradient(90deg,rgba(255,255,255,.14),transparent); }
.ladder-rows{ display:flex; flex-direction:column; gap:8px; }
.tier{ position:relative; animation:tlRise .62s cubic-bezier(0.16,1,0.3,1) both; }
.tier-inner{
  position:relative; z-index:1; overflow:hidden;
  display:flex; align-items:center; gap:11px;
  padding:10px 13px 10px 10px; border-radius:17px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.tier-badge{
  position:relative; z-index:3; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; gap:4px;
  min-width:74px; padding:7px 11px; border-radius:99px;
  font-family:"Inter Tight",sans-serif; font-weight:900; font-size:12.5px; letter-spacing:.04em;
}
.tier-txt{ position:relative; z-index:3; flex:1; min-width:0; text-align:right; }
.tier-req{ font-size:11.5px; font-weight:700; letter-spacing:-0.01em; line-height:1.25; }
.tier-perk{ margin-top:2.5px; font-size:10.5px; font-weight:600; line-height:1.3; letter-spacing:-0.005em; color:#5FC7E3; }
.tier-sheen{
  position:absolute; top:0; bottom:0; left:0; width:38%; z-index:2; pointer-events:none;
}

/* noob */
.t-noob .tier-inner{ background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.018)); border:1px solid rgba(255,255,255,.10); }
.t-noob .tier-badge{ background:linear-gradient(150deg,#A2ABB3 0%,#737C83 52%,#545C62 100%); color:#0D1013; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.t-noob .tier-req{ color:rgba(255,255,255,.52); }
/* pro */
.t-pro .tier-inner{ background:linear-gradient(135deg,rgba(147,51,234,.16),rgba(88,28,135,.07)); border:1px solid rgba(168,85,247,.32); animation:tlProGlow 3s ease-in-out infinite; }
.t-pro .tier-badge{ background:linear-gradient(150deg,#C084FC 0%,#A855F7 45%,#7C3AED 100%); color:#160726; box-shadow:0 3px 14px rgba(147,51,234,.5), inset 0 1px 0 rgba(255,255,255,.4); }
.t-pro .tier-req{ color:rgba(233,213,255,.78); }
.t-pro .tier-sheen{ background:linear-gradient(90deg,transparent,rgba(233,213,255,.24),transparent); animation:tlSheen 4.2s ease-in-out infinite; }
/* god / scroller */
.t-god .tier-inner{ background:linear-gradient(135deg,rgba(255,196,84,.17),rgba(146,90,10,.07)); border:1px solid rgba(255,199,89,.40);
  box-shadow:0 4px 24px rgba(226,150,20,.26), inset 0 1px 0 rgba(255,255,255,.14); }
.t-god .tier-badge{ background:linear-gradient(150deg,#FFE9A8 0%,#FFC65C 42%,#E39A16 100%); color:#241300; box-shadow:0 3px 14px rgba(255,178,44,.55), inset 0 1px 0 rgba(255,255,255,.65); }
.t-god .tier-req{ color:rgba(255,231,178,.82); }
.t-god .tier-sheen{ background:linear-gradient(90deg,transparent,rgba(255,236,190,.30),transparent); animation:tlSheen 3.4s ease-in-out .5s infinite; }
.t-god .tier-perk{
  color:transparent;
  background:linear-gradient(100deg,#E0A93C 0%,#F6C860 18%,#FFE9A8 32%,#FFFBEA 40%,#FFE9A8 48%,#F6C860 62%,#E0A93C 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 6px rgba(255,199,89,.32));
  animation:tlGoldFlow 3.4s ease-in-out .5s infinite;
}
.god-aura{
  position:absolute; inset:-7px; border-radius:24px; z-index:0; pointer-events:none;
  background:radial-gradient(60% 120% at 18% 50%, rgba(255,201,92,.55) 0%, rgba(255,170,40,.20) 45%, transparent 78%);
  filter:blur(11px); animation:tlGodAura 2.6s ease-in-out infinite;
}
.god-spark{
  position:absolute; top:-2px; right:-1px; width:5px; height:5px; border-radius:50%;
  background:#FFF6DC; box-shadow:0 0 8px 2px rgba(255,224,150,.95);
  animation:tlSpark 2.2s ease-in-out infinite;
}

/* ───────── scroll-to-earn pill ───────── */
.se{
  position:relative; margin:0 0 16px; padding:11px 13px 13px;
  border-radius:20px; overflow:hidden;
  background:linear-gradient(150deg, rgba(84,216,252,.10) 0%, rgba(255,255,255,.035) 45%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(84,216,252,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 26px rgba(0,0,0,.28);
}
.se-bar{
  position:relative; display:flex; align-items:flex-end; justify-content:space-between;
  padding-bottom:10px; margin-bottom:11px; border-bottom:1px solid rgba(255,255,255,.08);
}
.se-label{
  display:flex; align-items:center; gap:5px;
  font-size:9px; font-weight:800; letter-spacing:.14em;
  color:rgba(255,255,255,.42); text-transform:uppercase; margin-bottom:3px;
}
.se-label .dot{ width:5px; height:5px; background:#54D8FC; box-shadow:0 0 8px #54D8FC; }
.se-balrow{ display:flex; align-items:baseline; gap:6px; }
#seBal{
  font-family:"Inter Tight",sans-serif; font-weight:900; font-size:27px; line-height:1;
  letter-spacing:-0.03em; color:#BAE6FD; text-shadow:0 0 18px rgba(84,216,252,.5);
  display:inline-block;
}
#seBal.pop{ animation:seBalPop .5s cubic-bezier(0.16,1,0.3,1); }
.se-usd{ font-size:10px; font-weight:700; color:rgba(255,255,255,.34); }
.se-lane{ position:relative; flex:1; align-self:stretch; min-width:44px; }
.se-fly{
  position:absolute; left:50%; bottom:4px; transform:translate(-50%,0); white-space:nowrap;
  font-family:"Inter Tight",sans-serif; font-weight:900; font-size:15px; letter-spacing:-0.02em;
  color:#54D8FC; text-shadow:0 0 14px rgba(84,216,252,.75);
  animation:seFly 1.1s cubic-bezier(0.16,1,0.3,1) forwards; pointer-events:none;
}
.se-rate{
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 9px; border-radius:99px;
  background:rgba(84,216,252,.12); border:1px solid rgba(84,216,252,.28);
  font-size:9.5px; font-weight:800; letter-spacing:.01em; color:#BAE6FD;
}
.se-body{ display:flex; align-items:center; gap:13px; }
.se-phone{
  position:relative; flex-shrink:0; width:112px; height:180px; padding:4px;
  border-radius:17px; background:linear-gradient(160deg,#2A3646,#0D1622);
  box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16);
}
.se-screen{ position:relative; width:104px; height:172px; border-radius:13px; overflow:hidden; background:#060C12; }
.se-reel{
  position:absolute; left:0; top:0; width:104px; height:172px;
  transition:transform .62s cubic-bezier(0.22,1,0.28,1); will-change:transform;
}
.se-reel .sweep{ position:absolute; inset:0; background:radial-gradient(90% 60% at 30% 22%, rgba(255,255,255,.16), transparent 70%); }
.se-tag{
  position:absolute; top:6px; left:6px; padding:2px 5px; border-radius:5px;
  background:rgba(0,0,0,.42); backdrop-filter:blur(4px);
  font-size:6.5px; font-weight:800; letter-spacing:.06em;
  color:rgba(255,255,255,.82); text-transform:uppercase;
}
.se-rail{ position:absolute; right:4px; bottom:40px; display:flex; flex-direction:column; gap:7px; align-items:center; }
.se-act{ display:flex; flex-direction:column; align-items:center; gap:1px; }
.se-act > span:first-child{ display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
.se-act .n{ font-size:6px; font-weight:800; letter-spacing:-0.01em; color:rgba(255,255,255,.92); text-shadow:0 1px 3px rgba(0,0,0,.8); }
.se-reel.cur .like{ animation:seLike .75s cubic-bezier(0.16,1,0.3,1) .25s both; }
.se-creator{ position:absolute; left:6px; right:6px; bottom:7px; }
.se-creator .who{ display:flex; align-items:center; gap:4px; margin-bottom:4px; }
.se-creator img{ width:14px; height:14px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.5); }
.se-creator .handle{ font-size:7.5px; font-weight:800; color:#fff; letter-spacing:-0.01em; }
.se-creator .l1{ height:3px; border-radius:2px; background:rgba(255,255,255,.30); width:78%; margin-bottom:3px; }
.se-creator .l2{ height:3px; border-radius:2px; background:rgba(255,255,255,.18); width:52%; }
.se-stampwrap{ position:absolute; top:62px; left:4px; right:28px; z-index:4; display:flex; justify-content:center; pointer-events:none; }
.se-stamp{
  padding:4px 8px; border-radius:99px;
  background:rgba(6,19,32,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(84,216,252,.55);
  font-family:"Inter Tight",sans-serif; font-weight:900; font-size:11.5px; color:#54D8FC;
  text-shadow:0 0 10px rgba(84,216,252,.8); white-space:nowrap;
  animation:seStamp 1.5s ease-out both;
}
.se-thumb{
  position:absolute; right:13px; bottom:16px; z-index:5;
  width:15px; height:22px; border-radius:99px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.25));
  box-shadow:0 0 12px rgba(255,255,255,.5);
  animation:seThumb 1.55s ease-in-out infinite; pointer-events:none;
}
.se-glass{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(200deg,rgba(255,255,255,.13) 0%,transparent 38%); }
.se-copy{ flex:1; min-width:0; }
.se-h{ font-family:"Inter Tight",sans-serif; font-weight:900; font-size:17px; line-height:1.32; letter-spacing:-0.03em; margin-bottom:6px; }
.se-glint{
  background:linear-gradient(100deg,#FFFFFF 0%,#CFF3FF 40%,#FFFFFF 70%,#FFFFFF 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:seGlint 4.5s linear infinite;
}
.se-copy p{ margin:0; font-size:11px; line-height:1.42; color:rgba(255,255,255,.62); letter-spacing:-0.005em; }
.se-copy p b{ color:#BAE6FD; font-weight:800; }
.applepay{ display:inline-flex; align-items:center; gap:2.8px; line-height:0; vertical-align:middle; }
.applepay svg{ display:block; margin-bottom:1.4px; }
.applepay .pay{
  font-family:-apple-system, BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,sans-serif;
  font-weight:500; font-size:16.8px; letter-spacing:-0.015em; color:#fff; line-height:1; white-space:nowrap;
}

/* ───────── 3 steps ───────── */
.steps{
  margin-top:30px; margin-bottom:4px; padding:20px 16px 18px;
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08); border-radius:22px;
}
.steps h3{
  font-family:"Inter Tight",sans-serif; font-weight:900;
  font-size:24px; line-height:1.05; letter-spacing:-0.035em;
  margin:0 0 14px; text-align:center;
}
.step{
  display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:13px; margin-bottom:8px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
}
.step.first{ background:rgba(255,255,255,.05); border:1px solid color-mix(in oklch, var(--a) 40%, transparent); }
.step img.pass{ width:46px; height:46px; border-radius:12px; flex-shrink:0; object-fit:cover;
  box-shadow:0 4px 14px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.14); }
.step .num{
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  background:color-mix(in oklch, var(--a) 20%, transparent);
  border:1px solid color-mix(in oklch, var(--a) 45%, transparent);
  display:flex; align-items:center; justify-content:center;
  font-family:"Inter Tight",sans-serif; font-weight:900; font-size:15px; color:var(--as);
}
.step .body{ flex:1; min-width:0; }
.step .t{ font-size:14px; font-weight:800; color:#fff; margin-bottom:2px; }
.step .d{ font-size:12px; color:rgba(255,255,255,.6); line-height:1.4; }
.step .meta{ display:flex; align-items:center; gap:6px; margin-top:6px; font-size:10.5px; font-weight:700; color:rgba(255,255,255,.5); }
.step .meta .stars{ display:flex; gap:1px; }
.step .add{
  flex-shrink:0; cursor:pointer;
  font-size:12px; font-weight:800; letter-spacing:.03em; color:#fff;
  background:linear-gradient(180deg, var(--a), var(--b));
  padding:7px 18px; border-radius:99px;
  box-shadow:0 4px 14px color-mix(in oklch, var(--a) 42%, transparent);
}

/* neon button */
.neon{
  --na:var(--a); --nb:var(--b);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:17px 18px;
  background:transparent; color:#042033; border:none; border-radius:16px;
  font-family:"Inter Tight",sans-serif; font-weight:900; font-size:15.5px; letter-spacing:.03em;
  cursor:pointer; transform:scale(1); transition:transform .12s ease;
  box-shadow:0 12px 30px -8px color-mix(in oklch, var(--na) 60%, transparent), 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.neon:active{ transform:scale(.985); }
.neon > .lbl{ position:relative; z-index:2; text-shadow:0 1px 0 rgba(255,255,255,.28); }
.neon .fill{ position:absolute; inset:0; background:linear-gradient(180deg,#54D8FC 0%,#38BDF8 52%,#1E9FE0 100%); z-index:0; }
.neon .gloss{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.06) 42%,transparent 60%); }
.neon .sheen{ position:absolute; top:0; bottom:0; left:-45%; width:40%; z-index:1; pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); animation:btnSheen 5s ease-in-out infinite; }

/* ───────── locked apps gallery ───────── */
.gallery{
  margin-top:30px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in oklch, var(--a) 16%, transparent), color-mix(in oklch, var(--b) 14%, transparent));
  border:1px solid color-mix(in oklch, var(--a) 38%, transparent);
  border-radius:22px; padding:16px 14px 18px;
}
.gallery h4{
  font-family:"Inter Tight",sans-serif; font-weight:900; font-size:16px; line-height:1.2;
  letter-spacing:-0.01em; margin:0 0 16px;
}
.grad{
  background:linear-gradient(90deg, var(--as), var(--bs));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.marquee{
  position:relative; margin:0 -14px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{ display:flex; width:max-content; will-change:transform; backface-visibility:hidden;
  animation:gravyRoll 26s linear infinite; }
.app{ width:72px; margin-right:16px; flex-shrink:0; text-align:center; }
.app .shot{ position:relative; width:72px; height:72px; margin-bottom:6px; }
.app img{ width:72px; height:72px; border-radius:16px; display:block; object-fit:cover;
  filter:grayscale(1) brightness(.92) contrast(.95); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.app .lock{ position:absolute; inset:0; border-radius:16px; background:rgba(8,10,16,.34);
  display:flex; align-items:center; justify-content:center; }
.app .nm{ font-size:9.5px; font-weight:600; color:rgba(255,255,255,.55); line-height:1.1; white-space:nowrap; }
.unlock-wrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.unlock{
  pointer-events:auto; display:inline-flex; align-items:center; gap:8px;
  font-family:"Inter Tight",sans-serif; font-weight:900; font-size:14px; letter-spacing:.03em;
  color:#042033; background:linear-gradient(180deg,#54D8FC,#1E9FE0);
  border:none; border-radius:99px; padding:11px 22px; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ───────── final CTA + footer ───────── */
.final{ margin-top:30px; text-align:center; }
.final h2{ font-family:"Inter Tight",sans-serif; font-weight:900; font-size:26px;
  letter-spacing:-0.035em; margin:0 0 6px; line-height:1.05; }
.final p{ font-size:13px; color:rgba(255,255,255,.65); margin:0 0 14px; line-height:1.45; }
.badge-link{
  display:inline-block; cursor:pointer; line-height:0; border-radius:11px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 26px color-mix(in oklch, var(--a) 26%, transparent);
}
.badge-link img{ display:block; width:220px; height:auto; }
.legal{ font-size:9.5px; color:rgba(255,255,255,.32); text-align:center; margin-top:16px; line-height:1.4; }
.links{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; }
.links a{ font-size:10.5px; color:var(--as); text-decoration:none; font-weight:600; }
.links .sep{ color:rgba(255,255,255,.25); font-size:10px; }
.copyright{ font-size:9px; color:rgba(255,255,255,.28); text-align:center; margin-top:8px; }
.clearance{ height:calc(150px + env(safe-area-inset-bottom)); }

/* ───────── sticky CTA ───────── */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  display:flex; justify-content:center;
  padding:11px 13px calc(9px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(3,9,15,0) 0%,rgba(3,9,15,.86) 34%,rgba(3,9,15,.97) 100%);
  backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  animation:scBarIn .5s cubic-bezier(0.16,1,0.3,1) both;
}
.sticky .hairline{
  position:absolute; top:0; left:0; right:0; height:1px; opacity:.75;
  background:linear-gradient(90deg,transparent, color-mix(in oklch, var(--a) 70%, transparent) 25%, color-mix(in oklch, var(--b) 70%, transparent) 75%, transparent);
}
.sticky-inner{ width:100%; max-width:440px; }
.listing{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.listing .iconwrap{ position:relative; flex-shrink:0; }
.listing .iconwrap img{ display:block; width:46px; height:46px; border-radius:11px;
  box-shadow:0 5px 16px rgba(0,0,0,.55), 0 0 22px color-mix(in oklch, var(--a) 26%, transparent), inset 0 0 0 1px rgba(255,255,255,.14); }
.listing .tick{
  position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(140deg, var(--a), var(--b)); border:2px solid #060F18;
  display:flex; align-items:center; justify-content:center;
}
.listing .meta{ flex:1; min-width:0; }
.listing .nmrow{ display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.listing .brand{ font-family:"Poppins",-apple-system,sans-serif; font-weight:700; font-size:15px;
  letter-spacing:-0.02em; color:#fff; line-height:1.1; }
.listing .chip{
  display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:5px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.10);
  font-size:8px; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.72);
}
.listing .rate{ display:flex; align-items:center; gap:5px; margin-bottom:3px; }
.listing .rate .stars{ display:flex; gap:.5px; }
.listing .rate .val{ font-size:10.5px; font-weight:800; color:#fff; letter-spacing:-0.01em; }
.listing .rate .cnt{ font-size:9.5px; font-weight:600; color:rgba(255,255,255,.45); }
.listing .rank{
  display:inline-flex; align-items:center; gap:4px; padding:2.5px 7px; border-radius:99px;
  background:linear-gradient(120deg,rgba(255,198,92,.20),rgba(255,198,92,.07));
  border:1px solid rgba(255,198,92,.34);
}
.listing .rank span{ font-size:9px; font-weight:800; letter-spacing:.01em; color:#FFD98F; }
.wallet-btn{
  position:relative; overflow:hidden; width:100%; border:none; cursor:pointer;
  padding:14px 18px; border-radius:99px;
  background:linear-gradient(100deg, var(--a) 0%, var(--b) 100%);
  color:#042033; font-family:"Inter Tight",sans-serif; font-weight:900; font-size:16.5px; letter-spacing:-0.02em;
  box-shadow:0 7px 26px color-mix(in oklch, var(--a) 46%, transparent), inset 0 1px 0 rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
}
.wallet-btn .sheen{
  position:absolute; top:0; bottom:0; width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);
  animation:scSheen 3.2s ease-in-out infinite; pointer-events:none;
}
.wallet-btn .lbl{ position:relative; z-index:2; display:flex; align-items:center; gap:8px; }
.fineprint{ text-align:center; margin-top:6px; font-size:9px; font-weight:700; letter-spacing:.03em; color:rgba(255,255,255,.40); }

/* ───────── age gate (only shown when TWEAKS.skipAgeGate = false) ───────── */
.gate{ padding:28px 22px 22px !important; background:linear-gradient(180deg,#0A1626 0%,#061320 100%); }
.gate .glow{ position:absolute; top:-40px; right:-20px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in oklch, var(--a) 40%, transparent) 0%, transparent 65%); pointer-events:none; }
.gate .verified{
  display:flex; align-items:center; gap:5px; font-size:10px; font-weight:700; color:var(--bs);
  background:color-mix(in oklch, var(--b) 10%, transparent);
  padding:5px 9px; border-radius:99px; border:1px solid color-mix(in oklch, var(--b) 30%, transparent);
}
.gate .shieldbox{
  width:60px; height:60px; border-radius:22px; margin-bottom:18px;
  background:linear-gradient(135deg, color-mix(in oklch, var(--a) 25%, transparent), color-mix(in oklch, var(--b) 15%, transparent));
  border:1px solid color-mix(in oklch, var(--a) 40%, transparent);
  display:flex; align-items:center; justify-content:center;
}
.gate h1{ font-family:"Inter Tight",sans-serif; font-weight:800; font-size:30px; line-height:1.05;
  letter-spacing:-0.035em; margin:0 0 8px; }
.gate .lede{ font-size:13.5px; color:rgba(255,255,255,.6); line-height:1.45; margin:0 0 22px; }
.agecard{
  display:flex; align-items:center; gap:14px; padding:15px; width:100%;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; cursor:pointer; color:#fff; transition:all .2s; transform:scale(1);
}
.agecard .ic{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.agecard .tx{ flex:1; text-align:left; }
.agecard .tt{ font-family:"Inter Tight",sans-serif; font-weight:700; font-size:16px; letter-spacing:-0.02em; margin-bottom:2px; }
.agecard .ss{ font-size:12px; color:rgba(255,255,255,.55); }
.agecard .ar{ font-size:20px; font-weight:800; transition:transform .2s; }
.agecard:hover .ar{ transform:translateX(3px); }
.agecard.sel{ transform:scale(.98); }
.gate .confirm{ font-size:11px; color:rgba(255,255,255,.4); text-align:center; margin:18px 0 14px; line-height:1.4; }
.gate .approved{
  display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px;
  background:color-mix(in oklch, var(--b) 8%, transparent);
  border:1px solid color-mix(in oklch, var(--b) 18%, transparent);
  border-radius:99px; font-size:11px; color:var(--bs); font-weight:600; width:fit-content; margin:0 auto;
}

/* ───────── qualified flash ───────── */
.flash{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(ellipse at center, color-mix(in oklch, var(--a) 16%, transparent) 0%, #061320 60%, #03090F 100%);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  padding:24px; overflow:hidden; animation:qfFadeIn .2s ease-out;
}
.flash .rays{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; animation:qfSpin 6s linear infinite; }
.flash .checkbadge{
  width:96px; height:96px; border-radius:50%;
  background:linear-gradient(135deg, var(--a), var(--b));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 60px var(--a), 0 0 120px color-mix(in oklch, var(--a) 50%, transparent);
  animation:qfPop .5s cubic-bezier(.2,1.4,.4,1); margin-bottom:22px; position:relative; z-index:2;
}
.flash .checkbadge polyline{ stroke-dasharray:30; stroke-dashoffset:30; animation:qfCheck .4s ease-out .2s forwards; }
.flash .txt{ position:relative; z-index:2; text-align:center; animation:qfSlideUp .4s cubic-bezier(.2,.8,.3,1) .1s backwards; }
.flash .kicker{ font-size:11px; letter-spacing:.22em; font-weight:800; color:var(--bs); margin-bottom:10px; }
.flash h1{ font-family:"Inter Tight",sans-serif; font-weight:900; font-size:36px; line-height:1;
  letter-spacing:-0.04em; margin:0 0 10px; color:#fff; }
.flash .loading{ font-size:13px; color:rgba(255,255,255,.7); margin-top:14px;
  display:flex; align-items:center; justify-content:center; gap:8px; }
.flash .spinner{ width:14px; height:14px; border-radius:50%; border:2px solid var(--b);
  border-top-color:transparent; animation:qfSpin .8s linear infinite; }
.flash .conf{ position:absolute; top:50%; width:8px; height:12px; border-radius:2px; }

/* ───────── keyframes ───────── */
@keyframes fcPulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.3);} }
@keyframes gravyRoll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes btnSheen{ 0%{left:-45%;} 55%,100%{left:140%;} }
@keyframes headlineShine{ 0%{background-position:0% 0;} 8%{background-position:100% 0;} 100%{background-position:100% 0;} }
@keyframes riseIn{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:none;} }
@keyframes tlRise{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
@keyframes tlSheen{ 0%{transform:translateX(-130%) skewX(-18deg);} 55%,100%{transform:translateX(320%) skewX(-18deg);} }
@keyframes tlProGlow{
  0%,100%{ box-shadow:inset 0 0 0 1px rgba(168,85,247,.28), 0 4px 20px rgba(124,58,237,.20); }
  50%    { box-shadow:inset 0 0 0 1px rgba(192,132,252,.48), 0 4px 28px rgba(147,51,234,.42); }
}
@keyframes tlGodAura{ 0%,100%{opacity:.45;transform:scale(.985);} 50%{opacity:.9;transform:scale(1.015);} }
@keyframes tlGoldFlow{ 0%{background-position:0% 50%;} 55%,100%{background-position:200% 50%;} }
@keyframes tlSpark{ 0%,100%{opacity:0;transform:scale(.4);} 50%{opacity:1;transform:scale(1);} }
@keyframes seBalPop{ 0%{transform:scale(1);} 30%{transform:scale(1.13);filter:brightness(1.5);} 100%{transform:scale(1);filter:brightness(1);} }
@keyframes seFly{
  0%  { opacity:0; transform:translate(-50%,6px) scale(.8); }
  18% { opacity:1; transform:translate(-50%,0) scale(1.06); }
  55% { opacity:1; transform:translate(-50%,-18px) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-33px) scale(.9); }
}
@keyframes seStamp{
  0%  { opacity:0; transform:translateY(4px) scale(.7); }
  25% { opacity:1; transform:translateY(0) scale(1.1); }
  70% { opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(-10px) scale(.95); }
}
@keyframes seThumb{
  0%      { opacity:0;   transform:translateY(16px) scale(.9); }
  22%     { opacity:.85; }
  62%     { opacity:.55; transform:translateY(-16px) scale(1); }
  80%,100%{ opacity:0;   transform:translateY(-24px) scale(.92); }
}
@keyframes seGlint{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
@keyframes seLike{
  0%  { transform:scale(1); }
  35% { transform:scale(1.45); filter:drop-shadow(0 0 7px rgba(255,59,92,.95)); }
  60% { transform:scale(.92); }
  100%{ transform:scale(1); }
}
@keyframes scBarIn{ from{opacity:0;transform:translateY(115%);} to{opacity:1;transform:none;} }
@keyframes scSheen{ 0%{left:-50%;} 55%,100%{left:145%;} }
@keyframes qfFadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes qfSpin{ to{transform:rotate(360deg);} }
@keyframes qfPop{ 0%{transform:scale(.3);opacity:0;} 60%{transform:scale(1.08);opacity:1;} 100%{transform:scale(1);} }
@keyframes qfCheck{ to{stroke-dashoffset:0;} }
@keyframes qfSlideUp{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
@keyframes qfConfetti{
  0%  { transform:translateY(-20px) rotate(0deg); opacity:0; }
  15% { opacity:1; }
  100%{ transform:translateY(120vh) rotate(720deg); opacity:0; }
}