/* ════════════════════════════════════════════════════════
   AUTOMOVE · Fahrzeugüberführung
   Design system: bold automotive editorial
   ════════════════════════════════════════════════════════ */

:root {
    /* Palette */
    --ink: #0a0a0b;
    --ink-soft: #141416;
    --ink-line: rgba(255, 255, 255, 0.08);
    --paper: #f5f1ea;
    --paper-warm: #ede7dc;
    --paper-line: rgba(10, 10, 11, 0.08);
    /* Brand red (variable names kept as --orange for internal back-compat) */
    --orange: #e30613;
    --orange-deep: #a8000d;
    --orange-soft: rgba(227, 6, 19, 0.12);
    --steel: #2a2a2e;
    --ash: #8b8a86;
    --ash-light: rgba(255, 255, 255, 0.55);

    /* Typography */
    --font-display: 'Anton', 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-body: 'Manrope', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Spacing */
    --container: 1320px;
    --gutter: clamp(20px, 4vw, 56px);

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-sharp: cubic-bezier(0.6, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background: var(--ink);
    color: var(--paper);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    cursor: none;
}

@media (pointer: coarse), (max-width: 900px) {
    body { cursor: auto; }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; cursor: none; }
button, input, textarea { font-family: inherit; cursor: none; }

@media (pointer: coarse), (max-width: 900px) {
    a, button, input, textarea { cursor: auto; }
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    width: 100%;
}

/* ════════════════════════════════════════════════════════
   CUSTOM CURSOR
   ════════════════════════════════════════════════════════ */
.cursor, .cursor-dot {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: transform;
    mix-blend-mode: difference;
}
.cursor {
    width: 32px;
    height: 32px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cursor-dot {
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
}
.cursor.is-hover {
    width: 56px;
    height: 56px;
    background: var(--orange);
    border-color: var(--orange);
    mix-blend-mode: normal;
}

@media (pointer: coarse), (max-width: 900px) {
    .cursor, .cursor-dot { display: none; }
}

/* ════════════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════════════ */
.nav {
    position: fixed;
    top: var(--announce-h, 38px); left: 0; right: 0;
    z-index: 100;
    padding: 22px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(to bottom, rgba(10, 10, 11, 0.85), rgba(10, 10, 11, 0));
    backdrop-filter: blur(0);
    transition: backdrop-filter 0.35s var(--ease), background 0.35s var(--ease), padding 0.35s var(--ease), border-color 0.35s var(--ease), top 0.4s var(--ease);
    border-bottom: 1px solid transparent;
}
html.no-announce { --announce-h: 0px; }
@media (max-width: 720px) {
    :root { --announce-h: 34px; }
}
.nav.is-scrolled {
    background: rgba(10, 10, 11, 0.78);
    backdrop-filter: blur(20px) saturate(140%);
    padding: 14px var(--gutter);
    border-bottom-color: var(--ink-line);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1;
}
.nav-icon {
    height: 56px;
    width: auto;
    display: block;
    filter: drop-shadow(0 4px 14px rgba(227, 6, 19, 0.28));
    transition: transform 0.4s var(--ease);
}
.nav-brand:hover .nav-icon { transform: translateX(-2px) scale(1.04); }
.nav.is-scrolled .nav-icon { height: 46px; width: auto; }
.nav-wordmark {
    display: inline-flex;
    flex-direction: column;
    line-height: 0.92;
    text-transform: uppercase;
}
.nav-wordmark-row {
    font-size: 24px;
    letter-spacing: 0.04em;
}
.nav-wordmark-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--orange);
    margin-top: 4px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
}
.nav-wordmark--orange {
    color: var(--orange);
}

.nav-links {
    display: flex;
    gap: 30px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.nav-links a {
    position: relative;
    padding: 8px 0;
    transition: color 0.3s var(--ease);
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease);
}
.nav-links a:hover {
    color: #fff;
}
.nav-links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 6px 4px;
    background: rgba(20, 20, 22, 0.5);
    border: 1px solid var(--ink-line);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ash);
    backdrop-filter: blur(6px);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
    position: relative;
}
.lang-switch:hover { border-color: rgba(255,255,255,0.18); }
.lang-opt {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 100px;
    transition: color 0.3s var(--ease), background 0.3s var(--ease);
    line-height: 1;
}
.lang-opt.is-active {
    color: #fff;
    background: var(--orange);
}
.lang-sep {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--ink-line);
    margin: 0 2px;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--orange);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--orange);
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}
.nav-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: translateY(100%);
    transition: transform 0.35s var(--ease);
    z-index: 0;
}
.nav-cta:hover::before { transform: translateY(0); }
.nav-cta:hover { border-color: #fff; color: #fff; }
.nav-cta > * { position: relative; z-index: 1; }

.hamburger {
    display: none;
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-items: flex-end;
}
.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    transition: all 0.3s var(--ease);
}
.hamburger span:last-child { width: 14px; }

@media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .hamburger { display: flex; }
    .nav-links.is-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--ink);
        padding: 24px var(--gutter);
        border-top: 1px solid var(--ink-line);
        gap: 20px;
        align-items: flex-start;
    }
}

/* ════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 100vh;
    background: radial-gradient(ellipse at 70% 30%, #1a1410 0%, var(--ink) 55%) , var(--ink);
    overflow: hidden;
    padding: 140px 0 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-layers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Bg gradient blob */
.hero-bg-gradient {
    position: absolute;
    top: -20%; right: -20%;
    width: 90vw; height: 90vw;
    max-width: 1200px;
    max-height: 1200px;
    background: radial-gradient(circle, rgba(227, 6, 19, 0.18), transparent 60%);
    filter: blur(40px);
    will-change: transform;
}

/* Horizon dashes */
.hero-horizon {
    position: absolute;
    top: 50%; left: 0; right: 0;
    transform: translateY(-50%);
    will-change: transform;
}

/* Perspective grid floor */
.hero-grid {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60%;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(800px) rotateX(60deg);
    transform-origin: bottom center;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 80%, transparent 100%);
    will-change: transform;
    animation: gridScroll 8s linear infinite;
}
@keyframes gridScroll {
    from { background-position: 0 0; }
    to { background-position: 0 60px; }
}

/* Speed lines (vertical streaks) */
.hero-speedlines {
    position: absolute;
    inset: 0;
}
.hero-speedlines span {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(227, 6, 19, 0.35), transparent);
    left: calc(var(--i) * 12%);
    animation: speedStream calc(2s + var(--i) * 0.3s) linear infinite;
    animation-delay: calc(var(--i) * -0.3s);
}
@keyframes speedStream {
    0% { transform: translateY(-100%); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
}

/* ── Racing car with smoke trail ───────────────── */
.race-track {
    position: absolute;
    top: 54%;
    left: 38%;
    right: 0;
    height: 110px;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.race-car {
    position: absolute;
    bottom: 0;
    left: -240px;
    width: 220px;
    opacity: 0.92;
    /* Synced 1:1 with the speedometer needle. Linear easing on both, so the
       car moves at a constant pace across the track while the needle climbs
       at a constant pace toward max: they both arrive together. */
    animation: raceAcross 6s linear infinite;
    will-change: transform;
    filter: drop-shadow(0 8px 18px rgba(227, 6, 19, 0.35));
}
.race-car-img {
    width: 100%;
    height: auto;
    display: block;
    /* slight motion blur on the car as it speeds up */
    animation: carBounce 0.5s ease-in-out infinite;
}
.race-car-svg {
    width: 100%;
    height: auto;
    display: block;
}
@keyframes raceAcross {
    /* 0–85%: car drives the same arc as the needle ramping up to 480 km */
    0%   { transform: translateX(0); opacity: 0; }
    6%   { opacity: 0.92; }
    80%  { opacity: 0.92; }
    /* 85%: car has exited and faded: matches the instant the needle hits max */
    85%  { transform: translateX(calc(62vw + 280px)); opacity: 0; }
    /* 85–100%: hidden during the needle's hold + reset phase */
    100% { transform: translateX(calc(62vw + 280px)); opacity: 0; }
}
@keyframes carBounce {
    0%, 100% { transform: translateY(0) skewX(0deg); }
    50% { transform: translateY(-1.5px) skewX(-0.4deg); }
}

/* Smoke trail emitted from rear (left side of the car) */
.smoke-trail {
    position: absolute;
    bottom: 6%;
    right: 96%;
    width: 320px;
    height: 100%;
    pointer-events: none;
}
.smoke-puff {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.55), rgba(210, 210, 220, 0.18) 60%, transparent 80%);
    filter: blur(3px);
    opacity: 0;
    transform: translate(0, 0) scale(0.35);
    animation: smokePuff 1.6s ease-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes smokePuff {
    0%   { transform: translate(0, 0) scale(0.35); opacity: 0; }
    10%  { opacity: 0.75; }
    50%  { opacity: 0.55; }
    100% { transform: translate(-300px, -50px) scale(5.5); opacity: 0; }
}

/* Motion streak under the car (asphalt blur) */
.race-car::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: -20%;
    width: 160%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(227, 6, 19, 0.55) 40%, rgba(227, 6, 19, 0.9), rgba(227, 6, 19, 0.55) 60%, transparent);
    filter: blur(2px);
    opacity: 0.7;
}

/* Note: mobile race-track + race-car rules consolidated in the main mobile
   @media (max-width: 720px) block further down. Smoke trail keeps default. */

@media (prefers-reduced-motion: reduce) {
    .race-car, .smoke-puff, .race-car-img { animation: none; opacity: 0; }
}

/* Speedometer */
.hero-speedo {
    position: absolute;
    top: 8%;
    right: 1%;
    width: clamp(300px, 36vw, 600px);
    will-change: transform;
    opacity: 0;
    animation: heroFade 1.2s var(--ease) 0.3s forwards;
}
.speedo-svg { width: 100%; height: auto; }
.speedo-needle {
    transform-origin: 200px 200px;
    will-change: transform;
    /* Needle rotation is driven by JS (requestAnimationFrame) in script.js, sharing
       the EXACT same clock as the km reading so the two can never desync on slow
       loads. (The old `animation: needleSweep` ran on its own clock — that was the bug.) */
}

/* Live fare-meter tick pulse: subtle scale-up + brightness flash on each digit change */
#speedoPrice {
    transform-origin: center;
    transform-box: fill-box;
    transition: filter 0.18s ease-out, opacity 0.18s ease-out;
}
#speedoPrice.is-ticking {
    animation: priceTick 0.18s ease-out;
}
@keyframes priceTick {
    0%   { filter: brightness(1.0); }
    35%  { filter: brightness(1.6) drop-shadow(0 0 6px rgba(227,6,19,0.7)); }
    100% { filter: brightness(1.0); }
}

/* up-arrow bounces softly each tick to reinforce direction */
#speedoArrow {
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 0.18s ease-out;
}
#speedoArrow.is-up {
    animation: arrowUp 0.4s ease-out;
}
@keyframes arrowUp {
    0%   { transform: translateY(0); filter: drop-shadow(0 0 0 #00ff88); }
    40%  { transform: translateY(-3px); filter: drop-shadow(0 0 6px #00ff88); }
    100% { transform: translateY(0); }
}
#speedoPriceGroup { transition: opacity 0.3s ease; }

/* Car logo silhouette */
.hero-car {
    position: absolute;
    bottom: 16%;
    right: -2%;
    width: clamp(200px, 20vw, 300px);
    opacity: 0.1;
    mix-blend-mode: screen;
    filter: drop-shadow(0 20px 30px rgba(227, 6, 19, 0.25));
    will-change: transform;
    animation: heroFade 1.8s var(--ease) 0.5s forwards, carFloat 6s ease-in-out 2s infinite;
}
@keyframes carFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes heroFade {
    from { opacity: 0; }
    to { opacity: 0.85; }
}
.hero-car { animation-fill-mode: forwards; }

/* Floating tickets */
.hero-ticket {
    position: absolute;
    padding: 14px 18px;
    background: rgba(20, 20, 22, 0.78);
    border: 1px solid var(--ink-line);
    backdrop-filter: blur(12px);
    border-radius: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    will-change: transform;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    animation: ticketIn 0.9s var(--ease) forwards;
}
.hero-ticket--1 {
    top: 22%;
    right: 4%;
    animation-delay: 1.1s;
}
.hero-ticket--2 {
    top: 44%;
    right: 9%;
    animation-delay: 1.4s;
    padding: 12px 16px;
}
@media (max-width: 1200px) {
    .hero-ticket--1 { top: 18%; right: 3%; }
    .hero-ticket--2 { top: 38%; right: 8%; }
}
@keyframes ticketIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ticket-label, .ticket-status {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ash-light);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.ticket-value {
    font-family: var(--font-display);
    font-size: 18px;
    color: #fff;
    letter-spacing: 0.04em;
}
.ticket-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--orange);
    margin-top: 2px;
}
.ticket-route {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 20px;
    color: #fff;
    letter-spacing: 0.05em;
}
.ticket-eta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--orange);
    margin-top: 6px;
}
.dot-live {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
    animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* Hero content */
.hero-content {
    padding: 0 var(--gutter);
    max-width: var(--container);
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* ════════════════════════════════════════════════════════
   HERO — magazine-cover layout: text LEFT, speedometer RIGHT (big),
   stamp floats as a tilted overlay sticker in the top-right corner
   ════════════════════════════════════════════════════════ */
.hero-three {
    display: grid;
    /* 2 main columns: text on the left, speedometer takes the right (bigger half). */
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
    gap: clamp(24px, 3.5vw, 64px);
    /* Align both columns to TOP so the discount pill and the eyebrow pill share the same vertical line */
    align-items: start;
    width: 100%;
    position: relative;
}
.hero-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.hero-col--text {
    align-items: flex-start;
    justify-content: flex-start;
}
/* The hero-sub-row contains the CTA buttons AND the race-track on desktop.
   Making it the positioned ancestor lets us anchor the car directly below
   the last button regardless of how tall the text column is. */
.hero-sub-row {
    position: relative;
}
/* The stamp column is invisible — its child (the stamp) escapes via position: absolute */
.hero-col--stamp {
    display: contents;
}
.hero-col--speedo {
    align-items: center;
    /* Pill at top (aligned with eyebrow), speedometer takes the remaining space below */
    justify-content: flex-start;
    position: relative;
}
/* ── Speedometer: dominant right element, with a subtle radial glow halo
   Vertically centered in the space below the pill (margin auto top + bottom). ── */
.hero-three .hero-speedo {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 760px;
    margin: auto;
    /* Radial glow behind the dial — adds depth without distracting */
    filter: drop-shadow(0 24px 60px rgba(227, 6, 19, 0.18));
}
.hero-col--speedo::before {
    content: '';
    position: absolute;
    inset: 8% 5%;
    background: radial-gradient(ellipse at center, rgba(227,6,19,0.10) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
    animation: speedoHalo 4s ease-in-out infinite;
}
@keyframes speedoHalo {
    0%, 100% { opacity: 0.7; transform: scale(0.98); }
    50%      { opacity: 1;   transform: scale(1.02); }
}

/* Promo card positioning is in its dedicated block further down (~line 1755). */

/* ── Race track: lives INSIDE .hero-sub-row now (right after the .hero-cta-group),
   anchored to the bottom of the sub-row so the car starts visually right beneath
   the Preisrechner button regardless of viewport height ── */
.hero-three .race-track {
    position: absolute;
    /* Just below the bottom of the sub-row (which ends right at the CTAs) */
    top: calc(100% + 16px);
    /* Starts at the right edge of the button (button max-width 300px + 16px breathing gap) */
    left: 316px;
    /* Extends across to the right edge of the viewport (well beyond the text column) */
    width: 100vw;
    height: 110px;
    overflow: hidden;
    z-index: 4;
    pointer-events: none;
    margin-top: 0;
    right: auto;
    bottom: auto;
}

/* Desktop only (≥901px): draw the car 2× larger to fill the empty band.
   The leading (right) edge path is kept identical (left + width = −20px), so the
   SHARED raceAcross keyframe still fades the car in / out at the exact same moments
   — the car is simply longer. The track grows UPWARD (top reduced by the same 80px
   added to height) so the ground baseline stays locked while the taller body fills
   the previously-empty space above. Mobile/tablet keep their own car + track sizes. */
@media (min-width: 901px) {
    .race-car {
        width: 440px;
        left: -460px;
    }
    .hero-three .race-track {
        height: 190px;
        top: calc(100% - 64px);
    }
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ash-light);
    padding: 8px 16px;
    border: 1px solid var(--ink-line);
    border-radius: 100px;
    margin-bottom: 32px;
    background: rgba(20, 20, 22, 0.4);
    backdrop-filter: blur(8px);
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    /* Bold and confident — has the dedicated left column to itself */
    font-size: clamp(48px, 6.8vw, 112px);
    line-height: 1.08;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 36px;
    max-width: 100%;
}
@media (max-width: 900px) {
    .hero-title { max-width: 100%; }
}
.hero-title .line {
    display: block;
    overflow: hidden;
}
.hero-title .word {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
}
.hero-title .word--accent {
    color: var(--orange);
    font-style: italic;
    position: relative;
    /* Compensate for the italic slant + underline overflow so the final
       letter (e.g. "G" of FAHRZEUG) doesn't get clipped by .line overflow:hidden */
    padding-right: 0.12em;
    margin-right: 0.04em;
}
.hero-title .word--accent::after {
    content: '';
    position: absolute;
    bottom: -0.06em;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--orange);
    transform: scaleX(0) skewX(-12deg);
    transform-origin: left;
    animation: underlineGrow 0.9s var(--ease) 1.3s forwards;
}
@keyframes underlineGrow {
    to { transform: scaleX(1) skewX(-12deg); }
}

.hero-sub-row {
    display: flex;
    flex-direction: column;
    gap: 28px;
    /* Margin-bottom on desktop reserves vertical space for the absolutely-positioned
       race-track that sits below the CTAs (race-track is 110px tall + 16px offset).
       On mobile (display:contents on sub-row) this margin is ignored automatically. */
    margin-bottom: 140px;
    max-width: 680px;
}
.hero-sub {
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    max-width: 540px;
    font-weight: 400;
}
.hero-sub strong {
    color: #fff;
    font-weight: 600;
}

.hero-cta-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    max-width: 300px;
}
.hero-cta-group .btn {
    width: 100%;
    justify-content: center;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-top: 36px;
    border-top: 1px solid var(--ink-line);
    /* Break out of .hero-content's 1320px container so the stats span
       the same edges as the nav (viewport-left + gutter to viewport-right - gutter).
       On viewports ≤ 1432px this naturally resolves to width: 100% / margin-left: 0. */
    width: calc(100vw - var(--gutter) * 2);
    margin-left: calc(50% - 50vw + var(--gutter));
    margin-top: 28px;
}
.stat {
    position: relative;
    padding: 24px 24px 22px;
    background: rgba(20, 20, 22, 0.45);
    border: 1px solid var(--ink-line);
    overflow: hidden;
    transition:
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease),
        background 0.4s var(--ease);
    min-width: 0;
}
/* Scanning beam that travels across the top edge — gives the cards a "live system" feel */
.stat::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -40%;
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--orange) 50%, transparent);
    box-shadow: 0 0 12px 1px rgba(227, 6, 19, 0.7);
    animation: statScan 5s linear infinite;
    animation-delay: var(--scan-delay, 0s);
    pointer-events: none;
    z-index: 2;
}
.stat:nth-child(1) { --scan-delay: 0s; }
.stat:nth-child(2) { --scan-delay: 1.25s; }
.stat:nth-child(3) { --scan-delay: 2.5s; }
.stat:nth-child(4) { --scan-delay: 3.75s; }
@keyframes statScan {
    0%   { left: -40%; opacity: 0; }
    10%  { opacity: 1; }
    70%  { opacity: 1; }
    80%  { left: 100%; opacity: 0; }
    100% { left: 100%; opacity: 0; }
}
/* Soft breathing glow */
.stat::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(227, 6, 19, 0);
    animation: statBreathe 4s ease-in-out infinite;
    animation-delay: var(--scan-delay, 0s);
}
@keyframes statBreathe {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(227, 6, 19, 0); }
    50%      { box-shadow: inset 0 0 28px -4px rgba(227, 6, 19, 0.16); }
}
.stat:hover {
    transform: translateY(-3px);
    border-color: rgba(227, 6, 19, 0.4);
    background: rgba(28, 22, 18, 0.6);
}
/* Ghost numeral in the back-left */
.stat-index {
    position: absolute;
    top: 10px;
    left: 18px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ash);
    z-index: 1;
}
/* Small line-icon top-right */
.stat-icon {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 18px;
    height: 18px;
    color: var(--orange);
    opacity: 0.7;
    transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}
.stat:hover .stat-icon {
    opacity: 1;
    transform: rotate(-6deg) scale(1.1);
}
.stat-value {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    margin-top: 22px;
}
.stat-num {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.4vw, 50px);
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1;
}
.stat-suffix {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.6vw, 26px);
    color: var(--orange);
    line-height: 1;
}
.stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ash);
    margin-top: 8px;
    white-space: nowrap;
}
/* Small sub-caption per card — fills the card and adds context */
.stat-caption {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.42);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-weight: 400;
}

/* Trust strip — guarantees row below the stats */
.hero-trust {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    margin-top: 20px;
    background: var(--ink-line);
    border: 1px solid var(--ink-line);
    width: calc(100vw - var(--gutter) * 2);
    margin-left: calc(50% - 50vw + var(--gutter));
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: rgba(10, 10, 11, 0.95);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.trust-item:hover {
    background: rgba(28, 22, 18, 0.95);
    color: #fff;
}
.trust-item svg {
    width: 18px;
    height: 18px;
    color: var(--orange);
    flex-shrink: 0;
}
@media (max-width: 1100px) {
    .hero-trust { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .hero-trust { grid-template-columns: repeat(2, 1fr); }
    .trust-item { padding: 14px 14px; font-size: 10px; gap: 10px; }
    .trust-item svg { width: 16px; height: 16px; }
}
/* Animated orange underline that grows on hover */
.stat-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 24px;
    background: var(--orange);
    transition: width 0.5s var(--ease);
}
.stat:hover .stat-line { width: 100%; }

/* Scroll indicator removed by request — keep the rule as a no-op for safety */
.hero-scroll { display: none !important; }
.scroll-line {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, var(--orange), transparent);
    position: relative;
    overflow: hidden;
}
.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: #fff;
    animation: scrollDrop 2s ease-in-out infinite;
}
@keyframes scrollDrop {
    0% { transform: translateY(-12px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(36px); opacity: 0; }
}

/* Marquee */
.hero-marquee {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    padding: 18px 0;
    background: var(--orange);
    color: var(--ink);
    overflow: hidden;
    border-top: 1px solid var(--orange-deep);
    z-index: 5;
}
.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 36px;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    animation: marqueeRoll 35s linear infinite;
}
.marquee-track .dot-sep {
    font-size: 10px;
    opacity: 0.6;
}
@keyframes marqueeRoll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ════════════════════════════════════════════════════════
   GLOBAL SECTION
   ════════════════════════════════════════════════════════ */
.section {
    padding: clamp(40px, 6vw, 80px) 0;
    position: relative;
}
.section--paper {
    background: var(--paper);
    color: var(--ink);
}
.section--ink {
    background: var(--ink);
    color: var(--paper);
}

.section-head {
    max-width: 920px;
    margin-bottom: clamp(48px, 7vw, 96px);
}
.section-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 28px;
}
.section-eyebrow--light {
    color: var(--ash-light);
}
.dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.dot--orange { background: var(--orange); box-shadow: 0 0 12px var(--orange); }
.dot--ink { background: var(--ink); }

.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(40px, 8vw, 120px);
    line-height: 1.12;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 32px;
}
.section-title--light { color: #fff; }
.section-title--smaller {
    font-size: clamp(36px, 5.5vw, 80px);
}
.italic-accent {
    font-style: italic;
    color: var(--orange);
    font-family: var(--font-display);
    font-weight: 400;
}
.section-lede {
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.6;
    color: var(--steel);
    max-width: 580px;
    font-weight: 400;
}
.section--ink .section-lede { color: rgba(255,255,255,0.7); }

/* ════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 32px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid;
    cursor: none;
    transition: all 0.35s var(--ease);
    position: relative;
    overflow: hidden;
    background: transparent;
    line-height: 1;
}
.btn--primary {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
.btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: translateY(100%);
    transition: transform 0.4s var(--ease);
    z-index: 0;
}
.btn--primary:hover::before { transform: translateY(0); }
.btn--primary:hover { border-color: var(--ink); }
.btn--primary > * { position: relative; z-index: 1; }

.btn--ghost {
    background: transparent;
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}
.btn--ghost:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
}
.section--paper .btn--ghost {
    border-color: rgba(10,10,11,0.3);
    color: var(--ink);
}
.section--paper .btn--ghost:hover {
    background: var(--ink);
    color: #fff;
}

.btn--block { width: 100%; }

.btn-arrow {
    display: inline-block;
    transition: transform 0.3s var(--ease);
}
.btn:hover .btn-arrow { transform: translateX(6px); }

/* ════════════════════════════════════════════════════════
   SERVICES
   ════════════════════════════════════════════════════════ */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    position: relative;
    padding: 40px 36px 36px;
    background: #fff;
    border: 1px solid var(--paper-line);
    transition: all 0.4s var(--ease);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -20px rgba(10,10,11,0.18);
    border-color: var(--ink);
}
.service-card:hover::before { transform: scaleX(1); }

.service-card--featured {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.service-card--featured::before { background: #fff; }
.service-card--featured:hover { background: #161618; }

.service-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 10px;
    background: var(--orange);
    color: #fff;
}

.service-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ash);
    letter-spacing: 0.2em;
    margin-bottom: 28px;
}
.service-card--featured .service-num { color: var(--ash-light); }

.service-icon {
    color: var(--orange);
    margin-bottom: 24px;
}

.service-card h3 {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 16px;
    line-height: 1.05;
}

.service-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--steel);
    margin-bottom: 28px;
    flex: 1;
}
.service-card--featured p { color: rgba(255,255,255,0.7); }

.service-list {
    list-style: none;
    margin-bottom: 28px;
    border-top: 1px solid var(--paper-line);
    padding-top: 20px;
}
.service-card--featured .service-list { border-top-color: rgba(255,255,255,0.12); }

.service-list li {
    position: relative;
    padding: 6px 0 6px 22px;
    font-size: 13px;
    color: var(--steel);
}
.service-card--featured .service-list li { color: rgba(255,255,255,0.78); }
.service-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--orange);
    font-weight: 700;
}

.service-price {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    padding-top: 16px;
    border-top: 1px solid var(--paper-line);
    margin-top: auto;
}
.service-card--featured .service-price {
    color: var(--orange);
    border-top-color: rgba(255,255,255,0.12);
}

/* ════════════════════════════════════════════════════════
   TIMELINE / ABLAUF
   ════════════════════════════════════════════════════════ */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 48px;
}
.timeline-line {
    position: absolute;
    left: 16px;
    top: 0; bottom: 0;
    width: 1px;
    background: rgba(255,255,255,0.1);
}
.timeline-progress {
    position: absolute;
    top: 0; left: 0;
    width: 1px;
    height: 0;
    background: linear-gradient(to bottom, var(--orange), var(--orange-deep));
    box-shadow: 0 0 12px var(--orange);
    transition: height 0.1s linear;
}

.step {
    position: relative;
    padding: 24px 0 64px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: start;
}
.step:last-child { padding-bottom: 0; }

.step-num {
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 0.9;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.02em;
    position: relative;
    transition: color 0.4s var(--ease);
}
.step-num::before {
    content: '';
    position: absolute;
    left: -40px;
    top: 22px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--ink);
    border: 1px solid rgba(255,255,255,0.3);
    transition: all 0.4s var(--ease);
}
.step.in-view .step-num {
    color: var(--orange);
}
.step.in-view .step-num::before {
    background: var(--orange);
    border-color: var(--orange);
    box-shadow: 0 0 0 6px rgba(227,6,19,0.15);
}

.step-content h3 {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.05;
}
.step-content p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin-bottom: 12px;
    max-width: 520px;
}
.step-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--orange);
}

/* ════════════════════════════════════════════════════════
   PRICING — v2 (vehicle matrix + calculator + extras)
   ════════════════════════════════════════════════════════ */
.pricing-head {
    max-width: 880px;
    margin-bottom: 56px;
}
.pricing-head .section-lede {
    margin-top: 20px;
}

/* ── Vehicle matrix ─────────────────────────────────── */
.vehicle-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--paper-line);
}
.vehicle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.vehicle-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--paper-line);
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
    cursor: pointer;
    overflow: hidden;
}
.vehicle-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}
.vehicle-card:hover {
    transform: translateY(-4px);
    border-color: var(--ink);
    box-shadow: 0 24px 48px -28px rgba(0,0,0,0.18);
}
.vehicle-card:hover::before { transform: scaleX(1); }
.vehicle-card.is-selected {
    border-color: var(--orange);
    box-shadow: 0 0 0 1px var(--orange), 0 24px 48px -28px rgba(227,6,19,0.35);
}
.vehicle-card.is-selected::before {
    background: var(--orange);
    transform: scaleX(1);
}
.vehicle-card--popular {
    border-color: var(--ink);
    background: linear-gradient(180deg, #fff 0%, rgba(227,6,19,0.03) 100%);
}
.vehicle-card--popular::before {
    background: var(--orange);
    transform: scaleX(1);
}

.vehicle-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange);
    background: rgba(227,6,19,0.08);
    border: 1px solid rgba(227,6,19,0.25);
    padding: 4px 8px;
    border-radius: 100px;
}
.vehicle-badge--electric {
    color: #0a8f6a;
    background: rgba(10,143,106,0.06);
    border-color: rgba(10,143,106,0.25);
}
.vehicle-badge--oldtimer {
    color: #b94600;
    background: rgba(185,70,0,0.06);
    border-color: rgba(185,70,0,0.25);
}

.vehicle-icon {
    width: 72px;
    height: 42px;
    color: var(--ink);
    margin-bottom: 18px;
}
.vehicle-card--popular .vehicle-icon { color: var(--orange); }
.vehicle-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.vehicle-name {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--ink);
    margin: 0 0 4px;
}
.vehicle-examples {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel);
    margin: 0 0 22px;
    min-height: 26px;
}
.vehicle-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--paper-line);
}
.vp-from {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ash);
}
.vp-num {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--ink);
    letter-spacing: 0.01em;
    line-height: 1;
}
.vehicle-card--popular .vp-num,
.vehicle-card.is-selected .vp-num { color: var(--orange); }
.vp-unit {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--steel);
    text-transform: uppercase;
}
.vehicle-meta {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vm-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--ink);
}
.vm-row--muted {
    color: var(--steel);
    font-size: 10px;
}
.vm-row span:first-child {
    color: var(--ash);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR (top, sticky, marquee)
   ════════════════════════════════════════════════════════ */
:root { --announce-h: 38px; }

.announce-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--announce-h);
    z-index: 101;
    background: linear-gradient(90deg, #e30613 0%, #ee5258 50%, #e30613 100%);
    background-size: 200% 100%;
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    animation: announceShift 9s linear infinite;
    box-shadow: 0 6px 24px -8px rgba(227, 6, 19, 0.6);
}
@keyframes announceShift {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}
.announce-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    flex: 1;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 60px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 60px), transparent);
}
.announce-group {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 32px;
    flex-shrink: 0;
    animation: announceScroll 22s linear infinite;
    white-space: nowrap;
    /* Now an <a> linking to #priceCalc — preserve the original visual */
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s var(--ease);
}
.announce-group:hover {
    filter: brightness(1.1);
}
@keyframes announceScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
.announce-pulse {
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
    animation: announcePulse 1.4s ease-out infinite;
    flex-shrink: 0;
}
@keyframes announcePulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.announce-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    background: rgba(0,0,0,0.18);
    padding: 4px 10px;
    border-radius: 3px;
}
.announce-text {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.02em;
}
.announce-text strong { font-weight: 800; }
.announce-sep {
    opacity: 0.6;
    font-size: 14px;
}
.announce-cta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.announce-arrow {
    font-size: 14px;
    font-weight: 700;
}
.announce-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    padding: 0 14px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    z-index: 2;
    flex-shrink: 0;
}
.announce-close:hover { opacity: 1; }

/* ════════════════════════════════════════════════════════
   HERO PROMO CARD (replaces the rotating stamp)
   Clean editorial card sitting in the upper area of the hero,
   showing the −20% offer in a premium way.
   ════════════════════════════════════════════════════════ */
/* Orbiting discount text around the speedometer (replaces the pill).
   The actual text + path are inside the speedometer SVG; this just enables
   hover effects on the link wrapper. */
#speedoOrbit {
    cursor: pointer;
}
#speedoOrbit:hover text {
    fill: #ee5258;
}
@media (max-width: 1100px) {
    .hero-three {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(20px, 2.6vw, 40px);
    }
    .hero-three .hero-speedo { max-width: 580px; }
}
@media (max-width: 900px) {
    /* Mobile/tablet: collapse the columns AND the sub-row into a single flex column
       so each element (eyebrow, speedometer, H1, sub paragraph, race-track, CTAs)
       becomes a direct flex child of .hero-three. Then flex `order` puts them
       in the desired sequence:
         eyebrow → speedometer → H1 → sub paragraph → race-track → CTAs */
    .hero-three {
        display: flex;
        flex-direction: column;
        gap: 28px;
        grid-template-columns: none;
    }
    .hero-col--text,
    .hero-col--speedo,
    .hero-sub-row {
        display: contents;
    }
    .hero-eyebrow   { order: 1; }
    .hero-speedo    { order: 2; align-self: center; max-width: 480px; width: 100%; margin: 0 auto !important; }
    .hero-title     { order: 3; }
    .hero-sub       { order: 4; }
    .race-track     { order: 5; }
    .hero-cta-group { order: 6; }
    /* Reset race-track so it flows inline above the CTAs (not absolute) */
    .hero-three .race-track {
        position: relative;
        top: auto;
        left: 0;
        width: 100%;
        height: 190px;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    /* Tablet + mobile: draw the car 2× larger. Leading (right) edge kept at the base
       −20px (left + width), so the SHARED raceAcross keyframe enters/exits identically.
       Mobile (≤720px) narrows both the car and the band again just below. */
    .race-car {
        width: 440px;
        left: -460px;
    }
    /* CTA buttons full-width on mobile (match the gutter, no 300px cap) */
    .hero-cta-group {
        max-width: none;
        width: 100%;
    }
}
@media (max-width: 600px) {
    .hero-three { gap: 24px; }
    .hero-speedo { max-width: 340px !important; }
}

/* ════════════════════════════════════════════════════════
   CALCULATOR — discount layout
   ════════════════════════════════════════════════════════ */
.calc-discount-banner {
    margin: 16px 0 20px;
    padding: 12px 18px;
    background: linear-gradient(90deg, rgba(227,6,19,0.10) 0%, rgba(227,6,19,0.04) 100%);
    border: 1px solid rgba(227,6,19,0.3);
    border-left: 3px solid var(--orange);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.cdb-tag {
    background: var(--orange);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.cdb-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
}
.cdb-text strong {
    color: var(--orange);
    font-weight: 800;
    font-size: 15px;
}
.cdb-pulse {
    position: absolute;
    top: 50%;
    left: -40px;
    width: 40px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateY(-50%);
    animation: cdbSweep 3.2s ease-in-out infinite;
}
@keyframes cdbSweep {
    0%   { left: -40px; }
    100% { left: 100%; }
}

.calc-result--discount {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: 0;
    align-items: stretch;
}
.calc-result--discount .calc-cell {
    border-left: 1px solid var(--paper-line);
    padding: 14px 16px;
}
.calc-result--discount .calc-cell:first-child { border-left: 0; padding-left: 0; }
.calc-cell--strike .cc-val {
    text-decoration: line-through;
    text-decoration-color: rgba(10,10,11,0.4);
    text-decoration-thickness: 2px;
    color: var(--steel);
    font-size: 22px;
}
.cc-val--strike {
    text-decoration: line-through;
    text-decoration-color: rgba(10,10,11,0.4);
    text-decoration-thickness: 2px;
    color: var(--steel);
}
.calc-cell--highlight {
    background: linear-gradient(180deg, rgba(227,6,19,0.06) 0%, rgba(227,6,19,0.02) 100%);
    border-left: 1px solid rgba(227,6,19,0.3) !important;
    border-right: 1px solid rgba(227,6,19,0.3);
    position: relative;
}
.calc-cell--highlight::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--orange);
}
.cc-label--orange {
    color: var(--orange) !important;
    font-weight: 700;
}
.cc-val--big {
    font-size: 34px !important;
    line-height: 1;
}
.cc-sub strong {
    color: var(--orange);
    font-weight: 700;
}

/* ── Calculator (two-column with side panel) ──────── */
.calc-wrap {
    margin-top: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: stretch;
}
.calc-side {
    display: flex;
    flex-direction: column;
}
/* Push the "Always included" card to the bottom so it aligns with the calculator's bottom edge */
.calc-side .included-card {
    margin-top: auto;
}
.calc-side .section-eyebrow {
    margin-bottom: 18px;
}
.calc-side-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.4vw, 44px);
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 18px;
}
.calc-side-lede {
    color: var(--steel);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 28px;
}
.calc-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--paper-line);
}
.calc-side-list li {
    padding: 14px 0 14px 28px;
    border-bottom: 1px solid var(--paper-line);
    font-size: 13px;
    color: var(--ink);
    position: relative;
    line-height: 1.4;
}
.calc-side-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 16px;
    height: 1px;
    background: var(--orange);
}

.price-calc {
    background: #fff;
    border: 1px solid var(--paper-line);
    padding: 36px;
    position: relative;
    transition: box-shadow 0.4s var(--ease);
}
.price-calc::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 4px;
    background: var(--orange);
}
.price-calc.is-flashing {
    box-shadow: 0 0 0 4px rgba(227,6,19,0.25), 0 32px 64px -32px rgba(227,6,19,0.4);
}

.calc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--paper-line);
}
.calc-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--steel);
}
.calc-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--steel);
}

.calc-vtype {
    margin-bottom: 20px;
}
.calc-vtype-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ash);
    margin-bottom: 8px;
}
.calc-vtype-select {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--paper-line);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    letter-spacing: 0.02em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%230a0a0b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 18px center;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.calc-vtype-select:hover,
.calc-vtype-select:focus {
    border-color: var(--orange);
    outline: none;
}

.calc-slider {
    margin-bottom: 18px;
}
.calc-slider label {
    display: block;
    font-size: 13px;
    color: var(--steel);
    margin-bottom: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}
.calc-slider label strong {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--ink);
    margin: 0 4px;
    letter-spacing: 0.02em;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    background: var(--paper-line);
    outline: none;
    margin: 8px 0;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--orange);
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(227,6,19,0.4);
    cursor: pointer;
    transition: transform 0.2s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--orange);
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(227,6,19,0.4);
    cursor: pointer;
}

.slider-marks {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ash);
    letter-spacing: 0.1em;
}

.calc-result {
    margin: 24px 0;
    padding: 24px 0;
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
}
.calc-result--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.calc-cell {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0 14px;
    border-left: 1px solid var(--paper-line);
}
.calc-cell:first-child { border-left: 0; padding-left: 0; }
.cc-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ash);
    margin-bottom: 8px;
}
.cc-val {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--ink);
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 4px;
}
.cc-val--orange { color: var(--orange); }
.cc-sub {
    font-size: 11px;
    color: var(--steel);
    line-height: 1.3;
}

.calc-note {
    font-size: 11px;
    color: var(--ash);
    margin-top: 16px;
    text-align: center;
    line-height: 1.5;
}

/* ── Included card (lives inside .calc-side now) ───── */
.included-card {
    background: #fff;
    border: 1px solid var(--paper-line);
    padding: 28px;
    position: relative;
    margin-top: 32px;
}
.included-card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 60px;
    height: 4px;
    background: #0a8f6a;
}
.included-card--compact {
    padding: 24px 26px;
}
.included-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--paper-line);
}
.included-tick {
    width: 32px; height: 32px;
    color: #0a8f6a;
    flex-shrink: 0;
}
.included-tick svg { width: 100%; height: 100%; }
.included-title {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.02em;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.1;
}
.included-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
    margin: 0;
}
.included-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
}
.included-list li {
    padding: 6px 0 6px 22px;
    font-size: 12.5px;
    color: var(--ink);
    position: relative;
    line-height: 1.35;
}
.included-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(10,143,106,0.15);
    border: 1px solid #0a8f6a;
}
.included-list li::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 12px;
    width: 6px;
    height: 3px;
    border-left: 1.5px solid #0a8f6a;
    border-bottom: 1.5px solid #0a8f6a;
    transform: rotate(-45deg);
}

/* ════════════════════════════════════════════════════════
   SURCHARGES — full-width icon-grid section
   ════════════════════════════════════════════════════════ */
.surcharge-section {
    margin-top: 80px;
    padding: 44px 48px;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 244, 232, 0.4) 100%);
    border: 1px solid var(--paper-line);
    position: relative;
}
.surcharge-section::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 4px;
    background: var(--orange);
}
.surcharge-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--paper-line);
}
.surcharge-head-left {
    display: flex;
    align-items: center;
    gap: 18px;
}
.surcharge-plus {
    width: 44px; height: 44px;
    background: var(--orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}
.surcharge-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: 0.02em;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.1;
}
.surcharge-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel);
    margin: 0;
}
.surcharge-count {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel);
}
.surcharge-count strong {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--orange);
    letter-spacing: 0.01em;
    line-height: 1;
}

.surcharge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.surcharge-item {
    background: #fff;
    border: 1px solid var(--paper-line);
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
    overflow: hidden;
}
.surcharge-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}
.surcharge-item:hover {
    transform: translateY(-3px);
    border-color: rgba(227,6,19,0.4);
    box-shadow: 0 18px 36px -24px rgba(227,6,19,0.25);
}
.surcharge-item:hover::before { transform: scaleX(1); }

.si-icon {
    width: 44px;
    height: 44px;
    color: var(--orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(227,6,19,0.08);
    border-radius: 8px;
    flex-shrink: 0;
}
.si-icon svg { width: 26px; height: 26px; }
.si-icon--green {
    color: #0a8f6a;
    background: rgba(10,143,106,0.10);
}
.si-icon--discount {
    color: #0a8f6a;
    background: rgba(10,143,106,0.10);
}

.si-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.si-label {
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.01em;
    color: var(--ink);
    line-height: 1.15;
}
.si-note {
    font-size: 11.5px;
    color: var(--steel);
    line-height: 1.4;
}
.si-val {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.04em;
    padding-top: 10px;
    border-top: 1px dashed var(--paper-line);
    margin-top: auto;
}
.si-val--discount {
    color: #0a8f6a;
}
.surcharge-item--discount {
    background: linear-gradient(180deg, #fff 0%, rgba(10,143,106,0.04) 100%);
    border-color: rgba(10,143,106,0.25);
}
.surcharge-item--discount::before { background: #0a8f6a; }

.pricing-disclaimer {
    margin-top: 48px;
    padding: 24px 28px;
    background: rgba(10,10,11,0.04);
    border-left: 3px solid var(--ink);
    font-size: 13px;
    color: var(--steel);
    line-height: 1.6;
}
.pricing-disclaimer strong {
    color: var(--ink);
}

/* ── Responsive: pricing breakpoints ────────────────── */
@media (max-width: 1200px) {
    .vehicle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .surcharge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calc-wrap { grid-template-columns: 1fr; gap: 32px; }
    .included-list { grid-template-columns: 1fr 1fr; }
    .surcharge-section { padding: 32px 28px; }
    .surcharge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .surcharge-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 600px) {
    .vehicle-grid { grid-template-columns: 1fr; gap: 12px; }
    .calc-result--discount { grid-template-columns: 1fr; gap: 16px; }
    .calc-result--discount .calc-cell { border-left: 0; border-top: 1px solid var(--paper-line); padding: 14px 0 0; }
    .calc-result--discount .calc-cell:first-child { border-top: 0; padding-top: 0; }
    .calc-cell--highlight { border-right: 0 !important; padding: 18px 14px !important; }
    .price-calc, .included-card, .surcharge-section { padding: 22px; }
    .included-list { grid-template-columns: 1fr; }
    .surcharge-grid { grid-template-columns: 1fr; gap: 10px; }
    .vehicle-card { padding: 24px 20px 20px; }
    .vp-num { font-size: 32px; }
    .pricing-disclaimer { padding: 20px 22px; font-size: 12px; }
    .surcharge-count strong { font-size: 28px; }
}

/* ════════════════════════════════════════════════════════
   MAP / COVERAGE
   ════════════════════════════════════════════════════════ */
/* Coverage hero: title left, Germany map merged on the right (bigger & crisper) */
.coverage-hero {
    display: grid;
    /* minmax(0, …) so the title's intrinsic width can't push the map column shut */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
    margin-bottom: 72px;
    position: relative;
}
.coverage-text {
    position: relative;
    z-index: 1;
}
.coverage-hero .section-title {
    margin-bottom: 0;
    /* Slightly tighter on this section so the title doesn't try to grow past its column */
    font-size: clamp(32px, 4.6vw, 64px);
}

.germany-map {
    width: 100%;
    max-width: 620px;            /* bigger */
    margin: 0 auto;
    display: block;
    /* drop-shadow filter removed — it was softening the vector edges and reading as blur.
       Atmospheric glow comes from the radial-gradient pseudo behind it instead. */
}
.germany-map text {
    font-family: 'Manrope', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Subtle radial glow behind the map (replaces the soft drop-shadow) */
.coverage-hero {
    isolation: isolate;
}
.coverage-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 55%;
    height: 90%;
    background: radial-gradient(ellipse at center, rgba(227, 6, 19, 0.12), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 900px) {
    .coverage-hero {
        grid-template-columns: 1fr;
        gap: 48px;
        margin-bottom: 56px;
    }
    .germany-map { max-width: 440px; }
}
.city-pulse {
    animation: cityPulse 2s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
@keyframes cityPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.8); opacity: 0; }
}

.map-side-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 44px);
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 28px;
    letter-spacing: 0.03em;
    font-weight: 400;
    text-align: center;
}

/* ─── Route cards grid ──────────────────────────── */
.routes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}

.route-card {
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    background: rgba(20, 20, 22, 0.55);
    border: 1px solid var(--ink-line);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease),
        background 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}
.route-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: var(--orange);
    transition: width 0.5s var(--ease);
}
.route-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(227, 6, 19, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
}
.route-card:hover {
    transform: translateY(-4px);
    border-color: rgba(227, 6, 19, 0.55);
    background: rgba(28, 22, 18, 0.7);
    box-shadow: 0 24px 50px -16px rgba(227, 6, 19, 0.35), 0 0 0 1px rgba(227, 6, 19, 0.15) inset;
}
.route-card:hover::before { width: 100%; }
.route-card:hover::after { opacity: 1; }

.route-card--featured {
    background: linear-gradient(145deg, rgba(227, 6, 19, 0.12), rgba(20, 20, 22, 0.85) 70%);
    border-color: rgba(227, 6, 19, 0.35);
}
.route-card--featured::before { width: 100%; background: var(--orange); }

.route-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    min-height: 22px;
}
.route-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ash);
    letter-spacing: 0.2em;
}
.route-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 8px;
    background: var(--orange);
    color: #fff;
    border-radius: 2px;
    font-weight: 500;
}
.route-badge--short {
    background: rgba(0, 255, 136, 0.18);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.35);
}

.route-pair {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 18px;
}
.route-from,
.route-to {
    font-family: var(--font-display);
    font-size: clamp(24px, 1.9vw, 32px);
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 400;
}
.route-to {
    color: var(--orange);
}
.route-connector {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 6px 0 6px 4px;
    height: 30px;
    line-height: 1;
}
.route-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.18);
    margin-bottom: 3px;
    margin-left: -2px;
}
.route-line {
    width: 1px;
    flex: 1;
    margin-left: 1px;
    background-image: linear-gradient(to bottom, rgba(227, 6, 19, 0.6) 50%, transparent 50%);
    background-size: 1px 4px;
    background-repeat: repeat-y;
}
.route-arrow {
    color: var(--orange);
    font-size: 10px;
    margin-top: -2px;
    margin-left: -3px;
    line-height: 1;
}

.route-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
}
.route-km {
    color: var(--orange);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.route-duration {
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.route-foot {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: auto;
}
.route-price-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ash);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.route-price-value {
    font-family: var(--font-display);
    font-size: 26px;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1;
    flex: 1;
}
.route-cta-arrow {
    color: var(--orange);
    font-size: 22px;
    line-height: 1;
    transition: transform 0.35s var(--ease);
    font-family: var(--font-mono);
}
.route-card:hover .route-cta-arrow {
    transform: translateX(6px);
}

.map-side-prices-note {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
    text-align: center;
}
.map-side-note {
    margin-top: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    text-align: center;
}
.map-side-note a {
    color: var(--orange);
    border-bottom: 1px solid var(--orange);
}

@media (max-width: 1100px) {
    .routes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .routes-grid { grid-template-columns: 1fr; gap: 14px; }
    .route-card { padding: 22px 20px 18px; }
    .map-wrap { gap: 56px; }
}

/* ════════════════════════════════════════════════════════
   ABOUT
   ════════════════════════════════════════════════════════ */
.about-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 6vw, 84px);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--ink);
    letter-spacing: 0.005em;
    margin: 24px 0 32px;
}

.about-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--steel);
    margin-bottom: 18px;
    max-width: 540px;
}
.about-text strong { color: var(--ink); font-weight: 700; }

.about-pills {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.pill {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 22px;
    background: #fff;
    border: 1px solid var(--paper-line);
}
.pill-num {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--orange);
    letter-spacing: 0.04em;
}
.pill-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
}

.about-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-logo-card {
    background: #fff;
    border: 1px solid var(--paper-line);
    padding: 28px;
    position: relative;
    overflow: hidden;
}
.about-logo-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    background: var(--orange);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.about-logo-card img {
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto 20px;
    display: block;
}
.about-logo-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--paper-line);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.about-logo-meta span:first-child { color: var(--ash); }
.about-logo-meta span:last-child { color: var(--ink); font-weight: 700; }

.about-card {
    background: var(--ink);
    color: #fff;
    padding: 40px 36px;
    position: relative;
}
.about-card::before {
    content: '';
    position: absolute;
    top: -10px; left: -10px;
    width: 60px;
    height: 60px;
    border-top: 2px solid var(--orange);
    border-left: 2px solid var(--orange);
}
.about-card::after {
    content: '';
    position: absolute;
    bottom: -10px; right: -10px;
    width: 60px;
    height: 60px;
    border-bottom: 2px solid var(--orange);
    border-right: 2px solid var(--orange);
}

.about-card-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ash-light);
    margin-bottom: 8px;
}
.about-card-name {
    font-family: var(--font-display);
    font-size: 36px;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1.05;
}
.about-card-role {
    font-size: 13px;
    color: var(--orange);
    margin-top: 6px;
    letter-spacing: 0.05em;
}

.about-card-divider {
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: 28px 0;
}

.about-card-list {
    list-style: none;
}
.about-card-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}
.about-card-list li span:first-child {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ash);
}

.about-card-quote {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-style: italic;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    position: relative;
}
.quote-mark {
    color: var(--orange);
    font-size: 24px;
    font-family: var(--font-display);
    font-style: normal;
}

/* ════════════════════════════════════════════════════════
   CONTACT
   ════════════════════════════════════════════════════════ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: stretch;
}
/* Left column flex-stacks so the contact list pushes to bottom, matching form height */
.contact-left {
    display: flex;
    flex-direction: column;
}
.contact-left .contact-list {
    margin-top: auto;
}

.contact-lede {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin: 32px 0;
    max-width: 480px;
}

.contact-list {
    list-style: none;
    border-top: 1px solid var(--ink-line);
}
.contact-list li {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--ink-line);
    align-items: baseline;
}
.contact-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ash);
}
.contact-value {
    font-size: 16px;
    color: #fff;
    line-height: 1.5;
    transition: color 0.3s var(--ease);
}
a.contact-value:hover { color: var(--orange); }

.contact-form {
    background: var(--ink-soft);
    border: 1px solid var(--ink-line);
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
}
.contact-form::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 3px;
    background: linear-gradient(to right, #25D366 0%, #25D366 60%, var(--orange) 60%, var(--orange) 100%);
}

.form-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ink-line);
}
.form-head-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ash-light);
}
.form-head-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #25D366;
    padding: 5px 10px;
    background: rgba(37, 211, 102, 0.08);
    border: 1px solid rgba(37, 211, 102, 0.25);
    border-radius: 3px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact-form label {
    display: block;
}

.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ash);
    margin-bottom: 8px;
}

.contact-form input:not([type="checkbox"]):not([type="radio"]),
.contact-form textarea {
    width: 100%;
    padding: 14px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink-line);
    color: #fff;
    font-size: 15px;
    font-family: var(--font-body);
    transition: border-color 0.3s var(--ease);
    outline: none;
    resize: vertical;
}
.contact-form input:not([type="checkbox"]):not([type="radio"])::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255,255,255,0.3);
}
.contact-form input:not([type="checkbox"]):not([type="radio"]):focus,
.contact-form textarea:focus {
    border-bottom-color: var(--orange);
}

.form-note {
    font-size: 12px;
    color: var(--ash);
    text-align: center;
    margin-top: 8px;
    min-height: 1.5em;
    transition: color 0.3s var(--ease);
}
.form-note.is-success { color: #00ff88; }

/* ════════════════════════════════════════════════════════
   WHATSAPP FAB
   ════════════════════════════════════════════════════════ */
.wa-fab {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 90;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 12px 30px -6px rgba(37, 211, 102, 0.55),
        0 0 0 0 rgba(37, 211, 102, 0.4);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    animation: waPulse 2.4s ease-out infinite;
}
.wa-fab svg {
    width: 28px;
    height: 28px;
    position: relative;
    z-index: 1;
}
.wa-fab:hover {
    transform: scale(1.08);
    box-shadow:
        0 16px 36px -6px rgba(37, 211, 102, 0.75),
        0 0 0 0 rgba(37, 211, 102, 0);
}
.wa-fab-tip {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: var(--ink);
    color: #fff;
    padding: 10px 14px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    border: 1px solid var(--ink-line);
}
.wa-fab-tip::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px; height: 8px;
    background: var(--ink);
    border-right: 1px solid var(--ink-line);
    border-top: 1px solid var(--ink-line);
}
.wa-fab:hover .wa-fab-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
@keyframes waPulse {
    0% { box-shadow: 0 12px 30px -6px rgba(37, 211, 102, 0.55), 0 0 0 0 rgba(37, 211, 102, 0.45); }
    70% { box-shadow: 0 12px 30px -6px rgba(37, 211, 102, 0.55), 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 12px 30px -6px rgba(37, 211, 102, 0.55), 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (max-width: 720px) {
    .wa-fab { width: 54px; height: 54px; right: 16px; bottom: 16px; }
    .wa-fab svg { width: 24px; height: 24px; }
    .wa-fab-tip { display: none; }
}

/* WhatsApp contact list item accent */
.contact-value--wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #25D366 !important;
}
.contact-value--wa svg { flex-shrink: 0; }
.contact-value--wa:hover { color: #2bdb74 !important; }

/* Form consent checkbox */
.form-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ash);
    padding-top: 8px;
}
.form-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    max-width: 18px;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    background: transparent !important;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
    border-radius: 2px;
    box-sizing: border-box;
}
.form-consent input[type="checkbox"]:hover {
    border-color: var(--orange) !important;
}
.form-consent input[type="checkbox"]:checked {
    border-color: var(--orange);
    background: var(--orange);
}
.form-consent input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 3px; left: 6px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.form-consent a {
    color: var(--orange);
    border-bottom: 1px solid var(--orange);
}

/* Legal blocks */
.legal-cite {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ash);
    font-weight: 400;
    margin-left: 6px;
}
.impressum-grid--wide {
    grid-column: 1 / -1;
}
.footer-legal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 40px 0;
    border-bottom: 1px solid var(--ink-line);
}
.legal-block h4 {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 14px;
    font-weight: 500;
}
.legal-block p {
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255,255,255,0.65);
}
.legal-block a {
    color: var(--orange);
    border-bottom: 1px solid rgba(227,6,19,0.5);
}
.legal-block a:hover { border-bottom-color: var(--orange); }

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

/* ════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════ */
.footer {
    background: #060607;
    color: rgba(255,255,255,0.7);
    padding: 80px 0 32px;
    border-top: 1px solid var(--ink-line);
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--ink-line);
}

.footer-logo-img {
    width: 190px;
    max-width: 100%;
    margin-bottom: 22px;
    filter: drop-shadow(0 6px 20px rgba(227, 6, 19, 0.22));
}
.footer-logo-img img {
    width: 100%;
    height: auto;
    display: block;
}

.footer-logo {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: #fff;
    line-height: 0.92;
    display: flex;
    flex-direction: column;
}
.footer-logo-row {
    font-size: 44px;
    letter-spacing: 0.04em;
}
.footer-logo-sub {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--orange);
    margin-top: 10px;
    text-transform: uppercase;
}
.footer-logo--orange { color: var(--orange); }

.footer-domain {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ash-light);
    padding: 6px 0;
    border-bottom: 1px solid var(--ink-line);
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.footer-domain:hover {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

.footer-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ash);
    margin-top: 16px;
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.footer-col h4 {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 16px;
    font-weight: 500;
}
.footer-col a,
.footer-col span {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    transition: color 0.25s var(--ease);
}
.footer-col a:hover { color: #fff; }

.footer-impressum {
    padding: 40px 0;
    border-bottom: 1px solid var(--ink-line);
}
.footer-impressum h4 {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 20px;
}
.impressum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 32px;
    font-size: 13px;
    color: rgba(255,255,255,0.78);
}
.impressum-grid > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.impressum-grid span {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ash);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 28px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ash);
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ════════════════════════════════════════════════════════ */
.reveal-up, .reveal-fade {
    opacity: 0;
}
.reveal-up { transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-fade { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transform: translateY(20px); }

.reveal-up.in,
.reveal-fade.in {
    opacity: 1;
    transform: translateY(0);
}

/* Hero word reveal (handled by JS class) */
.hero-title .word.in {
    animation: wordRise 0.9s var(--ease) forwards;
    animation-delay: calc(var(--d, 0) * 1ms);
}
@keyframes wordRise {
    from { transform: translateY(110%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Reveal for hero eyebrow & non-word elements */
.reveal {
    opacity: 0;
    transform: translateY(15px);
    animation: reveal 0.7s var(--ease) 0.1s forwards;
}
@keyframes reveal {
    to { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .hero-sub-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 0;
    }
    .stat:nth-child(2)::after { display: none; }
    .service-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }
    .pricing-wrap,
    .map-wrap,
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 720px) {
    /* Mobile flow: nav → eyebrow → speedometer → car → headline → …
       Padding-top accounts for announcement bar (~34px) + sticky nav (~70px) + breathing room (~26px) */
    .hero { padding-top: 130px; }

    .hero-title { margin-top: 0; }
    .hero-stats { margin-top: 32px; }

    /* On mobile the speedometer + race-track are moved into the document flow
       between the CTAs and the stats (DOM move is done in script.js).
       Reset their absolute positioning so they flow naturally. */
    .hero-speedo {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        margin: 16px auto 0;     /* gap above + centered (was 32px) */
        width: 300px;
        opacity: 0.95;
        display: block;
    }
    .race-track {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
        height: 120px;
        margin: 0 0 32px;
        display: block;
    }
    /* Mobile band shorter than the tablet 190px (higher-specificity override). */
    .hero-three .race-track { height: 120px; }
    .race-car {
        width: 260px;
        left: -290px;
    }

    .hero-scroll { display: none; }
    .hero-bg-gradient { opacity: 0.4; }
    .hero-stats { grid-template-columns: 1fr 1fr; gap: 20px 8px; }
    .stat::after { display: none !important; }
    .nav-cta { display: none; }
    .footer-cols { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .form-row { grid-template-columns: 1fr; }
    .timeline { padding-left: 32px; }
    .step { grid-template-columns: 1fr; gap: 12px; }
    .step-num { font-size: 44px; }
    .pricing-formula { padding: 20px 24px; gap: 10px; }
    .formula-num { font-size: 40px; }
    .formula-var { font-size: 32px; }
    .marquee-track { font-size: 14px; gap: 24px; }
    .hero-cta-group { flex-direction: column; align-items: stretch; width: 100%; }
    .hero-cta-group .btn { width: 100%; }
    .contact-form { padding: 24px; }
    .contact-list li { grid-template-columns: 100px 1fr; gap: 16px; }
    .about-card { padding: 28px 24px; }
    .about-card-name { font-size: 28px; }
    .pricing-formula { width: 100%; justify-content: center; }
    .price-calc { padding: 24px; }
    /* Tighter nav on mobile */
    .nav-icon { height: 42px; width: auto; }
    .nav-wordmark-row { font-size: 20px; }
    .nav-wordmark-sub { font-size: 8px; }

    /* Mobile car travel matches the full-width mobile track */
    @keyframes raceAcross {
        0%   { transform: translateX(0); opacity: 0; }
        6%   { opacity: 0.92; }
        80%  { opacity: 0.92; }
        85%  { transform: translateX(calc(100vw + 200px)); opacity: 0; }
        100% { transform: translateX(calc(100vw + 200px)); opacity: 0; }
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .marquee-track { animation: none; }
}