/* ================================================================
   Qlynic — ReviewsSystem.aspx  |  Public marketing page
   reviews.css  —  Design tokens (all sections) + S1
   Theme accent: Violet — intelligence, reputation, trust.
   ================================================================ */


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

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

body {
    background: #07080a;
    color: rgba(255,255,255,.96);
    font-family: 'Plus Jakarta Sans','DM Sans',system-ui,-apple-system,sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg {
    display: block;
    flex-shrink: 0;
}

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

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
}


/* ══════════════════════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════════════════════ */
:root {
    --rv-obs-1: #07080a;
    --rv-obs-2: #0c0d12;
    --rv-obs-3: #10121a;
    --rv-obs-4: #161923;
    --rv-obs-5: #1d2030;
    --rv-obs-6: #252840;
    --rv-sf-1: rgba(255,255,255,.03);
    --rv-sf-2: rgba(255,255,255,.06);
    --rv-sf-3: rgba(255,255,255,.10);
    --rv-t-1: rgba(255,255,255,.96);
    --rv-t-2: rgba(255,255,255,.64);
    --rv-t-3: rgba(255,255,255,.38);
    --rv-t-4: rgba(255,255,255,.18);
    --rv-t-5: rgba(255,255,255,.08);
    --rv-violet: #8b5cf6;
    --rv-violet-2: #a78bfa;
    --rv-violet-3: #c4b5fd;
    --rv-violet-glow: rgba(139,92,246,.48);
    --rv-violet-sub: rgba(139,92,246,.10);
    --rv-violet-bdr: rgba(139,92,246,.28);
    --rv-rose: #f43f5e;
    --rv-rose-glow: rgba(244,63,94,.42);
    --rv-rose-sub: rgba(244,63,94,.10);
    --rv-rose-bdr: rgba(244,63,94,.26);
    --rv-amber: #f59e0b;
    --rv-amber-2: #fbbf24;
    --rv-amber-glow: rgba(245,158,11,.42);
    --rv-amber-sub: rgba(245,158,11,.10);
    --rv-amber-bdr: rgba(245,158,11,.26);
    --rv-emerald: #10b981;
    --rv-emerald-2: #34d399;
    --rv-emerald-glow: rgba(16,185,129,.40);
    --rv-emerald-sub: rgba(16,185,129,.10);
    --rv-emerald-bdr: rgba(16,185,129,.24);
    --rv-azure: #3b82f6;
    --rv-azure-2: #60a5fa;
    --rv-azure-sub: rgba(59,130,246,.09);
    --rv-azure-bdr: rgba(59,130,246,.24);
    --rv-grad: linear-gradient(135deg,#8b5cf6 0%,#6366f1 100%);
    --rv-grad-text: linear-gradient(135deg,#a78bfa 0%,#818cf8 100%);
    --rv-grad-wide: linear-gradient(135deg,#c4b5fd 0%,#a78bfa 45%,#818cf8 100%);
    --rv-bdr: rgba(255,255,255,.06);
    --rv-bdr-2: rgba(255,255,255,.10);
    --rv-bdr-3: rgba(255,255,255,.16);
    --rv-shadow-sm: 0 4px 16px rgba(0,0,0,.48);
    --rv-shadow-md: 0 12px 40px rgba(0,0,0,.58);
    --rv-shadow-lg: 0 24px 72px rgba(0,0,0,.68);
    --rv-r-sm: 8px;
    --rv-r-md: 12px;
    --rv-r-lg: 16px;
    --rv-r-xl: 22px;
    --rv-r-2xl: 28px;
    --rv-r-pill: 999px;
    --rv-font: 'Plus Jakarta Sans','DM Sans',system-ui,-apple-system,sans-serif;
    --rv-mono: 'JetBrains Mono','Fira Code','Cascadia Code',ui-monospace,monospace;
    --rv-ease: cubic-bezier(.22,1,.36,1);
    --rv-spring: cubic-bezier(.34,1.56,.64,1);
}


/* ══════════════════════════════════════════════════════════════
   SHARED UTILITIES
══════════════════════════════════════════════════════════════ */
.rv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rv-mono);
    font-size: clamp(9.5px,.92vw,11px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rv-violet-2);
    background: var(--rv-violet-sub);
    border: 1px solid var(--rv-violet-bdr);
    border-radius: var(--rv-r-pill);
    padding: 5px 14px;
    width: fit-content;
}

.rv-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rv-violet-2);
    box-shadow: 0 0 8px var(--rv-violet-glow);
    flex-shrink: 0;
    animation: rv-pulse-dot 2s ease-in-out infinite;
}

@keyframes rv-pulse-dot {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.7);
    }
}

.rv-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: clamp(13px,1.5vw,17px) clamp(26px,3vw,42px);
    border-radius: var(--rv-r-pill);
    background: var(--rv-grad);
    color: #f0ecff;
    font-family: var(--rv-font);
    font-size: clamp(13.5px,1.3vw,15.5px);
    font-weight: 800;
    letter-spacing: -0.016em;
    line-height: 1;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(139,92,246,.35),0 8px 28px rgba(139,92,246,.32),0 0 50px rgba(139,92,246,.10);
    transition: transform .22s var(--rv-ease), box-shadow .22s ease;
    white-space: nowrap;
    cursor: pointer;
}

    .rv-btn-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(255,255,255,.18),transparent 60%);
        opacity: 0;
        transition: opacity .2s ease;
    }

    .rv-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 0 1px rgba(139,92,246,.55),0 14px 40px rgba(139,92,246,.45),0 0 70px rgba(139,92,246,.18);
    }

        .rv-btn-primary:hover::before {
            opacity: 1;
        }

    .rv-btn-primary:active {
        transform: translateY(0);
    }

.rv-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: clamp(12px,1.4vw,16px) clamp(24px,2.8vw,38px);
    border-radius: var(--rv-r-pill);
    background: transparent;
    border: 1px solid var(--rv-bdr-2);
    color: var(--rv-t-2);
    font-family: var(--rv-font);
    font-size: clamp(13.5px,1.3vw,15.5px);
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .22s var(--rv-ease);
}

    .rv-btn-ghost:hover {
        border-color: var(--rv-bdr-3);
        color: var(--rv-t-1);
        background: var(--rv-sf-1);
        transform: translateY(-2px);
    }

@keyframes rv-caret {
    0%,45% {
        opacity: 1
    }

    55%,100% {
        opacity: 0
    }
}


/* ══════════════════════════════════════════════════════════════
   SECTION 1 — CENTRED HERO + HORIZONTAL REVIEW TICKER

   Architecture:
   ┌─────────────────────────────────────────────┐
   │          particle canvas (absolute)          │
   │  ┌──────────────────────────────────────┐   │
   │  │    CENTRED COLUMN  (max-width 760px) │   │
   │  │  eyebrow                             │   │
   │  │  H1 — wipe+shimmer (3 lines)         │   │
   │  │  sub copy                            │   │
   │  │  stats row                           │   │
   │  │  CTAs                                │   │
   │  └──────────────────────────────────────┘   │
   │                                              │
   │  ┌──────────────────────────────────────┐   │
   │  │   HORIZONTAL TICKER (full width)     │   │
   │  │   ← cards scroll left continuously   │   │
   │  └──────────────────────────────────────┘   │
   └─────────────────────────────────────────────┘

   NO GRID — works identically at every breakpoint.
   The ticker uses translateX(0→-50%) on a track that
   contains 2 identical sets of cards, creating a
   seamless infinite loop regardless of viewport width.

   Innovations:
   ① WIPE + SHIMMER headline (preserved from original)
   ② HORIZONTAL REVIEW TICKER (replaces vertical feed)
══════════════════════════════════════════════════════════════ */

/* ── Shell ── */
.rv-s1 {
    position: relative;
    background: var(--rv-obs-1);
    overflow: hidden;
    /* Height fits content + ticker — no forced 100svh that creates dead space */
    padding: clamp(96px,12vh,140px) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Particle canvas */
.rv-s1-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.8s ease;
}

.rv-s1-on .rv-s1-canvas {
    opacity: 1;
}

/* Dot grid */
.rv-s1-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(139,92,246,.036) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 90% 88% at 50% 40%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 88% at 50% 40%, black 20%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease .4s;
}

.rv-s1-on .rv-s1-grid {
    opacity: 1;
}

/* Orbs */
.rv-s1-orb-tl {
    position: absolute;
    top: -12%;
    left: -6%;
    width: clamp(280px,40vw,560px);
    height: clamp(280px,40vw,560px);
    border-radius: 50%;
    background: radial-gradient(circle,rgba(139,92,246,.08) 0%,transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.6s ease .5s;
    animation: rv-s1-orb-tl 24s ease-in-out infinite alternate;
}

.rv-s1-on .rv-s1-orb-tl {
    opacity: 1;
}

@keyframes rv-s1-orb-tl {
    from {
        transform: translate(0,0) scale(1);
    }

    to {
        transform: translate(22px,-32px) scale(1.10);
    }
}

.rv-s1-orb-br {
    position: absolute;
    bottom: -10%;
    right: -4%;
    width: clamp(200px,28vw,400px);
    height: clamp(200px,28vw,400px);
    border-radius: 50%;
    background: radial-gradient(circle,rgba(99,102,241,.06) 0%,transparent 70%);
    filter: blur(72px);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.6s ease .6s;
}

.rv-s1-on .rv-s1-orb-br {
    opacity: 1;
}

/* Beam */
.rv-s1-beam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -180px;
    width: 180px;
    background: linear-gradient(to right,transparent,rgba(139,92,246,.06),rgba(167,139,250,.11),rgba(139,92,246,.06),transparent);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}

    .rv-s1-beam::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1.5px;
        margin-left: -1px;
        background: linear-gradient(to bottom,transparent 0%,rgba(167,139,250,.70) 15%,rgba(167,139,250,.95) 50%,rgba(167,139,250,.70) 85%,transparent 100%);
    }

    .rv-s1-beam.fire {
        animation: rv-s1-beam-sweep 1.9s cubic-bezier(.42,0,.22,1) forwards;
    }

@keyframes rv-s1-beam-sweep {
    0% {
        left: -180px;
        opacity: 0;
    }

    4% {
        opacity: 1;
    }

    96% {
        opacity: 1;
    }

    100% {
        left: calc(100% + 180px);
        opacity: 0;
    }
}


/* ════ CENTRED CONTENT COLUMN ════ */
.rv-s1-col {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 720px;
    padding: 0 clamp(20px,4vw,40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(18px,2.4vw,28px);
    /* Bottom space before ticker */
    padding-bottom: clamp(48px,6vh,72px);
}


/* ── Eyebrow ── */
.rv-s1-brow {
    opacity: 0;
    transform: translateY(-14px);
    transition: none;
}

    .rv-s1-brow.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .5s ease, transform .5s var(--rv-spring);
    }


/* ════ WIPE + SHIMMER HEADLINE (preserved innovation) ════
   Each line in overflow:hidden clip. Text starts at
   translateY(110%) → springs to 0 on .show.
   Accent line gets a traveling spotlight sweep after.
════ */
.rv-s1-h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2px,.4vw,4px);
    width: 100%;
}

.rv-s1-clip {
    overflow: hidden;
    padding-bottom: .05em;
    /* Full width so wipe looks clean even on narrow mobile */
    width: 100%;
    display: flex;
    justify-content: center;
}

.rv-s1-wipe {
    display: block;
    font-family: var(--rv-font);
    font-size: clamp(36px,6vw,84px);
    font-weight: 800;
    line-height: 1.10;
    letter-spacing: -0.052em;
    color: var(--rv-t-1);
    text-align: center;
    transform: translateY(110%);
    transition: transform .72s var(--rv-spring) var(--rv-wd,0ms);
}

.rv-s1-clip.show .rv-s1-wipe {
    transform: translateY(0);
}

/* Accent — gradient text + shimmer overlay */
.rv-s1-wipe--accent {
    position: relative;
    background: var(--rv-grad-wide);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 220% auto;
}

.rv-s1-shimmer-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.rv-s1-shimmer-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -120%;
    width: 120%;
    background: linear-gradient(90deg, transparent 0%,rgba(196,181,253,.18) 30%, rgba(255,255,255,.40) 50%,rgba(196,181,253,.18) 70%, transparent 100%);
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: overlay;
}

    .rv-s1-shimmer-bar.sweep {
        animation: rv-s1-shimmer-run 900ms cubic-bezier(.42,0,.22,1) forwards;
    }

@keyframes rv-s1-shimmer-run {
    0% {
        left: -120%;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}


/* ── Sub ── */
.rv-s1-sub {
    font-size: clamp(15px,1.6vw,18.5px);
    color: var(--rv-t-2);
    line-height: 1.76;
    max-width: 580px;
    opacity: 0;
    filter: blur(6px);
    transition: none;
}

    .rv-s1-sub.show {
        opacity: 1;
        filter: blur(0);
        transition: opacity .65s ease, filter .65s ease;
    }


/* ── Stats row ── */
.rv-s1-stats {
    display: flex;
    align-items: center;
    gap: clamp(16px,2.8vw,36px);
    flex-wrap: wrap;
    justify-content: center;
}

.rv-s1-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transform: translateY(14px);
    transition: none;
}

    .rv-s1-stat.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .5s ease var(--rv-sd,0ms), transform .5s var(--rv-ease) var(--rv-sd,0ms);
    }

.rv-s1-stat-n {
    font-family: var(--rv-font);
    font-size: clamp(28px,3.8vw,52px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.055em;
    color: var(--rv-violet-2);
    text-shadow: 0 0 22px var(--rv-violet-glow);
}

.rv-s1-stat-l {
    font-size: clamp(10.5px,1vw,12.5px);
    font-weight: 600;
    color: var(--rv-t-3);
    letter-spacing: .03em;
    line-height: 1.3;
    text-align: center;
}

.rv-s1-stat-div {
    width: 1px;
    height: clamp(32px,4.5vw,52px);
    background: var(--rv-bdr-2);
    align-self: center;
    flex-shrink: 0;
}


/* ── CTAs ── */
.rv-s1-ctas {
    display: flex;
    align-items: center;
    gap: clamp(10px,1.4vw,16px);
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(16px);
    transition: none;
}

    .rv-s1-ctas.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .6s ease, transform .6s var(--rv-ease);
    }


/* ════════════════════════════════════════════════════════════
   HORIZONTAL REVIEW TICKER
   Full viewport width strip that scrolls left infinitely.
   Contains 2 identical sets of 8 cards (16 total).
   Animation: translateX(0 → -50%) over 30s.
   Seamless because both halves are identical.
   Masked with left+right gradient fades.
════════════════════════════════════════════════════════════ */
.rv-s1-ticker-section {
    position: relative;
    z-index: 4;
    width: 100%;
    margin-top: 0;
    padding: clamp(22px,3.5vw,38px) 0 clamp(28px,4vw,48px);
    border-top: 1px solid var(--rv-bdr);
    background: linear-gradient(to bottom,rgba(139,92,246,.04),transparent);
    overflow: hidden;
}

/* "LIVE REVIEWS" header line above ticker */
.rv-s1-ticker-hdr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: clamp(14px,2vw,20px);
    opacity: 0;
    transform: translateY(8px);
    transition: none;
}

    .rv-s1-ticker-hdr.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .5s ease, transform .5s var(--rv-ease);
    }

.rv-s1-ticker-hdr-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rv-violet-2);
    box-shadow: 0 0 10px var(--rv-violet-glow);
    flex-shrink: 0;
    animation: rv-pulse-dot 1.5s ease-in-out infinite;
}

.rv-s1-ticker-hdr-lbl {
    font-family: var(--rv-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rv-violet-2);
}

.rv-s1-ticker-hdr-count {
    font-family: var(--rv-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--rv-t-4);
    padding: 2px 9px;
    border: 1px solid var(--rv-bdr);
    border-radius: var(--rv-r-pill);
    background: var(--rv-sf-1);
}

/* Left+right gradient fades */
.rv-s1-ticker-section::before,
.rv-s1-ticker-section::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    width: clamp(40px,8vw,120px);
}

.rv-s1-ticker-section::before {
    left: 0;
    background: linear-gradient(to right,var(--rv-obs-1),transparent);
}

.rv-s1-ticker-section::after {
    right: 0;
    background: linear-gradient(to left, var(--rv-obs-1),transparent);
}

/* Viewport clip */
.rv-s1-ticker-viewport {
    overflow: hidden;
    width: 100%;
}

/* Scrolling track — contains 2× cards */
.rv-s1-ticker-track {
    display: flex;
    gap: clamp(10px,1.4vw,16px);
    width: max-content;
    /* PAUSED by default — JS starts it after cards are visible */
    animation: rv-s1-ticker-scroll 34s linear infinite;
    animation-play-state: paused;
}

    .rv-s1-ticker-track.rolling {
        animation-play-state: running;
    }

@keyframes rv-s1-ticker-scroll {
    /* Moves exactly half its width — seamless because content is duplicated */
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Pause on hover */
.rv-s1-ticker-section:hover .rv-s1-ticker-track {
    animation-play-state: paused;
}

/* Individual card */
.rv-s1-tcard {
    background: var(--rv-obs-3);
    border: 1px solid var(--rv-bdr-2);
    border-radius: var(--rv-r-lg);
    padding: clamp(12px,1.5vw,16px) clamp(14px,1.6vw,18px);
    width: clamp(240px,26vw,310px);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.04);
    transition: border-color .3s ease;
}

    .rv-s1-tcard:hover {
        border-color: var(--rv-urgency-col,var(--rv-bdr-3));
    }

    /* Left urgency stripe */
    .rv-s1-tcard::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 3px;
        border-radius: 3px 0 0 3px;
        background: var(--rv-urgency-col,var(--rv-bdr-2));
    }

.rv-s1-tcard--critical {
    --rv-urgency-col: var(--rv-rose);
    border-color: var(--rv-rose-bdr);
}

.rv-s1-tcard--high {
    --rv-urgency-col: var(--rv-rose);
    border-color: var(--rv-rose-bdr);
}

.rv-s1-tcard--medium {
    --rv-urgency-col: var(--rv-amber);
    border-color: var(--rv-amber-bdr);
}

.rv-s1-tcard--positive {
    --rv-urgency-col: var(--rv-emerald);
    border-color: var(--rv-emerald-bdr);
}

/* Card top row */
.rv-s1-tcard-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.rv-s1-tcard-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rv-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8.5px;
    font-weight: 800;
    color: #f0ecff;
    flex-shrink: 0;
}

.rv-s1-tcard-name {
    font-size: clamp(11.5px,1.12vw,13px);
    font-weight: 800;
    color: var(--rv-t-1);
    letter-spacing: -0.014em;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-s1-tcard-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--rv-mono);
    font-size: clamp(7px,.68vw,8px);
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    border-radius: var(--rv-r-pill);
    padding: 2px 7px;
    flex-shrink: 0;
}

.rv-s1-tcard--critical .rv-s1-tcard-badge,
.rv-s1-tcard--high .rv-s1-tcard-badge {
    color: var(--rv-rose);
    background: var(--rv-rose-sub);
    border: 1px solid var(--rv-rose-bdr);
}

.rv-s1-tcard--medium .rv-s1-tcard-badge {
    color: var(--rv-amber-2);
    background: var(--rv-amber-sub);
    border: 1px solid var(--rv-amber-bdr);
}

.rv-s1-tcard--positive .rv-s1-tcard-badge {
    color: var(--rv-emerald-2);
    background: var(--rv-emerald-sub);
    border: 1px solid var(--rv-emerald-bdr);
}

/* Seeds */
.rv-s1-tcard-seeds {
    display: flex;
    gap: 3px;
    align-items: center;
    margin-bottom: 7px;
}

.rv-s1-tseed {
    width: clamp(8px,1vw,10px);
    height: clamp(10px,1.3vw,13px);
    border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%;
    flex-shrink: 0;
}

.rv-s1-tseed--on {
    background: var(--rv-urgency-col,var(--rv-violet-2));
    box-shadow: 0 0 4px var(--rv-urgency-col,var(--rv-violet-glow));
}

.rv-s1-tseed--off {
    background: var(--rv-obs-6);
}

/* Snippet */
.rv-s1-tcard-snippet {
    font-size: clamp(11px,1.05vw,12.5px);
    color: var(--rv-t-2);
    line-height: 1.52;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

/* Footer */
.rv-s1-tcard-foot {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rv-s1-tcard-id {
    font-family: var(--rv-mono);
    font-size: clamp(7.5px,.72vw,8.5px);
    font-weight: 600;
    color: var(--rv-t-4);
    letter-spacing: .06em;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-s1-tcard-ago {
    font-family: var(--rv-mono);
    font-size: clamp(7.5px,.72vw,8.5px);
    font-weight: 700;
    color: var(--rv-t-4);
    letter-spacing: .06em;
    white-space: nowrap;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — No grid means NO BREAKPOINT STRUCTURAL CHANGES.
   Only typography and spacing adjustments needed.
════════════════════════════════════════════════════════════ */

@media (max-width:640px) {
    .rv-s1 {
        padding-top: clamp(72px,9vh,96px);
    }

    .rv-s1-col {
        padding: 0 18px clamp(36px,5vh,52px);
        gap: clamp(16px,3.5vw,22px);
    }

    .rv-s1-wipe {
        font-size: clamp(32px,9vw,52px);
        letter-spacing: -0.046em;
    }

    .rv-s1-sub {
        font-size: 15px;
    }

    .rv-s1-stats {
        gap: clamp(12px,4vw,20px);
    }

    .rv-s1-stat-div {
        height: 32px;
    }

    .rv-s1-stat-n {
        font-size: clamp(26px,8vw,40px);
    }

    .rv-s1-ctas {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .rv-btn-primary, .rv-btn-ghost {
        width: 100%;
        justify-content: center;
        max-width: 380px;
    }

    .rv-s1-tcard {
        width: clamp(210px,72vw,280px);
    }

    .rv-s1-ticker-track {
        gap: 10px;
    }
}

@media (max-width:400px) {
    .rv-s1-col {
        padding-left: 14px;
        padding-right: 14px;
    }

    .rv-s1-wipe {
        font-size: clamp(28px,8.5vw,42px);
    }

    .rv-s1-tcard {
        width: clamp(190px,78vw,250px);
    }
}


/* ════ REDUCED MOTION ════ */
@media (prefers-reduced-motion:reduce) {
    .rv-s1-canvas, .rv-s1-grid, .rv-s1-orb-tl, .rv-s1-orb-br, .rv-s1-beam {
        display: none !important;
    }

    .rv-s1-brow, .rv-s1-sub, .rv-s1-ctas {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .rv-s1-clip {
        overflow: visible !important;
    }

    .rv-s1-wipe {
        transform: none !important;
        transition: none !important;
    }

    .rv-s1-stat {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rv-s1-shimmer-bar {
        display: none !important;
    }

    .rv-s1-ticker-track {
        animation: none !important;
    }

    .rv-s1-ticker-hdr {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rv-eyebrow-dot, .rv-s1-ticker-hdr-dot {
        animation: none !important;
    }
}

























































/* S2 — THE SIGNAL */

/* ════════════════════════════════════════════════════════════
   SHELL
════════════════════════════════════════════════════════════ */
.rv-s2 {
    position: relative;
    background: var(--rv-obs-1);
    overflow: hidden;
    min-height: 100svh;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--rv-bdr);
}

    .rv-s2::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, var(--rv-violet-bdr) 30%, rgba(167,139,250,.32) 50%, var(--rv-violet-bdr) 70%, transparent 100%);
        z-index: 5;
        pointer-events: none;
    }

.rv-s2-dotgrid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(139,92,246,.030) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 10%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 10%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease .4s;
}

.rv-s2.alive .rv-s2-dotgrid {
    opacity: 1;
}

.rv-s2-orb-l {
    position: absolute;
    top: -8%;
    left: -6%;
    width: clamp(300px,42vw,560px);
    height: clamp(300px,42vw,560px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.07) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.6s ease .5s;
    animation: rv-s2-orb 22s ease-in-out infinite alternate;
}

.rv-s2.alive .rv-s2-orb-l {
    opacity: 1;
}

@keyframes rv-s2-orb {
    from {
        transform: translate(0,0);
    }

    to {
        transform: translate(18px,-22px);
    }
}

.rv-s2-orb-r {
    position: absolute;
    bottom: -6%;
    right: -4%;
    width: clamp(220px,30vw,420px);
    height: clamp(220px,30vw,420px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.05) 0%, transparent 70%);
    filter: blur(72px);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.6s ease .6s;
}

.rv-s2.alive .rv-s2-orb-r {
    opacity: 1;
}

.rv-s2-beam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -180px;
    width: 180px;
    background: linear-gradient(to right, transparent,rgba(139,92,246,.05),rgba(167,139,250,.10), rgba(139,92,246,.05),transparent);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}

    .rv-s2-beam::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1.5px;
        margin-left: -1px;
        background: linear-gradient(to bottom, transparent 0%,rgba(167,139,250,.68) 15%, rgba(167,139,250,.94) 50%,rgba(167,139,250,.68) 85%,transparent 100%);
    }

    .rv-s2-beam.fire {
        animation: rv-s2-beam-sweep 2s cubic-bezier(.42,0,.22,1) forwards;
    }

@keyframes rv-s2-beam-sweep {
    0% {
        left: -180px;
        opacity: 0;
    }

    4% {
        opacity: 1;
    }

    96% {
        opacity: 1;
    }

    100% {
        left: calc(100% + 180px);
        opacity: 0;
    }
}


/* ══ EKG CANVAS ══ */
.rv-s2-ekg-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: clamp(100px,16vh,180px);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease 1.2s;
}

.rv-s2.alive .rv-s2-ekg-wrap {
    opacity: 1;
}

.rv-s2-ekg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Spike alert cards float above the EKG */
.rv-s2-alerts {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(50% + clamp(52px,8vh,98px));
    pointer-events: none;
    z-index: 4;
    overflow: visible;
}

/* Spike card that floats up */
.rv-s2-spike-card {
    position: absolute;
    background: rgba(244,63,94,.10);
    border: 1px solid rgba(244,63,94,.32);
    border-radius: var(--rv-r-md);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transform: translateX(-50%) translateY(0);
    animation: rv-s2-card-float 2.8s ease-out forwards;
    pointer-events: none;
    box-shadow: 0 0 16px rgba(244,63,94,.18);
}

@keyframes rv-s2-card-float {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
    }

    8% {
        opacity: 1;
    }

    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(-52px);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-72px);
    }
}

.rv-s2-spike-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f43f5e;
    box-shadow: 0 0 6px rgba(244,63,94,.70);
    flex-shrink: 0;
}

.rv-s2-spike-txt {
    font-family: var(--rv-mono);
    font-size: clamp(8px,.76vw,9px);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #f43f5e;
}


/* ══ INNER GRID ══ */
.rv-s2-inner {
    position: relative;
    z-index: 3;
    max-width: 1420px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(36px,5vw,80px);
    align-items: center;
    padding: clamp(80px,10vh,120px) clamp(20px,4.5vw,72px);
    padding-bottom: clamp(120px,18vh,200px);
}


/* ════════════════════════════════════════════════════════════
   LEFT — COPY   (SCRAMBLE DECODE reveal)

   INNOVATION: SCRAMBLE DECODE
   Each target element starts invisible. When JS fires, it
   fills the element with random glitch characters then
   resolves left-to-right — each character steps through
   4 random values before locking to the real character.
   A violet flash on each lock-in.
   Completely different from S1 wipe & S3 CRT scan.
════════════════════════════════════════════════════════════ */
.rv-s2-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(20px,2.5vw,30px);
}

.rv-s2-brow {
    opacity: 0;
    transform: translateY(12px);
    transition: none;
}

    .rv-s2-brow.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .5s ease, transform .5s var(--rv-ease);
    }

.rv-s2-h2 {
    font-family: var(--rv-font);
    font-size: clamp(28px,3.6vw,54px);
    font-weight: 800;
    line-height: 1.10;
    letter-spacing: -0.050em;
    color: var(--rv-t-1);
    opacity: 0;
    transition: none;
}

    .rv-s2-h2.decode {
        opacity: 1;
    }

.rv-s2-h2-accent {
    display: block;
    background: var(--rv-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 220% auto;
    animation: none;
}

    .rv-s2-h2-accent.live {
        animation: rv-s2-grad 5s linear infinite;
    }

@keyframes rv-s2-grad {
    to {
        background-position: 220% center;
    }
}

/* Character during glitch phase */
.rv-s2-char--glitch {
    color: var(--rv-violet-2);
    text-shadow: 0 0 8px var(--rv-violet-glow);
    display: inline-block;
}

.rv-s2-sub {
    font-size: clamp(14.5px,1.45vw,17.5px);
    color: var(--rv-t-2);
    line-height: 1.78;
    max-width: 480px;
    opacity: 0;
    transition: none;
}

    .rv-s2-sub.decode {
        opacity: 1;
    }

/* Stat pills */
.rv-s2-pills {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px,1.2vw,14px);
}

.rv-s2-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(139,92,246,.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(167,139,250,.20);
    border-radius: var(--rv-r-pill);
    padding: clamp(8px,1vw,12px) clamp(14px,1.6vw,20px);
    white-space: nowrap;
    opacity: 0;
    transform: scale(.84) translateY(8px);
    transition: none;
}

    .rv-s2-pill.show {
        opacity: 1;
        transform: scale(1) translateY(0);
        transition: opacity .5s ease var(--rv-pd,0ms), transform .55s var(--rv-spring) var(--rv-pd,0ms);
    }

.rv-s2-pill-n {
    font-family: var(--rv-font);
    font-size: clamp(20px,2.4vw,30px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.050em;
    color: var(--rv-violet-2);
    text-shadow: 0 0 20px var(--rv-violet-glow);
}

.rv-s2-pill-sep {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
}

.rv-s2-pill-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rv-s2-pill-lbl {
    font-size: clamp(11px,1.1vw,13px);
    font-weight: 700;
    color: rgba(255,255,255,.85);
    letter-spacing: -0.014em;
    line-height: 1.25;
}

.rv-s2-pill-sub {
    font-family: var(--rv-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 600;
    letter-spacing: .06em;
    color: rgba(255,255,255,.35);
}

/* Claim */
.rv-s2-claim {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: clamp(11px,1.4vw,15px) clamp(13px,1.5vw,17px);
    background: rgba(139,92,246,.07);
    border: 1px solid rgba(167,139,250,.20);
    border-radius: var(--rv-r-lg);
    opacity: 0;
    transform: translateY(10px);
    transition: none;
}

    .rv-s2-claim.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .6s ease, transform .6s var(--rv-ease);
    }

.rv-s2-claim-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rv-violet-2);
    box-shadow: 0 0 0 3px rgba(167,139,250,.16), 0 0 12px var(--rv-violet-glow);
    flex-shrink: 0;
    margin-top: 4px;
    animation: rv-pulse-dot 1.8s ease-in-out infinite;
}

.rv-s2-claim-txt {
    font-size: clamp(12px,1.15vw,14px);
    color: var(--rv-t-3);
    line-height: 1.60;
    font-weight: 600;
}

    .rv-s2-claim-txt strong {
        color: var(--rv-violet-2);
        font-weight: 800;
    }


/* ════════════════════════════════════════════════════════════
   RIGHT — NOTIFICATION TRAY
════════════════════════════════════════════════════════════ */
.rv-s2-tray-col {
    display: flex;
    flex-direction: column;
    gap: clamp(10px,1.3vw,14px);
}

.rv-s2-tray-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.rv-s2-tray-title {
    font-family: var(--rv-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rv-t-4);
}

.rv-s2-tray-live {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rv-s2-tray-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rv-violet-2);
    box-shadow: 0 0 8px var(--rv-violet-glow);
    animation: rv-pulse-dot 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.rv-s2-tray-lbl {
    font-family: var(--rv-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--rv-violet-2);
}

/* Notification card */
.rv-s2-notif {
    background: var(--rv-obs-4);
    border: 1px solid var(--rv-bdr-2);
    border-radius: var(--rv-r-lg);
    padding: clamp(12px,1.5vw,16px) clamp(13px,1.6vw,17px);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(20px) scale(.96);
    transition: none;
}

    .rv-s2-notif.show {
        opacity: 1;
        transform: translateX(0) scale(1);
        transition: opacity .5s ease var(--rv-nd,0ms), transform .55s var(--rv-spring) var(--rv-nd,0ms), border-color .3s ease;
    }

    .rv-s2-notif:hover {
        border-color: var(--rv-uc,var(--rv-bdr-3));
    }

    .rv-s2-notif::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 3px;
        border-radius: 3px 0 0 3px;
        background: var(--rv-uc,var(--rv-violet-2));
    }

    .rv-s2-notif::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1.5px;
        background: linear-gradient(90deg,var(--rv-uc,var(--rv-violet-2)),transparent);
        transform-origin: left;
        transform: scaleX(0);
        transition: transform .6s var(--rv-ease) var(--rv-nd,0ms);
    }

    .rv-s2-notif.show::after {
        transform: scaleX(1);
    }

.rv-s2-notif--critical {
    --rv-uc: var(--rv-rose);
    border-color: var(--rv-rose-bdr);
}

.rv-s2-notif--high {
    --rv-uc: var(--rv-rose);
    border-color: var(--rv-rose-bdr);
}

.rv-s2-notif--medium {
    --rv-uc: var(--rv-amber);
    border-color: var(--rv-amber-bdr);
}

.rv-s2-notif--positive {
    --rv-uc: var(--rv-emerald);
    border-color: var(--rv-emerald-bdr);
}

.rv-s2-notif-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.rv-s2-notif-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rv-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #f0ecff;
    flex-shrink: 0;
}

.rv-s2-notif-name {
    font-size: clamp(12px,1.2vw,13.5px);
    font-weight: 800;
    color: var(--rv-t-1);
    letter-spacing: -0.016em;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-s2-notif-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--rv-mono);
    font-size: clamp(7.5px,.72vw,8.5px);
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    border-radius: var(--rv-r-pill);
    padding: 2px 8px;
    flex-shrink: 0;
}

.rv-s2-notif--critical .rv-s2-notif-badge,
.rv-s2-notif--high .rv-s2-notif-badge {
    color: var(--rv-rose);
    background: var(--rv-rose-sub);
    border: 1px solid var(--rv-rose-bdr);
}

.rv-s2-notif--medium .rv-s2-notif-badge {
    color: var(--rv-amber-2);
    background: var(--rv-amber-sub);
    border: 1px solid var(--rv-amber-bdr);
}

.rv-s2-notif--positive .rv-s2-notif-badge {
    color: var(--rv-emerald-2);
    background: var(--rv-emerald-sub);
    border: 1px solid var(--rv-emerald-bdr);
}

.rv-s2-notif-snippet {
    font-size: clamp(11.5px,1.12vw,13px);
    color: var(--rv-t-2);
    line-height: 1.55;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}

.rv-s2-notif-foot {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rv-s2-notif-doctor {
    font-family: var(--rv-mono);
    font-size: clamp(8px,.76vw,9px);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--rv-t-4);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-s2-seeds {
    display: flex;
    gap: 3px;
    align-items: center;
    flex-shrink: 0;
}

.rv-s2-seed {
    width: clamp(8px,1vw,10px);
    height: clamp(10px,1.3vw,13px);
    border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%;
    flex-shrink: 0;
}

.rv-s2-seed--on {
    background: var(--rv-uc,var(--rv-violet-2));
    box-shadow: 0 0 4px var(--rv-uc,var(--rv-violet-glow));
}

.rv-s2-seed--off {
    background: var(--rv-obs-6);
}

.rv-s2-notif-ago {
    font-family: var(--rv-mono);
    font-size: clamp(8px,.76vw,9px);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--rv-t-4);
    flex-shrink: 0;
}


/* ════ RESPONSIVE ════ */

@media (max-width:1100px) {
    .rv-s2-h2 {
        font-size: clamp(26px,3.4vw,48px);
    }

    .rv-s2-sub {
        max-width: 100%;
    }
}

@media (max-width:900px) {
    .rv-s2-inner {
        grid-template-columns: 1fr;
        gap: clamp(28px,5vw,44px);
        padding-bottom: clamp(100px,14vh,160px);
    }
}

@media (max-width:640px) {
    .rv-s2-inner {
        padding: clamp(64px,9vh,90px) 18px clamp(100px,14vh,150px);
    }

    .rv-s2-ekg-wrap {
        height: clamp(80px,12vh,120px);
    }

    .rv-s2-h2 {
        font-size: clamp(26px,7.5vw,40px);
        letter-spacing: -0.042em;
    }

    .rv-s2-sub {
        font-size: 15px;
    }

    .rv-s2-tray-col {
        display: none;
    }
}

@media (max-width:400px) {
    .rv-s2-inner {
        padding-left: 14px;
        padding-right: 14px;
    }

    .rv-s2-h2 {
        font-size: clamp(24px,7vw,34px);
    }
}


/* ════ REDUCED MOTION ════ */
@media (prefers-reduced-motion:reduce) {
    .rv-s2-dotgrid, .rv-s2-orb-l, .rv-s2-orb-r {
        opacity: 1 !important;
        transition: none !important;
    }

    .rv-s2-beam, .rv-s2-ekg-wrap {
        display: none !important;
    }

    .rv-s2-brow {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rv-s2-h2, .rv-s2-sub {
        opacity: 1 !important;
    }

    .rv-s2-pill {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rv-s2-claim {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rv-s2-notif {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

        .rv-s2-notif::after {
            transform: scaleX(1) !important;
            transition: none !important;
        }

    .rv-s2-claim-dot, .rv-s2-tray-dot {
        animation: none !important;
    }
}











































/* S3 — IN YOUR HANDS */

/* ════════════════════════════════════════════════════════════
   SHELL — white section
════════════════════════════════════════════════════════════ */
.rv-s3 {
    position: relative;
    /* Barely-perceptible violet tint */
    background: #f7f5ff;
    overflow: hidden;
    padding: clamp(80px,10vh,120px) clamp(20px,4.5vw,72px);
    border-top: 1px solid rgba(139,92,246,.12);
}

/* Light grid pattern on white */
.rv-s3-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(139,92,246,.055) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
    opacity: 0;
    transition: opacity 1.2s ease .3s;
}

.rv-s3.alive .rv-s3-grid {
    opacity: 1;
}

/* Ambient orb — bottom right */
.rv-s3-orb {
    position: absolute;
    bottom: -10%;
    right: -5%;
    width: clamp(300px,42vw,560px);
    height: clamp(300px,42vw,560px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.07) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.6s ease .4s;
}

.rv-s3.alive .rv-s3-orb {
    opacity: 1;
}


/* ════ TWO-COLUMN INNER ════ */
.rv-s3-inner {
    position: relative;
    z-index: 2;
    max-width: 1420px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: clamp(40px,5.5vw,88px);
    align-items: start;
}


/* ════════════════════════════════════════════════════════════
   LEFT — COPY + CRT SCAN ANNOTATIONS

   INNOVATION: CRT SCAN REVEAL
   Each annotation block wraps content in .rv-s3-scan.
   A 2px violet glowing bar (.rv-s3-scanbar) is driven
   top→bottom via JS rAF. When it passes the 28% mark,
   the block content (.rv-s3-scan-body) fades in.
   Blocks are scanned sequentially with 80ms gap between
   bar starts. Feels like a terminal reading your screen.
════════════════════════════════════════════════════════════ */
.rv-s3-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(28px,3.5vw,44px);
    padding-top: 4px;
}

/* Eyebrow — dark text for white section */
.rv-s3-brow {
    opacity: 0;
    transform: translateY(12px);
    transition: none;
}

    .rv-s3-brow.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
    }

.rv-s3-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rv-mono);
    font-size: clamp(9.5px,.92vw,11px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rv-violet);
    background: var(--rv-violet-sub);
    border: 1px solid var(--rv-violet-bdr);
    border-radius: var(--rv-r-pill);
    padding: 5px 14px;
}

.rv-s3-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rv-violet);
    box-shadow: 0 0 8px var(--rv-violet-glow);
    flex-shrink: 0;
    animation: rv-pulse-dot 2s ease-in-out infinite;
}

/* H2 */
.rv-s3-h2 {
    font-family: var(--rv-font);
    font-size: clamp(26px,3.2vw,48px);
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: -0.048em;
    color: #0f0d1a;
    opacity: 0;
    transform: translateY(18px);
    transition: none;
}

    .rv-s3-h2.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1);
    }

    .rv-s3-h2 em {
        font-style: normal;
        background: linear-gradient(135deg,#8b5cf6 0%,#6366f1 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* Annotation blocks */
.rv-s3-annots {
    display: flex;
    flex-direction: column;
    gap: clamp(16px,2.2vw,24px);
}

/* Individual scan block */
.rv-s3-scan {
    position: relative;
    overflow: hidden;
    border-radius: var(--rv-r-lg);
    background: #fff;
    border: 1px solid rgba(139,92,246,.10);
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
    padding: clamp(14px,1.8vw,20px) clamp(16px,2vw,22px);
    opacity: 0;
    transform: translateX(-12px);
    transition: none;
}

    .rv-s3-scan.reveal {
        opacity: 1;
        transform: translateX(0);
        transition: opacity .5s ease var(--rv-ad,0ms), transform .5s cubic-bezier(.22,1,.36,1) var(--rv-ad,0ms);
    }

    .rv-s3-scan:hover {
        border-color: rgba(139,92,246,.24);
        box-shadow: 0 4px 24px rgba(139,92,246,.10);
    }

/* THE SCANBAR — moves top→bottom via JS */
.rv-s3-scanbar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(139,92,246,.60) 30%, rgba(167,139,250,.95) 50%, rgba(139,92,246,.60) 70%, transparent 100%);
    box-shadow: 0 0 8px rgba(139,92,246,.55), 0 0 20px rgba(139,92,246,.20);
    z-index: 2;
    pointer-events: none;
    transform: translateY(-100%); /* starts above */
    transition: none;
}
    /* Dim reflection below the bar */
    .rv-s3-scanbar::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 0;
        right: 0;
        height: 16px;
        background: linear-gradient(to bottom, rgba(139,92,246,.08), transparent);
        pointer-events: none;
    }

/* Content inside scan block — hidden until bar passes */
.rv-s3-scan-body {
    opacity: 0;
    transition: opacity .35s ease;
    position: relative;
    z-index: 1;
    display: flex;
    gap: clamp(12px,1.4vw,16px);
    align-items: flex-start;
}

    .rv-s3-scan-body.scanned {
        opacity: 1;
    }

.rv-s3-num {
    width: clamp(28px,2.8vw,34px);
    height: clamp(28px,2.8vw,34px);
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--rv-violet-sub);
    border: 1px solid var(--rv-violet-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rv-mono);
    font-size: clamp(10px,.96vw,12px);
    font-weight: 800;
    color: var(--rv-violet);
    letter-spacing: .02em;
    margin-top: 2px;
}

.rv-s3-annot-text {
    flex: 1;
    min-width: 0;
}

.rv-s3-annot-title {
    font-family: var(--rv-font);
    font-size: clamp(13px,1.28vw,15px);
    font-weight: 800;
    color: #0f0d1a;
    letter-spacing: -0.018em;
    line-height: 1.3;
    margin-bottom: 5px;
}

.rv-s3-annot-desc {
    font-size: clamp(12.5px,1.2vw,14px);
    font-weight: 500;
    color: #4a4568;
    line-height: 1.68;
}

    .rv-s3-annot-desc strong {
        color: #0f0d1a;
        font-weight: 700;
    }


/* ════════════════════════════════════════════════════════════
   RIGHT — DASHBOARD MOCKUP + URGENCY INTERRUPT

   The mockup is a faithful HTML replica of Reviews.aspx:
   - KPI strip (6 stats, count-up)
   - Mini distribution bars (animate fill)
   - Table: 3 rows (urgent / medium / positive)
   - Urgency interrupt: floating notification card
   - Detail modal: slides in from right edge
════════════════════════════════════════════════════════════ */
.rv-s3-dash-col {
    position: relative;
    opacity: 0;
    transform: translateY(24px) perspective(900px) rotateX(3deg);
    transition: none;
}

    .rv-s3-dash-col.show {
        opacity: 1;
        transform: translateY(0) perspective(900px) rotateX(0);
        transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
    }

/* Dashboard shell */
.rv-s3-dash {
    background: #fff;
    border: 1px solid rgba(139,92,246,.14);
    border-radius: var(--rv-r-xl);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(139,92,246,.06), 0 24px 72px rgba(0,0,0,.12), 0 4px 16px rgba(139,92,246,.08);
    position: relative;
}

/* Dashboard header bar */
.rv-s3-dash-bar {
    background: linear-gradient(135deg,#1e1b2e,#2d2050);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rv-s3-bar-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .rv-s3-bar-dot:nth-child(1) {
        background: #ff5f56;
    }

    .rv-s3-bar-dot:nth-child(2) {
        background: #ffbd2e;
    }

    .rv-s3-bar-dot:nth-child(3) {
        background: #27c93f;
    }

.rv-s3-bar-title {
    font-family: var(--rv-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .10em;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    margin-left: 6px;
}

/* Dashboard body */
.rv-s3-dash-body {
    padding: clamp(12px,1.6vw,20px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* KPI row */
.rv-s3-kpis {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 6px;
}

.rv-s3-kpi {
    background: #f9f7ff;
    border: 1px solid rgba(139,92,246,.10);
    border-radius: var(--rv-r-md);
    padding: 8px 8px 7px;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: none;
}

    .rv-s3-kpi.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .45s ease var(--rv-kd,0ms), transform .5s cubic-bezier(.22,1,.36,1) var(--rv-kd,0ms);
    }

.rv-s3-kpi-n {
    font-family: var(--rv-font);
    font-size: clamp(14px,1.5vw,18px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.042em;
    color: var(--rv-kpi-col, #0f0d1a);
}

.rv-s3-kpi-l {
    font-family: var(--rv-mono);
    font-size: clamp(6.5px,.62vw,7.5px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9189ab;
    margin-top: 3px;
}

.rv-s3-kpi--purple {
    --rv-kpi-col: #8b5cf6;
}

.rv-s3-kpi--cyan {
    --rv-kpi-col: #0891b2;
}

.rv-s3-kpi--green {
    --rv-kpi-col: #059669;
}

.rv-s3-kpi--red {
    --rv-kpi-col: #e11d48;
}

.rv-s3-kpi--amber {
    --rv-kpi-col: #d97706;
}

/* Distribution mini-chart */
.rv-s3-dist {
    background: #f9f7ff;
    border: 1px solid rgba(139,92,246,.08);
    border-radius: var(--rv-r-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rv-s3-dist-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.rv-s3-dist-lbl {
    font-family: var(--rv-mono);
    font-size: 9px;
    font-weight: 700;
    color: #9189ab;
    width: 8px;
    text-align: center;
    flex-shrink: 0;
}

.rv-s3-dist-track {
    flex: 1;
    height: 6px;
    background: rgba(139,92,246,.10);
    border-radius: 3px;
    overflow: hidden;
}

.rv-s3-dist-fill {
    height: 100%;
    border-radius: 3px;
    width: 0;
    transition: width .8s cubic-bezier(.22,1,.36,1) var(--rv-dd,0ms);
}

.rv-s3-dist-fill--5 {
    background: #8b5cf6;
}

.rv-s3-dist-fill--4 {
    background: #a78bfa;
}

.rv-s3-dist-fill--3 {
    background: #c4b5fd;
}

.rv-s3-dist-fill--2 {
    background: #f59e0b;
}

.rv-s3-dist-fill--1 {
    background: #f43f5e;
}

.rv-s3-dist-cnt {
    font-family: var(--rv-mono);
    font-size: 8.5px;
    font-weight: 700;
    color: #9189ab;
    width: 20px;
    text-align: right;
    flex-shrink: 0;
}

/* Reviews table */
.rv-s3-table {
    border: 1px solid rgba(139,92,246,.08);
    border-radius: var(--rv-r-md);
    overflow: hidden;
}

.rv-s3-table-hd {
    display: grid;
    grid-template-columns: 8px 1fr 1fr .8fr auto;
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
    background: #f4f0ff;
    border-bottom: 1px solid rgba(139,92,246,.10);
}

.rv-s3-th {
    font-family: var(--rv-mono);
    font-size: clamp(7px,.68vw,8px);
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #9189ab;
}

.rv-s3-table-rows {
    display: flex;
    flex-direction: column;
}

/* Table row */
.rv-s3-trow {
    display: grid;
    grid-template-columns: 8px 1fr 1fr .8fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(139,92,246,.06);
    position: relative;
    opacity: 0;
    transform: translateX(-14px);
    transition: none;
    cursor: pointer;
    background: transparent;
    transition: background .25s ease;
}

    .rv-s3-trow:last-child {
        border-bottom: none;
    }

    .rv-s3-trow.show {
        opacity: 1;
        transform: translateX(0);
        transition: opacity .5s ease var(--rv-rd,0ms), transform .55s cubic-bezier(.22,1,.36,1) var(--rv-rd,0ms), background .25s ease;
    }

    .rv-s3-trow:hover {
        background: rgba(139,92,246,.04);
    }

    .rv-s3-trow.intercepted {
        background: rgba(244,63,94,.05) !important;
        border-left: 2.5px solid #f43f5e;
    }

.rv-s3-urgency-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
    justify-self: center;
}

.rv-s3-urgency-dot--red {
    background: #f43f5e;
    box-shadow: 0 0 5px rgba(244,63,94,.55);
}

.rv-s3-urgency-dot--amber {
    background: #f59e0b;
    box-shadow: 0 0 5px rgba(245,158,11,.45);
}

.rv-s3-urgency-dot--green {
    background: #10b981;
    box-shadow: 0 0 5px rgba(16,185,129,.40);
}

.rv-s3-td {
    font-size: clamp(10.5px,1.02vw,12px);
    font-weight: 600;
    color: #2d2050;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-s3-td-sub {
    font-size: clamp(9px,.86vw,10px);
    font-weight: 500;
    color: #9189ab;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Seed dots (inline) */
.rv-s3-seeds-row {
    display: flex;
    gap: 2px;
    align-items: center;
}

.rv-s3-seed-dot {
    width: 7px;
    height: 9px;
    border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%;
    flex-shrink: 0;
}

.rv-s3-seed-dot--on {
    background: #8b5cf6;
}

.rv-s3-seed-dot--off {
    background: rgba(139,92,246,.15);
}

/* Status pill */
.rv-s3-pill {
    font-family: var(--rv-mono);
    font-size: clamp(7px,.68vw,8px);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--rv-r-pill);
    white-space: nowrap;
}

.rv-s3-pill--new {
    color: #8b5cf6;
    background: rgba(139,92,246,.10);
    border: 1px solid rgba(139,92,246,.20);
}

.rv-s3-pill--reviewed {
    color: #059669;
    background: rgba(5,150,105,.10);
    border: 1px solid rgba(5,150,105,.20);
}

.rv-s3-pill--flagged {
    color: #d97706;
    background: rgba(217,119,6,.10);
    border: 1px solid rgba(217,119,6,.20);
}


/* ════════════════════════════════════════════════════════════
   URGENCY INTERRUPT — floating notification card
   Slides in from top-right when triggered by JS.
   Auto-highlights the table row. Auto-opens modal.
════════════════════════════════════════════════════════════ */
.rv-s3-interrupt {
    position: absolute;
    top: clamp(52px,7vw,72px);
    right: clamp(-10px,-1.5vw,-2px);
    width: clamp(200px,22vw,270px);
    background: #fff;
    border: 1px solid rgba(244,63,94,.28);
    border-radius: var(--rv-r-lg);
    box-shadow: 0 8px 32px rgba(244,63,94,.18), 0 2px 8px rgba(0,0,0,.10);
    padding: 11px 13px;
    z-index: 20;
    /* Entry state */
    opacity: 0;
    transform: translateY(-100%) scale(.94);
    transition: opacity .5s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}

    .rv-s3-interrupt.show {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

.rv-s3-interrupt-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}

.rv-s3-interrupt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--rv-mono);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #f43f5e;
    background: rgba(244,63,94,.10);
    border: 1px solid rgba(244,63,94,.24);
    border-radius: var(--rv-r-pill);
    padding: 2px 8px;
    flex-shrink: 0;
}

.rv-s3-interrupt-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f43f5e;
    box-shadow: 0 0 6px rgba(244,63,94,.60);
    animation: rv-pulse-dot 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

.rv-s3-interrupt-name {
    font-size: 11.5px;
    font-weight: 800;
    color: #0f0d1a;
    letter-spacing: -0.014em;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-s3-interrupt-snippet {
    font-size: 10.5px;
    font-weight: 500;
    color: #4a4568;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ════════════════════════════════════════════════════════════
   DETAIL MODAL — slides in from right
════════════════════════════════════════════════════════════ */
.rv-s3-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44%;
    background: #fff;
    border-left: 1px solid rgba(139,92,246,.14);
    border-radius: 0 var(--rv-r-xl) var(--rv-r-xl) 0;
    box-shadow: -8px 0 40px rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
    /* Entry state */
    opacity: 0;
    transform: translateX(108%);
    transition: opacity .55s ease, transform .65s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}

    .rv-s3-modal.open {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

.rv-s3-modal-hd {
    background: linear-gradient(135deg,#1e1b2e,#2d2050);
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.rv-s3-modal-title {
    font-family: var(--rv-font);
    font-size: 12px;
    font-weight: 800;
    color: rgba(255,255,255,.88);
    letter-spacing: -0.014em;
}

.rv-s3-modal-close {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.rv-s3-modal-body {
    flex: 1;
    overflow: hidden;
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Meta grid */
.rv-s3-modal-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.rv-s3-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rv-s3-meta-lbl {
    font-family: var(--rv-mono);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #9189ab;
}

.rv-s3-meta-val {
    font-size: 10.5px;
    font-weight: 700;
    color: #2d2050;
    letter-spacing: -0.010em;
}

/* Comment block */
.rv-s3-modal-comment {
    background: #f9f7ff;
    border: 1px solid rgba(139,92,246,.10);
    border-radius: var(--rv-r-md);
    padding: 8px 10px;
    font-size: 10.5px;
    font-weight: 500;
    color: #4a4568;
    line-height: 1.6;
    flex-shrink: 0;
}

/* Urgency alert bar */
.rv-s3-modal-alert {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(244,63,94,.07);
    border: 1px solid rgba(244,63,94,.20);
    border-radius: var(--rv-r-md);
    padding: 7px 10px;
    flex-shrink: 0;
}

.rv-s3-alert-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f43f5e;
    box-shadow: 0 0 6px rgba(244,63,94,.55);
    flex-shrink: 0;
    animation: rv-pulse-dot 1.4s ease-in-out infinite;
}

.rv-s3-alert-txt {
    font-family: var(--rv-mono);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #f43f5e;
}

/* Action buttons */
.rv-s3-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.rv-s3-act {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--rv-r-md);
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid transparent;
    transition: background .25s ease, border-color .25s ease, transform .2s ease;
    opacity: 0;
    transform: translateX(8px);
    transition: none;
}

    .rv-s3-act.show {
        opacity: 1;
        transform: translateX(0);
        transition: opacity .4s ease var(--rv-acd,0ms), transform .4s cubic-bezier(.22,1,.36,1) var(--rv-acd,0ms), background .25s ease, border-color .25s ease;
    }

.rv-s3-act--save {
    color: #6d28d9;
    background: rgba(139,92,246,.07);
    border-color: rgba(139,92,246,.15);
}

.rv-s3-act--mark {
    color: #059669;
    background: rgba(5,150,105,.07);
    border-color: rgba(5,150,105,.15);
}

.rv-s3-act--flag {
    color: #d97706;
    background: rgba(217,119,6,.07);
    border-color: rgba(217,119,6,.15);
}

.rv-s3-act--escalate {
    color: #e11d48;
    background: rgba(244,63,94,.07);
    border-color: rgba(244,63,94,.15);
}

/* Active highlight — pulses on the button that's being animated */
.rv-s3-act.highlight {
    transform: scale(1.02) !important;
    border-color: currentColor !important;
    box-shadow: 0 0 12px rgba(139,92,246,.20);
}

.rv-s3-act-ico {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.rv-s3-act-lbl {
    flex: 1;
}

.rv-s3-act-kbd {
    font-family: var(--rv-mono);
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .06em;
    color: rgba(0,0,0,.25);
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 4px;
    padding: 1px 5px;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

@media (max-width:1200px) {
    .rv-s3-kpis {
        grid-template-columns: repeat(3,1fr);
    }

    .rv-s3-modal {
        width: 50%;
    }
}

@media (max-width:1000px) {
    .rv-s3-inner {
        grid-template-columns: 1fr;
        gap: clamp(32px,5vw,52px);
    }

    .rv-s3-dash-col {
        order: -1;
    }

    .rv-s3-interrupt {
        display: none;
    }

    .rv-s3-modal {
        position: relative;
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(139,92,246,.14);
        border-radius: 0 0 var(--rv-r-xl) var(--rv-r-xl);
        transform: translateY(16px);
    }

        .rv-s3-modal.open {
            transform: translateY(0);
        }
}

@media (max-width:640px) {
    .rv-s3 {
        padding: clamp(64px,8vh,90px) 18px clamp(52px,6vh,76px);
    }

    .rv-s3-kpis {
        grid-template-columns: repeat(3,1fr);
        gap: 5px;
    }

    .rv-s3-table-hd, .rv-s3-trow {
        grid-template-columns: 8px 1fr .9fr auto;
    }

        .rv-s3-trow > .rv-s3-td:nth-child(3) {
            display: none;
        }

        .rv-s3-table-hd > .rv-s3-th:nth-child(3) {
            display: none;
        }

    .rv-s3-h2 {
        font-size: clamp(22px,6.5vw,36px);
    }
}

@media (max-width:400px) {
    .rv-s3 {
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* ════ REDUCED MOTION ════ */
@media (prefers-reduced-motion:reduce) {
    .rv-s3-grid, .rv-s3-orb {
        opacity: 1 !important;
        transition: none !important;
    }

    .rv-s3-brow, .rv-s3-h2, .rv-s3-dash-col {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rv-s3-scan {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rv-s3-scan-body {
        opacity: 1 !important;
        transition: none !important;
    }

    .rv-s3-scanbar {
        display: none !important;
    }

    .rv-s3-kpi, .rv-s3-trow, .rv-s3-act {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rv-s3-dist-fill {
        transition: none !important;
    }

    .rv-s3-interrupt {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rv-s3-modal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rv-s3-eyebrow-dot, .rv-s3-interrupt-dot, .rv-s3-alert-dot {
        animation: none !important;
    }
}








































/* S4 — THE VERDICT */

/* ════════════════════════════════════════════════════════════
   SHELL
════════════════════════════════════════════════════════════ */
.rv-s4 {
    position: relative;
    background: var(--rv-obs-1);
    overflow: hidden;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(80px,12vh,140px) clamp(20px,4vw,60px) clamp(60px,8vh,100px);
    border-top: 1px solid var(--rv-bdr);
}

/* Dot grid */
.rv-s4-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(139,92,246,.032) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 82% 80% at 50% 50%, black 15%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 82% 80% at 50% 50%, black 15%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Orbs */
.rv-s4-orb-tl {
    position: absolute;
    top: -10%;
    left: -5%;
    width: clamp(340px,50vw,700px);
    height: clamp(340px,50vw,700px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.08) 0%, transparent 70%);
    filter: blur(88px);
    pointer-events: none;
    z-index: 0;
    animation: rv-s4-orb 24s ease-in-out infinite alternate;
}

@keyframes rv-s4-orb {
    from {
        transform: translate(0,0) scale(1);
    }

    to {
        transform: translate(20px,-28px) scale(1.08);
    }
}

.rv-s4-orb-br {
    position: absolute;
    bottom: -8%;
    right: -4%;
    width: clamp(260px,36vw,500px);
    height: clamp(260px,36vw,500px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.06) 0%, transparent 70%);
    filter: blur(72px);
    pointer-events: none;
    z-index: 0;
}

/* Ignition overlay — burns open from centre */
.rv-s4-ignite {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: var(--rv-obs-1);
    clip-path: circle(0% at 50% 50%);
    pointer-events: none;
    will-change: clip-path;
}

    .rv-s4-ignite.fire {
        animation: rv-s4-ignite-burn 1s cubic-bezier(.12,.8,.32,1) forwards;
    }

@keyframes rv-s4-ignite-burn {
    0% {
        clip-path: circle(0% at 50% 50%);
        background: radial-gradient(ellipse at 50% 50%,rgba(139,92,246,.6) 0%,rgba(99,102,241,.2) 30%,var(--rv-obs-1) 65%);
    }

    35% {
        background: radial-gradient(ellipse at 50% 50%,rgba(139,92,246,.08) 0%,transparent 50%);
        clip-path: circle(60% at 50% 50%);
    }

    100% {
        clip-path: circle(200% at 50% 50%);
        background: transparent;
    }
}

/* Spark canvas */
.rv-s4-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 21;
}

/* Gorilla watermark */
.rv-s4-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: clamp(260px,50vw,680px);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    filter: blur(1.5px);
    mix-blend-mode: screen;
    transition: opacity 2.4s ease .3s;
}

    .rv-s4-mark.show {
        opacity: .022;
    }


/* ════════════════════════════════════════════════════════════
   INNER — centred single column
════════════════════════════════════════════════════════════ */
.rv-s4-inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    width: 100%;
    max-width: 840px;
}


/* ════ EYEBROW ════ */
.rv-s4-brow {
    margin-bottom: clamp(22px,3vw,34px);
    opacity: 0;
    transform: translateY(10px);
    transition: none;
}

    .rv-s4-brow.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .5s ease, transform .5s var(--rv-ease);
    }


/* ════ FIVE SEEDS — animate in before headline ════
   The pomegranate seed rating (from the actual ReviewAppointment.aspx)
   renders as 5 large seeds that fill left-to-right on a custom
   rAF counter. This is the section's visual centrepiece — 5 seeds
   land, each with a violet burst, before a single word of copy appears.
════ */
.rv-s4-seeds {
    display: flex;
    align-items: flex-end;
    gap: clamp(8px,1.4vw,16px);
    justify-content: center;
    margin-bottom: clamp(22px,3vw,34px);
    height: clamp(52px,7vw,88px);
}

.rv-s4-seed {
    width: clamp(28px,3.8vw,52px);
    /* Pomegranate seed shape — teardrop */
    height: clamp(36px,4.8vw,66px);
    border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%;
    background: var(--rv-obs-5);
    position: relative;
    opacity: 0;
    transform: scale(0) translateY(20px);
    transition: none;
    flex-shrink: 0;
}
    /* Filled state */
    .rv-s4-seed.on {
        background: var(--rv-grad);
        box-shadow: 0 0 clamp(10px,1.8vw,22px) var(--rv-violet-glow), 0 0 clamp(24px,4vw,52px) rgba(139,92,246,.18);
    }

    .rv-s4-seed.land {
        opacity: 1;
        transform: scale(1) translateY(0);
        transition: opacity .3s ease var(--rv-sld,0ms), transform .38s var(--rv-spring) var(--rv-sld,0ms);
    }


/* ════ H2 ════ */
.rv-s4-h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2px,.4vw,5px);
    margin-bottom: clamp(22px,3.2vw,38px);
}

.rv-s4-line {
    display: block;
    font-family: var(--rv-font);
    font-size: clamp(30px,5.2vw,80px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.052em;
    color: var(--rv-t-1);
    opacity: 0;
    transform: translateY(20px);
    transition: none;
}

    .rv-s4-line.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .65s ease, transform .65s var(--rv-ease);
    }

.rv-s4-line--grad {
    background: var(--rv-grad-wide);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 220% auto;
}

    .rv-s4-line--grad.show {
        animation: rv-s4-grad-flow 5s linear infinite;
    }

@keyframes rv-s4-grad-flow {
    to {
        background-position: 220% center;
    }
}


/* ════ SUB ════ */
.rv-s4-sub {
    font-size: clamp(15px,1.58vw,19px);
    color: var(--rv-t-2);
    line-height: 1.76;
    max-width: 600px;
    margin-bottom: clamp(26px,3.6vw,42px);
    opacity: 0;
    filter: blur(7px);
    transition: none;
}

    .rv-s4-sub.show {
        opacity: 1;
        filter: blur(0);
        transition: opacity .7s ease, filter .7s ease;
    }


/* ════ CHIPS ════ */
.rv-s4-chips {
    display: flex;
    align-items: center;
    gap: clamp(8px,1.2vw,14px);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: clamp(28px,3.8vw,44px);
}

.rv-s4-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--rv-mono);
    font-size: clamp(9.5px,.92vw,11.5px);
    font-weight: 700;
    letter-spacing: .08em;
    border-radius: var(--rv-r-pill);
    padding: 6px 15px;
    opacity: 0;
    transform: scale(.85) translateY(6px);
    transition: none;
}

    .rv-s4-chip.show {
        opacity: 1;
        transform: scale(1) translateY(0);
        transition: opacity .45s ease var(--rv-cd,0ms), transform .5s var(--rv-spring) var(--rv-cd,0ms);
    }

.rv-s4-chip--vl {
    color: var(--rv-violet-2);
    background: var(--rv-violet-sub);
    border: 1px solid var(--rv-violet-bdr);
}

.rv-s4-chip--em {
    color: var(--rv-emerald-2);
    background: var(--rv-emerald-sub);
    border: 1px solid var(--rv-emerald-bdr);
}

.rv-s4-chip--am {
    color: var(--rv-amber-2);
    background: var(--rv-amber-sub);
    border: 1px solid var(--rv-amber-bdr);
}


/* ════ CTAs ════ */
.rv-s4-ctas {
    display: flex;
    align-items: center;
    gap: clamp(10px,1.4vw,16px);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: clamp(40px,5.5vw,64px);
    opacity: 0;
    transform: translateY(18px);
    transition: none;
}

    .rv-s4-ctas.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .65s ease, transform .65s var(--rv-ease);
    }

/* Larger primary for finale */
.rv-s4 .rv-btn-primary {
    padding: clamp(15px,1.8vw,20px) clamp(32px,4vw,54px);
    font-size: clamp(14.5px,1.4vw,17px);
    box-shadow: 0 0 0 1px rgba(139,92,246,.40), 0 10px 36px rgba(139,92,246,.35), 0 0 70px rgba(139,92,246,.12);
}

    .rv-s4 .rv-btn-primary:hover {
        box-shadow: 0 0 0 1px rgba(139,92,246,.60), 0 16px 52px rgba(139,92,246,.52), 0 0 100px rgba(139,92,246,.22);
        transform: translateY(-3px);
    }

.rv-s4 .rv-btn-ghost {
    padding: clamp(14px,1.7vw,19px) clamp(28px,3.5vw,46px);
    font-size: clamp(14.5px,1.4vw,17px);
}

.rv-s4-arrow {
    transition: transform .22s var(--rv-ease);
    flex-shrink: 0;
}

.rv-btn-primary:hover .rv-s4-arrow {
    transform: translateX(4px);
}


/* ════ TECH STRIP ════ */
.rv-s4-tech {
    display: flex;
    align-items: center;
    gap: clamp(12px,2vw,26px);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: clamp(44px,6vw,68px);
    opacity: 0;
    transition: opacity .65s ease;
}

    .rv-s4-tech.show {
        opacity: 1;
    }

.rv-s4-tech-lbl {
    font-family: var(--rv-mono);
    font-size: clamp(8.5px,.82vw,9.5px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rv-t-4);
    white-space: nowrap;
}

.rv-s4-tech-sep {
    width: 1px;
    height: 14px;
    background: var(--rv-bdr-2);
    flex-shrink: 0;
}

.rv-s4-tech-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--rv-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--rv-t-3);
    white-space: nowrap;
}

.rv-s4-tech-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}


/* ════ FOOTER ════ */
.rv-s4-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px,1.8vw,18px);
    opacity: 0;
    transition: opacity .7s ease;
    width: 100%;
}

    .rv-s4-footer.show {
        opacity: 1;
    }

.rv-s4-rule {
    width: clamp(120px,28vw,300px);
    height: 1px;
    background: linear-gradient(90deg,transparent 0%,var(--rv-bdr-2) 30%,var(--rv-bdr-2) 70%,transparent 100%);
}

.rv-s4-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rv-s4-brand-logo {
    width: clamp(22px,2.8vw,30px);
    opacity: .35;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

.rv-s4-brand-name {
    font-family: var(--rv-font);
    font-size: clamp(14px,1.4vw,17px);
    font-weight: 800;
    color: var(--rv-t-3);
    letter-spacing: -0.020em;
}

.rv-s4-brand-sep {
    color: var(--rv-t-5);
    margin: 0 4px;
}

.rv-s4-brand-sub {
    font-family: var(--rv-mono);
    font-size: clamp(10px,.96vw,12px);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--rv-t-4);
}

.rv-s4-legal {
    font-family: var(--rv-mono);
    font-size: clamp(9px,.88vw,10.5px);
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--rv-t-5);
    line-height: 1.6;
    text-align: center;
}


/* ════ RESPONSIVE ════ */
@media (max-width:860px) {
    .rv-s4-line {
        font-size: clamp(28px,5.5vw,62px);
        white-space: normal;
    }
}

@media (max-width:640px) {
    .rv-s4 {
        padding: clamp(72px,10vh,100px) 18px clamp(52px,7vh,80px);
        min-height: auto;
    }

    .rv-s4-line {
        font-size: clamp(28px,8.5vw,48px);
        letter-spacing: -0.044em;
        white-space: normal;
    }

    .rv-s4-sub {
        font-size: 15px;
        max-width: 100%;
    }

    .rv-s4-chips {
        gap: 8px;
    }

    .rv-s4-chip {
        font-size: 10px;
        padding: 5px 12px;
    }

    .rv-s4-ctas {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .rv-s4 .rv-btn-primary, .rv-s4 .rv-btn-ghost {
        width: 100%;
        justify-content: center;
        max-width: 360px;
    }

    .rv-s4-tech-sep {
        display: none;
    }

    .rv-s4-seeds {
        gap: 8px;
        height: clamp(42px,10vw,68px);
    }
}

@media (max-width:400px) {
    .rv-s4 {
        padding-left: 14px;
        padding-right: 14px;
    }

    .rv-s4-line {
        font-size: clamp(26px,7.5vw,38px);
    }
}

/* ════ REDUCED MOTION ════ */
@media (prefers-reduced-motion:reduce) {
    .rv-s4-ignite, .rv-s4-canvas {
        display: none !important;
    }

    .rv-s4-mark, .rv-s4-brow, .rv-s4-sub, .rv-s4-ctas, .rv-s4-tech, .rv-s4-footer {
        opacity: 1 !important;
        transition: none !important;
        filter: none !important;
    }

    .rv-s4-line {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rv-s4-line--grad {
        animation: none !important;
    }

    .rv-s4-chip {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rv-s4-seed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

        .rv-s4-seed.on {
            opacity: 1 !important;
        }

    .rv-s4-orb-tl {
        animation: none !important;
    }
}