/* ===== home / landing page styles ===== */

/* hero */
.hero{ padding:60px 0 40px; position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:54px; align-items:center; }
.hero-badge{ display:inline-flex; align-items:center; gap:9px; background:var(--cr-wash); border:1px solid var(--cr-line); color:var(--cr-deep); font-weight:650; font-size:13px; padding:7px 14px; border-radius:999px; margin-bottom:22px; }
.hero h1{ max-width:13ch; }
.hero h1 em{ font-style:italic; color:var(--co); }
.hero .lede{ margin-top:22px; font-size:clamp(16px,1.5vw,19px); color:var(--tx-mut); max-width:46ch; line-height:1.62; }
.hero-cta{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-cta .micro{ font-family:var(--mono); font-size:11.5px; color:var(--tx-faint); display:flex; align-items:center; gap:7px; }
.hero-stats{ margin-top:36px; display:flex; gap:30px; flex-wrap:wrap; }
.hero-stats .st{ display:flex; flex-direction:column; gap:3px; }
.hero-stats .st .v{ font-family:var(--serif); font-size:30px; font-weight:520; letter-spacing:-0.02em; }
.hero-stats .st .v small{ font-size:.55em; color:var(--co); }
.hero-stats .st .k{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--tx-faint); }
.hero-rate{ display:flex; align-items:center; gap:10px; margin-top:26px; }
.hero-rate .rc{ font-size:13.5px; color:var(--tx-mut); } .hero-rate .rc b{ color:var(--ink); }

.hero-visual{ position:relative; aspect-ratio:5/5.6; border-radius:var(--r-2xl); overflow:hidden; border:1px solid var(--co-line); display:grid; place-items:center;
  background:radial-gradient(120% 90% at 70% 8%, color-mix(in oklab,var(--co) 16%, transparent), transparent 55%), linear-gradient(165deg, var(--co-wash), var(--paper-2)); }
.hero-visual .dots{ position:absolute; inset:0; opacity:.5; background-image:radial-gradient(var(--co-line) 1px, transparent 1.4px); background-size:22px 22px; -webkit-mask-image:radial-gradient(120% 100% at 50% 40%,#000 35%,transparent 75%); mask-image:radial-gradient(120% 100% at 50% 40%,#000 35%,transparent 75%); }
.hero-visual .vial{ --vw:104px; --vh:280px; }
.fbadge{ position:absolute; display:flex; align-items:center; gap:9px; background:color-mix(in oklab,var(--card) 86%, transparent); border:1px solid var(--line); border-radius:14px; padding:10px 13px; backdrop-filter:blur(8px); box-shadow:var(--sh); }
.fbadge .ic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; }
.fbadge b{ font-size:13px; font-weight:650; display:block; line-height:1.1; color:var(--ink); } .fbadge span{ font-size:11px; color:var(--tx-mut); }
.fbadge.a{ top:20px; left:-14px; } .fbadge.a .ic{ color:var(--co); background:var(--co-wash); }
.fbadge.b{ bottom:30px; right:-14px; } .fbadge.b .ic{ color:var(--cr); background:var(--cr-wash); }
.fbadge.c{ bottom:120px; left:-20px; } .fbadge.c .ic{ color:var(--au-deep); background:var(--au-wash); }

/* quiz band */
.quizband{ position:relative; overflow:hidden; border-radius:var(--r-2xl); background:var(--ink); color:var(--on-ink); padding:46px 48px; display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; }
.quizband .glow{ position:absolute; width:540px; height:540px; border-radius:50%; top:-360px; right:-120px; background:radial-gradient(circle, color-mix(in oklab,var(--co) 70%, transparent), transparent 60%); filter:blur(20px); opacity:.5; }
.quizband .qb-l{ position:relative; max-width:60ch; }
.quizband .qb-l .eyebrow{ color:var(--co-soft); } .quizband .qb-l .eyebrow::before{ background:var(--co-soft); }
.quizband h2{ color:var(--on-ink); font-size:clamp(26px,3.4vw,40px); margin-top:14px; }
.quizband p{ color:var(--on-ink-mut); margin-top:10px; font-size:15.5px; max-width:48ch; }
.quizband .qb-r{ position:relative; display:flex; flex-direction:column; gap:10px; }

/* catalog */
.filters{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:26px; }
.chip{ font-family:var(--sans); font-size:13.5px; font-weight:540; padding:9px 16px; border-radius:999px; border:1px solid var(--line-2); color:var(--tx-soft); background:var(--card); transition:all .18s var(--ease); }
.chip:hover{ border-color:var(--ink); color:var(--ink); } .chip.on{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.search{ display:flex; align-items:center; gap:9px; border:1px solid var(--line-2); border-radius:999px; padding:9px 16px; margin-left:auto; background:var(--card); }
.search:focus-within{ border-color:var(--co); } .search svg{ color:var(--tx-faint); }
.search input{ background:none; border:none; outline:none; font-size:14px; width:150px; }

/* stacks */
.stacks{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stack{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px 24px; display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.stack:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--co-line); }
.stack.feat{ border-color:var(--co); box-shadow:0 0 0 1px var(--co); }
.stack-badge{ position:absolute; top:-11px; left:24px; font-family:var(--mono); font-size:10px; letter-spacing:0.07em; text-transform:uppercase; font-weight:600; color:var(--co-on); background:var(--co); padding:4px 11px; border-radius:999px; }
.stack-vials{ display:block; height:auto; margin:8px 0 16px; border-radius:12px; overflow:hidden; background:#f5f4f1; }
.stack-photo{ width:100%; height:auto; display:block; }
.stack-vials .vial{ --vw:42px; --vh:108px; margin-right:-12px; filter:drop-shadow(0 12px 18px oklch(0.43 0.17 264 / .2)); }
.stack-vials .vial:nth-child(2){ transform:translateY(-7px) scale(1.06); z-index:2; }
.stack h3{ font-size:22px; font-weight:520; }
.stack .tg{ font-size:13.5px; color:var(--tx-mut); margin-top:3px; }
.stack ul{ list-style:none; display:flex; flex-direction:column; gap:7px; margin:16px 0; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stack ul li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--tx-soft); } .stack ul li svg{ color:var(--co); flex:0 0 auto; }
.stack-foot{ margin-top:auto; }
.stack-price{ display:flex; align-items:baseline; gap:9px; margin-bottom:13px; }
.stack-price .now{ font-size:25px; font-weight:700; letter-spacing:-0.02em; } .stack-price .was{ font-size:15px; color:var(--tx-faint); text-decoration:line-through; }
.stack-price .off{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--cr-deep); background:var(--cr-wash); padding:3px 8px; border-radius:999px; }

/* guarantee */
.guars{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px; }
.guar{ display:flex; gap:18px; padding:28px; border:1px solid var(--line-ink); border-radius:var(--r-lg); background:oklch(0.25 0.02 264); }
.guar .gic{ width:54px; height:54px; flex:0 0 auto; border-radius:14px; display:grid; place-items:center; background:color-mix(in oklab,var(--co) 24%, transparent); color:var(--co-soft); }
.guar.cr .gic{ background:color-mix(in oklab,var(--cr) 24%, transparent); color:oklch(0.8 0.13 158); }
.guar h3{ color:var(--on-ink); font-size:20px; font-weight:540; margin-bottom:7px; }
.guar p{ color:var(--on-ink-mut); font-size:14.5px; line-height:1.55; }

/* steps / how crypto works */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; }
.step .num{ font-family:var(--serif); font-size:18px; color:var(--co-on); background:var(--co); width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-weight:520; margin-bottom:20px; }
.step h4{ font-family:var(--serif); font-size:21px; font-weight:520; margin-bottom:9px; } .step p{ color:var(--tx-mut); font-size:14.5px; }

/* reviews */
.revs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rev{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; display:flex; flex-direction:column; gap:14px; }
.rev p{ font-family:var(--serif); font-size:18px; line-height:1.4; color:var(--ink); }
.rev .who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.rev .av{ width:40px; height:40px; border-radius:50%; flex:0 0 auto; background:radial-gradient(circle at 35% 30%, var(--co-soft), var(--co-deep)); display:grid; place-items:center; color:var(--co-on); font-family:var(--serif); font-weight:520; font-size:16px; }
.rev .nm{ font-size:14px; font-weight:650; } .rev .rl{ font-family:var(--mono); font-size:10.5px; color:var(--tx-faint); }
.rev .vf{ margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--cr); }

/* big cta */
.bigcta{ position:relative; border-radius:var(--r-2xl); overflow:hidden; padding:78px 48px; text-align:center; background:var(--ink); color:var(--on-ink); }
.bigcta .glow{ position:absolute; width:620px; height:620px; border-radius:50%; bottom:-380px; left:50%; transform:translateX(-50%); background:radial-gradient(circle, color-mix(in oklab,var(--co) 70%, transparent), transparent 60%); filter:blur(20px); opacity:.55; }
.bigcta h2{ position:relative; color:var(--on-ink); max-width:18ch; margin:0 auto; }
.bigcta h2 em{ color:var(--co-soft); font-style:italic; }
.bigcta p{ position:relative; color:var(--on-ink-mut); margin:18px auto 30px; max-width:50ch; font-size:16px; }
.bigcta .row{ position:relative; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.faq{ max-width:820px; margin:0 auto; }

@media(max-width:960px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; } .hero-visual{ max-width:400px; aspect-ratio:5/4.6; }
  .stacks,.steps,.revs{ grid-template-columns:1fr; } .guars{ grid-template-columns:1fr; }
}
@media(max-width:680px){
  .hero{ padding:36px 0 24px; } .sec{ padding:64px 0; }
  .hero-cta{ flex-direction:column; align-items:stretch; } .hero-cta .btn{ width:100%; }
  .hero-stats{ gap:22px; } .quizband{ padding:34px 26px; } .quizband .qb-r .btn{ width:100%; }
  .search{ margin-left:0; width:100%; order:2; } .grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .bigcta{ padding:54px 24px; } .card h3{ font-size:18px; }
}
@media(max-width:430px){ .grid{ grid-template-columns:1fr; } }