:root {
  --void: #070c0f;
  --paper: #0b1114;
  --paper-warm: #0f1619;
  --panel: #121b1f;
  --ink: #eef2f2;
  --ink-soft: #a8b6bb;
  --ink-faint: #6d7f86;
  --rule: #212c31;
  --sea: #7fc9d3;
  --sea-deep: #10454f;
  --display: 'General Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --page: 1400px;
  --gutter: clamp(20px, 4vw, 50px);
  --section-gap: clamp(76px, 10vw, 148px);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--display); font-feature-settings: "ss01" on, "ss02" on; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; }
::selection { color: var(--void); background: var(--sea); }
:focus-visible { outline: 1px solid var(--sea); outline-offset: 4px; }

.skip { position: fixed; top: 8px; left: -999px; z-index: 100; padding: 10px 16px; border: 1px solid var(--sea); border-radius: var(--radius-sm); background: var(--paper); }
.skip:focus { left: 12px; }
.shell { width: min(100%, var(--page)); margin-inline: auto; padding-inline: var(--gutter); }
.lit { color: var(--sea); }
.label { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-faint); font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.label::before { content: ""; width: 5px; height: 5px; flex: none; background: var(--sea); }
.button { display: inline-flex; justify-content: center; align-items: center; width: fit-content; min-height: 44px; padding: 11px 18px; border: 1px solid var(--sea); border-radius: var(--radius-sm); color: var(--sea); background: transparent; font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: color .4s var(--ease), background .4s var(--ease); }
.button:hover { color: var(--void); background: var(--sea); }

.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; height: 74px; padding-inline: var(--gutter); border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--void) 88%, transparent); backdrop-filter: blur(14px); }
.brand img, .footer-brand img { width: 210px; height: auto; filter: invert(1); }
.nav nav { display: flex; gap: 30px; }
.nav nav a, footer p, footer > a:last-child { color: var(--ink-faint); font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; transition: color .4s var(--ease); }
.nav nav a:hover, footer > a:last-child:hover { color: var(--sea); }
.nav-button { justify-self: end; min-height: 38px; }

.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 120px var(--gutter) 80px; background: var(--void); }
#field { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: .58; }
.hero-grid { position: absolute; inset: 74px var(--gutter) 0; z-index: -1; border-inline: 1px solid var(--rule); pointer-events: none; }
.hero-grid::before, .hero-grid::after { content: ""; position: absolute; inset: 0 auto 0 33.333%; width: 1px; background: var(--rule); }
.hero-grid::after { left: 66.666%; }
.hero-content { width: min(100%, var(--page)); margin-inline: auto; }
.hero h1 { max-width: 14ch; margin-top: 30px; font-size: clamp(44px, 7.4vw, 96px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.hero-foot { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: clamp(30px, 8vw, 130px); align-items: end; max-width: 980px; margin-top: clamp(48px, 7vw, 90px); padding-top: 24px; border-top: 1px solid var(--rule); }
.hero-foot > p { max-width: 38ch; color: var(--ink-soft); line-height: 1.7; }
.hero-foot dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hero-foot dt, .facts dt, .registry dt { margin-bottom: 8px; color: var(--ink-faint); font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.hero-foot dd, .facts dd, .registry dd { color: var(--ink-soft); font-size: 14px; }
.scroll-cue { position: absolute; right: var(--gutter); bottom: 28px; display: flex; align-items: center; gap: 16px; color: var(--ink-faint); font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.scroll-cue span:last-child { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--rule); border-radius: var(--radius-sm); transition: color .4s var(--ease), border-color .4s var(--ease); }
.scroll-cue:hover span:last-child { color: var(--sea); border-color: var(--sea); }

.section { padding-block: var(--section-gap); }
.scaffold { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 34px; border-block: 1px solid var(--rule); color: var(--ink-faint); font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.scaffold span:nth-child(2) { justify-self: start; }
.scaffold span:nth-child(3) { justify-self: center; }
.scaffold span:nth-child(4) { justify-self: end; }
.section-head { display: flex; gap: 30px; align-items: flex-start; margin: clamp(62px, 8vw, 110px) 0 64px; }
.section-head .label { margin-bottom: 24px; }
.section-head h2, .dossier-copy h2, .company h2 { max-width: 17ch; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -.01em; }
.sparkle { flex: none; width: 44px; height: 44px; margin-top: 5px; color: var(--sea); }

.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { position: relative; min-height: 330px; padding: 30px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-warm); overflow: clip; transform-style: preserve-3d; transition: border-color .4s var(--ease), background .4s var(--ease), transform .45s var(--ease); }
.card::before, .card::after { content: ""; position: absolute; width: 4px; height: 4px; background: var(--sea); opacity: 0; transition: opacity .4s var(--ease); }
.card::before { top: -2px; left: -2px; }.card::after { right: -2px; bottom: -2px; }
.card:hover { border-color: color-mix(in srgb, var(--sea) 45%, var(--rule)); background: var(--panel); }
.card:hover::before, .card:hover::after { opacity: 1; }
.card .label { color: var(--ink-soft); }
.card h3 { margin-top: 78px; font-size: 24px; letter-spacing: -.01em; transition: transform .45s var(--ease); }
.card > p:not(.label) { max-width: 35ch; margin-top: 14px; color: var(--ink-soft); line-height: 1.7; }
.card-index { position: absolute; right: 18px; bottom: -28px; color: var(--rule); font: 400 112px/1 var(--display); letter-spacing: -.06em; transition: color .45s var(--ease), transform .45s var(--ease); }

.dossier { border-block: 1px solid var(--rule); background: var(--paper-warm); }
.dossier-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, .9fr); gap: clamp(44px, 8vw, 118px); align-items: center; }
.frame { position: relative; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--void); }
.frame canvas { display: block; width: 100%; height: 100%; border-radius: 23px; overflow: hidden; }
.frame-dot { position: absolute; z-index: 3; width: 5px; height: 5px; background: var(--sea); }
.frame-dot.tl { top: -3px; left: -3px; }.frame-dot.tr { top: -3px; right: -3px; }.frame-dot.bl { bottom: -3px; left: -3px; }.frame-dot.br { right: -3px; bottom: -3px; }
.frame-readout { position: absolute; inset: 24px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; pointer-events: none; color: var(--ink-faint); font: 400 9px/1 var(--mono); letter-spacing: .16em; transition: transform .55s var(--ease); }
.frame-readout strong { grid-column: 2; grid-row: 1 / span 2; color: color-mix(in srgb, var(--sea) 24%, transparent); font: 400 clamp(76px, 10vw, 150px)/.8 var(--display); letter-spacing: -.06em; }
.frame-readout span:last-child { align-self: end; }
.dossier-copy .label { margin-bottom: 26px; color: var(--ink-soft); }
.lead { max-width: 49ch; margin-top: 30px; color: var(--ink-soft); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.65; }
.facts { margin: 34px 0; border-top: 1px solid var(--rule); }
.facts dt { color: var(--ink-soft); }
.facts div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding-block: 17px; border-bottom: 1px solid var(--rule); }
.status-dot { display: inline-block; width: 5px; height: 5px; margin: 0 10px 2px 0; background: var(--sea); }

.sequence { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sequence li { display: grid; grid-template-columns: 80px minmax(190px, .65fr) 1fr; gap: 28px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--rule); }
.sequence li > span { color: var(--sea); font: 400 10px/1 var(--mono); letter-spacing: .16em; }
.sequence h3 { font-size: 22px; line-height: 1.2; }
.sequence p { max-width: 54ch; color: var(--ink-soft); line-height: 1.7; }

.company { border-top: 1px solid var(--rule); background: var(--void); }
.company-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 9vw, 140px); align-items: start; }
.company .label { margin-bottom: 26px; }
.registry { border-top: 1px solid var(--rule); }
.registry div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding-block: 19px; border-bottom: 1px solid var(--rule); }
.registry a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.registry a:hover { color: var(--sea); border-color: var(--sea); }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 124px; padding: 30px var(--gutter); border-top: 1px solid var(--rule); background: var(--void); }
footer p { text-align: center; } footer > a:last-child { justify-self: end; }

html.js .word { display: inline-block; opacity: 0; filter: blur(24px); transform: translateY(.18em) scale(1.16); transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease); }
html.js .hero.is-in .word { opacity: 1; filter: blur(0); transform: none; }
html.js .word-delay-0 { transition-delay: 110ms; } html.js .word-delay-1 { transition-delay: 162ms; }
html.js .word-delay-2 { transition-delay: 214ms; } html.js .word-delay-3 { transition-delay: 266ms; }
html.js .word-delay-4 { transition-delay: 318ms; } html.js .word-delay-5 { transition-delay: 370ms; }
html.js .word-delay-6 { transition-delay: 422ms; } html.js .word-delay-7 { transition-delay: 474ms; }
html.js .word-delay-8 { transition-delay: 526ms; } html.js .word-delay-9 { transition-delay: 578ms; }
html.js [data-rise] { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js [data-fall] { opacity: 0; transform: translateY(-10px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js [data-rise].is-in, html.js [data-fall].is-in { opacity: 1; transform: none; }
.capability-grid [data-rise]:nth-child(2) { transition-delay: 90ms; }
.capability-grid [data-rise]:nth-child(3) { transition-delay: 180ms; }

/* Rich motion stays finite: entrance states resolve once, pointer states only
   move while the user is actively exploring an instrument. */
html.js.motion-ready .nav { opacity: 0; transform: translateY(-100%); transition: opacity .75s var(--ease), transform .75s var(--ease); }
html.js.motion-ready .nav.is-in { opacity: 1; transform: none; }

html.js.motion-ready .hero-label,
html.js.motion-ready .hero-foot,
html.js.motion-ready .scroll-cue { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.js.motion-ready .hero.is-in .hero-label { opacity: 1; transform: none; transition-delay: 80ms; }
html.js.motion-ready .hero.is-in .hero-foot { opacity: 1; transform: none; transition-delay: 720ms; }
html.js.motion-ready .hero.is-in .scroll-cue { opacity: 1; transform: none; transition-delay: 940ms; }

html.js.motion-ready .scaffold { border-color: transparent; }
html.js.motion-ready .scaffold::before,
html.js.motion-ready .scaffold::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
html.js.motion-ready .scaffold::before { top: 0; }
html.js.motion-ready .scaffold::after { bottom: 0; transition-delay: 120ms; }
html.js.motion-ready .scaffold.is-in::before,
html.js.motion-ready .scaffold.is-in::after { transform: scaleX(1); }
html.js.motion-ready .scaffold span { opacity: 0; transform: translateX(-8px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
html.js.motion-ready .scaffold.is-in span { opacity: 1; transform: none; }
html.js.motion-ready .scaffold.is-in span:nth-child(2) { transition-delay: 100ms; }
html.js.motion-ready .scaffold.is-in span:nth-child(3) { transition-delay: 200ms; }
html.js.motion-ready .scaffold.is-in span:nth-child(4) { transition-delay: 300ms; }

html.js.motion-ready .sparkle path { stroke-dasharray: 152; stroke-dashoffset: 152; transition: stroke-dashoffset 1.15s var(--ease); }
html.js.motion-ready .section-head.is-in .sparkle path { stroke-dashoffset: 0; }

html.js.motion-ready .motion-word { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.35em); transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease); }
html.js.motion-ready .is-in .motion-word { opacity: 1; filter: blur(0); transform: none; }
html.js.motion-ready .is-in .motion-word:nth-child(2) { transition-delay: 55ms; }
html.js.motion-ready .is-in .motion-word:nth-child(3) { transition-delay: 110ms; }
html.js.motion-ready .is-in .motion-word:nth-child(4) { transition-delay: 165ms; }
html.js.motion-ready .is-in .motion-word:nth-child(5) { transition-delay: 220ms; }
html.js.motion-ready .is-in .motion-word:nth-child(6) { transition-delay: 275ms; }

html.js.motion-ready .sequence li,
html.js.motion-ready .registry.is-in div { opacity: 0; transform: translateX(-14px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
html.js.motion-ready .sequence.is-in li,
html.js.motion-ready .registry.is-in div { opacity: 1; transform: none; }
html.js.motion-ready .sequence.is-in li:nth-child(2), html.js.motion-ready .registry.is-in div:nth-child(2) { transition-delay: 90ms; }
html.js.motion-ready .sequence.is-in li:nth-child(3), html.js.motion-ready .registry.is-in div:nth-child(3) { transition-delay: 180ms; }
html.js.motion-ready .sequence.is-in li:nth-child(4), html.js.motion-ready .registry.is-in div:nth-child(4) { transition-delay: 270ms; }

html.js.motion-ready .card.is-in.tilt-nw { transform: perspective(800px) rotateX(-2deg) rotateY(2.5deg) translateY(-3px); }
html.js.motion-ready .card.is-in.tilt-ne { transform: perspective(800px) rotateX(-2deg) rotateY(-2.5deg) translateY(-3px); }
html.js.motion-ready .card.is-in.tilt-sw { transform: perspective(800px) rotateX(2deg) rotateY(2.5deg) translateY(-3px); }
html.js.motion-ready .card.is-in.tilt-se { transform: perspective(800px) rotateX(2deg) rotateY(-2.5deg) translateY(-3px); }
.card[class*="tilt-"] h3 { transform: translateZ(14px); }
.card[class*="tilt-"] .card-index { color: color-mix(in srgb, var(--sea) 28%, var(--rule)); transform: translate3d(-6px, -5px, 20px); }

.frame-readout.look-nw { transform: translate(-7px, -7px); }
.frame-readout.look-ne { transform: translate(7px, -7px); }
.frame-readout.look-sw { transform: translate(-7px, 7px); }
.frame-readout.look-se { transform: translate(7px, 7px); }

@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }.nav nav { display: none; }
  .hero-foot, .dossier-grid, .company-grid { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }.card { min-height: 260px; }.card h3 { margin-top: 52px; }
  .dossier-grid { gap: 60px; }.frame { width: min(100%, 620px); }
  footer { grid-template-columns: 1fr auto; } footer p { display: none; }
}

@media (max-width: 620px) {
  .nav { height: 64px; }.brand img { width: 172px; }.nav-button { padding-inline: 12px; font-size: 9px; }
  .hero { padding-top: 104px; }.hero-grid { top: 64px; }.hero h1 { font-size: clamp(42px, 13vw, 64px); }
  .hero-foot dl { grid-template-columns: 1fr; }.scroll-cue > span:first-child { display: none; }
  .scaffold { grid-template-columns: repeat(2, 1fr); gap: 22px; }.scaffold span:nth-child(3) { justify-self: start; }
  .section-head { flex-direction: column; }.sparkle { width: 36px; height: 36px; }
  .sequence li { grid-template-columns: 42px 1fr; }.sequence p { grid-column: 2; }
  .facts div, .registry div { grid-template-columns: 1fr; gap: 8px; }
  footer { grid-template-columns: 1fr; }.footer-brand img { width: 180px; } footer > a:last-child { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .word, html.js [data-rise], html.js [data-fall],
  html.js.motion-ready .nav, html.js.motion-ready .hero-label,
  html.js.motion-ready .hero-foot, html.js.motion-ready .scroll-cue,
  html.js.motion-ready .motion-word, html.js.motion-ready .sequence li,
  html.js.motion-ready .registry.is-in div, html.js.motion-ready .scaffold span { opacity: 1; filter: none; transform: none; transition: none; }
  html.js.motion-ready .scaffold { border-color: var(--rule); }
  html.js.motion-ready .scaffold::before, html.js.motion-ready .scaffold::after { display: none; }
  html.js.motion-ready .sparkle path { stroke-dashoffset: 0; transition: none; }
  html.js.motion-ready .card.is-in.tilt-nw, html.js.motion-ready .card.is-in.tilt-ne,
  html.js.motion-ready .card.is-in.tilt-sw, html.js.motion-ready .card.is-in.tilt-se,
  .frame-readout.look-nw, .frame-readout.look-ne, .frame-readout.look-sw, .frame-readout.look-se { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}