/* Spontriva. Tokens and their roles: DESIGN.md */
@font-face { font-family: Archivo; src: url(/fonts/archivo.woff2) format('woff2'); font-weight: 400 700; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/fonts/jbmono.woff2) format('woff2'); font-weight: 400 500; font-display: swap; }

:root {
  --ink: #0B0F14; --ink-2: #131A22; --paper: #F3F5F6; --white: #fff;
  --steel: #56616D; --steel-d: #9AA6B2; --line: #D9DEE2; --line-d: #243040;
  --signal: #FF5B1F; --signal-ink: #B93D0B;
  --ok: #2F9E62; --warn: #E8A317; --err: #D23B2F;
  --sans: Archivo, ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: 1200px; --pad: clamp(20px, 4vw, 40px); --sec: clamp(72px, 10vw, 128px);
  --r: 4px; --r-l: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--sans); font-stretch: 100%; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--signal-ink); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--signal-ink); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible { outline-color: var(--signal); }
h1, h2, h3 { font-stretch: 118%; font-weight: 650; line-height: 1.05; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.375rem, 5.2vw, 4.25rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
.mono, .eyebrow, .cap, .tags, .specline { font-family: var(--mono); }
.wrap { max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--signal); color: var(--ink); padding: 10px 14px; font-weight: 600; }
.skip:focus { top: 8px; }

.dark { background: var(--ink); color: #E9EDF0; }
.dark a { color: #FFB394; }

.eyebrow { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); margin: 0 0 20px; display: flex; align-items: center; gap: 10px; }
.dark .eyebrow { color: var(--steel-d); }
.led { width: 8px; height: 8px; background: var(--signal); display: inline-block; animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; color: #C5CED6; max-width: 40em; }
.lead--dark { color: var(--steel); }
.cap { font-size: .8125rem; color: var(--steel); margin-top: 12px; }
.dark .cap { color: var(--steel-d); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: var(--r); font: 600 1rem/1 var(--sans); font-stretch: 110%; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.btn--signal { background: var(--signal); color: var(--ink) !important; }
.btn--signal:hover { background: #FF7A47; }
.btn--signal:active { transform: translateY(1px); }
.btn--ghost { border-color: #3A4757; color: #E9EDF0 !important; }
.btn--ghost:hover { border-color: #E9EDF0; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: .9375rem; }
.btn[disabled] { opacity: .6; cursor: progress; }
.quiet { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.quiet span { transition: transform .2s var(--ease); }
.quiet:hover span { transform: translateX(4px); }

/* Header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(11, 15, 20, .92); backdrop-filter: blur(8px); color: #E9EDF0; border-bottom: 1px solid var(--line-d); }
.top__in { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand { color: #E9EDF0; display: block; padding: 8px 0; }
.brand__mark { width: 150px; height: auto; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { color: #C5CED6; text-decoration: none; font-size: .9375rem; padding: 8px 0; }
.nav a:hover { color: #fff; }
.top__end { display: flex; align-items: center; gap: 16px; }
.lang { font-family: var(--mono); font-size: .875rem; color: #E9EDF0 !important; text-decoration: none; border: 1px solid #3A4757; border-radius: var(--r); padding: 8px 10px; min-width: 44px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.lang:hover { border-color: #E9EDF0; }
@media (max-width: 900px) { .nav { display: none; } .top__end { margin-left: auto; } .brand__mark { width: 128px; } }

/* Hero */
.hero { padding: clamp(48px, 7vw, 96px) 0 0; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 { margin-bottom: 24px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__reel { margin: 0; }
.reel { position: relative; border: 1px solid var(--line-d); border-radius: var(--r-l); overflow: hidden; background: #0B0F14; aspect-ratio: 16 / 10; }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel__toggle { position: absolute; right: 10px; bottom: 10px; font: 500 .75rem/1 var(--mono); color: #E9EDF0; background: rgba(11, 15, 20, .8); border: 1px solid #3A4757; border-radius: var(--r); padding: 8px 10px; min-height: 32px; cursor: pointer; }
.reel__toggle:hover { border-color: #E9EDF0; }
.specline { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 20px 0; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; gap: 12px 40px; font-size: .8125rem; color: var(--steel-d); text-transform: uppercase; letter-spacing: .06em; }
.specline li::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--signal); margin-right: 10px; vertical-align: 2px; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

/* Sections */
.sec { padding: var(--sec) 0; }
.sec--line { border-top: 1px solid var(--line); }
.sec__head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.sec__head h2 { margin-bottom: 20px; }

/* Spec rows (what we build) */
.spec { border-top: 1px solid var(--ink); }
.spec__row { display: grid; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr); gap: 24px 40px; padding: 40px 0; border-bottom: 1px solid var(--line); align-items: start; }
.spec__n { font: 500 .875rem/1 var(--mono); color: var(--signal-ink); padding-top: 6px; }
.spec__body h3 { margin-bottom: 14px; }
.spec__body p { color: #2A333D; max-width: 34em; }
.tags { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .75rem; }
.tags li { border: 1px solid var(--line); background: var(--white); padding: 4px 8px; border-radius: 3px; color: #2A333D; }
.spec__row > :nth-child(3) { justify-self: stretch; }
.spec__row > .quiet { justify-self: start; align-self: center; }
.shot { margin: 0; }
.shot img { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); }
.phones { display: flex; gap: 16px; justify-content: flex-start; }
.phones img { width: min(200px, 44%); border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.phones img:nth-child(2) { margin-top: 40px; }
.telemetry { background: var(--ink); color: #E9EDF0; border-radius: var(--r-l); padding: 18px 20px; font: .8125rem/1 var(--mono); }
.telemetry__row { display: grid; grid-template-columns: 64px 80px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-d); align-items: center; }
.t-warn { color: var(--warn); }
.st { justify-self: start; padding: 4px 8px; border-radius: 3px; font-size: .75rem; }
.st--ok { color: #7FE0A7; background: rgba(47, 158, 98, .16); }
.st--warn { color: #FFD27A; background: rgba(232, 163, 23, .16); }
.st--err { color: #FF9A90; background: rgba(210, 59, 47, .18); }
.telemetry__ota { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; padding-top: 16px; color: #C5CED6; }
.bar { height: 6px; background: var(--line-d); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 72%; background: var(--signal); transform-origin: left; }
.in .bar i { animation: fill 2.4s var(--ease) both; }
@keyframes fill { from { transform: scaleX(0); } }
@media (max-width: 900px) {
  .spec__row { grid-template-columns: 40px minmax(0, 1fr); }
  .spec__row > :nth-child(3) { grid-column: 1 / -1; }
}

/* Device (scroll-driven explode) */
.device { --p: 1; }
.device__stage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); gap: 40px; align-items: center; padding-top: var(--sec); padding-bottom: var(--sec); }
.device__head { align-self: center; }
.device__head h2 { margin-bottom: 20px; }
.fridge { width: 100%; max-height: 78vh; overflow: visible; }
.fridge .cab rect, .fridge .cab line { fill: none; stroke: #3A4757; stroke-width: 2; }
.fridge .cab__top, .fridge .cab__base { stroke-dasharray: 4 4; }
.fridge .mod { transform: translate(calc(var(--p) * var(--dx) * 1px), calc(var(--p) * var(--dy) * 1px)); }
.fridge .mod rect { fill: var(--ink-2); stroke: #E9EDF0; stroke-width: 2; }
.fridge .mod .chip { fill: #2A3644; stroke: none; }
.fridge .mod .hot { fill: var(--signal); stroke: none; }
.fridge .mod .ok { fill: var(--ok); }
.fridge .sig { stroke: #E9EDF0; stroke-width: 3; fill: none; stroke-linecap: round; }
.fridge .badge { font: 600 17px var(--mono); fill: var(--signal); opacity: var(--p); }
.mods { list-style: none; counter-reset: m; margin: 0; padding: 0; }
.mods li { counter-increment: m; display: grid; grid-template-columns: 32px 1fr; column-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line-d); font-size: .9375rem; }
.mods li::before { content: counter(m); grid-row: span 2; font: 600 .9375rem/1.4 var(--mono); color: var(--signal); }
.mods b { font-weight: 600; font-stretch: 110%; }
.mods span { color: var(--steel-d); }
@media (min-width: 1001px) {
  .device__track { height: 240vh; }
  .device__stage { position: sticky; top: 64px; min-height: calc(100vh - 64px); padding-top: 32px; padding-bottom: 32px; }
  .mods li { opacity: calc(.35 + var(--p) * .65); }
}
@media (max-width: 1000px) {
  .device__stage { grid-template-columns: 1fr; }
  .fridge { max-width: 520px; margin: 0 auto; }
}

/* Architecture */
.arch { margin: 0; }
.arch__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); padding: 24px; }
.arch svg { min-width: 900px; width: 100%; }
.arch text { font: 500 15px var(--sans); fill: var(--ink); }
.arch .col-h text { font: 500 12px var(--mono); letter-spacing: .08em; fill: var(--steel); }
.arch .sub { font: 400 12px var(--mono); fill: var(--steel); }
.arch .node rect { fill: var(--paper); stroke: #B9C2CA; stroke-width: 1.5; }
.arch .node--chip rect { fill: var(--ink); stroke: none; }
.arch .node--chip text { fill: #E9EDF0; font-family: var(--mono); }
.arch .node--chip .sub { fill: var(--steel-d); }
.arch .link rect { fill: none; stroke: var(--signal-ink); stroke-width: 1.5; stroke-dasharray: 6 5; }
.arch .link text { font: 500 13px var(--mono); fill: var(--signal-ink); }
.arch .core rect { fill: var(--ink); }
.arch .core .led { fill: var(--signal); }
.arch .core text { fill: #C5CED6; font-size: 15px; }
.arch .core .core__h { fill: #fff; font-weight: 650; font-size: 16px; }
.arch .core .sub { fill: var(--steel-d); }
.arch .flows path { fill: none; stroke: var(--signal-ink); stroke-width: 2; stroke-dasharray: 3 7; }
.in .flows path { animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }

/* Who */
.who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.who article { padding: 32px 32px 32px 0; border-bottom: 1px solid var(--line); }
.who article:nth-child(odd) { border-right: 1px solid var(--line); }
.who article:nth-child(even) { padding-left: 32px; }
.who h3 { margin-bottom: 12px; }
.who p { color: #2A333D; max-width: 30em; }
.who .get { font: 500 .8125rem var(--mono); color: var(--signal-ink); margin: 0; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 760px) {
  .who { grid-template-columns: 1fr; }
  .who article, .who article:nth-child(even) { padding: 28px 0; border-right: 0; }
}

/* Proof */
.proof { background: var(--white); padding: var(--sec) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.proof__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.proof__copy h2 { margin-bottom: 24px; }
.proof__copy p { color: #2A333D; }
.proof__shots { position: relative; }
.shot--phone { position: absolute; right: -12px; bottom: -48px; width: 26%; }
.shot--phone img { border-radius: 20px; border: 6px solid var(--ink); }
@media (max-width: 900px) { .proof__grid { grid-template-columns: 1fr; } .shot--phone { right: 0; bottom: -32px; width: 30%; } .proof__shots { margin-bottom: 32px; } }

/* Security sheet */
.sheet { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-d); }
.sheet > div { padding: 32px 28px 36px 0; border-bottom: 1px solid var(--line-d); }
.sheet > div:not(:nth-child(3n)) { border-right: 1px solid var(--line-d); }
.sheet > div:not(:nth-child(3n + 1)) { padding-left: 28px; }
.sheet dt { font: 600 1.125rem/1.3 var(--sans); font-stretch: 112%; margin-bottom: 10px; display: flex; gap: 10px; align-items: baseline; }
.sheet dt::before { content: ''; width: 8px; height: 8px; background: var(--signal); flex: none; transform: translateY(-2px); }
.sheet dd { margin: 0; color: var(--steel-d); }
@media (max-width: 900px) {
  .sheet { grid-template-columns: 1fr; }
  .sheet > div, .sheet > div:not(:nth-child(3n + 1)) { padding: 24px 0; border-right: 0 !important; }
}

/* Licensing */
.tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.tiers li { padding: 28px 24px 32px 0; display: grid; gap: 16px; align-content: start; border-bottom: 1px solid var(--line); }
.tiers li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.tiers__k { font: 500 .875rem/1 var(--mono); width: 32px; height: 32px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 6px; }
.tiers h3 { margin-bottom: 10px; }
.tiers p { color: #2A333D; font-size: 1rem; }
.note { margin-top: 28px; color: var(--steel); max-width: 44em; }
@media (max-width: 960px) {
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .tiers { grid-template-columns: 1fr; }
  .tiers li, .tiers li + li { padding: 24px 0; border-left: 0; }
}

/* Contact form */
.contact__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__head { position: sticky; top: 96px; }
.contact__head h2 { margin-bottom: 20px; }
.direct { color: var(--steel-d); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 20px; }
.f { display: grid; gap: 8px; margin: 0; min-width: 0; }
.f--full { grid-column: 1 / -1; }
fieldset.f { border: 0; padding: 0; }
.f label, .f legend { font-size: .9375rem; font-weight: 500; color: #E9EDF0; padding: 0; }
.f legend { margin-bottom: 10px; }
.req { color: var(--signal); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea {
  width: 100%; font: 400 1rem/1.4 var(--sans); color: #fff; background: var(--ink-2); border: 1px solid #3A4757; border-radius: var(--r); padding: 12px 14px; min-height: 48px; }
.form textarea { resize: vertical; min-height: 120px; }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9AA6B2 50%), linear-gradient(135deg, #9AA6B2 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.form ::placeholder { color: #808D99; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: #5A6878; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }
.form [aria-invalid=true] { border-color: #FF8A7E !important; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 400 !important; padding: 12px 14px; border: 1px solid #3A4757; border-radius: var(--r); background: var(--ink-2); min-height: 48px; }
.check:hover { border-color: #5A6878; }
.check input { accent-color: var(--signal); width: 20px; height: 20px; margin: 1px 0 0; flex: none; }
.check:has(input:checked) { border-color: var(--signal); }
.check--consent { border: 0; background: none; padding: 0; color: #C5CED6; }
.err { color: #FF9A90; font-size: .875rem; margin: 0; min-height: 0; }
.err:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.form__fine { margin: 0; color: var(--steel-d); font-size: .875rem; }
.status { grid-column: 1 / -1; }
.status:empty { display: none; }
.status > * { margin: 0 0 12px; }
.status__ok, .status__down, .status__err { padding: 16px 18px; border-radius: var(--r); border: 1px solid; }
.status__ok { border-color: var(--ok); background: rgba(47, 158, 98, .12); }
.status__down { border-color: var(--warn); background: rgba(232, 163, 23, .1); }
.status__err { border-color: #FF8A7E; background: rgba(210, 59, 47, .12); }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } .contact__head { position: static; } }
@media (max-width: 600px) { .form, .checks { grid-template-columns: 1fr; } }

/* Footer */
.foot { border-top: 1px solid var(--line-d); padding: 56px 0 24px; font-size: .9375rem; }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot__wm { width: 160px; color: #E9EDF0; margin-bottom: 16px; }
.foot p { margin: 0 0 8px; color: #C5CED6; }
.foot__base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-d); }
.foot__base p { color: var(--steel-d); font: .8125rem var(--mono); }
@media (max-width: 800px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__grid > :first-child { grid-column: 1 / -1; } }

/* Reveal on scroll (only when JS runs and motion is allowed) */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .shot--tilt { transform: perspective(1400px) rotateX(8deg) translateY(40px); transform-origin: 50% 100%; transition-duration: 1s; }
.js .shot--tilt.in { transform: perspective(1400px) rotateX(0) translateY(0); }
.js .shot--phone { transform: translateY(80px); transition-delay: .25s; }
.js .who article:nth-child(2), .js .sheet > div:nth-child(3n + 2), .js .tiers li:nth-child(2) { transition-delay: .08s; }
.js .sheet > div:nth-child(3n), .js .tiers li:nth-child(3) { transition-delay: .16s; }
.js .tiers li:nth-child(4) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js .shot--tilt, .js .shot--phone { opacity: 1; transform: none; }
  .device { --p: 1 !important; }
  .device__track { height: auto !important; }
  .device__stage { position: static !important; }
}