/* HIVE landing (home.html) page-owned styles.
 *
 * Shared primitives (.wrap, .btn, footer, header, tokens) live in design-system.css and are NOT
 * redefined here. That file is content-hashed and served immutable for a year, so it can only be
 * changed through deploy/rehash-design-system.js; this page therefore CONSUMES its tokens and never
 * edits them.
 *
 * Design source of truth for the hero: deploy/mockups/hive-hero-terminal-mockup.html (sha256 d8c386ee...).
 *
 * SCOPE, as of the owner ruling of 2026-08-15: the page is the hero and the footer, nothing between
 * them. The proof beat's styles (.story-bridge, .vfy-*, .fees-line), the .reveal scroll animation, the
 * .section rhythm and the two --seam-step tokens were all removed with the markup that used them, after
 * checking each had zero remaining references. The only surviving consumers of anything below are the
 * hero and the pre-JS paint of the static header, which header.js replaces on load.
 */

html{scroll-behavior:smooth}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* micro: 120ms hover lift on buttons (transform/opacity only, no layout thrash).
   These reach only the static header's Sign up button before header.js swaps the header in. */
.btn{transition:background-color .12s ease,transform .12s ease,box-shadow .12s ease;will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}
/* one token focus treatment, amber ring on every interactive control (keyboard only) */
.btn:focus-visible,.navlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── HERO ─────────────────────────────────────────────────────────────────────────────────────────
   THE HERO OWNS ITS SURFACE. It is a dark composition in BOTH themes, which is the existing ratified
   behaviour of this page (the outgoing Living Hive hero did the same, deliberately) and the only
   reading the mockup supports: every value in it is tuned against #0a0a0b, and the terminal's row
   alphas are calibrated to that backdrop. Light theme changes the page around the hero, not the hero.
   Colours here are the mockup's literals rather than tokens for exactly that reason: a token would
   flip with the theme and take the terminal's contrast with it. */
.hero{position:relative;min-height:640px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:60px 20px;background:#0a0a0b;color:#f4f4f5}

.hero-content{position:relative;z-index:1;max-width:760px}

/* LIVE pill. The semi-opaque backing is load-bearing, not decoration: the terminal runs edge to edge
   behind it, and without a backing the rows read straight through the chip. */
.hero .pill{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#3ecf8e;border:1px solid rgba(62,207,142,.3);
  background:rgba(10,10,11,.72);border-radius:999px;padding:7px 14px;margin-bottom:22px}
.hero .pill .p{width:6px;height:6px;border-radius:50%;background:#3ecf8e;box-shadow:0 0 8px rgba(62,207,142,.7)}

/* The mockup fixes the headline at 56px and carries no mobile breakpoint. The ruling requires
   mobile-first at 390, where 56px overflows on "trading right now." The clamp keeps the mockup's
   ratified desktop value as its upper bound and only departs from it below that. */
.hero h1{font-size:clamp(34px,8vw,56px);font-weight:700;line-height:1.06;letter-spacing:-.015em;margin:0}
.hero h1 .g{color:#f5c800}
.hero .lsub{font-size:16.5px;color:#a6a8ad;margin-top:18px;line-height:1.6}
.hero .lsub b{color:#f4f4f5;font-weight:600}

.hero .lctas{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.hero .lbtn{font-weight:800;font-size:15px;border-radius:12px;padding:14px 26px;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center}
.hero .lbtn.p{background:#f5c800;color:#0a0a0b;box-shadow:0 6px 22px rgba(245,200,0,.25)}
.hero .lbtn.s{border:1px solid rgba(255,255,255,.12);color:#f4f4f5;background:rgba(10,10,11,.6)}
.hero .lbtn:focus-visible{outline:2px solid #f5c800;outline-offset:3px}

/* The presale line: quiet, gold, deliberately not a third button. */
.hero .lpresale{margin:18px 0 0;font-size:13.5px;font-weight:700}
.hero .lpresale a{color:#f5c800;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease}
.hero .lpresale a:hover{border-bottom-color:#f5c800}
.hero .lpresale a span{display:inline-block;transition:transform .15s ease}
.hero .lpresale a:hover span{transform:translateX(3px)}

/* Passkey trust line. The mockup has no such line; the ruling's keep-list does. Reconciled by giving
   it the mockup's quietest weight and placing it last in the content flow, so it reads as a footnote
   to the offer rather than a fourth call to action. */
.hero .custody{margin:26px auto 0;font-size:12.5px;color:#75787f;font-weight:500;max-width:560px;line-height:1.6}
.hero .custody b{color:#a6a8ad;font-weight:600}
.hero .custody .hv-ic{width:13px;height:13px;vertical-align:-2px;margin-right:4px}

/* ── responsive: 390 first ────────────────────────────────────────────────────────────────────── */
@media (max-width:520px){
  .hero{padding:48px 16px}
  .hero .lsub{font-size:15px}
  .hero .lctas{gap:10px}
  .hero .lbtn{padding:13px 22px;font-size:14.5px}
  /* Both buttons full width at 390 rather than a 2-up that wraps into a ragged pair. */
  .hero .lctas .lbtn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.btn:hover{transform:none;transition:none}
  .hero .lpresale a span,.hero .lpresale a:hover span{transition:none;transform:none}
}