/* ============================================================
   GUHub — Premium Design System v3
   Light-first · Dual theme · Modern automotive UI
   ============================================================ */

/* ─── Design Tokens (Light — default) ─── */
:root {
    /* Palette — Light */
    --bg-0: #f8f9fc;
    --bg-1: #ffffff;
    --bg-2: #f0f1f5;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f5fa;
    --bg-input: #ffffff;
    --bg-input-focus: #ffffff;
    --border: rgba(0,0,0,.08);
    --border-hover: rgba(0,0,0,.14);
    --border-focus: rgba(108,71,255,.40);

    --text-1: #1a1a2e;
    --text-2: #64648c;
    --text-3: #73738f;

    /* Accent: deeper purple → vibrant cyan */
    --accent: #6c47ff;
    --accent-light: #7b5ae6;
    --accent-cyan: #0e7490;
    --accent-glow: rgba(108,71,255,.18);
    --accent-cyan-glow: rgba(14,116,144,.15);

    --success: #047857;
    --success-glow: rgba(4,120,87,.15);
    --warning: #b45309;
    --danger: #ef4444;
    --danger-glow: rgba(239,68,68,.15);

    /* Surface (subtle backgrounds) */
    --surface-2: #e8e9ed;

    /* Gradients */
    --grad-main: linear-gradient(135deg, #6c47ff, #0e7490);
    --grad-card: linear-gradient(160deg, rgba(108,71,255,.04), rgba(6,182,212,.02));
    --grad-surface: linear-gradient(180deg, var(--bg-0), var(--bg-2));

    /* Typography */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 2rem;
    --fs-4xl: 2.75rem;
    --fs-5xl: 3.75rem;
    --fs-6xl: 4.5rem;

    /* Radius */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 9999px;

    /* Shadows — soft for light theme */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.10);
    --shadow-glow: 0 4px 20px var(--accent-glow);
    --shadow-glow-cyan: 0 4px 20px var(--accent-cyan-glow);

    /* Transitions */
    --t-fast: 150ms ease;
    --t-base: 250ms ease;
    --t-slow: 400ms ease;

    /* Navbar */
    --navbar-bg: rgba(255,255,255,.85);
    --navbar-blur: blur(20px);

    /* Theme-specific flags */
    --card-backdrop: none;
    --orb-opacity: 0.35;
    --hero-bg: linear-gradient(180deg, #f0f1f5 0%, #f8f9fc 100%);
    --speed-line-opacity: 0.55;
    --shimmer-opacity: 0.08;
}

/* ─── Dark Theme Override ─── */
[data-theme="dark"] {
    --bg-0: #0f0f1a;
    --bg-1: #151521;
    --bg-2: #1c1c2e;
    --bg-card: rgba(255,255,255,.05);
    --bg-card-hover: rgba(255,255,255,.08);
    --bg-input: rgba(255,255,255,.06);
    --bg-input-focus: rgba(255,255,255,.09);
    --border: rgba(255,255,255,.08);
    --border-hover: rgba(255,255,255,.14);
    --border-focus: rgba(108,71,255,.50);

    --text-1: #e8e8f0;
    --text-2: #9e9eb8;
    --text-3: #74748e;

    --accent-light: #8b6bff;
    --accent-cyan: #06b6d4;
    --success: #10b981;
    --warning: #f59e0b;

    --accent-glow: rgba(108,71,255,.30);
    --accent-cyan-glow: rgba(14,116,144,.25);
    --success-glow: rgba(4,120,87,.25);

    --surface-2: #1c1c2e;
    --danger-glow: rgba(239,68,68,.25);

    --grad-main: linear-gradient(135deg, #6c47ff, #06b6d4);
    --grad-card: linear-gradient(160deg, rgba(108,71,255,.08), rgba(6,182,212,.04));

    --shadow-sm: 0 2px 8px rgba(0,0,0,.30);
    --shadow-md: 0 4px 20px rgba(0,0,0,.40);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.50);
    --shadow-glow: 0 0 40px var(--accent-glow);
    --shadow-glow-cyan: 0 0 40px var(--accent-cyan-glow);

    --navbar-bg: rgba(10,10,18,.80);
    --navbar-blur: blur(24px);
    --card-backdrop: blur(16px);
    --orb-opacity: 0.40;
    --hero-bg: linear-gradient(180deg, #0f0f1a 0%, #151521 100%);
    --speed-line-opacity: 0.7;
    --shimmer-opacity: 0.08;
}

/* ─── Reset ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
    font-family:var(--font-body);
    font-size:var(--fs-base);
    color:var(--text-1);
    background:var(--bg-0);
    line-height:1.6;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    transition:background-color .3s ease, color .3s ease;
}
a{color:var(--accent-light);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}

/* ─── Container ─── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container--narrow{max-width:600px}

/* ─── Text Gradient Utility ─── */
.text-gradient{
    background:var(--grad-main);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* ═══════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════ */
.navbar{
    position:sticky;top:0;z-index:100;
    background:var(--navbar-bg);
    backdrop-filter:var(--navbar-blur);-webkit-backdrop-filter:var(--navbar-blur);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    padding:0 24px;
    transition:background .3s ease, box-shadow .3s ease;
}

/* ─── Theme Toggle ─── */
.theme-toggle{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    border:1px solid var(--border);border-radius:var(--r-full);
    background:transparent;cursor:pointer;
    color:var(--text-2);
    transition:all var(--t-fast);
    font-size:18px;line-height:1;
}
.theme-toggle:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:var(--bg-card);
}
.navbar__inner{
    max-width:1200px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    height:64px;
}
.navbar__logo{
    font-family:var(--font-display);
    font-size:var(--fs-xl);font-weight:700;
    background:var(--grad-main);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    letter-spacing:-.5px;
}
.navbar__links{display:flex;align-items:center;gap:32px;list-style:none}
.navbar__link{color:var(--text-2);font-size:var(--fs-sm);font-weight:500;transition:color var(--t-fast)}
.navbar__link:hover{color:var(--text-1)}
.navbar__actions{display:flex;align-items:center;gap:12px}
.navbar__toggle{display:none;background:none;border:none;color:var(--text-1);font-size:24px;cursor:pointer}

/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 28px;
    font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;
    border:none;border-radius:var(--r-full);cursor:pointer;
    transition:all var(--t-base);text-decoration:none;white-space:nowrap;line-height:1.4;
}
.btn--primary{
    background:var(--grad-main);color:#fff;
    box-shadow:0 4px 20px var(--accent-glow);
}
.btn--primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 30px var(--accent-glow);color:#fff;
}
.btn--outline{
    background:transparent;color:var(--text-1);
    border:1px solid var(--border-hover);
}
.btn--outline:hover{
    border-color:var(--accent);color:var(--accent-light);
    background:rgba(124,92,252,.06);
}
.btn--secondary{
    background:var(--bg-card);color:var(--text-1);
    border:1px solid var(--border);
}
.btn--secondary:hover{
    background:var(--bg-card-hover);border-color:var(--accent);color:var(--text-1);
}
.btn--success{background:linear-gradient(135deg,#10b981,#34d399);color:#050508;box-shadow:0 4px 15px var(--success-glow)}
.btn--success:hover{transform:translateY(-2px);box-shadow:0 6px 25px var(--success-glow);color:#050508}
.btn--danger{background:var(--danger);color:#fff}
.btn--ghost{background:transparent;color:var(--text-2);padding:8px 16px}
.btn--ghost:hover{color:var(--text-1)}
.btn--sm{padding:8px 20px;font-size:var(--fs-xs)}
.btn--lg{padding:16px 40px;font-size:var(--fs-base)}
.btn--block{width:100%}

/* ═══════════════════════════════════════
   HERO
   ═══════════════════════════════════════ */
.hero{
    position:relative;
    min-height:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    overflow:hidden;
    padding:clamp(100px,14vh,160px) 0 clamp(40px,6vh,80px);
    background:var(--hero-bg);
}
/* Background FX */
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* Grid lines via ::before */
.hero__bg::before{
    content:'';
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(124,92,252,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(124,92,252,.06) 1px,transparent 1px);
    background-size:80px 80px;
    mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,#000,transparent);
    -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,#000,transparent);
    pointer-events:none;
}
/* Noise texture via ::after */
.hero__bg::after{
    content:'';
    position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.03'/%3E%3C/svg%3E");
    background-size:256px;
    opacity:.4;
    pointer-events:none;
}
.hero__orb{
    position:absolute;border-radius:50%;
    filter:blur(120px);opacity:var(--orb-opacity);
    animation:orbFloat 20s ease-in-out infinite alternate;
    will-change:transform;
}
.hero__orb--1{
    width:600px;height:600px;
    background:radial-gradient(circle,rgba(124,92,252,.5),transparent 70%);
    top:-10%;left:20%;
}
.hero__orb--2{
    width:500px;height:500px;
    background:radial-gradient(circle,rgba(34,211,238,.4),transparent 70%);
    bottom:-15%;right:15%;
    animation-delay:7s;animation-direction:alternate-reverse;
}
.hero__orb--3{
    width:400px;height:400px;
    background:radial-gradient(circle,rgba(124,92,252,.3),transparent 70%);
    top:50%;left:60%;
    animation-delay:4s;
}
@keyframes orbFloat{
    0%{transform:translate(0,0) scale(1)}
    50%{transform:translate(30px,-40px) scale(1.1)}
    100%{transform:translate(-20px,30px) scale(.95)}
}

/* Diagonal speed lines (automotive feel) */
.hero__speed-lines{
    position:absolute;inset:0;
    overflow:hidden;
    pointer-events:none;
}
.hero__speed-lines::before,
.hero__speed-lines::after{
    content:'';
    position:absolute;
    width:200%;height:1px;
    top:30%;
    left:-50%;
    background:linear-gradient(90deg,
        transparent 0%,
        rgba(124,92,252,.15) 15%,
        rgba(34,211,238,.25) 50%,
        rgba(124,92,252,.15) 85%,
        transparent 100%);
    transform:rotate(-8deg);
    opacity:var(--speed-line-opacity);
    animation:speedLine 8s linear infinite;
}
.hero__speed-lines::after{
    top:65%;
    transform:rotate(-8deg);
    animation-delay:4s;
    opacity:calc(var(--speed-line-opacity) * 0.6);
}
@keyframes speedLine{
    0%{transform:rotate(-8deg) translateX(-30%)}
    100%{transform:rotate(-8deg) translateX(30%)}
}

/* Horizontal scan line */
.hero__scan-line{
    position:absolute;
    left:0;right:0;
    height:2px;
    background:linear-gradient(90deg,
        transparent 5%,
        rgba(34,211,238,.15) 20%,
        rgba(34,211,238,.25) 50%,
        rgba(34,211,238,.15) 80%,
        transparent 95%);
    box-shadow:0 0 20px rgba(34,211,238,.1),
               0 0 60px rgba(34,211,238,.04);
    animation:scanMove 6s ease-in-out infinite;
    pointer-events:none;
    opacity:var(--speed-line-opacity);
}
@keyframes scanMove{
    0%,100%{top:15%;opacity:.3}
    50%{top:85%;opacity:.6}
}

/* Hero content */
.hero__inner{position:relative;z-index:2;max-width:840px}

.hero__badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 20px;
    background:rgba(124,92,252,.08);
    border:1px solid rgba(124,92,252,.18);
    border-radius:var(--r-full);
    font-family:var(--font-display);
    font-size:var(--fs-xs);font-weight:600;
    color:var(--accent-light);
    text-transform:uppercase;letter-spacing:1.5px;
    margin-bottom:28px;
}
.hero__badge-pulse{
    width:8px;height:8px;border-radius:50%;
    background:var(--accent-cyan);
    box-shadow:0 0 12px var(--accent-cyan);
    animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.4;transform:scale(.7)}
}

.hero__title{
    font-family:var(--font-display);
    font-size:clamp(2.5rem,7vw,var(--fs-6xl));
    font-weight:700;line-height:1.08;
    letter-spacing:-2px;
    margin-bottom:24px;
    color:var(--text-1);
}

.hero__desc{
    font-size:var(--fs-lg);
    color:var(--text-2);
    max-width:640px;margin:0 auto 40px;
    line-height:1.7;
}

.hero__actions{
    display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
    margin-bottom:clamp(20px,3vh,36px);
}

/* Trust strip */
.hero__trust{
    display:inline-flex;align-items:center;gap:24px;
    padding:16px 32px;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r-full);
    box-shadow:var(--shadow-sm);
}
.hero__trust-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.hero__trust-value{
    font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;color:var(--text-1);
}
.hero__trust-plus{
    font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;color:var(--accent-cyan);
}
.hero__trust-label{font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:1px}
.hero__trust-sep{width:1px;height:32px;background:var(--border)}

/* Scroll indicator */
.hero__mouse-wrap{
    margin-top:clamp(24px,4vh,48px);
    z-index:2;
}
.hero__mouse{
    width:26px;height:42px;
    border:2px solid var(--border-hover);border-radius:13px;
    position:relative;
    box-shadow:0 0 12px var(--accent-glow);
}
.hero__mouse-wheel{
    width:4px;height:10px;
    background:var(--accent-cyan);border-radius:2px;
    position:absolute;top:7px;left:50%;transform:translateX(-50%);
    animation:mouseWheel 2s ease-in-out infinite;
    box-shadow:0 0 6px rgba(34,211,238,.4);
}
@keyframes mouseWheel{
    0%{transform:translateX(-50%) translateY(0);opacity:1}
    100%{transform:translateX(-50%) translateY(16px);opacity:0}
}

/* ─── Fade in animation ─── */
.anim-fade-in{
    opacity:0;
    transform:translateY(24px);
    animation:animFadeIn .8s ease forwards;
}
@keyframes animFadeIn{
    to{opacity:1;transform:translateY(0)}
}

/* ═══════════════════════════════════════
   CAR SHOWCASE (scroll-driven)
   ═══════════════════════════════════════ */
.showcase{
    position:relative;
    z-index:1;
    height:150vh;
    background:var(--bg-0);
    margin-top:-10vh;
}
.showcase__sticky{
    position:sticky;top:0;
    height:100vh;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}

/* Surface / road */
.showcase__surface{
    position:absolute;bottom:35%;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent 5%,rgba(124,92,252,.25) 30%,rgba(34,211,238,.25) 70%,transparent 95%);
}
.showcase__surface::after{
    content:'';position:absolute;bottom:0;left:10%;right:10%;height:80px;
    background:radial-gradient(ellipse at 50% 0%,rgba(124,92,252,.08),transparent 70%);
    filter:blur(20px);
}

/* Cars */
.showcase__car{
    position:absolute;
    bottom:35%;
    z-index:2;
    will-change:transform;
    transition:none; /* JS controls transform */
}
.showcase__car--left{
    transform:translateX(-80vw);
}
.showcase__car--right{
    transform:translateX(80vw);
}

/* Image wrapper — anchor for headlight overlay */
.showcase__img-wrap{
    position:relative;
    display:inline-block;
    line-height:0;
}
.showcase__img-wrap img{
    width:min(900px, 52vw);
    height:auto;
    filter:drop-shadow(0 40px 80px rgba(0,0,0,.7));
    pointer-events:none;
    display:block;
}

/* ─── Headlight Overlay System ───
   Uses mix-blend-mode:screen on a div that covers the image exactly.
   Radial gradients at the precise headlight coordinates (% of image).
   Coordinates from pixel analysis:
   - tugella.png: headlights at ~33% X, 55% Y of content area 
   - 001.png:     headlights at ~76% X, 55% Y of content area
   ─── */
.showcase__headlight{
    position:absolute;
    inset:0;
    pointer-events:none;
    mix-blend-mode:screen;
    opacity:0;
    transition:opacity .1s ease;
    z-index:5;
}

/* Tugella headlights — optimized (2 gradients per headlight) */
.showcase__headlight--tugella{
    background:
        /* ── Фара 1 (25.2%, 47.5%) ─ core+glow ── */
        radial-gradient(ellipse 11% 10% at 25.2% 47.5%,
            rgba(255,255,255,.95) 0%, rgba(210,220,255,.6) 20%,
            rgba(160,180,255,.2) 50%, rgba(124,92,252,.06) 75%, transparent 100%),
        /* ── Фара 1 ─ beam spread ── */
        radial-gradient(ellipse 30% 10% at 34.8% 47.5%,
            rgba(200,220,255,.1) 0%, rgba(130,160,255,.03) 60%, transparent 100%),
        /* ── Фара 2 (47.5%, 46.7%) ─ core+glow ── */
        radial-gradient(ellipse 11% 10% at 47.5% 46.7%,
            rgba(255,255,255,.95) 0%, rgba(210,220,255,.6) 20%,
            rgba(160,180,255,.2) 50%, rgba(124,92,252,.06) 75%, transparent 100%),
        /* ── Фара 2 ─ beam spread ── */
        radial-gradient(ellipse 30% 10% at 57.1% 46.7%,
            rgba(200,220,255,.1) 0%, rgba(130,160,255,.03) 60%, transparent 100%);
}

/* 001 headlights — optimized (2 gradients per headlight) */
.showcase__headlight--001{
    background:
        /* ── Фара 1 (76.6%, 48.1%) ─ core+glow ── */
        radial-gradient(ellipse 11% 10% at 76.6% 48.1%,
            rgba(255,255,255,.95) 0%, rgba(210,220,255,.6) 20%,
            rgba(160,180,255,.2) 50%, rgba(124,92,252,.06) 75%, transparent 100%),
        /* ── Фара 1 ─ beam spread ── */
        radial-gradient(ellipse 30% 10% at 67.0% 48.1%,
            rgba(200,220,255,.1) 0%, rgba(130,160,255,.03) 60%, transparent 100%),
        /* ── Фара 2 (53.2%, 47.6%) ─ core+glow ── */
        radial-gradient(ellipse 11% 10% at 53.2% 47.6%,
            rgba(255,255,255,.95) 0%, rgba(210,220,255,.6) 20%,
            rgba(160,180,255,.2) 50%, rgba(124,92,252,.06) 75%, transparent 100%),
        /* ── Фара 2 ─ beam spread ── */
        radial-gradient(ellipse 30% 10% at 43.6% 47.6%,
            rgba(200,220,255,.1) 0%, rgba(130,160,255,.03) 60%, transparent 100%);
}

/* ─── Headlight Flash Animation ─── */
.showcase.hl-flash .showcase__headlight{
    animation:headlightFlash 1.8s ease-out forwards;
}

@keyframes headlightFlash{
    /* Flash 1 */
    0%   {opacity:0}
    5%   {opacity:1}
    12%  {opacity:0}
    /* Flash 2 */
    18%  {opacity:0}
    23%  {opacity:1}
    30%  {opacity:.1}
    /* Flash 3 */
    36%  {opacity:.1}
    41%  {opacity:1}
    50%  {opacity:.2}
    /* Settle to steady glow */
    70%  {opacity:.55}
    100% {opacity:.5}
}

/* Steady glow after flash — gentle pulsing */
.showcase.hl-steady .showcase__headlight{
    opacity:.5;
    animation:headlightPulse 4s ease-in-out infinite;
}

@keyframes headlightPulse{
    0%,100%{opacity:.4}
    50%{opacity:.65}
}

/* Car ground glow */
.showcase__glow{
    position:absolute;bottom:-20px;left:15%;right:15%;height:60px;
    background:radial-gradient(ellipse,rgba(124,92,252,.35),transparent 70%);
    filter:blur(24px);
    opacity:0;
    transition:opacity 1s ease;
}
.showcase.hl-flash .showcase__glow,
.showcase.hl-steady .showcase__glow{opacity:1}

/* Car labels — split at center of each car so they don't overlap on convergence.
   Left car label ends at car center (text extends LEFT),
   Right car label starts at car center (text extends RIGHT).
   Result when converged: "Tugella  001" */
.showcase__label{
    position:absolute;
    bottom:-50px;
    font-family:var(--font-display);
    font-size:var(--fs-xs);font-weight:700;
    text-transform:uppercase;letter-spacing:6px;
    color:var(--text-3);
    white-space:nowrap;
    opacity:0;
    transition:opacity .4s ease, color .6s ease;
}
/* Tugella — label's right edge at car center → text goes LEFT */
.showcase__car--left .showcase__label{
    right:50%;
    padding-right:8px;
}
/* 001 — label's left edge at car center → text goes RIGHT */
.showcase__car--right .showcase__label{
    left:50%;
    padding-left:8px;
}
/* Brighten labels when headlights are on */
.showcase.hl-flash .showcase__label,
.showcase.hl-steady .showcase__label{
    color:var(--text-2);
}

/* Center text */
.showcase__center{
    position:absolute;bottom:22%;left:50%;
    transform:translate(-50%,0) scale(.8);
    z-index:3;
    display:flex;align-items:center;gap:24px;
    opacity:0;
    pointer-events:none;
    transition:none;
}
.showcase__center-text{
    font-family:var(--font-display);
    font-size:clamp(1.2rem,3vw,2rem);
    font-weight:700;
    letter-spacing:8px;
    text-transform:uppercase;
    background:var(--grad-main);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    white-space:nowrap;
}
.showcase__center-line{
    width:60px;height:2px;
    background:var(--grad-main);
    border-radius:1px;
}

/* Showcase responsive */
@media(max-width:1100px){
    .showcase__img-wrap img{width:min(650px,46vw)}
}
@media(max-width:768px){
    .showcase{height:100vh;margin-top:-5vh}
    .showcase__sticky{height:80vh}
    .showcase__img-wrap img{width:min(420px,55vw)}
    .showcase__center-text{font-size:1rem;letter-spacing:4px}
    .showcase__center-line{width:30px}
    .showcase__label{bottom:-40px;font-size:10px;letter-spacing:4px}
    .showcase__center{bottom:8%}
    .showcase__car{bottom:20%}
    .showcase__surface{bottom:20%}
}
@media(max-width:480px){
    .showcase{height:90vh;margin-top:-5vh}
    .showcase__sticky{height:70vh}
    .showcase__img-wrap img{width:min(300px,65vw)}
    .showcase__label{bottom:-32px;font-size:9px;letter-spacing:3px}
    .showcase__center{bottom:5%}
    .showcase__car{bottom:18%}
    .showcase__surface{bottom:18%}
}

/* ═══════════════════════════════════════
   SECTIONS (generic)
   ═══════════════════════════════════════ */
.section{padding:100px 0}
.section--alt{background:var(--bg-1)}

.section__header{
    text-align:center;
    margin-bottom:64px;
    opacity:0;
    transform:translateY(20px);
    transition:opacity .6s ease,transform .6s ease;
}
.section__header.is-visible{
    opacity:1;
    transform:translateY(0);
}
.section__tag{
    display:inline-block;
    font-family:var(--font-display);
    font-size:var(--fs-xs);font-weight:600;
    text-transform:uppercase;letter-spacing:2px;
    color:var(--accent-cyan);
    margin-bottom:16px;
}
.section__title{
    font-family:var(--font-display);
    font-size:clamp(1.8rem,4vw,var(--fs-4xl));
    font-weight:700;line-height:1.15;
    letter-spacing:-1px;
    margin-bottom:16px;
}
.section__desc{
    font-size:var(--fs-lg);color:var(--text-2);
    max-width:560px;margin:0 auto;line-height:1.6;
}

/* ═══════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════ */
.features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:24px;
}
.feature-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    padding:36px 32px;
    transition:all var(--t-base);
    position:relative;overflow:hidden;
}
.feature-card::before{
    content:'';position:absolute;inset:0;
    background:var(--grad-card);
    opacity:0;transition:opacity var(--t-base);
}
.feature-card:hover{
    border-color:var(--border-hover);
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}
.feature-card:hover::before{opacity:1}
.feature-card__icon{
    position:relative;z-index:1;
    width:56px;height:56px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(124,92,252,.1);
    border:1px solid rgba(124,92,252,.15);
    border-radius:var(--r-md);
    color:var(--accent-light);
    margin-bottom:20px;
}
.feature-card__title{
    position:relative;z-index:1;
    font-family:var(--font-display);
    font-size:var(--fs-xl);font-weight:600;
    margin-bottom:8px;
}
.feature-card__text{
    position:relative;z-index:1;
    color:var(--text-2);font-size:var(--fs-sm);line-height:1.7;
}

/* ═══════════════════════════════════════
   HOW IT WORKS (steps)
   ═══════════════════════════════════════ */
.steps{
    display:flex;align-items:flex-start;
    max-width:900px;margin:0 auto;
    gap:0;
}
.step{
    flex:1;
    text-align:center;
    padding:0 24px;
}
.step__number{
    font-family:var(--font-display);
    font-size:var(--fs-4xl);font-weight:700;
    background:var(--grad-main);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    margin-bottom:16px;
    line-height:1;
}
.step__title{
    font-family:var(--font-display);
    font-size:var(--fs-lg);font-weight:600;
    margin-bottom:8px;
}
.step__text{
    color:var(--text-2);font-size:var(--fs-sm);line-height:1.6;
}
.step__connector{
    flex:0 0 60px;
    height:2px;
    background:var(--grad-main);
    margin-top:28px;
    border-radius:1px;
    opacity:.4;
}
@media(max-width:768px){
    .steps{flex-direction:column;gap:32px;align-items:center}
    .step{max-width:400px}
    .step__connector{width:2px;height:40px;flex:0 0 40px}
}

/* ═══════════════════════════════════════
   TARIFFS
   ═══════════════════════════════════════ */
.tariffs{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:24px;max-width:1050px;margin:0 auto;
    position:relative;
}
/* Sweeping shimmer across all tariff cards — back-and-forth */
.tariffs::after{
    content:'';
    position:absolute;top:0;bottom:0;
    left:0;right:0;
    background:linear-gradient(90deg,transparent,rgba(124,92,252,var(--shimmer-opacity)),rgba(34,211,238,calc(var(--shimmer-opacity) * 0.7)),transparent);
    background-size:40% 100%;
    background-repeat:no-repeat;
    animation:tariffsSweep 4s ease-in-out infinite alternate;
    pointer-events:none;
    z-index:1;
    border-radius:var(--r-xl);
}
@keyframes tariffsSweep{
    0%{background-position:-10% 0}
    100%{background-position:110% 0}
}
.tariff{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    padding:40px 32px;
    text-align:center;
    position:relative;
    transition:all .5s cubic-bezier(.22,1,.36,1);
    display:flex;flex-direction:column;
}
.tariff:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-lg),0 0 40px rgba(124,92,252,.08)}

/* Featured tariff */
.tariff--featured{
    border-color:rgba(124,92,252,.4);
    box-shadow:var(--shadow-glow),inset 0 1px 0 rgba(124,92,252,.2);
    background:linear-gradient(180deg,rgba(124,92,252,.06),var(--bg-card));
    overflow:visible;
}
.tariff--featured:hover{
    box-shadow:0 0 60px var(--accent-glow),var(--shadow-lg);
    border-color:rgba(124,92,252,.6);
}
.tariff__badge{
    position:absolute;top:-14px;left:50%;transform:translateX(-50%);
    padding:6px 24px;
    background:var(--grad-main);color:#fff;
    font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;
    border-radius:var(--r-full);
    white-space:nowrap;
}

.tariff__head{margin-bottom:28px}
.tariff__tier{
    display:block;
    font-family:var(--font-display);
    font-size:var(--fs-sm);font-weight:600;
    color:var(--accent-light);
    text-transform:uppercase;letter-spacing:3px;
    margin-bottom:12px;
}
.tariff__price{
    font-family:var(--font-display);
    font-size:var(--fs-4xl);font-weight:700;
    line-height:1;margin-bottom:8px;
}
.tariff__currency{
    font-size:var(--fs-lg);font-weight:400;color:var(--text-2);margin-left:4px;
}
.tariff__desc{color:var(--text-2);font-size:var(--fs-sm)}

.tariff__list{
    list-style:none;text-align:left;
    margin-bottom:32px;flex:1;
}
.tariff__list li{
    padding:10px 0;
    font-size:var(--fs-sm);color:var(--text-2);
    display:flex;align-items:center;gap:10px;
    border-bottom:1px solid var(--border);
}
.tariff__list li:last-child{border-bottom:none}
.tariff__list li::before{
    content:'✓';color:var(--success);font-weight:700;flex-shrink:0;
}
.tariff__list li sup{
    font-size:.65em;color:var(--text-3);margin-left:-10px;
}

/* Footnote marks in tariff list items */
a.fn-mark{
    text-decoration:none;color:var(--text-3);
    margin-bottom:10px;
}
a.fn-mark sup{
    font-size:.55em;vertical-align:super;line-height:0;
    font-weight:400;transition:color .15s;
}
a.fn-mark:hover sup{
    color:var(--accent-light);
}

/* Page-level footnotes — fine print before footer */
.page-footnotes{
    max-width:900px;margin:0 auto;
    padding:20px 24px 28px;
    font-size:11px;color:var(--text-3);line-height:1.65;
}
.page-footnotes ol{
    list-style:none;margin:0;padding:0;counter-reset:fn;
}
.page-footnotes li{
    margin:0 0 3px;padding-left:16px;position:relative;
    scroll-margin-top:80px;
}
.page-footnotes li:target{
    color:var(--text-1);
}
.page-footnotes li::before{
    counter-increment:fn;
    content:counter(fn);position:absolute;left:0;top:0;
    font-size:.8em;color:var(--text-2);font-weight:500;
}
.fn-back{
    text-decoration:none;color:var(--accent-light);font-size:.9em;
    opacity:.6;transition:opacity .15s;
}
.fn-back:hover{opacity:1}
.page-footnotes__link{
    display:block;margin-top:10px;padding-left:16px;
}
.page-footnotes__link a{
    color:var(--accent-light);text-decoration:none;
    border-bottom:1px dotted rgba(167,139,250,.3);font-size:11px;
}
.page-footnotes__disclaimer{
    margin-top:12px !important;padding-top:10px;
    border-top:1px solid rgba(255,255,255,.04);
    font-size:10px;color:var(--text-3);opacity:.7;
}
.page-footnotes__disclaimer a{
    color:var(--accent-light);text-decoration:none;
    border-bottom:1px dotted rgba(167,139,250,.25);
}

/* ═══════════════════════════════════════
   FAQ
   ═══════════════════════════════════════ */
.faq{max-width:760px;margin:0 auto}
.faq__item{
    opacity:0;
    transform:translateX(-24px);
    transition:opacity .5s ease,transform .5s ease;
}
.faq__item.is-visible{
    opacity:1;
    transform:translateX(0);
}
.faq__item:nth-child(2){transition-delay:.08s}
.faq__item:nth-child(3){transition-delay:.16s}
.faq__item:nth-child(4){transition-delay:.24s}
.faq__item:nth-child(5){transition-delay:.32s}
.faq__item:nth-child(6){transition-delay:.4s}
.faq__q{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    padding:22px 0;
    background:none;border:none;color:var(--text-1);
    font-family:var(--font-display);font-size:var(--fs-base);font-weight:500;
    cursor:pointer;text-align:left;gap:16px;
    transition:color var(--t-fast);
}
.faq__q:hover{color:var(--accent-light)}
.faq__icon{
    flex-shrink:0;color:var(--text-3);
    transition:transform var(--t-base),color var(--t-base);
}
.faq__item.is-open .faq__icon{
    transform:rotate(45deg);color:var(--accent);
}
.faq__a{
    max-height:0;overflow:hidden;
    transition:max-height var(--t-slow),padding var(--t-slow);
}
.faq__item.is-open .faq__a{
    max-height:300px;
    padding-bottom:22px;
}
.faq__a p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.8}

/* ═══════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════ */
.cta-final{
    position:relative;
    padding:120px 0;
    text-align:center;
    overflow:hidden;
}
.cta-final__bg{position:absolute;inset:0;z-index:0}
.cta-final__orb{
    position:absolute;
    width:600px;height:600px;
    top:50%;left:50%;transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(124,92,252,.2),rgba(34,211,238,.08),transparent 70%);
    filter:blur(80px);
}
.cta-final__inner{position:relative;z-index:2}
.cta-final__title{
    font-family:var(--font-display);
    font-size:clamp(2rem,5vw,var(--fs-5xl));
    font-weight:700;line-height:1.1;letter-spacing:-1.5px;
    margin-bottom:16px;
}
.cta-final__desc{
    color:var(--text-2);font-size:var(--fs-lg);
    margin-bottom:40px;
}

/* ═══════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════ */
.reveal{
    opacity:0;transform:translateY(32px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal:nth-child(2){transition-delay:.1s}
.reveal:nth-child(3){transition-delay:.2s}
.reveal:nth-child(4){transition-delay:.3s}
.reveal:nth-child(5){transition-delay:.4s}
.reveal:nth-child(6){transition-delay:.5s}

/* Tariff cards — scale up from smaller */
.tariff.reveal{
    opacity:0;
    transform:translateY(40px) scale(.92);
}
.tariff.reveal.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}
/* Featured card gets glow pulse on appear */
.tariff--featured.reveal.is-visible{
    animation:tariffAppear .8s ease forwards;
}
@keyframes tariffAppear{
    0%{box-shadow:var(--shadow-glow),inset 0 1px 0 rgba(124,92,252,.2)}
    50%{box-shadow:0 0 80px rgba(124,92,252,.3),var(--shadow-glow),inset 0 1px 0 rgba(124,92,252,.3)}
    100%{box-shadow:var(--shadow-glow),inset 0 1px 0 rgba(124,92,252,.2)}
}

/* ═══════════════════════════════════════
   FORMS
   ═══════════════════════════════════════ */
.form{max-width:480px;margin:0 auto}
.form-group{margin-bottom:20px}
.form-group label{
    display:block;font-size:var(--fs-sm);font-weight:500;
    margin-bottom:8px;color:var(--text-2);
}
.form-input{
    width:100%;padding:14px 16px;
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--r-md);color:var(--text-1);
    font-family:var(--font-body);font-size:var(--fs-base);
    transition:all var(--t-fast);outline:none;
}
.form-input:focus{
    background:var(--bg-input-focus);border-color:var(--border-focus);
    box-shadow:0 0 0 3px var(--accent-glow);
}
.form-input::placeholder{color:var(--text-3)}
.form-input--vin{
    text-transform:uppercase;
    font-family:'JetBrains Mono','Courier New',monospace;
    letter-spacing:2px;font-size:var(--fs-lg);
}
.form-select{
    width:100%;padding:14px 16px;
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--r-md);color:var(--text-1);
    font-family:var(--font-body);font-size:var(--fs-base);
    cursor:pointer;outline:none;appearance:none;
}
.form-checkbox{
    display:flex;align-items:flex-start;gap:10px;
    font-size:var(--fs-sm);color:var(--text-2);cursor:pointer;
}
.form-checkbox input[type="checkbox"]{
    width:18px;height:18px;accent-color:var(--accent);
    flex-shrink:0;margin-top:2px;
}
.form-hint{font-size:var(--fs-xs);color:var(--text-3);margin-top:6px}

/* ═══════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════ */
.alert{
    padding:16px 20px;border-radius:var(--r-md);
    font-size:var(--fs-sm);margin-bottom:24px;
    display:flex;align-items:center;gap:10px;
}
.alert--error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:var(--danger)}
.alert--success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);color:var(--success)}
.alert--info{background:rgba(124,92,252,.1);border:1px solid rgba(124,92,252,.25);color:var(--accent-light)}
.alert--warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);color:var(--warning)}

/* VIN Status */
.vin-status{
    display:flex;align-items:center;gap:8px;
    padding:10px 14px;border-radius:var(--r-sm);
    font-size:var(--fs-sm);margin-top:8px;
    animation:fadeIn .2s ease;
}
.vin-status--success{background:rgba(16,185,129,.1);color:var(--success)}
.vin-status--error{background:rgba(239,68,68,.1);color:var(--danger)}
.vin-status--info{background:rgba(124,92,252,.1);color:var(--text-2)}
.vin-status__icon{flex-shrink:0}

/* ═══════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════ */
.auth-page{
    min-height:calc(100vh - 64px - 200px);
    display:flex;align-items:center;justify-content:center;
    padding:60px 24px;
}
.auth-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-xl);padding:48px 40px;
    width:100%;max-width:440px;
    backdrop-filter:var(--card-backdrop);-webkit-backdrop-filter:var(--card-backdrop);
    box-shadow:var(--shadow-lg);
}
.auth-card__title{
    font-family:var(--font-display);
    font-size:var(--fs-2xl);font-weight:700;
    text-align:center;margin-bottom:8px;
}
.auth-card__subtitle{
    font-size:var(--fs-sm);color:var(--text-2);
    text-align:center;margin-bottom:32px;
}
.auth-card__footer{
    text-align:center;margin-top:24px;
    font-size:var(--fs-sm);color:var(--text-2);
}

/* ═══════════════════════════════════════
   ACCOUNT
   ═══════════════════════════════════════ */
.account-header{
    padding:40px 0;border-bottom:1px solid var(--border);margin-bottom:40px;
}
.account-header__title{
    font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:700;
}
.account-header__email{color:var(--text-2);font-size:var(--fs-sm);margin-top:4px}

.account-nav{display:flex;gap:8px;margin-bottom:32px}
.account-nav__link{
    padding:10px 20px;border-radius:var(--r-full);
    font-size:var(--fs-sm);font-weight:500;color:var(--text-2);
    transition:all var(--t-fast);
}
.account-nav__link:hover,.account-nav__link--active{
    background:var(--bg-card);color:var(--text-1);
}

/* Orders Table */
.orders-table{width:100%;border-collapse:separate;border-spacing:0}
.orders-table th{
    text-align:left;padding:12px 16px;
    font-size:var(--fs-xs);font-weight:600;
    text-transform:uppercase;color:var(--text-3);
    letter-spacing:1px;border-bottom:1px solid var(--border);
}
.orders-table td{
    padding:16px;font-size:var(--fs-sm);
    border-bottom:1px solid var(--border);
}
.orders-table tr:hover td{background:var(--bg-card)}

/* Badges */
.badge{
    display:inline-flex;align-items:center;
    padding:4px 12px;border-radius:var(--r-full);
    font-size:var(--fs-xs);font-weight:600;
}
.badge--paid{background:rgba(16,185,129,.15);color:var(--success)}
.badge--pending{background:rgba(245,158,11,.15);color:var(--warning)}
.badge--refunded{background:rgba(239,68,68,.15);color:var(--danger)}
.badge--success{background:rgba(16,185,129,.15);color:var(--success)}
.badge--draft{background:rgba(136,136,164,.15);color:var(--text-2)}

/* ═══════════════════════════════════════
   REFERRAL
   ═══════════════════════════════════════ */
.referral-stats{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;margin-bottom:40px;
}
.referral-stat{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:24px;text-align:center;
}
.referral-stat__value{
    font-family:var(--font-display);
    font-size:var(--fs-3xl);font-weight:700;margin-bottom:4px;
}
.referral-stat__label{font-size:var(--fs-sm);color:var(--text-2)}

.referral-link{
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--r-md);padding:16px;
    display:flex;align-items:center;gap:12px;
    margin-bottom:24px;
}
.referral-link__url{
    flex:1;font-family:monospace;font-size:var(--fs-sm);
    color:var(--accent-light);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;
}

/* ═══════════════════════════════════════
   DOWNLOAD PAGE
   ═══════════════════════════════════════ */
.download-card{
    background:var(--grad-card);border:1px solid var(--border);
    border-radius:var(--r-xl);padding:48px;text-align:center;
    max-width:600px;margin:60px auto;
}
.download-card__icon{font-size:4rem;margin-bottom:24px}
.download-card__title{
    font-family:var(--font-display);
    font-size:var(--fs-2xl);font-weight:700;margin-bottom:8px;
}
.download-card__info{color:var(--text-2);margin-bottom:32px}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.footer{
    background:var(--bg-1);border-top:1px solid var(--border);
    padding:56px 0 32px;margin-top:auto;
}
.footer__grid{
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
    gap:40px;margin-bottom:40px;
}
.footer__brand{
    font-family:var(--font-display);
    font-size:var(--fs-xl);font-weight:700;
    background:var(--grad-main);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    margin-bottom:12px;
}
.footer__desc{color:var(--text-2);font-size:var(--fs-sm);line-height:1.7}
.footer__title{
    font-family:var(--font-display);
    font-size:var(--fs-sm);font-weight:600;
    margin-bottom:16px;text-transform:uppercase;
    letter-spacing:1px;color:var(--text-3);
}
.footer__links{list-style:none}
.footer__links li{margin-bottom:10px}
.footer__links a{color:var(--text-2);font-size:var(--fs-sm)}
.footer__links a:hover{color:var(--text-1)}
.footer__bottom{
    border-top:1px solid var(--border);padding-top:24px;
    text-align:center;color:var(--text-3);font-size:var(--fs-xs);
}

/* ═══════════════════════════════════════
   COOKIE CONSENT
   ═══════════════════════════════════════ */
.cookie-consent{
    position:fixed;bottom:0;left:0;right:0;
    background:var(--bg-1);
    border-top:1px solid var(--border);
    box-shadow:0 -4px 20px rgba(0,0,0,.08);
    padding:20px 24px;z-index:1000;
    display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
    transform:translateY(100%);transition:transform var(--t-base);
}
.cookie-consent.visible{transform:translateY(0)}
.cookie-consent__text{font-size:var(--fs-sm);color:var(--text-2);max-width:600px}
.cookie-consent__close{
    background:none;border:none;color:var(--text-2);font-size:1.4rem;
    cursor:pointer;padding:4px 8px;line-height:1;opacity:.6;transition:opacity .2s;
}
.cookie-consent__close:hover{opacity:1}

/* ═══════════════════════════════════════
   MESSAGE PAGE
   ═══════════════════════════════════════ */
.message-page{
    min-height:calc(100vh - 64px - 200px);
    display:flex;align-items:center;justify-content:center;
    padding:60px 24px;text-align:center;
}
.message-card{max-width:500px}
.message-card__icon{font-size:4rem;margin-bottom:20px}
.message-card__title{
    font-family:var(--font-display);
    font-size:var(--fs-2xl);font-weight:700;margin-bottom:12px;
}
.message-card__text{color:var(--text-2);margin-bottom:32px}

/* Stub Payment */
.stub-payment{max-width:500px;margin:80px auto;text-align:center}
.stub-payment__card{
    background:var(--grad-card);border:2px dashed var(--warning);
    border-radius:var(--r-xl);padding:40px;
}

/* ═══════════════════════════════════════
   LEGAL PAGES
   ═══════════════════════════════════════ */
.legal-page{padding:60px 0}
.legal-page h1{font-family:var(--font-display);font-size:var(--fs-3xl);margin-bottom:12px}
.legal-page h2{font-family:var(--font-display);font-size:var(--fs-xl);margin-top:40px;margin-bottom:16px;color:var(--accent-light)}
.legal-page h3{font-family:var(--font-display);font-size:var(--fs-lg);margin-top:24px;margin-bottom:12px}
.legal-page p{color:var(--text-2);margin-bottom:16px;line-height:1.8}
.legal-page ul,.legal-page ol{color:var(--text-2);padding-left:24px;margin-bottom:16px}
.legal-page li{margin-bottom:8px;line-height:1.6}

/* ═══════════════════════════════════════
   BUY PAGE — Tariff Cards (legacy class support)
   ═══════════════════════════════════════ */
.tariffs-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:24px;max-width:1050px;margin:0 auto;
}
.tariff-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-xl);padding:40px 32px;
    text-align:center;position:relative;transition:all var(--t-base);
}
.tariff-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.tariff-card--popular{border-color:rgba(124,92,252,.4);box-shadow:var(--shadow-glow)}
.tariff-card__badge{
    position:absolute;top:-12px;left:50%;transform:translateX(-50%);
    padding:4px 20px;background:var(--grad-main);color:#fff;
    font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;
    border-radius:var(--r-full);
}
.tariff-card__name{
    font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;
    color:var(--accent-light);text-transform:uppercase;letter-spacing:2px;margin-bottom:16px;
}
.tariff-card__price{font-family:var(--font-display);font-size:var(--fs-4xl);font-weight:800;margin-bottom:8px}
.tariff-card__price span{font-size:var(--fs-lg);font-weight:400;color:var(--text-2)}
.tariff-card__desc{color:var(--text-2);font-size:var(--fs-sm);margin-bottom:32px}
.tariff-card__features{list-style:none;text-align:left;margin-bottom:32px}
.tariff-card__features li{
    padding:8px 0;font-size:var(--fs-sm);color:var(--text-2);
    display:flex;align-items:center;gap:10px;
}
.tariff-card__features li::before{content:'✓';color:var(--success);font-weight:700;flex-shrink:0}

/* ═══════════════════════════════════════
   ANIMATIONS (generic)
   ═══════════════════════════════════════ */
@keyframes fadeIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
}

/* Legacy classes for HTMX/partials */
.animate-in{
    animation:fadeInUp .6s ease forwards;opacity:0;
}
.animate-in:nth-child(1){animation-delay:.1s}
.animate-in:nth-child(2){animation-delay:.2s}
.animate-in:nth-child(3){animation-delay:.3s}
.animate-in:nth-child(4){animation-delay:.4s}

/* Legacy card class support (buy page, etc.) */
.card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:32px;transition:all var(--t-base);
}
.card:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card__icon{font-size:2rem;margin-bottom:16px}
.card__title{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:600;margin-bottom:8px}
.card__text{color:var(--text-2);font-size:var(--fs-sm);line-height:1.6}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:1100px){
    .features-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}

@media(max-width:768px){
    .hero{padding:60px 0 32px;min-height:auto}
    .hero__bg{display:none}
    .hero__title{letter-spacing:-1px}
    .hero__trust{flex-direction:row;flex-wrap:wrap;gap:16px;padding:14px 20px}
    .hero__trust-sep{display:none}
    .hero__mouse-wrap{display:none}

    .section{padding:64px 0}

    .navbar__links{display:none}
    .navbar__toggle{display:block}
    .navbar__links.active{
        display:flex;flex-direction:column;
        position:absolute;top:64px;left:0;right:0;
        background:var(--bg-1);
        backdrop-filter:var(--navbar-blur);-webkit-backdrop-filter:var(--navbar-blur);
        padding:20px;gap:16px;
        border-bottom:1px solid var(--border);
        box-shadow:var(--shadow-lg);
    }

    .footer__grid{grid-template-columns:1fr;gap:24px}
    .tariffs{grid-template-columns:1fr}
    .tariffs-grid{grid-template-columns:1fr}
    .auth-card{padding:32px 24px}
    .download-card{padding:32px 24px}
    .referral-stats{grid-template-columns:1fr 1fr}
    .orders-table{font-size:var(--fs-xs);display:block;overflow-x:auto}
    .orders-table th,.orders-table td{padding:10px 8px}

    /* CTA final — reduce padding on tablets */
    .cta-final{padding:60px 0}

    /* Account nav — wrap on narrow */
    .account-nav{flex-wrap:wrap}

    /* FAQ — compact on tablet */
    .faq__q{padding:18px 0}

    /* Legal pages — compact nav */
    .legal-page h1{margin-bottom:16px}
    .legal-page h2{margin-top:28px}
    .legal-page__nav{padding:12px 16px}
    .legal-page__nav-links{gap:6px 12px}

    /* Download page — reduce paddings */
    .dl-action{padding:22px 18px}
    .dl-hero{padding:40px 16px 28px}
    .dl-meta{gap:12px;padding:14px 18px}
    .dl-footnote{padding:16px 18px}
}

@media(max-width:480px){
    .hero__title{font-size:var(--fs-3xl)}
    .hero__actions{flex-direction:column;align-items:stretch}
    .hero__actions .btn{justify-content:center}
    .hero__trust{padding:12px 16px;gap:12px}
    .tariff{padding:28px 20px}
    .tariff__price{font-size:var(--fs-3xl)}
    .features-grid{grid-template-columns:1fr}

    /* CTA final — even smaller on mobile */
    .cta-final{padding:40px 0}
    .cta-final h2{font-size:var(--fs-2xl)}

    /* FAQ — tighter on mobile */
    .faq__q{padding:14px 0;font-size:var(--fs-sm)}

    /* Legal pages — vertical nav links on mobile */
    .legal-page__nav-links{flex-direction:column;gap:4px}

    /* Download page — mobile optimisation */
    .dl-page{padding:24px 0 40px}
    .dl-hero{padding:28px 12px 20px}
    .dl-hero__title{font-size:var(--fs-xl)}
    .dl-action{padding:18px 14px}
    .dl-meta{flex-direction:column;gap:8px;padding:12px 14px}
    .dl-wifi-code__value{font-size:22px;letter-spacing:2px}
    .dl-footnote{padding:14px 14px}
    .dl-steps__toggle{padding:14px 16px;font-size:var(--fs-sm)}
    .dl-consent__text{font-size:var(--fs-xs)}
}

/* ═══════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════ */
.text-center{text-align:center}
.text-left{text-align:left}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mt-4{margin-top:32px}
.mb-1{margin-bottom:8px}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}
.mb-4{margin-bottom:32px}
.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ═══════════════════════════════════════
   BACKWARD COMPATIBILITY
   Legacy CSS variable aliases & missing classes
   for templates not yet migrated to v2 tokens
   ═══════════════════════════════════════ */
:root{
    /* Color aliases */
    --text-primary:   var(--text-1);
    --text-secondary: var(--text-2);
    --text-muted:     var(--text-3);
    --bg-primary:     var(--bg-0);
    --bg-secondary:   var(--bg-1);
    --border-color:   var(--border);
    --accent-light:   var(--accent-light);
    --accent-glow:    var(--accent-glow);
    --primary:        var(--accent);
    --surface:        var(--bg-card);

    /* Size aliases */
    --font-size-xs:   var(--fs-xs);
    --font-size-sm:   var(--fs-sm);
    --font-size-base: var(--fs-base);
    --font-size-lg:   var(--fs-lg);
    --font-size-xl:   var(--fs-xl);
    --font-size-2xl:  var(--fs-2xl);
    --font-size-3xl:  var(--fs-3xl);
    --font-size-4xl:  var(--fs-4xl);
    --font-size-5xl:  var(--fs-5xl);
    --font-main:      var(--font-body);

    /* Radius aliases */
    --radius-sm:   var(--r-sm);
    --radius-md:   var(--r-md);
    --radius-lg:   var(--r-lg);
    --radius-xl:   var(--r-xl);
    --radius-full: var(--r-full);

    /* Shadow aliases */
    --shadow-sm: var(--shadow-sm);
    --shadow-md: var(--shadow-md);
    --shadow-lg: var(--shadow-lg);

    /* Transition aliases */
    --transition-fast: var(--t-fast);
    --transition-base: var(--t-base);
    --transition-slow: var(--t-slow);

    /* Gradient aliases */
    --gradient-primary: var(--grad-main);
    --gradient-card: var(--grad-card);

    /* Success/danger legacy */
    --success-glow: var(--success-glow);
    --danger-glow: var(--danger-glow);
    --warning: var(--warning);
}

/* section__subtitle alias */
.section__subtitle{
    font-size:var(--fs-lg);color:var(--text-2);
    max-width:560px;margin:0 auto;line-height:1.6;
}

/* Login tabs */
.login-tabs{
    display:flex;gap:4px;
    background:var(--bg-input);
    border-radius:var(--r-full);
    padding:4px;
    margin-bottom:24px;
}
.login-tab{
    flex:1;
    padding:10px 16px;
    background:transparent;
    border:none;border-radius:var(--r-full);
    color:var(--text-2);
    font-family:var(--font-display);font-size:var(--fs-sm);font-weight:500;
    cursor:pointer;
    transition:all var(--t-fast);
    text-align:center;
}
.login-tab:hover{color:var(--text-1)}
.login-tab--active,.login-tab.active{
    background:var(--accent);color:#fff;
    box-shadow:0 2px 8px var(--accent-glow);
}

/* Tariff select (buy page radio) */
.tariff-select-grid{
    display:flex;flex-direction:column;gap:12px;
}
.tariff-select{
    display:flex;align-items:center;gap:16px;
    padding:16px 20px;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    cursor:pointer;
    transition:all var(--t-fast);
    box-shadow:var(--shadow-sm);
}
.tariff-select:hover{
    border-color:var(--border-hover);
    box-shadow:var(--shadow-md);
}
.tariff-select--active,
.tariff-select:has(input[type="radio"]:checked){
    border-color:var(--accent);
    box-shadow:0 0 0 2px var(--accent-glow);
}
.tariff-select__radio{
    accent-color:var(--accent);width:18px;height:18px;flex-shrink:0;
}
.tariff-select__body{flex:1;min-width:0}
.tariff-select__name{font-weight:600;font-size:var(--fs-base)}
.tariff-select__badge{
    color:var(--accent);font-size:var(--fs-xs);margin-left:8px;font-weight:600;
}
.tariff-select__features{
    font-size:var(--fs-xs);color:var(--text-2);margin-top:2px;
}
.tariff-select__price{
    font-weight:700;white-space:nowrap;font-size:var(--fs-lg);
}

/* Buy page — guarantee badge */
.buy-guarantee{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:12px;
    padding:8px 18px;
    border-radius:24px;
    background:rgba(74,222,128,.08);
    border:1px solid rgba(74,222,128,.2);
    font-size:var(--fs-sm);color:#4ade80;font-weight:500;
}
.buy-guarantee__icon{
    flex-shrink:0;stroke:#4ade80;
}

/* Buy page — legal consent under button */
.buy-legal{
    margin-top:14px;text-align:center;
    font-size:12px;color:var(--text-3);line-height:1.6;
    letter-spacing:.01em;
}
.buy-legal a{
    color:var(--accent-light);text-decoration:none;
    border-bottom:1px solid rgba(108,71,255,.25);
    transition:color .15s,border-color .15s;
}
.buy-legal a:hover{color:var(--accent);border-color:var(--accent)}

/* ═══════════════════════════════════════
   BLOG — LIST PAGE
   ═══════════════════════════════════════ */
.blog-hero{
    padding:48px 0 28px;
    text-align:center;
    background:linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}
.blog-hero__title{
    font-family:var(--font-display);
    font-size:var(--fs-4xl);
    font-weight:700;
    margin-bottom:12px;
    background:var(--grad-main);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.blog-hero__subtitle{
    font-size:var(--fs-lg);
    color:var(--text-2);
    max-width:560px;margin:0 auto;
}

.blog-list.section{
    padding-top:40px;
}

.blog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
    gap:28px;
}

.blog-card{
    display:flex;flex-direction:column;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    overflow:hidden;
    transition:all var(--t-base);
    text-decoration:none;
    color:inherit;
}
.blog-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
    border-color:var(--border-hover);
    color:inherit;
}
.blog-card__cover{
    height:200px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    background:linear-gradient(160deg, #12121e 0%, #0e0e1a 100%);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
}
[data-theme="dark"] .blog-card__cover{
    background:var(--grad-card);
}
.blog-card__cover svg{
    width:100%;height:100%;object-fit:cover;
}
.blog-card__cover--placeholder{
    background:linear-gradient(135deg, #12121e 0%, #0e0e1a 100%);
}
[data-theme="dark"] .blog-card__cover--placeholder{
    background:linear-gradient(135deg, rgba(124,92,252,.08), rgba(34,211,238,.04));
}
.blog-card__body{
    padding:24px 28px 28px;
    flex:1;display:flex;flex-direction:column;
}
.blog-card__date{
    font-size:var(--fs-xs);
    color:var(--text-3);
    margin-bottom:8px;
}
.blog-card__title{
    font-family:var(--font-display);
    font-size:var(--fs-xl);
    font-weight:600;
    line-height:1.3;
    margin-bottom:10px;
    color:var(--text-1);
}
.blog-card__excerpt{
    font-size:var(--fs-sm);
    color:var(--text-2);
    line-height:1.6;
    margin-bottom:16px;
    flex:1;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card__link{
    font-family:var(--font-display);
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--accent-light);
    transition:color var(--t-fast);
}
.blog-card:hover .blog-card__link{color:var(--accent-cyan)}

.blog-pagination{
    display:flex;align-items:center;justify-content:center;gap:16px;
    margin-top:48px;
}
.blog-pagination__info{
    color:var(--text-2);font-size:var(--fs-sm);
}

.blog-empty{
    text-align:center;padding:80px 24px;
    color:var(--text-3);font-size:var(--fs-lg);
}

/* ═══════════════════════════════════════
   BLOG — ARTICLE PAGE
   ═══════════════════════════════════════ */
.article-page{
    padding:100px 0 80px;
    background:var(--bg-0);
}

/* Breadcrumbs */
.breadcrumbs{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    font-size:var(--fs-sm);
    margin-bottom:36px;
    padding:10px 16px;
    background:var(--bg-card);
    border-radius:var(--r-md);
    border:1px solid var(--border);
}
.breadcrumbs a{color:var(--text-3);transition:color var(--t-fast);text-decoration:none}
.breadcrumbs a:hover{color:var(--accent-light)}
.breadcrumbs__sep{color:var(--text-3);font-size:var(--fs-xs);opacity:.5}
.breadcrumbs__current{color:var(--text-2)}

/* Layout: content + sidebar */
.article-layout{
    display:grid;
    grid-template-columns:1fr 300px;
    gap:56px;
    align-items:start;
}

/* Main article content */
.article-main{max-width:100%;min-width:0}
.article-cover{
    margin-bottom:36px;
    border-radius:var(--r-xl);
    overflow:hidden;
    background:linear-gradient(160deg, #12121e 0%, #0e0e1a 100%);
    border:1px solid rgba(124,92,252,.12);
    display:flex;align-items:center;justify-content:center;
    padding:24px;
}
[data-theme="dark"] .article-cover{
    background:var(--grad-card);
    border-color:var(--border);
}
.article-cover svg{width:100%;height:auto;display:block;max-height:400px}
.article-main__title{
    font-family:var(--font-display);
    font-size:clamp(1.75rem, 4vw, 2.5rem);
    font-weight:700;
    line-height:1.2;
    margin-bottom:16px;
    color:var(--text-1);
}
.article-meta{
    display:flex;align-items:center;gap:12px;
    font-size:var(--fs-sm);
    color:var(--text-3);
    margin-bottom:40px;
    padding-bottom:28px;
    border-bottom:1px solid var(--border);
}

/* ─── Article rich content ─── */
.article-content{
    font-family:var(--font-body);
    font-size:1.0625rem;
    line-height:1.9;
    color:var(--text-2);
    word-wrap:break-word;
    overflow-wrap:break-word;
}
/* Headings */
.article-content h2{
    font-family:var(--font-display);
    font-size:1.625rem;
    font-weight:700;
    color:var(--text-1);
    margin:52px 0 20px;
    padding-top:28px;
    border-top:1px solid var(--border);
    letter-spacing:-0.01em;
}
.article-content h2:first-child{
    margin-top:0;
    padding-top:0;
    border-top:none;
}
.article-content h3{
    font-family:var(--font-display);
    font-size:1.25rem;
    font-weight:600;
    color:var(--text-1);
    margin:36px 0 14px;
    letter-spacing:-0.005em;
}
.article-content h4{
    font-family:var(--font-display);
    font-size:1.0625rem;
    font-weight:600;
    color:var(--text-1);
    margin:28px 0 10px;
}
/* Lead paragraph */
.article-content .lead,
.article-content p.lead{
    font-size:1.1875rem;
    line-height:1.8;
    color:var(--text-2);
    margin-bottom:24px;
}
/* Body text */
.article-content p{
    margin-bottom:18px;
}
.article-content a{
    color:var(--accent-light);
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-color:rgba(167,139,250,.35);
    transition:all var(--t-fast);
}
.article-content a:hover{
    color:var(--accent-cyan);
    text-decoration-color:rgba(80,200,216,.45);
}
/* Lists */
.article-content ul,
.article-content ol{
    padding-left:28px;
    margin-bottom:20px;
}
.article-content li{
    margin-bottom:10px;
    line-height:1.8;
    padding-left:4px;
}
.article-content li::marker{
    color:var(--accent);
}
.article-content ul li{
    list-style-type:'— ';
}
/* Blockquote */
.article-content blockquote{
    border-left:3px solid var(--accent);
    padding:18px 28px;
    margin:28px 0;
    background:rgba(124,92,252,.05);
    border-radius:0 var(--r-md) var(--r-md) 0;
    color:var(--text-2);
    font-style:italic;
}
.article-content blockquote p:last-child{margin-bottom:0}
/* Images */
.article-content img{
    max-width:100%;
    border-radius:var(--r-lg);
    margin:28px 0;
    border:1px solid var(--border);
}
/* Inline code */
.article-content code{
    background:rgba(124,92,252,.1);
    border:1px solid rgba(124,92,252,.15);
    padding:2px 8px;
    border-radius:6px;
    font-size:.9em;
    color:var(--accent-light);
    font-family:'JetBrains Mono','Fira Code',monospace;
    white-space:nowrap;
}
/* Code blocks */
.article-content pre{
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    padding:20px 24px;
    margin:28px 0;
    overflow-x:auto;
    line-height:1.65;
}
.article-content pre code{
    background:none;
    border:none;
    padding:0;
    font-size:var(--fs-sm);
    color:var(--text-2);
    white-space:pre;
}
/* Strong */
.article-content strong{color:var(--text-1)}
/* SVG illustrations */
.article-content svg{
    max-width:100%;
    height:auto;
    margin:32px auto;
    display:block;
    border-radius:var(--r-lg);
}

/* ─── Tables ─── */
.article-content table{
    width:100%;
    border-collapse:collapse;
    margin:28px 0;
    font-size:var(--fs-sm);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    overflow:hidden;
}
.article-content thead{
    background:rgba(124,92,252,.08);
}
.article-content th{
    padding:14px 18px;
    text-align:left;
    font-family:var(--font-display);
    font-weight:600;
    font-size:var(--fs-xs);
    color:var(--text-1);
    text-transform:uppercase;
    letter-spacing:.5px;
    border-bottom:2px solid rgba(124,92,252,.2);
}
.article-content td{
    padding:12px 18px;
    color:var(--text-2);
    border-bottom:1px solid var(--border);
    line-height:1.6;
}
.article-content tbody tr:last-child td{border-bottom:none}
.article-content tbody tr:hover td{
    background:var(--bg-2);
}
.article-content tbody tr:nth-child(even) td{
    background:var(--bg-card);
}

/* ─── Callout boxes (inline-styled divs from articles) ─── */
.article-content div[style*="border-left"]{
    border-radius:0 var(--r-md) var(--r-md) 0 !important;
    padding:20px 24px !important;
    margin:24px 0 !important;
}
.article-content div[style*="border-left"] p{
    color:var(--text-2);
    line-height:1.7;
}
.article-content div[style*="border-left"] p:last-child{margin-bottom:0}

/* Disclaimer block */
.article-content .disclaimer{
    background:linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.03));
    border:1px solid rgba(245,158,11,.2);
    border-left:4px solid var(--warning);
    border-radius:0 var(--r-lg) var(--r-lg) 0;
    padding:22px 28px;
    margin:32px 0;
    font-size:var(--fs-sm);
    color:var(--text-2);
    line-height:1.7;
}
.article-content .disclaimer strong{color:var(--warning)}

/* Info box */
.article-content .info-box{
    background:rgba(80,200,216,.04);
    border:1px solid rgba(80,200,216,.12);
    border-left:4px solid var(--accent-cyan);
    border-radius:0 var(--r-lg) var(--r-lg) 0;
    padding:24px 28px;
    margin:32px 0;
}
.article-content .info-box h3{margin-top:0;color:var(--accent-cyan)}

/* Feature grid */
.article-content .feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:16px;
    margin:28px 0;
}
.article-content .feature-item{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    padding:20px 24px;
    transition:all var(--t-fast);
}
.article-content .feature-item:hover{
    border-color:rgba(124,92,252,.25);
    transform:translateY(-2px);
    box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.article-content .feature-item strong{
    display:block;
    margin-bottom:6px;
    color:var(--text-1);
    font-size:var(--fs-sm);
}
.article-content .feature-item p{
    font-size:var(--fs-sm);
    margin:0;
    color:var(--text-2);
    line-height:1.6;
}

/* Centered text (e.g. *#code) */
.article-content p[style*="text-align:center"]{
    font-family:var(--font-display);
}

/* ─── Share buttons ─── */
.article-share{
    display:flex;align-items:center;gap:12px;
    margin-top:56px;
    padding-top:28px;
    border-top:1px solid var(--border);
}
.article-share__label{font-size:var(--fs-sm);color:var(--text-3)}
.article-share__link{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;
    border-radius:var(--r-full);
    background:var(--bg-card);
    border:1px solid var(--border);
    color:var(--text-2);
    transition:all var(--t-fast);
}
.article-share__link:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
    transform:translateY(-2px);
    box-shadow:0 4px 12px var(--accent-glow);
}

/* ═══════════════════════════════════════
   ARTICLE SIDEBAR
   ═══════════════════════════════════════ */
.article-sidebar{position:sticky;top:100px}

.article-toc{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:24px;
    margin-bottom:24px;
}
.article-toc__title{
    font-family:var(--font-display);
    font-size:var(--fs-xs);
    font-weight:600;
    color:var(--accent-light);
    margin-bottom:16px;
    text-transform:uppercase;
    letter-spacing:1.5px;
}
.article-toc__nav{display:flex;flex-direction:column;gap:2px}
.article-toc__link{
    display:block;
    padding:7px 12px;
    font-size:var(--fs-sm);
    color:var(--text-2);
    border-radius:var(--r-sm);
    transition:all var(--t-fast);
    text-decoration:none;
    border-left:2px solid transparent;
}
.article-toc__link:hover{
    color:var(--accent-light);
    background:rgba(124,92,252,.06);
    border-left-color:var(--accent);
}
.article-toc__link--sub{
    padding-left:24px;
    font-size:var(--fs-xs);
    color:var(--text-3);
}

.article-related{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:24px;
}
.article-related__title{
    font-family:var(--font-display);
    font-size:var(--fs-xs);
    font-weight:600;
    color:var(--accent-light);
    margin-bottom:16px;
    text-transform:uppercase;
    letter-spacing:1.5px;
}
.article-related__item{
    display:block;
    padding:12px 0;
    border-bottom:1px solid var(--border);
    text-decoration:none;
    transition:all var(--t-fast);
}
.article-related__item:last-child{border-bottom:none}
.article-related__item:hover .article-related__name{color:var(--accent-light)}
.article-related__name{
    display:block;
    font-size:var(--fs-sm);
    color:var(--text-1);
    line-height:1.5;
    margin-bottom:4px;
    transition:color var(--t-fast);
}
.article-related__date{
    font-size:var(--fs-xs);
    color:var(--text-3);
}

/* ═══════════════════════════════════════
   BLOG — ADMIN
   ═══════════════════════════════════════ */
.blog-admin__header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:32px;flex-wrap:wrap;gap:16px;
}
.blog-admin__header h1{
    font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;
}
.blog-admin__actions{display:flex;gap:12px}
.blog-admin__table-wrap{overflow-x:auto}
.blog-admin__table{
    width:100%;border-collapse:collapse;
    font-size:var(--fs-sm);
}
.blog-admin__table th,.blog-admin__table td{
    padding:12px 16px;
    text-align:left;
    border-bottom:1px solid var(--border);
}
.blog-admin__table th{
    font-family:var(--font-display);
    font-weight:600;
    color:var(--text-1);
    font-size:var(--fs-xs);
    text-transform:uppercase;
    letter-spacing:1px;
}
.blog-admin__table td{color:var(--text-2)}
.blog-admin__table tr:hover td{background:var(--bg-2)}
.blog-admin__slug{font-family:monospace;font-size:var(--fs-xs);color:var(--text-3)}
.blog-admin__actions-cell{white-space:nowrap}
.blog-admin__actions-cell .btn{margin-left:4px}

/* Editor form */
.blog-editor{margin-top:8px}
.blog-editor__details{
    margin:20px 0;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    padding:16px 20px;
}
.blog-editor__details summary{
    cursor:pointer;color:var(--text-2);font-size:var(--fs-sm);font-weight:500;
}
.blog-editor__details[open] summary{margin-bottom:16px}
.blog-editor__publish{margin:24px 0}
.blog-editor__buttons{display:flex;gap:12px;margin-top:24px}

/* Form elements (shared) */
.form-label{
    display:block;font-size:var(--fs-sm);font-weight:500;
    color:var(--text-1);margin-bottom:6px;
}
.form-hint{font-size:var(--fs-xs);color:var(--text-3);margin-top:4px;display:block}
.form-checkbox{
    display:flex;align-items:center;gap:8px;
    cursor:pointer;font-size:var(--fs-sm);color:var(--text-2);
}
.form-checkbox input[type="checkbox"]{
    width:18px;height:18px;accent-color:var(--accent);
}

/* ═══════════════════════════════════════
   BLOG — RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:960px){
    .article-layout{
        grid-template-columns:1fr;
        gap:36px;
    }
    .article-sidebar{
        position:static;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:16px;
    }
    .article-content .feature-grid{
        grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    }
}

@media(max-width:768px){
    .blog-hero{padding:40px 0 24px}
    .blog-hero__title{font-size:var(--fs-3xl)}

    .blog-grid{grid-template-columns:1fr}
    .blog-card__cover{height:180px}

    .article-page{padding:80px 0 48px}
    .article-main__title{font-size:var(--fs-2xl)}
    .article-layout{gap:28px}

    .article-sidebar{
        grid-template-columns:1fr;
    }
    .article-toc{display:none}

    .article-content{font-size:1rem}
    .article-content h2{font-size:1.375rem;margin:40px 0 16px;padding-top:20px}
    .article-content h3{font-size:1.125rem}
    .article-content table{font-size:var(--fs-xs)}
    .article-content th,.article-content td{padding:10px 12px}

    .breadcrumbs{font-size:var(--fs-xs);padding:8px 12px}

    .blog-admin__table{font-size:var(--fs-xs)}
    .blog-admin__table th,.blog-admin__table td{padding:8px 10px}
    .blog-admin__header{flex-direction:column;align-items:flex-start}
}

@media(max-width:480px){
    .blog-hero__title{font-size:var(--fs-2xl)}
    .blog-hero__subtitle{font-size:var(--fs-sm)}

    .blog-card__body{padding:18px 20px 22px}
    .blog-card__title{font-size:var(--fs-lg)}

    .article-main__title{font-size:var(--fs-xl)}
    .article-content{font-size:var(--fs-sm)}
    .article-content h2{font-size:var(--fs-xl);margin:32px 0 12px;padding-top:16px}
    .article-content h3{font-size:var(--fs-lg)}
    .article-content h4{font-size:var(--fs-base)}
    .article-content .lead{font-size:var(--fs-base)}

    .article-share{flex-wrap:wrap}

    .article-content .feature-grid{grid-template-columns:1fr}
    .article-content table{display:block;overflow-x:auto}
}

/* ═══════════════════════════════════════
   EXTRACTED INLINE STYLES
   (moved from templates to CSS)
   ═══════════════════════════════════════ */

/* OTP code input */
.form-input--otp{
    font-size:var(--fs-2xl);
    letter-spacing:8px;
    text-align:center;
    font-family:'JetBrains Mono','Courier New',monospace;
}

/* Auth card separator */
.auth-card__sep{
    margin:0 8px;
    color:var(--text-3);
}

/* Account page alerts */
.account-alert{
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
}

/* Account set-password card */
.account-card{
    max-width:500px;
    margin:0 auto 24px;
}

/* Orders VIN column */
.orders-vin{
    font-family:'JetBrains Mono','Courier New',monospace;
    letter-spacing:1px;
}

/* Muted text utility */
.text-muted{
    color:var(--text-3);
    font-size:var(--fs-xs);
}

/* Message page compact variant */
.message-page--compact{
    min-height:auto;
    padding:60px 0;
}

/* Badge extensions (from account.html) */
.badge--trial{
    background:rgba(255,152,0,.12);
    color:var(--warning);
    border:1px solid rgba(255,152,0,.25);
}
.badge--trial-expired{
    background:rgba(239,68,68,.10);
    color:var(--danger);
    border:1px solid rgba(239,68,68,.20);
}
.badge--refund-pending{
    background:rgba(255,152,0,.10);
    color:var(--warning);
    border:1px solid rgba(255,152,0,.20);
}
.badge--permanent{
    background:rgba(16,185,129,.10);
    color:var(--success);
    border:1px solid rgba(16,185,129,.20);
}
.order-badges{
    display:flex;
    flex-direction:column;
    gap:4px;
    align-items:flex-start;
}
.order-actions{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

/* ═══════════════════════════════════════
   LIGHT THEME ENHANCEMENTS
   Additional overrides for light appearance
   ═══════════════════════════════════════ */

/* Cards in light — solid elevated look */
:root .feature-card,
:root .tariff,
:root .blog-card,
:root .referral-stat,
:root .download-card,
:root .card{
    box-shadow:var(--shadow-sm);
    transition:all var(--t-base);
}

/* Feature card hover — lift and shadow */
:root .feature-card:hover,
:root .tariff:hover,
:root .blog-card:hover,
:root .card:hover{
    box-shadow:var(--shadow-md);
}

/* Orders table — alternating rows in light */
.orders-table tbody tr:nth-child(even) td{
    background:var(--bg-2);
}

/* Account nav — active pill */
.account-nav__link--active{
    background:var(--accent);
    color:#fff;
    box-shadow:0 2px 8px var(--accent-glow);
}
.account-nav__link--active:hover{
    color:#fff;
}

/* Footer links hover — accent color */
.footer__links a:hover{
    color:var(--accent);
}

/* CTA Final — gradient background for visual break */
.cta-final{
    background:var(--grad-main);
}
.cta-final__title,
.cta-final__desc{
    color:#fff;
}
/* Override text-gradient inside CTA — same gradient makes it invisible */
.cta-final .text-gradient{
    background:none;
    -webkit-background-clip:unset;
    -webkit-text-fill-color:#fff;
    background-clip:unset;
    text-shadow:0 2px 20px rgba(255,255,255,.3);
}
.cta-final .btn--primary{
    background:#fff;
    color:var(--accent);
    box-shadow:var(--shadow-md);
}
.cta-final .btn--primary:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-lg);
    color:var(--accent);
}
.cta-final .btn--outline{
    border-color:rgba(255,255,255,.5);
    color:#fff;
}
.cta-final .btn--outline:hover{
    background:rgba(255,255,255,.15);
    border-color:#fff;
    color:#fff;
}

/* Dark theme — restore CTA */
[data-theme="dark"] .cta-final{
    background:transparent;
}
[data-theme="dark"] .cta-final__title{
    color:var(--text-1);
}
[data-theme="dark"] .cta-final .text-gradient{
    background:var(--grad-main);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    text-shadow:none;
}
[data-theme="dark"] .cta-final__desc{
    color:var(--text-2);
}
[data-theme="dark"] .cta-final .btn--primary{
    background:var(--grad-main);
    color:#fff;
    box-shadow:0 4px 20px var(--accent-glow);
}
[data-theme="dark"] .cta-final .btn--outline{
    border-color:var(--border-hover);
    color:var(--text-1);
}

/* FAQ items — light mode styling */
.faq__item{
    background:var(--bg-card);
    margin-bottom:8px;
    border-radius:var(--r-md);
    border:1px solid var(--border);
    padding:0 20px;
    border-bottom:none;
}
.faq__item.is-open{
    border-left:3px solid var(--accent);
}

/* Referral page extras */
.referral-heading{
    font-family:var(--font-display);
    font-size:var(--fs-xl);
    font-weight:600;
    margin-bottom:16px;
}
.referral-hint{
    color:var(--text-2);
    font-size:var(--fs-sm);
    margin-bottom:40px;
}
.referral-stat__value--success{
    color:var(--success);
}
.referral-tiers-table{
    width:100%;
    border-collapse:collapse;
}
.referral-tiers-table td{
    padding:10px 0;
    border-bottom:1px solid var(--border);
    font-size:var(--fs-sm);
}
.referral-tiers-table tr:last-child td{
    border-bottom:none;
}
.referral-tiers-table__bonus{
    text-align:right;
    font-weight:600;
    color:var(--success);
}
.referral-tiers-table__value{
    text-align:right;
    font-weight:600;
}

/* ═══════════════════════════════════════
   LEGAL PAGES (terms, privacy)
   ═══════════════════════════════════════ */
.legal-page__subtitle{
    color:var(--text-3);
    margin-bottom:32px;
}
.legal-page__nav{
    background:var(--bg-card);
    border-radius:var(--r-md);
    padding:16px 24px;
    margin-bottom:32px;
    border:1px solid var(--border);
}
.legal-page__nav-label{
    margin:0 0 8px;
    font-weight:600;
    color:var(--text-3);
    font-size:var(--fs-xs);
    text-transform:uppercase;
    letter-spacing:.05em;
}
.legal-page__nav-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
}
.legal-page__nav-link{
    color:var(--accent-light);
    text-decoration:none;
    font-size:var(--fs-sm);
    transition:color var(--t-fast);
}
.legal-page__nav-link:hover{
    color:var(--accent);
}
.legal-page__version{
    margin-top:40px;
    color:var(--text-3);
    font-size:var(--fs-xs);
}

/* ═══════════════════════════════════════
   STUB PAYMENT (dev only)
   ═══════════════════════════════════════ */
.stub-payment__title{
    font-size:var(--fs-2xl);
    margin-bottom:16px;
}
.stub-payment__details{
    margin-bottom:24px;
    text-align:left;
}
.stub-payment__details p{
    margin-bottom:8px;
}
.stub-payment__vin{
    font-family:monospace;
}
.stub-payment__price{
    font-size:var(--fs-2xl);
    font-weight:700;
    margin-top:16px;
    text-align:center;
}
.stub-payment__actions{
    display:flex;
    gap:12px;
    justify-content:center;
}

/* ═══════════════════════════════════════
   DOWNLOAD PAGE
   ═══════════════════════════════════════ */

/* Page layout */
.dl-page{max-width:620px;margin:0 auto;padding:40px 0 60px}

/* Hero header */
.dl-hero{text-align:center;margin-bottom:32px}
.dl-hero__icon{font-size:3.5rem;margin-bottom:16px;line-height:1}
.dl-hero__title{
    font-family:var(--font-display);font-size:var(--fs-2xl);
    font-weight:700;margin-bottom:12px;
}

/* Order meta */
.dl-meta{
    display:flex;justify-content:center;gap:24px;flex-wrap:wrap;
    margin-bottom:8px;font-size:var(--fs-sm);color:var(--text-2);
}
.dl-meta strong{color:var(--text-1);font-weight:600}
.dl-meta__vin{
    font-family:'JetBrains Mono','SF Mono',monospace;
    letter-spacing:1.5px;color:var(--text-1);
}

/* Badge */
.dl-badge{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 14px;border-radius:var(--r-full);
    font-size:var(--fs-xs);font-weight:600;letter-spacing:.3px;
}
.dl-badge--trial{
    background:rgba(245,158,11,.12);color:var(--warning);
    border:1px solid rgba(245,158,11,.25);
}
.dl-badge--expired{
    background:rgba(239,68,68,.10);color:var(--danger);
    border:1px solid rgba(239,68,68,.22);
}
.dl-badge--permanent{
    background:rgba(16,185,129,.10);color:var(--success);
    border:1px solid rgba(16,185,129,.22);
}

/* Trial progress bar */
.dl-progress{
    margin:20px 0 28px;padding:16px 20px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-md);
}
.dl-progress__label{
    display:flex;justify-content:space-between;
    font-size:var(--fs-xs);color:var(--text-2);margin-bottom:8px;
}
.dl-progress__bar{
    height:6px;border-radius:3px;
    background:var(--bg-2);overflow:hidden;
}
.dl-progress__fill{
    height:100%;border-radius:3px;background:var(--grad-main);
    transition:width .6s cubic-bezier(.22,1,.36,1);
}
.dl-progress__fill--expired{background:var(--danger)}

/* Action section */
.dl-action{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:28px 24px;
    margin-bottom:16px;transition:border-color var(--t-base);
}
.dl-action--active{border-color:rgba(16,185,129,.35)}
.dl-action--locked{opacity:.55;pointer-events:none}
.dl-action__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dl-action__icon{font-size:1.5rem;line-height:1;flex-shrink:0}
.dl-action__title{
    font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;
}
.dl-action__desc{
    font-size:var(--fs-sm);color:var(--text-2);
    line-height:1.65;margin-bottom:0;
}
.dl-action__desc a{
    color:var(--accent-light);text-decoration:none;
    border-bottom:1px solid rgba(167,139,250,.25);
    transition:border-color var(--t-fast),color var(--t-fast);
}
.dl-action__desc a:hover{
    color:var(--accent-light);
    border-bottom-color:rgba(167,139,250,.6);
}
.dl-action .btn{margin-top:16px}

/* Consent */
.dl-consent{
    display:grid;grid-template-columns:18px 1fr;gap:10px;
    align-items:start;margin-top:14px;padding:10px 12px;
    border-radius:var(--r-sm);background:var(--bg-2);
    border:1px solid var(--border);cursor:pointer;
    transition:background var(--t-fast),border-color var(--t-fast);
}
.dl-consent:hover{
    background:var(--bg-card-hover);border-color:var(--border-hover);
}
.dl-consent input[type="checkbox"]{
    width:16px;height:16px;margin-top:1px;
    accent-color:var(--accent);cursor:pointer;
}
.dl-consent__text{font-size:var(--fs-xs);line-height:1.5;color:var(--text-2)}
.dl-consent__text a{
    color:var(--accent-light);text-decoration:none;
    border-bottom:1px dotted rgba(167,139,250,.35);
}
.dl-consent__text a:hover{border-bottom-style:solid;color:var(--accent-light)}
.dl-consent--highlight{
    outline:1.5px solid rgba(255,80,60,.6);
    outline-offset:4px;border-radius:6px;
}
.dl-consent__check-wrap{
    position:relative;display:inline-flex;
    align-items:center;flex-shrink:0;
}

/* Collapsible legal details */
.dl-details{margin-top:14px}
.dl-details summary{
    font-size:var(--fs-xs);color:var(--text-3);cursor:pointer;
    padding:6px 0;transition:color var(--t-fast);list-style:none;
}
.dl-details summary::-webkit-details-marker{display:none}
.dl-details summary::before{
    content:'▸ ';transition:transform var(--t-fast);display:inline-block;
}
.dl-details[open] summary::before{transform:rotate(90deg)}
.dl-details[open] summary{color:var(--text-2)}
.dl-details__body{
    padding:10px 14px;margin-top:6px;font-size:var(--fs-xs);
    line-height:1.55;color:var(--text-2);background:var(--bg-2);
    border-radius:var(--r-sm);border-left:2px solid var(--accent-glow);
}
.dl-details__body a{
    color:var(--accent-light);text-decoration:none;
    border-bottom:1px dotted rgba(167,139,250,.3);
}

/* Footnotes / alerts */
.dl-footnote{
    padding:12px 16px;border-radius:var(--r-sm);font-size:var(--fs-xs);
    line-height:1.5;color:var(--text-2);margin-bottom:12px;
}
.dl-footnote a{
    color:var(--accent-light);text-decoration:none;
    border-bottom:1px dotted rgba(167,139,250,.3);
}
.dl-footnote--refund{
    border:1px solid rgba(239,68,68,.15);background:rgba(239,68,68,.04);
}
.dl-footnote--quality{
    border:1px solid rgba(245,158,11,.15);background:rgba(245,158,11,.04);
}
.dl-footnote__head{
    font-weight:600;font-size:var(--fs-sm);margin-bottom:4px;color:var(--text-1);
}
.dl-footnote--quality .dl-footnote__head{color:var(--warning)}

/* Install steps */
.dl-steps{
    margin-top:28px;background:var(--bg-card);
    border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
}
.dl-steps__toggle{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:16px 20px;background:none;border:none;
    color:var(--text-1);font-family:var(--font-display);
    font-size:var(--fs-base);font-weight:600;cursor:pointer;
    transition:color var(--t-fast);
}
.dl-steps__toggle:hover{color:var(--accent-light)}
.dl-steps__toggle svg{
    width:20px;height:20px;transition:transform var(--t-base);color:var(--text-3);
}
.dl-steps__body{max-height:0;overflow:hidden;transition:max-height var(--t-slow)}
.dl-steps__body--open{max-height:500px}
.dl-steps__list{
    padding:0 20px 20px;margin:0;counter-reset:step;list-style:none;
}
.dl-steps__list li{
    position:relative;padding:8px 0 8px 36px;
    font-size:var(--fs-sm);color:var(--text-2);
    line-height:1.5;counter-increment:step;
}
.dl-steps__list li::before{
    content:counter(step);position:absolute;left:0;top:8px;
    width:24px;height:24px;border-radius:50%;
    background:rgba(124,92,252,.12);color:var(--accent-light);
    font-size:var(--fs-xs);font-weight:700;
    display:flex;align-items:center;justify-content:center;
}
.dl-steps__list li+li{border-top:1px solid var(--border)}
.dl-steps__list strong{color:var(--text-1)}

/* Animate sections */
.dl-page>*{animation:dlFadeIn .5s ease both}
.dl-page>:nth-child(2){animation-delay:.05s}
.dl-page>:nth-child(3){animation-delay:.10s}
.dl-page>:nth-child(4){animation-delay:.15s}
.dl-page>:nth-child(5){animation-delay:.20s}
.dl-page>:nth-child(6){animation-delay:.25s}
.dl-page>:nth-child(7){animation-delay:.30s}
.dl-page>:nth-child(8){animation-delay:.35s}
@keyframes dlFadeIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}

/* Spinner & download states */
@keyframes dl-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.dl-spinner{animation:dl-spin 1s linear infinite;vertical-align:middle}
.dl-btn-spinner{display:inline-flex;align-items:center;gap:8px}
.btn--downloading{opacity:.75;pointer-events:none;cursor:wait}
@keyframes dl-shake{
    0%,100%{transform:translateX(0)}
    15%{transform:translateX(-6px)}30%{transform:translateX(6px)}
    45%{transform:translateX(-4px)}60%{transform:translateX(4px)}
    75%{transform:translateX(-2px)}90%{transform:translateX(2px)}
}
.btn--shake{animation:dl-shake .5s ease-in-out}

/* Tooltip */
.dl-tooltip{
    position:absolute;bottom:calc(100% + 10px);left:0;transform:none;
    white-space:normal;width:max-content;
    max-width:min(220px,calc(100vw - 48px));
    font-size:11.5px;line-height:1.4;color:#fff;background:#222;
    border-radius:4px;padding:5px 10px;pointer-events:none;
    opacity:0;visibility:hidden;
    transition:opacity .15s ease,visibility .15s ease;
    z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.dl-tooltip::after{
    content:'';position:absolute;top:100%;left:9px;transform:none;
    border:5px solid transparent;border-top-color:#222;
}
.dl-tooltip--visible{opacity:1;visibility:visible}

/* Download page: utility modifiers */
.dl-meta--start{justify-content:flex-start}
.dl-action--center{text-align:center}
.dl-btn--full{width:100%}
.dl-btn--full-sm{width:100%;font-size:var(--fs-sm)}
.dl-hidden{display:none}
.dl-inline{display:inline}
.dl-mt-8{margin-top:8px}
.dl-mt-12{margin-top:12px}
.dl-mt-14{margin-top:14px}
.dl-mt-24{margin-top:24px}
.dl-mb-12{margin-bottom:12px}

/* Download page: text modifiers */
.dl-text-danger{color:var(--danger)}
.dl-text-warning{color:var(--warning)}
.dl-text-muted{color:var(--text-2)}
.dl-text-subtle{color:var(--text-3)}
.dl-text-xs{font-size:var(--fs-xs)}
.dl-text-sm{font-size:var(--fs-sm)}
.dl-lh-15{line-height:1.5}

/* Download page: revoked / refund desc */
.dl-action__desc--danger{color:var(--danger);margin-top:12px}
.dl-action__desc--mt{margin-top:8px}
.dl-action__desc--refund{margin-top:8px;color:var(--text-3);font-size:var(--fs-xs)}

/* Download page: refund button */
.dl-refund-btn{color:var(--danger);padding:6px 14px}

/* WiFi install code block */
.dl-wifi-code{
    background:var(--surface-2,#1a1a2e);border-radius:8px;
    padding:16px;margin:12px 0;text-align:center;
}
.dl-wifi-code__label{font-size:var(--fs-xs);color:var(--text-2);margin-bottom:6px}
.dl-wifi-code__value{
    font-family:monospace;font-size:28px;font-weight:bold;
    letter-spacing:4px;color:var(--accent,#4ecdc4);user-select:all;
}

/* WiFi install details */
.dl-wifi-details{margin-top:12px}
.dl-wifi-details__summary{cursor:pointer;color:var(--accent,#4ecdc4);font-size:var(--fs-sm)}
.dl-wifi-details__list{
    margin-top:10px;padding-left:20px;
    font-size:var(--fs-xs);line-height:1.7;color:var(--text-2);
}
.dl-wifi-details__list code{
    background:var(--surface-2,#111);padding:2px 6px;border-radius:4px;
}

/* Download page: no-link message */
.dl-nolink-msg{color:var(--warning);font-size:var(--fs-sm)}
.dl-install-hint{color:var(--text-2);font-size:var(--fs-xs);margin-top:14px;line-height:1.5}
.dl-wifi-intro{margin-bottom:10px;font-size:var(--fs-sm);color:var(--text-2)}
.dl-wifi-unavailable{color:var(--text-2);font-size:var(--fs-xs)}
.dl-redownload{color:var(--text-2)}
.dl-progress__status--expired{color:var(--danger)}

/* ═══════════════════════════════════════════
   Payment Pending page  (pp-*)
   Uses dl-page, dl-hero, dl-meta, dl-action
   ═══════════════════════════════════════════ */

/* Pending badge */
.dl-badge--pending{
    background:rgba(124,92,252,.10);color:var(--accent-light);
    border:1px solid rgba(124,92,252,.22);
}

/* Hero icon (SVG hourglass) */
.pp-hero-icon{
    display:flex;justify-content:center;margin-bottom:16px;
}
.pp-hero-icon svg{
    opacity:.9;filter:drop-shadow(0 4px 12px rgba(108,71,255,.2));
}

/* Amount card */
.pp-amount-card{
    text-align:center;
    background:linear-gradient(135deg, rgba(108,71,255,.06), rgba(14,116,144,.06));
    border:1px solid rgba(108,71,255,.15);
    border-radius:var(--r-lg);padding:28px 24px;
    margin-bottom:16px;
}
.pp-amount-card__label{
    font-size:var(--fs-xs);color:var(--text-2);
    text-transform:uppercase;letter-spacing:1.5px;font-weight:600;
    margin-bottom:10px;
}
.pp-amount-card__value{
    font-family:var(--font-display);
    font-size:2.2rem;font-weight:800;line-height:1.2;
    background:var(--grad-main);-webkit-background-clip:text;
    -webkit-text-fill-color:transparent;background-clip:text;
}

/* Bank requisites */
.pp-requisites{
    background:var(--bg-2,rgba(0,0,0,.06));
    border:1px solid var(--border);
    border-radius:var(--r-md);
    padding:14px 18px;margin-top:12px;
    font-family:'JetBrains Mono','SF Mono',monospace;
    font-size:var(--fs-sm);line-height:1.7;
    white-space:pre-wrap;word-break:break-all;
    color:var(--text-1);user-select:all;
}

/* Contact chips */
.pp-contacts{
    display:flex;flex-wrap:wrap;gap:10px;
    margin-top:16px;
}
.pp-contact-chip{
    display:inline-flex;align-items:center;gap:10px;
    padding:12px 20px;border-radius:var(--r-full);
    background:rgba(108,71,255,.06);
    border:1px solid rgba(108,71,255,.15);
    font-size:var(--fs-sm);font-weight:500;
    color:var(--text-1);text-decoration:none;
    transition:all var(--t-base);
}
.pp-contact-chip:hover{
    border-color:var(--accent-light);
    background:rgba(108,71,255,.12);
    color:var(--accent-light);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(108,71,255,.15);
}
.pp-contact-chip svg{flex-shrink:0;transition:transform var(--t-base)}
.pp-contact-chip:hover svg{transform:scale(1.1)}

/* Note inside action card */
.pp-note{
    margin-top:16px;padding-top:14px;
    border-top:1px solid var(--border);
    font-size:var(--fs-xs);color:var(--text-2);line-height:1.5;
}
.pp-note strong{color:var(--text-1)}

/* Footer */
.pp-footer{text-align:center;margin-top:12px}
.pp-footer__text{
    font-size:var(--fs-sm);color:var(--text-2);
    margin-bottom:20px;line-height:1.5;
}
.pp-footer__btn{
    min-width:280px;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
}

/* Utility */
.pp-mt-8{margin-top:8px}

/* Mobile */
@media(max-width:480px){
    .pp-amount-card{padding:20px 16px}
    .pp-amount-card__value{font-size:1.8rem}
    .pp-contacts{flex-direction:column}
    .pp-contact-chip{justify-content:center}
    .pp-footer__btn{min-width:unset;width:100%}
}

/* ═══════════════════════════════════════════
   Buy page — auth block  (buy-auth)
   ═══════════════════════════════════════════ */
.buy-auth{
    background:rgba(108,71,255,.04);
    border:1px solid rgba(108,71,255,.18);
    border-radius:12px;
    padding:20px 24px;
    margin-bottom:20px;
}
.buy-auth__header{
    display:flex;align-items:center;gap:10px;
    font-weight:600;font-size:1.05rem;
    color:var(--text-primary,#fff);
    margin-bottom:6px;
}
.buy-auth__hint{
    font-size:.88rem;color:var(--text-secondary,#aaa);
    margin:0 0 16px 30px;
}
.buy-auth__divider{
    display:flex;align-items:center;gap:12px;
    margin:14px 0;color:var(--text-secondary,#888);
    font-size:.85rem;
}
.buy-auth__divider::before,
.buy-auth__divider::after{
    content:'';flex:1;height:1px;
    background:var(--border,rgba(255,255,255,.1));
}
.buy-otp-input{margin-top:4px}
.buy-otp-input .form-input{
    letter-spacing:.15em;font-size:1.1rem;
    text-align:center;max-width:200px;
}
.buy-otp-input .form-hint{
    color:var(--accent-light,#7c5cfc);font-size:.82rem;
}

/* ─── Promo code section ─── */
.promo-section{margin:20px 0 4px}

/* Toggle switch */
.promo-toggle{
    display:flex;align-items:center;gap:12px;cursor:pointer;
    user-select:none;font-size:var(--fs-sm);color:var(--text-2);
}
.promo-toggle__input{display:none}
.promo-toggle__switch{
    position:relative;width:40px;height:22px;
    background:var(--border);border-radius:11px;
    transition:background .25s ease;flex-shrink:0;
}
.promo-toggle__switch::after{
    content:'';position:absolute;top:2px;left:2px;
    width:18px;height:18px;background:#fff;
    border-radius:50%;transition:transform .25s ease;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.promo-toggle__input:checked + .promo-toggle__switch{
    background:var(--accent,#7c5cfc);
}
.promo-toggle__input:checked + .promo-toggle__switch::after{
    transform:translateX(18px);
}
.promo-toggle__label{
    font-weight:500;transition:color .2s;
}
.promo-toggle__input:checked ~ .promo-toggle__label{
    color:var(--text-1);
}

/* Promo field (expandable) */
.promo-field{
    overflow:hidden;max-height:0;opacity:0;
    transition:max-height .3s ease, opacity .25s ease, margin .25s ease;
    margin-top:0;
}
.promo-field--visible{
    max-height:120px;opacity:1;margin-top:14px;
}

/* Input + apply button row */
.promo-input-wrap{
    display:flex;align-items:center;gap:8px;position:relative;
}
.promo-input{
    flex:1;text-transform:uppercase;letter-spacing:1px;
    font-family:'JetBrains Mono','Courier New',monospace;
    font-size:var(--fs-sm);padding:12px 14px;
}
.promo-apply-btn{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;flex-shrink:0;
    background:var(--accent,#7c5cfc);color:#fff;
    border:none;border-radius:var(--r-md);cursor:pointer;
    transition:background .2s, transform .15s;
}
.promo-apply-btn:hover{
    background:var(--accent-light,#6b4ce0);transform:scale(1.04);
}
.promo-apply-btn:active{transform:scale(.96)}

/* Spinner */
.promo-spinner{
    display:none;position:absolute;right:56px;
    width:18px;height:18px;border:2px solid var(--border);
    border-top-color:var(--accent);border-radius:50%;
    animation:spin .6s linear infinite;
}
.promo-spinner.htmx-request{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Result messages */
.promo-status{
    display:flex;align-items:center;gap:8px;
    font-size:var(--fs-sm);margin-top:10px;padding:8px 0;
}
.promo-status--success{color:var(--success,#10b981)}
.promo-status--success svg{stroke:var(--success,#10b981)}
.promo-status--error{color:var(--danger,#ef4444)}

/* Discounted price styling */
.tariff-select__price--discounted{
    display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.price-old{
    text-decoration:line-through;font-size:var(--fs-xs);
    color:var(--text-3);font-weight:400;
}