/* ==========================================================================
   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;
}

/* =========================================================
   ICON TILE — shared by the segment cards, the support channels
   and the contact page
   ========================================================= */
.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);
}

/* =========================================================
   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);
}

/* ---------- 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); }

/* =========================================================
   VISION LINE — the statement itself, not decoration
   ========================================================= */
.vision {
  display: block;
  margin-bottom: 12px;
  padding-left: 16px;
  border-left: 3px solid var(--red);
  font-family: var(--display);
  font-weight: 700;
  color: var(--text);
}

/* =========================================================
   SEGMENTS — private / commercial / bus
   ========================================================= */
.segs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

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

.seg {
  position: relative;
  padding: 28px 26px 30px;
  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;
  display: flex;
  flex-direction: column;
  transition: transform .5s var(--ease-snap), box-shadow .5s var(--ease);
}

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

.seg-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* the icon tile carries its own bottom margin for the stacked layouts that
   use it — here it sits beside the heading instead */
.seg-head .card-ico {
  margin-bottom: 0;
  flex: none;
  width: 48px;
  height: 48px;
}

.seg-head h3 {
  font-size: 1.16rem;
}

.seg p {
  color: var(--muted);
  font-size: .95rem;
  margin: 16px 0 22px;
}

.seg-specs {
  list-style: none;
  margin-top: auto;
  display: grid;
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* the 1px grid gap draws the hairlines; each row paints its own surface */
.seg-specs li {
  background: var(--ink-2);
  padding: 11px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.seg-specs b {
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  color: var(--text);
  font-size: .98rem;
  letter-spacing: -.01em;
}

.seg-specs span {
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: right;
}

/* the bus card is the headline — it gets the red edge */
.seg-hero {
  box-shadow: inset 0 0 0 1px rgba(227, 30, 36, .38);
}

.seg-flag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 7px 14px;
  border-bottom-left-radius: var(--r-md);
  background: var(--grad-red);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* =========================================================
   FLAGSHIP — 1.5 MW bus charger
   ========================================================= */
.flagship {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(30px, 4.6vw, 58px);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 88% 10%, rgba(227, 30, 36, .22), transparent 58%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

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

.flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(227, 30, 36, .12);
  box-shadow: inset 0 0 0 1px rgba(227, 30, 36, .4);
  color: var(--red-hot);
  font-family: var(--display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.flag-copy h2 {
  margin-top: 22px;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
}

.flag-copy p {
  color: var(--muted);
  margin-top: 18px;
  max-width: 48ch;
}

.flag-specs {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 34px;
  margin: 30px 0 30px;
}

@media (max-width:520px) {
  .flag-specs {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

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

.flag-specs span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ---------- charge-window comparison ----------
   Bar widths are true to the times quoted: 20 min against an 8 hr baseline
   really is 4%. The nub is tiny on purpose — that gap is the whole argument
   — so a min-width keeps it visible without inflating the claim. */
.flag-viz {
  padding: 26px 24px 22px;
  border-radius: var(--r-md);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line);
}

.viz-title {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.viz-row {
  display: grid;
  grid-template-columns: 106px 1fr 58px;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.viz-k {
  font-size: .82rem;
  color: var(--text);
}

.viz-v {
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  font-size: .9rem;
  text-align: right;
}

.viz-dim .viz-k,
.viz-dim .viz-v {
  color: var(--muted);
}

.viz-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}

.viz-fill {
  display: block;
  height: 100%;
  min-width: 12px;
  border-radius: 999px;
  transform-origin: left center;
}

.viz-fast {
  width: 4.2%;
  background: var(--grad-red);
  box-shadow: 0 0 18px 2px rgba(255, 75, 62, .65);
}

.viz-slow {
  width: 37.5%;
  background: rgba(255, 255, 255, .18);
}

.viz-slowest {
  width: 100%;
  background: rgba(255, 255, 255, .11);
}

.viz-note {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.6;
  margin-top: 18px;
}

@supports (animation-timeline: view()) {
  .viz-fill {
    animation: growx linear both;
    animation-timeline: view();
    animation-range: entry 18% entry 78%;
  }
}

@keyframes growx {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* =========================================================
   LIVE SITES — corridor rail + per-site live maps
   ========================================================= */
.corridor {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}

.cor-end {
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.cor-rail {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--line-strong);
  border-radius: 2px;
}

/* a charge runs Bengaluru → Hyderabad along the corridor */
.cor-flow {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--red-hot), transparent);
  background-size: 34% 100%;
  background-repeat: no-repeat;
  animation: corflow 5.5s linear infinite;
}

@keyframes corflow {
  from {
    background-position: -40% 0;
  }

  to {
    background-position: 140% 0;
  }
}

/* the pins double as the site switcher, so they are real buttons; the
   inactive one stays legible but hands the red to whichever site is showing */
.cor-pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--muted);
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: .8rem;
  cursor: pointer;
  transition: color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease-snap);
}

.cor-pin:hover {
  color: var(--red-hot);
  box-shadow: inset 0 0 0 1.5px var(--red);
}

.cor-pin.is-on {
  color: var(--red-hot);
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: inset 0 0 0 1.5px var(--red), 0 0 0 6px rgba(227, 30, 36, .12);
}

.cor-pin:focus-visible {
  outline: 2px solid var(--red-hot);
  outline-offset: 4px;
}

/* the site name rides along hidden on wide screens, where the numbered pin
   sits between two labelled endpoints and reads clearly on its own */
.cor-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* below the rail's usable width the corridor collapses to two labelled
   chips rather than disappearing, which would leave the loop with no
   manual control at all on a phone */
@media (max-width:620px) {
  .corridor {
    gap: 10px;
  }

  .cor-end,
  .cor-flow {
    display: none;
  }

  .cor-rail {
    height: auto;
    background: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .cor-pin {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: .74rem;
  }

  .cor-pin.is-on {
    transform: none;
  }

  .cor-name {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    font-family: var(--display);
    font-weight: 700;
    font-style: normal;
    letter-spacing: .04em;
    color: var(--text);
  }
}

.site-stage {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 20px;
  align-items: stretch;
}

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

/* ---------- the single map ---------- */
.site-map {
  position: relative;
  min-height: 440px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line);
}

@media (max-width:900px) {
  .site-map {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

/* every site's embed is stacked in the same box and loaded once, so switching
   sites cross-fades between them rather than re-pointing a single iframe,
   which would blank the tile and re-request the map on every turn */
.map-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s var(--ease), visibility .55s;
}

.map-layer.is-on {
  opacity: 1;
  visibility: visible;
}

.map-layer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- the single detail card ---------- */
.site-detail {
  position: relative;
  display: grid;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  box-shadow: inset 0 0 0 1px var(--line);
}

/* all cards share one grid cell, so the panel is as tall as the tallest of
   them and nothing jumps as the loop advances */
.site-card {
  grid-area: 1 / 1;
  padding: 28px 26px 52px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .55s var(--ease), visibility .45s;
}

.site-card.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- dwell meter ---------- */
.site-rotor {
  grid-area: 1 / 1;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 26px 22px;
  pointer-events: none;
}

.rotor-bar {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
}

/* the dwell is drawn by CSS and stopped by a class, so the bar can never
   drift out of step with the timer that drives the loop */
.rotor-bar i {
  display: block;
  height: 100%;
  background: var(--grad-red);
  transform: scaleX(0);
  transform-origin: left center;
  animation: rotorFill 7s linear forwards;
}

.is-paused .rotor-bar i {
  animation-play-state: paused;
  background: var(--line-strong);
}

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

@media (prefers-reduced-motion: reduce) {
  .rotor-bar i {
    animation: none;
  }
}

.rotor-hint {
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s var(--ease);
}

/* the hint only earns its space once the visitor is actually on the widget —
   before that it would be telling them to do what they are already doing */
.sitesw:hover .rotor-hint,
.sitesw:focus-within .rotor-hint {
  opacity: 1;
}

/* the embed ships Google's light chrome; this settles it into the dark
   surface without hiding roads or labels */
.map-layer iframe {
  filter: invert(.92) hue-rotate(180deg) saturate(.7) contrast(.92);
}

[data-theme="light"] .map-layer iframe {
  filter: none;
}

/* the site marker: the embed is centred on the site coordinates, so dead
   centre of the frame is the site. Drawn here rather than trusting the
   embed's own pin, which the dark filter would also have inverted. */
.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(227, 30, 36, .28), 0 0 0 1.5px #fff inset;
  pointer-events: none;
}

.map-pin::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px solid rgba(227, 30, 36, .55);
  animation: pinPing 2.8s var(--ease) infinite;
}

@keyframes pinPing {
  0% {
    transform: scale(.5);
    opacity: .9;
  }

  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.map-tag {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(6, 8, 11, .82);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: #f3f5f8;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
}

.site-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.site-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red-hot);
  font-family: var(--display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.site-no {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--muted);
}

.site-card h3 {
  font-size: 1.3rem;
}

.site-where {
  color: var(--muted);
  font-size: .9rem;
  margin-top: 8px;
}

.site-specs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 22px 0;
  padding: 18px 0;
  border-block: 1px solid var(--line);
}

.site-specs b {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: -.02em;
}

.site-specs span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.amen {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
}

.site-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: auto;
  padding-top: 26px;
}

/* =========================================================
   IMPACT
   ========================================================= */
.impact-note {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
  margin-top: 22px;
  max-width: 76ch;
}