@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ============================================================
   A 14-second title sequence: an agent, its tools, the reach too far,
   and InFocus, the focal catcher, locking on.
   Timeline (body classes, added by the script at the bottom):
     t-beam     0.0s  a projector line opens the dark
     t-agents   1.0s  a tilted board fades up: the AI Agent hub, five
                      tools it may use (glowing traces, data pulses), three
                      it may not (dim, locked), three glass readouts
     t-drift    3.6s  it reaches: new traces creep to finance, mail and
                      external upload, amber then coral; the hub runs hot;
                      drift climbs; the camera pushes in
     t-catch    6.8s  DRIFT DETECTED: the reach flickers, the hub shakes
     t-contain  7.9s  the reach retracts; DENIED / HELD; locks go mint
     t-core     9.4s  the board tips away; the core surfaces
     t-title   10.6s  "Trust is earned." resolves, letter by letter
     t-rest    12.6s  the line, the invitation, the frame
     t-done    13.6s  letterbox opens; the scene keeps breathing
   Reduced motion or "Skip": the still frame at once, no animation.
   ============================================================ */
:root {
  color-scheme: dark;
  --ink: #030809; --ink-2: #0A171B; --line: rgba(166,222,211,.14);
  --text: #ECF5F2; --text-2: #A9BFBC; --text-3: #7F9794;
  --mint: #22E3A4; --mint-hover: #4CEDB8; --mint-ink: #04241A; --glass: #6FE6EA;
  --amber: #F4B860; --coral: #FF7A6B;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gutter: 48px;
  --core: clamp(280px, min(46vw, 56svh), 640px);
  --ease: cubic-bezier(.2,.7,.2,1);
  --mx: 0; --my: 0;
}
@media (max-width: 767px) { :root { --gutter: 16px; --core: min(92vw, 420px); } }

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column; position: relative;
  background: var(--ink); color: var(--text-2);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
p, h1, ol { margin: 0; padding: 0; }
ol { list-style: none; }
a, button { color: inherit; font: inherit; }
::selection { background: var(--mint); color: var(--mint-ink); }
:focus-visible { outline: 2px solid var(--glass); outline-offset: 4px; border-radius: 6px; }
.label { font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- film layer: dust, grain, vignette, letterbox ---------- */
#dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 2s ease; }
.t-core #dust { opacity: 1; }
.grain { position: fixed; inset: -50%; z-index: 20; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .9s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.vignette { position: fixed; inset: 0; z-index: 19; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 50%, rgba(0,0,0,.72) 100%); }
/* letterbox = a soft fade in the page ink, never a hard black band */
.bar { position: fixed; left: 0; right: 0; height: 10svh; z-index: 30; pointer-events: none; transition: transform 2s var(--ease); }
.bar.top { top: 0; background: linear-gradient(to bottom, var(--ink) 0%, rgba(3,8,9,.55) 45%, rgba(3,8,9,0) 100%); }
.bar.bottom { bottom: 0; background: linear-gradient(to top, var(--ink) 0%, rgba(3,8,9,.55) 45%, rgba(3,8,9,0) 100%); }
.t-done .bar.top { transform: translateY(-100%); }
.t-done .bar.bottom { transform: translateY(100%); }

/* ---------- the opening: the agent and its tools, on a board; it reaches too far ---------- */
.intro { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; pointer-events: none; }
.beam { position: absolute; left: 50%; top: 50%; width: 0; height: 1px; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(111,230,234,.95), transparent);
  box-shadow: 0 0 18px 2px rgba(111,230,234,.55); opacity: 0; }
.t-beam .beam { animation: beam 2.8s var(--ease) forwards; }
@keyframes beam { 0% { width: 0; opacity: 0; } 15% { opacity: 1; } 45% { width: min(900px, 90vw); opacity: .9; } 85% { width: min(900px, 90vw); opacity: .35; } 100% { width: min(1200px, 100vw); opacity: 0; } }

.board-wrap { position: fixed; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; perspective: 1700px; perspective-origin: 50% 35%; }
.board { position: absolute; left: 50%; top: 47%; width: 1200px; height: 640px; margin: -320px 0 0 -600px; transform-style: preserve-3d;
  --blue: #4C8DFF; --violet: #9B7BFF; --dim: #5F7775;
  transform: scale(var(--fit, 1)) rotateX(60deg) rotateZ(-16deg) scale(.84); opacity: 0;
  transition: transform 3.4s cubic-bezier(.2,.7,.2,1), opacity 1.8s ease, filter 1.2s ease; }
.t-agents .board { opacity: 1; transform: scale(var(--fit, 1)) rotateX(34deg) rotateZ(-7deg) scale(1); }
.t-drift .board { transform: scale(var(--fit, 1)) rotateX(31deg) rotateZ(-4deg) scale(1.05); transition-duration: 4.6s, 1.8s, 1.2s; }
.t-contain .board { transform: scale(var(--fit, 1)) rotateX(30deg) rotateZ(-3deg) scale(1.07); transition-duration: 2s, 1.8s, 1.2s; }
.t-core .board { opacity: 0; filter: blur(12px); transform: scale(var(--fit, 1)) rotateX(66deg) rotateZ(-3deg) scale(.9); transition-duration: 1.5s, 1.2s, 1.2s; }
.board::before { content: ""; position: absolute; inset: -260px -320px; border-radius: 50%;
  background-image: radial-gradient(rgba(111,230,234,.22) 1px, transparent 1.6px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }

/* traces */
.traces { position: absolute; inset: 0; width: 1200px; height: 640px; overflow: visible; }
.tr path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tr .base { stroke: var(--c); stroke-width: 2.6; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); filter: drop-shadow(0 0 5px var(--c)); }
.tr .flow { stroke: #F0FFFB; stroke-width: 3.2; stroke-dasharray: 16 var(--len); stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 7px var(--c)); }
.tr .port { fill: var(--c); opacity: 0; filter: drop-shadow(0 0 5px var(--c)); }
.t-agents .tr.ok .base { animation: draw 1.3s cubic-bezier(.6,0,.3,1) calc(.6s + var(--dl)) forwards; }
.t-agents .tr.ok .port { animation: fadein .4s ease calc(1.6s + var(--dl)) forwards; }
.t-agents .tr.ok .flow { animation: flow 2.6s linear calc(1.9s + var(--dl)) infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes flow { 0% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: var(--nlen); opacity: 1; } }
/* the reach: traces it was never given */
.tr.bad { --c: #F4B860; }
.t-drift .tr.bad .base { animation: draw 2.4s cubic-bezier(.45,0,.3,1) calc(.8s + var(--dl)) forwards, hot 2.4s linear calc(.8s + var(--dl)) forwards; }
.t-drift .tr.bad .port { animation: fadein .3s ease calc(.8s + var(--dl)) forwards; }
.t-drift .tr.bad .flow { animation: flow 1.1s linear calc(2.4s + var(--dl)) infinite; stroke: #FFE6DF; }
@keyframes hot { 0% { stroke: #F4B860; } 100% { stroke: #FF7A6B; filter: drop-shadow(0 0 7px #FF7A6B); } }
.t-catch .tr.bad { animation: blinkg .3s steps(2) 4; }
@keyframes blinkg { 50% { opacity: .25; } }
.t-contain .tr.bad .base { stroke: #FF7A6B; stroke-dashoffset: 0; animation: undraw .7s cubic-bezier(.7,0,.3,1) forwards; }
.t-contain .tr.bad .flow, .t-contain .tr.bad .port { animation: none; opacity: 0; transition: opacity .3s; }
@keyframes undraw { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--len); } }

/* tool tiles */
.tile { position: absolute; left: calc(var(--x) * 1px - 56px); top: calc(var(--y) * 1px - 56px); width: 112px; height: 112px; border-radius: 26px; display: grid; place-items: center; color: var(--c);
  background: linear-gradient(155deg, rgba(28,56,66,.94), rgba(9,22,27,.96) 70%);
  border: 1px solid rgba(111,230,234,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -14px 24px rgba(0,0,0,.35), 0 30px 50px -26px rgba(0,0,0,.95), 0 0 30px -12px var(--c);
  opacity: 0; transform: translateY(16px) scale(.9);
  transition: opacity .9s ease calc(.3s + var(--dl)), transform .9s var(--ease) calc(.3s + var(--dl)), color .8s ease, border-color .8s ease, box-shadow .8s ease; }
.tile svg { width: 50px; height: 50px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px currentColor); }
.tile .tl { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); font: 500 14px var(--mono); letter-spacing: .02em; color: #9DB5B1; white-space: nowrap; transition: color .8s ease; }
.t-agents .tile { opacity: 1; transform: none; }
.tile.bad { color: var(--dim); border-color: rgba(166,222,211,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 50px -26px rgba(0,0,0,.95); }
.t-agents .tile.bad { opacity: .55; }
.tile .lock { position: absolute; right: -10px; top: -10px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #0B1C21; border: 1px solid rgba(166,222,211,.25); color: #9DB5B1; transition: color .6s, border-color .6s, opacity .6s; }
.tile .lock svg { width: 16px; height: 16px; filter: none; stroke-width: 2.2; }
.t-drift .tile.bad { opacity: 1; color: #F4B860; border-color: rgba(244,184,96,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 50px -26px rgba(0,0,0,.95), 0 0 36px -8px rgba(244,184,96,.6); transition-delay: 0s, 0s, calc(2s + var(--dl)), calc(2s + var(--dl)), calc(2s + var(--dl)); }
.t-drift .tile.bad .lock { opacity: 0; }
.t-catch .tile.bad { color: #FF7A6B; border-color: rgba(255,122,107,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 50px -26px rgba(0,0,0,.95), 0 0 46px -6px rgba(255,122,107,.75); transition-delay: 0s; transition-duration: .9s, .9s, .25s, .25s, .25s; }
.t-catch .tile.bad .tl { color: #FF9C90; }
.t-contain .tile.bad { color: var(--dim); opacity: .7; border-color: rgba(166,222,211,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 50px -26px rgba(0,0,0,.95); transition-duration: .9s, .9s, .7s, .7s, .7s; }
.t-contain .tile.bad .lock { opacity: 1; color: #22E3A4; border-color: rgba(34,227,164,.6); }
.t-contain .tile.bad .tl { color: #7F9794; }
.tile .chip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) scale(1.5); padding: 5px 10px; border-radius: 999px; font: 500 12px var(--mono); letter-spacing: .16em; white-space: nowrap; opacity: 0; background: rgba(5,12,14,.85); border: 1px solid currentColor; }
.t-contain .tile .chip { animation: chip .5s ease calc(.25s + var(--dl)) forwards; }
@keyframes chip { 0% { opacity: 0; transform: translateX(-50%) scale(1.6); filter: blur(3px); } 60% { opacity: 1; transform: translateX(-50%) scale(.95); filter: none; } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
.chip.deny { color: #FF7A6B; } .chip.hold { color: #F4B860; }

/* the agent */
.hub { position: absolute; left: 450px; top: 278px; width: 300px; height: 84px; border-radius: 42px; display: flex; align-items: center; gap: 16px; padding: 0 30px; color: #6FE6EA;
  background: linear-gradient(180deg, rgba(24,58,68,.97), rgba(8,22,28,.97));
  border: 1.5px solid rgba(111,230,234,.75);
  box-shadow: 0 0 0 7px rgba(111,230,234,.06), 0 0 46px rgba(111,230,234,.38), inset 0 1px 0 rgba(255,255,255,.14), 0 40px 60px -30px rgba(0,0,0,.9);
  opacity: 0; transform: scale(.9); transition: opacity 1s ease .2s, transform 1s var(--ease) .2s, color 1.6s ease, border-color 1.6s ease, box-shadow 1.6s ease; }
.hub svg { width: 42px; height: 42px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px currentColor); }
.hub b { display: block; font: 600 30px/1 var(--sans); letter-spacing: -.015em; text-shadow: 0 0 20px currentColor; }
.hub small { display: block; margin-top: 6px; font: 500 12px var(--mono); letter-spacing: .1em; color: #9DB5B1; }
.t-agents .hub { opacity: 1; transform: none; }
.t-drift .hub { color: #F4B860; border-color: rgba(244,184,96,.85); box-shadow: 0 0 0 7px rgba(244,184,96,.07), 0 0 54px rgba(244,184,96,.42), inset 0 1px 0 rgba(255,255,255,.14), 0 40px 60px -30px rgba(0,0,0,.9); transition-delay: 0s, 0s, 1.2s, 1.2s, 1.2s; transition-duration: 1s, 1s, 2.4s, 2.4s, 2.4s; }
.t-drift .hub b { animation: split 2.6s ease 1.6s forwards; }
@keyframes split { to { text-shadow: -3px 0 rgba(255,60,90,.7), 3px 0 rgba(60,220,255,.7), 0 0 20px currentColor; } }
.t-catch .hub { color: #FF7A6B; border-color: #FF7A6B; box-shadow: 0 0 0 9px rgba(255,122,107,.1), 0 0 70px rgba(255,122,107,.6), inset 0 1px 0 rgba(255,255,255,.14), 0 40px 60px -30px rgba(0,0,0,.9); transition-delay: 0s; transition-duration: 1s, 1s, .3s, .3s, .3s; animation: shake .45s steps(5) 2; }
@keyframes shake { 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, -1px); } 80% { transform: translate(2px, 1px); } }
.t-contain .hub { color: #6FE6EA; border-color: rgba(111,230,234,.75); box-shadow: 0 0 0 7px rgba(111,230,234,.06), 0 0 46px rgba(111,230,234,.38), inset 0 1px 0 rgba(255,255,255,.14), 0 40px 60px -30px rgba(0,0,0,.9); transition-duration: 1s, 1s, .8s, .8s, .8s; animation: none; }
.t-contain .hub b { animation: none; text-shadow: 0 0 20px currentColor; }
/* the moment it's caught: a ring of light leaves the agent */
.hub::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid #6FE6EA; opacity: 0; }
.t-contain .hub::after { animation: ring 1.2s ease-out forwards; }
@keyframes ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9, 3.2); } }

/* glass stat cards */
.card { position: absolute; left: calc(var(--x) * 1px - 108px); top: calc(var(--y) * 1px - 44px); width: 216px; padding: 14px 18px 16px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(20,44,52,.82), rgba(8,20,24,.86)); border: 1px solid rgba(111,230,234,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 50px -28px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(14px); transition: opacity 1s ease calc(1.2s + var(--dl)), transform 1s var(--ease) calc(1.2s + var(--dl)); }
.t-agents .card { opacity: 1; transform: none; }
.card .k { font: 500 13px var(--sans); color: #8FA6A3; }
.card .v { margin-top: 4px; font: 600 26px/1.1 var(--sans); letter-spacing: -.01em; color: #ECF5F2; font-variant-numeric: tabular-nums; transition: color .5s; }
.card .bar { margin-top: 10px; height: 5px; border-radius: 3px; background: rgba(166,222,211,.12); overflow: hidden; }
.card .bar i { display: block; height: 100%; width: 8%; border-radius: 3px; background: linear-gradient(90deg, #22E3A4, #F4B860 55%, #FF7A6B); transition: width 3.8s cubic-bezier(.5,0,.6,1) .8s; }


.card .st { display: inline-flex; align-items: center; gap: 8px; font: 600 18px var(--sans); color: #22E3A4; transition: color .4s; }
.card .st::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.card svg { display: block; margin-top: 8px; width: 100%; height: 34px; overflow: visible; }
.card svg path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark-ok { stroke: #22E3A4; filter: drop-shadow(0 0 4px #22E3A4); }
.spark-bad { stroke: #FF7A6B; filter: drop-shadow(0 0 4px #FF7A6B); stroke-dasharray: 220; stroke-dashoffset: 220; }
.t-drift .spark-bad { animation: draw 3s ease 1s forwards; }
.t-contain .spark-bad { animation: none; opacity: 0; transition: opacity .5s; }
/* InFocus: the lens above the agent */
.tr.watch .base { stroke-width: 2.2; }
.t-agents .tr.watch .base { animation: draw 1s cubic-bezier(.6,0,.3,1) .4s forwards; }
.t-agents .tr.watch .port { animation: fadein .4s ease 1.2s forwards; }
.t-agents .tr.watch .flow { animation: flowup 1.6s linear 1.4s infinite; }
@keyframes flowup { 0% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -148px; opacity: 1; } }
.t-catch .tr.watch .base { stroke: #E8FFFC; stroke-width: 5; filter: drop-shadow(0 0 10px #6FE6EA) drop-shadow(0 0 22px #6FE6EA); }
.t-catch .tr.watch .flow { animation-duration: .45s; }
.t-contain .tr.watch .base { stroke: #6FE6EA; stroke-width: 2.2; transition: stroke-width 1s ease; }
.ifn { position: absolute; left: 446px; top: 30px; width: 308px; height: 102px; border-radius: 24px; display: flex; align-items: center; gap: 18px; padding: 0 22px; color: #6FE6EA;
  background: linear-gradient(160deg, rgba(26,60,70,.95), rgba(8,22,28,.96) 70%);
  border: 1.5px solid rgba(111,230,234,.55);
  box-shadow: 0 0 0 7px rgba(111,230,234,.05), 0 0 50px -6px rgba(111,230,234,.45), inset 0 1px 0 rgba(255,255,255,.12), 0 40px 60px -30px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(-14px); transition: opacity 1s ease .5s, transform 1s var(--ease) .5s, box-shadow .4s ease, border-color .4s ease; }
.t-agents .ifn { opacity: 1; transform: none; }
.t-catch .ifn { border-color: #E8FFFC; box-shadow: 0 0 0 10px rgba(111,230,234,.10), 0 0 80px rgba(111,230,234,.75), inset 0 1px 0 rgba(255,255,255,.2), 0 40px 60px -30px rgba(0,0,0,.9); transition-delay: 0s; }
.t-contain .ifn { border-color: rgba(111,230,234,.55); box-shadow: 0 0 0 7px rgba(111,230,234,.05), 0 0 50px -6px rgba(111,230,234,.45), inset 0 1px 0 rgba(255,255,255,.12), 0 40px 60px -30px rgba(0,0,0,.9); transition-duration: 1.2s; }
.lens { width: 58px; height: 58px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; filter: drop-shadow(0 0 8px currentColor); overflow: visible; }
.lens .l1 { stroke-width: 1.6; opacity: .8; }
.lens .l2 { stroke-width: 2; transform-box: view-box; transform-origin: 24px 24px; }
.lens .l3 { fill: currentColor; stroke: none; }
.lens .blades { stroke-width: 2; opacity: .85; transform-box: view-box; transform-origin: 24px 24px; animation: spin 14s linear infinite; }
.t-drift .lens .blades { animation-duration: 5s; }
.t-catch .lens .blades { animation-duration: 1.2s; }
.t-catch .lens .l2 { animation: iris .6s var(--ease) forwards; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes iris { 0% { transform: scale(1); } 50% { transform: scale(.55); } 100% { transform: scale(.75); } }
.ifn-t { display: grid; gap: 6px; min-width: 0; flex: 1; }
.ifn-t b { font: 600 24px/1 var(--sans); letter-spacing: -.01em; color: #ECF5F2; }
.ifn-r { display: flex; justify-content: space-between; font: 500 13px var(--mono); letter-spacing: .06em; color: #9DB5B1; text-transform: uppercase; }
.ifn-r .dv { font-variant-numeric: tabular-nums; color: #ECF5F2; transition: color .4s; }
.ifn .ifbar { display: block; height: 5px; border-radius: 3px; background: rgba(166,222,211,.12); overflow: hidden; }
.ifn .ifbar i { display: block; height: 100%; width: 8%; border-radius: 3px; background: linear-gradient(90deg, #22E3A4, #F4B860 55%, #FF7A6B); transition: width 3.8s cubic-bezier(.5,0,.6,1) .8s; }
.t-drift .ifn .ifbar i { width: 88%; }
.t-contain .ifn .ifbar i { width: 4%; transition: width .8s var(--ease); }
.t-catch .ifn-r { color: #FF9C90; } .t-catch .ifn-r .dv { color: #FF7A6B; }
.t-contain .ifn-r { color: #22E3A4; } .t-contain .ifn-r .dv { color: #22E3A4; }
/* the focal catcher: brackets drop from wide and lock onto the agent */
.reticle { position: absolute; left: 426px; top: 256px; width: 348px; height: 128px; opacity: 0; transform: scale(2.4); pointer-events: none; color: #E8FFFC; }
.reticle .c { position: absolute; width: 34px; height: 34px; border: 0 solid currentColor; filter: drop-shadow(0 0 6px #6FE6EA) drop-shadow(0 0 14px #6FE6EA); }
.reticle .tl { left: 0; top: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 10px; }
.reticle .tr { right: 0; top: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 10px; }
.reticle .bl { left: 0; bottom: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 10px; }
.reticle .br { right: 0; bottom: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 10px; }
.reticle .lockt { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; font: 500 12px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #E8FFFC; background: rgba(5,12,14,.85); border: 1px solid rgba(111,230,234,.7); opacity: 0; white-space: nowrap; }
.t-catch .reticle { animation: focus .75s cubic-bezier(.2,.9,.25,1.15) .15s forwards; }
.t-catch .reticle .lockt { animation: fadein .3s ease .8s forwards; }
@keyframes focus { 0% { opacity: 0; transform: scale(2.4); } 40% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
.t-contain .reticle { opacity: 1; transform: scale(1); color: #22E3A4; animation: release 1.4s ease .9s forwards; }
.t-contain .reticle .lockt { opacity: 1; color: #22E3A4; border-color: rgba(34,227,164,.7); }
@keyframes release { to { opacity: 0; transform: scale(1.12); } }
/* the lens carries no name: aperture, reading, bar */
.ifn { gap: 16px; }
.ifn-r { font-size: 14px; }
/* phones: a portrait board with bigger tiles and type, and a gentler camera */
.board.m .tile { width: 136px; height: 136px; border-radius: 32px; left: calc(var(--x) * 1px - 68px); top: calc(var(--y) * 1px - 68px); }
.board.m .tile svg { width: 64px; height: 64px; }
.board.m .tile .tl { font-size: 22px; top: calc(100% + 12px); }
.board.m .tile .lock { width: 42px; height: 42px; border-radius: 13px; right: -12px; top: -12px; }
.board.m .tile .lock svg { width: 22px; height: 22px; }
.board.m .tile .chip { font-size: 18px; padding: 7px 14px; }
.board.m .hub b { font-size: 34px; }
.board.m .hub small { font-size: 17px; }
.board.m .hub svg { width: 48px; height: 48px; }
.board.m .ifn { height: 108px; }
.board.m .lens { width: 66px; height: 66px; }
.board.m .ifn-r { font-size: 19px; }
.board.m .reticle .lockt { font-size: 18px; padding: 7px 16px; }
.board.m .card { width: 300px; left: calc(var(--x) * 1px - 150px); padding: 16px 22px 18px; }
.board.m .card .k { font-size: 19px; }
.board.m .card .st { font-size: 26px; }
.board.m { transform: scale(var(--fit, 1)) rotateX(48deg) rotateZ(-10deg) scale(.86); }
.t-agents .board.m { transform: scale(var(--fit, 1)) rotateX(22deg) rotateZ(-4deg) scale(1); }
.t-drift .board.m { transform: scale(var(--fit, 1)) rotateX(20deg) rotateZ(-2deg) scale(1.04); }
.t-contain .board.m { transform: scale(var(--fit, 1)) rotateX(19deg) rotateZ(-1.5deg) scale(1.05); }
.t-core .board.m { transform: scale(var(--fit, 1)) rotateX(60deg) rotateZ(-2deg) scale(.9); }
.instant .board-wrap { display: none; }
@media (max-width: 639px) { .card.side { display: none; } }

/* ---------- top + foot ---------- */
.site-head, .foot { position: relative; z-index: 5; opacity: 0; transition: opacity 1.8s ease; }
.t-rest .site-head, .t-rest .foot { opacity: 1; }
.site-head { display: flex; justify-content: flex-end; align-items: center; height: 80px; padding-inline: var(--gutter); }
/* the header overlays the scene (no band of its own); only the invitation, top-right */
.site-head { position: absolute; top: 0; left: 0; right: 0; }
.lockup { display: inline-flex; align-items: center; text-decoration: none; }
.lockup img { height: 22px; width: auto; }
.lockup-rule { width: 1px; height: 16px; margin-inline: 12px; background: rgba(236,245,242,.28); }
.lockup-ai { font-size: 13px; font-weight: 600; letter-spacing: .16em; line-height: 1; color: var(--glass); }
.invite { display: inline-flex; align-items: center; gap: 10px; }
.invite::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: ping 2.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34,227,164,.5); } 80%, 100% { box-shadow: 0 0 0 9px rgba(34,227,164,0); } }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px var(--gutter) 24px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--text-3); }
.foot a { color: var(--text-2); text-decoration: none; }
.foot a:hover { color: var(--text); }
.replay { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-3); text-decoration: underline; text-decoration-color: rgba(236,245,242,.25); text-underline-offset: 3px; }
.replay:hover { color: var(--text); }

/* ---------- the stage ---------- */
.stage { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gutter) 48px; isolation: isolate; overflow-x: clip; }
.atmos { position: fixed; inset: -40px; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 2.4s ease;
  transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0);
  background:
    radial-gradient(60% 55% at 50% 38%, rgba(34,227,164,.12), transparent 70%),
    url("assets/bg-plexus-dark.webp") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, transparent 18%, #000 75%);
          mask-image: radial-gradient(75% 70% at 50% 45%, transparent 18%, #000 75%); }
.t-core .atmos { opacity: .3; }

.core { position: relative; width: var(--core); aspect-ratio: 2068 / 2096; margin-top: -48px; z-index: -1; mix-blend-mode: screen;
  transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 8px), 0); }
.core-in { width: 100%; height: 100%; opacity: 0; transform: scale(1.18); filter: blur(22px) brightness(.4); }
.t-core .core-in { animation: surface 2.8s var(--ease) .6s forwards; }
@keyframes surface { to { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); } }
.core img {
  width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 42%, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 42%, #000 50%, transparent 100%);
}
.t-done .core img { animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scale(1); filter: saturate(.88) brightness(.94); } to { transform: scale(1.05); filter: saturate(1.05) brightness(1.06); } }
/* the flare when it surfaces */
.flare { position: absolute; left: 50%; top: 42%; width: 140%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.2); border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(220,255,245,.85), rgba(111,230,234,.35) 30%, transparent 70%); }
.t-core .flare { animation: flare 2.2s ease-out 1.1s forwards; }
@keyframes flare { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); } }
/* anamorphic streak through the core */
.streak { position: absolute; left: -40%; right: -40%; top: 42%; height: 2px; transform: translateY(-50%) scaleX(0); pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(111,230,234,.0) 10%, rgba(160,250,240,.9) 50%, rgba(111,230,234,0) 90%, transparent);
  box-shadow: 0 0 20px 3px rgba(111,230,234,.45); opacity: 0; }
.t-core .streak { animation: streak 1.8s var(--ease) 1.15s forwards; }
@keyframes streak { 0% { opacity: 0; transform: translateY(-50%) scaleX(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) scaleX(1); } }
/* the examining beam, after the reveal */
.scan { position: absolute; inset: 10% 18% 32%; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.scan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(111,230,234,.9), transparent);
  box-shadow: 0 0 22px 4px rgba(111,230,234,.35); }
.t-done .scan::before { animation: sweep 6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes sweep { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(var(--sweep, 360px)); opacity: 0; } }

/* ---------- the words ---------- */
.copy { margin-top: calc(var(--core) * -0.30); }
.kicker { color: var(--glass); letter-spacing: .32em; margin-bottom: 22px; opacity: 0; transition: opacity 1.2s ease, letter-spacing 1.6s var(--ease); letter-spacing: .6em; }
.t-title .kicker { opacity: 1; letter-spacing: .32em; }
h1 { font-size: clamp(52px, min(8vw, 13svh), 128px); font-weight: 800; line-height: .92; letter-spacing: -0.055em; color: var(--text); filter: drop-shadow(0 4px 30px rgba(3,8,9,.9)); }
h1 .word { display: inline-block; white-space: nowrap; }
h1 .ch { display: inline-block; opacity: 0; transform: translateY(.18em); filter: blur(14px); white-space: pre; }
.t-title h1 .ch { animation: letter 1.4s var(--ease) calc(var(--i) * 80ms) forwards; }
@keyframes letter { to { opacity: 1; transform: none; filter: blur(0); } }
/* after the reveal, a wave of light crosses the words every few seconds */
.t-done h1 .ch { opacity: 1; transform: none; filter: none; animation: wave 7s ease-in-out calc(1s + var(--i) * 70ms) infinite; }
@keyframes wave { 0%, 8%, 100% { color: var(--text); text-shadow: none; } 4% { color: #C9FFEE; text-shadow: 0 0 22px rgba(111,230,234,.85), 0 0 4px rgba(200,255,240,.9); } }
h1 .stop { display: inline-block; color: var(--mint); opacity: 0; transform: scale(0); }
.t-title h1 .stop { animation: ignite 1.2s var(--ease) 1.7s forwards; }
@keyframes ignite { 0% { opacity: 0; transform: scale(0); text-shadow: none; } 45% { opacity: 1; transform: scale(1.6); text-shadow: 0 0 60px rgba(34,227,164,1), 0 0 18px rgba(34,227,164,1); } 100% { opacity: 1; transform: none; text-shadow: 0 0 24px rgba(34,227,164,.75), 0 0 6px rgba(34,227,164,.9); } }
.line { margin: 26px auto 0; max-width: 34ch; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.5; letter-spacing: -0.01em; color: var(--text-2); text-wrap: balance; }
.line .em { color: var(--text); font-weight: 500; }
.rise { opacity: 0; transform: translateY(14px); transition: opacity 1.5s ease var(--d, 0s), transform 1.5s var(--ease) var(--d, 0s); }
.t-rest .rise { opacity: 1; transform: none; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; margin-top: 40px; padding: 0 30px; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: .01em; text-decoration: none; color: var(--mint-ink); overflow: hidden;
  background: linear-gradient(180deg, #5BF0BF 0%, var(--mint) 55%, #17C98F 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1px rgba(34,227,164,.35), 0 18px 50px -16px rgba(34,227,164,.75);
  transition: transform .18s, box-shadow .18s; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); }
.t-done .btn::after { animation: glint 5s ease-in-out 1s infinite; }
@keyframes glint { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(34,227,164,.5), 0 24px 60px -14px rgba(34,227,164,.9); }
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- skip ---------- */
.skip { position: fixed; right: var(--gutter); bottom: 24px; z-index: 40; padding: 8px 14px; border: 1px solid rgba(236,245,242,.25); border-radius: 999px; background: rgba(3,8,9,.6); cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); transition: opacity .6s ease; }
.skip:hover { color: var(--text); border-color: var(--glass); }
.t-done .skip { opacity: 0; pointer-events: none; }

@media (max-width: 767px) {
  .lockup img { height: 20px; }
  .core { margin-top: -8px; }
  .copy { margin-top: calc(var(--core) * -0.24); }
  h1 { font-size: 54px; }
  .kicker { margin-bottom: 16px; }
  .btn { width: 100%; }
  .foot { flex-direction: column; align-items: center; text-align: center; }
  .bar { height: 8svh; }
  .skip { bottom: 16px; }
  .feed li { gap: 12px; }
}

/* ---------- no motion: the still frame, at once ---------- */
.instant *, .instant *::before, .instant *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
.instant .intro { display: none; }
.instant .grain, .instant .scan, .instant .core img, .instant .btn::after, .instant h1 .ch { animation: none !important; }
.instant h1 .ch { opacity: 1; transform: none; filter: none; }
.instant h1 .stop { opacity: 1; transform: none; text-shadow: 0 0 24px rgba(34,227,164,.75), 0 0 6px rgba(34,227,164,.9); }
.instant .core-in { opacity: 1; transform: none; filter: none; }
.instant .bar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .grain, .invite::before { animation: none; }
  #dust { display: none; }
}

/* ===== contact form (v10) ===== */
button.btn { border: 0; cursor: pointer; font-family: var(--sans); }
.contact { width: min(520px, calc(100% - 32px)); max-height: calc(100svh - 32px); overflow: auto; padding: 0; border: 1px solid rgba(111,230,234,.28); border-radius: 22px; color: var(--text-2);
  background: linear-gradient(160deg, rgba(20,46,54,.96), rgba(6,16,19,.97) 70%);
  box-shadow: 0 0 0 1px rgba(34,227,164,.08), 0 40px 120px -30px rgba(0,0,0,.95), 0 0 80px -30px rgba(34,227,164,.35); }
.contact::backdrop { background: rgba(2,6,7,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.contact form { position: relative; display: grid; gap: 14px; padding: 30px 30px 26px; text-align: left; }
.contact .x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font-size: 22px; line-height: 1; cursor: pointer; }
.contact .x:hover { color: var(--text); border-color: rgba(111,230,234,.5); }
.ck { color: var(--glass); letter-spacing: .24em; }
.contact h2 { margin: 2px 0 0; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.035em; color: var(--text); }
.cstop { color: var(--mint); }
.csub { margin: 0 0 4px; font-size: 15px; line-height: 1.5; }
.cf { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.cf .opt { color: var(--text-3); font-weight: 400; }
.cf input, .cf textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(166,222,211,.18); background: rgba(3,8,9,.6); color: var(--text); font: 400 16px/1.4 var(--sans); }
.cf textarea { resize: vertical; min-height: 84px; }
.cf input:focus, .cf textarea:focus { outline: none; border-color: rgba(111,230,234,.7); box-shadow: 0 0 0 3px rgba(111,230,234,.15); }
.cf input[aria-invalid="true"] { border-color: rgba(255,122,107,.8); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.privacy { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-3); }
.cactions { display: flex; }
.btn.csend { margin-top: 4px; width: 100%; }
.btn.csend[disabled] { opacity: .6; cursor: progress; transform: none; }
.cstatus { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--text-2); }
.cstatus.err { color: var(--coral); }
.contact form.done .cf, .contact form.done .privacy, .contact form.done .cactions, .contact form.done .csub { display: none; }
.contact form.done .cstatus { font-size: 17px; color: var(--text); }

/* stagger delays (were inline style attributes; CSP blocks those) */
.d1 { --d: .1s; }
.d6 { --d: .6s; }