:root{
    color-scheme: dark;
    --ground:#080E1D;
    --panel:#0E1630;
    --line:#1C2748;
    --blue:#1B3ECB;
    --blue-lit:#4F74FF;
    --orange:#FE6529;
    --ink:#F1F3FA;
    --muted:#8D97B8;
    --display:"Bricolage Grotesque", "Figtree", system-ui, sans-serif;
    --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --wrap:1160px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
  .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
  .label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .label b{color:var(--orange);font-weight:500}

  /* nav */
  header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
  header.nav.scrolled{border-bottom-color:var(--line)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
  .logo{position:relative;display:inline-block;line-height:0}
  .logo img{display:block;width:auto}
  .nav .logo img{height:30px}
  .ldot{position:absolute;left:58.77%;top:65.55%;width:2.9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--orange);animation:ldot 2s ease-in-out infinite}
  @keyframes ldot{0%{box-shadow:0 0 0 0 rgba(254,101,41,.7),0 0 6px rgba(254,101,41,.9);opacity:1}50%{opacity:.75}70%{box-shadow:0 0 0 7px rgba(254,101,41,0),0 0 10px rgba(254,101,41,.4)}100%{box-shadow:0 0 0 0 rgba(254,101,41,0),0 0 6px rgba(254,101,41,.9);opacity:1}}
  .nav nav{display:flex;gap:28px;align-items:center}
  .nav nav a{text-decoration:none;font-size:15px;color:var(--muted);transition:color .2s}
  .nav nav a:hover{color:var(--ink)}
  .nav nav a.cta{color:var(--ink);border:1px solid var(--line);padding:8px 16px;border-radius:999px}
  .nav nav a.cta:hover{border-color:var(--orange)}
  @media (max-width:640px){.nav nav a:not(.cta){display:none}}

  /* hero */
  .hero{padding-block:clamp(56px,9vw,110px) 0}
  .hero .onair{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px}
  .hero .onair i{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(254,101,41,.6);animation:tally 2.4s infinite}
  @keyframes tally{0%{box-shadow:0 0 0 0 rgba(254,101,41,.55)}70%{box-shadow:0 0 0 12px rgba(254,101,41,0)}100%{box-shadow:0 0 0 0 rgba(254,101,41,0)}}
  h1{font-family:var(--display);font-weight:800;font-size:clamp(46px,8.4vw,112px);line-height:.93;letter-spacing:-.035em;margin:0;text-wrap:balance;max-width:11ch}
  h1 .dot{color:var(--orange)}
  h1 .dim{color:var(--blue-lit)}
  .lede{font-size:clamp(18px,2vw,21px);color:#C6CCE0;max-width:36ch;margin:28px 0 0;text-wrap:pretty}
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
  .hero-side{padding-bottom:10px}
  @media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-side{padding-bottom:0}}

  .flow{position:relative;margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .flow canvas{display:block;width:100%;height:clamp(240px,30vw,360px)}
  .flow .cap{position:absolute;left:0;bottom:12px;padding-inline:clamp(16px,4vw,40px)}

  /* sections */
  section{padding-block:clamp(72px,10vw,128px)}
  h2{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.6vw,56px);line-height:1.02;letter-spacing:-.025em;margin:14px 0 0;text-wrap:balance;max-width:18ch}
  .intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
  .intro p{margin:0 0 18px;color:#C6CCE0;max-width:58ch}
  .intro p:first-child{font-size:20px;color:var(--ink)}
  @media (max-width:860px){.intro{grid-template-columns:1fr}}

  .chain{margin-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
  .stage{padding:32px 30px 34px;position:relative;display:flex;flex-direction:column;gap:14px}
  .stage + .stage{border-left:1px solid var(--line)}
  .stage .meter{display:flex;gap:3px;align-items:flex-end;height:26px}
  .stage .meter span{width:6px;border-radius:2px;background:var(--blue);animation:bounce 1.6s ease-in-out infinite}
  .stage .meter span:nth-last-child(-n+2){background:var(--orange)}
  @keyframes bounce{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
  .stage .meter span{transform-origin:bottom}
  .stage h3{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.015em;margin:6px 0 0;line-height:1.1}
  .stage p{margin:0;color:var(--muted);font-size:16px}
  .stage ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .stage li{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#B7C0DC;border:1px solid var(--line);border-radius:999px;padding:5px 11px}
  @media (max-width:860px){.chain{grid-template-columns:1fr}.stage + .stage{border-left:0;border-top:1px solid var(--line)}}

  /* credentials */
  .creds{border-block:1px solid var(--line);padding-block:0;overflow:hidden}
  .creds .row{display:flex;align-items:center;gap:32px;padding-block:28px}
  .creds .label{flex:none}
  .ticker{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .ticker .track{display:flex;gap:44px;width:max-content;animation:scroll 38s linear infinite}
  .ticker span{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.01em;color:#5E6A92;white-space:nowrap}
  .ticker span em{font-style:normal;color:var(--orange);margin-left:44px}
  @keyframes scroll{to{transform:translateX(-50%)}}
  @media (max-width:640px){.creds .row{flex-direction:column;align-items:flex-start;gap:14px}.ticker{width:100%}}

  /* founder */
  .founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,6vw,96px);align-items:start}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:36px}
  .stats div{background:var(--ground);padding:22px 22px 20px}
  .stats strong{display:block;font-family:var(--display);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.03em}
  .stats strong sup{color:var(--orange);font-size:.55em;vertical-align:top;margin-left:2px}
  .stats span{font-size:14px;color:var(--muted)}
  .founder .bio p{margin:0 0 18px;color:#C6CCE0;max-width:60ch}
  .founder .bio p.big{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.4vw,28px);line-height:1.3;color:var(--ink);letter-spacing:-.01em}
  .sig{display:flex;align-items:center;gap:14px;margin-top:28px}
  .sig .av{width:46px;height:46px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:17px}
  .sig strong{display:block;font-weight:600}
  .sig span{font-size:14px;color:var(--muted)}
  @media (max-width:860px){.founder{grid-template-columns:1fr}}

  /* how it works */
  .how{padding-top:0}
  .path{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative}
  .path::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:linear-gradient(90deg,var(--blue-lit),var(--line) 70%,var(--orange))}
  .path li{position:relative;display:flex;flex-direction:column;gap:10px}
  .path .node{width:15px;height:15px;border-radius:50%;background:var(--ground);border:2px solid var(--blue-lit);margin-bottom:14px;position:relative;z-index:1}
  .path .node{transition:border-color .3s,background .3s}
  .path .node.lit{border-color:var(--orange);background:var(--orange);animation:nodepulse 1.2s ease-out}
  @keyframes nodepulse{0%{box-shadow:0 0 0 0 rgba(254,101,41,.7)}100%{box-shadow:0 0 0 14px rgba(254,101,41,0)}}
  .path li h3{transition:color .3s}
  .path li.on h3{color:#fff}
  .path .spark{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px 3px rgba(254,101,41,.75),0 0 24px 6px rgba(254,101,41,.3);transform:translate(-50%,-50%);z-index:2;pointer-events:none;opacity:0}
  .path h3{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.015em;margin:0;line-height:1.15}
  .path p{margin:0;color:var(--muted);font-size:16px;max-width:30ch}
  @media (max-width:860px){
    .path{grid-template-columns:1fr;gap:34px;padding-left:34px}
    .path::before{left:7px;right:auto;top:8px;bottom:8px;width:1px;height:auto;background:linear-gradient(180deg,var(--blue-lit),var(--line) 70%,var(--orange))}
    .path .node{position:absolute;left:-34px;top:2px;margin:0}
  }

  /* contact */
  .contact{background:var(--blue);color:#fff;border-radius:28px;padding:clamp(40px,6vw,80px);position:relative;overflow:hidden}
  .contact .label{color:rgba(255,255,255,.7)}
  .contact h2{max-width:14ch;color:#fff}
  .contact h2 span{color:var(--orange)}
  .contact p{max-width:44ch;color:rgba(255,255,255,.82);margin:18px 0 32px}
  .mail{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .mail code{font-family:var(--mono);font-size:clamp(16px,2.2vw,22px);background:rgba(8,14,29,.35);padding:14px 20px;border-radius:12px;user-select:all;word-break:break-all}
  .mail button{font:600 15px var(--body);background:var(--orange);color:#fff;border:0;border-radius:12px;padding:15px 22px;cursor:pointer;transition:transform .15s}
  .mail button:hover{transform:translateY(-1px)}
  .contact .rings{position:absolute;right:-120px;top:-120px;width:460px;height:460px;border-radius:50%;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 60px rgba(255,255,255,.03),0 0 0 120px rgba(255,255,255,.025);pointer-events:none}

  footer{padding-block:48px 56px}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
  footer .logo img{height:24px}
  footer .label{letter-spacing:.1em}

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
  }

  .mail a{color:inherit;text-decoration:none}
  .mail a:hover code{background:rgba(8,14,29,.5)}
