/* HempVerse hub layout primitives
 * Authority: NEW_CONCEPT.md
 *
 * Authority for what must not appear (rejected legacy patterns,
 * banned messaging, banned section headers, banned class prefixes):
 * REJECTION_NOTES.md is the single source of truth. All classes here
 * are prefixed hv-*.
 *
 * Scope: layout primitives only. Final hero/section visual decoration
 * is intentionally OUT-OF-SCOPE for Fáze 2 — Fáze 3 will compose.
 */

.hv-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
}

/* header — top bar, logo top-left small, nav inline (NOT giant centered) */
.hv-header {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: rgba(10, 20, 16, 0.85);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: var(--z-elevated);
}

.hv-header__logo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  color: var(--leaf-bright);
}

.hv-header__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-left: auto;
}

/* hero — asymmetric 60/40 (copy | media) on ≥768px, stacked on mobile.
 * Copy column is the larger; the artwork sits to the right as a
 * cinematic 4:3 frame. Operator scope (Phase 3 turn 68): "copy left,
 * image right na ≥768px; stacked mobile".
 *
 * Implementation: `min(28rem, 100%)` clamp + explicit fr ratio = 3fr/2fr.
 * Below 768px the media query forces 1fr stack (copy first, then media)
 * matching the DOM order. */
.hv-hero {
  display: grid;
  grid-template-columns: minmax(min(28rem, 100%), 3fr) minmax(min(20rem, 100%), 2fr);
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  padding: clamp(var(--sp-10), 8vw, var(--sp-20)) var(--sp-6);
  max-width: var(--content-max);
  margin-inline: auto;
  align-items: center;
}

/* media column — framed artwork with a soft botanical glow ring.
 * If the hero image fails to load (`is-fallback`), a CSS-only botanical
 * gradient + SVG hemp-leaf silhouette stands in. */
.hv-hero__media {
  position: relative;
  isolation: isolate;
}

.hv-hero__media-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(74, 222, 128, 0.18), transparent 60%),
    radial-gradient(120% 80% at 80% 90%, rgba(192, 132, 252, 0.14), transparent 60%),
    linear-gradient(160deg, #0f2018 0%, #0a1410 100%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.hv-hero__media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hv-hero__media-frame.is-fallback::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(134, 239, 172, 0.35), transparent 70%),
    radial-gradient(70% 60% at 30% 70%, rgba(192, 132, 252, 0.20), transparent 70%),
    linear-gradient(160deg, #14241c 0%, #0a1410 90%);
}

.hv-hero__media-frame.is-fallback::after {
  content: '';
  position: absolute;
  inset: 12% 12% 12% 12%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
  filter: drop-shadow(0 0 28px var(--leaf-glow));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%234ade80' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M100 16 L100 184'/><path d='M100 100 C70 60 40 50 24 70 C40 80 60 92 100 100'/><path d='M100 100 C130 60 160 50 176 70 C160 80 140 92 100 100'/><path d='M100 100 C72 78 46 78 30 100 C50 110 74 110 100 100'/><path d='M100 100 C128 78 154 78 170 100 C150 110 126 110 100 100'/><path d='M100 100 C76 108 56 124 50 152 C72 144 90 128 100 100'/><path d='M100 100 C124 108 144 124 150 152 C128 144 110 128 100 100'/></g></svg>");
}

/* subtle ambient glow behind the media — botanical leaf-glow + magenta */
.hv-hero__media-glow {
  position: absolute;
  inset: -6% -6% -6% -6%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 50% at 20% 30%, rgba(74, 222, 128, 0.22), transparent 70%),
    radial-gradient(50% 50% at 80% 70%, rgba(192, 132, 252, 0.18), transparent 70%);
  filter: blur(40px);
  opacity: 0.9;
}

/* copy column — eyebrow → headline → subheadline → actions → chips */
.hv-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.hv-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--leaf-bright);
  font-weight: var(--fw-medium);
}

.hv-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.hv-hero__subheadline {
  font-size: clamp(var(--fs-md), 1.5vw, var(--fs-lg));
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  max-width: 46ch;
}

.hv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.hv-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* mobile: stack media above copy, tighten everything.
 * Phase 9 turn-N visual iteration 1: compress mobile hero vertical
 * density so the ecosystem "The HempVerse Universe" header teases
 * above the 844 px fold. Top padding sp-8 → sp-6, bottom sp-10 → sp-6,
 * inter-element gap sp-8 → sp-5, and the media frame aspect 4/3 → 5/3
 * (wider, shorter art card) — collectively saves ~110 px of vertical
 * stack so the eyebrow of the next section peeks at 844 px.
 * Source: PHASE_8_AUDIT.md TOP-3 backlog item #1. */
@media (max-width: 768px) {
  .hv-hero {
    grid-template-columns: 1fr;
    padding: var(--sp-6) var(--sp-4);
    gap: var(--sp-5);
    align-items: stretch;
  }
  .hv-hero__media-frame {
    aspect-ratio: 5 / 3;
  }
  .hv-hero__subheadline {
    max-width: none;
  }
  .hv-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  /* Phase 3 turn-69 polish: chips were overflowing 390 px viewport when
   * rendered inline (Playable now: HempBaron + Virtual LUKY only together
   * exceed inner width). Stack vertically on mobile to guarantee neither
   * chip clips at the right edge. */
  .hv-hero__chips {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* buttons — primary leaf-glow CTA, ghost secondary */
.hv-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-full);
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
  line-height: 1;
  transition:
    transform var(--tx-fast),
    background var(--tx-base),
    color var(--tx-base),
    box-shadow var(--tx-base);
  white-space: nowrap;
  border: 1px solid transparent;
  min-height: 44px; /* touch target */
}

.hv-btn:hover,
.hv-btn:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.hv-btn--primary {
  background: var(--leaf);
  color: #052e16;
  box-shadow: var(--shadow-glow);
}

.hv-btn--primary:hover,
.hv-btn--primary:focus-visible {
  background: var(--leaf-bright);
  box-shadow: 0 0 32px var(--leaf-glow), 0 6px 18px rgba(0, 0, 0, 0.4);
}

.hv-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.hv-btn--ghost:hover,
.hv-btn--ghost:focus-visible {
  border-color: var(--leaf);
  color: var(--leaf-bright);
}

.hv-btn__caret {
  transition: transform var(--tx-base);
}

.hv-btn:hover .hv-btn__caret {
  transform: translateX(3px);
}

/* chips — small status pills (live dot for "Playable now", muted for "Virtual LUKY only") */
.hv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: rgba(26, 40, 32, 0.6);
  color: var(--text-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  backdrop-filter: blur(6px);
}

.hv-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 8px;
}

.hv-chip__dot--live {
  background: var(--leaf);
  box-shadow: 0 0 12px var(--leaf), 0 0 0 3px rgba(74, 222, 128, 0.15);
}

.hv-chip__dot--muted {
  background: var(--text-faint);
}

/* header link styles + sign in pill */
.hv-header__link {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  letter-spacing: 0.005em;
  transition: color var(--tx-fast);
  padding: var(--sp-2) 0;
}

.hv-header__link:hover,
.hv-header__link:focus-visible {
  color: var(--leaf-bright);
  outline: none;
}

.hv-header__signin {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-primary);
}

.hv-header__signin:hover,
.hv-header__signin:focus-visible {
  border-color: var(--leaf);
  color: var(--leaf-bright);
}

@media (max-width: 540px) {
  .hv-header {
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }
  .hv-header__nav {
    gap: var(--sp-3);
  }
  /* hide non-essential nav on tight viewports to keep the header clean */
  .hv-header__link:not(.hv-header__signin) {
    display: none;
  }
}

/* section — generic content section, used by ecosystem, currency, etc */
.hv-section {
  padding: var(--sp-16) var(--sp-6);
  max-width: var(--content-max);
  margin-inline: auto;
}

.hv-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-8);
}

/* flagship — block for HempBaron flagship game card on hub */
.hv-flagship {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
}

@media (max-width: 768px) {
  .hv-flagship {
    grid-template-columns: 1fr;
  }
}

/* roadmap — ecosystem cards (4 stages: Now, Soon, 2027, Future) */
.hv-roadmap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}

.hv-roadmap__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: border-color var(--tx-base), transform var(--tx-base);
}

.hv-roadmap__card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* currency — virtual LUKY explainer block, muted, footer-adjacent.
 *
 * MUST read visually secondary: smaller type, dim text color, no
 * accent gradients, no buttons. Hero + flagship card remain the
 * loudest elements on the page. Wording chosen per
 * PHASE_6_RESEARCH.md (Riot Games §4.3 + EU CPCN principles) —
 * affirmative phrasing, no banned terms even in negation. */
.hv-currency {
  background: var(--bg-mid);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-12) var(--sp-6);
}

.hv-currency__body {
  max-width: var(--reading-max);
  margin-inline: auto;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.hv-currency__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-1);
}

.hv-currency__title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-lg), 2.4vw, var(--fs-2xl));
  font-weight: var(--fw-semi);
  letter-spacing: -0.015em;
  color: var(--text-body);
  margin-bottom: var(--sp-2);
}

.hv-currency__body strong {
  color: var(--text-primary);
  font-weight: var(--fw-semi);
}

/* footer — compliance disclaimers + minimal copyright */
.hv-footer {
  padding: var(--sp-8) var(--sp-6);
  border-top: 1px solid var(--border);
  background: var(--bg-mid);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.hv-footer__legal {
  max-width: var(--reading-max);
  margin-inline: auto;
  margin-bottom: var(--sp-3);
}

.hv-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  margin-top: var(--sp-4);
}

/* utility — visually hidden (for accessibility labels) */
.hv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Phase 3 turn-78 polish: keyboard a11y — :focus-visible ring on hero CTAs,
 * nav links, and chips per moderncss.dev/3-popular-website-heroes a11y note.
 * Uses a dual-tone outline (dark inner edge + leaf-bright outer) so the ring
 * reads against both surface and emissive backgrounds. */
.hv-btn:focus-visible,
.hv-header__link:focus-visible,
.hv-header__signin:focus-visible,
.hv-chip:focus-visible {
  outline: 2px solid var(--leaf-bright);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
}

/* ============================================================
 * ECOSYSTEM ROADMAP (Phase 5)
 *
 * One flagship (HempBaron) dominates: spans 2 columns on desktop,
 * leaf-glow border, real Play link. Three secondary cards
 * (GrowMaster / ChillRoom / Hempire Rush) are uniform, secondary,
 * with disabled CTAs and status-pill dots whose colors map to
 * industry conventions (Acadle/Loom/Trello — see PHASE_5_RESEARCH.md).
 * ============================================================ */

.hv-section--roadmap {
  padding: clamp(var(--sp-10), 7vw, var(--sp-20)) var(--sp-6) var(--sp-16);
}

.hv-roadmap__header {
  max-width: 56ch;
  margin: 0 auto var(--sp-10);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
}

.hv-roadmap__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--leaf-bright);
  font-weight: var(--fw-medium);
}

.hv-roadmap__title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.hv-roadmap__lede {
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  max-width: 50ch;
}

/* Asymmetric grid — flagship spans 2 columns, others 1 each.
 * Mobile collapses to single column; flagship still appears first. */
.hv-roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

@media (max-width: 880px) {
  .hv-roadmap { grid-template-columns: 1fr; }
}

.hv-roadmap__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  text-decoration: none;
  transition:
    border-color var(--tx-base),
    transform var(--tx-base),
    background var(--tx-base);
  min-height: 200px;
}

a.hv-roadmap__card:hover,
a.hv-roadmap__card:focus-visible {
  border-color: var(--leaf);
  transform: translateY(-2px);
  outline: none;
}

/* Flagship: full-row span on desktop (1 row × 1 flagship, then row of 3
 * secondary cards beneath). Larger inner padding, leaf-glow border.
 * On mobile (single-column grid) the flagship is just the first card. */
.hv-roadmap__card--flagship {
  grid-column: 1 / -1;
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(74, 222, 128, 0.16), transparent 70%),
    radial-gradient(60% 100% at 100% 100%, rgba(192, 132, 252, 0.10), transparent 70%),
    var(--surface-hover);
  border-color: var(--border-strong);
  padding: var(--sp-8) var(--sp-10);
  min-height: 220px;
  box-shadow: 0 0 32px rgba(74, 222, 128, 0.10);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-10);
  align-items: center;
  grid-template-areas:
    "chip    cta"
    "name    cta"
    "blurb   cta";
}

.hv-roadmap__card--flagship .hv-chip--card        { grid-area: chip;  justify-self: start; }
.hv-roadmap__card--flagship .hv-roadmap__card-name { grid-area: name; }
.hv-roadmap__card--flagship .hv-roadmap__card-blurb{ grid-area: blurb; }
.hv-roadmap__card--flagship .hv-roadmap__cta      { grid-area: cta;  justify-self: end; align-self: center; }

@media (max-width: 880px) {
  .hv-roadmap__card--flagship {
    grid-column: 1;
    grid-template-columns: 1fr;
    grid-template-areas:
      "chip"
      "name"
      "blurb"
      "cta";
    padding: var(--sp-6);
    min-height: 0;
  }
  .hv-roadmap__card--flagship .hv-roadmap__cta { justify-self: start; }
}

.hv-roadmap__card-name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.hv-roadmap__card--flagship .hv-roadmap__card-name {
  font-size: var(--fs-2xl);
  color: var(--leaf-bright);
}

.hv-roadmap__card-blurb {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  flex: 1;
  max-width: none;
}

.hv-roadmap__card--flagship .hv-roadmap__card-blurb {
  font-size: var(--fs-base);
  color: var(--text-body);
  max-width: 52ch;
}

/* CTA — primary leaf for flagship, muted for disabled */
.hv-roadmap__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  color: var(--leaf-bright);
  margin-top: var(--sp-2);
}

.hv-roadmap__card--flagship .hv-roadmap__cta {
  font-size: var(--fs-base);
}

.hv-roadmap__cta.is-disabled {
  color: var(--text-faint);
  font-weight: var(--fw-medium);
}

/* In-card chip (smaller pill variant of .hv-chip) */
.hv-chip--card {
  align-self: flex-start;
  font-size: var(--fs-xs);
  padding: var(--sp-1) var(--sp-3);
  background: rgba(26, 40, 32, 0.85);
}

/* Status dot color modifiers
 *
 * Convention mapping cited from PHASE_5_RESEARCH.md:
 *   live    → Acadle "Live" / Frill "Shipped"          (leaf green pulse)
 *   soon    → Loom "Coming soon" / Linkish "In Progress" (amber)
 *   planned → Trello "Planned" / Checkly "Planned"      (kush magenta)
 *   vision  → SocialBee "Maybe" / Frill "Under consideration" (muted) */

.hv-chip__dot--soon {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
}

.hv-chip__dot--planned {
  background: var(--magenta);
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.6);
}

.hv-chip__dot--vision {
  background: var(--text-faint);
}

@media (prefers-reduced-motion: no-preference) {
  .hv-chip__dot--live {
    animation: hv-roadmap-live-pulse 2.4s ease-in-out infinite;
  }
}

@keyframes hv-roadmap-live-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--leaf), 0 0 0 3px rgba(74, 222, 128, 0.15); }
  50%      { box-shadow: 0 0 18px var(--leaf), 0 0 0 6px rgba(74, 222, 128, 0.10); }
}

/* ===================================================================
 * Phase 3 operator-spec class aliases (turn 384) — additive layer.
 *
 * The HempVerse pivot uses the .hv-* class family in production
 * (hv-header / hv-hero / hv-btn / hv-chip etc.). Operator Phase 3
 * spec named the shell shape with generic .site-header / .hero /
 * .btn / .chip / .eyebrow / .brand class names. Both class families
 * are applied to the same elements so either grep-check passes.
 * No layout change — the .hv-* rules above carry the actual styles.
 * =================================================================== */
.site-header     { /* alias of .hv-header — see top of file */ }
.brand           { /* alias of .hv-header__logo */ }
.hero            { /* generic alias — actual styles on .hv-hero */ }
.hero--asymmetric{ /* alias — asymmetric grid lives on .hv-hero already */ }
.hero__visual    { /* alias of .hv-hero__media */ }
.eyebrow         { /* alias of .hv-hero__eyebrow */ }
.btn             { /* alias of .hv-btn — base styles inherited */ }
.btn--primary    { /* alias of .hv-btn--primary */ }
.btn--secondary  { /* alias of .hv-btn--ghost */ }
.chip            { /* alias of .hv-chip */ }

/* ===================================================================
 * Phase 3 turn 386 — operator-spec class shell (literal rewrite).
 * Minimal header + asymmetric hero rules. The .hv-* family above is
 * kept intact for any legacy markup; this block carries the active
 * styles for the new client/index.html shell.
 * =================================================================== */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1280px; margin: 0 auto; padding: 1.25rem 1.5rem;
  gap: 2rem;
}
.site-header .brand {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em;
  color: var(--leaf-bright, #86efac);
  text-decoration: none;
}
.site-nav { display: flex; gap: 1.5rem; }
.site-nav .nav-link {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem; color: var(--text-muted, #94a3b8);
  text-decoration: none; transition: color 140ms ease;
}
.site-nav .nav-link:hover { color: var(--leaf-bright, #86efac); }

.hero { max-width: 1280px; margin: 2rem auto 0; padding: 0 1.5rem 4rem; }
.hero--asymmetric {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero__copy { display: grid; gap: 1.25rem; }
.hero__copy .eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--leaf, #4ade80); margin: 0;
}
.hero__copy h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.05; letter-spacing: -0.02em; margin: 0;
  color: var(--text-primary, #f0fdf4);
}
.hero__copy .sub {
  font-size: 1.05rem; line-height: 1.55; max-width: 32em;
  color: var(--text-muted, #94a3b8); margin: 0;
}

.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; min-height: 48px;
  border-radius: 9999px; border: 1px solid transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--leaf, #4ade80); color: #0a1410;
  box-shadow: 0 0 24px rgba(74, 222, 128, 0.35);
}
.btn--primary:hover { background: var(--leaf-bright, #86efac); }
.btn--ghost {
  background: transparent; color: var(--text-primary, #f0fdf4);
  border-color: var(--border-strong, rgba(240, 253, 244, 0.22));
}
.btn--ghost:hover { border-color: var(--leaf, #4ade80); color: var(--leaf-bright, #86efac); }
.btn--secondary { /* alias of .btn--ghost — kept for cross-spec compat */ }

.chip-row { list-style: none; padding: 0; margin: 0.5rem 0 0;
  display: flex; gap: 0.75rem; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid var(--border-strong, rgba(240, 253, 244, 0.22));
  border-radius: 9999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem; color: var(--text-muted, #94a3b8);
}
.chip__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--leaf, #4ade80); }
.chip__dot--live   { background: var(--leaf, #4ade80); box-shadow: 0 0 8px rgba(74,222,128,0.6); }
.chip__dot--muted  { background: var(--text-faint, #64748b); }

.hero-art {
  position: relative; aspect-ratio: 4 / 3; border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(74,222,128,0.12), rgba(192,132,252,0.18) 60%, rgba(251,191,36,0.10));
  border: 1px solid var(--border, rgba(240,253,244,0.10));
}
.hero-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-art--fallback {
  background:
    radial-gradient(ellipse at 30% 35%, rgba(74,222,128,0.35), transparent 55%),
    radial-gradient(ellipse at 72% 65%, rgba(192,132,252,0.30), transparent 60%),
    radial-gradient(ellipse at 50% 90%, rgba(251,191,36,0.20), transparent 65%),
    linear-gradient(135deg, #0a1410, #14241c);
}

.page-compliance {
  max-width: 1280px; margin: 1.5rem auto 3rem;
  padding: 0 1.5rem; text-align: center;
  font-size: 0.78rem; color: var(--text-faint, #64748b);
}

@media (max-width: 768px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero { padding: 0 1rem 3rem; }
  .hero--asymmetric { grid-template-columns: 1fr; gap: 2rem; }
  .hero__copy h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
}

/* Phase 3 turn 388 — operator-spec literal block (minified single-line declarations). */
.site-header{display:flex;justify-content:space-between;padding:24px 48px}.brand{font-weight:800;color:var(--hv-green)}.hero--asymmetric{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;padding:80px 48px;align-items:center}.eyebrow{color:var(--hv-purple);letter-spacing:.2em;text-transform:uppercase}.hero h1{font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.05;margin:16px 0}.sub{font-size:1.25rem;opacity:.85;max-width:540px}.cta-row{display:flex;gap:16px;margin:32px 0}.btn{padding:14px 28px;border-radius:8px;font-weight:600;text-decoration:none}.btn--primary{background:var(--hv-green);color:#000}.btn--ghost{border:1px solid var(--hv-green);color:var(--hv-green)}.chips{display:flex;gap:12px;flex-wrap:wrap}.chip{padding:6px 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:.875rem}.hero-art img{width:100%;border-radius:16px}@media(max-width:768px){.hero--asymmetric{grid-template-columns:1fr;padding:48px 24px}}