/* Home: hero, start link, king of the hill, token board, FAQ, stock strip. */
/* ── Hero ───────────────────────────────────────────── */
.carousel-hero{
  position:relative;isolation:isolate;display:block;
  aspect-ratio:3.2;min-height:340px;max-height:420px;width:100%;
  margin:0 0 32px;overflow:hidden;
  border:1px solid var(--line-soft);border-radius:12px;background:var(--night);color:#fff;
}

.hero-backdrops,.hero-frame,.hero-shade{position:absolute;inset:0;pointer-events:none}
.hero-backdrops{z-index:-3}
.hero-frame{opacity:0;overflow:hidden;transition:opacity .9s ease}
.hero-frame.is-current{opacity:1}
.hero-background{
  position:absolute;top:0;right:0;height:100%;aspect-ratio:2.4;
  background:url('/assets/hero-characters.webp') no-repeat;background-size:200% 200%;
}
.background-panda{background-position:0 0}
.background-frog{background-position:100% 0}
.background-cat{background-position:0 100%}
.background-dog{background-position:100% 100%}
.hero-shade{z-index:-2;background:linear-gradient(90deg,#080b1df2 0%,#080b1db8 32%,#080b1d26 62%,transparent 80%),linear-gradient(0deg,#080b1dcc,transparent 28%)}

.carousel-hero .hero-copy{position:relative;width:60%;max-width:760px;padding:clamp(28px,3vw,44px) clamp(24px,3vw,44px) 84px}
.carousel-hero .eyebrow{color:#c4c7de}
.carousel-hero h1{
  margin:12px 0 12px;
  font-size:clamp(34px,3.6vw,54px);line-height:1.1;letter-spacing:-.02em;color:#fff;
  text-wrap:balance;
}
.carousel-hero p{margin:0;max-width:30em;font-size:clamp(15px,1.25vw,18px);line-height:1.75;color:#c9d3f2}
.hero-actions{display:flex;align-items:center;gap:20px;margin-top:20px}
.carousel-hero .primary{padding:12px 20px}
.carousel-hero .primary:hover{background:var(--cobalt-deep)}
.carousel-hero .plain{color:#fff;border-color:#ffffff66}
.carousel-hero .plain:hover{color:#e9cf8f;border-color:#e9cf8f}

.hero-carousel-controls{position:absolute;z-index:2;left:clamp(24px,3vw,44px);right:24px;bottom:22px;display:flex;align-items:center;gap:12px}
.hero-pagination{display:flex;gap:8px}
.hero-pagination button{position:relative;width:42px;height:22px;overflow:hidden}
.hero-pagination button:before,.hero-pagination button span{content:'';position:absolute;left:0;right:0;top:10px;height:2px;border-radius:0;background:#ffffff40}
.hero-pagination button span{background:var(--cobalt);transform:scaleX(0);transform-origin:left}
.hero-pagination button[aria-current=true] span{transform:scaleX(var(--hero-progress,0))}
#hero-slide-count{margin:0 auto 0 8px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:#c9d3f2}
.hero-carousel-controls>button{width:32px;height:32px;border-radius:6px;border:1px solid #ffffff33;background:#080b1d99;color:#fff;font-size:14px;transition:background .15s,border-color .15s}
.hero-carousel-controls>button:hover{background:var(--cobalt);color:var(--on-accent);border-color:var(--cobalt)}
.hero-carousel-controls #hero-pause{font-size:12px}
.hero-carousel-controls button:focus-visible{outline:2px solid #e9cf8f;outline-offset:2px}
.start{margin:0 0 22px;text-align:center;font-size:22px}
.start a{color:var(--ink)}
.start a:hover{color:var(--cobalt)}
.king{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 0 30px}
.king>b{font-size:18px;font-weight:700;color:var(--cobalt)}
.king a{display:flex;gap:10px;max-width:420px;padding:8px;border:1px solid transparent;font-size:12px;line-height:1.55;color:var(--muted)}
.king a:hover{border-color:var(--ink)}
.king img,.king .market-avatar{flex:none;width:64px;height:64px;object-fit:cover}
.king strong{color:var(--ink)}
.king .cap{color:var(--jade)}
.explore{margin:0 0 48px}

/* ── FAQ ────────────────────────────────────────────── */
.home-faq{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:44px;align-items:start;margin:0 0 56px}
.faq-head h2{margin-top:12px;font-size:22px;line-height:1.2}
.home-faq details{padding:20px 0;border-bottom:1px solid var(--line)}
.home-faq details:first-of-type{border-top:1px solid var(--line)}
.home-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;font-weight:600;font-size:16px;color:var(--ink)}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary:after{content:'+';flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--muted);font-size:18px;font-weight:400;transition:transform .35s var(--ease-out),background .2s,color .2s}
.home-faq details[open] summary:after{transform:rotate(45deg);color:var(--cobalt)}
.home-faq details p{margin:12px 0 0;max-width:68ch;font-size:15px;line-height:1.8;color:var(--ink-2)}
.home-faq details[open] p{animation:enter-up .45s var(--ease-out)}

/* ── Stock strip ────────────────────────────────────── */
.market-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 26px;background:var(--glaze);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
.market-strip>div{display:flex;flex-direction:column;gap:4px}
.market-strip>div>span{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--cobalt)}
.market-strip>div>b{font-weight:700;font-size:16px}
#stocklink{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 10px;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--glaze-2);transition:border-color .2s,box-shadow .2s,transform .25s var(--ease-out)}
#stocklink:hover{border-color:var(--gilt)}
.stock-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--gilt-wash);color:var(--gilt);font-family:var(--sans);font-weight:900;font-size:22px;box-shadow:0 0 0 1.5px var(--gilt) inset}
#stocklink b{font-size:14px}
#stocklink small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
#stocklink .badge{background:var(--gilt-wash);color:#f4d98f}
#stocklink>span:last-child{width:9px;height:9px;margin:0 8px 0 2px;border-top:2px solid var(--gilt);border-right:2px solid var(--gilt);transform:rotate(45deg)}


@media(max-width:1080px){.carousel-hero .hero-copy{width:66%}.home-faq{grid-template-columns:220px minmax(0,1fr);column-gap:28px}}
@media(max-width:860px){.home-faq{display:block}.faq-head h2{margin:12px 0 22px}}
@media(max-width:720px){
  .carousel-hero{aspect-ratio:auto;min-height:520px;max-height:none;margin:0 0 32px}
  .hero-background{height:270px;right:-40px}
  .hero-shade{background:linear-gradient(0deg,#080b1d 0%,#080b1df7 34%,#080b1d66 56%,transparent 80%)}
  .carousel-hero .hero-copy{width:100%;max-width:none;padding:250px 20px 84px}
  .carousel-hero h1{font-size:32px;margin:8px 0}
  .carousel-hero h1 br{display:none}
  .carousel-hero p{font-size:15px;line-height:1.65}
  .hero-actions{margin-top:22px;gap:18px}
  .hero-carousel-controls{left:20px;right:16px;bottom:20px;gap:8px}
  .hero-pagination{gap:5px}
  .hero-pagination button{width:24px}
  .hero-carousel-controls>button{width:34px;height:34px}
  .hero-frame.is-current .hero-background{animation:none}
  .market-strip{padding:16px}
  .market-strip>div{display:none}
  #stocklink{width:100%}
  #stocklink>span:last-child{margin-left:auto}
}