/* ==========================================================================
   Live-o-live — the travelling "O" and the interactive O sections
   Loaded after home.css on index.html only. Motion lives in assets/js/o-motion.js.
     .o-stage    fixed, click-through layer that holds the travelling O
     .o-journey  "How it works": pinned, the O changes with each of 4 steps
     .o-suite    "Explore the suite": orbit of the three products around the O
   Everything reads as a normal static page when motion is reduced or JS is off.
   ========================================================================== */

/* ---------- Travelling O ------------------------------------------------ */
.o-stage {
  position: fixed; inset: 0; z-index: 1020; pointer-events: none;
  overflow: hidden; contain: strict;
}
.o-travel {
  position: absolute; left: 0; top: 0; width: 100px; height: 100px;
  border-radius: 50%; opacity: 0; will-change: transform, opacity;
  --w: 12px; --c1: #d8395d; --c2: #3857ef; --c3: #002433;
}
.o-travel-ring, .o-travel-dash, .o-travel-orbit { position: absolute; inset: 0; border-radius: 50%; }
.o-travel-ring {
  background: conic-gradient(from 210deg, var(--c1), var(--c2), var(--c3), var(--c1));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - 0.5px), #000 calc(100% - var(--w)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - 0.5px), #000 calc(100% - var(--w)));
  filter: drop-shadow(0 0 18px rgba(216, 57, 93, 0.35));
}
.o-travel-dash { inset: 19%; border: 1.5px dashed var(--c2); opacity: 0.55; }
.o-travel-orbit::after {
  content: ""; position: absolute; left: 50%; top: calc(var(--w) * -0.15);
  width: calc(var(--w) * 1.3); height: calc(var(--w) * 1.3); margin-left: calc(var(--w) * -0.65);
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--c1);
}

/* ---------- Shared O drawing (SVG) ------------------------------------- */
.o-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.o-ring { stroke-width: 26; }
.o-track { stroke: var(--lol-border); stroke-width: 2; }
.o-prog { stroke: var(--lol-primary-ink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 25)); transition: stroke-dashoffset 0.25s linear; }
.o-dash { stroke: var(--lol-primary); stroke-width: 1.5; stroke-dasharray: 4 9; transform-origin: 0 0; animation: o-spin 40s linear infinite; }
@keyframes o-spin { to { transform: rotate(360deg); } }

.o-tilt {
  position: relative; width: 100%; aspect-ratio: 1; max-width: 100%;
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform 0.4s var(--lol-ease, ease);
}

/* ---------- 3b. How it works (journey) --------------------------------- */
.o-journey {
  position: relative; overflow: hidden;
  background:
    radial-gradient(45% 55% at 85% 50%, rgba(177, 190, 202, 0.75), transparent 70%),
    var(--lol-mist);
  padding-block: clamp(4rem, 3rem + 5vw, 8rem);
}
.o-journey-inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .o-journey-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); } }
.o-journey-copy { min-width: 0; }
.o-journey h2 { color: var(--lol-navy); letter-spacing: -0.04em; margin: 1rem 0 1.25rem; max-width: 18ch; text-wrap: balance; }
.o-journey-cue { display: none; font-size: 0.85rem; font-weight: 600; color: var(--lol-primary-ink); letter-spacing: 0.04em; }
.o-step-nav { display: none; list-style: none; padding: 0; margin: 0 0 1.25rem; }
.o-step-btn {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.25rem 0.9rem;
  padding: 0.7rem 0; color: var(--lol-slate); font-weight: 700;
}
.o-step-btn:focus-visible { outline: 2px solid var(--lol-primary-ink); outline-offset: 4px; border-radius: 6px; }
.o-step-n { font-size: 0.8rem; letter-spacing: 0.1em; color: var(--lol-primary-ink); font-variant-numeric: tabular-nums; }
.o-step-t { font-size: 1.05rem; transition: color 0.3s; }
.o-step-bar { grid-column: 1 / -1; height: 2px; background: var(--lol-border); overflow: hidden; border-radius: 2px; }
.o-step-bar i { display: block; height: 100%; background: var(--lol-gradient); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.o-step-btn[aria-current="step"] .o-step-t, .o-step-btn:hover .o-step-t { color: var(--lol-navy); }
.o-step-btn[aria-current="step"] .o-step-n { color: var(--lol-primary-ink); }

.o-panels { display: grid; gap: 1.5rem; }
.o-panel h3 { color: var(--lol-navy); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.o-panel-n { color: var(--lol-primary-ink); font-size: 0.6em; letter-spacing: 0.1em; vertical-align: 0.3em; margin-right: 0.35rem; }
.o-panel p { color: var(--lol-slate); max-width: 46ch; margin-bottom: 0.9rem; }
.o-tag {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: 999px;
  background: #fff; color: var(--lol-primary-ink); font-size: 0.8rem; font-weight: 700; text-decoration: none;
  border: 1px solid var(--lol-border); transition: border-color 0.25s, transform 0.25s;
}
.o-tag:hover { border-color: var(--lol-primary-ink); transform: translateY(-2px); color: var(--lol-primary-ink); }

/* Tabs behaviour once JS runs (any motion setting) */
.o-js .o-step-nav { display: block; }
.o-js .o-panels { display: grid; }
.o-js .o-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.45s, transform 0.45s var(--lol-ease, ease), visibility 0s 0.45s; }
.o-js .o-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s 0.1s, transform 0.45s 0.1s var(--lol-ease, ease); }
.o-js .o-panel h3 { display: none; }

.o-journey-visual { position: relative; width: min(100%, 560px); justify-self: center; }
.o-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.o-center-item {
  grid-area: 1 / 1; display: grid; justify-items: center; gap: 0.35rem; text-align: center; max-width: 9.5em;
  color: var(--lol-navy); opacity: 0; transform: scale(0.9); transition: opacity 0.4s, transform 0.5s var(--lol-ease, ease);
  font-size: clamp(0.85rem, 0.7rem + 0.6vw, 1.15rem); line-height: 1.2;
}
.o-center-item .bi { font-size: 2.2em; color: var(--lol-primary-ink); }
.o-svg-label { font: 700 17px/1 "Plus Jakarta Sans", system-ui, sans-serif; fill: var(--lol-primary-ink); text-anchor: middle; }

/* Layers: shown per step */
.o-layer { opacity: 0; transition: opacity 0.5s; }
.is-step-0 .o-l0, .is-step-1 .o-l1, .is-step-2 .o-l2, .is-step-3 .o-l3 { opacity: 1; }
.is-step-0 [data-c="0"], .is-step-1 [data-c="1"], .is-step-2 [data-c="2"], .is-step-3 [data-c="3"] { opacity: 1; transform: none; }

/* 01: attendee dots fly in */
.o-dot { fill: #fff; stroke: var(--lol-primary-ink); stroke-width: 3; transform-origin: 0 0;
  transform: rotate(var(--a)) translate(var(--r0), 0); opacity: 0;
  transition: transform 0.9s var(--lol-ease, ease) calc(var(--i) * 30ms), opacity 0.4s calc(var(--i) * 30ms); }
.is-step-0 .o-dot { transform: rotate(var(--a)) translate(150px, 0); opacity: 1; }

/* 02: QR + scan */
.o-qr rect { fill: var(--lol-navy); }
.o-qr .o-qr-hot { fill: var(--lol-primary-ink); }
.o-scan { animation: o-scan 2.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px #3857ef); }
@keyframes o-scan { from { transform: translateY(-70px); } to { transform: translateY(70px); } }
.o-arc { stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0.9; }
.is-step-1 .o-arc { animation: o-arc 3s ease-in-out infinite; }
@keyframes o-arc { 0% { stroke-dashoffset: 100; } 70%, 100% { stroke-dashoffset: 0; } }

/* 03: ripples + share network */
.o-ripple { stroke: var(--lol-primary); stroke-width: 2; transform-origin: 0 0; opacity: 0; }
.is-step-2 .o-ripple { animation: o-ripple 3s ease-out infinite; }
.is-step-2 .o-ripple:nth-child(2) { animation-delay: 1s; }
.is-step-2 .o-ripple:nth-child(3) { animation-delay: 2s; }
@keyframes o-ripple { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.5); opacity: 0; } }
.o-link { stroke: var(--lol-primary); stroke-width: 1.5; stroke-dasharray: 5 6; }
.is-step-2 .o-link { animation: o-flowdash 1.2s linear infinite; }
@keyframes o-flowdash { to { stroke-dashoffset: -22; } }
.o-share { cursor: pointer; pointer-events: all; }
.o-share circle { fill: #fff; stroke: var(--lol-primary-ink); stroke-width: 2.5; transition: r 0.3s, fill 0.3s; }
.o-share text { font: 700 15px/1 "Plus Jakarta Sans", system-ui, sans-serif; fill: var(--lol-primary-ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.o-share:hover circle, .o-share.is-hot circle { fill: var(--lol-primary-ink); }
.o-share:hover text, .o-share.is-hot text { fill: #fff; }

/* 04: delivery donut */
.o-seg { stroke-width: 26; stroke-dasharray: 0 100; transition: stroke-dasharray 1s var(--lol-ease, ease); }
.o-seg-a { stroke: #002433; } .o-seg-b { stroke: #d8395d; } .o-seg-c { stroke: #3857ef; } .o-seg-d { stroke: #b1beca; }
.is-step-3 .o-seg-a { stroke-dasharray: 30 70; stroke-dashoffset: 0; }
.is-step-3 .o-seg-b { stroke-dasharray: 26 74; stroke-dashoffset: -31; transition-delay: 0.15s; }
.is-step-3 .o-seg-c { stroke-dasharray: 22 78; stroke-dashoffset: -58; transition-delay: 0.3s; }
.is-step-3 .o-seg-d { stroke-dasharray: 19 81; stroke-dashoffset: -81; transition-delay: 0.45s; }
.is-step-3 .o-ring { opacity: 0.15; }
.o-ring { transition: opacity 0.5s; }
.o-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.8rem; font-weight: 600; color: var(--lol-slate); opacity: 0; transition: opacity 0.4s; }
.o-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.35rem; vertical-align: -1px; }
.is-step-3 .o-legend { opacity: 1; }

/* Pinned layout (desktop + tall phones), set by JS */
.o-pinned .o-journey { padding-block: 0; }
.o-pinned .o-journey-inner { min-height: calc(100svh - var(--lol-header-h)); padding-block: clamp(1.5rem, 1rem + 3vh, 4rem); }
.o-pinned .o-journey-cue { display: block; margin-bottom: 1rem; }
@media (max-width: 991.98px) {
  .o-journey-visual { width: min(86vw, 420px); }
  .o-pinned .o-journey-inner { gap: 0.75rem; align-content: center; }
  .o-pinned .o-journey-visual { order: -1; width: min(72vw, 36svh, 380px); }
  .o-pinned .o-journey h2 { font-size: clamp(1.35rem, 1rem + 2vw, 1.9rem); margin: 0.5rem 0 0.75rem; }
  .o-pinned .o-journey-cue { display: none; }
  .o-pinned .o-step-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.9rem; }
  .o-pinned .o-step-btn { grid-template-columns: 1fr; padding: 0.2rem 0; }
  .o-pinned .o-step-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .o-pinned .o-panel h3 { display: block; font-size: 1.15rem; }
  .o-pinned .o-panel p { font-size: 0.95rem; margin-bottom: 0.6rem; }
  .o-pinned .o-legend { display: none; }
  .o-pinned .o-journey .eyebrow { margin-bottom: 0; }
}

/* ---------- 4b. Explore the suite (orbit) ------------------------------ */
.o-suite { padding-block: clamp(5rem, 3rem + 6vw, 9rem); background: #fff; overflow: hidden; }
.o-suite .section-head h2 { max-width: 24ch; text-wrap: balance; }
.o-suite-grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; margin-top: clamp(2rem, 1rem + 2vw, 3rem); }
@media (min-width: 992px) { .o-suite-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.o-orbit { width: min(100%, 540px); justify-self: center; }
.o-rot { transform: rotate(var(--rot, 0deg)); transition: transform 1s var(--lol-ease, ease); }
.o-node { transform: rotate(var(--a)) translate(150px, 0); cursor: pointer; pointer-events: all; }
.o-node-in { transform: rotate(calc(-1 * (var(--a) + var(--rot, 0deg)))); transition: transform 1s var(--lol-ease, ease); }
.o-node circle { fill: #fff; stroke: var(--lol-border); stroke-width: 3; transition: fill 0.35s, stroke 0.35s, r 0.35s; }
.o-node text { font: 800 14px/1 "Plus Jakarta Sans", system-ui, sans-serif; fill: var(--lol-navy); text-anchor: middle; letter-spacing: -0.02em; transition: fill 0.35s; }
.o-node:hover circle { stroke: var(--lol-primary-ink); }
.o-node.is-on circle { fill: var(--lol-navy); stroke: var(--lol-primary); r: 46; }
.o-node.is-on text { fill: #fff; }
.o-spoke { stroke: var(--lol-border); stroke-width: 2; stroke-dasharray: 4 6; transition: stroke 0.35s; }
.o-spoke.is-on { stroke: var(--lol-primary-ink); animation: o-flowdash 1s linear infinite reverse; }
.o-ring-draw { stroke-dasharray: 100; stroke-dashoffset: var(--draw, 0); }
.o-hub { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.25rem; pointer-events: none; }
.o-hub b { color: var(--lol-navy); font-size: 0.9rem; letter-spacing: -0.01em; }

.o-suite-panel { min-width: 0; }
.o-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.o-tabs button {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem;
  color: var(--lol-primary-ink); background: var(--lol-mist); border: 1px solid var(--lol-border);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.o-tabs button:hover { border-color: var(--lol-primary-ink); }
.o-tabs button[aria-selected="true"] { background: var(--lol-navy); color: #fff; border-color: var(--lol-navy); }
.o-tabs button:focus-visible { outline: 2px solid var(--lol-primary-ink); outline-offset: 3px; }
.o-tp { display: grid; gap: 0.25rem; }
.o-tp + .o-tp { margin-top: 2.5rem; }
.o-tp-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lol-primary-ink); margin: 0; }
.o-tp h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); letter-spacing: -0.035em; color: var(--lol-navy); margin: 0.35rem 0 0.75rem; }
.o-tp ul { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.o-tp li { position: relative; padding-left: 1.6rem; color: var(--lol-charcoal); }
.o-tp li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 0.85em; height: 0.85em; border-radius: 50%; border: 3px solid var(--lol-primary); }
.o-handoff { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: 14px; background: var(--lol-mist); color: var(--lol-primary-ink); font-size: 0.95rem; font-weight: 600; margin: 0 0 1.25rem; max-width: 52ch; }
.o-handoff .bi { font-size: 1.1rem; line-height: 1.3; }
.o-tp .btn { justify-self: start; }
.o-js .o-tp + .o-tp { margin-top: 0; }
.o-js .o-tp[hidden] { display: none !important; }
.o-js .o-tp:not([hidden]) { animation: o-tp-in 0.5s var(--lol-ease, ease); }
@keyframes o-tp-in { from { opacity: 0; transform: translateY(12px); } }
/* Without JS the orbit has no tabs to drive it: hide the tab row */
html:not(.o-ready) .o-tabs { display: none; }

/* ---------- 3. Statement: the "tech O" -------------------------------- */
.s-grid { display: grid; gap: 2.5rem; align-items: center; position: relative; }
.s-copy { position: relative; z-index: 1; min-width: 0; }
.s-o { position: relative; width: min(100%, 64vh, 540px); aspect-ratio: 1; justify-self: center; --sp: 1; }
@media (min-width: 992px) {
  .s-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
  .s-grid .h-statement-text { font-size: clamp(2rem, 0.9rem + 2.6vw, 3.9rem); max-width: 22ch; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .s-o { width: min(62vw, 40vh); }
}
/* Phones: the O sits behind the words as a quiet, moving watermark */
@media (max-width: 767.98px) {
  .s-o { position: absolute; z-index: 0; width: min(92vw, 62vh); right: -28vw; top: 50%; transform: translateY(-50%); opacity: 0.32; }
  .s-o .s-node text, .s-o .s-center text { display: none; }
}
.s-o .o-svg { overflow: visible; }
.s-track { stroke: rgba(255, 255, 255, 0.07); stroke-width: 26; }
.s-ring {
  stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--sp) * 100);
  transform: rotate(-90deg); filter: drop-shadow(0 0 14px rgba(216, 57, 93, 0.45));
}
.s-core { opacity: var(--sp); }
.s-gear { stroke: var(--lol-primary); stroke-width: 2; stroke-dasharray: 2 12; opacity: 0.55; transform-origin: 0 0; animation: o-spin 36s linear infinite; }
.s-gear-2 { stroke: var(--lol-border); stroke-dasharray: 18 10; opacity: 0.25; animation-duration: 24s; animation-direction: reverse; }
.s-trace { fill: none; stroke: rgba(177, 190, 202, 0.28); stroke-width: 2; stroke-linejoin: round; }
.s-pad { fill: rgba(177, 190, 202, 0.45); }
.s-sig { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 10 140; stroke-dashoffset: 10; opacity: 0; }
.s-pulses circle { fill: #fff; filter: drop-shadow(0 0 6px #3857ef); opacity: 0; transition: opacity 0.5s; }
.s-node { transition: opacity 0.5s, transform 0.6s var(--lol-ease, ease); transform-box: fill-box; transform-origin: center; }
.s-node line { stroke: var(--lol-primary); stroke-width: 2; stroke-dasharray: 3 4; }
.s-node circle { fill: #002433; stroke: var(--lol-primary); stroke-width: 2; transition: fill 0.4s, stroke 0.4s; }
.s-node text, .s-center text { fill: #fff; text-anchor: middle; font-family: var(--lol-font); font-weight: 700; }
.s-node text { font-size: 11px; letter-spacing: 0.02em; }
.s-beat { fill: rgba(216, 57, 93, 0.12); stroke: rgba(177, 190, 202, 0.45); stroke-width: 1.5; transform-origin: 0 0; }
.s-center { transition: opacity 0.6s; }
.s-center .s-center-k { font-size: 12px; letter-spacing: 0.3em; fill: var(--lol-border); }
.s-center .s-center-t { font-size: 27px; font-weight: 800; letter-spacing: 0.04em; }

/* Before JS draws it in (motion on only) */
.s-js .s-node { opacity: 0; transform: scale(0.6); }
.s-js .s-center { opacity: 0.25; }
.s-js.is-core .s-center { opacity: 1; }
.s-js.is-n0 [data-s-node="0"], .s-js.is-n1 [data-s-node="1"], .s-js.is-n2 [data-s-node="2"] { opacity: 1; transform: none; }
.s-js.is-n0 [data-s-node="0"] circle, .s-js.is-n1 [data-s-node="1"] circle, .s-js.is-n2 [data-s-node="2"] circle { fill: #d8395d; stroke: #b1beca; }
/* Powered on: signals run along the traces, pulses circle the O, the core beats */
.s-o:not(.s-js) .s-sig, .s-o.is-on .s-sig { opacity: 1; animation: s-sig 2.6s linear infinite; animation-delay: var(--dl, 0s); }
.s-o:not(.s-js) .s-pulses circle, .s-o.is-on .s-pulses circle { opacity: 1; }
.s-o:not(.s-js) .s-beat, .s-o.is-on .s-beat { animation: s-beat 2.4s ease-in-out infinite; }
@keyframes s-sig { from { stroke-dashoffset: 10; } to { stroke-dashoffset: -100; } }
@keyframes s-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); fill: rgba(216, 57, 93, 0.22); } }

/* ---------- 4. Values: O-centred numbers + background motion ------------- */
.h-values { overflow-x: clip; }
.h-value { position: relative; }
.h-value > :not(.h-value-bg) { position: relative; z-index: 1; }
.h-num { -webkit-text-stroke: 0; color: inherit; font-size: 1rem; line-height: 1; margin-bottom: 1.5rem; padding: 14px; }
/* The O with breathing space: the number sits in the middle of the ring */
.h-num-o {
  position: relative; display: grid; place-items: center;
  width: clamp(6.25rem, 4.75rem + 4vw, 8.75rem); aspect-ratio: 1; border-radius: 50%;
}
.h-num-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg, #d8395d, #3857ef, #002433, #d8395d);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(85% - 0.5px), #000 85%);
          mask: radial-gradient(farthest-side, transparent calc(85% - 0.5px), #000 85%);
}
.h-num-o::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1.5px solid var(--lol-border);
  animation: v-breathe 4.5s ease-in-out infinite;
}
.h-num-o::after { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: var(--lol-mist); z-index: -1; }
.h-num-t {
  position: relative; font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.04em;
  color: var(--lol-navy); font-variant-numeric: tabular-nums; line-height: 1;
}
@keyframes v-breathe { 0%, 100% { transform: scale(0.94); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 0.3; } }

.h-value-bg {
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(-4rem, -2rem - 1.5vw, -2rem); bottom: clamp(-4rem, -2rem - 1.5vw, -2rem);
  left: 50%; width: 100vw; transform: translateX(-50%);
  -webkit-mask: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.h-value-bg svg { display: block; width: 100%; height: 100%; opacity: 0.75; }
/* A calm reading zone: the scene fades out behind the words */
.h-value-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -3rem -3rem; pointer-events: none;
  background: radial-gradient(closest-side, #fff 62%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0));
}
.h-value-bg:not(.is-live) * { animation-play-state: paused !important; }
.v-lane { stroke: var(--lol-border); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.v-card rect { fill: #fff; stroke: #9FB0C0; stroke-width: 2; }
.v-card .v-av { fill: var(--lol-border); }
.v-card .v-ln { stroke: var(--lol-border); stroke-width: 5; stroke-linecap: round; }
.v-card .v-ok { fill: #d8395d; }
.v-card .v-ok path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v-mover { animation: v-move var(--d) linear infinite; animation-delay: var(--dl); }
.v-mover .v-tilt { animation: v-tidy var(--d) linear infinite; animation-delay: var(--dl); }
.v-mover .v-ok { animation: v-ok var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes v-move { from { transform: translateX(-120px); } to { transform: translateX(1560px); } }
@keyframes v-tidy { 0% { transform: rotate(-9deg) translateY(-14px); } 25% { transform: rotate(7deg) translateY(10px); } 50%, 100% { transform: none; } }
@keyframes v-ok { 0%, 70% { opacity: 0; transform: scale(0.4); } 72%, 100% { opacity: 1; transform: none; } }
.v-gate { stroke: var(--lol-primary); stroke-width: 2; stroke-dasharray: 6 8; }
.v-gate-o { fill: #fff; stroke: #3857ef; stroke-width: 5; transform-box: fill-box; transform-origin: center; animation: v-gate 2.4s ease-in-out infinite; }
@keyframes v-gate { 50% { transform: scale(1.18); stroke: #d8395d; } }

.v-ripple { fill: none; stroke: #3857ef; stroke-width: 2; transform-origin: var(--ox) var(--oy); animation: v-ripple 6s linear infinite; animation-delay: var(--dl); opacity: 0; }
@keyframes v-ripple { 0% { transform: scale(0.15); opacity: 0.7; } 100% { transform: scale(1); opacity: 0; } }
.v-venue { fill: #fff; stroke: #3857ef; stroke-width: 3; }
.v-venue-o { fill: none; stroke: #d8395d; stroke-width: 7; }
.v-link { fill: none; stroke: #9FB0C0; stroke-width: 2; stroke-dasharray: 5 9; animation: v-flow 1.6s linear infinite; }
@keyframes v-flow { to { stroke-dashoffset: -28; } }
.v-peer circle { fill: #fff; stroke: #9FB0C0; stroke-width: 2.5; }
.v-peer .v-head { fill: #9FB0C0; stroke: none; }
.v-peer { transform-box: fill-box; transform-origin: center; animation: v-pop 1.5s ease-out infinite; animation-delay: var(--dl); }
@keyframes v-pop { 0% { transform: scale(1.25); } 30%, 100% { transform: none; } }

.v-road { fill: none; stroke: var(--lol-border); stroke-width: 16; stroke-linecap: round; opacity: 0.8; }
.v-road-mid { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 10 12; }
.v-ms circle { stroke: #3857ef; stroke-width: 3; }
.v-ms path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v-ms text { font-family: var(--lol-font); font-size: 13px; font-weight: 700; fill: #5F6878; text-anchor: middle; }
.v-runner { fill: #d8395d; stroke: #fff; stroke-width: 4; filter: drop-shadow(0 4px 10px rgba(216, 57, 93, 0.45)); }
.v-runner-halo { fill: rgba(216, 57, 93, 0.25); }

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .o-stage { display: none; }
  .s-gear, .s-sig, .s-beat, .h-num-o::before, .v-mover, .v-mover .v-tilt, .v-mover .v-ok, .v-gate-o, .v-link, .v-peer { animation: none !important; }
  .s-sig { opacity: 0.6; stroke-dashoffset: -40; }
  .v-ripple { animation: none; opacity: 0.35; transform: scale(var(--s0, 0.5)); }
  .o-dash, .o-scan, .is-step-1 .o-arc, .is-step-2 .o-ripple, .is-step-2 .o-link, .o-spoke.is-on, .o-js .o-tp:not([hidden]) { animation: none; }
  .o-scan { transform: none; }
  .is-step-1 .o-arc { stroke-dashoffset: 0; }
  .o-tilt, .o-rot, .o-node-in, .o-dot, .o-seg, .o-js .o-panel, .o-js .o-panel.is-active, .o-center-item { transition: none; }
  .o-flow { display: none; }
}