@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/dm-mono-0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/dm-mono-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/fonts/sora-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/sora-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/sora-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Layout: a living neural field fixed behind the page. The hero sits directly on it;
     later sections are translucent bands, so the field keeps firing behind the reading. */
  :root {
    color-scheme: dark;
    --abyss: #07141F;
    --deep: #0A1C2C;
    --tissue: #14406B;
    --signal: #4DA3FF;
    --spark: #CFE6FF;
    --ink: #E3EEF8;
    --soft: #A3BFD9;
    --hair: rgba(163, 191, 217, .18);
    --band: rgba(7, 20, 31, .8);
    --band-2: rgba(10, 28, 44, .84);
    --display: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --body: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
    --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  }
  html { background: var(--abyss); scroll-behavior: smooth; }
  body { background: var(--abyss); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  .tissue { position: fixed; inset: 0; z-index: 0; background: radial-gradient(1050px 680px at 70% 34%, var(--tissue) 0%, rgba(20, 64, 107, 0) 70%); pointer-events: none; }
  #field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
  .page { position: relative; z-index: 1; }

  .wrap { max-width: 1200px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  a { color: inherit; }
  a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

  .label { font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); margin: 0; }

  /* nav */
  .nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
  .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: .24em; }
  .brand svg { width: 26px; height: 26px; flex: none; }
  .links { display: flex; align-items: center; gap: 30px; font-size: 15px; color: var(--soft); }
  .links a { text-decoration: none; transition: color .2s; }
  .links a:hover { color: var(--ink); }
  .soon { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--spark); border: 1px solid rgba(77, 163, 255, .45); padding: 7px 12px; white-space: nowrap; }
  .soon i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: fire 2.4s ease-in-out infinite; }
  @keyframes fire { 0%, 100% { opacity: .45; } 12% { opacity: 1; } 40% { opacity: .6; } }
  @media (prefers-reduced-motion: reduce) { .soon i { animation: none; } }

  /* hero */
  .hero { position: relative; padding-block: clamp(64px, 10vw, 136px) clamp(72px, 10vw, 128px); }
  /* Quiets the field behind the headline; the activity stays on the right. */
  .hero::before { content: ""; position: absolute; z-index: -1; top: -110px; bottom: 0; left: -50vw; right: 6%; background: linear-gradient(90deg, rgba(7, 20, 31, .84) 0%, rgba(7, 20, 31, .84) 66%, rgba(7, 20, 31, 0) 100%); pointer-events: none; }
  @media (max-width: 620px) { .hero::before { right: -50vw; background: rgba(7, 20, 31, .62); } }
  h1 { font-family: var(--display); font-weight: 200; font-size: clamp(44px, 6.7vw, 94px); line-height: 1.06; letter-spacing: -.02em; margin: 22px 0 0; max-width: 13ch; text-wrap: balance; }
  h1 em { font-style: normal; color: var(--signal); display: block; font-weight: 300; }
  .lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--ink); max-width: 33em; margin: 30px 0 0; text-shadow: 0 0 22px var(--abyss), 0 0 8px var(--abyss); }
  .reach { font-family: var(--mono); font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: var(--soft); margin: 26px 0 0; }
  .status { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 38px; }
  .status .soon { font-size: 13px; padding: 12px 18px; background: rgba(0, 113, 227, .22); }
  .status p { margin: 0; color: var(--soft); font-size: 15.5px; }

  /* sections */
  section.band { background: var(--band); border-top: 1px solid var(--hair); padding-block: clamp(64px, 8vw, 104px); }
  section.band.alt { background: var(--band-2); }
  h2 { font-family: var(--display); font-weight: 300; font-size: clamp(30px, 3.9vw, 50px); line-height: 1.14; letter-spacing: -.015em; margin: 16px 0 0; max-width: 21ch; text-wrap: balance; }
  .intro { color: var(--soft); max-width: 40em; margin: 20px 0 0; font-size: 18px; }
  h3 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.25; letter-spacing: -.005em; margin: 0; }

  .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 56px); margin-top: clamp(40px, 5vw, 60px); }
  .cols > div { min-width: 0; padding-top: 20px; border-top: 1px solid var(--hair); }
  .cols p { color: var(--soft); margin: 10px 0 0; }

  .concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 5vw, 64px) clamp(28px, 4vw, 56px); margin-top: clamp(44px, 5vw, 64px); }
  .concept { min-width: 0; }
  .concept canvas { display: block; width: 100%; height: 172px; border-bottom: 1px solid var(--hair); }
  .concept h3 { margin-top: 20px; }
  .neuro { font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; color: var(--signal); margin: 6px 0 0; }
  .concept p:last-child { color: var(--soft); margin: 11px 0 0; }

  .recall { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
  .recall > div { min-width: 0; }
  #lanes { display: block; width: 100%; height: 300px; }
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 56px); margin: clamp(40px, 5vw, 60px) 0 0; }
  .stats > div { min-width: 0; padding-top: 18px; border-top: 1px solid var(--hair); }
  .stats dt { font-family: var(--display); font-weight: 200; font-size: clamp(42px, 5.2vw, 68px); line-height: 1; color: var(--spark); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .stats dd { margin: 12px 0 0; color: var(--soft); max-width: 25ch; }
  .note { font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--soft); max-width: 78ch; margin: 28px 0 0; }

  .close { padding-block: clamp(84px, 11vw, 150px); text-align: left; }
  .close h2 { font-weight: 200; font-size: clamp(46px, 7vw, 100px); margin-top: 18px; max-width: none; line-height: 1.04; }
  .close p:last-child { color: var(--ink); max-width: 34em; margin: 22px 0 0; font-size: 19px; text-shadow: 0 0 20px var(--abyss); }

  footer { background: var(--abyss); border-top: 1px solid var(--hair); position: relative; z-index: 1; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; padding-block: 26px; font-family: var(--mono); font-size: 12.5px; color: var(--soft); }

  @media (max-width: 940px) {
    .cols, .concepts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .recall { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 620px) {
    body { font-size: 16.5px; }
    .links a { display: none; }
    .cols, .concepts, .stats { grid-template-columns: minmax(0, 1fr); }
    #lanes { height: 250px; }
  }