/* home.css — home page only: the hero with its floating dots, the numbers row. */
.hero{position:relative;overflow:hidden;padding:88px 0 72px}
.hero-in{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-lockup{height:46px;width:auto;margin-bottom:22px}
.hero h1{font-size:clamp(40px,7.2vw,72px);line-height:1.05;max-width:12ch;text-wrap:balance}
.hero-sub{font-size:clamp(17px,1.8vw,20px);color:var(--muted);margin-top:20px;max-width:46ch;text-wrap:balance}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.hero-x{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.hero-x a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:15px;font-weight:500;color:var(--ink);border:1px solid var(--border);background:var(--surface)}
.hero-x a:hover{border-color:var(--ink)}
.hero-x svg{width:14px;height:14px}
.hero-x #heroBuy svg{width:18px;height:18px}

/* The six dots drift slowly: up and down 6px with a slight sway, 4–7 s, staggered. One carries a tiny gold coin.
   The cursor makes the closest dot look toward it (home.js moves its eyes). Everything else on the page stays still. */
.hero-dots{position:absolute;inset:0;max-width:1240px;margin:0 auto;pointer-events:none}
.fdot{--s:var(--s0);position:absolute;width:var(--s);height:var(--s);left:var(--x);top:var(--y);animation:drift var(--dur,5s) ease-in-out var(--delay,0s) infinite alternate;will-change:transform}
.fdot svg{width:100%;height:100%;overflow:visible}
.fdot .eyes{transition:transform .18s ease-out}
@keyframes drift{from{transform:translateY(-6px) rotate(-2.5deg)}to{transform:translateY(6px) rotate(2.5deg)}}
@media (prefers-reduced-motion:reduce){ .fdot{animation:none} .fdot .eyes{transition:none} }

.home-prompt{max-width:720px;margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.stat{padding:18px 20px}
.stat small{display:block;color:var(--muted);font-size:14px}
.stat b{display:block;font-family:var(--head);font-weight:600;font-size:clamp(24px,2.8vw,32px);letter-spacing:-.02em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat b.soft{font-size:18px;color:var(--faint);line-height:1.9}
.more{display:flex;justify-content:center;margin-top:24px}
.dp{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:18px 20px;margin-top:16px}
.dp-l{display:flex;align-items:center;gap:14px;min-width:0}
.dp-mark{width:48px;height:48px;flex:none}
.dp-l b{font-family:var(--head);font-weight:600;font-size:24px;letter-spacing:-.02em}
.dp-l p{color:var(--muted);font-size:14.5px}
.dp-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.dp-ca{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%;padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--ground)}
.dp-ca small{color:var(--muted);font-size:13px;flex:none}
.dp-ca .copy{min-width:0;overflow-wrap:anywhere;text-align:left}

@media (max-width:1000px){
  .hero-dots .fdot{--s:calc(var(--s0) * .72)}
}
@media (max-width:860px){
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  /* Phones: the dots line up in a row above the heading instead of floating beside it. */
  .hero{padding:36px 0 48px}
  .hero-dots{position:static;display:flex;justify-content:center;gap:10px;margin-bottom:22px;padding:6px 16px 0}
  .hero-dots .fdot{position:static;--s:44px;flex:none}
  .hero h1{font-size:40px}
  .hero-lockup{height:36px;margin-bottom:16px}
  .hero-btns{flex-direction:column;align-self:stretch}
  .hero-btns .btn{width:100%}
}
@media (max-width:420px){ .stats{gap:10px} .stat{padding:14px} .stat small{font-size:13px} }
@media (max-width:640px){ .dp-ca{border-radius:16px} .dp-ca .copy{font-size:12px} .dp-r .btn{width:100%} }