/* ============================================================ tokens ===== */
:root {
  --ink: #06070d;
  --ink-2: #0a0c16;
  --paper: #eef0fa;
  --muted: #9aa2c0;
  --dim: #6b7392;
  --violet: #7c5cff;
  --violet-soft: #a894ff;
  --teal: #4fd1c5;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.035);

  --display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --pad: clamp(20px, 5vw, 88px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--ink);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--paper);
  background: var(--ink);
  overflow-x: hidden;
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(124, 92, 255, 0.35); }

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

/* film grain + vignette over everything, very light */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9;
  pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* pointer-following glow */
.aura {
  position: fixed; z-index: 1; pointer-events: none;
  width: 620px; height: 620px; margin: -310px 0 0 -310px;
  border-radius: 50%; opacity: 0.5;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.16), transparent 62%);
  transition: opacity 0.6s var(--ease);
  will-change: transform;
}

/* ============================================================ preloader == */
#boot {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink);
  display: grid; place-items: center;
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
#boot.done { opacity: 0; visibility: hidden; }
#boot svg { width: 92px; height: 92px; }
#boot .ring, #boot .tri { fill: none; stroke: var(--violet-soft); stroke-width: 1.2; }
#boot .ring { stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 1.5s var(--ease) forwards; }
#boot .tri { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 1.5s var(--ease) 0.18s forwards; }
#boot .core { fill: #fff; opacity: 0; animation: pop 0.7s var(--ease) 1.1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; } }

/* ============================================================ chrome ===== */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 60;
  width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--violet), var(--teal));
}

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 18px var(--pad);
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s;
  border-bottom: 1px solid transparent;
}
nav.solid {
  background: rgba(6, 7, 13, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
nav img { width: 30px; height: 30px; border-radius: 8px; }
nav .word { font-weight: 620; letter-spacing: -0.01em; font-size: 17px; }
nav .links { margin-left: auto; display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--muted); }
nav .links a { transition: color 0.25s; }
nav .links a:hover { color: var(--paper); }
@media (max-width: 820px) { nav .links a:not(.btn) { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 100px;
  font-size: 14.5px; font-weight: 560; letter-spacing: -0.01em;
  background: var(--paper); color: #0b0d16;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.3s;
  will-change: transform;
}
.btn:hover { box-shadow: 0 12px 40px rgba(124, 92, 255, 0.4); }
.btn.ghost { background: transparent; color: var(--paper); border-color: var(--line-strong); }
.btn.ghost:hover { border-color: var(--violet); background: rgba(124, 92, 255, 0.1); box-shadow: none; }

/* ============================================================ typography = */
.eyebrow {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dim); display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--violet); }

h2.display {
  font-family: var(--display);
  font-size: clamp(38px, 6.2vw, 92px);
  line-height: 1.02; letter-spacing: -0.02em; font-weight: 400;
}
h3 { font-size: clamp(20px, 2.2vw, 27px); font-weight: 600; letter-spacing: -0.02em; }
p.lead { font-size: clamp(16px, 1.35vw, 20px); color: var(--muted); max-width: 62ch; }
.mono { font-family: var(--mono); }
em.hl { font-style: italic; color: var(--violet-soft); }

/* scroll reveal primitives */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay='1'] { transition-delay: 0.1s; }
[data-reveal][data-delay='2'] { transition-delay: 0.2s; }
[data-reveal][data-delay='3'] { transition-delay: 0.3s; }
[data-reveal][data-delay='4'] { transition-delay: 0.4s; }

.word-rise { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word-rise > span {
  display: inline-block; transform: translateY(105%);
  transition: transform 1.05s var(--ease);
}
.in .word-rise > span, .word-rise.in > span { transform: none; }

/* ============================================================ hero ======= */
.hero { position: relative; height: 420vh; }
.hero-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
}
.hero-stage video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.9;
}
.hero-stage .veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 55%, transparent 8%, rgba(6, 7, 13, 0.72) 68%),
    linear-gradient(180deg, rgba(6, 7, 13, 0.85), transparent 26%, transparent 62%, var(--ink));
}
.hero-copy { position: relative; z-index: 2; text-align: center; padding: 0 var(--pad); }
.hero-copy h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(64px, 15.5vw, 250px);
  line-height: 0.9; letter-spacing: -0.035em;
}
.hero-copy h1 .ch { display: inline-block; will-change: transform, opacity; }
.hero-copy .sub {
  margin: 22px auto 0; max-width: 620px;
  font-size: clamp(16px, 1.5vw, 21px); color: #c3c9e6;
}
.hero-copy .cta { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Stage captions that swap while the video scrubs. The wrapper is a zero-height
   rule near the bottom of the stage; every caption hangs upward off it, so they
   share one baseline and cross-fade in place instead of stacking. */
.hero-notes { position: absolute; inset: auto 0 15vh; height: 0; z-index: 2; text-align: center; }
.hero-note {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--pad);
  font-family: var(--display); font-size: clamp(26px, 4.4vw, 62px); line-height: 1.05;
  text-shadow: 0 2px 40px rgba(6, 7, 13, 0.9);
  opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.hero-note.on { opacity: 1; transform: none; }
.hero-note small { display: block; font-family: var(--sans); font-size: 15px; color: var(--muted); margin-top: 12px; letter-spacing: 0.02em; }

.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 3; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: opacity 0.5s;
}
.scroll-hint i { width: 1px; height: 42px; background: linear-gradient(var(--violet), transparent); animation: drop 2s infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============================================================ sections === */
section.band { padding: clamp(90px, 13vh, 170px) var(--pad); position: relative; z-index: 2; overflow: hidden; }
/* width:100% is load-bearing. As a grid item (the pinned statement) the auto
   margins suppress stretching, so .wrap falls back to fit-content — and its
   min-content is whatever the marquee's unwrappable strip demands, which pushed
   the paragraph off the right edge on a phone. A definite width sidesteps that. */
.wrap { width: 100%; max-width: 1240px; min-width: 0; margin: 0 auto; position: relative; z-index: 1; }

/* Decorative loops behind a few sections. They carry no information, so they
   stay unloaded until the section is close and fade out to nothing at the
   edges — a hard video rectangle would read as a pasted-in box. */
.ambient {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.6s var(--ease);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 18%, rgba(0, 0, 0, 0.55) 48%, transparent 76%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 18%, rgba(0, 0, 0, 0.55) 48%, transparent 76%);
}
.ambient.on { opacity: 0.55; }

/* Live shader behind the throughput numbers — the one section where motion
   carries meaning rather than mood. Masked like the ambient loops so it never
   competes with the figures sitting on top of it. */
.speed-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.8s var(--ease);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 12%, rgba(0, 0, 0, 0.5) 45%, transparent 74%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 12%, rgba(0, 0, 0, 0.5) 45%, transparent 74%);
}
.speed-glow.on { opacity: 0.42; }

/* Statement. Pinned for the length of its own scroll so the whole paragraph is
   on screen while the lines light up one at a time — reading it in pieces as it
   passed by defeated the effect. */
.statement { position: relative; height: 230vh; z-index: 2; }
.statement-rail {
  position: sticky; top: 0; min-height: 100vh; overflow: hidden;
  display: grid; align-content: center; padding: 0 var(--pad);
  /* minmax(0,1fr), not auto: the marquee's max-content strip would otherwise set
     the track width and push the paragraph off the right edge on narrow screens. */
  grid-template-columns: minmax(0, 1fr);
}
.statement p {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(28px, 4.3vw, 66px); line-height: 1.12; letter-spacing: -0.02em;
}
.statement .fade { color: #3b4266; transition: color 0.5s var(--ease); }
.statement .fade.lit { color: var(--paper); }

/* marquee of real topic names */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; margin-top: 70px;
  contain: inline-size; /* the strip inside must not report its width upwards */
}
.marquee div { display: flex; gap: 46px; width: max-content; animation: slide 38s linear infinite; }
.marquee span { font-family: var(--mono); font-size: 14px; color: var(--dim); white-space: nowrap; }
.marquee span b { color: var(--violet-soft); font-weight: 400; }
@keyframes slide { to { transform: translateX(-50%); } }

/* product tour: sticky frame, screenshots swap on scroll */
.tour { position: relative; }
.tour-rail { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; gap: clamp(24px, 4vw, 70px); padding: 0 var(--pad); }
.tour-copy { position: relative; height: 260px; }
.tour-step {
  position: absolute; inset: 0; opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); pointer-events: none;
}
.tour-step.on { opacity: 1; transform: none; }
.tour-step .n { font-family: var(--mono); font-size: 12px; color: var(--violet); letter-spacing: 0.2em; }
.tour-step h3 { margin: 14px 0 12px; font-size: clamp(24px, 2.6vw, 36px); }
.tour-step p { color: var(--muted); max-width: 44ch; font-size: 16.5px; }
.tour-step ul { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tour-step li { font-size: 12.5px; font-family: var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; }

.frame {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(124, 92, 255, 0.1);
  background: #0b0d16;
  aspect-ratio: 1440 / 900;
}
.frame .bar { position: absolute; top: 0; left: 0; right: 0; height: 30px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 7px; padding: 0 13px; z-index: 3; }
.frame .bar i { width: 9px; height: 9px; border-radius: 50%; background: #2c3147; }
.frame img {
  position: absolute; inset: 30px 0 0; width: 100%; height: calc(100% - 30px); object-fit: cover; object-position: top left;
  opacity: 0; transform: scale(1.04); transition: opacity 0.75s var(--ease), transform 1.4s var(--ease);
}
.frame img.on { opacity: 1; transform: none; }
.frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(124,92,255,.1), transparent 40%);
}
@media (max-width: 900px) {
  .tour-rail { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 24px; }
  /* The steps are absolutely positioned, so this box has to clear the tallest
     one — at phone widths the copy runs to about 300px. */
  .tour-copy { height: 320px; }
}

/* metrics */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.metric { background: var(--ink-2); padding: 32px 28px; }
.metric .v { font-family: var(--display); font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: -0.02em; }
.metric .v span { font-size: 0.42em; color: var(--violet-soft); margin-left: 6px; font-family: var(--sans); }
.metric .k { margin-top: 10px; font-size: 13.5px; color: var(--dim); }

/* split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 90px rgba(0,0,0,.6); }
.shot img { width: 100%; display: block; }

@media (max-width: 760px) {
  /* A 1440px application window squeezed into a phone is an unreadable smear.
     Hold the screenshots at a legible width and let them be panned instead;
     the clipped edge is the affordance. */
  .shot { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  /* An explicit width, not a min-width: with width:auto the image would fall
     back to its natural 2880px and take seven screens to pan across. At 1200
     the interface sits near its desktop scale, so the labels are legible. */
  .shot img { width: 1200px; max-width: none; }
  /* Trim the dead space between sections — at this width it reads as a gap,
     not as breathing room. */
  section.band { padding: 68px var(--pad); }
}

/* mcp diagram */
/* Three nodes and the two connectors between them — five tracks, not three,
   or the last pair wraps onto its own row with a wire pointing at nothing. */
.wire-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; margin-top: 46px; }
.node { border: 1px solid var(--line); background: var(--glass); border-radius: 16px; padding: 22px; text-align: center; }
.node .t { font-weight: 600; font-size: 17px; }
.node .s { font-size: 13px; color: var(--dim); margin-top: 5px; }
.node.ai { border-color: rgba(79, 209, 197, 0.28); }
.flow { position: relative; height: 2px; min-width: 90px; background: repeating-linear-gradient(90deg, var(--violet) 0 8px, transparent 8px 16px); opacity: .8; }
.flow::after { content: ''; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 14px var(--violet); animation: run 2.6s linear infinite; }
@keyframes run { from { left: 0; } to { left: 100%; } }

@media (max-width: 860px) {
  .wire-row { grid-template-columns: 1fr; }
  .flow {
    width: 2px; height: 40px; min-width: 0; justify-self: center;
    background: repeating-linear-gradient(180deg, var(--violet) 0 8px, transparent 8px 16px);
  }
  .flow::after { display: none; }
}

.prompts { margin-top: 34px; display: grid; gap: 12px; }
.prompt { border-left: 2px solid var(--violet); padding: 10px 0 10px 18px; color: #cdd3ee; font-size: 16.5px; font-style: italic; }

/* feature grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; margin-top: 50px; }
.card {
  position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px 28px;
  background: var(--glass); overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.card:hover { border-color: rgba(124,92,255,.45); transform: translateY(-3px); }
.card::before {
  content: ''; position: absolute; inset: -40%; opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(124,92,255,.16), transparent 45%);
  transition: opacity 0.4s;
}
.card:hover::before { opacity: 1; }
.card h4 { font-size: 17.5px; font-weight: 600; margin-bottom: 8px; position: relative; }
.card p { font-size: 14.5px; color: var(--muted); position: relative; }
.card svg { width: 22px; height: 22px; color: var(--violet-soft); margin-bottom: 14px; position: relative; }

/* download */
.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 46px; }
.dl a {
  border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; background: var(--glass);
  display: block; transition: border-color .35s var(--ease), transform .35s var(--ease), background .35s;
}
.dl a:hover { border-color: var(--violet); transform: translateY(-4px); background: rgba(124,92,255,.08); }
.dl .os { font-size: 19px; font-weight: 620; display: flex; align-items: center; gap: 10px; }
.dl .files { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.dl .files b { color: var(--violet-soft); font-weight: 400; }

.note {
  margin-top: 34px; border: 1px solid var(--line); border-left: 2px solid var(--violet);
  border-radius: 12px; padding: 20px 24px; background: rgba(124,92,255,.05);
  font-size: 14.5px; color: var(--muted); max-width: 860px;
}
.note b { color: var(--paper); font-weight: 600; }
.note ol { margin: 10px 0 0 18px; display: grid; gap: 4px; }

footer {
  border-top: 1px solid var(--line); padding: 46px var(--pad); position: relative; z-index: 2;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: var(--dim); font-size: 14px;
}
footer .sp { margin-left: auto; display: flex; gap: 22px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .word-rise > span { transform: none; }
}