:root {
  --bg: #050912;
  --ink: #EAF2FF;
  --mute: #A9B6CC;
  --dim: #8FA0BA;
  --accent-rgb: 77 141 255;
  --alt-rgb: 255 181 71;
  --accent: rgb(var(--accent-rgb));
  --alt: rgb(var(--alt-rgb));
  --alt-soft: #FFC978;
  --on-accent: #04102A;
  --star: #C9DBFF;
  --line: #1B2540;
  --glass: rgba(6, 12, 26, .74);
  --gut: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --display: Sora, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
section { position: relative; padding: 140px var(--gut); }

/* page chrome */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; background: var(--accent); box-shadow: 0 0 14px var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.glow { position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .09), transparent); transform: translate(var(--gx, -999px), var(--gy, -999px)); }

.nav { position: fixed; inset: 0 0 auto 0; height: 76px; padding: 0 var(--gut); display: flex; align-items: center; gap: 28px; z-index: 50; border-bottom: 1px solid transparent; transition: background .4s, border-color .4s, backdrop-filter .4s; }
.nav.scrolled { background: rgba(5, 9, 18, .72); backdrop-filter: blur(14px); border-color: var(--line); }
.logo { display: flex; align-items: center; gap: 12px; font: 700 22px var(--display); }
.logo svg { color: var(--accent); }
.nav-links { margin-left: auto; display: flex; gap: 30px; font-size: 15px; color: var(--mute); }
.nav-links a { position: relative; padding: 14px 0; transition: color .3s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.lang { display: flex; padding: 3px; border: 1px solid #22304D; border-radius: 999px; }
.lang button { min-width: 44px; height: 38px; border: 0; border-radius: 999px; background: none; color: var(--mute); font: 500 13px var(--mono); cursor: pointer; transition: background .3s, color .3s; }
.lang button.on { background: #12203A; color: var(--ink); }

.btn { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 15px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.btn-line { border: 1px solid var(--accent); color: var(--accent); }
.btn-line:hover { box-shadow: 0 0 28px rgb(var(--accent-rgb) / .45); }
.btn-solid { height: 60px; padding: 0 34px; font-size: 18px; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 44px rgb(var(--accent-rgb) / .5); }
.btn-solid::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite; }
.btn-solid, .btn-solid.reveal.in { transform: translate(var(--bx, 0px), var(--by, 0px)); }
.btn-solid:hover, .btn-solid.reveal.in:hover { transform: translate(var(--bx, 0px), calc(var(--by, 0px) - 3px)) scale(1.03); box-shadow: 0 0 70px rgb(var(--accent-rgb) / .75); }
.btn-solid svg { transition: transform .3s var(--ease); }
.btn-solid:hover svg { transform: translateX(5px); }

.eyebrow { font: 500 13px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.title { font: 600 clamp(36px, 5vw, 68px)/1.05 var(--display); letter-spacing: -.03em; text-align: center; margin-bottom: 56px; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(50px) scale(.97); filter: blur(12px); transition: opacity .9s var(--ease) var(--d, 0s), filter .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* hero */
.hero { min-height: 100vh; min-height: 100svh; padding-top: 76px; padding-bottom: 120px; display: flex; align-items: center; overflow: hidden; }
/* --fly goes 0 to 1 while the hero scrolls away: the core grows and fades, as if flown through */
#core { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(calc(1 + var(--fly, 0) * .9)); transform-origin: 72% 47%; opacity: calc(1 - var(--fly, 0) * 1.2); }
.hero-copy { transform: translateY(calc(var(--fly, 0) * -90px)); opacity: calc(1 - var(--fly, 0) * 1.6); }
.steps-bar, .scene-tag { opacity: calc(1 - var(--fly, 0) * 2); }
.floor { position: absolute; left: -40%; right: -40%; bottom: -150px; height: 480px; background-image: linear-gradient(rgb(var(--accent-rgb) / .4) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--accent-rgb) / .4) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(520px) rotateX(64deg); animation: floor 1.4s linear infinite; -webkit-mask-image: linear-gradient(transparent, #000 75%); mask-image: linear-gradient(transparent, #000 75%); }
.horizon { position: absolute; left: 0; right: 0; bottom: 170px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 40px 6px rgb(var(--accent-rgb) / .35); }
.sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 160px; background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / .16), transparent); animation: sweep 4s ease-in infinite; }
.hero-copy { position: relative; z-index: 2; width: 100%; max-width: 680px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.js:not(.booted) .hero-copy > * { opacity: 0; }
.booted .hero-copy > * { animation: intro 1.1s var(--ease) .5s both; }
.booted .hero-copy > :nth-child(2) { animation-delay: .62s; }
.booted .hero-copy > :nth-child(3) { animation-delay: .74s; }
.booted .hero-copy > :nth-child(4) { animation-delay: .86s; }
.hero h1 { align-self: stretch; font: 600 clamp(54px, 7.4vw, 104px)/1 var(--display); letter-spacing: -.04em; }
.rot { position: relative; display: block; height: 1.16em; overflow: hidden; color: var(--accent); text-shadow: 0 0 44px rgb(var(--accent-rgb) / .6); }
.rot-w { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(70%) skewY(6deg); filter: blur(8px); transition: transform .7s var(--ease), opacity .7s var(--ease), filter .7s var(--ease); }
.rot-w.in { opacity: 1; transform: none; filter: none; }
.rot-w.out { opacity: 0; transform: translateY(-70%) skewY(-6deg); filter: blur(8px); }
.lead { font-size: 21px; color: var(--mute); }
.scene-tag { position: absolute; right: var(--gut); bottom: 92px; font: 500 13px var(--mono); letter-spacing: .2em; color: var(--accent); }
.steps-bar { position: absolute; left: var(--gut); right: var(--gut); bottom: 38px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.steps-bar li { display: flex; flex-direction: column; gap: 10px; font: 500 13px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); transition: color .4s; }
.steps-bar li.on { color: var(--accent); }
.steps-bar i { display: block; height: 2px; background: var(--line); }
.steps-bar b { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: scaleX(0); transform-origin: left; }
.steps-bar li.on b { animation: fill 4s linear forwards; }

/* statement */
.statement { padding-top: 22vh; padding-bottom: 22vh; }
.big-words { max-width: 1100px; margin: 0 auto; font: 600 clamp(34px, 5.2vw, 76px)/1.12 var(--display); letter-spacing: -.03em; }
.big-words .wd { opacity: .14; transition: opacity .35s, color .35s, text-shadow .35s; }
.big-words .wd.lit { opacity: 1; }
.big-words .wd.lit:first-child { color: var(--accent); text-shadow: 0 0 40px rgb(var(--accent-rgb) / .6); }

/* how it works: pinned, scroll-driven */
.how { height: 420vh; padding: 0; }
.how-sticky { position: sticky; top: 0; height: 100vh; padding: 76px var(--gut) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 40px; overflow: hidden; }
.how-left { display: flex; flex-direction: column; gap: 28px; }
.how-steps { position: relative; height: 300px; }
.how-step { position: absolute; inset: 0; opacity: 0; transform: translateY(46px); filter: blur(10px); transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); }
.how-step.on { opacity: 1; transform: none; filter: none; }
.how-step .num { font: 500 14px var(--mono); letter-spacing: .2em; color: var(--accent); }
.how-step h2 { font: 600 clamp(48px, 6vw, 88px)/1 var(--display); letter-spacing: -.04em; margin: 10px 0 18px; }
.how-step p { font-size: 21px; line-height: 1.45; color: var(--mute); max-width: 440px; }
.how-rail { width: min(440px, 100%); height: 2px; background: var(--line); }
.how-rail b { display: block; height: 100%; width: var(--w, 0%); background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.how-right { position: relative; height: min(560px, 70vh); perspective: 1000px; }
.how-vis { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; opacity: 0; transform: scale(.7) rotateY(-28deg); filter: blur(14px); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }
.how-vis.on { opacity: 1; transform: none; filter: none; }
.radial { position: relative; width: 0; height: 0; }
.radial span { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.radial i { position: absolute; left: -2px; bottom: 100px; width: 4px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / .7); transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.radial span:nth-child(4n) i { background: var(--alt); box-shadow: 0 0 8px rgb(var(--alt-rgb) / .7); }
.orb { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F2FBFF, var(--accent) 38%, color-mix(in srgb, var(--accent) 40%, #030A14) 78%, color-mix(in srgb, var(--accent) 15%, #030A14)); box-shadow: 0 0 70px rgb(var(--accent-rgb) / .75); animation: breathe 2.4s ease-in-out infinite; }
.glass { border: 1px solid rgb(var(--accent-rgb) / .4); border-radius: 20px; background: var(--glass); backdrop-filter: blur(10px); box-shadow: 0 0 50px rgb(var(--accent-rgb) / .16); padding: 24px; }
.talk { width: min(460px, 92%); display: flex; flex-direction: column; gap: 14px; }
.bubble { max-width: 86%; padding: 12px 16px; border-radius: 14px; font-size: 17px; line-height: 1.4; opacity: 0; transform: translateY(18px); }
.bubble small { display: block; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.bubble.a { align-self: flex-start; background: rgb(var(--accent-rgb) / .08); border: 1px solid rgb(var(--accent-rgb) / .35); }
.bubble.a small { color: var(--accent); }
.bubble.c { align-self: flex-end; background: rgb(var(--alt-rgb) / .08); border: 1px solid rgb(var(--alt-rgb) / .45); }
.bubble.c small { color: var(--alt-soft); }
.v-write.on .bubble { animation: rise .6s var(--ease) forwards; }
.v-write.on .bubble:nth-child(1) { animation-delay: .3s; }
.v-write.on .bubble:nth-child(2) { animation-delay: .9s; }
.v-write.on .bubble:nth-child(3) { animation-delay: 1.5s; }
.read { position: relative; width: min(460px, 92%); display: flex; flex-direction: column; gap: 20px; overflow: hidden; }
.read .row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.read small { width: 84px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--accent); font: 500 14px var(--mono); opacity: 0; transform: scale(.4); }
.chip.hot { border-color: var(--alt); color: var(--alt-soft); }
.v-understand.on .chip { animation: pop .5s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.v-understand.on .row:nth-child(1) .chip { animation-delay: .3s; }
.v-understand.on .row:nth-child(2) .chip { animation-delay: .6s; }
.v-understand.on .row:nth-child(3) .chip { animation-delay: .9s; }
.v-understand.on .row:nth-child(3) .chip + .chip { animation-delay: 1.1s; }
.meter { flex: 1; min-width: 60px; height: 6px; border-radius: 3px; background: var(--line); }
.meter b { display: block; width: 78%; height: 100%; border-radius: 3px; background: var(--alt); box-shadow: 0 0 10px var(--alt); transform: scaleX(0); transform-origin: left; }
.v-understand.on .meter b { animation: fill 1.2s .7s var(--ease) forwards; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 70px; background: linear-gradient(180deg, transparent, rgb(var(--accent-rgb) / .16), transparent); animation: scanY 2.6s linear infinite; pointer-events: none; }
.ripple { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; border: 2px solid var(--alt); animation: shock 2s ease-out infinite; }
.ripple.r2 { animation-delay: 1s; }
.note { position: relative; width: min(400px, 90%); display: flex; align-items: center; gap: 16px; padding: 16px 20px; opacity: 0; }
.note strong { display: block; font: 600 19px var(--display); }
.note span { font-size: 14px; color: var(--mute); }
.note svg { flex-shrink: 0; color: var(--accent); }
.note.n1 { border-color: var(--alt); box-shadow: 0 0 50px rgb(var(--alt-rgb) / .3); }
.note.n1 svg { color: var(--alt-soft); }
.v-alert.on .n1 { animation: slideR .7s .3s var(--ease) forwards; }
.v-alert.on .n2 { animation: slideL .7s .8s var(--ease) forwards; }

/* features */
.grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { position: relative; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(14, 22, 42, .9), rgba(6, 10, 20, .9)); overflow: hidden; }
.card.reveal { transform: perspective(900px) rotateX(-38deg) translateY(70px) scale(.94); transform-origin: center top; }
.card.reveal.in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: opacity .9s var(--ease) var(--d, 0s), filter .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), border-color .3s, box-shadow .3s; }
.card.reveal.in.live { transform-origin: center; transition: transform .2s ease-out, border-color .3s, box-shadow .3s; }
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--accent-rgb) / .18), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.card:hover { border-color: var(--accent); box-shadow: 0 0 50px rgb(var(--accent-rgb) / .18); }
.card:hover::before { opacity: 1; }
.card h3 { font: 600 22px var(--display); margin-bottom: 8px; }
.card p { font-size: 16px; line-height: 1.45; color: var(--mute); }
.vis { position: relative; height: 130px; margin-bottom: 22px; border: 1px solid rgb(var(--accent-rgb) / .12); border-radius: 14px; background: rgb(var(--accent-rgb) / .04); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vis-bars { align-items: flex-end; gap: 8px; padding: 18px 22px 0; }
.vis-bars i { flex: 1; height: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent), rgb(var(--accent-rgb) / .15)); transform-origin: bottom; animation: barUp 2.4s ease-in-out infinite alternate; }
.vis-bars i:nth-child(2n) { animation-delay: -.6s; }
.vis-bars i:nth-child(3n) { animation-delay: -1.3s; }
.vis-bars i:nth-child(5) { background: linear-gradient(180deg, var(--alt), rgb(var(--alt-rgb) / .15)); animation-delay: -1.9s; }
.vis-ring svg { width: 100px; height: 100px; transform: rotate(-90deg); }
.vis-ring circle { fill: none; stroke: var(--line); stroke-width: 8; }
.vis-ring .arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 289; animation: ringArc 4s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--accent)); }
.vis-bell { color: var(--alt-soft); }
.vis-bell svg { transform-origin: 50% 10%; animation: bellRing 2.4s ease-in-out infinite; }
.vis-bell span { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 1px solid var(--alt); animation: shock 2.4s ease-out infinite; }
.vis-bell span + span { animation-delay: 1.2s; }
.vis-chat { flex-direction: column; align-items: stretch; gap: 12px; padding: 0 22px; }
.vis-chat .q { align-self: flex-end; width: 62%; height: 24px; border-radius: 12px; background: rgba(255, 255, 255, .16); transform-origin: right; animation: typeW 4s var(--ease) infinite; }
.vis-chat .a { align-self: flex-start; display: flex; gap: 6px; padding: 11px 14px; border-radius: 12px; background: rgb(var(--accent-rgb) / .14); }
.vis-chat .a i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: hop 1.2s ease-in-out infinite; }
.vis-chat .a i:nth-child(2) { animation-delay: .15s; }
.vis-chat .a i:nth-child(3) { animation-delay: .3s; }
.vis-doc { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 26px; }
.vis-doc i { height: 8px; border-radius: 4px; background: rgb(var(--accent-rgb) / .55); transform-origin: left; animation: typeW 4s var(--ease) infinite; }
.vis-doc i:nth-child(1) { width: 46%; background: var(--ink); }
.vis-doc i:nth-child(2) { width: 92%; animation-delay: .2s; }
.vis-doc i:nth-child(3) { width: 78%; animation-delay: .4s; }
.vis-doc i:nth-child(4) { width: 86%; animation-delay: .6s; }
.vis-doc i:nth-child(5) { width: 54%; animation-delay: .8s; }
.vis-duo { gap: 7px; }
.vis-duo i { width: 6px; height: 70px; border-radius: 3px; background: var(--accent); animation: eq 1s ease-in-out infinite; }
.vis-duo i:nth-child(n+5):nth-child(-n+8) { background: var(--alt); }
.vis-duo i:nth-child(2n) { height: 44px; animation-delay: -.3s; }
.vis-duo i:nth-child(3n) { animation-delay: -.6s; }

/* who */
.who { overflow: hidden; }
.marquee { margin: 0 calc(-1 * var(--gut)); overflow: hidden; transform: skewX(calc(var(--sk, 0) * 1deg)); }
.track { display: flex; width: max-content; animation: mq 46s linear infinite; }
.rev .track { animation-direction: reverse; }
.track span { padding: 6px 30px; font: 600 clamp(40px, 6vw, 84px)/1.15 var(--display); letter-spacing: -.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgb(var(--accent-rgb) / .6); }
.track span:nth-child(3n) { color: var(--ink); -webkit-text-stroke: 0; }
.roles { max-width: 1100px; margin: 72px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.role { padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgb(var(--accent-rgb) / .07), transparent); }
.role h3 { font: 600 24px var(--display); margin-bottom: 10px; }
.role p { font-size: 17px; line-height: 1.45; color: var(--mute); }
.hubline { margin-top: 64px; text-align: center; font: 500 14px/1.6 var(--mono); letter-spacing: .08em; color: var(--dim); }

/* demo */
.demo { text-align: center; }
.demo .title { margin-bottom: 18px; }
.sub { font-size: 20px; color: var(--mute); margin-bottom: 56px; }
.portal-wrap { max-width: 980px; margin: 0 auto 56px; perspective: 1400px; }
.portal { position: relative; text-align: left; border: 1px solid rgb(var(--accent-rgb) / .5); border-radius: 20px; background: #060B18; box-shadow: 0 0 120px rgb(var(--accent-rgb) / .25), 0 60px 120px rgba(0, 0, 0, .6); overflow: hidden; transform: rotateX(calc(var(--tilt, 30deg) + var(--mrx, 0deg))) rotateY(var(--mry, 0deg)) scale(var(--sc, .86)); transform-origin: center top; transition: transform .2s ease-out; }
.p-top { height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.p-top span { width: 10px; height: 10px; border-radius: 50%; background: #24304A; }
.p-top em { margin-left: auto; font: 500 11px var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.p-body { display: flex; min-height: 380px; }
.p-side { width: 64px; padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; border-right: 1px solid var(--line); }
.p-side i { width: 30px; height: 30px; border-radius: 9px; background: #111B33; }
.p-side i.on { background: var(--accent); box-shadow: 0 0 18px rgb(var(--accent-rgb) / .6); }
.p-main { flex: 1; min-width: 0; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.p-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.p-kpis div { padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.p-kpis small { display: block; font-size: 13px; color: var(--mute); margin-bottom: 4px; }
.p-kpis strong { font: 600 clamp(22px, 3.4vw, 34px) var(--display); }
.p-charts { flex: 1; display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.p-bars, .p-list { border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.p-bars { display: flex; align-items: flex-end; gap: 8px; min-height: 180px; }
.p-bars i { flex: 1; height: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent), rgb(var(--accent-rgb) / .1)); transform-origin: bottom; animation: barUp 2.8s ease-in-out infinite alternate; }
.p-bars i:nth-child(2n) { animation-delay: -.7s; }
.p-bars i:nth-child(3n) { animation-delay: -1.5s; }
.p-bars i:nth-child(5n) { animation-delay: -2.2s; }
.p-list { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.p-list i { position: relative; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.p-list i::after { content: ""; position: absolute; inset: 0; width: 80%; border-radius: 5px; background: var(--alt); transform-origin: left; animation: typeW 5s var(--ease) infinite; }
.p-list i:nth-child(2)::after { width: 62%; animation-delay: .2s; background: var(--accent); }
.p-list i:nth-child(3)::after { width: 45%; animation-delay: .4s; background: var(--accent); }
.p-list i:nth-child(4)::after { width: 28%; animation-delay: .6s; background: var(--accent); }
.p-scan { position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(180deg, transparent, rgb(var(--accent-rgb) / .12), transparent); animation: scanY 5s linear infinite; pointer-events: none; }

/* numbers band */
.numbers { padding-top: 40px; padding-bottom: 110px; }
.numbers .eyebrow { text-align: center; margin-bottom: 44px; }
.nums { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.num { padding: 8px 28px; border-left: 1px solid var(--line); }
.num:first-child { border-left: 0; }
.num strong { display: block; font: 600 clamp(38px, 4.6vw, 68px)/1 var(--display); letter-spacing: -.04em; color: var(--accent); text-shadow: 0 0 40px rgb(var(--accent-rgb) / .35); font-variant-numeric: tabular-nums; white-space: nowrap; }
.num span { display: block; margin-top: 14px; font-size: 16px; line-height: 1.45; color: var(--mute); }

/* business */
.why-list { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.why-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 16px; padding: 30px 0; border-top: 1px solid var(--line); }
.why-item .idx { grid-row: span 2; padding-top: 8px; font: 500 14px var(--mono); letter-spacing: .14em; color: var(--accent); }
.why-item h3 { font: 600 clamp(22px, 2.4vw, 32px)/1.15 var(--display); letter-spacing: -.02em; }
.why-item p { font-size: 17px; line-height: 1.5; color: var(--mute); }

/* under the hood */
.tech .eyebrow { text-align: center; margin-bottom: 18px; }
.tech-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.layers-list { list-style: none; margin: 0; padding: 0; }
.layers-list li { position: relative; padding: 18px 0 18px 26px; border-top: 1px solid var(--line); opacity: .55; transition: opacity .4s; }
.layers-list li::before { content: ""; position: absolute; left: 2px; top: 27px; width: 8px; height: 8px; border-radius: 50%; background: #2A3757; transition: background .4s, box-shadow .4s; }
.layers-list li.on { opacity: 1; }
.layers-list li.on::before { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.layers-list h3 { font: 600 21px var(--display); margin-bottom: 6px; }
.layers-list p { font-size: 16px; line-height: 1.5; color: var(--mute); }
.stack { position: relative; height: 480px; perspective: 1400px; }
.plate { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; display: grid; place-items: center; padding: 20px; text-align: center; border: 1px solid rgb(var(--accent-rgb) / .35); border-radius: 26px; background: linear-gradient(135deg, rgb(var(--accent-rgb) / .10), rgb(var(--accent-rgb) / .02)); font: 500 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); transform: rotateX(62deg) rotateZ(-38deg) translateZ(calc(var(--n) * 58px - 116px)); transition: transform .7s var(--ease), border-color .4s, background .4s, box-shadow .4s, color .4s; }
.plate.on { border-color: var(--accent); background: linear-gradient(135deg, rgb(var(--accent-rgb) / .32), rgb(var(--accent-rgb) / .08)); box-shadow: 0 0 60px rgb(var(--accent-rgb) / .35); color: var(--ink); transform: rotateX(62deg) rotateZ(-38deg) translateZ(calc(var(--n) * 58px - 92px)); }

/* about */
.about .title { max-width: 1000px; margin: 0 auto 28px; font-size: clamp(32px, 4.2vw, 58px); }
.about-lead { max-width: 820px; margin: 0 auto 90px; text-align: center; font-size: 20px; line-height: 1.6; color: var(--mute); }
.about-cols { max-width: 1100px; margin: 0 auto 96px; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 64px 56px; }
.about-cols h3 { padding-top: 6px; font: 500 13px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.about-cols p { font-size: 18px; line-height: 1.65; color: var(--mute); }
.about-cols p + p { margin-top: 18px; }
.about-cols .big { font: 600 clamp(24px, 3vw, 38px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.founders-h { margin-bottom: 44px; text-align: center; font: 600 clamp(30px, 4vw, 52px)/1.1 var(--display); letter-spacing: -.03em; }
.people { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.person { padding: 34px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 24px; align-content: start; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, rgba(14, 22, 42, .9), rgba(6, 10, 20, .9)); }
.avatar { position: relative; grid-row: span 2; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font: 600 28px var(--display); background: radial-gradient(circle at 35% 30%, #12325A, #050B18); }
.avatar::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(var(--accent), transparent 35%, var(--alt) 55%, transparent 80%, var(--accent)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 5s linear infinite; }
.avatar.alt::before { animation-direction: reverse; }
.avatar span { position: relative; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 24%; }
.person h4 { align-self: end; margin: 0; font: 600 26px/1.15 var(--display); }
.person .role-t { font: 500 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.person .bio { grid-column: 1 / -1; font-size: 16px; line-height: 1.6; color: var(--mute); }
.person .role-t + .bio { margin-top: 20px; }
.person .bio + .bio { margin-top: 12px; }

/* final */
.final { padding-top: 180px; padding-bottom: 200px; text-align: center; overflow: hidden; }
.final::before { content: ""; position: absolute; left: 50%; bottom: -420px; width: 1100px; height: 800px; margin-left: -550px; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .22), transparent); animation: breathe 5s ease-in-out infinite; }
.mega { position: relative; font: 600 clamp(44px, 8vw, 120px)/1 var(--display); letter-spacing: -.04em; margin-bottom: 52px; }
.waves { position: absolute; left: 0; bottom: 30px; width: 100%; height: 170px; overflow: hidden; opacity: .55; }
.waves path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; animation: wave 7s linear infinite; }
.waves path:nth-child(2) { stroke: var(--alt); animation-duration: 11s; animation-direction: reverse; }
.waves path:nth-child(3) { opacity: .5; animation-duration: 4.5s; }
.fx { transform: scale(var(--s, 1)); transform-origin: center top; opacity: var(--o, 1); }
.final-btns { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.final .btn-line { height: 60px; padding: 0 30px; font-size: 18px; }
.foot { display: flex; justify-content: space-between; gap: 20px; padding: 28px var(--gut); border-top: 1px solid var(--line); font: 500 13px var(--mono); color: var(--dim); }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 70; padding: 14px 24px; border: 1px solid var(--accent); border-radius: 999px; background: #0B1730; box-shadow: 0 0 40px rgb(var(--accent-rgb) / .3); opacity: 0; transform: translate(-50%, 80px); transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* contact dialog (a MOCK for now: nothing is sent) */
.contact { width: min(560px, calc(100vw - 32px)); padding: 34px; border: 1px solid rgb(var(--accent-rgb) / .45); border-radius: 24px; background: #070D1C; color: var(--ink); box-shadow: 0 0 120px rgb(var(--accent-rgb) / .25), 0 40px 100px rgba(0, 0, 0, .6); }
.contact::backdrop { background: rgba(2, 4, 10, .72); backdrop-filter: blur(8px); }
.contact[open] { animation: dialogIn .5s var(--ease); }
.contact h2 { margin-bottom: 8px; font: 600 34px/1.1 var(--display); letter-spacing: -.03em; }
.cf-sub { margin-bottom: 26px; font-size: 17px; color: var(--mute); }
.contact form { display: flex; flex-direction: column; gap: 16px; }
.contact form[hidden], .cf-done[hidden] { display: none; }
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact label { display: flex; flex-direction: column; gap: 7px; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.contact input, .contact textarea { width: 100%; padding: 13px 14px; border: 1px solid #24304A; border-radius: 12px; background: #0A1226; color: var(--ink); font: 400 16px Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; resize: vertical; transition: border-color .3s, box-shadow .3s; }
.contact input:focus, .contact textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .25); }
.contact .btn { font-family: inherit; cursor: pointer; }
.contact .btn-solid { align-self: flex-start; margin-top: 6px; border: 0; }
.contact .btn-line { background: none; }
.cf-x { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--mute); cursor: pointer; transition: background .3s, color .3s; }
.cf-x:hover { background: #12203A; color: var(--ink); }
.cf-done { padding: 20px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.cf-done svg { color: var(--accent); filter: drop-shadow(0 0 16px var(--accent)); }
.cf-done p { margin-bottom: 10px; font-size: 17px; color: var(--mute); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(30px) scale(.96); filter: blur(10px); } }
@media (max-width: 560px) { .cf-row { grid-template-columns: minmax(0, 1fr); } .contact { padding: 24px; } }

/* boot intro: shown only when scripts run, wiped away once the page is ready */
.boot { display: none; position: fixed; inset: 0; z-index: 100; place-items: center; background: var(--bg); clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease), visibility 0s linear .9s; }
.js .boot { display: grid; }
.booted .boot { clip-path: inset(0 0 100% 0); visibility: hidden; }
.boot-in { display: flex; flex-direction: column; align-items: center; gap: 20px; color: var(--accent); }
.boot-in svg { filter: drop-shadow(0 0 18px var(--accent)); animation: breathe 1.2s ease-in-out infinite; }
.boot-in span { font: 600 26px var(--display); letter-spacing: .34em; margin-right: -.34em; color: var(--ink); }
.boot-in i { width: 190px; height: 2px; background: var(--line); }
.boot-in b { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: scaleX(0); transform-origin: left; animation: fill 1.2s var(--ease) forwards; }

/* stars behind everything, cursor ring and section index on top */
#stars { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cursor { position: fixed; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid var(--accent); border-radius: 50%; pointer-events: none; z-index: 90; mix-blend-mode: screen; transform: translate(var(--px, -99px), var(--py, -99px)) scale(var(--ps, 1)); transition: transform .16s ease-out, background .3s; }
.cursor.hot { --ps: 1.9; background: rgb(var(--accent-rgb) / .14); }
.hud { position: fixed; right: 16px; top: 50%; z-index: 40; display: none; flex-direction: column; transform: translateY(-50%); }
.hud a { height: 28px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font: 500 11px var(--mono); color: transparent; transition: color .3s; }
.hud i { width: 14px; height: 2px; background: #2A3757; transition: width .4s var(--ease), background .3s, box-shadow .3s; }
.hud a.on, .hud a:hover { color: var(--accent); }
.hud a.on i { width: 30px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@media (min-width: 1200px) { .hud { display: flex; } }
@media (hover: none) { .cursor { display: none; } }

/* titles rise word by word; a light line draws across the top of each section */
.title.reveal, .mega.reveal { opacity: 1; transform: none; filter: none; }
.tw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.tw > span { display: inline-block; transform: translateY(115%) rotate(7deg); transform-origin: left bottom; transition: transform .9s var(--ease) calc(var(--i) * 70ms); }
.in .tw > span { transform: none; }
main > section:not(.hero)::after { content: ""; position: absolute; top: 0; left: 50%; width: min(1100px, 86%); height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 18px rgb(var(--accent-rgb) / .5); transform: translateX(-50%) scaleX(0); transition: transform 1.4s var(--ease); }
main > section.seen::after { transform: translateX(-50%) scaleX(1); }

@keyframes intro { from { opacity: 0; transform: translateY(40px); filter: blur(12px); } }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes floor { to { background-position: 0 60px; } }
@keyframes sweep { 0% { transform: translateX(-200px); opacity: 0; } 2% { opacity: .9; } 12% { transform: translateX(110vw); opacity: .9; } 13%, 100% { transform: translateX(110vw); opacity: 0; } }
@keyframes fill { to { transform: scaleX(1); } }
@keyframes eq { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes pop { to { opacity: 1; transform: scale(1); } }
@keyframes scanY { from { transform: translateY(-120px); } to { transform: translateY(520px); } }
@keyframes shock { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes slideR { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: none; } }
@keyframes slideL { from { opacity: 0; transform: translateX(-90px); } to { opacity: 1; transform: none; } }
@keyframes barUp { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
@keyframes ringArc { 0%, 100% { stroke-dashoffset: 250; } 50% { stroke-dashoffset: 40; } }
@keyframes bellRing { 0%, 50%, 100% { transform: rotate(0); } 10% { transform: rotate(-16deg); } 20% { transform: rotate(14deg); } 30% { transform: rotate(-10deg); } 40% { transform: rotate(6deg); } }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
@keyframes typeW { 0% { transform: scaleX(0); } 25%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes mq { to { transform: translateX(-50%); } }
@keyframes wave { to { transform: translateX(-600px); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  section { padding: 96px var(--gut); }
  .nav-links, .nav .btn-line { display: none; }
  .lang { margin-left: auto; }
  #core { opacity: calc(.55 - var(--fly, 0) * .7); transform-origin: 50% 52%; }
  .scene-tag { display: none; }
  .steps-bar { gap: 10px; }
  .steps-bar li { font-size: 10px; letter-spacing: .08em; }
  .how { padding: 0; }
  .how-sticky { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px; padding-top: 96px; padding-bottom: 24px; align-items: start; }
  .how-steps { height: 190px; }
  .how-step p { font-size: 17px; }
  .how-right { height: 100%; min-height: 300px; }
  .roles { grid-template-columns: minmax(0, 1fr); }
  .p-side { display: none; }
  .p-charts { grid-template-columns: minmax(0, 1fr); }
  .p-body { min-height: 0; }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .lead { font-size: 18px; }
  .p-kpis small { font-size: 11px; }
  .p-kpis div { padding: 10px; }
}
@media (hover: none) { .glow { display: none; } }
/* set by app.js when the visitor's system asks for reduced motion */
.reduce *, .reduce *::before, .reduce *::after { animation: none !important; transition: none !important; }
.reduce .reveal, .reduce .bubble, .reduce .chip, .reduce .note { opacity: 1; transform: none; filter: none; }
.reduce .tw > span { transform: none; }
.reduce .boot, .reduce .cursor { display: none; }
html.reduce { scroll-behavior: auto; }

@media (max-width: 860px) {
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 0; }
  .num { padding: 4px 16px; }
  .num:nth-child(odd) { border-left: 0; padding-left: 0; }
  .why-list, .tech-grid, .people { grid-template-columns: minmax(0, 1fr); }
  .stack { height: 360px; }
  .plate { width: 210px; height: 210px; margin: -105px 0 0 -105px; }
  .about-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .about-cols div { margin-bottom: 40px; }
  .about-lead { margin-bottom: 60px; font-size: 18px; }
  .person { padding: 24px; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 16px; }
  .avatar { width: 72px; height: 72px; font-size: 22px; }
  .person h4 { font-size: 22px; }
}