/* ==========================================================
   REVLO — HERO EXPERIENCE
   Direction: Money Hook + Cinematic Intelligence

   Works with:
   - Hero HTML (unchanged — no class/ID renamed)
   - Mileage Reality Check™
   - Revlo Intelligence flow
   - Product dashboard preview
   - hero.js (unchanged — no selector renamed)

   This file consolidates the hero into a single clean pass:
   layout + calculator + the cinematic photo background.

   PRODUCTION FIX IN THIS PASS
   ----------------------------------------------------------
   .hero-motion previously used `top:0; bottom:0`, which
   stretches it to the full height of its positioned ancestor
   (.hero). Because .hero wraps the ENTIRE hero — intro,
   calculator, intelligence flow, product preview, closing —
   that made the background photo cover a 3000px+ tall
   element. The photo itself never distorted (object-fit:
   cover never warps pixels), but it was being asked to cover
   far more vertical space than intended, which is what read
   as "stretching," and it also kept the photo visible behind
   sections far below the fold (see product preview section
   bleeding into the aerial photo).

   Fix: .hero-motion is now capped to a fixed height instead
   of stretching to match .hero's full height, so it only
   ever covers the hero-intro area, with the mask gradients
   fading it out into the calculator card as designed.

   PRODUCTION FIX (STACKING ORDER)
   ----------------------------------------------------------
   .hero-intro had `position: relative` + `isolation: isolate`
   but no explicit z-index, so it computed to `auto`. Its
   sibling .hero-motion has an explicit `z-index: 0` and sits
   later in the DOM, so per stacking-context rules it painted
   ON TOP of .hero-intro — fully hiding the eyebrow, headline,
   lede and CTA buttons behind the cinematic photo.

   Fix: .hero-intro now has an explicit z-index (2), matching
   the z-index already used by its own children (eyebrow,
   title, lede, actions, note), so it reliably paints above
   .hero-motion (0) while staying below .hero-reality (3).

   PRODUCTION FIX (HEADER CLEARANCE + SCENE OVERLAP)
   ----------------------------------------------------------
   Scene 1's headline ("Check your Vehicle / Mileage Loss.")
   fit safely under the old --revlo-header-clearance value.
   Scenes 2/3 ("Every Vehicle, Fully Understood." /
   "Every Vehicle. One Business View.") render slightly
   taller, and were getting clipped behind the sticky header
   on those scenes only.

   Raising the clearance fixed the clipping, but it also made
   .hero-intro taller overall, which pushed the CTA buttons
   and note down far enough to start overlapping the fixed
   "km/l"-style text behind the buttons) and exposed a hard
   edge on the text-protection vignette.

   Fix: the vignette below now extends a fixed amount past
   .hero-intro's bottom instead of scaling as a percentage of
   its height (so it never grows into a visible hard edge),
   .hero-motion has a height floor so it can't collapse
   shorter than the intro content on short browser windows,
   the existing narrow-viewport rule) so they can never sit
   underneath live button/note text.
========================================================== */


/* ==========================================================
   01. ROOT VARIABLES
========================================================== */

:root {
    --revlo-ink: #0b1220;
    --revlo-ink-soft: rgba(15, 35, 64, .72);
    --revlo-ink-muted: rgba(15, 35, 64, .52);
    --revlo-ink-faint: rgba(37, 99, 235, .10);

    --revlo-paper: #f8fbff;
    --revlo-paper-soft: #f1f6ff;

    --revlo-panel: #0d1117;
    --revlo-panel-2: #121821;

    --revlo-blue: #2563eb;
    --revlo-blue-dark: #1746b5;
    --revlo-blue-light: #60a5fa;

    --revlo-indigo: #4f46e5;

    --revlo-success: #16a36a;
    --revlo-success-soft: rgba(22, 163, 106, .12);

    --revlo-danger: #ef4444;
    --revlo-danger-soft: rgba(239, 68, 68, .10);

    --revlo-border: rgba(16, 17, 20, .10);
    --revlo-white-border: rgba(255, 255, 255, .10);

    --revlo-display:
        "Space Grotesk",
        "Inter",
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --revlo-body:
        "Inter",
        "DM Sans",
        "Space Grotesk",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --revlo-mono:
        "JetBrains Mono",
        "IBM Plex Mono",
        "SFMono-Regular",
        Consolas,
        monospace;

    --revlo-ease: cubic-bezier(.4, 0, .2, 1);
    --revlo-ease-out: cubic-bezier(.16, 1, .3, 1);

    /* ------------------------------------------------------
       HEADER CLEARANCE
       Set this to the real combined height of your
       announcement bar + header (whatever sits fixed/sticky
       above the hero). This is what keeps the headline from
       ever sitting under/behind the header. Inspect the
       live header in devtools and adjust this one number —
       everything else in the hero reads from it.

       This value is sized for the TALLEST scene headline
       (currently the two-line Scene 2/3 titles), with margin
       to spare — not just the shortest one. If you add a
       scene with a longer headline later, re-check this
       number against that scene specifically.
    ------------------------------------------------------ */
    --revlo-header-clearance: 8rem;

    /* ------------------------------------------------------
       CINEMATIC BACKGROUND TOKENS
    ------------------------------------------------------ */
    --revlo-grade-shadow: #060a12;
    --revlo-grade-highlight: rgba(147, 197, 253, .16);

    /* ------------------------------------------------------
       HERO MOTION HEIGHT
       Single source of truth for how tall the cinematic
       photo background is allowed to get. Referenced by
       .hero-motion below and overridden per breakpoint.
       Do NOT let .hero-motion stretch via top:0;bottom:0 —
       that ties its height to .hero's full height (which
       includes the calculator, product preview, etc.) and
       is what causes the background to look stretched /
       bleed into sections far below the fold.

       Kept slightly taller than --revlo-header-clearance's
       tallest-scene case, with a min-height floor further
       down (.hero-motion) as a second safety net on short
       browser windows.
    ------------------------------------------------------ */
    --revlo-motion-height: min(100vh, 920px);
}


/* ==========================================================
   02. HERO SHELL
========================================================== */

.hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;

    background:
        radial-gradient(
            900px 620px at 84% 8%,
            rgba(37, 99, 235, .15),
            transparent 68%
        ),
        radial-gradient(
            720px 560px at 6% 28%,
            rgba(96, 165, 250, .10),
            transparent 70%
        ),
        radial-gradient(
            700px 520px at 58% 100%,
            rgba(79, 70, 229, .075),
            transparent 72%
        ),
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f4f8ff 42%,
            #eef5ff 100%
        );

    color: var(--revlo-ink);

    padding: 0 0 6rem;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 180px;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(37, 99, 235, .035)
        );
}


/* ==========================================================
   03. CONTAINER
========================================================== */

.hero-container {
    position: relative;
    z-index: 6;
    width: min(1280px, calc(100% - 3.5rem));
    margin: 0 auto;
}


/* ==========================================================
   04. STATIC BACKDROP (fallback grid/orbs, kept for pages
   or states where the video layer is skipped)
========================================================== */

.hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37, 99, 235, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .055) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 70% 55% at 70% 20%, #000 0%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 70% 20%, #000 0%, transparent 76%);
    opacity: .55;
}

.hero-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .65;
    animation: heroOrbFloat 18s ease-in-out infinite;
}

.hero-bg-orb--one {
    width: 520px;
    height: 520px;
    top: -250px;
    right: -120px;
    background: radial-gradient(circle, rgba(37, 99, 235, .18), transparent 70%);
}

.hero-bg-orb--two {
    width: 380px;
    height: 380px;
    left: -230px;
    top: 38%;
    background: radial-gradient(circle, rgba(79, 70, 229, .10), transparent 70%);
    animation-delay: -6s;
}

.hero-bg-orb--three {
    width: 300px;
    height: 300px;
    right: 25%;
    bottom: -180px;
    background: radial-gradient(circle, rgba(96, 165, 250, .10), transparent 70%);
    animation-delay: -11s;
}

@keyframes heroOrbFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-20px, 24px, 0); }
}


/* ==========================================================
   05. HERO INTRO
   `padding-top` reads from --revlo-header-clearance so the
   title always clears a fixed/sticky header — this is what
   stops the headline from ever rendering cropped under it.

   `z-index: 2` is required here (see PRODUCTION FIX note at
   the top of this file) — without it this block silently
   paints BEHIND .hero-motion's cinematic photo and every
   piece of hero copy (eyebrow/title/lede/CTAs) disappears.
========================================================== */

.hero-intro {
    position: relative;
    isolation: isolate;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto 4.2rem;
    padding-top: calc(var(--revlo-header-clearance) + 2rem);
    text-align: center;
}

/*
   Text-protection vignette.
   Sits above the photo/wash (z-index 0 stack inside
   .hero-motion) and below the copy (z-index 2), so the
   headline and lede always have a soft dark pool behind
   them regardless of what the photo is doing.

   This used to be sized as `height: 130%` of .hero-intro,
   which meant a taller .hero-intro (longer scene headline,
   larger header clearance) made this rectangle taller too —
   eventually its flat bottom edge would land past the
   photo's own fade-out and show up as a visible hard-edged
   band against the white card below.

   Fixed sizing instead: the vignette extends a constant
   amount past .hero-intro's own top/bottom via `inset`,
   regardless of how tall the intro content gets, and its own
   gradient fades to fully transparent before that edge, so
   there is never a hard line to see.
*/

.hero-intro::before {
    content: "";
    position: absolute;
    inset: -2rem -1.5rem -3.5rem -1.5rem;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(5, 10, 20, .30) 0%,
        rgba(5, 10, 20, .52) 45%,
        rgba(5, 10, 20, .40) 78%,
        rgba(5, 10, 20, 0) 100%
    );
}

.hero-eyebrow,
.hero-title,
.hero-lede,
.hero-actions,
.hero-note {
    position: relative;
    z-index: 2;
}


/* EYEBROW */

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.45rem;
    padding: .52rem .85rem .52rem .65rem;
    border: 1px solid rgba(147, 197, 253, .32);
    border-radius: 999px;
    background: rgba(7, 15, 30, .48);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 12px 30px rgba(15, 60, 140, .12),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    color: #e7f0ff;
    font-family: var(--revlo-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-eyebrow-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--revlo-success);
    box-shadow: 0 0 0 5px rgba(22, 163, 106, .16);
    animation: heroStatusPulse 2s ease-in-out infinite;
}

.hero-eyebrow-status {
    margin-left: .15rem;
    padding: .24rem .48rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(219, 231, 255, .75);
    font-size: .58rem;
}

@keyframes heroStatusPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(22, 163, 106, .12); }
    50% { box-shadow: 0 0 0 8px rgba(22, 163, 106, 0); }
}


/* ==========================================================
   HERO TITLE
========================================================== */

.hero-title {
    max-width: 940px;
    margin: 0 auto 1.7rem;
    font-family: var(--revlo-display);
    font-size: clamp(3.25rem, 7vw, 6.7rem);
    line-height: .96;
    letter-spacing: -.072em;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .3);
    text-wrap: balance;
}

.hero-title-accent {
    display: inline;
    background: linear-gradient(
        105deg,
        #ffffff 0%,
        #dbeafe 28%,
        #93c5fd 58%,
        #60a5fa 78%,
        #4f46e5 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* ==========================================================
   HERO LEDE
========================================================== */

.hero-lede {
    max-width: 720px;
    margin: 0 auto 2.2rem;
    font-family: var(--revlo-body);
    font-size: clamp(1rem, 1.45vw, 1.16rem);
    line-height: 1.72;
    letter-spacing: -.01em;
    color: rgba(255, 255, 255, .86);
    text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}


/* ==========================================================
   HERO ACTIONS
========================================================== */

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    flex-wrap: wrap;
    margin-bottom: 1.35rem;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 52px;
    padding: .88rem 1.4rem;
    border-radius: 12px;
    text-decoration: none;
    letter-spacing: -.01em;
    font-family: var(--revlo-body);
    font-size: .86rem;
    font-weight: 700;
    transition:
        transform .25s var(--revlo-ease),
        box-shadow .25s var(--revlo-ease),
        background .25s var(--revlo-ease),
        border-color .25s var(--revlo-ease);
}

.hero-btn--primary {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #3b82f6 0%,
        #2563eb 52%,
        #1746b5 100%
    );
    box-shadow:
        0 14px 32px rgba(37, 99, 235, .30),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}

.hero-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 20px 42px rgba(37, 99, 235, .38),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}

.hero-btn--secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-btn--secondary:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 12px 30px rgba(16, 17, 20, .18);
}

.hero-btn--secondary i {
    font-size: .72rem;
}

.hero-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    color: rgba(255, 255, 255, .75);
    font-family: var(--revlo-body);
    font-size: .72rem;
    letter-spacing: .005em;
}

.hero-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .14);
    color: #bcd2ff;
    font-size: .65rem;
}


/* ==========================================================
   06. REALITY CHECK SECTION
========================================================== */

.hero-reality {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 3.5rem;
    border: 1px solid rgba(37, 99, 235, .10);
    border-radius: 30px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, .90),
        rgba(244, 248, 255, .82)
    );
    box-shadow:
        0 45px 110px rgba(30, 64, 120, .10),
        0 12px 35px rgba(37, 99, 235, .045),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hero-reality::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 90px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(37, 99, 235, .06),
        transparent
    );
}


/* ==========================================================
   REALITY HEADER
========================================================== */

.reality-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3rem;
}

.reality-header-copy {
    max-width: 680px;
}

.reality-kicker {
    display: block;
    margin-bottom: .65rem;
    color: #1d4ed8;
    font-family: var(--revlo-mono);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .15em;
}

.reality-title {
    margin: 0;
    font-family: var(--revlo-display);
    font-size: clamp(2.15rem, 3.8vw, 3.45rem);
    line-height: 1.02;
    letter-spacing: -.055em;
    font-weight: 800;
    color: var(--revlo-ink);
}

.reality-title span {
    display: block;
    color: #2563eb;
}

.reality-description {
    max-width: 600px;
    margin: 1rem 0 0;
    color: rgba(15, 35, 64, .64);
    font-family: var(--revlo-body);
    font-size: .93rem;
    line-height: 1.65;
}

.reality-powered {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    padding: .55rem .8rem;
    border: 1px solid var(--revlo-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    color: var(--revlo-ink-muted);
    font-family: var(--revlo-body);
    font-size: .67rem;
}

.reality-powered strong {
    color: var(--revlo-ink);
}

.reality-powered-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--revlo-success);
}


/* ==========================================================
   07. CALCULATOR EXPERIENCE
========================================================== */

.reality-experience {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 1.35rem;
    align-items: stretch;
}

.reality-input-panel {
    position: relative;
    padding: 1.8rem;
    border: 1px solid rgba(37, 99, 235, .10);
    border-radius: 21px;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fbfdff 100%
    );
    box-shadow: 0 12px 35px rgba(37, 99, 235, .035);
}

.reality-step {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
}

.reality-step--next {
    margin-top: 1.55rem;
}

.reality-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: linear-gradient(145deg, #2563eb, #1746b5);
    color: #ffffff;
    box-shadow: 0 7px 16px rgba(37, 99, 235, .20);
    font-family: var(--revlo-mono);
    font-size: .57rem;
    font-weight: 700;
}

.reality-step-label {
    display: block;
    margin-bottom: .15rem;
    color: var(--revlo-blue);
    font-family: var(--revlo-mono);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.reality-step h3 {
    margin: 0;
    color: var(--revlo-ink);
    font-family: var(--revlo-body);
    font-size: .86rem;
    font-weight: 700;
}


/* ==========================================================
   FIELD
========================================================== */

.reality-field {
    position: relative;
    margin-bottom: 1rem;
}

.reality-label {
    display: block;
    margin-bottom: .45rem;
    color: var(--revlo-ink-muted);
    font-family: var(--revlo-body);
    font-size: .68rem;
    font-weight: 650;
}

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.field-auto-label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--revlo-success);
    font-family: var(--revlo-mono);
    font-size: .57rem;
    font-weight: 700;
}

.reality-input,
.reality-select {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(15, 35, 64, .12);
    border-radius: 11px;
    outline: none;
    background: #ffffff;
    color: var(--revlo-ink);
    font-family: var(--revlo-body);
    font-size: .83rem;
    font-weight: 550;
    transition:
        border-color .2s var(--revlo-ease),
        box-shadow .2s var(--revlo-ease),
        background .2s var(--revlo-ease);
}

.reality-input {
    padding: .75rem .9rem;
}

.reality-input::placeholder {
    color: rgba(16, 17, 20, .31);
}

.reality-input:hover,
.reality-select:hover {
    border-color: rgba(16, 17, 20, .18);
}

.reality-input:focus,
.reality-select:focus {
    border-color: rgba(37, 99, 235, .62);
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, .085),
        0 5px 18px rgba(37, 99, 235, .06);
}

.vehicle-search {
    position: relative;
}

.vehicle-search .reality-input {
    padding-left: 2.65rem;
    padding-right: 2.6rem;
}

.vehicle-search-icon {
    position: absolute;
    top: 50%;
    left: .95rem;
    transform: translateY(-50%);
    color: var(--revlo-ink-muted);
    font-size: .76rem;
    pointer-events: none;
}

.vehicle-search-clear {
    position: absolute;
    top: 50%;
    right: .8rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: rgba(16, 17, 20, .055);
    color: var(--revlo-ink-muted);
    cursor: pointer;
    font-size: .66rem;
}


/* ==========================================================
   VEHICLE SUGGESTIONS
========================================================== */

.vehicle-suggestions {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 230px;
    overflow-y: auto;
    padding: .4rem;
    border: 1px solid var(--revlo-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 45px rgba(16, 17, 20, .12);
}

.vehicle-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .7rem .75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--revlo-ink);
    text-align: left;
    cursor: pointer;
    font-family: var(--revlo-body);
    transition: background .18s var(--revlo-ease);
}

.vehicle-suggestion:hover,
.vehicle-suggestion:focus {
    background: rgba(37, 99, 235, .06);
    outline: none;
}

.vehicle-suggestion span {
    font-size: .75rem;
    font-weight: 700;
}

.vehicle-suggestion small {
    color: var(--revlo-ink-muted);
    font-size: .61rem;
}


/* ==========================================================
   SELECTED VEHICLE
========================================================== */

.selected-vehicle {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: .25rem 0 1.25rem;
    padding: .7rem;
    border: 1px solid rgba(37, 99, 235, .15);
    border-radius: 11px;
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, .075),
        rgba(96, 165, 250, .035)
    );
}

.selected-vehicle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: rgba(37, 99, 235, .10);
    color: var(--revlo-blue);
    font-size: .82rem;
}

.selected-vehicle-info {
    min-width: 0;
    flex: 1;
}

.selected-vehicle-info span {
    display: block;
    margin-bottom: .1rem;
    color: var(--revlo-ink-muted);
    font-family: var(--revlo-mono);
    font-size: .53rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.selected-vehicle-info strong {
    display: block;
    overflow: hidden;
    color: var(--revlo-ink);
    font-size: .73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-vehicle-change {
    border: 0;
    background: transparent;
    color: var(--revlo-blue);
    cursor: pointer;
    font-family: var(--revlo-body);
    font-size: .62rem;
    font-weight: 700;
}


/* ==========================================================
   TWO COLUMN FIELD GROUP
========================================================== */

.reality-field-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .75fr);
    gap: .7rem;
}


/* ==========================================================
   NUMBER INPUT
========================================================== */

.number-input-wrap {
    position: relative;
}

.number-input-wrap .reality-input {
    padding-right: 4.3rem;
}

.input-unit {
    position: absolute;
    top: 50%;
    right: .85rem;
    transform: translateY(-50%);
    color: var(--revlo-ink-muted);
    font-family: var(--revlo-mono);
    font-size: .58rem;
    pointer-events: none;
}

.input-prefix {
    position: absolute;
    top: 50%;
    left: .85rem;
    transform: translateY(-50%);
    color: var(--revlo-ink);
    font-family: var(--revlo-mono);
    font-size: .75rem;
    font-weight: 700;
    pointer-events: none;
}

.reality-input--currency {
    padding-left: 2rem;
}

.field-helper {
    margin: .35rem 0 0;
    color: var(--revlo-ink-muted);
    font-size: .58rem;
    line-height: 1.5;
}


/* ==========================================================
   CALCULATE BUTTON
========================================================== */

.reality-calculate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 53px;
    margin-top: 1.3rem;
    padding: .75rem .95rem .75rem 1.05rem;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #101a2c, #0b1220);
    color: #ffffff;
    cursor: pointer;
    font-family: var(--revlo-body);
    font-size: .77rem;
    font-weight: 700;
    transition:
        transform .22s var(--revlo-ease),
        box-shadow .22s var(--revlo-ease),
        background .22s var(--revlo-ease);
    box-shadow: 0 12px 28px rgba(11, 18, 32, .14);
}

.reality-calculate i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .10);
    font-size: .68rem;
}

.reality-calculate:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #17243a, #0b1220);
    box-shadow: 0 17px 35px rgba(11, 18, 32, .18);
}

.reality-calculate:active {
    transform: translateY(0);
}

.reality-calculate.is-error {
    background: var(--revlo-danger);
}

.reality-calculate.is-complete {
    background: var(--revlo-success);
}

.reality-disclaimer {
    margin: .75rem 0 0;
    color: var(--revlo-ink-muted);
    font-family: var(--revlo-body);
    font-size: .56rem;
    line-height: 1.5;
}


/* ==========================================================
   08. RESULT PANEL
========================================================== */

.reality-result-panel {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    border-radius: 21px;
    background:
        radial-gradient(620px 360px at 100% 0%, rgba(37, 99, 235, .30), transparent 68%),
        radial-gradient(460px 320px at 0% 100%, rgba(79, 70, 229, .16), transparent 70%),
        linear-gradient(145deg, #0b1424 0%, #101a2a 55%, #09111e 100%);
    color: #ffffff;
    box-shadow:
        0 30px 75px rgba(7, 19, 42, .22),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

.reality-result-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom right, #000, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom right, #000, transparent 78%);
    pointer-events: none;
}


/* ==========================================================
   EMPTY RESULT STATE
========================================================== */

.result-empty {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 580px;
    padding: 2rem;
    text-align: center;
}

.result-empty-orbit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 105px;
    height: 105px;
    margin-bottom: 1.7rem;
}

.result-orbit-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(96, 165, 250, .25);
    border-radius: 50%;
    animation: orbitRotate 12s linear infinite;
}

.result-orbit-ring::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--revlo-blue-light);
    box-shadow: 0 0 18px rgba(96, 165, 250, .75);
}

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

.result-orbit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.055);
    color: var(--revlo-blue-light);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.result-empty-kicker {
    margin-bottom: .55rem;
    color: rgba(255,255,255,.45);
    font-family: var(--revlo-mono);
    font-size: .59rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.result-empty h3 {
    margin: 0 0 .6rem;
    font-family: var(--revlo-display);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1;
    letter-spacing: -.04em;
}

.result-empty p {
    max-width: 350px;
    margin: 0 0 1.6rem;
    color: rgba(255,255,255,.48);
    font-size: .76rem;
    line-height: 1.65;
}

.result-empty-hint {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255,255,255,.62);
    font-family: var(--revlo-mono);
    font-size: .59rem;
}


/* ==========================================================
   CALCULATED RESULT
========================================================== */

.result-calculated {
    position: relative;
    z-index: 2;
    padding: 1.6rem;
}

.result-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.result-status {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    color: rgba(255,255,255,.62);
    font-family: var(--revlo-mono);
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.result-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--revlo-success);
    box-shadow: 0 0 10px rgba(22, 163, 106, .65);
}

.result-status-label {
    color: rgba(255,255,255,.35);
    font-family: var(--revlo-mono);
    font-size: .53rem;
}


/* ==========================================================
   EFFICIENCY COMPARISON
========================================================== */

.efficiency-comparison {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

.efficiency-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .8rem;
}

.efficiency-heading span {
    color: rgba(255,255,255,.42);
    font-family: var(--revlo-mono);
    font-size: .55rem;
    letter-spacing: .08em;
}

.efficiency-heading strong {
    color: #60a5fa;
    font-family: var(--revlo-mono);
    font-size: .76rem;
}

.efficiency-values {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
}

.efficiency-value span {
    display: block;
    margin-bottom: .25rem;
    color: rgba(255,255,255,.36);
    font-size: .56rem;
}

.efficiency-value strong {
    color: #ffffff;
    font-family: var(--revlo-mono);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.efficiency-value small {
    color: rgba(255,255,255,.38);
    font-family: var(--revlo-mono);
    font-size: .55rem;
}

.efficiency-value--actual strong {
    color: #60a5fa;
}

.efficiency-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    color: rgba(255,255,255,.42);
    font-size: .62rem;
}

.efficiency-bar {
    position: relative;
    width: 100%;
    height: 5px;
    margin-top: .9rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.efficiency-bar-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #60a5fa);
    transition: width 1.1s var(--revlo-ease-out);
}


/* ==========================================================
   MONEY RESULT
========================================================== */

.money-result {
    padding: 1.3rem 1.25rem 1.15rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
}

.money-result-label {
    display: block;
    margin-bottom: .5rem;
    color: rgba(255,255,255,.45);
    font-family: var(--revlo-mono);
    font-size: .56rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.money-result-value {
    display: flex;
    align-items: baseline;
    gap: .2rem;
}

.money-currency {
    color: #60a5fa;
    font-family: var(--revlo-mono);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 600;
}

.money-result-value strong {
    color: #ffffff;
    font-family: var(--revlo-mono);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: .95;
    letter-spacing: -.06em;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.money-result-sub {
    margin: .7rem 0 0;
    color: rgba(255,255,255,.38);
    font-size: .61rem;
    line-height: 1.5;
}


/* ==========================================================
   YEARLY RESULT
========================================================== */

.yearly-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .8rem;
    padding: .8rem .9rem;
    border-radius: 11px;
    background: rgba(37, 99, 235, .10);
    border: 1px solid rgba(96, 165, 250, .10);
}

.yearly-result span {
    display: block;
    margin-bottom: .2rem;
    color: rgba(255,255,255,.39);
    font-size: .55rem;
}

.yearly-result strong {
    color: #ffffff;
    font-family: var(--revlo-mono);
    font-size: .95rem;
}

.yearly-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 8px;
    background: rgba(96, 165, 250, .10);
    color: #60a5fa;
    font-size: .68rem;
}


/* ==========================================================
   RESULT METRICS
========================================================== */

.result-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
    margin-top: .8rem;
}

.result-metric {
    padding: .72rem;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.result-metric span {
    display: block;
    margin-bottom: .25rem;
    color: rgba(255,255,255,.34);
    font-size: .52rem;
}

.result-metric strong {
    color: rgba(255,255,255,.87);
    font-family: var(--revlo-mono);
    font-size: .73rem;
}


/* ==========================================================
   RESULT INSIGHT
========================================================== */

.result-insight {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-top: .8rem;
    padding: .85rem;
    border: 1px solid rgba(96, 165, 250, .13);
    border-radius: 11px;
    background: rgba(37, 99, 235, .065);
}

.result-insight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: rgba(96, 165, 250, .10);
    color: #60a5fa;
    font-size: .65rem;
}

.result-insight span {
    display: block;
    margin-bottom: .2rem;
    color: #93c5fd;
    font-family: var(--revlo-mono);
    font-size: .53rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.result-insight p {
    margin: 0;
    color: rgba(255,255,255,.57);
    font-size: .61rem;
    line-height: 1.5;
}


/* ==========================================================
   OPTIMIZATION
========================================================== */

.result-optimization {
    margin-top: .8rem;
    padding: .85rem;
    border: 1px solid rgba(22, 163, 106, .14);
    border-radius: 11px;
    background: rgba(22, 163, 106, .065);
}

.optimization-label {
    margin-bottom: .5rem;
    color: rgba(255,255,255,.36);
    font-family: var(--revlo-mono);
    font-size: .51rem;
    letter-spacing: .08em;
}

.optimization-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.optimization-content span {
    display: block;
    margin-bottom: .2rem;
    color: rgba(255,255,255,.40);
    font-size: .54rem;
}

.optimization-content strong {
    color: #5ee0a6;
    font-family: var(--revlo-mono);
    font-size: .92rem;
}

.optimization-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 8px;
    background: rgba(22, 163, 106, .11);
    color: #5ee0a6;
    font-size: .65rem;
}


/* ==========================================================
   RESULT CTA
========================================================== */

.result-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-top: .8rem;
    padding: .82rem .95rem;
    border: 1px solid rgba(96, 165, 250, .22);
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #2563eb 55%, #1746b5);
    color: #ffffff;
    text-decoration: none;
    font-family: var(--revlo-body);
    font-size: .67rem;
    font-weight: 700;
    box-shadow: 0 12px 25px rgba(37, 99, 235, .18);
    transition:
        transform .22s var(--revlo-ease),
        box-shadow .22s var(--revlo-ease);
}

.result-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 32px rgba(37, 99, 235, .28);
}

.result-cta i {
    font-size: .65rem;
}


/* ==========================================================
   09. INTELLIGENCE FLOW
========================================================== */

.hero-intelligence-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 3.8rem auto 5.5rem;
    max-width: 1040px;
}

.intelligence-flow-line {
    position: absolute;
    top: 21px;
    left: 9%;
    right: 9%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(37, 99, 235, .24),
        rgba(96, 165, 250, .24),
        transparent
    );
    z-index: 0;
}

.intelligence-flow-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    text-align: left;
}

.flow-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 12px;
    background: linear-gradient(145deg, #ffffff, #f0f6ff);
    color: var(--revlo-blue);
    box-shadow: 0 10px 25px rgba(37, 99, 235, .08);
    font-family: var(--revlo-mono);
    font-size: .57rem;
    font-weight: 700;
}

.intelligence-flow-item strong {
    display: block;
    color: var(--revlo-ink);
    font-family: var(--revlo-body);
    font-size: .75rem;
    letter-spacing: -.01em;
}

.intelligence-flow-item small {
    display: block;
    margin-top: .15rem;
    color: var(--revlo-ink-muted);
    font-size: .56rem;
}


/* ==========================================================
   10. PRODUCT SECTION
========================================================== */

.hero-product {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(3rem, 5vw, 5.5rem);
    align-items: center;
    padding: 2.5rem 0 5rem;
}

.hero-product::before {
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    top: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        520px 420px at 72% 50%,
        rgba(37, 99, 235, .10),
        transparent 72%
    );
}

.hero-product-copy {
    position: relative;
    max-width: 560px;
    padding: .5rem 0;
}

.hero-product-kicker {
    display: inline-block;
    margin-bottom: 1rem;
    color: #1d4ed8;
    font-family: var(--revlo-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero-product-copy h2 {
    max-width: 560px;
    margin: 0 0 1.45rem;
    font-family: var(--revlo-display);
    font-size: clamp(2.65rem, 4.4vw, 4.35rem);
    line-height: .98;
    letter-spacing: -.065em;
    font-weight: 800;
    text-wrap: balance;
    color: #0a0d14;
}

.hero-product-copy h2 span {
    display: inline;
    color: #2563eb;
}

.hero-product-copy > p {
    max-width: 520px;
    margin: 0 0 1.9rem;
    color: rgba(15, 35, 64, .66);
    font-family: var(--revlo-body);
    font-size: .96rem;
    line-height: 1.78;
    letter-spacing: -.01em;
}

.hero-product-points {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.hero-product-point {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .15rem 0;
}

.hero-product-point > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 1px solid rgba(37, 99, 235, .15);
    border-radius: 11px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, .95),
        rgba(226, 238, 255, .78)
    );
    box-shadow:
        0 8px 20px rgba(37, 99, 235, .08),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    color: #2563eb;
    font-size: .7rem;
}

.hero-product-point strong {
    display: block;
    color: #0d1422;
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: -.01em;
}

.hero-product-point small {
    display: block;
    margin-top: .12rem;
    color: rgba(15, 35, 64, .53);
    font-size: .62rem;
    line-height: 1.45;
}

.hero-product-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.85rem;
    color: #0d1422;
    text-decoration: none;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: -.005em;
    transition: color .2s var(--revlo-ease);
}

.hero-product-link:hover {
    color: var(--revlo-blue);
}

.hero-product-link i {
    font-size: .58rem;
    transition: transform .22s var(--revlo-ease);
}

.hero-product-link:hover i {
    transform: translateX(4px);
}


/* ==========================================================
   11. PRODUCT VISUAL
========================================================== */

.hero-product-visual {
    position: relative;
    min-width: 0;
    padding: 1.5rem .5rem 2rem;
}

.product-glow {
    position: absolute;
    inset: -8% -4%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(37, 99, 235, .20) 0%,
        rgba(96, 165, 250, .10) 35%,
        transparent 72%
    );
    filter: blur(34px);
    pointer-events: none;
}

.product-dashboard {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 1.55rem;
    border: 1px solid rgba(147, 197, 253, .13);
    border-radius: 24px;
    background:
        radial-gradient(500px 260px at 100% 0%, rgba(37, 99, 235, .11), transparent 70%),
        linear-gradient(145deg, #111a28 0%, #0c1420 55%, #080f19 100%);
    box-shadow:
        0 45px 90px rgba(8, 22, 50, .24),
        0 0 0 1px rgba(37, 99, 235, .025),
        inset 0 1px 0 rgba(255, 255, 255, .055);
}

.product-dashboard::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, .035),
        transparent 28%,
        transparent 72%,
        rgba(37, 99, 235, .035)
    );
}

.product-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.product-vehicle {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.product-vehicle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    color: #60a5fa;
    font-size: .72rem;
}

.product-vehicle strong {
    display: block;
    color: rgba(255,255,255,.92);
    font-size: .71rem;
    letter-spacing: -.005em;
}

.product-vehicle span {
    display: block;
    margin-top: .12rem;
    color: rgba(255,255,255,.33);
    font-family: var(--revlo-mono);
    font-size: .51rem;
    letter-spacing: .02em;
}

.product-health {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .65rem;
    border-radius: 999px;
    background: rgba(22, 163, 106, .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    color: #5ee0a6;
    font-size: .53rem;
    font-weight: 700;
}

.product-health-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5ee0a6;
}


/* ==========================================================
   PRODUCT MAIN VALUE
========================================================== */

.product-main-value {
    padding: 1.25rem;
    border: 1px solid rgba(147, 197, 253, .10);
    border-radius: 15px;
    background:
        radial-gradient(420px 160px at 100% 0%, rgba(37, 99, 235, .14), transparent 70%),
        rgba(255, 255, 255, .035);
}

.product-main-value span {
    display: block;
    margin-bottom: .4rem;
    color: rgba(219, 231, 255, .42);
    font-family: var(--revlo-mono);
    font-size: .51rem;
    letter-spacing: .10em;
}

.product-main-value strong {
    display: block;
    color: #ffffff;
    font-family: var(--revlo-mono);
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    letter-spacing: -.065em;
    font-weight: 700;
}

.product-main-value small {
    display: block;
    margin-top: .4rem;
    color: rgba(219, 231, 255, .40);
    font-size: .53rem;
}


/* ==========================================================
   PRODUCT METRIC GRID
========================================================== */

.product-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    margin-top: .7rem;
}

.product-metric {
    padding: .78rem;
    border: 1px solid rgba(147, 197, 253, .065);
    border-radius: 10px;
    background: rgba(255, 255, 255, .026);
    transition:
        transform .2s var(--revlo-ease),
        border-color .2s var(--revlo-ease),
        background .2s var(--revlo-ease);
}

.product-metric:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, .15);
    background: rgba(37, 99, 235, .045);
}

.product-metric span {
    display: block;
    margin-bottom: .25rem;
    color: rgba(219, 231, 255, .34);
    font-size: .48rem;
    letter-spacing: .01em;
}

.product-metric strong {
    color: rgba(255, 255, 255, .91);
    font-family: var(--revlo-mono);
    font-size: .68rem;
}

.product-metric small {
    color: rgba(255,255,255,.31);
    font-size: .48rem;
}


/* ==========================================================
   PRODUCT CHART
========================================================== */

.product-chart {
    margin-top: .7rem;
    padding: 1rem;
    border: 1px solid rgba(147, 197, 253, .065);
    border-radius: 13px;
    background: rgba(255, 255, 255, .022);
}

.product-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .65rem;
}

.product-chart-header span {
    display: block;
    margin-bottom: .15rem;
    color: rgba(255,255,255,.29);
    font-family: var(--revlo-mono);
    font-size: .45rem;
    letter-spacing: .06em;
}

.product-chart-header strong {
    color: rgba(255,255,255,.78);
    font-size: .58rem;
    letter-spacing: -.01em;
}

.product-chart-period {
    color: rgba(255,255,255,.25) !important;
    font-family: var(--revlo-body) !important;
    font-size: .48rem !important;
}

.product-chart-area {
    position: relative;
    height: 110px;
    margin-top: .7rem;
    overflow: hidden;
}

.product-chart-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 100% 25%, 14.28% 100%;
}

.product-chart-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    height: 58px;
    clip-path: polygon(
        0 78%, 15% 58%, 30% 66%, 45% 35%, 60% 48%, 75% 20%, 88% 32%, 100% 5%,
        100% 12%, 88% 39%, 75% 27%, 60% 55%, 45% 42%, 30% 73%, 15% 65%, 0 85%
    );
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    opacity: .8;
    filter: drop-shadow(0 0 5px rgba(96, 165, 250, .18));
}

.product-chart-points {
    position: absolute;
    inset: 0 0 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 .3rem;
}

.product-chart-points span {
    width: 6px;
    height: 6px;
    margin-bottom: calc(var(--point-offset, 20px));
    border-radius: 50%;
    background: #93c5fd;
    box-shadow: 0 0 10px rgba(96,165,250,.55);
}

.product-chart-points span:nth-child(1) { transform: translateY(-17px); }
.product-chart-points span:nth-child(2) { transform: translateY(-27px); }
.product-chart-points span:nth-child(3) { transform: translateY(-22px); }
.product-chart-points span:nth-child(4) { transform: translateY(-38px); }
.product-chart-points span:nth-child(5) { transform: translateY(-30px); }
.product-chart-points span:nth-child(6) { transform: translateY(-45px); }
.product-chart-points span:nth-child(7) { transform: translateY(-53px); }

.product-chart-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .35rem;
    color: rgba(255,255,255,.23);
    font-family: var(--revlo-mono);
    font-size: .43rem;
}


/* ==========================================================
   PRODUCT INSIGHT CARD
========================================================== */

.product-insight-card {
    position: absolute;
    right: -10px;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .65rem;
    max-width: 240px;
    padding: .7rem .8rem;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;
    background: rgba(14,18,25,.93);
    box-shadow: 0 18px 40px rgba(8,12,18,.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: productInsightFloat 5s ease-in-out infinite;
}

.product-insight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: rgba(37,99,235,.12);
    color: #60a5fa;
    font-size: .65rem;
}

.product-insight-card span {
    display: block;
    margin-bottom: .15rem;
    color: #60a5fa;
    font-family: var(--revlo-mono);
    font-size: .45rem;
    letter-spacing: .07em;
}

.product-insight-card strong {
    display: block;
    color: rgba(255,255,255,.88);
    font-size: .55rem;
}

.product-insight-card small {
    display: block;
    margin-top: .12rem;
    color: rgba(255,255,255,.31);
    font-size: .47rem;
}

@keyframes productInsightFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}


/* ==========================================================
   12. HERO CLOSING
========================================================== */

.hero-closing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 3rem 0 1.5rem;
}

.hero-closing-line {
    width: 110px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .20));
}

.hero-closing-line:last-child {
    background: linear-gradient(90deg, rgba(37, 99, 235, .20), transparent);
}

.hero-closing p {
    margin: 0;
    color: rgba(15, 35, 64, .48);
    letter-spacing: .01em;
    font-size: .68rem;
    text-align: center;
}

.hero-closing strong {
    color: #1746b5;
}


/* ==========================================================
   13. RESULT ANIMATION STATES
========================================================== */

.result-calculated[hidden],
.result-empty[hidden] {
    display: none !important;
}

.result-calculated.is-revealing {
    animation: resultReveal .7s var(--revlo-ease-out) both;
}

@keyframes resultReveal {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.money-result-value.is-counting {
    animation: moneyPulse .55s var(--revlo-ease-out);
}

@keyframes moneyPulse {
    0% { transform: scale(.96); }
    55% { transform: scale(1.025); }
    100% { transform: scale(1); }
}


/* ==========================================================
   14. HERO MOTION — CINEMATIC BACKGROUND
   (photo carousel driven by hero.js scene rotation)

   `min-height` below is a structural floor: on short browser
   windows, --revlo-motion-height's `min(100vh, ...)` can
   shrink further than .hero-intro's actual rendered content
   (which is not capped to viewport height). Without a floor,
   block can end up sitting underneath the intro's live
   buttons/note text instead of past the end of it. The floor
   keeps a consistent minimum stage size regardless of window
   height.
========================================================== */

.hero-motion {
    position: absolute;
    top: 0;
    height: var(--revlo-motion-height);
    min-height: 680px;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #071329;
}

.hero-motion-video-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;

    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}

.hero-motion-video-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
}

.hero-motion-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: saturate(.82) contrast(1.05) brightness(.97);
    transform: scale(1.08);
    transition:
        opacity 1.4s ease,
        transform 20s linear;
}

.hero-motion-slide.is-active {
    opacity: 1;
    transform: scale(1.14);
}

.hero-motion-wash {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: multiply;
    background:
        radial-gradient(100% 75% at 72% 10%, rgba(37, 99, 235, .26) 0%, transparent 62%),
        linear-gradient(145deg, rgba(7, 18, 40, .38) 0%, rgba(9, 27, 61, .20) 46%, rgba(4, 12, 26, .46) 100%);

    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}

/*
   THEME PRESETS
   hero.js sets data-hero-theme="dark-scrim" | "light-scrim"
   on the .hero element itself when each scene loads.
*/

.hero[data-hero-theme="dark-scrim"] .hero-motion-wash {
    background:
        radial-gradient(100% 75% at 72% 10%, rgba(37, 99, 235, .26) 0%, transparent 62%),
        linear-gradient(165deg, rgba(7, 18, 40, .42) 0%, rgba(9, 27, 61, .30) 46%, rgba(4, 12, 26, .56) 100%);
}

.hero[data-hero-theme="light-scrim"] .hero-motion-wash {
    /*
        For photos that are already dark/moody (e.g. a service
        bay at dusk, a night fleet yard) — lighten the wash so
        the photo's own detail doesn't get crushed, while still
        tying it back to brand blue.
    */
    background:
        radial-gradient(100% 75% at 72% 10%, rgba(96, 165, 250, .18) 0%, transparent 62%),
        linear-gradient(165deg, rgba(7, 18, 40, .22) 0%, rgba(9, 27, 61, .14) 46%, rgba(4, 12, 26, .34) 100%);
}

/* HAIRLINE FRAME — a faint top/bottom rule, like a letterboxed shot */

.hero-motion::before,
.hero-motion::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    height: 1px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
}

.hero-motion::before {
    top: 5%;
}

.hero-motion::after {
    bottom: 5%;
}

/* GRID + ORBS (layered inside .hero-motion, above the wash) */

.hero-motion .hero-grid-lines {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: .5;
}

.hero-motion .hero-bg-orb {
    z-index: 3;
}

/* TOP EDGE — soft dark vignette right under the header */

.hero-motion-edge {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(5, 15, 34, .42) 0%, rgba(5, 15, 34, 0) 28%);
}


@media (max-width: 768px) {

    .hero-motion-slide {
        transform: scale(1.1);
        filter: saturate(.76) contrast(1.05) brightness(.96);
    }

    .hero-motion-wash {
        background:
            radial-gradient(140% 60% at 50% 0%, var(--revlo-grade-highlight) 0%, transparent 55%),
            linear-gradient(165deg, rgba(37, 99, 235, .38) 0%, rgba(13, 17, 24, .46) 45%, var(--revlo-grade-shadow) 100%);
    }

}


/* ==========================================================
   15. TEXT SWAP — PREVENT LAYOUT JUMP DURING CROSS-FADE
   (hero.js toggles these opacities when rotating scenes)
========================================================== */

#heroEyebrowLabel,
#heroEyebrowStatus,
#heroTitleMain,
#heroTitleAccent,
#heroLede,
#heroPrimaryCta {
    transition: opacity .26s ease;
}


/* ==========================================================
   16. TABLET
========================================================== */

@media (max-width: 1080px) {

    .hero {
        padding-bottom: 4.5rem;
    }

    .hero-container {
        width: min(100% - 2.5rem, 920px);
    }

    .hero-intro {
        max-width: 820px;
        margin-bottom: 3.25rem;
    }

    .hero-title {
        font-size: clamp(3rem, 7.5vw, 5.6rem);
    }

    .hero-reality {
        padding: 2.35rem;
    }

    .reality-experience {
        grid-template-columns: 1fr;
    }

    .reality-input-panel {
        max-width: 720px;
        width: 100%;
        margin: 0 auto;
    }

    .reality-result-panel {
        min-height: 520px;
    }

    .hero-product {
        grid-template-columns: 1fr;
        gap: 2.8rem;
        padding-top: 1.5rem;
    }

    .hero-product-copy {
        max-width: 650px;
        margin: 0 auto;
        text-align: center;
    }

    .hero-product-copy h2 {
        font-size: clamp(2.6rem, 5.5vw, 4rem);
    }

    .hero-product-points {
        max-width: 430px;
        margin: 0 auto;
        text-align: left;
    }

    .hero-product-link {
        justify-content: center;
    }

    .hero-product-visual {
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
        padding: .5rem 0 2rem;
    }

    :root {
        --revlo-motion-height: min(80vh, 780px);
    }

}


/* ==========================================================
   17. MOBILE
========================================================== */

@media (max-width: 700px) {

    :root {
        --revlo-header-clearance: 6rem;
        --revlo-motion-height: min(72vh, 640px);
    }

    .hero {
        padding-bottom: 3rem;
        background:
            radial-gradient(520px 360px at 100% 0%, rgba(37, 99, 235, .14), transparent 70%),
            linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
    }

    .hero-container {
        width: min(100% - 1.4rem, 560px);
    }

    .hero-intro {
        margin-bottom: 2.4rem;
        padding-top: calc(var(--revlo-header-clearance) + 1.25rem);
    }

    .hero-eyebrow {
        font-size: .59rem;
    }

    .hero-eyebrow-status {
        display: none;
    }

    .hero-title {
        font-size: clamp(2.65rem, 13vw, 4.2rem);
        line-height: .99;
        letter-spacing: -.06em;
    }

    .hero-lede {
        font-size: .91rem;
        line-height: 1.65;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-btn {
        width: 100%;
    }

    .hero-note {
        font-size: .61rem;
    }

    .hero-reality {
        padding: 1.1rem;
        border-radius: 21px;
    }

    .reality-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.6rem;
    }

    .reality-title {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
    }

    .reality-description {
        font-size: .76rem;
    }

    .reality-powered {
        font-size: .57rem;
    }

    .reality-input-panel {
        padding: 1rem;
        border-radius: 15px;
    }

    .reality-field-group {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .reality-step--next {
        margin-top: 1.3rem;
    }

    .reality-result-panel {
        min-height: auto;
        border-radius: 15px;
    }

    .result-empty {
        min-height: 420px;
        padding: 1.4rem;
    }

    .result-calculated {
        padding: 1rem;
    }

    .result-status-row {
        margin-bottom: 1rem;
    }

    .efficiency-values {
        gap: .4rem;
    }

    .efficiency-value strong {
        font-size: 1.05rem;
    }

    .money-result {
        padding: 1.05rem;
    }

    .money-result-value strong {
        font-size: clamp(2.3rem, 13vw, 3.4rem);
    }

    .result-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .result-metric:last-child {
        grid-column: 1 / -1;
    }

    .hero-intelligence-flow {
        grid-template-columns: 1fr 1fr;
        gap: 1.4rem 1rem;
        margin: 2.5rem auto 3.5rem;
    }

    .intelligence-flow-line {
        display: none;
    }

    .intelligence-flow-item {
        justify-content: flex-start;
    }

    .flow-number {
        width: 36px;
        height: 36px;
    }

    .hero-product {
        gap: 2rem;
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }

    .hero-product-copy {
        max-width: none;
        text-align: left;
        padding: 0;
    }

    .hero-product-kicker {
        margin-bottom: .8rem;
    }

    .hero-product-copy h2 {
        max-width: 100%;
        margin-bottom: 1.1rem;
        font-size: clamp(2.35rem, 11vw, 3.5rem);
        line-height: .98;
        letter-spacing: -.06em;
    }

    .hero-product-copy > p {
        margin-bottom: 1.45rem;
        font-size: .88rem;
        line-height: 1.68;
    }

    .hero-product-points {
        margin: 0;
    }

    .hero-product-point > span {
        width: 38px;
        height: 38px;
    }

    .hero-product-point strong {
        font-size: .72rem;
    }

    .hero-product-point small {
        font-size: .59rem;
    }

    .hero-product-link {
        justify-content: flex-start;
        margin-top: 1.5rem;
    }

    .hero-product-visual {
        padding: .5rem 0 1.5rem;
    }

    .product-dashboard {
        padding: 1rem;
        border-radius: 17px;
    }

    .product-dashboard-grid {
        grid-template-columns: 1fr 1fr;
        gap: .45rem;
    }

    .product-metric {
        padding: .65rem;
    }

    .product-main-value {
        padding: 1rem;
    }

    .product-insight-card {
        right: -3px;
        bottom: -5px;
        max-width: 205px;
    }

    .hero-closing {
        gap: .7rem;
        padding-top: 2rem;
    }

    .hero-closing-line {
        width: 35px;
    }

    .hero-closing p {
        font-size: .57rem;
    }

}


/* ==========================================================
   18. VERY SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .hero-container {
        width: calc(100% - 1rem);
    }

    .hero {
        padding-top: 2.25rem;
    }

    .hero-title {
        font-size: 2.48rem;
        letter-spacing: -.058em;
    }

    .hero-reality {
        padding: .8rem;
    }

    .reality-input-panel {
        padding: .85rem;
    }

    .result-calculated {
        padding: .8rem;
    }

    .result-status-label {
        display: none;
    }

    .efficiency-values {
        grid-template-columns: 1fr 24px 1fr;
    }

    .efficiency-arrow {
        width: 24px;
        height: 24px;
        font-size: .5rem;
    }

    .money-result-value strong {
        font-size: 2.25rem;
    }

    .yearly-result strong {
        font-size: .8rem;
    }

    .hero-intelligence-flow {
        grid-template-columns: 1fr;
    }

    .intelligence-flow-item {
        justify-content: flex-start;
    }

    .hero-product-copy h2 {
        font-size: 2.25rem;
    }

    .hero-product-point {
        gap: .7rem;
    }

    .product-dashboard-header {
        align-items: flex-start;
        gap: .5rem;
    }

    .product-health {
        font-size: .48rem;
        padding: .3rem .45rem;
    }

    .product-health-dot {
        width: 4px;
        height: 4px;
    }

    .product-chart {
        display: none;
    }

    .product-insight-card {
        position: relative;
        right: auto;
        bottom: auto;
        max-width: 100%;
        margin-top: .7rem;
    }

    :root {
        --revlo-motion-height: min(64vh, 520px);
    }

}


/* ==========================================================
   19. ACCESSIBILITY
========================================================== */

.hero a:focus-visible,
.hero button:focus-visible,
.hero input:focus-visible,
.hero select:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .32);
    outline-offset: 3px;
}


/* ==========================================================
   20. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

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

    .hero-bg-orb,
    .hero-eyebrow-dot,
    .result-orbit-ring,
    .product-insight-card {
        animation: none !important;
    }

    .efficiency-bar-fill {
        transition: none !important;
    }

    .hero-motion-slide,

}


/* ==========================================================
   21. FORM AUTOFILL
========================================================== */

.reality-input:-webkit-autofill,
.reality-select:-webkit-autofill {
    -webkit-text-fill-color: var(--revlo-ink);
    box-shadow: 0 0 0 1000px #ffffff inset;
}


/* ==========================================================
   22. NUMBER INPUT CLEANUP
========================================================== */

.reality-input[type="number"]::-webkit-inner-spin-button,
.reality-input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.reality-input[type="number"] {
    -moz-appearance: textfield;
}


/* ==========================================================
   END — REVLO HERO.CSS (PRODUCTION-READY, SINGLE FILE)
========================================================== */

/* ==========================================================
   REVLO PREMIUM REFINEMENT — HERO + MILEAGE REALITY CHECK
   hierarchy without changing functional selectors.
========================================================== */

.hero-motion {
    border-radius: 0 0 30px 30px;
    overflow: hidden;
    isolation: isolate;
}

.hero-motion::before,
.hero-motion::after {
    left: 7%;
    right: 7%;
    opacity: .55;
}

.hero-motion-wash {
    background:
        radial-gradient(75% 70% at 72% 12%, rgba(37,99,235,.20) 0%, transparent 62%),
        linear-gradient(180deg, rgba(4,12,26,.24) 0%, rgba(4,12,26,.10) 42%, rgba(4,12,26,.62) 100%);
    mix-blend-mode: normal;
}

.hero[data-hero-theme="dark-scrim"] .hero-motion-wash {
    background:
        radial-gradient(75% 70% at 72% 12%, rgba(37,99,235,.20) 0%, transparent 62%),
        linear-gradient(180deg, rgba(4,12,26,.24) 0%, rgba(4,12,26,.12) 44%, rgba(4,12,26,.66) 100%);
}

.hero-intro {
    position: relative;
    z-index: 6;
}

.hero-eyebrow {
    margin-bottom: 1rem;
}

.hero-title {
    max-width: 980px;
    margin-bottom: 1.35rem;
    text-shadow: 0 3px 38px rgba(0,0,0,.34);
}

.hero-lede {
    max-width: 680px;
    margin-bottom: 2rem;
    color: rgba(255,255,255,.82);
}

.hero-actions {
    gap: .7rem;
    margin-bottom: 1rem;
}

.hero-btn {
    min-height: 54px;
    padding-inline: 1.45rem;
    border-radius: 14px;
}

.hero-btn--secondary {
    background: rgba(7,15,29,.24);
    border-color: rgba(255,255,255,.22);
}

.hero-note {
    color: rgba(255,255,255,.62);
}

.hero-note-icon {
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.10);
}

.hero-reality {
    margin-top: 1.5rem;
    padding: clamp(1.2rem, 3vw, 2.6rem);
    border: 1px solid rgba(37,99,235,.10);
    border-radius: 28px;
    background:
        radial-gradient(700px 420px at 0% 0%, rgba(37,99,235,.055), transparent 68%),
        linear-gradient(180deg, #fbfdff 0%, #f4f8fe 100%);
    box-shadow: 0 24px 70px rgba(15,35,64,.08);
}

.reality-header {
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 2rem;
}

.reality-header-copy {
    max-width: 760px;
}

.reality-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .75rem;
    font-size: .62rem;
    letter-spacing: .14em;
}

.reality-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--revlo-blue);
    box-shadow: 0 0 0 5px rgba(37,99,235,.10);
}

.reality-title {
    max-width: 720px;
    margin-bottom: .75rem;
    font-size: clamp(2.2rem, 4.2vw, 4rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.reality-description {
    max-width: 610px;
    font-size: .88rem;
    line-height: 1.65;
}

.reality-powered {
    flex: 0 0 auto;
    padding: .65rem .8rem;
    border: 1px solid rgba(37,99,235,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 22px rgba(15,35,64,.04);
}

.reality-experience {
    grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr);
    gap: 1rem;
}

.reality-input-panel {
    padding: clamp(1.15rem, 2.2vw, 1.8rem);
    border-radius: 22px;
    border-color: rgba(15,35,64,.09);
    background: rgba(255,255,255,.86);
    box-shadow: 0 14px 38px rgba(15,35,64,.045);
}

.reality-step {
    gap: .85rem;
    margin-bottom: 1.15rem;
}

.reality-step-number {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.reality-step h3 {
    font-size: .94rem;
}

.reality-field {
    margin-bottom: 1.05rem;
}

.reality-input,
.reality-select {
    min-height: 54px;
    border-radius: 13px;
    border-color: rgba(15,35,64,.11);
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.reality-input:focus,
.reality-select:focus {
    border-color: rgba(37,99,235,.55);
    box-shadow: 0 0 0 4px rgba(37,99,235,.075), 0 8px 24px rgba(37,99,235,.06);
}

.reality-calculate {
    min-height: 56px;
    margin-top: 1.1rem;
    border-radius: 14px;
    background: linear-gradient(135deg,#17243a 0%,#0b1220 100%);
    box-shadow: 0 16px 34px rgba(11,18,32,.16);
}

.reality-result-panel {
    min-height: 100%;
    border-radius: 22px;
    box-shadow: 0 28px 72px rgba(7,19,42,.18), inset 0 1px 0 rgba(255,255,255,.06);
}

.result-calculated {
    padding: clamp(1.2rem, 2.2vw, 1.65rem);
}

.result-status-row {
    margin-bottom: 1.15rem;
}

.efficiency-comparison {
    padding: 1.05rem;
    border-radius: 15px;
    background: rgba(255,255,255,.045);
}

.money-result {
    padding: 1.45rem 1.3rem 1.25rem;
    border-radius: 17px;
    background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
}

.money-result-label {
    color: rgba(255,255,255,.52);
}

.money-result-value strong {
    font-size: clamp(2.8rem, 5vw, 4.35rem);
    letter-spacing: -.065em;
}

.yearly-result {
    margin-top: .65rem;
    padding: .9rem 1rem;
    border-radius: 13px;
}

.result-metrics {
    gap: .6rem;
    margin-top: .65rem;
}

.result-metric {
    padding: .8rem;
    border-radius: 11px;
}

.result-insight,
.result-optimization {
    border-radius: 12px;
}

.result-cta {
    min-height: 52px;
    border-radius: 13px;
}

.hero-intelligence-flow {
    margin-top: 2rem;
    opacity: .92;
}

@media (max-width: 1080px) {
    .reality-experience {
        grid-template-columns: 1fr;
    }
    .reality-input-panel {
        max-width: none;
    }
}

@media (max-width: 700px) {
    .hero-motion {
        border-radius: 0 0 22px 22px;
    }
    .hero-reality {
        margin-top: .75rem;
        padding: 1rem;
        border-radius: 22px;
    }
    .reality-header {
        gap: 1rem;
        margin-bottom: 1.35rem;
    }
    .reality-title {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }
    .reality-powered {
        align-self: flex-start;
    }
    .reality-result-panel {
        border-radius: 19px;
    }
}



/* ==========================================================
   REVLO — PRODUCTION PREMIUM OVERRIDES
   ----------------------------------------------------------
   This layer intentionally preserves the existing HTML/JS
   contract. It refines the visual system, interaction states,
   responsive behaviour and accessibility without renaming
   selectors or changing calculation logic.
========================================================== */

.hero {
    --premium-radius-xl: 32px;
    --premium-radius-lg: 22px;
    --premium-radius-md: 14px;
    --premium-shadow-xl: 0 40px 100px rgba(15, 35, 64, .14);
    --premium-shadow-lg: 0 22px 55px rgba(15, 35, 64, .10);
    --premium-blue: #2563eb;
    --premium-blue-deep: #123b9b;
    --premium-ink: #0b1220;
}

/* Keep the cinematic layer visually attached to the intro only. */
.hero-motion {
    top: 0;
    bottom: auto;
    height: var(--revlo-motion-height);
    min-height: 700px;
    z-index: 0;
    pointer-events: none;
}

.hero-motion-video-wrap,
.hero-motion-slide {
    width: 100%;
    height: 100%;
}

.hero-motion-slide {
    display: block;
    object-fit: cover;
    object-position: 50% 45%;
    transform: scale(1.015);
    transform-origin: center center;
    filter: saturate(.94) contrast(1.04) brightness(.92);
    will-change: opacity, transform;
}

.hero-motion-slide.is-active {
    animation: revloHeroKenBurns 9s cubic-bezier(.16,1,.3,1) both;
}

@keyframes revloHeroKenBurns {
    from { transform: scale(1.015); }
    to   { transform: scale(1.045); }
}

.hero-motion-wash {
    background:
        linear-gradient(180deg, rgba(4,10,20,.80) 0%, rgba(4,10,20,.48) 30%, rgba(4,10,20,.22) 58%, rgba(248,251,255,.96) 100%),
        linear-gradient(90deg, rgba(4,10,20,.62) 0%, rgba(4,10,20,.18) 52%, rgba(4,10,20,.38) 100%);
}

.hero-intro {
    max-width: 980px;
    margin-bottom: clamp(3.4rem, 6vw, 5.25rem);
    padding-top: max(calc(var(--revlo-header-clearance) + 1.5rem), 7.5rem);
}

.hero-intro::before {
    inset: -2.5rem -3rem -4.5rem -3rem;
    background:
        radial-gradient(ellipse 70% 65% at 50% 42%, rgba(3,8,18,.58) 0%, rgba(3,8,18,.32) 46%, transparent 78%),
        linear-gradient(to bottom, rgba(3,8,18,.14) 0%, rgba(3,8,18,.26) 62%, transparent 100%);
    filter: blur(1px);
}

.hero-eyebrow {
    min-height: 34px;
    padding: .48rem .78rem .48rem .62rem;
    border-color: rgba(191,219,254,.30);
    background: rgba(3,10,22,.54);
    box-shadow: 0 12px 35px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
}

.hero-title {
    max-width: 1000px;
    margin-bottom: 1.5rem;
    font-size: clamp(3.15rem, 7.15vw, 7rem);
    line-height: .93;
    letter-spacing: -.075em;
}

.hero-title-accent {
    background: linear-gradient(105deg,#fff 0%,#e0edff 30%,#93c5fd 62%,#60a5fa 82%,#818cf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-lede {
    max-width: 740px;
    margin-bottom: 2rem;
    color: rgba(255,255,255,.88);
    font-size: clamp(.98rem,1.35vw,1.1rem);
    line-height: 1.7;
}

.hero-actions {
    gap: .75rem;
}

.hero-btn {
    min-height: 54px;
    padding: .92rem 1.45rem;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.hero-btn--primary {
    background: linear-gradient(135deg,#4b8df8 0%,#2563eb 50%,#1746b5 100%);
    box-shadow: 0 16px 38px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.24);
}

.hero-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 48px rgba(37,99,235,.38), inset 0 1px 0 rgba(255,255,255,.24);
}

.hero-btn--secondary {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.09);
}

.hero-btn:focus-visible,
.reality-input:focus-visible,
.reality-select:focus-visible,
.vehicle-suggestion:focus-visible,
.selected-vehicle-change:focus-visible,
.reality-calculate:focus-visible,
.hero-reality a:focus-visible,
.hero-reality button:focus-visible {
    outline: 3px solid rgba(96,165,250,.58);
    outline-offset: 3px;
}

/* ==========================================================
   PREMIUM MRC SHELL
========================================================== */

.hero-reality {
    width: min(100%, 1240px);
    margin-inline: auto;
    padding: clamp(1.25rem, 3vw, 3.4rem);
    border: 1px solid rgba(37,99,235,.12);
    border-radius: var(--premium-radius-xl);
    background:
        radial-gradient(500px 240px at 100% 0%, rgba(96,165,250,.10), transparent 72%),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(242,247,255,.90));
    box-shadow: var(--premium-shadow-xl), inset 0 1px 0 rgba(255,255,255,.98);
}

.reality-header {
    align-items: flex-end;
    margin-bottom: clamp(1.75rem, 3vw, 2.7rem);
}

.reality-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem .62rem;
    margin-bottom: .8rem;
    border: 1px solid rgba(37,99,235,.13);
    border-radius: 999px;
    background: rgba(37,99,235,.055);
    letter-spacing: .13em;
}

.reality-title {
    font-size: clamp(2.05rem, 3.6vw, 3.55rem);
    letter-spacing: -.06em;
}

.reality-title span {
    background: linear-gradient(100deg,#2563eb,#4f46e5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reality-description {
    max-width: 650px;
    font-size: .95rem;
}

.reality-powered {
    min-height: 34px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 8px 25px rgba(37,99,235,.05);
}

.reality-experience {
    grid-template-columns: minmax(320px,.88fr) minmax(0,1.12fr);
    gap: 1.25rem;
}

.reality-input-panel,
.reality-result-panel {
    border-radius: var(--premium-radius-lg);
}

.reality-input-panel {
    padding: clamp(1.15rem, 2vw, 1.8rem);
    border-color: rgba(15,35,64,.08);
    box-shadow: var(--premium-shadow-lg), inset 0 1px 0 rgba(255,255,255,.98);
}

.reality-result-panel {
    min-height: 100%;
    overflow: hidden;
    border: 1px solid rgba(37,99,235,.11);
    box-shadow: 0 25px 70px rgba(15,35,64,.13);
}

.reality-step {
    gap: .85rem;
    margin-bottom: 1.05rem;
}

.reality-step-number {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    box-shadow: 0 8px 20px rgba(37,99,235,.22);
}

.reality-step h3 {
    font-size: .9rem;
    letter-spacing: -.01em;
}

.reality-input,
.reality-select {
    min-height: 54px;
    border-radius: 13px;
    border-color: rgba(15,35,64,.10);
    box-shadow: inset 0 1px 2px rgba(15,35,64,.025);
}

.reality-input:hover,
.reality-select:hover {
    border-color: rgba(37,99,235,.25);
}

.reality-input:focus,
.reality-select:focus {
    border-color: rgba(37,99,235,.62);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37,99,235,.075), 0 8px 24px rgba(37,99,235,.07);
}

.vehicle-suggestions {
    max-height: 260px;
    padding: .42rem;
    border-radius: 14px;
    border-color: rgba(37,99,235,.12);
    box-shadow: 0 24px 55px rgba(15,35,64,.16);
    backdrop-filter: blur(18px);
}

.vehicle-suggestion {
    min-height: 48px;
    padding: .72rem .78rem;
    border-radius: 10px;
}

.vehicle-suggestion:hover {
    background: rgba(37,99,235,.065);
}

.selected-vehicle {
    border-color: rgba(37,99,235,.14);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(37,99,235,.06);
}

.reality-calculate {
    min-height: 56px;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(37,99,235,.22), inset 0 1px 0 rgba(255,255,255,.20);
}

.reality-calculate:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.22);
}

.reality-calculate.is-error {
    animation: revloMrcShake .28s ease both;
}

@keyframes revloMrcShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ==========================================================
   RESULT EXPERIENCE
========================================================== */

.result-empty {
    min-height: 100%;
    padding: clamp(2rem, 5vw, 4rem);
}

.result-empty-orbit {
    transform: scale(.94);
    opacity: .94;
}

.result-empty h3 {
    letter-spacing: -.045em;
}

.result-calculated {
    height: 100%;
}

.result-calculated.is-revealing {
    animation: revloResultReveal .65s cubic-bezier(.16,1,.3,1) both;
}

@keyframes revloResultReveal {
    from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(3px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.money-result {
    position: relative;
    overflow: hidden;
}

.money-result::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.08) 50%, transparent 75%);
    transform: translateX(-110%);
}

.money-result-value.is-counting::after {
    animation: revloMoneyShine 1.05s ease .12s both;
}

@keyframes revloMoneyShine {
    to { transform: translateX(110%); }
}

.efficiency-bar-fill {
    transition: width 1.15s cubic-bezier(.16,1,.3,1);
}

/* Avoid accidental horizontal overflow from long scene copy or locale strings. */
.hero,
.hero-container,
.hero-intro,
.hero-reality,
.reality-experience,
.reality-input-panel,
.reality-result-panel {
    min-width: 0;
}

/* ==========================================================
   RESPONSIVE PRODUCTION TUNING
========================================================== */

@media (max-width: 1050px) {
    .hero-container {
        width: min(100%, calc(100% - 2rem));
    }

    .reality-experience {
        grid-template-columns: 1fr;
    }

    .reality-result-panel {
        min-height: 520px;
    }
}

@media (max-width: 760px) {
    .hero {
        padding-bottom: 3rem;
    }

    .hero-motion {
        height: min(780px, 92vh);
        min-height: 610px;
    }

    .hero-intro {
        margin-bottom: 2.5rem;
        padding-top: max(calc(var(--revlo-header-clearance) + .8rem), 6.7rem);
    }

    .hero-intro::before {
        inset: -1.5rem -1rem -2.8rem -1rem;
    }

    .hero-title {
        max-width: 680px;
        font-size: clamp(2.85rem, 12.5vw, 4.7rem);
        line-height: .95;
        letter-spacing: -.068em;
    }

    .hero-lede {
        max-width: 620px;
        font-size: .94rem;
        line-height: 1.62;
    }

    .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .hero-btn {
        width: min(100%, 360px);
    }

    .hero-reality {
        padding: 1rem;
        border-radius: 23px;
    }

    .reality-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.35rem;
    }

    .reality-powered {
        align-self: flex-start;
    }

    .reality-input-panel {
        padding: 1rem;
        border-radius: 17px;
    }

    .reality-result-panel {
        min-height: 500px;
        border-radius: 17px;
    }
}

@media (max-width: 480px) {
    .hero-container {
        width: min(100%, calc(100% - 1rem));
    }

    .hero-motion {
        min-height: 570px;
        height: 680px;
    }

    .hero-intro {
        padding-top: max(calc(var(--revlo-header-clearance) + .5rem), 6rem);
    }

    .hero-eyebrow {
        gap: .45rem;
        max-width: 100%;
        font-size: .59rem;
    }

    .hero-title {
        font-size: clamp(2.55rem, 13vw, 3.8rem);
    }

    .hero-note {
        max-width: 290px;
        line-height: 1.45;
    }

    .reality-title {
        font-size: clamp(1.9rem, 10vw, 2.6rem);
    }

    .reality-description {
        font-size: .86rem;
    }

    .reality-field-group {
        grid-template-columns: 1fr;
    }

    .result-empty {
        padding: 1.5rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-motion-slide,
    .hero-motion-slide.is-active,
    .hero-bg-orb,
    .hero-eyebrow-dot,
    .result-calculated.is-revealing,
    .reality-calculate.is-error,
    .money-result-value.is-counting::after {
        animation: none !important;
        transition: none !important;
    }

    .hero-motion-slide {
        transform: none !important;
    }

    .efficiency-bar-fill {
        transition: none !important;
    }
}