@layer reset, base, components, sections, responsive;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    background: #05090d;
  }

  body,
  h1,
  h2,
  h3,
  p {
    margin: 0;
  }

  button,
  a {
    color: inherit;
  }

  button {
    font: inherit;
  }
}

@layer base {
  :root {
    --ink: #05090d;
    --ink-2: #091118;
    --paper: #e9e5d8;
    --muted: #82909a;
    --line: rgba(233, 229, 216, 0.15);
    --cyan: #35cfff;
    --cyan-soft: rgba(53, 207, 255, 0.14);
    --amber: #f3a43b;
    --amber-soft: rgba(243, 164, 59, 0.14);
    --serif: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --snap: cubic-bezier(0.77, 0, 0.18, 1);
    --hero-progress: 0;
    --velocity-progress: 0;
    --pointer-x: 72%;
    --pointer-y: 42%;
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 76% 13%, rgba(30, 87, 116, 0.12), transparent 30rem),
      var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    cursor: none;
  }

  body.menu-open,
  body.is-loading {
    overflow: hidden;
  }

  ::selection {
    color: var(--ink);
    background: var(--cyan);
  }

  a,
  button {
    cursor: none;
  }

  em {
    color: var(--cyan);
    font-style: normal;
  }
}

@layer components {
  .loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-content: center;
    width: 100%;
    padding: 8vw;
    background: #020507;
    transition: opacity 0.75s var(--snap), visibility 0.75s;
  }

  .loader.done {
    visibility: hidden;
    opacity: 0;
  }

  .loader::before {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(53, 207, 255, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(53, 207, 255, 0.025) 1px, transparent 1px);
    background-size: 54px 54px;
    content: "";
  }

  .loader__brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18vh;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.35em;
  }

  .loader__brand img,
  .brand img {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(53, 207, 255, 0.22);
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 24px rgba(53, 207, 255, 0.09);
  }

  .loader__status {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: min(540px, 78vw);
    margin-bottom: 12px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.26em;
  }

  .loader__status span:last-child {
    color: var(--cyan);
    font-size: 13px;
  }

  .loader__track {
    position: relative;
    width: min(540px, 78vw);
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.11);
  }

  .loader__track i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--cyan);
    box-shadow: 0 0 18px var(--cyan);
    transition: width 0.2s linear;
  }

  .grain {
    position: fixed;
    inset: -50%;
    z-index: 90;
    pointer-events: none;
    opacity: 0.045;
    background-image: radial-gradient(rgba(255, 255, 255, 0.42) 0.55px, transparent 0.7px);
    background-size: 4px 4px;
    animation: grain 0.55s steps(2) infinite;
  }

  @keyframes grain {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(2%, -1%, 0); }
    50% { transform: translate3d(-1%, 2%, 0); }
    75% { transform: translate3d(1%, 1%, 0); }
    100% { transform: translate3d(-2%, -1%, 0); }
  }

  .route-canvas {
    position: fixed;
    inset: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
  }

  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    pointer-events: none;
    transition: transform 0.25s var(--ease);
  }

  .cursor i,
  .cursor b {
    position: absolute;
    border-radius: 50%;
  }

  .cursor i {
    inset: 0;
    border: 1px solid rgba(53, 207, 255, 0.8);
    transition: transform 0.25s var(--ease), border-color 0.25s;
  }

  .cursor b {
    inset: 17px;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan);
  }

  .cursor.hot i {
    transform: scale(1.6);
    border-color: var(--amber);
  }

  .cursor.hot b {
    background: var(--amber);
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    padding: 22px clamp(22px, 4vw, 64px);
    border-bottom: 1px solid transparent;
    transition: padding 0.35s var(--ease), background 0.35s, border-color 0.35s;
  }

  .site-header.compact {
    padding-top: 13px;
    padding-bottom: 13px;
    border-color: rgba(233, 229, 216, 0.09);
    background: rgba(5, 9, 13, 0.72);
    backdrop-filter: blur(18px);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: max-content;
    text-decoration: none;
    font-family: var(--mono);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.24em;
  }

  .brand img {
    width: 30px;
    height: 30px;
  }

  .skip-link {
    position: fixed;
    top: -70px;
    left: 18px;
    z-index: 1200;
    padding: 10px 14px;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .skip-link:focus {
    top: 16px;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.6vw, 42px);
  }

  .site-nav a {
    position: relative;
    padding: 8px 0;
    color: rgba(233, 229, 216, 0.68);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.24em;
    transition: color 0.3s;
  }

  .site-nav a::before {
    position: absolute;
    top: -4px;
    left: 0;
    color: var(--cyan);
    font-size: 6px;
    content: attr(data-index);
  }

  .site-nav a::after {
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    height: 1px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease);
    content: "";
  }

  .site-nav a:hover,
  .site-nav a.active {
    color: var(--paper);
  }

  .site-nav a:hover::after,
  .site-nav a.active::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .header-meta,
  .header-cta {
    display: flex;
    justify-self: end;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.18em;
  }

  .header-cta {
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(53, 207, 255, 0.3);
    color: var(--paper);
    text-decoration: none;
  }

  .header-cta span {
    color: var(--cyan);
    font-size: 13px;
  }

  .live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 9px var(--cyan);
    animation: pulse 1.8s infinite;
  }

  @keyframes pulse {
    50% { opacity: 0.3; }
  }

  .menu-toggle {
    display: none;
    border: 0;
    background: transparent;
  }

  .side-index {
    position: fixed;
    top: 50%;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(233, 229, 216, 0.35);
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: 0.3em;
    writing-mode: vertical-rl;
  }

  .side-index i {
    width: 1px;
    height: 48px;
    background: linear-gradient(transparent, var(--cyan), transparent);
  }

  .side-index--left {
    left: 14px;
    transform: translateY(-50%) rotate(180deg);
  }

  .side-index--right {
    right: 14px;
    transform: translateY(-50%);
  }

  .eyebrow {
    color: var(--amber);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.32em;
  }

  .section {
    position: relative;
    z-index: 10;
    padding: clamp(110px, 14vw, 210px) clamp(24px, 8vw, 138px);
    background: var(--ink);
  }

  .section-heading {
    display: grid;
    grid-template-columns: 1.6fr 0.65fr;
    align-items: end;
    gap: 7vw;
    max-width: 1400px;
    margin: 0 auto 90px;
  }

  .section-heading .eyebrow {
    grid-column: 1 / -1;
  }

  .kinetic-title {
    font-family: var(--serif);
    font-size: clamp(54px, 8.5vw, 138px);
    font-weight: 800;
    line-height: 0.77;
    letter-spacing: -0.07em;
    text-transform: uppercase;
  }

  .section-intro {
    max-width: 420px;
    color: #aeb8be;
    font-size: clamp(13px, 1.25vw, 17px);
    line-height: 1.75;
  }

  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  }

  .reveal.in {
    opacity: 1;
    transform: none;
  }

  .magnetic {
    will-change: transform;
  }
}

@layer sections {
  .hero {
    position: relative;
    height: 180vh;
    min-height: 1000px;
    background: var(--ink);
  }

  .hero__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 620px;
    overflow: hidden;
    isolation: isolate;
  }

  .hero__image {
    position: absolute;
    inset: -4%;
    z-index: -4;
    background-image: url("assets/ai-security-core.webp");
    background-position: 50% 50%;
    background-size: cover;
    filter: saturate(0.82) contrast(1.08) brightness(0.82);
    transform:
      translate3d(calc(var(--hero-progress) * -1.5%), calc(var(--hero-progress) * -1.5%), 0)
      scale(calc(1.04 + var(--hero-progress) * 0.055));
    will-change: transform;
  }

  .hero__wash {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
      linear-gradient(90deg, rgba(5, 9, 13, 0.93) 0%, rgba(5, 9, 13, 0.52) 35%, transparent 64%),
      linear-gradient(0deg, rgba(5, 9, 13, 0.92) 0%, transparent 38%, rgba(5, 9, 13, 0.38) 100%),
      radial-gradient(circle at 70% 48%, transparent 0 13%, rgba(5, 9, 13, calc(var(--hero-progress) * 0.22)) 48%);
  }

  .hero__wash::after {
    position: absolute;
    inset: 0;
    background: rgba(4, 15, 23, calc(var(--hero-progress) * 0.26));
    content: "";
  }

  .hero__wash::before {
    position: absolute;
    inset: -35% -20%;
    background: linear-gradient(112deg, transparent 38%, rgba(53, 207, 255, 0.08) 48%, rgba(243, 164, 59, 0.025) 52%, transparent 62%);
    transform: translate3d(-32%, 0, 0) rotate(-5deg);
    animation: light-sweep 13s var(--ease) infinite;
    mix-blend-mode: screen;
    content: "";
  }

  .hero__motion {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(53, 207, 255, 0.11), transparent 19%);
  }

  .hero__motion i {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.55;
    filter: blur(54px);
    mix-blend-mode: screen;
    will-change: transform;
  }

  .hero__motion i:nth-child(1) {
    top: 13%;
    right: 13%;
    width: 28vw;
    height: 28vw;
    background: rgba(53, 207, 255, 0.13);
    animation: ambient-drift-one 16s ease-in-out infinite alternate;
  }

  .hero__motion i:nth-child(2) {
    right: 37%;
    bottom: 4%;
    width: 20vw;
    height: 20vw;
    background: rgba(41, 121, 171, 0.12);
    animation: ambient-drift-two 20s ease-in-out infinite alternate;
  }

  .hero__motion i:nth-child(3) {
    top: 24%;
    left: 18%;
    width: 15vw;
    height: 15vw;
    background: rgba(243, 164, 59, 0.055);
    animation: ambient-drift-three 18s ease-in-out infinite alternate;
  }

  .hero__motion b {
    position: absolute;
    top: 0;
    left: 62%;
    width: 1px;
    height: 100%;
    background: linear-gradient(transparent 4%, rgba(53, 207, 255, 0.38) 48%, transparent 94%);
    box-shadow: 0 0 32px rgba(53, 207, 255, 0.22);
    opacity: 0.24;
    animation: vertical-trace 10s ease-in-out infinite alternate;
  }

  @keyframes light-sweep {
    0%, 22% { transform: translate3d(-38%, 0, 0) rotate(-5deg); opacity: 0; }
    48% { opacity: 0.8; }
    76%, 100% { transform: translate3d(38%, 0, 0) rotate(-5deg); opacity: 0; }
  }

  @keyframes ambient-drift-one {
    from { transform: translate3d(-4%, -3%, 0) scale(0.92); opacity: 0.35; }
    to { transform: translate3d(10%, 7%, 0) scale(1.12); opacity: 0.68; }
  }

  @keyframes ambient-drift-two {
    from { transform: translate3d(8%, 6%, 0) scale(1.1); }
    to { transform: translate3d(-12%, -8%, 0) scale(0.9); }
  }

  @keyframes ambient-drift-three {
    from { transform: translate3d(-8%, 7%, 0); opacity: 0.2; }
    to { transform: translate3d(15%, -9%, 0); opacity: 0.52; }
  }

  @keyframes vertical-trace {
    from { transform: translate3d(-7vw, -12%, 0); }
    to { transform: translate3d(12vw, 12%, 0); }
  }

  .hero__rings {
    position: absolute;
    top: 50%;
    right: clamp(10%, 20vw, 25%);
    z-index: -2;
    width: min(46vw, 620px);
    aspect-ratio: 1;
    transform: translate(50%, -50%);
  }

  .hero__rings i {
    position: absolute;
    inset: calc(var(--n, 0) * 12%);
    border: 1px solid rgba(53, 207, 255, 0.16);
    border-radius: 50%;
    transform: scale(calc(0.72 + var(--hero-progress) * 0.34)) rotate(calc(var(--hero-progress) * 24deg));
  }

  .hero__rings i:nth-child(1) { --n: 0; border-style: dashed; }
  .hero__rings i:nth-child(2) { --n: 1; border-color: rgba(243, 164, 59, 0.15); }
  .hero__rings i:nth-child(3) { --n: 2; border-style: dotted; }

  .hero__topline {
    position: absolute;
    top: 16%;
    left: clamp(28px, 8vw, 138px);
    display: flex;
    align-items: center;
    width: min(520px, 46vw);
    color: rgba(233, 229, 216, 0.45);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.28em;
  }

  .hero__topline i {
    flex: 1;
    height: 1px;
    margin: 0 18px;
    background: var(--line);
  }

  .hero__copy {
    position: absolute;
    top: 50%;
    left: clamp(28px, 8vw, 138px);
    z-index: 2;
    transform: translateY(calc(-52% + var(--hero-progress) * -18px));
  }

  .hero__title {
    margin: 22px 0 24px;
    font-family: var(--serif);
    font-size: clamp(82px, 13.5vw, 220px);
    font-weight: 900;
    line-height: 0.68;
    letter-spacing: -0.095em;
  }

  .hero__title span:first-child {
    font-size: 0.77em;
    letter-spacing: -0.075em;
  }

  .hero__title span {
    display: block;
    clip-path: inset(0 calc(var(--hero-progress) * 5%) 0 0);
  }

  .hero__title .outline {
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 229, 216, 0.72);
    transform: translateX(calc(var(--hero-progress) * 28px));
  }

  .hero__subtitle {
    display: flex;
    align-items: center;
    gap: 17px;
  }

  .hero__subtitle span {
    color: var(--amber);
    font-family: Georgia, serif;
    font-size: 42px;
  }

  .hero__subtitle p {
    padding-left: 16px;
    border-left: 1px solid rgba(243, 164, 59, 0.5);
    color: rgba(233, 229, 216, 0.7);
    font-family: var(--mono);
    font-size: 9px;
    line-height: 1.7;
    letter-spacing: 0.32em;
  }

  .hero__quote {
    position: absolute;
    right: clamp(30px, 5vw, 90px);
    bottom: 15%;
    width: 265px;
    color: rgba(233, 229, 216, 0.58);
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    line-height: 1.65;
  }

  .hero__coordinates {
    position: absolute;
    top: 28%;
    right: clamp(30px, 5vw, 90px);
    display: grid;
    gap: 7px;
    color: rgba(233, 229, 216, 0.28);
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: 0.25em;
    text-align: right;
  }

  .scroll-cue {
    position: absolute;
    bottom: 6%;
    left: clamp(28px, 8vw, 138px);
    display: grid;
    grid-template-columns: auto 46px auto;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    font-family: var(--mono);
  }

  .scroll-cue span {
    color: var(--cyan);
    font-size: 8px;
    letter-spacing: 0.28em;
  }

  .scroll-cue i {
    height: 1px;
    background: linear-gradient(90deg, var(--cyan), transparent);
  }

  .scroll-cue b {
    color: rgba(233, 229, 216, 0.34);
    font-size: 7px;
    font-weight: 400;
    letter-spacing: 0.2em;
  }

  .hero__progress {
    position: absolute;
    right: clamp(30px, 5vw, 90px);
    bottom: 6%;
    display: grid;
    grid-template-columns: auto 90px auto;
    align-items: center;
    gap: 10px;
    color: rgba(233, 229, 216, 0.32);
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: 0.18em;
  }

  .hero__progress i {
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
  }

  .hero__progress b {
    display: block;
    width: calc(var(--hero-progress) * 100%);
    height: 100%;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
  }

  .signal {
    padding-top: clamp(140px, 18vw, 260px);
    background:
      radial-gradient(circle at 86% 16%, rgba(53, 207, 255, 0.075), transparent 25%),
      radial-gradient(circle at 10% 86%, rgba(243, 164, 59, 0.045), transparent 21%),
      var(--ink);
    background-size: 125% 125%, 135% 135%, auto;
  }

  .signal::before {
    position: absolute;
    top: 0;
    right: 8vw;
    width: 1px;
    height: 12vw;
    background: linear-gradient(var(--cyan), transparent);
    content: "";
  }

  .signal-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.82fr 0.82fr;
    gap: 1px;
    max-width: 1400px;
    margin: auto;
    background: var(--line);
    border: 1px solid var(--line);
  }

  .signal-card {
    position: relative;
    min-height: 490px;
    overflow: hidden;
    padding: clamp(24px, 3vw, 44px);
    background:
      linear-gradient(150deg, rgba(255, 255, 255, 0.025), transparent 40%),
      #071017;
    transform-style: preserve-3d;
  }

  .signal-card::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(53, 207, 255, 0.13), transparent 34%);
    opacity: 0;
    transition: opacity 0.3s;
    content: "";
  }

  .signal-card:hover::after {
    opacity: 1;
  }

  .card-no {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.22em;
  }

  .signal-card h3 {
    position: absolute;
    bottom: 90px;
    left: clamp(24px, 3vw, 44px);
    font-family: var(--serif);
    font-size: clamp(38px, 4vw, 65px);
    line-height: 0.9;
    letter-spacing: -0.05em;
  }

  .signal-card p {
    position: absolute;
    bottom: 35px;
    left: clamp(24px, 3vw, 44px);
    width: calc(100% - 70px);
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
  }

  .card-code {
    position: absolute;
    top: 48px;
    right: 36px;
    color: rgba(233, 229, 216, 0.08);
    font-family: var(--mono);
    font-size: clamp(16px, 2vw, 26px);
    letter-spacing: 0.2em;
    writing-mode: vertical-rl;
  }

  .signal-wave {
    position: absolute;
    top: 35%;
    right: 11%;
    left: 11%;
    display: flex;
    align-items: center;
    gap: 4%;
    height: 100px;
  }

  .signal-wave i {
    flex: 1;
    height: var(--h, 40%);
    background: linear-gradient(var(--cyan), rgba(53, 207, 255, 0.02));
    box-shadow: 0 0 16px rgba(53, 207, 255, 0.24);
    animation: wave 1.8s ease-in-out infinite alternate;
  }

  .signal-wave i:nth-child(2) { --h: 78%; animation-delay: -0.5s; }
  .signal-wave i:nth-child(3) { --h: 26%; animation-delay: -1s; }
  .signal-wave i:nth-child(4) { --h: 94%; animation-delay: -0.35s; }
  .signal-wave i:nth-child(5) { --h: 48%; animation-delay: -0.8s; }
  .signal-wave i:nth-child(6) { --h: 65%; animation-delay: -1.2s; }
  .signal-wave i:nth-child(7) { --h: 22%; animation-delay: -0.2s; }
  .signal-wave i:nth-child(8) { --h: 82%; animation-delay: -0.65s; }
  .signal-wave i:nth-child(9) { --h: 38%; animation-delay: -1.4s; }

  @keyframes wave {
    to { transform: scaleY(0.48); transform-origin: bottom; opacity: 0.4; }
  }

  .radar {
    position: absolute;
    top: 72px;
    left: 50%;
    width: min(16vw, 210px);
    aspect-ratio: 1;
    border: 1px solid rgba(53, 207, 255, 0.2);
    border-radius: 50%;
    transform: translateX(-50%);
  }

  .radar::before,
  .radar::after {
    position: absolute;
    border: 1px solid rgba(53, 207, 255, 0.12);
    border-radius: 50%;
    content: "";
  }

  .radar::before { inset: 24%; }
  .radar::after { inset: 44%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }

  .radar i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 49%;
    height: 1px;
    background: linear-gradient(90deg, var(--cyan), transparent);
    transform-origin: left;
    animation: radar 3s linear infinite;
  }

  @keyframes radar { to { transform: rotate(360deg); } }

  .radar b {
    position: absolute;
    top: 18%;
    left: 67%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 10px var(--amber);
  }

  .signal-card--accent {
    background:
      radial-gradient(circle at 60% 30%, rgba(243, 164, 59, 0.14), transparent 42%),
      #100e0b;
  }

  .timecode {
    margin-top: 95px;
    color: var(--amber);
    font-family: var(--serif);
    font-size: clamp(68px, 7vw, 108px);
    font-weight: 800;
    letter-spacing: -0.09em;
  }

  .unit {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.32em;
  }

  .solutions {
    isolation: isolate;
    overflow: hidden;
    background:
      linear-gradient(90deg, transparent 49.95%, rgba(53, 207, 255, 0.04) 50%, transparent 50.05%),
      #03070a;
  }

  .solutions::before,
  .solutions::after {
    position: absolute;
    z-index: -1;
    width: 48vw;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    will-change: transform;
    content: "";
  }

  .solutions::before {
    top: 3%;
    right: -18%;
    background: rgba(53, 207, 255, 0.075);
    animation: solution-atmosphere-one 17s ease-in-out infinite alternate;
  }

  .solutions::after {
    bottom: -20%;
    left: -17%;
    background: rgba(243, 164, 59, 0.04);
    animation: solution-atmosphere-two 21s ease-in-out infinite alternate;
  }

  @keyframes solution-atmosphere-one {
    from { transform: translate3d(-7%, -4%, 0) scale(0.88); opacity: 0.45; }
    to { transform: translate3d(9%, 11%, 0) scale(1.15); opacity: 0.9; }
  }

  @keyframes solution-atmosphere-two {
    from { transform: translate3d(9%, 6%, 0) scale(1.08); opacity: 0.35; }
    to { transform: translate3d(-10%, -9%, 0) scale(0.9); opacity: 0.72; }
  }

  .solutions__header,
  .research__header {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    align-items: end;
    gap: 8vw;
    max-width: 1400px;
    margin: 0 auto 90px;
  }

  .solutions__header .kinetic-title,
  .research__header .kinetic-title {
    margin-top: 25px;
  }

  .solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    max-width: 1400px;
    margin: auto;
    border: 1px solid var(--line);
    background: var(--line);
  }

  .solution-card {
    position: relative;
    display: flex;
    min-height: 760px;
    overflow: hidden;
    padding: clamp(25px, 3vw, 43px);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 46%),
      #061019;
    color: var(--paper);
    text-decoration: none;
    transform-style: preserve-3d;
  }

  .solution-card::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(53, 207, 255, 0.12), transparent 34%);
    opacity: 0;
    transition: opacity 0.4s;
    content: "";
  }

  .solution-card:hover::before {
    opacity: 1;
  }

  .solution-card--promptpad {
    background:
      radial-gradient(circle at 72% 25%, rgba(243, 164, 59, 0.08), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.022), transparent 46%),
      #0a0c13;
  }

  .solution-card__top {
    position: absolute;
    top: 28px;
    right: clamp(25px, 3vw, 43px);
    left: clamp(25px, 3vw, 43px);
    z-index: 3;
    display: flex;
    justify-content: space-between;
    color: #687780;
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: 0.2em;
  }

  .solution-card__top b {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(233, 229, 216, 0.48);
    font-weight: 400;
  }

  .solution-card__top b i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan);
    animation: pulse 1.7s ease-in-out infinite;
  }

  .solution-card--promptpad .solution-card__top b i {
    background: var(--amber);
    box-shadow: 0 0 12px var(--amber);
  }

  .solution-visual {
    position: absolute;
    top: 70px;
    right: 6%;
    left: 6%;
    height: 345px;
    overflow: hidden;
    border: 1px solid rgba(53, 207, 255, 0.12);
    background:
      linear-gradient(rgba(53, 207, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(53, 207, 255, 0.04) 1px, transparent 1px),
      radial-gradient(circle at 50% 50%, rgba(53, 207, 255, 0.08), transparent 54%),
      #040a0f;
    background-size: 34px 34px, 34px 34px, auto, auto;
  }

  .solution-card--promptpad .solution-visual {
    border-color: rgba(243, 164, 59, 0.13);
    background:
      linear-gradient(rgba(243, 164, 59, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(243, 164, 59, 0.035) 1px, transparent 1px),
      radial-gradient(circle at 50% 50%, rgba(243, 164, 59, 0.07), transparent 54%),
      #07090f;
    background-size: 34px 34px, 34px 34px, auto, auto;
  }

  .solution-scan {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -18%;
    width: 24%;
    background: linear-gradient(90deg, transparent, rgba(53, 207, 255, 0.16), transparent);
    transform: skewX(-15deg);
    animation: solution-scan 6.5s ease-in-out infinite;
  }

  .solution-card--promptpad .solution-scan {
    background: linear-gradient(90deg, transparent, rgba(243, 164, 59, 0.13), transparent);
    animation-delay: -2.2s;
  }

  @keyframes solution-scan {
    0%, 14% { transform: translate3d(-40%, 0, 0) skewX(-15deg); opacity: 0; }
    38% { opacity: 1; }
    70%, 100% { transform: translate3d(560%, 0, 0) skewX(-15deg); opacity: 0; }
  }

  .solution-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(53, 207, 255, 0.24);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: orbit 18s linear infinite;
  }

  .solution-orbit::before,
  .solution-orbit::after {
    position: absolute;
    border: 1px solid rgba(53, 207, 255, 0.14);
    border-radius: 50%;
    content: "";
  }

  .solution-orbit::before { inset: 23%; border-style: dashed; animation: orbit 10s linear infinite reverse; }
  .solution-orbit::after { inset: 43%; background: rgba(53, 207, 255, 0.16); box-shadow: 0 0 35px rgba(53, 207, 255, 0.3); }

  .solution-orbit > i {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan);
  }

  .solution-orbit > i:nth-child(1) { top: 12%; left: 17%; }
  .solution-orbit > i:nth-child(2) { top: 48%; right: -4px; }
  .solution-orbit > i:nth-child(3) { bottom: 8%; left: 34%; background: var(--amber); box-shadow: 0 0 12px var(--amber); }

  .solution-orbit > b {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    border: 1px solid var(--cyan);
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .solution-node {
    position: absolute;
    padding: 7px 9px;
    border: 1px solid rgba(53, 207, 255, 0.18);
    background: rgba(4, 10, 15, 0.82);
    color: #77878f;
    font-family: var(--mono);
    font-size: 6px;
    letter-spacing: 0.16em;
    animation: node-breathe 3.5s ease-in-out infinite;
  }

  .node-model { top: 13%; left: 10%; }
  .node-tools { top: 17%; right: 9%; animation-delay: -0.8s; }
  .node-agents { right: 13%; bottom: 12%; animation-delay: -1.7s; }
  .node-knowledge { bottom: 15%; left: 9%; animation-delay: -2.5s; }

  @keyframes node-breathe {
    50% { border-color: rgba(53, 207, 255, 0.52); color: var(--paper); box-shadow: 0 0 18px rgba(53, 207, 255, 0.12); }
  }

  .prompt-window {
    position: absolute;
    inset: 13% 11%;
    overflow: hidden;
    border: 1px solid rgba(243, 164, 59, 0.25);
    background: rgba(7, 9, 15, 0.84);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    animation: prompt-window-float 5s ease-in-out infinite;
  }

  @keyframes prompt-window-float {
    50% { transform: translateY(-7px); box-shadow: 0 32px 70px rgba(0, 0, 0, 0.42); }
  }

  .prompt-window__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(243, 164, 59, 0.13);
  }

  .prompt-window__bar i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #41444b;
  }

  .prompt-window__bar i:first-child { background: var(--amber); box-shadow: 0 0 10px rgba(243, 164, 59, 0.55); }

  .prompt-window__bar span {
    margin-left: auto;
    color: #686c75;
    font-family: var(--mono);
    font-size: 6px;
    letter-spacing: 0.16em;
  }

  .prompt-lines {
    position: absolute;
    top: 72px;
    right: 38%;
    left: 8%;
    display: grid;
    gap: 14px;
  }

  .prompt-lines i {
    height: 4px;
    background: linear-gradient(90deg, rgba(243, 164, 59, 0.55), rgba(243, 164, 59, 0.06));
    transform-origin: left;
    animation: prompt-line 3.8s ease-in-out infinite alternate;
  }

  .prompt-lines i:nth-child(2) { width: 82%; animation-delay: -0.6s; }
  .prompt-lines i:nth-child(3) { width: 67%; animation-delay: -1.2s; }
  .prompt-lines i:nth-child(4) { width: 91%; animation-delay: -1.8s; }
  .prompt-lines i:nth-child(5) { width: 53%; animation-delay: -2.4s; }

  @keyframes prompt-line {
    from { transform: scaleX(0.62); opacity: 0.36; }
    to { transform: scaleX(1); opacity: 0.9; }
  }

  .prompt-quality {
    position: absolute;
    top: 72px;
    right: 7%;
    display: grid;
    place-items: center;
    width: 85px;
    height: 110px;
    border: 1px solid rgba(243, 164, 59, 0.16);
  }

  .prompt-quality::before {
    position: absolute;
    inset: 13px;
    border: 1px dashed rgba(243, 164, 59, 0.2);
    border-radius: 50%;
    animation: orbit 11s linear infinite;
    content: "";
  }

  .prompt-quality span { align-self: end; color: #777a81; font-family: var(--mono); font-size: 5px; letter-spacing: 0.12em; }
  .prompt-quality strong { align-self: start; color: var(--amber); font-family: var(--serif); font-size: 34px; line-height: 1; }

  .solution-card__copy {
    position: relative;
    z-index: 3;
    align-self: end;
    width: 100%;
    padding-top: 34px;
    border-top: 1px solid var(--line);
  }

  .solution-kicker {
    color: var(--cyan) !important;
    font-family: var(--mono);
    font-size: 7px !important;
    letter-spacing: 0.24em;
  }

  .solution-card--promptpad .solution-kicker { color: var(--amber) !important; }

  .solution-card__copy h3 {
    margin: 12px 0 18px;
    font-family: var(--serif);
    font-size: clamp(48px, 5.4vw, 86px);
    line-height: 0.82;
    letter-spacing: -0.065em;
  }

  .solution-card__copy h3 em { color: var(--amber); }

  .solution-card__copy > p:not(.solution-kicker) {
    max-width: 520px;
    color: #87959d;
    font-size: 11px;
    line-height: 1.7;
  }

  .solution-card__copy > span {
    display: flex;
    justify-content: space-between;
    margin-top: 26px;
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.2em;
  }

  .solution-card--promptpad .solution-card__copy > span { color: var(--amber); }
  .solution-card__copy > span i { font-size: 15px; font-style: normal; transition: transform 0.3s var(--ease); }
  .solution-card:hover .solution-card__copy > span i { transform: translate(4px, -4px); }

  .velocity {
    position: relative;
    z-index: 10;
    height: 220vh;
    background: #030609;
  }

  .velocity__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 630px;
    overflow: hidden;
    background:
      radial-gradient(circle at 72% 48%, rgba(53, 207, 255, 0.1), transparent 26%),
      #030609;
  }

  .velocity__grid {
    position: absolute;
    inset: 0;
    opacity: 0.36;
    background-image:
      linear-gradient(rgba(53, 207, 255, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(53, 207, 255, 0.09) 1px, transparent 1px);
    background-position: center;
    background-size: calc(8vw + var(--velocity-progress) * 4vw) calc(8vw + var(--velocity-progress) * 4vw);
    transform: perspective(500px) rotateX(62deg) scale(1.8) translateY(calc(30% + var(--velocity-progress) * 28%));
    mask-image: linear-gradient(transparent, black 46%, transparent 92%);
    animation: grid-current 16s linear infinite;
  }

  @keyframes grid-current {
    from { background-position: 0 0; }
    to { background-position: 12vw 12vw; }
  }

  .velocity__lines i {
    position: absolute;
    top: var(--y);
    left: -20vw;
    width: calc(58vw + var(--velocity-progress) * 70vw);
    height: var(--h, 1px);
    background: linear-gradient(90deg, transparent, var(--cyan), rgba(53, 207, 255, 0));
    box-shadow: 0 0 11px rgba(53, 207, 255, 0.75);
    transform: skewX(-18deg) translateX(calc(var(--velocity-progress) * 50vw));
    opacity: var(--o, 0.5);
  }

  .velocity__lines i:nth-child(1) { --y: 19%; --h: 1px; --o: 0.45; }
  .velocity__lines i:nth-child(2) { --y: 28%; --h: 2px; --o: 0.8; }
  .velocity__lines i:nth-child(3) { --y: 43%; --h: 1px; --o: 0.35; }
  .velocity__lines i:nth-child(4) { --y: 57%; --h: 3px; --o: 0.9; }
  .velocity__lines i:nth-child(5) { --y: 68%; --h: 1px; --o: 0.5; }
  .velocity__lines i:nth-child(6) { --y: 76%; --h: 2px; --o: 0.7; }
  .velocity__lines i:nth-child(7) { --y: 87%; --h: 1px; --o: 0.4; }

  .velocity__copy {
    position: absolute;
    top: 50%;
    left: clamp(28px, 8vw, 138px);
    z-index: 4;
    width: min(680px, 66vw);
    transform: translateY(-50%);
  }

  .velocity__copy h2 {
    margin: 25px 0 32px;
    font-family: var(--serif);
    font-size: clamp(72px, 11vw, 176px);
    line-height: 0.76;
    letter-spacing: -0.08em;
  }

  .velocity__copy > p:last-child {
    max-width: 400px;
    color: #97a5ae;
    font-size: 14px;
    line-height: 1.75;
  }

  .velocity__ghost {
    position: absolute;
    top: 16%;
    right: -3%;
    width: 48vw;
    height: 70vh;
    opacity: calc(0.16 + var(--velocity-progress) * 0.45);
    transform: skewX(-12deg) translateX(calc((1 - var(--velocity-progress)) * 48vw));
    filter: blur(calc((1 - var(--velocity-progress)) * 15px));
  }

  .velocity__ghost span {
    position: absolute;
    inset: 4% 14%;
    border: 1px solid rgba(53, 207, 255, 0.28);
    background:
      linear-gradient(125deg, transparent 35%, rgba(53, 207, 255, 0.12) 35% 41%, transparent 41%),
      linear-gradient(60deg, transparent 45%, rgba(243, 164, 59, 0.1) 45% 48%, transparent 48%);
    clip-path: polygon(48% 0, 72% 8%, 88% 30%, 100% 42%, 72% 50%, 84% 100%, 50% 72%, 20% 100%, 31% 53%, 0 45%, 20% 27%);
  }

  .velocity__ghost span:nth-child(2) {
    transform: translateX(-8%) scale(0.94);
    opacity: 0.4;
  }

  .velocity__ghost span:nth-child(3) {
    transform: translateX(-16%) scale(0.88);
    opacity: 0.18;
  }

  .velocity__ghost--network span {
    border-radius: 50%;
    clip-path: polygon(50% 0, 68% 21%, 100% 24%, 79% 50%, 100% 77%, 67% 80%, 50% 100%, 32% 79%, 0 75%, 21% 50%, 0 23%, 33% 21%);
  }

  .speed-readout {
    position: absolute;
    right: 6vw;
    bottom: 8%;
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: 12px;
    font-family: var(--mono);
  }

  .speed-readout span,
  .speed-readout b {
    color: var(--muted);
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.26em;
  }

  .speed-readout strong {
    grid-row: span 2;
    color: var(--cyan);
    font-family: var(--serif);
    font-size: clamp(70px, 9vw, 132px);
    letter-spacing: -0.08em;
  }

  .velocity__route {
    position: absolute;
    right: 6vw;
    left: 6vw;
    bottom: 4%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: 0.22em;
  }

  .velocity__route i {
    height: 1px;
    background: var(--line);
  }

  .velocity__route b {
    display: block;
    width: calc(var(--velocity-progress) * 100%);
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--amber));
  }

  .phase {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 7vw;
    min-height: 100vh;
    background:
      radial-gradient(circle at 73% 50%, rgba(53, 207, 255, 0.08), transparent 26%),
      radial-gradient(circle at 12% 84%, rgba(243, 164, 59, 0.035), transparent 22%),
      var(--ink);
    background-size: 120% 120%, 135% 135%, auto;
  }

  .phase__copy .kinetic-title {
    margin: 26px 0 35px;
    font-size: clamp(56px, 7vw, 108px);
  }

  .phase__copy .section-intro {
    margin-bottom: 55px;
  }

  .phase__steps {
    display: grid;
    border-top: 1px solid var(--line);
  }

  .phase__steps div {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    color: rgba(233, 229, 216, 0.32);
    transition: color 0.4s, padding-left 0.4s var(--ease);
  }

  .phase__steps div.active {
    padding-left: 10px;
    color: var(--paper);
  }

  .phase__steps span {
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 8px;
  }

  .phase__steps p {
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .phase__lab {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 670px;
    overflow: hidden;
    border: 1px solid var(--line);
    background:
      linear-gradient(rgba(53, 207, 255, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(53, 207, 255, 0.045) 1px, transparent 1px),
      radial-gradient(circle, rgba(53, 207, 255, 0.09), transparent 48%),
      #061019;
    background-size: 44px 44px, 44px 44px, auto, auto;
    transition: filter 0.5s, background-color 0.5s;
  }

  .phase__lab.phased {
    filter: hue-rotate(130deg) brightness(1.45);
  }

  .phase__lab::before,
  .phase__lab::after {
    position: absolute;
    width: 46px;
    height: 46px;
    border-color: var(--cyan);
    border-style: solid;
    content: "";
  }

  .phase__lab::before {
    top: 20px;
    left: 20px;
    border-width: 1px 0 0 1px;
  }

  .phase__lab::after {
    right: 20px;
    bottom: 20px;
    border-width: 0 1px 1px 0;
  }

  .phase__hud {
    position: absolute;
    top: 27px;
    right: 30px;
    left: 30px;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.22em;
  }

  .phase__hud b {
    color: var(--cyan);
    font-weight: 400;
  }

  .orb-wrap {
    position: relative;
    width: min(34vw, 410px);
    aspect-ratio: 1;
    transform: perspective(900px) rotateX(var(--orb-rx, 0deg)) rotateY(var(--orb-ry, 0deg));
    transition: transform 0.12s linear;
  }

  .orb {
    position: absolute;
    inset: 21%;
    border: 1px solid rgba(53, 207, 255, 0.55);
    border-radius: 50%;
    background:
      radial-gradient(circle at 36% 34%, white 0 1%, var(--cyan) 2%, rgba(53, 207, 255, 0.18) 18%, rgba(3, 9, 13, 0.94) 65%),
      #07131a;
    box-shadow:
      inset -18px -24px 45px rgba(0, 0, 0, 0.8),
      inset 9px 11px 25px rgba(53, 207, 255, 0.28),
      0 0 35px rgba(53, 207, 255, 0.3),
      0 0 110px rgba(53, 207, 255, 0.14);
    animation: orb-float 4.5s ease-in-out infinite;
  }

  .orb i {
    position: absolute;
    inset: var(--inset);
    border: 1px solid rgba(53, 207, 255, 0.35);
    border-right-color: transparent;
    border-left-color: var(--amber);
    border-radius: 50%;
    animation: orbit var(--speed) linear infinite;
  }

  .orb i:nth-child(1) { --inset: -26%; --speed: 7s; transform: rotateX(64deg); }
  .orb i:nth-child(2) { --inset: -42%; --speed: 11s; animation-direction: reverse; }
  .orb i:nth-child(3) { --inset: -65%; --speed: 17s; border-style: dashed; }

  .orb b {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16%;
    height: 16%;
    border-radius: 50%;
    background: #e9fbff;
    box-shadow: 0 0 24px var(--cyan), 0 0 70px var(--cyan);
    transform: translate(-50%, -50%);
  }

  @keyframes orbit { to { transform: rotate(360deg); } }
  @keyframes orb-float { 50% { transform: translateY(-12px) scale(1.025); } }

  .orb-orbit {
    position: absolute;
    inset: 3%;
    border: 1px solid rgba(233, 229, 216, 0.1);
    border-radius: 50%;
    animation: orbit 22s linear infinite;
  }

  .orb-orbit i,
  .orb-orbit b {
    position: absolute;
    top: 12%;
    left: 17%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 14px var(--amber);
  }

  .orb-orbit b {
    top: auto;
    right: 12%;
    bottom: 15%;
    left: auto;
    width: 4px;
    height: 4px;
    background: var(--cyan);
  }

  .phase-button {
    position: absolute;
    bottom: 54px;
    left: 50%;
    width: min(260px, 68%);
    overflow: hidden;
    padding: 15px 20px;
    border: 1px solid rgba(53, 207, 255, 0.4);
    background: rgba(4, 12, 17, 0.72);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.28em;
    transform: translateX(-50%);
  }

  .phase-button span {
    position: relative;
    z-index: 2;
  }

  .phase-button i {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 0;
    background: rgba(53, 207, 255, 0.24);
    box-shadow: 0 0 32px rgba(53, 207, 255, 0.5);
  }

  .phase__hint {
    position: absolute;
    right: 28px;
    bottom: 25px;
    color: rgba(233, 229, 216, 0.28);
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: 0.22em;
  }

  .protocol {
    background:
      radial-gradient(circle at 78% 28%, rgba(53, 207, 255, 0.045), transparent 26%),
      radial-gradient(circle at 22% 72%, rgba(243, 164, 59, 0.025), transparent 20%),
      linear-gradient(90deg, transparent 49.9%, rgba(233, 229, 216, 0.045) 50%, transparent 50.1%),
      #070b0f;
    background-size: 130% 130%, 140% 140%, auto, auto;
  }

  .protocol__header {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    align-items: end;
    gap: 8vw;
    max-width: 1400px;
    margin: 0 auto 100px;
  }

  .protocol__header .kinetic-title {
    margin-top: 25px;
  }

  .protocol-list {
    max-width: 1400px;
    margin: auto;
    border-top: 1px solid var(--line);
  }

  .protocol-row {
    position: relative;
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 35px;
    min-height: 168px;
    border-bottom: 1px solid var(--line);
    transition: padding 0.45s var(--ease), background 0.45s;
  }

  .protocol-row::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--cyan);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s var(--ease);
    content: "";
  }

  .protocol-row:hover {
    padding-right: 25px;
    padding-left: 25px;
    background: rgba(53, 207, 255, 0.035);
  }

  .protocol-row:hover::before {
    transform: scaleY(1);
  }

  .protocol-row__no {
    color: var(--cyan);
    font-family: Georgia, serif;
    font-size: 30px;
    font-style: italic;
  }

  .protocol-row h3 {
    margin-bottom: 10px;
    font-family: var(--serif);
    font-size: clamp(31px, 4vw, 60px);
    line-height: 0.9;
    letter-spacing: -0.04em;
  }

  .protocol-row p {
    color: var(--muted);
    font-size: 11px;
  }

  .protocol-row__mark {
    color: rgba(233, 229, 216, 0.1);
    font-family: var(--mono);
    font-size: clamp(10px, 1.2vw, 18px);
    letter-spacing: 0.2em;
    white-space: nowrap;
  }

  .metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    max-width: 1400px;
    margin: 85px auto 0;
    background: var(--line);
  }

  .metric {
    display: grid;
    min-height: 220px;
    padding: 35px;
    background: #080e13;
  }

  .metric strong {
    align-self: end;
    color: var(--amber);
    font-family: var(--serif);
    font-size: clamp(68px, 8vw, 120px);
    line-height: 0.75;
    letter-spacing: -0.08em;
  }

  .metric span {
    align-self: end;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.25em;
  }

  .article-credit {
    display: grid;
    grid-template-columns: 1.45fr 0.8fr auto;
    align-items: center;
    gap: 34px;
    max-width: 1400px;
    margin: 1px auto 0;
    padding: 30px 34px;
    border: 1px solid var(--line);
    background: #080e13;
  }

  .article-credit div {
    display: grid;
    gap: 7px;
  }

  .article-credit span {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: 0.24em;
  }

  .article-credit strong {
    color: var(--paper);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
  }

  .article-credit a {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--cyan);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.2em;
    white-space: nowrap;
  }

  .article-credit i {
    font-size: 14px;
    font-style: normal;
  }

  .research {
    isolation: isolate;
    overflow: hidden;
    background:
      radial-gradient(circle at 82% 16%, rgba(53, 207, 255, 0.055), transparent 28%),
      radial-gradient(circle at 15% 86%, rgba(243, 164, 59, 0.035), transparent 23%),
      #05090d;
  }

  .research::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.18;
    background-image:
      linear-gradient(rgba(53, 207, 255, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(53, 207, 255, 0.055) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(90deg, transparent, black 40%, transparent);
    animation: research-grid-drift 24s linear infinite;
    content: "";
  }

  @keyframes research-grid-drift {
    to { background-position: 72px 72px; }
  }

  .research__intro {
    max-width: 430px;
  }

  .research__intro p {
    margin-bottom: 28px;
    color: #95a2aa;
    font-size: 14px;
    line-height: 1.75;
  }

  .research__intro a {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--cyan);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.2em;
  }

  .research-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    max-width: 1400px;
    margin: auto;
    border: 1px solid var(--line);
    background: var(--line);
  }

  .research-card {
    position: relative;
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    overflow: hidden;
    padding: clamp(25px, 2.7vw, 38px);
    background: #071017;
    color: var(--paper);
    text-decoration: none;
    transition: background 0.4s var(--ease), transform 0.4s var(--ease);
  }

  .research-card--featured {
    grid-column: span 4;
    min-height: 500px;
    background:
      radial-gradient(circle at 82% 28%, rgba(53, 207, 255, 0.1), transparent 32%),
      #061019;
  }

  .research-card::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(108deg, transparent 38%, rgba(53, 207, 255, 0.08) 49%, transparent 61%);
    transform: translateX(-100%);
    transition: transform 0.75s var(--ease);
    content: "";
  }

  .research-card:hover {
    z-index: 2;
    background-color: #0a1720;
  }

  .research-card:hover::before {
    transform: translateX(100%);
  }

  .research-card__meta {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #6e7c84;
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: 0.16em;
  }

  .research-card__meta span { color: var(--cyan); }

  .research-card__number {
    position: absolute;
    right: 27px;
    bottom: 18px;
    color: rgba(233, 229, 216, 0.04);
    font-family: var(--serif);
    font-size: clamp(90px, 10vw, 155px);
    font-weight: 800;
    line-height: 0.7;
  }

  .research-card h3 {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: auto 0 18px;
    font-family: var(--serif);
    font-size: clamp(27px, 2.7vw, 43px);
    line-height: 1;
    letter-spacing: -0.045em;
  }

  .research-card--featured h3 {
    max-width: 760px;
    font-size: clamp(42px, 5.3vw, 78px);
    line-height: 0.9;
  }

  .research-card > p {
    position: relative;
    z-index: 2;
    max-width: 600px;
    color: #7f8d95;
    font-size: 10px;
    line-height: 1.7;
  }

  .research-card > b {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 26px;
    padding-top: 17px;
    border-top: 1px solid var(--line);
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 7px;
    font-weight: 400;
    letter-spacing: 0.2em;
  }

  .research-card > b i { font-size: 14px; font-style: normal; transition: transform 0.3s var(--ease); }
  .research-card:hover > b i { transform: translate(4px, -4px); }

  .research-card__signal {
    position: absolute;
    top: 82px;
    right: 7%;
    display: flex;
    align-items: end;
    gap: 8px;
    width: 31%;
    height: 115px;
    opacity: 0.62;
  }

  .research-card__signal i {
    flex: 1;
    height: var(--signal-h, 45%);
    background: linear-gradient(var(--cyan), rgba(53, 207, 255, 0.02));
    animation: research-signal 2.2s ease-in-out infinite alternate;
  }

  .research-card__signal i:nth-child(2) { --signal-h: 80%; animation-delay: -0.5s; }
  .research-card__signal i:nth-child(3) { --signal-h: 34%; animation-delay: -1s; }
  .research-card__signal i:nth-child(4) { --signal-h: 96%; animation-delay: -1.5s; }
  .research-card__signal i:nth-child(5) { --signal-h: 60%; animation-delay: -2s; }

  .research-card__signal span {
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    animation: signal-trace 3.4s ease-in-out infinite;
  }

  @keyframes research-signal {
    to { transform: scaleY(0.38); transform-origin: bottom; opacity: 0.28; }
  }

  @keyframes signal-trace {
    0%, 100% { transform: translateY(-42px); opacity: 0; }
    50% { transform: translateY(42px); opacity: 0.8; }
  }

  .finale {
    position: relative;
    z-index: 10;
    display: grid;
    place-items: center;
    min-height: 100vh;
    overflow: hidden;
    padding: 120px 28px 40px;
    background:
      radial-gradient(circle at 50% 52%, rgba(243, 164, 59, 0.1), transparent 26%),
      #020507;
    text-align: center;
  }

  .finale::before {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(243, 164, 59, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(243, 164, 59, 0.035) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(circle, black, transparent 67%);
    animation: finale-grid-drift 22s linear infinite;
    content: "";
  }

  @keyframes finale-grid-drift {
    from { background-position: 0 0; }
    to { background-position: 80px 80px; }
  }

  .finale__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(62vw, 820px);
    aspect-ratio: 1;
    border: 1px solid rgba(243, 164, 59, 0.14);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .finale__halo::before,
  .finale__halo::after {
    position: absolute;
    border: 1px solid rgba(53, 207, 255, 0.09);
    border-radius: 50%;
    content: "";
  }

  .finale__halo::before { inset: 13%; }
  .finale__halo::after { inset: 32%; border-style: dashed; animation: orbit 20s linear infinite; }

  .finale .eyebrow,
  .finale h2,
  .finale__cta {
    position: relative;
    z-index: 2;
  }

  .finale__actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .finale__text-link {
    color: var(--muted);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.2em;
  }

  .finale h2 {
    margin: 35px 0 48px;
    font-family: var(--serif);
    font-size: clamp(70px, 12vw, 190px);
    line-height: 0.72;
    letter-spacing: -0.085em;
  }

  .finale__lead {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: -18px auto 34px;
    color: rgba(233, 229, 216, 0.58);
    font-size: 13px;
    line-height: 1.75;
  }

  .finale__cta {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    padding: 15px 19px 15px 24px;
    border: 1px solid rgba(233, 229, 216, 0.23);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.22em;
  }

  .finale__cta i {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--cyan);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    font-style: normal;
  }

  .finale__footer {
    position: absolute;
    right: 4vw;
    bottom: 28px;
    left: 4vw;
    display: flex;
    justify-content: space-between;
    color: rgba(233, 229, 216, 0.28);
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: 0.19em;
  }
}

@layer responsive {
  @media (max-width: 1000px) {
    .side-index {
      display: none;
    }

    .site-header {
      grid-template-columns: 1fr auto;
    }

    .header-meta,
    .header-cta {
      display: none;
    }

    .site-nav {
      justify-self: end;
    }

    .section-heading,
    .protocol__header,
    .solutions__header,
    .research__header {
      grid-template-columns: 1fr;
    }

    .solutions-grid {
      grid-template-columns: 1fr;
    }

    .solution-card {
      min-height: 720px;
    }

    .research-card,
    .research-card--featured,
    .research-card:nth-child(4),
    .research-card:nth-child(5) {
      grid-column: span 3;
    }

    .signal-grid {
      grid-template-columns: 1fr 1fr;
    }

    .signal-card--wide {
      grid-column: span 2;
    }

    .phase {
      grid-template-columns: 1fr;
    }

    .phase__copy {
      max-width: 760px;
    }

    .phase__lab {
      min-height: 700px;
    }

    .orb-wrap {
      width: min(55vw, 420px);
    }
  }

  @media (max-width: 720px) {
    body {
      cursor: auto;
    }

    a,
    button {
      cursor: pointer;
    }

    .cursor {
      display: none;
    }

    .site-header {
      padding: 17px 20px;
    }

    .menu-toggle {
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--paper);
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: 0.2em;
    }

    .menu-toggle i,
    .menu-toggle i::after {
      display: block;
      width: 24px;
      height: 1px;
      background: var(--paper);
      transition: transform 0.3s;
      content: "";
    }

    .menu-toggle i::after {
      transform: translateY(6px);
    }

    .menu-open .menu-toggle i {
      transform: rotate(45deg);
    }

    .menu-open .menu-toggle i::after {
      transform: rotate(-90deg);
    }

    .site-nav {
      position: fixed;
      top: 0;
      right: 0;
      bottom: auto;
      left: auto;
      z-index: 2;
      display: grid;
      place-content: center;
      gap: 6vh;
      width: 100vw;
      height: 100vh;
      background:
        radial-gradient(circle at 70% 28%, rgba(53, 207, 255, 0.08), transparent 34%),
        #03070a;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.4s, visibility 0.4s;
    }

    .menu-open .site-nav {
      visibility: visible;
      opacity: 1;
    }

    .site-nav a {
      font-family: var(--serif);
      font-size: clamp(34px, 11vw, 58px);
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .site-nav a::before {
      left: -28px;
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: 0.15em;
    }

    .section {
      padding-right: 20px;
      padding-left: 20px;
    }

    .hero {
      height: 160vh;
      min-height: 900px;
    }

    .hero__sticky {
      min-height: 560px;
    }

    .hero__image {
      inset: -2% -34%;
      background-position: 64% 50%;
      filter: saturate(0.75) contrast(1.08) brightness(0.7);
    }

    .hero__wash {
      background:
        linear-gradient(0deg, rgba(5, 9, 13, 0.96) 0%, rgba(5, 9, 13, 0.2) 58%, rgba(5, 9, 13, 0.62) 100%),
        linear-gradient(90deg, rgba(5, 9, 13, 0.62), transparent);
    }

    .hero__motion i {
      filter: blur(38px);
      opacity: 0.38;
    }

    .hero__motion i:nth-child(1) {
      width: 58vw;
      height: 58vw;
      right: -12%;
    }

    .hero__motion i:nth-child(2) {
      width: 44vw;
      height: 44vw;
    }

    .hero__motion b {
      opacity: 0.16;
    }

    .hero__topline {
      top: 16%;
      left: 20px;
      width: calc(100% - 40px);
    }

    .hero__copy {
      top: auto;
      bottom: 20%;
      left: 20px;
      transform: translateY(calc(var(--hero-progress) * -14px));
    }

    .hero__title {
      font-size: clamp(62px, 20vw, 98px);
      letter-spacing: -0.075em;
    }

    .hero__title span:first-child {
      font-size: 0.76em;
    }

    .hero__quote,
    .hero__coordinates,
    .hero__progress {
      display: none;
    }

    .scroll-cue {
      bottom: 7%;
      left: 20px;
      grid-template-columns: auto 38px;
    }

    .scroll-cue b {
      display: none;
    }

    .kinetic-title {
      font-size: clamp(54px, 17vw, 90px);
    }

    .section-heading {
      margin-bottom: 60px;
    }

    .signal-grid {
      grid-template-columns: 1fr;
    }

    .signal-card--wide {
      grid-column: auto;
    }

    .signal-card {
      min-height: 440px;
    }

    .radar {
      width: 185px;
    }

    .velocity__copy {
      top: 42%;
      left: 20px;
      width: calc(100% - 40px);
    }

    .velocity__copy h2 {
      font-size: clamp(68px, 23vw, 118px);
    }

    .velocity__ghost {
      top: 26%;
      width: 95vw;
      opacity: calc(0.08 + var(--velocity-progress) * 0.2);
    }

    .speed-readout {
      right: 20px;
      bottom: 11%;
    }

    .speed-readout strong {
      font-size: 68px;
    }

    .velocity__route {
      right: 20px;
      left: 20px;
      bottom: 6%;
    }

    .phase__lab {
      min-height: 580px;
    }

    .orb-wrap {
      width: min(76vw, 380px);
    }

    .protocol__header {
      margin-bottom: 55px;
    }

    .solutions__header,
    .research__header {
      margin-bottom: 55px;
    }

    .solution-card {
      min-height: 675px;
      padding: 22px;
    }

    .solution-card__top {
      right: 22px;
      left: 22px;
    }

    .solution-card__top b {
      font-size: 0;
    }

    .solution-visual {
      top: 66px;
      right: 22px;
      left: 22px;
      height: 300px;
    }

    .solution-orbit {
      width: 160px;
      height: 160px;
    }

    .solution-card__copy h3 {
      font-size: clamp(48px, 16vw, 72px);
    }

    .research-grid {
      grid-template-columns: 1fr;
    }

    .research-card,
    .research-card--featured,
    .research-card:nth-child(4),
    .research-card:nth-child(5) {
      grid-column: auto;
      min-height: 380px;
    }

    .research-card--featured {
      min-height: 500px;
    }

    .research-card__signal {
      top: 76px;
      width: 42%;
      opacity: 0.42;
    }

    .protocol-row {
      grid-template-columns: 38px 1fr;
      gap: 16px;
      min-height: 140px;
    }

    .protocol-row__mark {
      display: none;
    }

    .metrics {
      grid-template-columns: 1fr;
    }

    .article-credit {
      grid-template-columns: 1fr;
      gap: 22px;
      padding: 26px 22px;
    }

    .article-credit a {
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    .metric {
      min-height: 170px;
    }

    .finale h2 {
      font-size: clamp(62px, 21vw, 116px);
    }

    .finale__halo {
      width: 120vw;
    }

    .finale__actions {
      flex-direction: column;
      gap: 22px;
    }

    .finale__lead {
      margin-top: -20px;
      padding: 0 8px;
      font-size: 12px;
    }

    .finale__footer {
      justify-content: center;
    }

    .finale__footer span:not(:first-child) {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }

    .hero__image,
    .hero__title .outline,
    .velocity__grid,
    .velocity__lines i,
    .velocity__ghost {
      transform: none;
    }

    .reveal {
      opacity: 1;
      transform: none;
    }
  }
}