/* D-045 hero. One dark stage holds the header, hero and pipeline story. */
.stage{position:relative;margin:12px clamp(0px,1.2vw,18px) 0;border-radius:36px;background:#0b120e;color:#eef3ea;isolation:isolate}
.site-header--stage{position:absolute;z-index:6;top:12px;left:clamp(0px,1.2vw,18px);right:clamp(0px,1.2vw,18px);background:transparent;padding:26px clamp(24px,5vw,72px)}
/* D-049: every header link is centred on the same line as the View Opportunities button. */
.site-header--stage nav a{display:inline-flex;align-items:center}
.site-header--stage nav a:not(.header-action){color:#c9d5cb}
.site-header--stage nav a:not(.header-action):hover{color:#fff}
.site-header--stage .header-action{border-color:#3a4a3e;background:rgba(255,255,255,.03)}
.hero-depth{position:absolute;inset:0}
.stage .flow{margin:0;border-radius:0 0 36px 36px;padding-top:0}

.hero{position:relative;min-height:max(680px,calc(100svh - 12px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;padding:120px clamp(24px,5vw,72px) 72px;overflow:hidden;border-radius:36px 36px 0 0;
  background:radial-gradient(70% 60% at 74% 30%,#16271d 0%,rgba(11,18,14,0) 70%),#0b120e}
.hero-copy{position:relative;z-index:3;max-width:720px}
.hero-eyebrow{font-size:14px;font-weight:600;color:#a9b9ad;letter-spacing:.005em}
.hero h1{margin-top:22px;font-size:clamp(38px,3.85vw,62px);line-height:1.04;letter-spacing:-.055em;font-weight:560;color:#f6faf3}
.hero h1 span{display:block;color:#c0ee83}
.hero h1 .line{display:block;color:#f6faf3}
.hero-sub{margin-top:24px;max-width:470px;font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:#b5c3b8}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-actions .button{gap:18px}
.hero .ghost{border:1px solid #344538;color:#e6eee3;background:rgba(255,255,255,.02)}
.hero .ghost:hover{border-color:#5a7360}
/* One light per variant lives in its scene; the solid lime primary needs no glow of its own. */
.hero-note{position:absolute;z-index:3;right:clamp(24px,5vw,72px);bottom:26px;font-size:11px;color:#83958a}
/* D-046 copy: the note sits under the copy, so the line of light never runs behind it. */
[data-hero-variant="d046"] .hero-note{left:clamp(24px,5vw,72px);right:auto}

/* Visual: confirmed requirements travel toward the viewer along a line of light. */
.hero-visual{position:absolute;inset:0 0 0 42%;z-index:1;pointer-events:none}
.hero-bloom{position:absolute;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(closest-side,rgba(192,238,131,.22),rgba(150,214,110,.08) 45%,rgba(192,238,131,0));opacity:0}
.hero-floor{position:absolute;width:640px;height:150px;margin:-75px 0 0 -320px;border-radius:50%;background:radial-gradient(closest-side,rgba(192,238,131,.14),rgba(192,238,131,0));opacity:0}
.hero-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-line path{fill:none;stroke-linecap:round}
.hero-line .edge{stroke:#2e4234;stroke-width:21}
.hero-line .tube{stroke:#111c15;stroke-width:17}
.hero-line .edge,.hero-line .tube,.hero-line .stream{opacity:0}
.hero-line .glow{stroke:rgba(192,238,131,.3);stroke-width:12;filter:blur(8px)}
.hero-line .stream{stroke:#e9fbd2;stroke-width:4;stroke-dasharray:3 36;animation:hero-stream 1.5s linear infinite}
@keyframes hero-stream{to{stroke-dashoffset:-39}}
.motion-paused .hero-line .stream,.hero:not(.is-onscreen) .hero-line .stream{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hero-line .stream{animation:none}}
.hero-line .core{stroke:url(#heroLineFade);stroke-width:3}
.hero-pulse{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#eafbd5;box-shadow:0 0 18px 6px rgba(192,238,131,.7);opacity:0}

.hero-card{position:absolute;left:0;top:0;width:384px;padding:20px 22px;border-radius:16px;background:#fbfcf9;color:#17201d;box-shadow:0 40px 80px -30px #000,0 0 0 1px rgba(255,255,255,.06);transform-origin:50% 100%;opacity:0}
/* D-047 copy of the D-046 baseline: the far card is opaque, so the line no longer shows through it. */
.hero-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hero-status{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:999px;background:#e8f3db;color:#2f5a22;font-size:12px;font-weight:700}
.hero-status::before{content:'';width:7px;height:7px;border-radius:50%;background:#4f9a2f}
.hero-slots{font-size:12px;color:#5f6c63;white-space:nowrap}.hero-slots b{color:#17201d}
.hero-card h3{margin-top:18px;font-size:28px;line-height:1.1;letter-spacing:-.045em;font-weight:600}
.hero-area{margin-top:6px;font-size:13px;color:#5f6c63}
.hero-scope{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;padding-top:14px;border-top:1px solid #e3e8df;font-size:13px;color:#5f6c63}
.hero-scope b{color:#17201d;font-size:17px;font-weight:650;letter-spacing:-.02em}
.hero-proof{list-style:none;margin:14px 0 0;padding:0}
.hero-proof li{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:13px;font-weight:600;color:#2e3a33}
.hero-proof i{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:#c0ee83}
.hero-proof svg{width:10px;height:10px;fill:none;stroke:#17201d;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hero-sealed{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 12px;border-radius:10px;background:#0d1511;color:#cbd8cd;font-size:12px;font-weight:600;line-height:1.35}
.hero-sealed svg{width:16px;height:16px;flex:none;fill:none;stroke:#c0ee83;stroke-width:1.8}
.hero-skel{display:block;height:9px;margin-top:10px;border-radius:5px;background:#e4eae0}
.hero-skel.short{width:55%}

@media (max-width:899px){
  .stage{margin:0;border-radius:0 0 26px 26px}
  .site-header--stage{top:0;left:0;right:0;padding:18px 20px}
  .stage .flow{border-radius:0 0 26px 26px}
  .hero{display:flex;flex-direction:column;min-height:0;padding:104px 22px 0;border-radius:0}
  .hero-copy{order:1}.hero-note{order:2}.hero-visual{order:3}
  .hero h1{font-size:clamp(38px,10.4vw,56px)}
  .hero-sub{font-size:16px}
  .hero-actions{margin-top:28px}
  .hero-visual{position:relative;inset:auto;align-self:stretch;height:clamp(440px,122vw,600px);margin:30px -22px 0}
  .hero-card{width:300px;padding:16px 18px}
  .hero-card h3{font-size:24px}
  .hero-card.is-far,.hero-card.is-mid{display:none}
  .hero-note{position:static;padding:22px 0 0;text-align:left}
}
@media (prefers-reduced-motion:reduce){.hero-card,.hero-bloom,.hero-floor{opacity:1}}