/* ═══════════════════════════════════════════════════════════════════════════
   revideo.css — the design system introduced with the v4 homepage.

   This is the canonical token layer for the whole site. It is loaded BEFORE
   main.css / auth.css / community.css so that:

     1. `--rv-*` tokens below are the single source of truth for the palette,
     2. main.css's older semantic aliases (--blue/--text/--muted/…) are
        re-pointed at these tokens (see main.css :root), which drags most of
        the existing site onto the new palette without touching 4,000 lines,
     3. new markup can use the `rv-` utility/component classes directly.

   Extracted from "Revideo Homepage v4.dc.html" — a React prototype export
   whose 1,003 inline styles carried the design. Nothing here is invented:
   every value traces back to that file or to assets/brand-sheet.png.

   Dark-mode note: the site already ships a [data-theme="dark"] system that
   users can toggle. The prototype was light-only, so the dark ramp below is
   derived (same hue relationships, inverted lightness) rather than copied.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand ─────────────────────────────────────────────────────────── */
    --rv-primary:        #6d5ce6;   /* principal brand violet            */
    --rv-primary-deep:   #5850ec;   /* gradient start / pressed state    */
    --rv-primary-bright: #8b5cf6;   /* gradient end / hover accent       */
    --rv-primary-soft:   #a78bfa;
    --rv-primary-pale:   #ddd6fe;

    /* Brand gradient — the lockup, mascot ring and every CTA use this. */
    --rv-gradient: linear-gradient(135deg, var(--rv-primary-deep), var(--rv-primary-bright));

    /* ── Ink / type ────────────────────────────────────────────────────── */
    --rv-ink:      #16161d;   /* headings, high-emphasis text  */
    --rv-ink-soft: #40404f;
    --rv-body:     #5c5c70;   /* paragraph copy                */
    --rv-muted:    #8e8ea3;   /* labels, captions, meta        */
    --rv-muted-2:  #77778c;

    /* ── Surfaces ──────────────────────────────────────────────────────── */
    --rv-page:       #fbfbfd;   /* page background              */
    --rv-surface:    #ffffff;   /* cards, nav pill              */
    --rv-surface-2:  #fafaff;   /* inset wells, icon chips      */
    --rv-surface-3:  #f7f6fd;   /* hover state on menu rows     */
    --rv-surface-4:  #f0effa;   /* active nav pill              */
    --rv-surface-5:  #f2f2f7;

    /* ── Lines ─────────────────────────────────────────────────────────── */
    --rv-border:      #ececf4;
    --rv-border-soft: #f1f1f6;
    --rv-border-ink:  rgba(22, 22, 29, .07);   /* nav pill hairline */

    /* ── Status ────────────────────────────────────────────────────────── */
    --rv-success:      #00b67a;   /* Trustpilot green — proof rows */
    --rv-success-deep: #00915f;
    --rv-success-soft: #34d399;
    --rv-success-wash: #f0fdf7;
    --rv-danger:       #c81e1e;
    --rv-danger-pale:  #fecaca;
    --rv-danger-wash:  #fef2f2;
    --rv-warning:      #d97706;
    --rv-warning-soft: #fcd34d;
    --rv-warning-wash: #fffbeb;

    /* ── Type ──────────────────────────────────────────────────────────── */
    --rv-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* The prototype's scale, normalised. Half-pixel sizes in the original
       (12.5 / 14.5 / 11.5) are kept — they are load-bearing for the dense
       nav and card meta rows, and rounding them visibly loosens the layout. */
    --rv-fs-2xs:  10px;
    --rv-fs-xs:   11px;
    --rv-fs-sm:   12.5px;
    --rv-fs-base: 14px;
    --rv-fs-md:   14.5px;
    --rv-fs-lg:   15px;
    --rv-fs-xl:   19px;

    --rv-tracking-tight:  -.02em;
    --rv-tracking-snug:   -.01em;
    --rv-tracking-caps:   .12em;   /* uppercase eyebrow labels */

    /* ── Radii ─────────────────────────────────────────────────────────── */
    --rv-r-pill: 999px;   /* by far the dominant radius (140 uses) */
    --rv-r-xs:   6px;
    --rv-r-sm:   8px;
    --rv-r-md:   10px;
    --rv-r-lg:   14px;
    --rv-r-xl:   18px;
    --rv-r-2xl:  22px;
    --rv-r-3xl:  26px;

    /* ── Elevation ─────────────────────────────────────────────────────── */
    /* Shadows are violet-tinted, never neutral grey — this is what gives the
       design its lift. Keep the hue when adjusting. */
    --rv-shadow-sm:   0 4px 16px -8px rgba(22, 22, 29, .10);
    --rv-shadow:      0 12px 40px -12px rgba(80, 63, 205, .18);
    --rv-shadow-lg:   0 30px 80px -24px rgba(80, 63, 205, .35), 0 4px 16px -8px rgba(22, 22, 29, .10);
    --rv-shadow-glow: 0 10px 30px -10px rgba(109, 92, 230, .55);

    /* ── Motion ────────────────────────────────────────────────────────── */
    /* Single easing curve throughout the prototype — an expo-out. */
    --rv-ease: cubic-bezier(.23, 1, .32, 1);
    --rv-t-fast: .16s;
    --rv-t:      .18s;
    --rv-t-slow: .25s;

    /* ── Layout ────────────────────────────────────────────────────────── */
    --rv-container: 1200px;
    --rv-gutter: 24px;
}

/* ═══════════════════════ DARK MODE ═══════════════════════
   Derived, not copied — the prototype had no dark variant. Hue relationships
   are preserved; violet is lifted toward --rv-primary-soft because #6d5ce6
   fails contrast against a dark ground. */
[data-theme="dark"] {
    --rv-primary:        #8b7cf0;
    --rv-primary-deep:   #7a6cf0;
    --rv-primary-bright: #a78bfa;
    --rv-primary-soft:   #8b5cf6;
    --rv-primary-pale:   #2a2450;

    --rv-ink:      #f4f4fa;
    --rv-ink-soft: #d8d8e6;
    --rv-body:     #b4b4c8;
    --rv-muted:    #8a8aa0;
    --rv-muted-2:  #9a9ab0;

    --rv-page:      #0c0c14;
    --rv-surface:   #14141f;
    --rv-surface-2: #1a1a28;
    --rv-surface-3: #1f1f30;
    --rv-surface-4: #262639;
    --rv-surface-5: #1a1a28;

    --rv-border:      #26263a;
    --rv-border-soft: #1f1f30;
    --rv-border-ink:  rgba(255, 255, 255, .09);

    --rv-success:      #34d399;
    --rv-success-deep: #00b67a;
    --rv-success-soft: #6ee7b7;
    --rv-success-wash: #0d2620;
    --rv-danger:       #f87171;
    --rv-danger-pale:  #7f1d1d;
    --rv-danger-wash:  #2a1416;
    --rv-warning:      #f59e0b;
    --rv-warning-soft: #fcd34d;
    --rv-warning-wash: #2a2010;

    --rv-shadow-sm:   0 4px 16px -8px rgba(0, 0, 0, .55);
    --rv-shadow:      0 12px 40px -12px rgba(0, 0, 0, .7);
    --rv-shadow-lg:   0 30px 80px -24px rgba(0, 0, 0, .8), 0 4px 16px -8px rgba(0, 0, 0, .5);
    --rv-shadow-glow: 0 10px 30px -10px rgba(139, 124, 240, .45);
}

/* ═══════════════════════ BASE ═══════════════════════ */

.rv-page {
    background: var(--rv-page);
    color: var(--rv-ink);
    font-family: var(--rv-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rv-scope a {
    color: var(--rv-primary);
    text-decoration: none;
}
.rv-scope a:hover { color: var(--rv-primary-bright); }

.rv-scope ::selection {
    background: var(--rv-primary);
    color: #fff;
}

.rv-scope :focus-visible {
    outline: 2.5px solid var(--rv-primary);
    outline-offset: 2px;
}

/* ═══════════════════════ LAYOUT ═══════════════════════ */

.rv-container {
    width: 100%;
    max-width: var(--rv-container);
    margin-inline: auto;
    padding-inline: var(--rv-gutter);
    box-sizing: border-box;
}

.rv-section { position: relative; z-index: 1; padding-block: 88px; }
.rv-section--tight { padding-block: 56px; }
.rv-section--flush { padding-block: 0; }

@media (max-width: 768px) {
    .rv-section { padding-block: 56px; }
    .rv-section--tight { padding-block: 36px; }
}

/* ═══════════════════════ TYPE ═══════════════════════ */

.rv-eyebrow {
    font-size: var(--rv-fs-xs);
    font-weight: 800;
    letter-spacing: var(--rv-tracking-caps);
    text-transform: uppercase;
    color: var(--rv-muted);
}

.rv-h1, .rv-h2, .rv-h3 {
    letter-spacing: var(--rv-tracking-tight);
    color: var(--rv-ink);
    font-weight: 800;
    line-height: 1.08;
    margin: 0;
}

/* Fluid so the hero never needs a breakpoint cascade. */
.rv-h1 { font-size: clamp(38px, 5.6vw, 68px); }
.rv-h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; }
.rv-h3 { font-size: clamp(19px, 2vw, 24px);  line-height: 1.2; font-weight: 700; }

.rv-lead {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--rv-body);
    margin: 0;
}

.rv-muted { color: var(--rv-muted); }
.rv-body  { color: var(--rv-body); }

/* Gradient text — used on hero emphasis words. */
.rv-grad-text {
    background: var(--rv-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ═══════════════════════ BUTTONS ═══════════════════════ */

.rv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--rv-font);
    font-size: var(--rv-fs-md);
    font-weight: 700;
    letter-spacing: var(--rv-tracking-snug);
    padding: 13px 24px;
    border-radius: var(--rv-r-pill);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--rv-t) var(--rv-ease),
                box-shadow var(--rv-t) var(--rv-ease),
                background var(--rv-t) var(--rv-ease),
                color var(--rv-t) var(--rv-ease),
                border-color var(--rv-t) var(--rv-ease);
}

.rv-btn--primary {
    background: var(--rv-gradient);
    color: #fff;
    box-shadow: var(--rv-shadow-glow);
}
.rv-btn--primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 38px -10px rgba(109, 92, 230, .65);
}
.rv-btn--primary:active { transform: translateY(0); }

.rv-btn--ghost {
    background: var(--rv-surface);
    color: var(--rv-ink);
    border-color: var(--rv-border);
}
.rv-btn--ghost:hover {
    color: var(--rv-ink);
    background: var(--rv-surface-3);
    border-color: var(--rv-primary-pale);
    transform: translateY(-2px);
}

.rv-btn--quiet {
    background: transparent;
    color: var(--rv-body);
    padding: 8px 14px;
}
.rv-btn--quiet:hover {
    color: var(--rv-ink);
    background: var(--rv-surface-4);
}

.rv-btn--sm { padding: 9px 18px; font-size: var(--rv-fs-base); }
.rv-btn--lg { padding: 16px 30px; font-size: 16px; }

/* ═══════════════════════ SURFACES ═══════════════════════ */

.rv-card {
    background: var(--rv-surface);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-r-2xl);
    box-shadow: var(--rv-shadow-sm);
}

.rv-card--lift {
    transition: transform var(--rv-t-slow) var(--rv-ease),
                box-shadow var(--rv-t-slow) var(--rv-ease),
                border-color var(--rv-t-slow) var(--rv-ease);
}
.rv-card--lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--rv-shadow);
    border-color: var(--rv-primary-pale);
}

/* Frosted panel — nav pill, floating menus, overlay chrome. */
.rv-glass {
    background: color-mix(in srgb, var(--rv-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--rv-border-ink);
}
/* color-mix has no IE/older-Safari path; fall back to the flat surface. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .rv-glass { background: var(--rv-surface); }
}

/* Small square icon chip used beside menu rows and feature bullets. */
.rv-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--rv-surface-2);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-r-md);
    overflow: hidden;
}

/* Pill badge — "New", "Free", plan tags. */
.rv-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--rv-fs-xs);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: var(--rv-r-pill);
    background: var(--rv-surface-4);
    color: var(--rv-primary);
}
.rv-badge--success { background: color-mix(in srgb, var(--rv-success) 14%, transparent); color: var(--rv-success-deep); }
.rv-badge--danger  { background: var(--rv-danger-wash); color: var(--rv-danger); }

/* ═══════════════════════ DECOR ═══════════════════════
   The ambient background: dot grid, drifting blobs, signal lines. Purely
   decorative — always render inside an aria-hidden, pointer-events:none
   layer so it never intercepts clicks or reaches the a11y tree. */

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

.rv-decor__dots {
    position: absolute;
    inset: 0;
    left: 22px;
    background-image: radial-gradient(var(--rv-primary) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: .055;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 42%);
    mask-image: linear-gradient(180deg, #000, transparent 42%);
}

.rv-decor__blob {
    position: absolute;
    border-radius: var(--rv-r-pill);
    filter: blur(10px);
    animation: rv-blob 16s ease-in-out infinite;
    will-change: transform;
}

[data-theme="dark"] .rv-decor__dots { opacity: .09; }
[data-theme="dark"] .rv-decor__blob { opacity: .5; }

/* ═══════════════════════ SCROLL REVEAL ═══════════════════════
   Progressive enhancement: elements are only hidden once JS has confirmed it
   will run (html.rv-reveal-ready), so a JS failure leaves content visible
   rather than blanking the page. */

.rv-reveal-ready [data-rv-reveal] {
    opacity: 0;
    transform: translateY(18px);
}
.rv-reveal-ready [data-rv-reveal].rv-in {
    opacity: 1;
    transform: none;
    transition: opacity .6s var(--rv-ease), transform .6s var(--rv-ease);
}

/* ═══════════════════════ KEYFRAMES ═══════════════════════
   Ported verbatim from the prototype (rv-* namespace, no collisions with
   main.css). Grouped by purpose. */

/* entrance */
@keyframes rv-up      { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rv-fadein  { from { opacity: 0; transform: translateY(4px); }  to { opacity: 1; transform: none; } }
@keyframes rv-menuin  { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rv-newrow  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* motion / loop */
@keyframes rv-spin      { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rv-marquee   { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes rv-marquee-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes rv-float     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes rv-float-a   { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(-2deg); } }
@keyframes rv-float-b   { 0%, 100% { transform: translateY(0) rotate(5deg); }  50% { transform: translateY(-9px) rotate(9deg); } }
@keyframes rv-float-c   { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes rv-bob       { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }

/* ambient drift */
@keyframes rv-drift-a { 0%, 100% { transform: translate3d(-4%, 0, 0) scaleY(1); }    50% { transform: translate3d(4%, -14px, 0) scaleY(1.08); } }
@keyframes rv-drift-b { 0%, 100% { transform: translate3d(5%, 0, 0) scaleY(1.05); }  50% { transform: translate3d(-5%, 16px, 0) scaleY(.94); } }
@keyframes rv-drift-c { 0%, 100% { transform: translate3d(-3%, 8px, 0); }            50% { transform: translate3d(3%, -10px, 0); } }
@keyframes rv-blob    { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; } 50% { transform: translate3d(30px, -26px, 0) scale(1.12); opacity: .8; } }

/* attention / state */
@keyframes rv-pulse    { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes rv-blink    { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes rv-ping     { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes rv-sonar    { 0% { transform: scale(.28); opacity: 0; } 12% { opacity: .8; } 100% { transform: scale(1); opacity: 0; } }
@keyframes rv-scanline { 0% { transform: translateX(-100%); } 100% { transform: translateX(500%); } }
@keyframes rv-bellring { 0%, 8%, 100% { transform: rotate(0); } 1% { transform: rotate(14deg); } 3% { transform: rotate(-12deg); } 5% { transform: rotate(8deg); } 7% { transform: rotate(-4deg); } }

/* data viz */
@keyframes rv-bar  { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
@keyframes rv-eq   { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
@keyframes rv-draw { 0% { width: 0; } 55%, 100% { width: 100%; } }
@keyframes rv-dash { 0% { stroke-dashoffset: 640; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes rv-ring { 0% { stroke-dashoffset: 163; } 55%, 100% { stroke-dashoffset: 13; } }
@keyframes rv-dot  { 0% { opacity: 0; transform: scale(0); } 18% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }

/* scripted sequences (the animated "search in progress" storytelling) */
@keyframes rv-pop      { 0%, 20% { transform: scale(0); opacity: 0; } 45% { transform: scale(1.15); opacity: 1; } 55%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes rv-popcycle { 0% { transform: scale(.3); opacity: 0; } 5% { transform: scale(1.08); opacity: 1; } 9%, 100% { transform: scale(1); opacity: 1; } }
@keyframes rv-rowin    { 0%, 10% { opacity: 0; transform: translateX(-10px); } 22%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes rv-toast    { 0%, 4% { opacity: 0; transform: translateY(18px) scale(.94); } 10%, 78% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes rv-stamp    { 0%, 55% { transform: rotate(8deg) scale(0); opacity: 0; } 65% { transform: rotate(-8deg) scale(1.15); opacity: 1; } 72%, 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }

/* "The old way doesn't work" comparison cards — each column animates the
   failure mode it describes: a reverse-image scan sweeping a result list, the
   platform chips you keep re-checking, the days of the week ticking past, and
   a takedown form being typed out field by field. */
@keyframes rv-scandown { 0% { transform: translateY(-120%); } 100% { transform: translateY(560%); } }
@keyframes rv-chipcycle { 0%, 100% { background: #fff; border-color: #ececf4; color: #8e8ea3; } 8%, 16% { background: #fef2f2; border-color: #fecaca; color: #c81e1e; } }
@keyframes rv-fillin   { 0%, 8% { width: 0; } 30%, 100% { width: var(--fw, 72%); } }
@keyframes rv-caret    { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rv-daytick  { 0%, 12% { opacity: .25; transform: translateX(-6px); } 24%, 100% { opacity: 1; transform: none; } }

/* mascot walk cycle — two-frame sprite swap + traverse */
@keyframes rv-walk     { from { transform: translateX(-16vw); } to { transform: translateX(116vw); } }
@keyframes rv-walk-rev { from { transform: translateX(116vw) scaleX(-1); } to { transform: translateX(-16vw) scaleX(-1); } }
@keyframes rv-frameA   { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rv-frameB   { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* ═══════════════════════ REDUCED MOTION ═══════════════════════
   Scoped to rv- animations rather than a blanket `*` rule so it cannot
   stomp on main.css's existing transitions. */

@media (prefers-reduced-motion: reduce) {
    .rv-scope *,
    .rv-scope *::before,
    .rv-scope *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .15s !important;
        scroll-behavior: auto !important;
    }
    .rv-reveal-ready [data-rv-reveal] { opacity: 1 !important; transform: none !important; }
}