/* ==========================================================================
   ATRIA MOBILITY — EV CHARGING
   Design version 1: "LIVE CURRENT"
   Dark, cinematic, engineering-grade. Motion = electricity moving through the page.
   Pure CSS. No JavaScript anywhere in this build.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --red: #e31e24;
  --red-hot: #ff4b3e;
  --red-deep: #8d1015;
  --navy: #26313d;
  --ink: #06080b;
  --ink-2: #0b1017;
  --ink-3: #111823;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .18);
  --text: #f3f5f8;
  --muted: #8e99a7;
  --glass: rgba(255, 255, 255, .04);

  --grad-red: linear-gradient(135deg, var(--red-hot) 0%, var(--red) 48%, var(--red-deep) 100%);
  --grad-fade: linear-gradient(180deg, transparent, rgba(6, 8, 11, .96));

  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 10px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-snap: cubic-bezier(.16, 1, .3, 1);
  --maxw: 1280px;
  /* brand face first: drop a licensed Metropolis webfont in and it takes over */
  --display: 'Metropolis', 'Satoshi', 'General Sans', sans-serif;

  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
  --glow-red: 0 0 0 1px rgba(227, 30, 36, .35), 0 18px 60px -18px rgba(227, 30, 36, .55);
}

@property --n {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

@property --sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* `clip`, never `hidden`: `hidden` would turn this into a scroll
     container and every scroll-driven timeline below would go inert */
  overflow-x: clip;
}

body {
  font-family: 'General Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--ink);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--red);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--red-hot);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--red);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
}

.skip:focus {
  left: 0;
}

/* ---------- type scale ---------- */
.display,
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2.7rem, 6.4vw, 5.4rem);
}

h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
}

h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.15;
}

.upright {
  font-style: normal;
}

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--red);
  flex: none;
}

.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  color: var(--muted);
  max-width: 62ch;
}

.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hl {
  color: var(--red-hot);
}

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

section {
  position: relative;
}

.pad {
  padding-block: clamp(72px, 11vh, 130px);
}

.sec-head {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  margin-bottom: clamp(38px, 6vw, 64px);
}

@media (max-width:860px) {
  .sec-head {
    grid-template-columns: 1fr;
  }
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* ---------- atmosphere ---------- */
.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 10%, transparent 72%);
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  background: radial-gradient(circle, rgba(227, 30, 36, .5), rgba(227, 30, 36, .12) 45%, transparent 70%);
  animation: breathe 7s var(--ease) infinite;
}

@keyframes breathe {

  0%,
  100% {
    transform: scale(1);
    opacity: .55;
  }

  50% {
    transform: scale(1.14);
    opacity: .95;
  }
}

/* ---------- scroll progress (scroll-driven, no JS) ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  transform-origin: 0 50%;
  background: var(--grad-red);
  transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
  .progress {
    animation: bar linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes bar {
  to {
    transform: scaleX(1);
  }
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 8, 11, .72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}

/* The supplied Atria Mobility lockup is used as-is — nothing about the mark or
   the wordmark is redrawn here, only scaled. Height-driven so any aspect ratio
   of the official file sits correctly. */
.logo img {
  height: 52px;
  width: auto;
  max-width: 210px;
  transition: transform .5s var(--ease-snap);
}

.logo:hover img {
  transform: translateX(4px);
}

@media (max-width:620px) {
  .logo img {
    height: 42px;
  }
}

.nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.nav-links a {
  position: relative;
  padding: 9px 14px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
  border-radius: 8px;
  transition: color .3s, background .3s;
}

.nav-links a:hover,
.nav-links a[aria-current] {
  color: var(--text);
  background: var(--glass);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s var(--ease-snap);
}

.nav-links a:hover::after,
.nav-links a[aria-current]::after {
  transform: scaleX(1);
}

@media (max-width:1080px) {
  .nav {
    height: auto;
    padding-block: 14px;
    gap: 16px;
  }

  .nav-links {
    display: none;
  }

  /* links collapse into one horizontally scrollable rail — no JS menu needed */
  .nav-links.compact {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 0;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }

  .nav-links.compact::-webkit-scrollbar {
    display: none;
  }

  .nav-links a {
    white-space: nowrap;
    padding-inline: 11px;
  }

  .site-header .btn {
    --pad: 11px 18px;
    flex: none;
    font-size: .86rem;
  }
}

@media (max-width:620px) {
  .nav-links.compact {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
  }

  .site-header .btn .btn-label {
    display: none;
  }

  .site-header .btn {
    --pad: 11px 14px;
  }
}

/* ---------- buttons ---------- */
.btn {
  --pad: 15px 26px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--pad);
  border: 0;
  border-radius: 100px;
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease-snap), box-shadow .35s var(--ease);
}

.btn-primary {
  background: var(--grad-red);
  color: #fff;
  box-shadow: var(--glow-red);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-120%);
}

.btn-primary:hover::before {
  animation: sheen .8s var(--ease) forwards;
}

@keyframes sheen {
  to {
    transform: translateX(120%);
  }
}

.btn-ghost {
  background: var(--glass);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.btn-ghost:hover {
  box-shadow: inset 0 0 0 1px var(--red);
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(0) scale(.98);
}

.btn .arrow {
  transition: transform .35s var(--ease-snap);
}

.btn:hover .arrow {
  transform: translateX(5px);
}

/* plug icon inside CTA "clicks" home on hover */
.btn:hover .plug-tip {
  animation: plugIn .5s var(--ease-snap);
}

@keyframes plugIn {
  40% {
    transform: translateX(-4px);
  }

  100% {
    transform: translateX(0);
  }
}

/* ---------- scroll reveal (view() timeline, graceful fallback) ---------- */
.r {
  opacity: 1;
}

@supports (animation-timeline: view()) {
  .r {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 4% entry 72%;
  }

  .r-x {
    animation-name: slideX;
  }

  .r-scale {
    animation-name: popIn;
  }

  .r-blur {
    animation-name: unblur;
  }

  /* stagger inside a group without extra markup */
  .stagger>*:nth-child(1) {
    animation-range: entry 4% entry 70%;
  }

  .stagger>*:nth-child(2) {
    animation-range: entry 12% entry 78%;
  }

  .stagger>*:nth-child(3) {
    animation-range: entry 20% entry 86%;
  }

  .stagger>*:nth-child(4) {
    animation-range: entry 28% entry 94%;
  }

  .stagger>*:nth-child(5) {
    animation-range: entry 36% entry 100%;
  }

  .stagger>*:nth-child(6) {
    animation-range: entry 44% entry 100%;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(38px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideX {
  from {
    opacity: 0;
    transform: translateX(-46px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(.9);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes unblur {
  from {
    opacity: 0;
    filter: blur(14px);
  }

  to {
    opacity: 1;
    filter: none;
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: grid;
  align-items: center;
  padding-block: 60px 40px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(227, 30, 36, .2), transparent 55%),
    radial-gradient(90% 70% at 12% 88%, rgba(38, 49, 61, .8), transparent 60%),
    var(--ink);
}

.hero .glow {
  width: 620px;
  height: 620px;
  right: -160px;
  top: -140px;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (max-width:1000px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  border-radius: 100px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 26px;
}

.dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4b3e;
  box-shadow: 0 0 0 0 rgba(227, 30, 36, .7);
  animation: ping 1.9s ease-out infinite;
}

@keyframes ping {
  70% {
    box-shadow: 0 0 0 11px rgba(227, 30, 36, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(227, 30, 36, 0);
  }
}

h1 .line {
  display: block;
  overflow: hidden;
}

h1 .line>span {
  display: block;
  animation: maskUp 1s var(--ease-snap) both;
}

h1 .line:nth-child(2)>span {
  animation-delay: .12s;
}

h1 .line:nth-child(3)>span {
  animation-delay: .24s;
}

@keyframes maskUp {
  from {
    transform: translateY(105%);
  }

  to {
    transform: translateY(0);
  }
}

/* the word that carries the charge: always red and legible, with a live
   current sweeping across it so the headline never reads as flat type */
.charged {
  position: relative;
  display: inline-block;
  /* inline-block keeps the ::after copy pinned to the exact glyph box */
  color: var(--red);
  text-shadow: 0 0 46px rgba(227, 30, 36, .45);
}

/* the live current that sweeps across the word — layered ON TOP of solid red
   so the headline stays readable even where background-clip:text is missing */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .charged::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    text-shadow: none;
    /* the copy must not repaint the glow — it doubles into a smudge */
    background: linear-gradient(100deg,
        transparent 0 40%,
        rgba(255, 255, 255, .75) 48%,
        #fff 51%,
        rgba(255, 255, 255, .75) 54%,
        transparent 62% 100%) 0 0 / 320% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: currentSweep 4.6s 1.1s var(--ease) infinite;
  }
}

@keyframes currentSweep {

  0%,
  62% {
    background-position: 320% 0;
  }

  100% {
    background-position: -60% 0;
  }
}

.hero-sub {
  margin: 24px 0 32px;
  animation: rise .9s .5s var(--ease) both;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  animation: rise .9s .66s var(--ease) both;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  animation: rise .9s .8s var(--ease) both;
}

.hero-meta div strong {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.7rem;
  display: block;
  line-height: 1;
}

.hero-meta div span {
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- hero motion graphic: charger, cable, car ---------- */
.stage {
  position: relative;
  aspect-ratio: 1130/400;
  /* let the scene bleed off the right edge — the charger anchors the corner */
  width: calc(100% + clamp(0px, 3.5vw, 70px));
}

@media (max-width:1000px) {
  .stage {
    width: 100%;
  }
}

.stage svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.v1-num {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  fill: #fff;
}

/* the car arrives once, settles, and then stays still — no bobbing */
.car-in {
  animation: carArrive 1.5s .25s var(--ease-snap) both;
}

@keyframes carArrive {
  from {
    opacity: 0;
    transform: translateX(54px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* showroom light travelling across the paintwork */
.sheen {
  animation: sheenSweep 7s 1.4s var(--ease) infinite;
}

@keyframes sheenSweep {
  0% {
    transform: translateX(-58%);
  }

  46%,
  100% {
    transform: translateX(58%);
  }
}

/* cable is drawn once on load, then current runs through it forever */
.cable-draw {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: draw 1.5s .15s var(--ease) forwards;
}

/* a charge bead rides the exact cable curve into the port */
.bead {
  opacity: 0;
}

@supports (offset-path: path("M0 0")) {
  .bead {
    offset-path: path("M1020 300 C1002 344 990 400 962 404 C940 407 930 394 922 384");
    offset-rotate: 0deg;
    animation: bead 1.9s 1.5s linear infinite;
  }
}

@keyframes bead {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

/* battery cells and LED strips */
.cell {
  transform-box: fill-box;
  transform-origin: left center;
  animation: cellFill 5s var(--ease) infinite;
}

.cell:nth-of-type(2) {
  animation-delay: .16s;
}

.cell:nth-of-type(3) {
  animation-delay: .32s;
}

.cell:nth-of-type(4) {
  animation-delay: .48s;
}

.cell:nth-of-type(5) {
  animation-delay: .64s;
}

.cell:nth-of-type(6) {
  animation-delay: .8s;
}

.cell:nth-of-type(7) {
  animation-delay: .96s;
}

.cell:nth-of-type(8) {
  animation-delay: 1.12s;
}

@keyframes cellFill {

  0%,
  5% {
    transform: scaleX(.04);
    opacity: .25;
  }

  62%,
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.led {
  animation: ledBreathe 3.6s ease-in-out infinite;
}

@keyframes ledBreathe {

  0%,
  100% {
    opacity: .55;
  }

  50% {
    opacity: 1;
  }
}

/* ---------- connector seating sequence (journey page) ---------- */
.plug-in {
  animation: plugSeat 5.4s var(--ease-snap) infinite;
}

@keyframes plugSeat {

  0%,
  4% {
    transform: translateY(126px);
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  26% {
    transform: translateY(7px);
  }

  31% {
    transform: translateY(0);
  }

  84% {
    transform: translateY(0);
    opacity: 1;
  }

  95%,
  100% {
    transform: translateY(126px);
    opacity: 0;
  }
}

/* the latch snaps shut a beat after the plug lands */
.latch {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: latchSnap 5.4s var(--ease-snap) infinite;
}

@keyframes latchSnap {

  0%,
  30% {
    transform: rotate(-26deg);
  }

  36%,
  86% {
    transform: rotate(0deg);
  }

  92%,
  100% {
    transform: rotate(-26deg);
  }
}

/* DC contacts only light up once the handshake is done */
.pins-live {
  animation: pinsLive 5.4s linear infinite;
}

@keyframes pinsLive {

  0%,
  36% {
    opacity: 0;
  }

  44%,
  86% {
    opacity: 1;
  }

  90%,
  100% {
    opacity: 0;
  }
}

.glint {
  animation: glintPass 6s ease-in-out infinite;
}

@keyframes glintPass {

  0%,
  70%,
  100% {
    opacity: 0;
  }

  82% {
    opacity: .55;
  }
}

/* ---------- telemetry chips over the stage ---------- */
.hud {
  position: absolute;
  display: grid;
  gap: 3px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(11, 16, 23, .72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 22px 50px -24px rgba(0, 0, 0, .9);
  animation: rise .9s var(--ease) both;
}

.hud-a {
  left: 1%;
  top: -6%;
  animation-delay: 1.1s;
}

.hud-b {
  right: 26%;
  bottom: -12%;
  animation-delay: 1.35s;
}

.hud-k {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.hud-v {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: -.02em;
  line-height: 1;
}

.hud-v .roll {
  font-size: 1em;
}

.hud-u {
  margin-left: 6px;
  font-style: normal;
  font-weight: 700;
  font-size: .62em;
  letter-spacing: .04em;
  color: var(--muted);
  padding-bottom: .1em;
}

.hud-dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4b3e;
  box-shadow: 0 0 0 0 rgba(227, 30, 36, .7);
  animation: ping 1.9s ease-out infinite;
}

.hud-bar {
  width: 100%;
  height: 4px;
  margin-top: 5px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}

.hud-bar i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--grad-red);
  transform-origin: left;
  animation: cellFill 5s var(--ease) infinite;
}

@media (max-width:1000px) {
  .hud-a {
    right: 2%;
    top: 2%;
  }

  .hud-b {
    left: 2%;
    bottom: 0;
  }
}

@media (max-width:560px) {
  .hud {
    padding: 10px 13px;
  }

  .hud-v {
    font-size: 1.05rem;
  }
}

/* current racing down the cable */
.flow {
  stroke-dasharray: 16 26;
  animation: flow 1.1s linear infinite;
}

@keyframes flow {
  to {
    stroke-dashoffset: -42;
  }
}

.flow-slow {
  stroke-dasharray: 8 34;
  animation: flow 2.4s linear infinite reverse;
}

/* cable draws itself once on load */
.draw {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw 2.2s .4s var(--ease) forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: spark 2.6s var(--ease) infinite;
}

@keyframes spark {

  0%,
  62%,
  100% {
    opacity: 0;
    transform: scale(.4);
  }

  68% {
    opacity: 1;
    transform: scale(1.5);
  }

  74% {
    opacity: .3;
    transform: scale(.9);
  }

  80% {
    opacity: .9;
    transform: scale(1.25);
  }
}

.ring-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: ringOut 3s ease-out infinite;
}

.ring-pulse:nth-of-type(2) {
  animation-delay: 1s;
}

.ring-pulse:nth-of-type(3) {
  animation-delay: 2s;
}

@keyframes ringOut {
  from {
    transform: scale(.35);
    opacity: .8;
  }

  to {
    transform: scale(1.6);
    opacity: 0;
  }
}

.batt-fill {
  transform-box: fill-box;
  transform-origin: left center;
  animation: charge 4.5s var(--ease) infinite;
}

@keyframes charge {

  0%,
  8% {
    transform: scaleX(.06);
  }

  70%,
  100% {
    transform: scaleX(1);
  }
}

.hover-car {
  animation: hover 5s ease-in-out infinite;
}

@keyframes hover {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

.wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 2.4s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.pct-text {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  fill: #fff;
}

/* =========================================================
   TICKER
   ========================================================= */
.ticker {
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, var(--ink-2), var(--ink-3), var(--ink-2));
  overflow: hidden;
  padding-block: 15px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

.ticker-track span {
  font-family: var(--display);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 44px;
  white-space: nowrap;
}

.ticker-track span::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--red);
  transform: rotate(45deg);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
   STATS
   ========================================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

@media (max-width:820px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat {
  background: var(--ink-2);
  padding: 34px 26px;
  position: relative;
  transition: background .4s var(--ease);
}

.stat:hover {
  background: var(--ink-3);
}

/* Accent bar, flat at rest, wipes in from the left on hover.
   This replaced a conic-gradient beam that was meant to lap each tile's
   perimeter. Conic gradients map angle to position around a centre, so on
   a tile this wide a couple of degrees either side of 180deg covers the
   whole bottom edge: the beam never travelled, it smeared along the bottom
   as a soft red band and crawled through the corners. All four tiles shared
   one un-staggered animation, so all four smeared in unison and read as a
   broken red underline. A linear wipe is honest about the geometry, and it
   drops four infinitely repainting conic gradients from the home page. */
.stat::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), #ffb3ad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
  pointer-events: none;
}

.stat:hover::after {
  transform: scaleX(1);
}

.stat b {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -.03em;
}

.stat small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ---------- rolling digits ----------
   Each digit is a 1em window over a 0–9 strip. The final position is applied
   as a plain static transform, so the number is always correct even with no
   animation support; scroll-driven engines additionally roll it into place. */
.roll {
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
}

/* The box is exactly one digit advance wide (1ch, so it tracks whatever
   font actually loads) and the roll window still clips on the Y axis.
   The padding/negative-margin pair widens the CLIP box to the right without
   widening the LAYOUT box: a 900-weight italic leans its ink well past the
   advance width -- more so in the fallback stack, where the oblique is
   synthesised -- and a flat .62em box with overflow:hidden shaved the
   right-hand side off every digit. overflow stays `hidden` because an
   inline-block with a non-visible overflow takes its baseline from the
   bottom margin edge; with `visible` the baseline would jump to the last
   line of the 0-9 strip and the digits would fly off the tile. */
.roll i,
.stat b .unit {
  display: inline-block;
  box-sizing: content-box;
  height: 1.14em;
  line-height: 1.14;
  padding-right: .34em;
  margin-right: -.34em;
  overflow: hidden;
  font-style: italic;
}

.roll i {
  position: relative;
  width: 1ch;
  font-variant-numeric: tabular-nums;
}

/* The suffix shares the digit window's metric box on purpose. An
   inline-block with a non-visible overflow takes its baseline from the
   bottom margin edge, so the digits sat ~.28em above the real text
   baseline while a bare <span> for +, % or M sat on it -- which is why
   every unit hung below its number. Same box, same baseline rule. */
.stat b .unit {
  width: auto;
}

/* 1.14em line boxes give italic ascenders headroom, and because the
   step equals the window height exactly, neighbouring digits never bleed in */
.roll i::before {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
  white-space: pre;
  position: absolute;
  inset: 0;
  line-height: 1.14;
  transform: translateY(calc(var(--d) * -1.14em));
}

@supports (animation-timeline: view()) {
  .roll i::before {
    animation: rollDigit 1.5s var(--ease) both;
    animation-timeline: view();
    animation-range: entry 10% entry 86%;
  }

  .roll i:nth-child(2)::before {
    animation-duration: 1.75s;
  }

  .roll i:nth-child(3)::before {
    animation-duration: 2s;
  }
}

@keyframes rollDigit {
  from {
    transform: translateY(0);
    filter: blur(3px);
  }

  70% {
    filter: blur(1px);
  }

  to {
    transform: translateY(calc(var(--d) * -1.14em));
    filter: blur(0);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   FEATURE CARDS
   ========================================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  padding: 30px 26px 34px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease-snap), box-shadow .5s var(--ease);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: inset 0 0 0 1px rgba(227, 30, 36, .5), 0 26px 60px -26px rgba(227, 30, 36, .4);
}

/* a current sweeps the top edge on hover */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red-hot), transparent);
  opacity: 0;
}

.card:hover::before {
  opacity: 1;
  animation: edge 1.1s linear infinite;
}

@keyframes edge {
  to {
    left: 100%;
  }
}

.card-ico {
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(227, 30, 36, .1);
  box-shadow: inset 0 0 0 1px rgba(227, 30, 36, .28);
  color: var(--red-hot);
}

.card:hover .card-ico svg .anim {
  animation-play-state: running;
}

.card p {
  color: var(--muted);
  font-size: .96rem;
  margin-top: 12px;
}

.card-no {
  position: absolute;
  right: 20px;
  top: 18px;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: 2.6rem;
  color: rgba(255, 255, 255, .05);
  letter-spacing: -.04em;
}

/* =========================================================
   CHARGER TYPES — conic sweep meters
   ========================================================= */
.types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.type {
  position: relative;
  padding: 34px;
  border-radius: var(--r-lg);
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid;
  gap: 22px;
  grid-template-columns: 132px 1fr;
  align-items: center;
}

@media (max-width:560px) {
  .type {
    grid-template-columns: 1fr;
  }
}

.meter {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(var(--red) var(--sweep), rgba(255, 255, 255, .07) 0);
  animation: sweepTo 2s var(--ease) both;
}

@supports (animation-timeline: view()) {
  .meter {
    animation-timeline: view();
    animation-range: entry 8% entry 82%;
  }
}

@keyframes sweepTo {
  from {
    --sweep: 0deg;
  }

  to {
    --sweep: var(--deg);
  }
}

.meter::before {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--ink-2);
}

.meter b {
  position: relative;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
}

.meter b em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--muted);
  margin-top: 4px;
}

.type ul {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.type li {
  position: relative;
  padding-left: 22px;
  font-size: .93rem;
  color: var(--muted);
}

.type li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 38%, 62% 38%, 100% 100%, 0 62%, 38% 62%, 0 24%);
}

/* =========================================================
   HOW IT WORKS — cable rail that fills on scroll
   ========================================================= */
.steps {
  position: relative;
  display: grid;
  gap: 26px;
}

.rail {
  position: absolute;
  left: 27px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line);
  overflow: hidden;
}

.rail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--red-hot), var(--red), var(--red-deep));
  transform-origin: 50% 0;
  transform: scaleY(1);
}

@supports (animation-timeline: view()) {
  .rail::after {
    animation: railFill linear both;
    animation-timeline: view();
    animation-range: cover 12% cover 78%;
  }
}

@keyframes railFill {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  align-items: start;
  padding: 18px 22px 18px 0;
}

.step-no {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  transition: box-shadow .5s, color .5s, background .5s;
}

.step:hover .step-no {
  background: var(--grad-red);
  box-shadow: var(--glow-red);
  color: #fff;
}

.step p {
  color: var(--muted);
  margin-top: 8px;
  max-width: 66ch;
}

/* =========================================================
   APP SECTION — CSS-only tabs via radios
   ========================================================= */
.app {
  background:
    radial-gradient(80% 60% at 85% 20%, rgba(227, 30, 36, .16), transparent 60%),
    var(--ink-2);
  border-block: 1px solid var(--line);
}

.app-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 6vw, 70px);
  align-items: center;
}

@media (max-width:960px) {
  .app-grid {
    grid-template-columns: 1fr;
  }
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 26px 0 30px;
}

.tabs label {
  padding: 10px 18px;
  border-radius: 100px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: all .35s var(--ease);
}

.tabs label:hover {
  color: var(--text);
}

.tabsw input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#t1:checked~.app-grid .tabs label[for="t1"],
#t2:checked~.app-grid .tabs label[for="t2"],
#t3:checked~.app-grid .tabs label[for="t3"] {
  background: var(--grad-red);
  color: #fff;
  box-shadow: var(--glow-red);
}

.screens {
  position: relative;
  display: grid;
  place-items: center;
}

.screen {
  grid-area: 1/1;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .55s var(--ease), transform .55s var(--ease-snap);
  pointer-events: none;
}

#t1:checked~.app-grid .screen-1,
#t2:checked~.app-grid .screen-2,
#t3:checked~.app-grid .screen-3 {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* phone shell */
.phone {
  position: relative;
  width: min(300px, 74vw);
  border-radius: 42px;
  padding: 11px;
  background: linear-gradient(160deg, #2a333e, #0d1218 55%);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.phone::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 20px;
  translate: -50% 0;
  width: 78px;
  height: 20px;
  border-radius: 100px;
  background: #05070a;
  z-index: 3;
}

/* The screen carries the ratio, not the frame: the 11px bezel means a
   ratio on .phone would leave the inner box ~4% narrower than a real
   599x1298 capture, and object-fit:cover would crop the bottom button
   off every screenshot. Sizing the screen and letting the frame wrap it
   keeps captures uncropped. */
.phone-screen {
  position: relative;
  aspect-ratio: 599/1298;
  border-radius: 32px;
  overflow: hidden;
  background: #080c12;
  display: flex;
  flex-direction: column;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ps-head {
  padding: 44px 18px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ps-head b {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: .95rem;
}

.ps-body {
  flex: 1;
  padding: 0 14px 16px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.ps-card {
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-size: .74rem;
  color: var(--muted);
}

.ps-card strong {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--text);
  letter-spacing: -.02em;
}

.ps-bar {
  height: 7px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
  margin-top: 10px;
}

.ps-bar i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--grad-red);
  transform-origin: left;
  animation: charge 5s var(--ease) infinite;
}

.ps-photo {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.ps-row {
  display: flex;
  gap: 8px;
}

.ps-chip {
  flex: 1;
  text-align: center;
  padding: 9px 4px;
  border-radius: 11px;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, .045);
}

.ps-chip.on {
  color: #fff;
  background: rgba(227, 30, 36, .85);
}

.ps-nav {
  display: flex;
  justify-content: space-around;
  padding: 12px 8px 18px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.ps-nav i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .12);
}

.ps-nav i:first-child {
  background: var(--red);
}

.store-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.store {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform .4s var(--ease-snap), box-shadow .4s;
}

.store:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--red);
}

.store span {
  line-height: 1.1;
  font-size: .93rem;
  font-weight: 600;
}

.store span small {
  display: block;
  font-size: .66rem;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* =========================================================
   COVERAGE MAP — pinging nodes
   ========================================================= */
.map-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  aspect-ratio: 16/10;
}

.map-wrap svg {
  width: 100%;
  height: 100%;
}

.pin circle.core {
  fill: var(--red);
}

.pin circle.halo {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: haloOut 2.8s ease-out infinite;
}

@keyframes haloOut {
  from {
    transform: scale(.4);
    opacity: .9;
  }

  to {
    transform: scale(3.4);
    opacity: 0;
  }
}

.pin:nth-of-type(2) circle.halo {
  animation-delay: .4s;
}

.pin:nth-of-type(3) circle.halo {
  animation-delay: .8s;
}

.pin:nth-of-type(4) circle.halo {
  animation-delay: 1.2s;
}

.pin:nth-of-type(5) circle.halo {
  animation-delay: 1.6s;
}

.pin:nth-of-type(6) circle.halo {
  animation-delay: 2s;
}

.pin text {
  font-family: 'General Sans', sans-serif;
  font-size: 9px;
  fill: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.route {
  fill: none;
  stroke: rgba(227, 30, 36, .55);
  stroke-width: 1.2;
  stroke-dasharray: 5 9;
  animation: flow 3.4s linear infinite;
}

/* =========================================================
   FLEET BAND
   ========================================================= */
.band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: clamp(34px, 6vw, 66px);
  background: var(--grad-red);
  color: #fff;
  isolation: isolate;
}

.band::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 26px);
  animation: slide 14s linear infinite;
}

@keyframes slide {
  to {
    transform: translateX(26px);
  }
}

.band h2 {
  max-width: 20ch;
}

.band p {
  max-width: 52ch;
  margin: 16px 0 28px;
  color: rgba(255, 255, 255, .88);
}

.band .btn-ghost {
  background: #fff;
  color: var(--red);
  box-shadow: none;
}

/* =========================================================
   TARIFF TABLE
   ========================================================= */
.tariff {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}

.tariff table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.tariff th {
  text-align: left;
  padding: 18px 22px;
  background: var(--ink-3);
  font-family: var(--display);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.tariff td {
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  transition: background .35s;
}

.tariff tbody tr:hover td {
  background: var(--ink-3);
}

.tariff td:first-child {
  font-weight: 600;
}

.tariff td b {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  color: var(--red-hot);
}

@media (max-width:640px) {

  .tariff th:nth-child(3),
  .tariff td:nth-child(3) {
    display: none;
  }
}

/* =========================================================
   FAQ — native details, animated
   ========================================================= */
.faq {
  display: grid;
  gap: 12px;
  max-width: 900px;
  margin-inline: auto;
}

details {
  border-radius: var(--r-md);
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  transition: box-shadow .4s;
}

details[open] {
  box-shadow: inset 0 0 0 1px rgba(227, 30, 36, .4);
}

summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '';
  margin-left: auto;
  flex: none;
  width: 13px;
  height: 13px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  rotate: 45deg;
  transition: rotate .45s var(--ease-snap), translate .45s var(--ease-snap);
}

details[open] summary::after {
  rotate: -135deg;
  translate: 0 3px;
}

details>div {
  padding: 0 24px 22px;
  color: var(--muted);
  max-width: 78ch;
}

details[open]>div {
  animation: rise .5s var(--ease) both;
}

/* =========================================================
   CONTACT FORM
   ========================================================= */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}

@media (max-width:900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

form.contact {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-lg);
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

form.contact .full {
  grid-column: 1/-1;
}

@media (max-width:560px) {
  form.contact {
    grid-template-columns: 1fr;
  }
}

.field {
  position: relative;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 22px 16px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow .35s var(--ease), background .35s;
}

.field textarea {
  min-height: 128px;
  resize: vertical;
}

.field select {
  padding-top: 20px;
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--red-hot) 50%),
    linear-gradient(135deg, var(--red-hot) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 3px), calc(100% - 14px) calc(50% + 3px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.field label {
  position: absolute;
  left: 16px;
  top: 15px;
  font-size: .95rem;
  color: var(--muted);
  pointer-events: none;
  transition: all .3s var(--ease);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px var(--red), 0 0 0 4px rgba(227, 30, 36, .14);
  outline: none;
}

.field input:focus+label,
.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,
.field textarea:not(:placeholder-shown)+label,
.field select:focus+label,
.field select:valid+label {
  top: 6px;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-hot);
}

/* live validation feedback, CSS only */
.field input:not(:placeholder-shown):invalid {
  box-shadow: inset 0 0 0 1px #d9534f;
}

.field .hint {
  display: block;
  margin-top: 6px;
  font-size: .74rem;
  color: transparent;
}

.field input:not(:placeholder-shown):invalid~.hint {
  color: #ff8a85;
}

.contact-side ul {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.contact-side li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .93rem;
}

.contact-side li b {
  display: block;
  font-family: var(--display);
}

.contact-side li span {
  color: var(--muted);
}

.contact-side li svg {
  color: var(--red-hot);
  flex: none;
  margin-top: 2px;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer {
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding-block: 58px 30px;
  position: relative;
  overflow: hidden;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 34px;
}

@media (max-width:860px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.foot-grid h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.foot-grid li {
  margin-bottom: 10px;
}

.foot-grid a {
  color: var(--muted);
  font-size: .94rem;
  transition: color .3s, padding-left .3s;
}

.foot-grid a:hover {
  color: var(--text);
  padding-left: 5px;
}

.socials {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.socials a {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: all .4s var(--ease-snap);
}

.socials a:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-4px) rotate(-6deg);
}

.foot-bottom {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  color: var(--muted);
  font-size: .84rem;
}

/* big watermark wordmark in the footer */
.watermark {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(4rem, 17vw, 15rem);
  line-height: .8;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .028);
  text-align: center;
  margin-top: 26px;
  user-select: none;
  white-space: nowrap;
}

/* =========================================================
   INNER PAGES (support / legal / journey)
   ========================================================= */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(60px, 10vh, 110px) clamp(40px, 6vh, 70px);
  background:
    radial-gradient(90% 80% at 70% 0%, rgba(227, 30, 36, .18), transparent 60%),
    var(--ink);
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  max-width: 22ch;
}

.crumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: .82rem;
  margin-bottom: 22px;
}

.crumbs a:hover {
  color: var(--red-hot);
}

.legal {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

@media (max-width:900px) {
  .legal {
    grid-template-columns: 1fr;
  }
}

.toc {
  position: sticky;
  top: 100px;
  padding: 22px;
  border-radius: var(--r-md);
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.toc h4 {
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.toc a {
  display: block;
  padding: 7px 0;
  font-size: .9rem;
  color: var(--muted);
  border-left: 2px solid transparent;
  padding-left: 12px;
  transition: all .3s;
}

.toc a:hover {
  color: var(--text);
  border-color: var(--red);
}

.prose {
  max-width: 76ch;
}

.prose h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  margin: 44px 0 14px;
  scroll-margin-top: 100px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 26px 0 10px;
  font-style: normal;
  text-transform: none;
  letter-spacing: -.01em;
}

.prose p,
.prose li {
  color: var(--muted);
  margin-bottom: 12px;
}

.prose ul,
.prose ol {
  padding-left: 22px;
  margin-bottom: 18px;
}

.prose ul li {
  list-style: none;
  position: relative;
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: -18px;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--red);
  rotate: 45deg;
}

.prose ol {
  list-style: decimal;
}

.prose ol li::marker {
  color: var(--red);
  font-weight: 700;
}

.prose strong {
  color: var(--text);
}

.prose a {
  color: var(--red-hot);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.updated {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: .8rem;
  color: var(--muted);
}

/* support channel cards */
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.channel {
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .5s var(--ease-snap), box-shadow .5s;
}

.channel:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px rgba(227, 30, 36, .45);
}

.channel b {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.2rem;
  margin: 16px 0 6px;
}

.channel p {
  color: var(--muted);
  font-size: .92rem;
}

.channel .val {
  display: inline-block;
  margin-top: 14px;
  color: var(--red-hot);
  font-weight: 600;
  border-bottom: 1px solid rgba(227, 30, 36, .4);
}

/* =========================================================
   JOURNEY PAGE — scroll-driven walkthrough

   The phone is sticky; each step declares a named view timeline
   (--s1 … --s6) and every moving part — screen crossfades, step
   counter, progress rail, and the animation inside each screen —
   is driven by those timelines. Scroll position is the playhead.
   Fallback where scroll-driven animation is unavailable: the first
   screen shows, all copy reads normally, nothing is hidden.
   ========================================================= */
.walk {
  position: relative;
}

.walk-inner {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* progress rail down the left edge of the section */
.walk::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.walk::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  transform-origin: 50% 0;
  transform: scaleY(0);
  background: linear-gradient(180deg, var(--red-hot), var(--red), var(--red-deep));
}

.walk-stage {
  position: sticky;
  top: 92px;
  display: grid;
  place-items: center;
  z-index: 2;
}

.walk-steps {
  display: grid;
  gap: 0;
}

.walk-step {
  position: relative;
  padding-block: clamp(38px, 9vh, 96px);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 100px;
}

.walk-step:last-child {
  border-bottom: 0;
}

.walk-no {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--red);
  margin-bottom: 12px;
}

.walk-step h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  margin-bottom: 16px;
}

.walk-step ul {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.walk-step li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: .95rem;
}

.walk-step li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 38%, 62% 38%, 100% 100%, 0 62%, 38% 62%, 0 24%);
}

/* ghost numeral behind the phone */
.walk-ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.walk-ghost span {
  grid-area: 1/1;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(9rem, 22vw, 17rem);
  line-height: 1;
  letter-spacing: -.06em;
  color: rgba(255, 255, 255, .035);
  opacity: 0;
}

.walk-ghost span.g1 {
  opacity: 1;
}

/* stacked screens inside the sticky phone */
.wscreen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.wscreen.w1 {
  opacity: 1;
}

/* step counter under the phone */
.walk-dots {
  display: flex;
  gap: 7px;
  margin-top: 22px;
}

.walk-dots i {
  width: 26px;
  height: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .16);
}

.walk-dots i.d1 {
  background: var(--red);
}

/* countdown ring on the reserve screen */
.w-ring {
  position: relative;
  width: 132px;
  height: 132px;
  margin-inline: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--red) var(--sweep, 0deg), rgba(255, 255, 255, .08) 0);
}

.w-ring::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #080c12;
}

.w-ring b {
  position: relative;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.35rem;
  text-align: center;
  line-height: 1;
}

.w-ring b em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: .52rem;
  letter-spacing: .16em;
  color: var(--muted);
  margin-top: 5px;
}

/* pieces that scroll-drive inside the screens */
.w-otp .ps-chip {
  color: var(--muted);
}

.w-scan {
  transform-box: fill-box;
  transform-origin: 52% 50%;
  opacity: 0;
}

.w-plug {
  transform: translateY(70px);
}

.w-live {
  opacity: 0;
}

.w-bar {
  transform-origin: left;
  transform: scaleX(.06);
}

.w-curve {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
}

.w-stamp {
  justify-self: center;
  padding: 6px 18px;
  border-radius: 8px;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: .08em;
  color: #ff8b81;
  border: 2px solid rgba(255, 83, 71, .55);
  background: rgba(227, 30, 36, .12);
  transform: rotate(-8deg) scale(.7);
  opacity: 0;
}

/* ---------- the scroll-driven layer ---------- */
@supports (timeline-scope: --a) and (animation-timeline: view()) {
  .walk {
    timeline-scope: --s1, --s2, --s3, --s4, --s5, --s6;
    view-timeline-name: --walk;
  }

  .walk::after {
    animation: railGrow linear both;
    animation-timeline: --walk;
    animation-range: cover 6% cover 94%;
  }

  .st1 {
    view-timeline-name: --s1;
  }

  .st2 {
    view-timeline-name: --s2;
  }

  .st3 {
    view-timeline-name: --s3;
  }

  .st4 {
    view-timeline-name: --s4;
  }

  .st5 {
    view-timeline-name: --s5;
  }

  .st6 {
    view-timeline-name: --s6;
  }

  /* Step copy is deliberately NOT scroll-animated: if a timeline ever fails to
     track (an embedded viewer, an emulated scroller), the words must still be
     fully legible. Only the marker beside it reacts. */
  .walk-step::before {
    content: '';
    position: absolute;
    left: calc(-1 * clamp(18px, 3vw, 40px) - 2px);
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--red);
    opacity: 0;
    animation: markerOn linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }

  /* screens crossfade as their step passes through */
  .wscreen {
    animation: screenSwap linear both;
    animation-range: cover 0% cover 100%;
  }

  /* the first screen uses a variant whose resting state is VISIBLE, so a
     frozen or before-phase timeline still shows a working app screen */
  .wscreen.w1 {
    animation-name: screenSwapFirst;
  }

  .w1 {
    animation-timeline: --s1;
  }

  .w2 {
    animation-timeline: --s2;
  }

  .w3 {
    animation-timeline: --s3;
  }

  .w4 {
    animation-timeline: --s4;
  }

  .w5 {
    animation-timeline: --s5;
  }

  .w6 {
    animation-timeline: --s6;
  }

  .walk-ghost span {
    animation: ghostSwap linear both;
    animation-range: cover 0% cover 100%;
  }

  .walk-ghost span.g1 {
    animation-name: ghostSwapFirst;
  }

  .walk-ghost .g1 {
    animation-timeline: --s1;
  }

  .walk-ghost .g2 {
    animation-timeline: --s2;
  }

  .walk-ghost .g3 {
    animation-timeline: --s3;
  }

  .walk-ghost .g4 {
    animation-timeline: --s4;
  }

  .walk-ghost .g5 {
    animation-timeline: --s5;
  }

  .walk-ghost .g6 {
    animation-timeline: --s6;
  }

  .walk-dots i {
    animation: dotOn linear both;
    animation-range: cover 0% cover 100%;
  }

  .walk-dots i.d1 {
    animation-name: dotOnFirst;
  }

  .walk-dots .d1 {
    animation-timeline: --s1;
  }

  .walk-dots .d2 {
    animation-timeline: --s2;
  }

  .walk-dots .d3 {
    animation-timeline: --s3;
  }

  .walk-dots .d4 {
    animation-timeline: --s4;
  }

  .walk-dots .d5 {
    animation-timeline: --s5;
  }

  .walk-dots .d6 {
    animation-timeline: --s6;
  }

  /* 01 · the OTP fills in as you read */
  .w-otp .ps-chip {
    animation: otpFill linear both;
    animation-timeline: --s1;
  }

  .w-otp .ps-chip:nth-child(1) {
    animation-range: cover 26% cover 34%;
  }

  .w-otp .ps-chip:nth-child(2) {
    animation-range: cover 32% cover 40%;
  }

  .w-otp .ps-chip:nth-child(3) {
    animation-range: cover 38% cover 46%;
  }

  .w-otp .ps-chip:nth-child(4) {
    animation-range: cover 44% cover 52%;
  }

  /* 02 · the map sweeps for chargers */
  .w-scan {
    animation: scanSweep linear both;
    animation-timeline: --s2;
    animation-range: cover 18% cover 78%;
  }

  /* 03 · the hold counts down */
  .w-ring {
    animation: ringCount linear both;
    animation-timeline: --s3;
    animation-range: cover 18% cover 82%;
  }

  /* 04 · your scroll pushes the connector home, then it locks */
  .w-plug {
    animation: plugPush linear both;
    animation-timeline: --s4;
    animation-range: cover 20% cover 56%;
  }

  .w-live {
    animation: liveOn linear both;
    animation-timeline: --s4;
    animation-range: cover 52% cover 62%;
  }

  /* 05 · the pack fills and the power curve draws */
  .w-bar {
    animation: barFill linear both;
    animation-timeline: --s5;
    animation-range: cover 20% cover 80%;
  }

  .w-curve {
    animation: curveDraw linear both;
    animation-timeline: --s5;
    animation-range: cover 24% cover 84%;
  }

  .w-soc i::before {
    animation: rollDigit linear both;
    animation-timeline: --s5;
    animation-range: cover 22% cover 74%;
  }

  /* 06 · the receipt gets stamped */
  .w-stamp {
    animation: stampIn linear both;
    animation-timeline: --s6;
    animation-range: cover 34% cover 52%;
  }
}

@keyframes railGrow {
  to {
    transform: scaleY(1);
  }
}

@keyframes markerOn {

  0%,
  100% {
    opacity: 0;
  }

  24%,
  76% {
    opacity: 1;
  }
}

@keyframes screenSwap {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(.96);
    filter: blur(7px);
  }

  20%,
  76% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-26px) scale(.96);
    filter: blur(7px);
  }
}

/* first-screen variants: resting state is the visible state, so the
   walkthrough always shows step 01 rather than nothing at all */
@keyframes screenSwapFirst {

  0%,
  20%,
  76% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-26px) scale(.96);
    filter: blur(7px);
  }
}

@keyframes ghostSwap {

  0%,
  100% {
    opacity: 0;
    transform: translateY(20px);
  }

  22%,
  76% {
    opacity: 1;
    transform: none;
  }
}

@keyframes ghostSwapFirst {

  0%,
  22%,
  76% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@keyframes dotOn {

  0%,
  100% {
    background: rgba(255, 255, 255, .16);
    transform: scaleX(1);
  }

  22%,
  78% {
    background: var(--red);
    transform: scaleX(1.7);
  }
}

@keyframes dotOnFirst {

  0%,
  22%,
  78% {
    background: var(--red);
    transform: scaleX(1.7);
  }

  100% {
    background: rgba(255, 255, 255, .16);
    transform: scaleX(1);
  }
}

@keyframes otpFill {
  to {
    background: rgba(227, 30, 36, .85);
    color: #fff;
  }
}

@keyframes scanSweep {
  0% {
    opacity: 0;
    transform: rotate(-40deg);
  }

  15%,
  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(320deg);
  }
}

@keyframes ringCount {
  from {
    --sweep: 352deg;
  }

  to {
    --sweep: 118deg;
  }
}

@keyframes plugPush {
  from {
    transform: translateY(70px);
  }

  86% {
    transform: translateY(4px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes liveOn {
  to {
    opacity: 1;
  }
}

@keyframes barFill {
  to {
    transform: scaleX(1);
  }
}

@keyframes curveDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes stampIn {
  from {
    opacity: 0;
    transform: rotate(-8deg) scale(.7);
  }

  to {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
  }
}

/* two columns once there is room: story left, pinned phone right */
@media (min-width:961px) {
  .walk-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: clamp(36px, 6vw, 92px);
    align-items: start;
  }

  .walk-steps {
    grid-column: 1;
    grid-row: 1;
  }

  .walk-stage {
    grid-column: 2;
    grid-row: 1;
    height: min(80svh, 720px);
    align-content: center;
  }

  .walk {
    padding-left: clamp(18px, 3vw, 40px);
  }
}

@media (max-width:960px) {
  .walk-stage {
    top: 84px;
    padding-bottom: 10px;
    background: linear-gradient(180deg, var(--ink) 72%, transparent);
  }

  .walk-stage .phone {
    width: min(230px, 56vw);
  }

  .walk-ghost span {
    font-size: 7rem;
  }
}

/* =========================================================
   JOURNEY PAGE — sticky scenes
   ========================================================= */
.journey-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(26px, 5vw, 66px);
  align-items: center;
  padding-block: clamp(50px, 8vh, 96px);
  border-bottom: 1px solid var(--line);
}

.journey-step:nth-child(even) {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
}

.journey-step:nth-child(even) .js-copy {
  order: 2;
}

@media (max-width:900px) {

  .journey-step,
  .journey-step:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .journey-step:nth-child(even) .js-copy {
    order: 0;
  }
}

.js-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .18));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.js-visual {
  display: grid;
  place-items: center;
}

.js-visual .phone {
  width: min(268px, 70vw);
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .r,
  .screen,
  h1 .line>span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* walkthrough collapses to its resting state: step 01 on screen, all copy readable */
  .wscreen {
    opacity: 0 !important;
  }

  .wscreen.w1,
  .walk-ghost .g1 {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .w-plug,
  .w-bar {
    transform: none !important;
  }

  .w-live,
  .w-stamp {
    opacity: 1 !important;
  }

  .w-curve {
    stroke-dashoffset: 0 !important;
  }

  .charged {
    color: var(--red-hot);
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* print: legal pages should print cleanly */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  .site-header,
  footer,
  .noise,
  .progress,
  .toc {
    display: none !important;
  }

  .legal {
    grid-template-columns: 1fr;
  }

  .prose p,
  .prose li {
    color: #333;
  }
}

/* =========================================================
   AX — X-ray hologram hero (GSAP, hero.js) · Atria red
   ========================================================= */

/* faint engineering grid behind the scene */
.ax-stage::before {
  content: "";
  position: absolute;
  inset: -8% -3%;
  background:
    linear-gradient(rgba(142, 153, 167, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 153, 167, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(78% 72% at 55% 55%, #000 28%, transparent 78%);
  mask-image: radial-gradient(78% 72% at 55% 55%, #000 28%, transparent 78%);
  pointer-events: none;
}

.ax-stage {
  aspect-ratio: 1240/460;
}

/* camera rig — GSAP pushes this in and out very slowly */
.ax-rig {
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* glass chips: deeper blur, red bloom */
.ax-hud {
  animation: none;
  background: linear-gradient(160deg, rgba(18, 26, 36, .68), rgba(8, 12, 18, .56));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    0 24px 60px -28px rgba(227, 30, 36, .35),
    0 22px 50px -24px rgba(0, 0, 0, .9);
}

.ax-hud-a {
  position: absolute;
  left: 1%;
  top: -4%;
}

.ax-hud-b {
  position: absolute;
  right: 22%;
  bottom: -10%;
}

.ax-hud .hud-bar i {
  animation: none;
}

/* LIVE pill with radiating signal pings */
.ax-live {
  position: absolute;
  top: -3%;
  right: 18%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 100px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .24em;
  color: #ff8d84;
  background: rgba(14, 8, 9, .62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px rgba(227, 30, 36, .4),
    0 0 26px -6px rgba(227, 30, 36, .6);
}

.ax-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4b3e;
  box-shadow: 0 0 12px 2px rgba(227, 30, 36, .85);
}

.ax-ping-ring {
  position: absolute;
  left: 9.5px;
  top: calc(50% - 9px);
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 75, 62, .75);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* cable current + returning telemetry */
.ax-flow {
  stroke-dasharray: 16 26;
}

.ax-flow2 {
  stroke-dasharray: 4 40;
}

/* energy pulses ride the exact cable curve (GSAP animates offset-distance) */
.ax-bead {
  opacity: 0;
}

@supports (offset-path: path("M0 0")) {
  .ax-bead {
    offset-path: path("M1036 190 C980 216 948 292 930 350 C923 372 924 380 924 384");
    offset-rotate: 0deg;
  }
}

@supports not (offset-path: path("M0 0")) {
  .ax-bead {
    display: none;
  }
}

/* pulses wait for hero.js */
.ax-ring,
.ax-port-pulse,
.ax-aura {
  opacity: 0;
}

/* projector re-render sweep + fleet tag (hero.js drives both) */
.ax-swapscan {
  pointer-events: none;
}

.ax-veh-tag {
  text-transform: uppercase;
  font-family: ui-monospace, Menlo, monospace;
}

[data-theme="light"] .ax-stage #ax-scanband stop {
  stop-color: #c9161d;
}

/* light theme: gray SVG labels and glass chips lose contrast on
   porcelain — darken the label ink and the chip glass to hold AA */
[data-theme="light"] .ax-stage [fill="#8e99a7"] {
  fill: #4c5661;
}

[data-theme="light"] .ax-hud {
  background: linear-gradient(160deg, rgba(24, 32, 42, .9), rgba(10, 14, 20, .84));
}

[data-theme="light"] .ax-live {
  background: rgba(20, 10, 11, .82);
}

/* desktop: chip row is transparent, chips float over the scene */
.ax-hud-row {
  display: contents;
}

/* small screens: chips leave the overlay and line up under the scene */
@media (max-width:1000px) {
  .ax-stage {
    aspect-ratio: auto;
  }

  .ax-rig {
    aspect-ratio: 1240/460;
    height: auto;
  }

  .ax-hud-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
  }

  .ax-hud-row .ax-hud {
    position: static;
    flex: 1 1 150px;
  }

  .ax-live {
    top: 2%;
    right: 24%;
  }
}

/* =========================================================
   TYPE FIGURES — the hardware we actually deploy
   ========================================================= */
.type-fig {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.type-fig svg {
  width: 100%;
  max-width: 132px;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5));
}

.type-fig figcaption {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(227, 30, 36, .08);
  box-shadow: inset 0 0 0 1px rgba(227, 30, 36, .3);
}

.type-fig figcaption b {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: .95rem;
  color: #f2f4f7;
  margin-right: 3px;
}

/* =========================================================
   LIGHT THEME — v1 alternate, toggled from the nav
   ========================================================= */
[data-theme="light"] {
  --ink: #f3f4f6;
  --ink-2: #ffffff;
  --ink-3: #e9edf2;
  --line: rgba(16, 24, 34, .12);
  --line-strong: rgba(16, 24, 34, .24);
  --text: #10151c;
  --muted: #5a6572;
  --glass: rgba(16, 24, 34, .05);
  --grad-fade: linear-gradient(180deg, transparent, rgba(243, 244, 246, .96));
  --shadow: 0 30px 80px -30px rgba(20, 30, 45, .3);
  --glow-red: 0 0 0 1px rgba(227, 30, 36, .3), 0 18px 60px -18px rgba(227, 30, 36, .35);
}

[data-theme="light"] .site-header {
  background: rgba(243, 244, 246, .78);
}

[data-theme="light"] .hero {
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(227, 30, 36, .1), transparent 55%),
    radial-gradient(90% 70% at 12% 88%, rgba(38, 49, 61, .12), transparent 60%),
    var(--ink);
}

[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(rgba(16, 24, 34, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 34, .05) 1px, transparent 1px);
}

[data-theme="light"] .card-no {
  color: rgba(16, 24, 34, .08);
}

/* ---------- theme toggle button ---------- */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--glass);
  color: inherit;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}

.theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(227, 30, 36, .5);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

.tt-moon {
  display: none;
}

[data-theme="light"] .tt-sun {
  display: none;
}

[data-theme="light"] .tt-moon {
  display: block;
}

/* chips sit on the dark scene in both themes — pin their palette */
.ax-hud,
.ax-live {
  color: #f3f5f8;
}

.ax-hud .hud-k,
.ax-hud .hud-u {
  color: #8e99a7;
}

.ax-live {
  color: #ff8d84;
}

[data-theme="light"] .glow {
  opacity: .45;
}

[data-theme="light"] .type-fig figcaption b {
  color: #10151c;
}

/* =========================================================
   LIGHT SCENE — the hologram re-etched for the light theme.
   CSS wins over SVG presentation attributes, so the whole
   remap is attribute-selector driven; masks (#000/#fff) are
   deliberately untouched. Hardware darks (spine, cables,
   connector) stay dark in both themes.
   ========================================================= */
[data-theme="light"] .ax-stage::before {
  background-image:
    linear-gradient(rgba(60, 80, 110, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 80, 110, .1) 1px, transparent 1px);
}

/* --- laser linework: hot reds → deep etched crimson --- */
[data-theme="light"] .ax-stage [stroke="#ff5347"] { stroke: #c9161d; }
[data-theme="light"] .ax-stage [stroke="#ff4b3e"] { stroke: #d31820; }
[data-theme="light"] .ax-stage [stroke="#ff6a5e"] { stroke: #c02a30; }
[data-theme="light"] .ax-stage [stroke="#ffd2ce"] { stroke: #8f0e14; }
[data-theme="light"] .ax-stage [stroke="#ff8d84"] { stroke: #e0454c; }
[data-theme="light"] .ax-stage [stroke="#ffb3ad"] { stroke: #d4666b; }
[data-theme="light"] .ax-stage [stroke="#ffd9d4"] { stroke: #a01218; }
[data-theme="light"] .ax-stage [stroke="rgba(255,106,94,.55)"] { stroke: rgba(165, 22, 28, .6); }
[data-theme="light"] .ax-stage [stroke="rgba(255,106,94,.5)"] { stroke: rgba(165, 22, 28, .55); }
[data-theme="light"] .ax-stage [stroke="rgba(255,106,94,.45)"] { stroke: rgba(165, 22, 28, .5); }
[data-theme="light"] .ax-stage [stroke="rgba(255,106,94,.4)"] { stroke: rgba(165, 22, 28, .45); }
[data-theme="light"] .ax-stage [stroke="rgba(255,106,94,.35)"] { stroke: rgba(165, 22, 28, .4); }
[data-theme="light"] .ax-stage [stroke="rgba(255,171,163,.5)"] { stroke: rgba(140, 25, 30, .55); }
[data-theme="light"] .ax-stage [stroke="rgba(255,171,163,.4)"] { stroke: rgba(140, 25, 30, .45); }

/* --- scene whites → ink hairlines (dark-slab whites stay) --- */
[data-theme="light"] .ax-stage [stroke="rgba(255,255,255,.05)"] { stroke: rgba(16, 24, 34, .08); }
[data-theme="light"] .ax-stage [stroke="rgba(255,255,255,.12)"] { stroke: rgba(16, 24, 34, .22); }
[data-theme="light"] .ax-stage [stroke="rgba(255,255,255,.16)"] { stroke: rgba(16, 24, 34, .25); }
[data-theme="light"] .ax-stage [stroke="rgba(255,255,255,.32)"] { stroke: rgba(20, 28, 38, .25); }

/* --- volumes and glass --- */
[data-theme="light"] .ax-stage [fill="#05080d"] { fill: #d6dde5; }
[data-theme="light"] .ax-stage [fill="rgba(5,8,13,.7)"] { fill: rgba(238, 241, 245, .85); }
[data-theme="light"] .ax-stage [fill="rgba(5,8,13,.8)"] { fill: #e8ecf1; }
[data-theme="light"] .ax-stage [fill="rgba(255,75,62,.05)"] { fill: rgba(180, 30, 40, .07); }
[data-theme="light"] .ax-stage [fill="#eaf3ff"] { fill: #56708f; }
[data-theme="light"] .ax-stage [fill="#cfe2ff"] { fill: #8fa8c8; }

/* --- ambient occlusion + glow, tuned for porcelain --- */
[data-theme="light"] .ax-stage #ax-contact stop:first-child { stop-color: #3d4754; stop-opacity: .4; }
[data-theme="light"] .ax-stage .ax-poolglow { opacity: .8; }
[data-theme="light"] .ax-stage #ax-holofill stop:first-child { stop-opacity: .07; }
[data-theme="light"] .ax-stage #ax-holofill stop:last-child { stop-opacity: .1; }

/* ---------- real app screenshots ---------- */
/* Real captures from the customer guide, 599x1298, in assets/app/.
   The background and small type are the missing-image fallback: if a file
   ever goes walkabout the alt text reads as a muted caption inside the
   phone frame instead of overflowing it. No padding here — padding on an
   <img> insets the loaded bitmap and shows the background as a border. */
.ps-real {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  background: #0b0f14;
  font-size: .68rem;
  line-height: 1.5;
  color: var(--muted);
  overflow: hidden;
}

/* ---------- hub planes: light-theme remaps for the new literals ---------- */
[data-theme="light"] .ax-stage [fill="#10151c"] { fill: #c6cedb; }
[data-theme="light"] .ax-stage [fill="rgba(5,8,13,.55)"] { fill: rgba(238, 241, 245, .82); }
[data-theme="light"] .ax-stage [stroke="rgba(255,255,255,.04)"] { stroke: rgba(16, 24, 34, .07); }
[data-theme="light"] .ax-stage [stroke="rgba(255,255,255,.06)"] { stroke: rgba(16, 24, 34, .12); }
[data-theme="light"] .ax-stage [stroke="rgba(255,255,255,.07)"] { stroke: rgba(16, 24, 34, .12); }
[data-theme="light"] .ax-stage [stroke="rgba(255,255,255,.08)"] { stroke: rgba(16, 24, 34, .16); }
[data-theme="light"] .ax-stage [stroke="rgba(255,255,255,.1)"] { stroke: rgba(16, 24, 34, .18); }
[data-theme="light"] .ax-stage [stroke="rgba(255,255,255,.14)"] { stroke: rgba(20, 28, 38, .28); }