:root {
      --navy:#101c42;
      --navy-2:#0b1634;
      --navy-3:#071127;
      --teal:#14b8a6;
      --warm:#f6f2e8;
      --muted:rgba(246,242,232,.72);
      --hair:rgba(246,242,232,.15);
      --max:1240px;
      --px:clamp(22px,4vw,56px);
    }

    * { 
      box-sizing:border-box; 
    }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      color:var(--warm);
      background:var(--navy-3);
      font-family:"Poppins", "DM Sans", sans-serif;
      overflow-x:hidden;
    }

    a { color:inherit; text-decoration:none; }
    button,input { font:inherit; }
    ::selection { background:var(--teal); color:var(--navy); }

    .site-bg {
      position:fixed;
      inset:-4vh 0 0;
      z-index:-5;
      background:
        linear-gradient(180deg,rgba(8,17,40,.22),rgba(8,17,40,.46) 28%,rgba(8,17,40,.82) 63%,#071127 100%),
        url("https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?auto=format&fit=crop&w=2400&q=88")
        center 43% / cover no-repeat;
      transform:translate3d(0,var(--bg-y,0px),0) scale(1.06);
      will-change:transform;
    }

    .site-bg::before {
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(circle at 76% 16%,rgba(255,255,255,.20),transparent 18%),
        linear-gradient(90deg,rgba(5,13,32,.56),transparent 52%,rgba(5,13,32,.14));
    }

    .fog {
      position:fixed;
      inset:0;
      z-index:-4;
      pointer-events:none;
      opacity:.52;
      filter:blur(30px);
      background:
        radial-gradient(ellipse at 20% 27%,rgba(255,255,255,.11),transparent 37%),
        radial-gradient(ellipse at 65% 48%,rgba(255,255,255,.10),transparent 34%),
        radial-gradient(ellipse at 84% 72%,rgba(20,184,166,.10),transparent 26%);
      transform:translate3d(0,var(--fog-y,0px),0);
    }

    .wrap {
      width:min(calc(100% - (var(--px) * 2)),var(--max));
      margin-inline:auto;
    }

    .topbar {
      position:absolute;
      z-index:20;
      top:0; left:0; right:0;
      padding:26px 0;
    }

    .topbar-inner {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
    }

    .logo {
      display:flex;
      align-items:center;
      gap:10px;
    }

    .logo svg { width:178px; height:99px; display:block; }
    .logo img { height:99px; width:auto; display:block; }

    .wedge {
      display:flex;
      align-items:center;
      gap:12px;
      text-transform:uppercase;
      letter-spacing:.18em;
      font-size:10px;
      color:rgba(246,242,232,.74);
    }

    .wedge-mark {
      width:22px;height:22px;
      border:1px solid rgba(246,242,232,.42);
      transform:rotate(45deg);
      display:inline-block;
    }

    .hero {
      min-height:100svh;
      display:flex;
      align-items:center;
      position:relative;
      padding:150px 0 100px;
    }

    .hero::after {
      content:"";
      position:absolute;
      left:0; right:0; bottom:-1px; height:24vh;
      background:linear-gradient(180deg,transparent,rgba(7,17,39,.78));
      pointer-events:none;
    }

    .hero-copy {
      width:min(850px,76%);
      position:relative;
      z-index:2;
    }

    .eyebrow {
      color:var(--teal);
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.36em;
      margin-bottom:24px;
    }

    .hero h1 {
      margin:0 0 26px;
      font-family:"DM Serif Display", serif;
      font-weight:400;
      font-size:clamp(64px,8.1vw,118px);
      line-height:.90;
      letter-spacing:-.035em;
      text-wrap:balance;
    }

    .hero h1 .accent { color:var(--teal); }

    .hero .lead {
      max-width:630px;
      font-size:clamp(18px,1.7vw,24px);
      line-height:1.55;
      color:rgba(246,242,232,.87);
      margin:0 0 34px;
    }

    .mantra {
      text-transform:uppercase;
      letter-spacing:.32em;
      font-size:11px;
      color:rgba(246,242,232,.70);
      margin-bottom:34px;
    }

    .scroll-link {
      display:inline-flex;
      align-items:center;
      gap:14px;
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.18em;
    }

    .scroll-link i {
      width:46px;height:46px;
      display:grid;place-items:center;
      border:1px solid rgba(246,242,232,.58);
      border-radius:50%;
      font-style:normal;
      transition:.25s ease;
    }

    .scroll-link:hover i {
      background:var(--teal);
      border-color:var(--teal);
      color:var(--navy);
      transform:translateY(3px);
    }

    .hero-note {
      position:absolute;
      right:var(--px);
      bottom:20%;
      z-index:2;
      max-width:150px;
      text-transform:uppercase;
      letter-spacing:.34em;
      font-family:"DM Serif Display",serif;
      font-size:13px;
      line-height:1.7;
      color:rgba(246,242,232,.78);
    }

    .underwater {
      position:relative;
      min-height:96svh;
      padding:150px 0 120px;
      background:
        radial-gradient(circle at 54% 60%,rgba(20,184,166,.08),transparent 28%),
        linear-gradient(180deg,rgba(8,30,55,.80),rgba(4,20,42,.96));
      overflow:hidden;
      isolation:isolate;
    }

    .underwater::before {
      content:"";
      position:absolute;
      top:-30px;left:-5%;right:-5%;height:105px;
      background:
        radial-gradient(ellipse at 50% 0%,rgba(20,184,166,.22),transparent 58%);
      filter:blur(14px);
      opacity:.65;
    }

    .underwater::after {
      content:"";
      position:absolute;
      left:-5%;right:-5%;bottom:-6%;height:36%;
      background:
        radial-gradient(ellipse at 50% 0%,rgba(20,184,166,.14),transparent 55%);
      filter:blur(20px);
      z-index:-1;
    }

    .under-grid {
      display:grid;
      grid-template-columns:.75fr 1.45fr;
      gap:86px;
      align-items:center;
    }

    .kicker {
      color:var(--teal);
      text-transform:uppercase;
      letter-spacing:.31em;
      font-size:10px;
      margin-bottom:18px;
    }

    h2 {
      font-family:"DM Serif Display", serif;
      font-size:clamp(46px,5vw,78px);
      line-height:1.03;
      font-weight:400;
      margin:0 0 22px;
      letter-spacing:-.025em;
    }

    h2 .accent { color:var(--teal); }

    .copy {
      max-width:560px;
      color:var(--muted);
      font-size:16px;
      line-height:1.75;
    }

    .line-stage {
      position:relative;
      display:block;
    }

    .line-stage::before {
      content:"";
      position:absolute;
      inset:18% 7% 9%;
      background:radial-gradient(circle,rgba(20,184,166,.12),transparent 58%);
      filter:blur(28px);
    }

    .nessie-svg {
      width:100%;
      overflow:visible;
      filter:drop-shadow(0 0 12px rgba(20,184,166,.38));
    }

    .baseline {
      stroke:rgba(246,242,232,.12);
      stroke-width:1;
    }

    .nessie-path {
      fill:none;
      stroke:var(--teal);
      stroke-width:3;
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-dasharray:1800;
      stroke-dashoffset:var(--dash,0);
    }

    .marks {
      opacity:var(--marks,1);
      transition:opacity .9s ease .2s;
    }

    .leader {
      stroke:rgba(246,242,232,.35);
      stroke-width:1;
      fill:none;
    }

    .ring {
      fill:none;
      stroke:rgba(246,242,232,.55);
      stroke-width:1.2;
    }

    .node { fill:#d9f7ef; }

    .whatif {
      stroke:rgba(246,242,232,.55);
      stroke-width:2.6;
      stroke-dasharray:.5 12;
      stroke-linecap:round;
    }

    .qm {
      fill:rgba(246,242,232,.85);
      font-family:"DM Serif Display",serif;
      font-size:26px;
    }

    .data-point {
      position:absolute;
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.12em;
      color:rgba(246,242,232,.58);
    }

    .data-point strong {
      display:block;
      color:var(--warm);
      font-size:17px;
      font-weight:500;
      letter-spacing:0;
      margin-bottom:4px;
    }

    .p1 { left:29.5%; top:33%; }
    .p2 { left:44%; top:40.5%; }
    .p3 { left:70%; top:7%; }

    .perspective {
      position:relative;
      padding:150px 0;
      background:
        linear-gradient(180deg,rgba(8,19,42,.94),rgba(11,24,51,.97));
    }

    .perspective-head {
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:100px;
      align-items:end;
      margin-bottom:95px;
    }

    .steps {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      border-top:1px solid var(--hair);
      border-bottom:1px solid var(--hair);
    }

    .step {
      min-height:320px;
      padding:46px 34px;
      border-right:1px solid var(--hair);
    }

    .step:last-child { border-right:0; }

    .step-number {
      font-family:"DM Serif Display",serif;
      font-size:92px;
      line-height:.9;
      color:rgba(246,242,232,.10);
      margin-bottom:32px;
    }

    .step h3 {
      font-family:"DM Serif Display",serif;
      font-size:34px;
      font-weight:400;
      margin:0 0 14px;
    }

    .step p {
      color:var(--muted);
      line-height:1.6;
      margin:0;
      max-width:220px;
    }

    .future {
      position:relative;
      min-height:72svh;
      display:flex;
      align-items:center;
      padding:130px 0;
      background:
        linear-gradient(180deg,rgba(11,24,51,.94),rgba(10,21,45,.94)),
        url("https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=2200&q=82")
        center / cover no-repeat;
    }

    .future-grid {
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      align-items:center;
      gap:100px;
    }

    .future h2 { max-width:650px; }

    .scenario-card {
      border:1px solid rgba(246,242,232,.16);
      padding:30px 30px 24px;
      background:rgba(7,17,39,.24);
      backdrop-filter:blur(12px);
    }

    .scenario-row {
      display:grid;
      grid-template-columns:90px 1fr;
      align-items:center;
      gap:18px;
      padding:11px 0;
      color:rgba(246,242,232,.64);
      font-size:12px;
    }

    .scenario-row svg { width:100%;height:46px; }
    .scenario-row path {
      fill:none;
      stroke:rgba(246,242,232,.78);
      stroke-width:1.7;
      stroke-dasharray:5 7;
    }

    .years {
      margin-left:108px;
      display:flex;
      justify-content:space-between;
      color:rgba(246,242,232,.36);
      font-size:10px;
      letter-spacing:.08em;
    }

    .signup {
      position:relative;
      padding:145px 0 115px;
      background:
        radial-gradient(ellipse at 20% 92%,rgba(20,184,166,.16),transparent 28%),
        linear-gradient(180deg,#0c1838,#0e1c41);
    }

    .signup::after {
      content:"";
      position:absolute;
      left:6%; bottom:2%; width:43%; aspect-ratio:3/1;
      border-radius:50%;
      border:1px solid rgba(20,184,166,.20);
      box-shadow:
        0 0 0 18px rgba(20,184,166,.035),
        0 0 0 38px rgba(20,184,166,.025),
        0 0 60px rgba(20,184,166,.09);
      transform:perspective(600px) rotateX(70deg);
      pointer-events:none;
    }

    .signup-grid {
      display:grid;
      grid-template-columns:.75fr 1.25fr;
      gap:100px;
      position:relative;
      z-index:2;
    }

    .signup-intro {
      max-width:470px;
    }

    .form {
      display:grid;
      gap:20px;
    }

    .form-row {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }

    .field label,
    .role-label {
      display:block;
      font-size:11px;
      margin-bottom:8px;
      color:rgba(246,242,232,.88);
    }

    .field input {
      width:100%;
      padding:15px 16px;
      color:var(--warm);
      background:rgba(255,255,255,.02);
      border:1px solid rgba(246,242,232,.24);
      border-radius:5px;
      outline:none;
      transition:.2s ease;
    }

    .field input:focus {
      border-color:var(--teal);
      background:rgba(20,184,166,.04);
      box-shadow:0 0 0 3px rgba(20,184,166,.08);
    }

    .roles {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
    }

    .role-choice { position:relative; display:flex; }
    .role-choice input {
      position:absolute;
      width:1px;
      height:1px;
      opacity:0;
    }

    .role {
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      width:100%;
      min-height:48px;
      border:1px solid rgba(246,242,232,.22);
      border-radius:5px;
      background:rgba(255,255,255,.018);
      color:rgba(246,242,232,.75);
      cursor:pointer;
      padding:12px;
      transition:.2s ease;
    }

    .role:hover,
    .role-choice input:checked + .role {
      background:var(--teal);
      border-color:var(--teal);
      color:var(--navy);
    }

    .role-choice input:focus-visible + .role { outline:2px solid var(--warm); outline-offset:4px; }

    .consent {
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:rgba(246,242,232,.62);
      font-size:13px;
      line-height:1.5;
    }

    .consent input {
      margin-top:3px;
      accent-color:var(--teal);
    }

    .submit {
      width:100%;
      border:0;
      border-radius:999px;
      background:linear-gradient(90deg,#2dd4bf,var(--teal));
      color:var(--navy);
      padding:17px 22px;
      font-weight:700;
      cursor:pointer;
      transition:.2s ease;
    }

    .submit:hover { transform:translateY(-1px); filter:brightness(1.05); }
    .submit:disabled { opacity:.65; cursor:wait; transform:none; }

    .status {
      min-height:18px;
      color:var(--teal);
      font-size:14px;
      line-height:1.6;
    }
    .status[data-state="error"] { color:#ffb7ac; }

    :focus-visible { outline:2px solid var(--teal); outline-offset:5px; }
    .skip-link { position:fixed; top:12px; left:12px; transform:translateY(-180%); z-index:50; padding:12px 18px; background:var(--warm); color:var(--navy); }
    .skip-link:focus { transform:none; }
    .topbar-actions { display:flex; align-items:center; gap:30px; }
    .nav-signup { font-size:13px; padding:10px 0; border-bottom:1px solid var(--teal); }
    .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px 36px; }
    .text-link { color:var(--warm); font-size:14px; padding-block:10px; border-bottom:1px solid rgba(20,184,166,.55); }
    .text-link:hover,.nav-signup:hover { color:var(--teal); }
    .copy + .copy { margin-top:18px; }
    .perspective-head { margin-bottom:64px; gap:64px; }
    .step p { max-width:290px; }
    .step-number { color:rgba(20,184,166,.36); font-size:64px; }
    .scenario-heading { margin:0 0 20px; padding-bottom:18px; border-bottom:1px solid var(--hair); color:var(--warm); font-size:14px; font-weight:500; }
    .scenario-caption { margin:20px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
    .scenario-row { font-size:14px; }
    .years { font-size:12px; color:var(--muted); }
    .form-note { color:var(--muted); font-size:13px; line-height:1.6; margin:0; }
    .field label,.role-label { font-size:14px; }
    .optional { color:var(--muted); font-size:12px; font-weight:400; }
    fieldset { min-width:0; padding:0; margin:0; border:0; }
    legend { padding:0; }
    .consent a,.privacy-copy a { text-decoration:underline; text-underline-offset:3px; }
    .consent input { flex-shrink:0; width:18px; height:18px; }
    .honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
    .privacy-page { background:var(--navy-3); }
    .privacy-main { padding:150px 0 90px; }
    .privacy-copy { max-width:760px; }
    .privacy-copy h1 { font:400 clamp(42px,7vw,76px)/1.05 "DM Serif Display",serif; letter-spacing:-.025em; }
    .privacy-copy h2 { font-size:28px; margin-top:42px; }
    .privacy-copy p,.privacy-copy li { color:var(--muted); font-size:16px; line-height:1.8; }
    .privacy-copy li + li { margin-top:8px; }

    footer {
      background:#071025;
      border-top:1px solid rgba(255,255,255,.06);
      padding:34px 0;
    }

    .footer-inner {
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:28px;
      color:rgba(246,242,232,.50);
      font-size:12px;
    }

    .footer-brand {
      font-size:22px;
      color:var(--warm);
      margin-bottom:6px;
    }

    .footer-links {
      display:flex;
      gap:18px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    @media (max-width:980px) {
      .hero-copy { width:100%; }
      .hero-note { display:none; }
      .under-grid,
      .perspective-head,
      .future-grid,
      .signup-grid {
        grid-template-columns:1fr;
        gap:52px;
      }
      .line-stage { min-height:0; }
      .steps { grid-template-columns:1fr; }
      .step {
        min-height:0;
        border-right:0;
        border-bottom:1px solid var(--hair);
      }
      .step:last-child { border-bottom:0; }
      .signup::after { display:none; }
    }

    @media (max-width:650px) {
      .wedge { display:none; }
      .hero { padding-top:128px; }
      .hero h1 { font-size:clamp(46px,13.8vw,82px); line-height:1; }
      .hero .lead { font-size:18px; }
      .form-row,
      .roles { grid-template-columns:1fr; }
      .p1,.p2,.p3 { display:none; }
      .underwater,.perspective,.future,.signup { padding:100px 0; }
      .future { min-height:auto; }
      .footer-inner { align-items:flex-start; flex-direction:column; }
      .footer-links { justify-content:flex-start; }
      .topbar-actions { gap:0; }
      .logo img { height:38px; }
      .nav-signup { font-size:12px; }
      .scroll-link { font-size:11px; letter-spacing:.1em; }
      .hero-actions { gap:20px; }
      .step { padding:32px 0; }
      .step-number { font-size:48px; margin-bottom:20px; }
      .perspective-head { margin-bottom:36px; }
      .scenario-card { padding:24px 18px; }
      .scenario-row { grid-template-columns:70px minmax(0,1fr); gap:12px; }
      .years { margin-left:82px; font-size:11px; }
      .roles { gap:8px; }
      .role { min-height:48px; }
      .privacy-main { padding-top:120px; }
    }

    @media (prefers-reduced-motion:reduce) {
      html { scroll-behavior:auto; }
      .site-bg,.fog { transform:none!important; }
      *,*::before,*::after { transition:none!important; }
    }