/* Akshouini — the site. Same world as "The Third Eye": lapis night to paper day; vermilion is hers (intent), teal is the
   work. A book face, not a tech face. Matte: no glow, no gold on black. */
@font-face { font-family: 'EBG'; font-weight: 400; font-display: swap; src: url('../fonts/ebgaramond-regular.woff2') format('woff2'); }
@font-face { font-family: 'EBG'; font-weight: 500; font-display: swap; src: url('../fonts/ebgaramond-medium.woff2') format('woff2'); }
@font-face { font-family: 'EBG'; font-weight: 600 700; font-display: swap; src: url('../fonts/ebgaramond-semibold.woff2') format('woff2'); }
@font-face { font-family: 'EBG'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('../fonts/ebgaramond-italic.woff2') format('woff2'); }

:root {
  --serif: 'EBG', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --lapis: #0a1240; --lapis-lo: #040820; --lapis-ink: #101a52; --paper: #ebe8e2; --paper-hi: #fbfaf9;
  --verm: #e23b1a; --verm-hi: #ff6a3d; --verm-ink: #c4301a;
  --teal: #00a89c; --teal-hi: #6fe0d6; --teal-ink: #007d74;
  --fg: var(--teal-hi); --fg-soft: rgba(206, 240, 236, 0.82); --accent: var(--verm-hi);
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
section[id] { scroll-margin-top: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--lapis); color: var(--fg); font: 400 19px/1.55 var(--serif);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
i { font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ the field */
.ink { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; image-rendering: auto; }
.grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main, .foot { position: relative; z-index: 2; }
.no-gl .ink { display: none; }
.no-gl body, body.no-gl { background: radial-gradient(120% 80% at 50% 0%, #1a2266 0%, var(--lapis) 40%, var(--lapis-lo) 100%); }
.no-gl .day-sec { background: var(--paper); }

/* ------------------------------------------------------------ type */
.caps { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 0.98; margin: 0;
  text-shadow: 0 3px 40px rgba(4, 8, 30, 0.6); }
.caps.xxl { font-size: clamp(64px, 15vw, 250px); letter-spacing: 0.02em; }
.caps.xl { font-size: clamp(40px, 10.5vw, 190px); letter-spacing: 0.03em; }
.caps.lg { font-size: clamp(40px, 6.4vw, 108px); }
.caps.sm { font-size: clamp(22px, 2.6vw, 44px); letter-spacing: 0.08em; }
.caps.xs { font-size: 14px; letter-spacing: 0.32em; font-weight: 500; text-shadow: none; }
.caps .lc { text-transform: none; font-weight: 400; letter-spacing: 0; }
.caps.inline { font-size: 1em; display: inline; }
.line { font-weight: 500; font-size: clamp(30px, 4.4vw, 68px); line-height: 1.12; letter-spacing: -0.005em; margin: 0;
  text-shadow: 0 2px 30px rgba(4, 8, 30, 0.7); }
.line.xl { font-size: clamp(52px, 9vw, 150px); line-height: 1; }
.line.sm { font-size: clamp(22px, 2.5vw, 38px); }
.line i { font-weight: 400; }
.verm { color: var(--accent) !important; }
.kicker, .eyebrow { font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; margin: 0 0 22px; color: var(--fg-soft); }
.eyebrow { color: var(--teal-hi); }

/* day: lapis ink on paper, vermilion goes deep */
.day-sec { --fg: var(--lapis); --fg-soft: rgba(10, 18, 64, 0.74); --accent: var(--verm-ink); color: var(--fg); }
.day-sec .caps, .day-sec .line { text-shadow: 0 0 22px rgba(235, 232, 226, 0.9), 0 0 60px rgba(235, 232, 226, 0.6); }
.verm-ink { color: var(--verm-ink); }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 500 18px/1 var(--serif); letter-spacing: 0.06em; text-decoration: none;
  padding: 16px 26px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform 0.4s var(--ease), background 0.3s, color 0.3s, border-color 0.3s; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; }
.btn-verm { background: var(--verm); color: #fff7f2; }
.btn-verm:hover { background: var(--verm-ink); }
.btn-ghost { background: rgba(10, 18, 64, 0.35); color: var(--fg); border-color: rgba(111, 224, 214, 0.45); }
.btn-ghost:hover { border-color: var(--teal-hi); background: rgba(10, 18, 64, 0.55); }
.btn-ghost svg { width: 14px; height: 14px; fill: currentColor; }
.btn .dur { opacity: 0.6; font-size: 15px; }
.btn-sm { padding: 10px 18px; font-size: 15px; }
.btn-lg { padding: 20px 36px; font-size: 21px; }

/* ------------------------------------------------------------ nav */
.nav { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 28px;
  padding: 18px var(--gutter); padding-top: max(18px, env(safe-area-inset-top)); color: var(--teal-hi);
  transition: color 0.6s, background 0.6s, opacity 0.8s, transform 0.8s var(--ease); }
.nav.scrolled { background: linear-gradient(rgba(6, 10, 40, 0.7), rgba(6, 10, 40, 0)); }
html.is-day .nav { color: var(--lapis); }
html.is-day .nav.scrolled { background: linear-gradient(rgba(235, 232, 226, 0.85), rgba(235, 232, 226, 0)); }
.brand { display: flex; align-items: center; text-decoration: none; font: 600 22px/1 var(--serif); letter-spacing: 0.14em; text-transform: uppercase; }
.brand .mark { height: 22px; width: auto; margin: 0 4px 0 3px; fill: var(--verm); }
.links { display: flex; gap: 26px; margin-left: auto; }
.links a { text-decoration: none; font-size: 16px; letter-spacing: 0.06em; opacity: 0.85; position: relative; }
.links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.links a:hover::after { transform: scaleX(1); }
.nav .cta { background: var(--verm); color: #fff7f2; }
body.intro-playing .nav { opacity: 0; transform: translateY(-20px); pointer-events: none; }
@media (max-width: 860px) { .links { display: none; } .nav .cta { margin-left: auto; } }

/* ------------------------------------------------------------ back to top */
.to-top { position: fixed; z-index: 19; right: var(--gutter); bottom: max(24px, env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: var(--teal-hi); background: rgba(4, 8, 30, 0.55); border: 1px solid rgba(111, 224, 214, 0.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.4s, transform 0.5s var(--ease), color 0.6s, background 0.6s, border-color 0.6s; }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--teal-hi); transform: translateY(-3px); }
.to-top:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; }
html.is-day .to-top { color: var(--lapis); background: rgba(251, 250, 249, 0.8); border-color: rgba(10, 18, 64, 0.25); }
html.is-day .to-top:hover { border-color: var(--lapis); }
body.intro-playing .to-top { display: none; }

/* ------------------------------------------------------------ hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 120px var(--gutter) 90px; text-align: center; }
html:not(.js) .intro-film, html:not(.js) .skip { display: none; }
.intro-film { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 5; background: var(--lapis);
  transition: opacity 1.1s ease, filter 1.1s ease; }
@media (max-aspect-ratio: 1/1) { .intro-film { object-fit: contain; } }
body:not(.intro-playing) .intro-film { opacity: 0; filter: blur(12px); pointer-events: none; }
.skip { position: fixed; z-index: 6; right: var(--gutter); bottom: max(24px, env(safe-area-inset-bottom)); font: 500 15px var(--serif); letter-spacing: 0.12em;
  color: var(--teal-hi); background: rgba(4, 8, 30, 0.45); border: 1px solid rgba(111, 224, 214, 0.4); border-radius: 999px; padding: 10px 18px; cursor: pointer;
  transition: opacity 0.5s; }
body:not(.intro-playing) .skip { opacity: 0; pointer-events: none; }
.hero-copy { max-width: 1200px; }
body.intro-playing .hero-copy, body.intro-playing .scroll-cue { visibility: hidden; }
.h-hero { font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; line-height: 0.95; margin: 0 0 28px;
  font-size: clamp(32px, 10.2vw, 196px); text-shadow: 0 4px 50px rgba(4, 8, 30, 0.65); }
.h-hero .w { display: inline-block; }
.lede { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.4; max-width: 820px; margin: 0 auto 40px; color: #d9f5f1;
  text-shadow: 0 2px 24px rgba(4, 8, 30, 0.9); }
.actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.tags { display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; margin: 46px 0 0; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-soft); }
.tags span::before { content: ''; display: inline-block; width: 5px; height: 8px; margin: 0 10px 1px 0; border-radius: 50%; background: var(--verm); vertical-align: middle; }
.scroll-cue { position: absolute; bottom: 28px; left: 50%; width: 1px; height: 64px; background: rgba(111, 224, 214, 0.25); overflow: hidden; }
.scroll-cue span { position: absolute; left: 0; top: -30%; width: 1px; height: 30%; background: var(--teal-hi); animation: cue 2s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }

/* ------------------------------------------------------------ definition */
.define { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 18vh var(--gutter); text-align: center; }
.counts { display: grid; gap: 4px; }
.count { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: clamp(14px, 2vw, 28px); }
.count .num { font-weight: 600; font-size: clamp(54px, 8vw, 128px); line-height: 1.02; text-align: right; font-variant-numeric: tabular-nums lining-nums; text-shadow: 0 3px 40px rgba(4, 8, 30, 0.7); }
.count .label { text-align: left; text-transform: uppercase; letter-spacing: 0.32em; font-size: clamp(13px, 1.3vw, 20px); color: var(--fg-soft); }
.defn { margin-top: 8vh; }
.wordmark { letter-spacing: 0.06em; }
.defn .line { margin-top: 24px; }

/* ------------------------------------------------------------ how it works (plain flow) */
.how { padding: 18vh var(--gutter) 12vh; }
.how-body { position: relative; max-width: 1200px; margin: 0 auto; }
.how-rail { position: absolute; left: 0; top: 22vh; bottom: 0; width: 2px; background: rgba(111, 224, 214, 0.18); }
.how-rail i { position: absolute; inset: 0; background: var(--verm); transform-origin: top; transform: scaleY(0); }
.steps { list-style: none; margin: 8vh 0 0; padding: 0; display: grid; gap: clamp(28px, 6vh, 64px); }
.step { display: grid; grid-template-columns: clamp(110px, 16vw, 230px) minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 48px); padding-left: clamp(24px, 3vw, 56px); }
.step .n { font: 400 clamp(84px, 13vw, 200px)/0.8 var(--serif); color: transparent; -webkit-text-stroke: 1.5px rgba(111, 224, 214, 0.75); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.step .line { font-size: clamp(30px, 4.4vw, 76px); }
@media (max-width: 600px) { .step { grid-template-columns: 1fr; gap: 0; } .how-rail { top: 18vh; } }

/* ------------------------------------------------------------ domains */
.domains { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4vh; padding: 16vh var(--gutter); }
.dom { max-width: 1300px; line-height: 1.08; }
.dom span { display: inline-block; }
.dom-end { color: var(--verm-hi); }

/* ------------------------------------------------------------ all at once */
.once { display: flex; flex-direction: column; align-items: center; padding: 18vh var(--gutter) 12vh; gap: 28px; text-align: center; }
.once-words span { display: inline-block; }
.once .pane { width: min(1180px, 100%); margin-top: 6vh; }
.cap { color: var(--fg-soft); font-size: 17px; margin: 6px 0 0; }

/* ------------------------------------------------------------ product panes, pushed in on their ring */
.pane { position: relative; margin: 0; border-radius: clamp(10px, 1.4vw, 18px); overflow: hidden; background: var(--paper-hi);
  box-shadow: 0 40px 90px rgba(4, 8, 30, 0.42), 0 2px 8px rgba(4, 8, 30, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.5);
  transform: translateZ(0); }
.pane .inner { transform-origin: 0 0; will-change: transform; }
.pane img { width: 100%; height: auto; }
.pane .ring { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 10px; pointer-events: none; opacity: 0;
  outline: 3px solid var(--verm); outline-offset: 0; box-shadow: 0 0 0 9999px rgba(10, 18, 64, 0); }
.day-sec .pane { box-shadow: 0 30px 80px rgba(10, 18, 64, 0.22), 0 2px 8px rgba(10, 18, 64, 0.14), 0 0 0 1px rgba(10, 18, 64, 0.06); }

/* ------------------------------------------------------------ rigor */
.rigor { padding: 16vh var(--gutter) 12vh; display: grid; gap: clamp(64px, 12vh, 140px); }
.sec-head { text-align: center; max-width: 1200px; margin: 0 auto; }
.sec-head .sub { font-size: clamp(19px, 1.8vw, 26px); color: var(--fg-soft); max-width: 760px; margin: 26px auto 0; }
.feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 72px); align-items: center; max-width: 1440px; margin: 0 auto; width: 100%; }
.feat.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
.feat.flip .feat-copy { order: 2; }
.feat-copy .line { font-size: clamp(40px, 4.6vw, 80px); }
@media (max-width: 900px) {
  .feat, .feat.flip { grid-template-columns: 1fr; }
  .feat.flip .feat-copy { order: 0; }
}

/* ------------------------------------------------------------ night / dawn */
.night, .dawn { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; text-align: center; padding: 0 var(--gutter); }
.night .eyes, .dawn .bloom { position: absolute; left: 50%; top: 50%; width: max(100%, 160vh); height: auto; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); object-fit: cover; opacity: 0; }
.night .eyes { -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 40%, rgba(0,0,0,0.5) 70%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 46%, #000 40%, rgba(0,0,0,0.5) 70%, transparent 100%); }
.dawn .bloom { -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); }
.night-line { position: relative; align-self: end; margin-bottom: 18vh; }
.dawn-line, .dawn-sub { position: relative; }
.dawn { align-content: center; gap: 30px; }

/* ------------------------------------------------------------ helm */
.helm { padding: 16vh var(--gutter) 6vh; }
.helm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px); max-width: 1320px; margin: 8vh auto 0; }
.hp { margin: 0; }
.hp-main { grid-column: 1 / -1; }
.hp figcaption { margin-top: 18px; font-weight: 600; font-size: clamp(22px, 2vw, 30px); color: var(--lapis); text-align: center; }
@media (max-width: 760px) { .helm-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ deploy */
.deploy { padding: 16vh var(--gutter) 10vh; }
.topology { max-width: 1200px; margin: 9vh auto 7vh; }
.topo { width: 100%; height: auto; overflow: visible; }
.topo .wire { fill: none; stroke-width: 2.5; }
.topo .verm-wire { stroke: var(--verm-ink); }
.topo .teal-wire { stroke: var(--teal-ink); }
.topo.flow .wire { stroke-dasharray: 2 12; animation: flow 1.1s linear infinite; stroke-linecap: round; stroke-width: 3.5; }
.topo.flow .verm-wire { animation-duration: 1.6s; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.topo .node circle { fill: rgba(251, 250, 249, 0.94); stroke: var(--lapis); stroke-width: 1.5; }
.topo use { fill: none; stroke: var(--lapis); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.topo .f, .platforms .f { fill: currentColor; stroke: none; }
.topo .node text { font: 600 26px var(--serif); fill: var(--lapis); text-anchor: middle; letter-spacing: 0.06em; }
.topo .node .t2 { font: 400 17px var(--serif); fill: rgba(10, 18, 64, 0.6); letter-spacing: 0.24em; text-transform: uppercase; }
.topo .hub circle { fill: var(--lapis); stroke: none; }
.topo .hub use { stroke: var(--paper); color: var(--verm-hi); }
.topo .dev use { color: var(--lapis); }
.topo .army circle { fill: var(--teal-ink); }
.topo.flow .army circle { animation: work 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.topo.flow .army circle:nth-child(3n) { animation-delay: -0.8s; } .topo.flow .army circle:nth-child(3n+1) { animation-delay: -1.6s; }
.topo.flow .army circle:nth-child(7n) { animation-duration: 1.7s; }
@keyframes work { 50% { transform: scale(0.55); opacity: 0.55; } }
.topo .army-label { font: 600 22px var(--serif); fill: var(--teal-ink); text-anchor: middle; letter-spacing: 0.22em; text-transform: uppercase; }
.platforms { display: none; list-style: none; margin: 6vh 0 0; padding: 0; grid-template-columns: 1fr 1fr; gap: 14px; }
.platforms li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 10px; border-radius: 18px; background: rgba(251, 250, 249, 0.8); border: 1px solid rgba(10, 18, 64, 0.12); color: var(--lapis); font-size: 22px; font-weight: 600; }
.platforms .ico { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.platforms em { font-style: normal; font-weight: 400; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.6; margin-top: -6px; }
.platforms .hub-tile { background: var(--lapis); color: var(--paper); }
@media (max-width: 760px) { .topology { display: none; } .platforms { display: grid; } }

/* ------------------------------------------------------------ by invitation */
.enterprise { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7vh; padding: 16vh var(--gutter); text-align: center; }

/* ------------------------------------------------------------ finale */
.final { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12vh; text-align: center; padding: 20vh var(--gutter); }
.never { color: var(--lapis); letter-spacing: 0.06em; font-size: clamp(30px, 5.2vw, 92px); }
.never span { display: inline-block; }
.big-name { display: flex; align-items: center; justify-content: center; color: var(--lapis); font: 600 clamp(40px, 11vw, 210px)/1 var(--serif); text-transform: uppercase; letter-spacing: 0.06em; }
.big-name .mark { height: 0.78em; width: auto; margin: 0 0.06em 0 0.03em; overflow: visible; }
.big-name .mark path { fill: #d8361b; }
.tagline { color: var(--lapis); margin-top: -8vh; }

/* ------------------------------------------------------------ footer */
.foot { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: center; padding: 36px var(--gutter) max(36px, env(safe-area-inset-bottom)); font-size: 15px; color: rgba(10, 18, 64, 0.65); border-top: 1px solid rgba(10, 18, 64, 0.12); }
.foot p { margin: 0; }

/* ------------------------------------------------------------ film dialog: our own player, no browser chrome */
.film { width: min(1280px, 94vw); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.film::backdrop { background: rgba(4, 8, 30, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.film[open] { animation: film-in 0.6s var(--ease); }
@keyframes film-in { from { opacity: 0; transform: scale(0.96); } }
.player { position: relative; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); }
.player video { width: 100%; aspect-ratio: 16 / 9; background: #000; cursor: pointer; }
.player button { border: 0; background: none; color: #fff; cursor: pointer; padding: 0; display: grid; place-items: center; }
.player svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.player .pp svg, .player .f { fill: currentColor; stroke: none; }
.player .close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(4, 8, 30, 0.55); }
.player .bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px; padding: 28px 20px 16px;
  background: linear-gradient(transparent, rgba(4, 8, 30, 0.7)); opacity: 0; transition: opacity 0.4s; }
.player:hover .bar, .player.paused .bar, .player:focus-within .bar { opacity: 1; }
.player .track { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.25); border-radius: 2px; position: relative; cursor: pointer; }
.player .track::before { content: ''; position: absolute; inset: -10px 0; }
.player .track i { position: absolute; inset: 0; background: var(--verm); transform-origin: left; transform: scaleX(0); border-radius: 2px; }
.player .i-play, .player.paused .i-pause, .player .i-off, .player.muted .i-on { display: none; }
.player.paused .i-play, .player.muted .i-off { display: inline; }
@media (max-width: 600px) { .film { width: 100vw; } .player { border-radius: 0; } }

/* ------------------------------------------------------------ generic reveals (JS adds .in) */
.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.reveal-up.in { opacity: 1; transform: none; }
.reveal-up:nth-child(2) { transition-delay: 0.1s; } .reveal-up:nth-child(3) { transition-delay: 0.2s; }
.split .wd { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.04em 0.12em 0.28em 0.02em; margin: -0.04em -0.12em -0.28em -0.02em; }
.split .wd > span { display: inline-block; }

/* reduced motion / no JS: everything simply shows */
@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1; transform: none; }
  .scroll-cue span { animation: none; }
  .topo.flow .wire { animation: none; }
}

/* ============================================================ slides
   Every section is one screen and the browser snaps to it: native scrolling (wheel, trackpad, keys, touch, find-in-page
   all behave), one gesture = one slide via scroll-snap-stop. No scroll hijacking. Without snap support it is a normal page. */
html { scroll-snap-type: y mandatory; }
html.intro-lock { overflow: hidden; }
.slide { margin: 0; scroll-margin: 0; position: relative; height: 100vh; height: 100svh; min-height: 0; padding: 92px var(--gutter) 64px; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; text-align: center; gap: 0; }
/* very short screens (landscape phones): let content breathe instead of trapping it */
@media (max-height: 520px) { html { scroll-snap-type: none; } .slide { height: auto; min-height: 100vh; } }

/* type sized against the screen's height as well as its width, so every slide fits */
.caps.xxl { font-size: clamp(56px, min(13vw, 19vh), 240px); }
.caps.xl { font-size: clamp(40px, min(10.5vw, 17vh), 190px); }
.caps.lg { font-size: clamp(34px, min(6.2vw, 10.5vh), 104px); }
.line.xl { font-size: clamp(48px, min(9vw, 15vh), 150px); }
.h-hero { font-size: clamp(32px, min(10.2vw, 17vh), 196px); }

/* hero */
.hero { padding-top: 92px; }
.scroll-cue { bottom: 22px; }

/* the definition: counts, then the name */
.define-body { display: grid; gap: 3vh; justify-items: center; }
.count .num { font-size: clamp(44px, min(8vw, 12vh), 128px); }
.defn .yours { margin-top: 3vh; }

/* how it works: one figure acts out the four lines beside it */
.how-body { width: 100%; max-width: 1320px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 90px); align-items: center; text-align: left; }
.how .step { display: block; padding: 0; opacity: 1; position: static; }
.how-art { display: grid; place-items: center; }
.how-canvas { display: block; width: min(100%, 64vh); aspect-ratio: 1; }
.how-svg .pts rect { fill: var(--teal-hi); }
.how-ring { fill: none; stroke: var(--verm); stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.how-mark { fill: var(--verm); }
.how-head { margin-bottom: 6vh; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4vh; }
.step button { all: unset; cursor: pointer; position: relative; display: block; padding: 0.35em 0 0.35em 34px; font: 500 clamp(24px, min(2.8vw, 5vh), 46px)/1.15 var(--serif); color: #e4f7f4;
  text-shadow: 0 2px 24px rgba(4, 8, 30, 0.8); opacity: 0.38; transition: opacity 0.45s, transform 0.6s var(--ease); }
.step button i { font-weight: 400; }
.step button::before { content: ''; position: absolute; left: 4px; top: 50%; width: 12px; height: 19px; margin-top: -10px; background: var(--verm); transform: scale(0); transition: transform 0.45s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 150'%3E%3Cpath d='M48 4C86 36 92 104 48 146 4 104 10 36 48 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 150'%3E%3Cpath d='M48 4C86 36 92 104 48 146 4 104 10 36 48 4Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.step button:hover { opacity: 0.7; }
.step button:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 4px; border-radius: 4px; }
.step.on button { opacity: 1; transform: translateX(4px); }
.step.on button::before { transform: scale(1); }
@media (max-width: 900px) {
  .how-body { grid-template-columns: 1fr; gap: 2vh; text-align: center; }
  .how-canvas { width: min(80vw, 36vh); }
  .how-head { margin-bottom: 2.5vh; }
  .how-head .kicker { display: none; }
  .steps { justify-items: center; gap: 0.4vh; }
  .step button { padding-left: 0; padding-right: 0; font-size: clamp(20px, min(5.4vw, 3.4vh), 30px); }
  .step button::before { display: none; }
}

/* next slide */
.next { position: fixed; z-index: 19; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); width: 48px; height: 48px; margin-left: -24px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0; color: var(--teal-hi); background: rgba(4, 8, 30, 0.45); border: 1px solid rgba(111, 224, 214, 0.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity 0.4s, transform 0.5s var(--ease), color 0.6s, background 0.6s, border-color 0.6s; }
.next svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(4px); } }
.next:hover { border-color: var(--teal-hi); transform: translateY(2px); }
.next:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; }
.next.off { opacity: 0; pointer-events: none; }
html.is-day .next { color: var(--lapis); background: rgba(251, 250, 249, 0.8); border-color: rgba(10, 18, 64, 0.25); }
body.intro-playing .next { display: none; }
html:not(.js) .next { display: none; }
@media (prefers-reduced-motion: reduce) { .next svg { animation: none; } }

/* a line beside the screen that proves it */
.feat-slide .feat { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: center; width: 100%; max-width: 1440px; text-align: left; }
.feat-slide.flip .feat { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.feat-slide.flip .feat > :first-child { order: 2; }
.feat-slide .feat > .line { font-size: clamp(34px, min(4.4vw, 8vh), 80px); }
.feat-slide .pane { width: 100%; max-height: calc(100svh - 190px); }
.feat-slide .pane img { width: 100%; }
.once .once-sub { margin-top: 3vh; }
@media (max-width: 900px) {
  .feat-slide .feat, .feat-slide.flip .feat { grid-template-columns: 1fr; gap: 4vh; text-align: center; }
  .feat-slide.flip .feat > :first-child { order: 0; }
  .once .once-words { font-size: clamp(48px, min(16vw, 12vh), 120px); }
}

.incessant h2 { max-width: 1200px; }
.night .night-line { align-self: end; margin-bottom: 10vh; }
.dawn { align-content: center; }
.dawn-copy { position: relative; display: grid; gap: 3vh; }
.domains > div, .defn > div { display: grid; gap: 4vh; }

/* where it runs */
.deploy { align-content: center; gap: 4vh; }
.deploy .topology { width: 100%; max-width: min(1200px, calc((100svh - 300px) * 2.3)); margin: 0 auto; }
.deploy .platforms { margin: 0; width: 100%; max-width: 420px; }

/* contact + finale */
.enterprise > div { display: grid; justify-items: center; gap: 6vh; }
.final-body { display: grid; justify-items: center; gap: 7vh; }
.final .tagline { margin-top: -4vh; }
.enterprise .foot { position: absolute; left: 0; right: 0; bottom: 0; border-top: 0; padding: 18px var(--gutter) max(18px, env(safe-area-inset-bottom)); }

/* slide dots: where you are, and a way to jump */
.dots { position: fixed; z-index: 18; right: calc(var(--gutter) * 0.5); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.dots a { display: block; width: 18px; height: 18px; position: relative; }
.dots a::before { content: ''; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(111, 224, 214, 0.35); transition: transform 0.3s var(--ease), background 0.3s; }
.dots a:hover::before { background: var(--teal-hi); }
.dots a.on::before { background: var(--verm); transform: scale(1.6); }
html.is-day .dots a::before { background: rgba(10, 18, 64, 0.25); }
html.is-day .dots a:hover::before { background: var(--lapis); }
html.is-day .dots a.on::before { background: var(--verm-ink); }
body.intro-playing .dots { display: none; }
@media (max-width: 760px) { .dots { display: none; } }

@media (min-width: 761px) { .slide { padding-right: calc(var(--gutter) + 30px); } }

/* case study */
.case-body { display: grid; justify-items: center; gap: 4vh; }
.case-body .sec-head .kicker { margin-bottom: 2vh; }
.case-line { color: var(--lapis); }
.btn-ghost-day { color: var(--lapis); border-color: rgba(10, 18, 64, 0.35); background: rgba(251, 250, 249, 0.6); }
.btn-ghost-day:hover { border-color: var(--lapis); background: rgba(251, 250, 249, 0.9); }
.btn-ghost-day svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.case .seal { display: block; width: clamp(96px, 18vh, 180px); aspect-ratio: 1; border-radius: 50%; transition: transform 0.6s var(--ease); }
.case .seal img { width: 100%; height: 100%; display: block; }
.case .seal:hover { transform: rotate(-6deg) scale(1.04); }
.case .seal:focus-visible { outline: 2px solid var(--lapis); outline-offset: 6px; }

/* contact: the address, readable and copyable */
.contact-body { display: grid; justify-items: center; gap: 4vh; }
.contact-body .kicker { margin: 0; }
.email { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; }
.email .addr { font: 500 clamp(20px, min(3.4vw, 5vh), 46px)/1.2 var(--serif); color: var(--lapis); user-select: all; overflow-wrap: anywhere; }
.copy { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font: 500 15px/1 var(--serif); letter-spacing: 0.06em;
  color: var(--lapis); border: 1px solid rgba(10, 18, 64, 0.3); background: rgba(251, 250, 249, 0.6); transition: border-color 0.3s, background 0.3s, color 0.3s; }
.copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.copy:hover { border-color: var(--lapis); background: rgba(251, 250, 249, 0.95); }
.copy:focus-visible { outline: 2px solid var(--lapis); outline-offset: 3px; }
.copy.done { color: #fff; background: var(--teal-ink); border-color: var(--teal-ink); }
.foot { font-size: 12px; gap: 6px 18px; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 2px; }