/* GENERATED FILE — do not edit.
   Built from variables.css, base.css, home.css, home-showcase.css by zypherius-work/seo/build_home_css.py.
   Edit the sources, re-run the script, then bump ?v= in index.html. */

/* ── variables.css ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   ZYPHERIUS — Premium Design System
   A premium AI platform for everyone
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ─────────────────────────────────────────────────────────────────────
       BRAND COLORS — Zypherius Identity
       ───────────────────────────────────────────────────────────────────── */
    --brand-primary: #6366f1;      /* Indigo */
    --brand-secondary: #8b5cf6;    /* Violet */
    --brand-accent: #ec4899;       /* Pink */
    --brand-glow: #a855f7;         /* Purple glow */
    
    /* ─────────────────────────────────────────────────────────────────────
       COLORS - Background (Deep Dark)
       ───────────────────────────────────────────────────────────────────── */
    --bg-primary: #030014;
    --bg-secondary: #0a0618;
    --bg-tertiary: #110c24;
    --bg-elevated: #1a1333;
    --bg-hover: #241b42;
    --bg-active: #2e2352;
    --bg-glass: rgba(17, 12, 36, 0.8);
    --bg-glass-light: rgba(26, 19, 51, 0.6);
    
    /* ─────────────────────────────────────────────────────────────────────
       COLORS - Text
       ───────────────────────────────────────────────────────────────────── */
    --text-primary: #ffffff;
    --text-secondary: #c4b5fd;
    --text-muted: #8b7fba;
    /* 4.65:1 against the #030014 page background. The previous #6b5b95 measured
       3.51:1, so every label using it failed WCAG AA for normal text. */
    --text-dim: #7d6fa8;
    --text-disabled: #4a3f6b;
    
    /* ─────────────────────────────────────────────────────────────────────
       COLORS - Accent Palette
       ───────────────────────────────────────────────────────────────────── */
    --accent-indigo: #6366f1;
    --accent-violet: #8b5cf6;
    --accent-purple: #a855f7;
    --accent-pink: #ec4899;
    --accent-rose: #f43f5e;
    --accent-blue: #3b82f6;
    --accent-cyan: #06b6d4;
    --accent-green: #10b981;
    --accent-yellow: #f59e0b;
    --accent-orange: #f97316;
    --accent-red: #ef4444;
    
    /* ─────────────────────────────────────────────────────────────────────
       COLORS - Semantic
       ───────────────────────────────────────────────────────────────────── */
    --color-success: var(--accent-green);
    --color-warning: var(--accent-yellow);
    --color-error: var(--accent-red);
    --color-info: var(--accent-cyan);
    
    /* ─────────────────────────────────────────────────────────────────────
       BORDERS
       ───────────────────────────────────────────────────────────────────── */
    --border-subtle: rgba(139, 92, 246, 0.1);
    --border-default: rgba(139, 92, 246, 0.2);
    --border-strong: rgba(139, 92, 246, 0.3);
    --border-accent: rgba(99, 102, 241, 0.5);
    --border-glow: rgba(168, 85, 247, 0.4);
    
    /* ─────────────────────────────────────────────────────────────────────
       GRADIENTS — Premium
       ───────────────────────────────────────────────────────────────────── */
    --gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --gradient-brand-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 50%, rgba(236, 72, 153, 0.2) 100%);
    --gradient-text: linear-gradient(135deg, #c4b5fd 0%, #f0abfc 50%, #fda4af 100%);
    --gradient-glow: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    --gradient-hero: radial-gradient(ellipse at 50% 30%, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 70%);
    --gradient-card: linear-gradient(180deg, rgba(26, 19, 51, 0.8) 0%, rgba(17, 12, 36, 0.9) 100%);
    --gradient-button: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-button-hover: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    
    /* ─────────────────────────────────────────────────────────────────────
       SHADOWS — Depth & Glow
       ───────────────────────────────────────────────────────────────────── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.3);
    --shadow-glow-strong: 0 0 80px rgba(139, 92, 246, 0.4);
    --shadow-glow-brand: 0 0 60px rgba(99, 102, 241, 0.4);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    
    /* ─────────────────────────────────────────────────────────────────────
       GLASS EFFECTS
       ───────────────────────────────────────────────────────────────────── */
    --glass-blur: blur(20px);
    --glass-blur-heavy: blur(40px);
    --glass-background: rgba(17, 12, 36, 0.7);
    --glass-border: rgba(139, 92, 246, 0.15);
    
    /* ─────────────────────────────────────────────────────────────────────
       SPACING
       ───────────────────────────────────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    
    /* ─────────────────────────────────────────────────────────────────────
       RADIUS
       ───────────────────────────────────────────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-4xl: 32px;
    --radius-full: 9999px;
    
    /* ─────────────────────────────────────────────────────────────────────
       TYPOGRAPHY — Premium
       ───────────────────────────────────────────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --text-5xl: 48px;
    --text-6xl: 60px;
    --text-7xl: 72px;
    
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    
    /* ─────────────────────────────────────────────────────────────────────
       TRANSITIONS — Smooth
       ───────────────────────────────────────────────────────────────────── */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;
    --duration-slowest: 700ms;
    
    /* ─────────────────────────────────────────────────────────────────────
       Z-INDEX
       ───────────────────────────────────────────────────────────────────── */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    --z-max: 999;
    
    /* ─────────────────────────────────────────────────────────────────────
       LAYOUT
       ───────────────────────────────────────────────────────────────────── */
    --header-height: 64px;
    --sidebar-width: 280px;
    --preview-width: 50%;
    --max-content-width: 1400px;
    --max-chat-width: 800px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */
:root.light, html.light {
    --bg-primary: #ffffff;
    --bg-secondary: #fafafe;
    --bg-tertiary: #f3f2f8;
    --bg-elevated: #ffffff;
    --bg-hover: #f0eef6;
    --bg-active: #eae7f3;
    --bg-glass: rgba(255, 255, 255, 0.85);
    --bg-glass-light: rgba(255, 255, 255, 0.6);
    
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a62;
    --text-muted: #6b6b82;
    --text-dim: #9090a8;
    --text-disabled: #b0b0c4;
    
    --border-subtle: rgba(124, 92, 252, 0.06);
    --border-default: rgba(124, 92, 252, 0.1);
    --border-strong: rgba(124, 92, 252, 0.18);
    --border-accent: rgba(124, 92, 252, 0.25);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 40px rgba(124, 92, 252, 0.08);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(124, 92, 252, 0.04);
    
    --glass-background: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(124, 92, 252, 0.08);
    
    --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 254, 0.95) 100%);
}

/* ── base.css ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   ZYPHERIUS — Base Styles
   Global styles and resets
   ═══════════════════════════════════════════════════════════════════════════ */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Selection */
::selection {
    background: rgba(139, 92, 246, 0.3);
    color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bg-active);
}

/* Focus */
:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* Links */
a {
    color: inherit;
    text-decoration: none;
}

/* Images */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* Forms */
input, button, textarea, select {
    font: inherit;
    color: inherit;
}

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

/* Lists */
ul, ol {
    list-style: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
}

p {
    line-height: var(--leading-relaxed);
}

/* Code */
code, pre {
    font-family: var(--font-mono);
}

/* Utilities */
.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;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Loading spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-default);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ── home.css ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   ZYPHERIUS — Home Page Styles
   Video-first landing (2026-08)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   ANIMATED BACKGROUND — aurora + orbs + grid + film grain
   ───────────────────────────────────────────────────────────────────────── */
.bg-container {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--bg-primary);
}

.bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99, 102, 241, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 40% 35% at 88% 15%, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
}

/* The aurora was a conic-gradient under filter: blur(80px) stretched to 150% of
   the viewport. Measured on PageSpeed: that one blur kernel held the first frame
   back by ~2.5 s on a throttled phone — the page was white until it finished.
   The gradient itself never changes, only the rotation does, so it is baked into
   an image by zypherius-work/seo/build_aurora.py and the layer just spins. */
.bg-aurora {
    position: absolute;
    inset: -25%;
    background: url("/images/aurora.webp") center / 100% 100% no-repeat;
    animation: aurora-spin 46s linear infinite;
    will-change: transform;
}

@keyframes aurora-spin {
    to { transform: rotate(360deg); }
}

.bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    animation: float 20s ease-in-out infinite;
}

.bg-orb-1 {
    width: 640px;
    height: 640px;
    background: #6366f1;
    opacity: 0.34;
    top: -220px;
    left: -120px;
}

.bg-orb-2 {
    width: 520px;
    height: 520px;
    background: #ec4899;
    opacity: 0.26;
    top: 45%;
    right: -160px;
    animation-delay: -7s;
}

.bg-orb-3 {
    width: 440px;
    height: 440px;
    background: #06b6d4;
    opacity: 0.22;
    bottom: -120px;
    left: 30%;
    animation-delay: -14s;
}

/* Film grain keeps the big soft gradients from banding.
   This was an inline SVG running feTurbulence. The browser had to synthesise
   fractal noise across the whole viewport before it could paint anything, which
   on a throttled phone held the first frame back by about 2.4 seconds. Same
   grain, rendered once into a 6.5 KB tile. */
.bg-noise {
    position: absolute;
    inset: 0;
    background-image: url("/images/grain.png");
    background-size: 160px 160px;
    opacity: 0.05;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(20px, 10px) scale(1.02); }
}

/* ─────────────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────────────── */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    z-index: var(--z-fixed);
    background: var(--glass-background);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border-subtle);
}

.header-content {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    transition: opacity var(--duration-fast) var(--ease-default);
}

.logo:hover { opacity: 0.8; }

.logo-icon { width: 36px; height: 36px; filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.5)); }
.logo-icon svg { width: 100%; height: 100%; }

.logo-text {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ─────────────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    border: none;
    transition: all var(--duration-fast) var(--ease-default);
    text-decoration: none;
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.btn-primary {
    position: relative;
    overflow: hidden;
    background: var(--gradient-button);
    color: #fff;
    box-shadow: var(--shadow-sm), 0 0 24px rgba(99, 102, 241, 0.4);
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 40%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}

.btn-primary:hover::after { animation: btn-shine 0.8s var(--ease-smooth); }

@keyframes btn-shine {
    to { left: 130%; }
}

.btn-primary:hover {
    background: var(--gradient-button-hover);
    box-shadow: var(--shadow-md), 0 0 36px rgba(139, 92, 246, 0.55);
    transform: translateY(-1px);
}

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

.btn-xl {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-xl);
}

/* The secondary hero button reads as a real button, not bare text */
.btn-ghost.btn-xl {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.btn-ghost.btn-xl:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.btn-ghost.btn-xl svg { color: var(--text-secondary); }

/* ─────────────────────────────────────────────────────────────────────────
   MAIN
   ───────────────────────────────────────────────────────────────────────── */
.main {
    min-height: 100vh;
    padding-top: var(--header-height);
    overflow: hidden;
}

.section-title {
    font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
    font-weight: var(--font-extrabold);
    letter-spacing: -0.03em;
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.section-sub {
    font-size: var(--text-lg);
    color: var(--text-muted);
    margin-bottom: var(--space-12);
}

/* ─────────────────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────────────────── */
.hero {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: var(--space-16) var(--space-6) var(--space-8);
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-16);
    align-items: center;
}

/* Staggered entrance */
@keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

.hero-badge { animation: rise 0.7s var(--ease-smooth) both; }
.hero-title { animation: rise 0.7s var(--ease-smooth) 0.08s both; }
.hero-subtitle { animation: rise 0.7s var(--ease-smooth) 0.16s both; }
.hero-cta { animation: rise 0.7s var(--ease-smooth) 0.24s both; }
.hero-micro { animation: rise 0.7s var(--ease-smooth) 0.32s both; }
.hero-visual { animation: rise 0.9s var(--ease-smooth) 0.2s both; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(129, 140, 248, 0.35);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
}

.badge-dot {
    width: 6px;
    height: 6px;
    background: var(--accent-green);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.hero-title {
    font-size: clamp(2.75rem, 5.6vw, 4.5rem);
    font-weight: var(--font-extrabold);
    line-height: 1.04;
    letter-spacing: -0.035em;
    margin-bottom: var(--space-6);
}

.title-line { display: block; }

/* Gradient on the payoff line.
   This used to pan forever. background-position cannot be composited, so the
   largest text on the page repainted on the main thread every frame: the paint
   never settled, the browser kept re-deciding what the largest contentful
   element was, and LCP landed above four seconds on a phone. The frame below is
   the one the pan spent most of its cycle on, so the line reads the same and
   the hero now paints once. */
.gradient-text {
    background: linear-gradient(100deg, #818cf8 0%, #a78bfa 28%, #c084fc 52%, #e879f9 74%, #f472b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #c084fc; /* fallback if background-clip:text is unsupported */
}

.hero-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 520px;
    margin-bottom: var(--space-10);
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.hero-micro {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.micro-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.micro-item svg { color: var(--accent-green); flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   PHONE DEMO
   ───────────────────────────────────────────────────────────────────────── */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    padding: var(--space-8) 0;
}

.phone-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 480px;
    height: 480px;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 38% 35%, rgba(99, 102, 241, 0.4) 0%, transparent 55%),
        radial-gradient(circle at 65% 65%, rgba(236, 72, 153, 0.28) 0%, transparent 55%);
    filter: blur(34px);
    pointer-events: none;
    animation: glow-breathe 6s ease-in-out infinite;
}

@keyframes glow-breathe {
    0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

/* Finished clips fanned out behind the phone — the “week of Shorts” */
.side-clip {
    position: absolute;
    width: 118px;
    aspect-ratio: 9 / 16;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.sc-left {
    --tilt: -9deg;
    left: calc(50% - 292px);
    top: 20%;
    transform: rotate(-9deg);
    animation: chip-bob 7s ease-in-out -1.5s infinite;
}

.sc-right {
    --tilt: 8deg;
    right: calc(50% - 292px);
    top: 31%;
    transform: rotate(8deg);
    animation: chip-bob 8s ease-in-out -4s infinite;
}

.sc-scene { position: absolute; inset: 0; }

.sc-left .sc-scene {
    background:
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(6, 182, 212, 0.25) 0%, transparent 60%),
        linear-gradient(180deg, #17203a 0%, #0d1224 100%);
}

.sc-right .sc-scene {
    background:
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(236, 72, 153, 0.22) 0%, transparent 60%),
        linear-gradient(180deg, #2a1830 0%, #150c1e 100%);
}

.sc-hook {
    position: absolute;
    top: 7%;
    right: 8%;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    background: rgba(8, 10, 18, 0.85);
    font-size: 10px;
    font-weight: var(--font-bold);
    font-variant-numeric: tabular-nums;
}

.sc-left .sc-hook { color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.5); }
.sc-right .sc-hook { color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.5); }

.sc-cap {
    position: absolute;
    bottom: 18%;
    left: 15%;
    right: 15%;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.85);
}

.sc-cap + .sc-cap {
    bottom: 12%;
    left: 26%;
    right: 26%;
    background: rgba(255, 255, 255, 0.45);
}

.sc-bar {
    position: absolute;
    bottom: 5%;
    left: 10%;
    right: 10%;
    height: 2px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.sc-bar::after {
    content: '';
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #818cf8, #e879f9);
}

.sc-left .sc-bar::after { width: 64%; }
.sc-right .sc-bar::after { width: 38%; }

.phone {
    position: relative;
    z-index: 1;
    width: 290px;
    aspect-ratio: 9 / 18.6;
    background: #101014;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 46px;
    padding: 10px;
    box-shadow:
        0 0 0 6px rgba(16, 16, 20, 0.9),
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 70px rgba(99, 102, 241, 0.28);
    animation: phone-float 7s ease-in-out infinite;
}

@keyframes phone-float {
    0%, 100% { transform: translateY(0) rotate(-0.5deg); }
    50% { transform: translateY(-12px) rotate(0.5deg); }
}

.phone-notch {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 22px;
    background: #0a0a10;
    border-radius: var(--radius-full);
    z-index: 3;
}

.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 38px;
    overflow: hidden;
    background: linear-gradient(180deg, #1c1c2e 0%, #131322 55%, #0c0c16 100%);
}

.scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.scene-light {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(129, 140, 248, 0.22) 0%, transparent 60%);
}

.scene-figure {
    width: 82%;
    height: auto;
    margin-bottom: 16%;
    opacity: 0.95;
}

/* Light sweep across the screen — reads as playing footage */
.screen-sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.09) 50%, transparent 58%);
    transform: translateX(-120%);
    animation: sheen 5.5s ease-in-out 1.2s infinite;
    pointer-events: none;
}

@keyframes sheen {
    0% { transform: translateX(-120%); }
    46% { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

.hook-line {
    position: absolute;
    top: 9%;
    left: 50%;
    transform: translateX(-50%);
    width: 86%;
    text-align: center;
    font-size: 15px;
    font-weight: var(--font-bold);
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

.hook-chip {
    position: absolute;
    top: 16.5%;
    right: 5%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(10, 10, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: var(--font-bold);
    color: #fff;
    z-index: 2;
    transition: border-color 0.4s, box-shadow 0.4s;
}

.hook-chip-label {
    font-size: 10px;
    font-weight: var(--font-semibold);
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hook-chip-score { font-variant-numeric: tabular-nums; }

.hook-chip.chip-live {
    border-color: rgba(74, 222, 128, 0.6);
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.25);
}

.hook-chip.chip-live .hook-chip-score { color: #4ade80; }

.subs {
    position: absolute;
    bottom: 13.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 88%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 7px;
    text-align: center;
    z-index: 2;
    will-change: opacity;
    transition: opacity 0.25s;
}

.subs.subs-fade { opacity: 0; }

.sub-word {
    font-size: 19px;
    font-weight: var(--font-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.38);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
    transition: color 0.12s, transform 0.12s;
}

.sub-word.done { color: #fff; }

.sub-word.on {
    color: #ffe149;
    transform: scale(1.14);
}

.subs-static {
    font-size: 19px;
    font-weight: var(--font-extrabold);
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

/* Equalizer pulsing with the beat */
.wave {
    position: absolute;
    bottom: 7.2%;
    left: 9%;
    right: 9%;
    height: 22px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    z-index: 2;
}

.wave i {
    flex: 1;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(180deg, #a5b4fc 0%, #818cf8 60%, #c084fc 100%);
    opacity: 0.9;
    transform: scaleY(0.3);
    transform-origin: bottom;
    animation: wave-bounce 1.2s ease-in-out infinite;
}

@keyframes wave-bounce {
    0%, 100% { transform: scaleY(0.22); }
    50% { transform: scaleY(1); }
}

.player-bar {
    position: absolute;
    bottom: 4.6%;
    left: 8%;
    right: 8%;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    overflow: hidden;
    z-index: 2;
}

.player-progress {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #818cf8, #e879f9);
    box-shadow: 0 0 8px rgba(232, 121, 249, 0.6);
    border-radius: var(--radius-full);
}

/* Floating feature chips around the phone */
.float-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    background: var(--glass-background);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    z-index: 4;
    white-space: nowrap;
}

.fc-music {
    top: 12%;
    left: -3%;
    animation: chip-bob 5s ease-in-out infinite;
}

.fc-music svg { color: #f472b6; }

.fc-crop {
    top: 46%;
    right: -6%;
    animation: chip-bob 6s ease-in-out -2s infinite;
}

.fc-crop svg { color: #38bdf8; }

.fc-broll {
    bottom: 12%;
    left: -7%;
    animation: chip-bob 5.5s ease-in-out -3.5s infinite;
}

.fc-broll svg { color: #fbbf24; }

@keyframes chip-bob {
    0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
    50% { transform: translateY(-9px) rotate(var(--tilt, 0deg)); }
}

.demo-note {
    max-width: 560px;
    margin: var(--space-4) auto 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
}

/* ─────────────────────────────────────────────────────────────────────────
   MODELS MARQUEE
   ───────────────────────────────────────────────────────────────────────── */
.marquee-section {
    padding: var(--space-10) 0 var(--space-4);
}

.marquee-label {
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    margin-bottom: var(--space-6);
}

.marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: max-content;
    padding: 0 var(--space-4);
    will-change: transform;
    animation: marquee 30s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-track span {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-muted);
    white-space: nowrap;
    transition: color var(--duration-fast);
}

.marquee-track span:hover { color: var(--text-primary); }

.marquee-track i {
    font-style: normal;
    color: var(--accent-violet);
    font-size: var(--text-lg);
    opacity: 0.7;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────────────────────
   HOW IT WORKS
   ───────────────────────────────────────────────────────────────────────── */
.how {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: var(--space-20) var(--space-6);
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-10);
}

.step {
    position: relative;
    padding: var(--space-8);
    background: var(--gradient-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-3xl);
    overflow: hidden;
    transition: border-color var(--duration-normal), transform var(--duration-normal);
}

.step::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #818cf8, #e879f9);
    transition: width 0.45s var(--ease-smooth);
}

.step:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
}

.step:hover::after { width: 100%; }

.step-num {
    font-size: var(--text-5xl);
    font-weight: var(--font-extrabold);
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #818cf8 0%, #e879f9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #818cf8; /* fallback */
    margin-bottom: var(--space-5);
}

.step-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    line-height: var(--leading-snug);
}

.step-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
}

/* ─────────────────────────────────────────────────────────────────────────
   HOOK SCORE
   ───────────────────────────────────────────────────────────────────────── */
.hookscore {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: var(--space-16) var(--space-6);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.hs-text {
    font-size: var(--text-lg);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    max-width: 460px;
}

.hs-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.hs-card {
    padding: var(--space-5) var(--space-6);
    background: var(--gradient-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl);
    transition: border-color var(--duration-normal), transform var(--duration-normal);
}

.hs-card:hover {
    border-color: var(--border-default);
    transform: translateX(4px);
}

.hs-strong {
    border-color: rgba(74, 222, 128, 0.35);
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.09) 0%, var(--bg-secondary) 55%);
}

.hs-ok {
    border-color: rgba(245, 158, 11, 0.25);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, var(--bg-secondary) 55%);
}

.hs-top {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.hs-num {
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.hs-strong .hs-num { color: #4ade80; }
.hs-ok .hs-num { color: #fbbf24; }

.hs-band {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4ade80;
}

.hs-band-ok { color: #fbbf24; }
.hs-band-low { color: #f87171; }

.hs-reason {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
}

/* ─────────────────────────────────────────────────────────────────────────
   TOOLS GRID
   ───────────────────────────────────────────────────────────────────────── */
.tools {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: var(--space-20) var(--space-6);
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-8);
    background: var(--gradient-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-3xl);
    text-decoration: none;
    overflow: hidden;
    transition: all var(--duration-slow) var(--ease-default);
}

/* Cursor spotlight — --mx/--my set from JS, centered by default */
.tool-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(129, 140, 248, 0.14), transparent 65%);
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-default);
}

.tool-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 0 40px rgba(99, 102, 241, 0.12);
}

.tool-card:hover::before { opacity: 1; }

.tool-featured {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.13) 0%, rgba(236, 72, 153, 0.06) 45%, var(--bg-secondary) 75%);
    border-color: var(--border-default);
}

.tool-featured:hover { border-color: var(--border-accent); }

.tool-tag {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    padding: var(--space-1) var(--space-3);
    background: #4f46e5;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-bold);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.tool-icon {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
}

.ti-video { background: rgba(99, 102, 241, 0.16); color: #a5b4fc; }
.ti-meme { background: rgba(236, 72, 153, 0.16); color: #f9a8d4; }
.ti-image { background: rgba(6, 182, 212, 0.16); color: #67e8f9; }
.ti-chat { background: rgba(139, 92, 246, 0.16); color: #c4b5fd; }
.ti-gen { background: rgba(249, 115, 22, 0.16); color: #fdba74; }
.ti-photo { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }

.tool-title {
    position: relative;
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.tool-desc {
    position: relative;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
    flex: 1;
}

.tool-link {
    position: relative;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: #a5b4fc;
    transition: color var(--duration-fast) var(--ease-default);
}

.tool-card:hover .tool-link { color: var(--text-primary); }

/* ─────────────────────────────────────────────────────────────────────────
   PRICING BAND
   ───────────────────────────────────────────────────────────────────────── */
.pricing-band {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: var(--space-12) var(--space-6);
}

.pb-card {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-12);
    border: 1px solid transparent;
    border-radius: var(--radius-4xl);
    background:
        linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, var(--bg-secondary) 60%) padding-box,
        linear-gradient(120deg, rgba(129, 140, 248, 0.5), rgba(236, 72, 153, 0.35), rgba(6, 182, 212, 0.35)) border-box;
}

.pb-list {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.pb-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: var(--leading-snug);
}

.pb-list svg {
    color: var(--accent-green);
    flex-shrink: 0;
    margin-top: 3px;
}

.pb-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.pb-link {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--border-strong);
    transition: color var(--duration-fast);
}

.pb-link:hover { color: var(--text-primary); }

/* ─────────────────────────────────────────────────────────────────────────
   FINAL CTA
   ───────────────────────────────────────────────────────────────────────── */
.final-cta {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-20) var(--space-6) var(--space-24);
    text-align: center;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 620px;
    max-width: 90vw;
    height: 300px;
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.22) 0%, rgba(236, 72, 153, 0.1) 45%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

.final-title {
    position: relative;
    font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
    font-weight: var(--font-extrabold);
    letter-spacing: -0.035em;
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-10);
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────────────── */
.footer {
    position: relative;
    padding: var(--space-8) var(--space-6);
    border-top: 1px solid var(--border-subtle);
}

.footer-content {
    max-width: var(--max-content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-brand {
    font-size: var(--text-sm);
    color: var(--text-dim);
}

.footer-links {
    display: flex;
    gap: var(--space-6);
}

.footer-links a {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
}

.footer-links a:hover { color: var(--text-primary); }

/* ─────────────────────────────────────────────────────────────────────────
   FOCUS — branded ring on every interactive element
   ───────────────────────────────────────────────────────────────────────── */
:root { --focus-ring: 2px solid rgba(255, 255, 255, 0.7); }

.btn:focus-visible,
.tool-card:focus-visible,
.user-menu-btn:focus-visible,
.user-dropdown a:focus-visible,
.user-dropdown button:focus-visible,
.footer-links a:focus-visible,
.pb-link:focus-visible,
.logo:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────
   SCROLL REVEAL
   ───────────────────────────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}

.reveal.in {
    opacity: 1;
    transform: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .hero-copy { text-align: center; }

    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-cta, .hero-micro { justify-content: center; }

    .hookscore {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .hs-text { max-width: none; }

    .tools-grid { grid-template-columns: repeat(2, 1fr); }
    .tool-featured { grid-column: span 2; }

    .pb-card {
        grid-template-columns: 1fr;
        padding: var(--space-10) var(--space-8);
    }
}

@media (max-width: 768px) {
    .nav { display: none; }

    .hero { padding-top: var(--space-12); }

    .hero-title { font-size: clamp(2.2rem, 9vw, 3rem); }
    .hero-subtitle { font-size: var(--text-base); }

    .btn-xl { padding: var(--space-3) var(--space-6); }

    .phone { width: 240px; }

    .side-clip { display: none; }

    .fc-music { left: 0; }
    .fc-crop { right: 0; }
    .fc-broll { left: 0; }

    .float-chip { font-size: 11px; padding: 7px 11px; }

    .steps { grid-template-columns: 1fr; }

    .tools-grid { grid-template-columns: 1fr; }
    .tool-featured { grid-column: span 1; }

    .pb-card { padding: var(--space-8) var(--space-6); }

    .footer-content {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }
}

@media (max-width: 400px) {
    .phone { width: 210px; }
    .fc-crop { top: 42%; }
    .hero-micro { gap: var(--space-4); }
}

/* ─────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bg-orb,
    .bg-aurora,
    .phone,
    .phone-glow,
    .float-chip,
    .side-clip,
    .screen-sheen,
    .gradient-text,
    .badge-dot,
    .hero-badge,
    .hero-title,
    .hero-subtitle,
    .hero-cta,
    .hero-micro,
    .hero-visual,
    .btn-primary::after { animation: none; }

    .screen-sheen { display: none; }

    .wave i {
        animation: none;
        transform: scaleY(0.55);
    }

    /* Marquee stops and becomes a manually scrollable, fully visible list */
    .marquee {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
        scrollbar-width: thin;
    }

    .marquee-track {
        animation: none;
        width: max-content;
        will-change: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tool-card,
    .step,
    .step::after,
    .hs-card { transition: none; }
}

/* ── home-showcase.css ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   Zypherius home — showcase, cut demo, before/after
   Real output from the product: stills, generated clips, editor clips.
   Loaded after home.css, so it can lean on the same tokens and section rhythm.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   HERO — real clip inside the phone
   ───────────────────────────────────────────────────────────────────────── */
.phone-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0c0c16;
}

.phone-sound {
    position: absolute;
    right: 12px;
    bottom: 14px;
    z-index: 4;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(10, 10, 18, 0.62);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.phone-sound:hover { background: rgba(20, 20, 34, 0.86); transform: scale(1.06); }
.phone-sound .icon-on { display: none; }
.phone-sound.is-on .icon-on { display: block; }
.phone-sound.is-on .icon-off { display: none; }
.phone-sound.is-on { border-color: rgba(74, 222, 128, 0.55); color: #4ade80; }

/* Fanned clips beside the phone now carry real frames */
.side-clip img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.side-clip .sc-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 0, 20, 0) 45%, rgba(3, 0, 20, 0.72) 100%);
}

/* home.css colours the score by which side it sits on. These are real scores,
   so the colour follows the number instead of the position. */
.side-clip .sc-hook.is-high { color: #4ade80; }
.side-clip .sc-hook.is-mid { color: #fbbf24; }

/* ─────────────────────────────────────────────────────────────────────────
   SHOWCASE
   ───────────────────────────────────────────────────────────────────────── */
.showcase {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: var(--space-20) var(--space-6);
}

.sw-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.sw-head .section-sub { margin-bottom: 0; max-width: 56ch; }

.sw-count {
    font-size: var(--text-sm);
    color: var(--text-muted);
    white-space: nowrap;
    padding-bottom: 4px;
}

.sw-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.sw-pill {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: -0.01em;
    padding: 9px 16px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.sw-pill:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.sw-pill.is-on {
    background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

.sw-pill:active { transform: translateY(1px); }

.sw-grid {
    column-count: 4;
    column-gap: var(--space-4);
}

.sw-card {
    position: relative;
    display: block;
    break-inside: avoid;
    margin: 0 0 var(--space-4);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: #0d0b1a;
    cursor: zoom-in;
    transition: transform 0.28s var(--ease-smooth), border-color 0.28s ease, box-shadow 0.28s ease;
}

.sw-card img,
.sw-card video {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s var(--ease-smooth);
}

.sw-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}

.sw-card:hover img,
.sw-card:hover video { transform: scale(1.035); }

.sw-card:focus-visible {
    outline: 2px solid #a5b4fc;
    outline-offset: 3px;
}

.sw-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 34px 14px 12px;
    font-size: var(--text-xs);
    background: linear-gradient(180deg, rgba(3, 0, 20, 0) 0%, rgba(3, 0, 20, 0.86) 70%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    pointer-events: none;
}

.sw-card:hover .sw-meta,
.sw-card:focus-visible .sw-meta { opacity: 1; transform: translateY(0); }

.sw-cat { color: #fff; font-weight: var(--font-semibold); letter-spacing: -0.01em; }
.sw-model { color: var(--text-secondary); }

.sw-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radius-full);
    background: rgba(10, 10, 18, 0.66);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 11px;
    font-weight: var(--font-semibold);
    color: #fff;
    letter-spacing: 0.02em;
}

.sw-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.9);
}

.sw-card.is-hidden { display: none; }

.sw-foot {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-top: var(--space-8);
}

.sw-note {
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 62ch;
}

@media (max-width: 1100px) { .sw-grid { column-count: 3; } }
@media (max-width: 760px)  { .sw-grid { column-count: 2; } }
@media (max-width: 460px)  { .sw-grid { column-count: 1; } }

/* ─────────────────────────────────────────────────────────────────────────
   LIGHTBOX
   ───────────────────────────────────────────────────────────────────────── */
.lb {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    background: rgba(3, 0, 20, 0.9);
    backdrop-filter: blur(16px);
}

.lb.is-open { display: block; animation: lb-in 0.22s ease both; }

@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

.lb-backdrop { position: absolute; inset: 0; }

.lb-panel {
    position: relative;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-8);
    align-items: center;
    padding: 64px var(--space-6) var(--space-6);
}

.lb-media {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: calc(100vh - 128px);
}

.lb-media img,
.lb-media video {
    max-width: 100%;
    max-height: calc(100vh - 128px);
    width: auto;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
    background: #0d0b1a;
}

.lb-info {
    align-self: center;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
}

.lb-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-4);
}

.lb-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.lb-model {
    font-size: var(--text-xs);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #c7d2fe;
    white-space: nowrap;
}

.lb-prompt-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.lb-prompt {
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: var(--space-4);
    user-select: text;
}

.lb-copy {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.lb-copy:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); }
.lb-copy.is-done { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); }

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(10, 10, 18, 0.6);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
    z-index: 2;
}

.lb-nav:hover { background: rgba(30, 30, 52, 0.9); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

.lb-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(10, 10, 18, 0.6);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    z-index: 3;
    transition: background 0.18s ease;
}

.lb-close:hover { background: rgba(30, 30, 52, 0.9); }

.lb-count {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.lb-nav:focus-visible,
.lb-close:focus-visible,
.lb-copy:focus-visible,
.sw-pill:focus-visible,
.phone-sound:focus-visible,
.ba-range:focus-visible + .ba-handle {
    outline: 2px solid #a5b4fc;
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .lb-panel {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: var(--space-4);
        padding: 60px var(--space-4) var(--space-6);
        overflow-y: auto;
    }
    .lb-media,
    .lb-media img,
    .lb-media video { max-height: 52vh; }
    .lb-nav { top: auto; bottom: 18px; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   CUT DEMO — one take in, clips out
   ───────────────────────────────────────────────────────────────────────── */
.cut {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: var(--space-20) var(--space-6);
}

.cut-stage {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
    margin-top: var(--space-10);
}

.cut-source {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
}

.cut-source video,
.cut-source img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #0d0b1a;
}

.cut-source-body { padding: var(--space-4) var(--space-5) var(--space-5); }

.cut-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: var(--font-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.cut-source-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 6px;
}

.cut-source-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.6;
}

/* Clip pinned left, the verdict and the op list read down the right. */
.cut-out {
    display: grid;
    grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-7);
    align-items: start;
}

.cut-clips {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-5);
}

.cut-clip {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.28s var(--ease-smooth), border-color 0.28s ease;
}

.cut-clip:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.18); }

.cut-clip video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #0d0b1a;
    cursor: pointer;
    transition: filter 0.25s ease;
}

/* Clicking a clip holds it. Desaturating says so on its own; the play badge
   is the nicer version for browsers that can select on a child's state. */
.cut-clip video.is-held,
.phone-video.is-held { filter: saturate(0.5) brightness(0.62); }

.cut-clip:has(video.is-held)::after,
.phone-screen:has(.phone-video.is-held)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-38%, -50%);
    border-left: 20px solid rgba(255, 255, 255, 0.92);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
    pointer-events: none;
    z-index: 3;
}

.cut-score {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 11px;
    border-radius: var(--radius-full);
    background: rgba(10, 10, 18, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(74, 222, 128, 0.45);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.cut-score b {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: #4ade80;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.cut-score.is-mid { border-color: rgba(251, 191, 36, 0.45); }
.cut-score.is-mid b { color: #fbbf24; }

.cut-reason {
    grid-column: 2;
    grid-row: 1;
    padding: var(--space-4) var(--space-5);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--text-muted);
}

.cut-reason b {
    display: block;
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    margin-bottom: 4px;
}

.cut-ops {
    grid-column: 2;
    grid-row: 2;
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.cut-ops li {
    position: relative;
    padding-left: 26px;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Ticks are drawn, not typed, so they keep their weight at every size. */
.cut-ops li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 13px;
    height: 7px;
    border-left: 2px solid rgba(74, 222, 128, 0.85);
    border-bottom: 2px solid rgba(74, 222, 128, 0.85);
    border-radius: 1px;
    transform: rotate(-45deg);
}

@media (max-width: 1080px) {
    .cut-out { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); column-gap: var(--space-6); }
}

@media (max-width: 860px) {
    .cut-stage { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .cut-source { max-width: 320px; }
    .cut-out { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
    .cut-clips { grid-column: 1; grid-row: 1; max-width: 232px; }
    .cut-reason { grid-column: 1; grid-row: 2; margin-top: var(--space-6); }
    .cut-ops { grid-column: 1; grid-row: 3; }
}

/* ─────────────────────────────────────────────────────────────────────────
   BEFORE / AFTER
   ───────────────────────────────────────────────────────────────────────── */
.fixit {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: var(--space-20) var(--space-6);
}

.ba-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-10);
}

.ba-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
}

.ba {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.045) 25%, transparent 25%) -10px 0 / 20px 20px,
        linear-gradient(-45deg, rgba(255, 255, 255, 0.045) 25%, transparent 25%) -10px 0 / 20px 20px,
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.045) 75%) -10px 0 / 20px 20px,
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.045) 75%) -10px 0 / 20px 20px,
        #16132a;
    touch-action: pan-y;
}

.ba img {
    display: block;
    width: 100%;
    height: auto;
}

.ba-after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(0 0 0 var(--pos, 50%));
}

.ba-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    background: none;
}

.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.ba-range::-moz-range-thumb { width: 44px; height: 100%; border: none; background: transparent; }

.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos, 50%);
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.ba-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: rgba(10, 10, 18, 0.55);
    backdrop-filter: blur(6px);
}

.ba-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 9px;
    transform: translate(-50%, -50%);
    z-index: 1;
    background:
        linear-gradient(90deg, #fff 0 3px, transparent 3px 6px, #fff 6px 9px) no-repeat left center / 9px 9px;
    clip-path: polygon(0 50%, 35% 0, 35% 100%, 65% 0, 65% 100%, 100% 50%);
}

.ba-tag {
    position: absolute;
    bottom: 12px;
    padding: 5px 11px;
    border-radius: var(--radius-full);
    background: rgba(10, 10, 18, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 11px;
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    pointer-events: none;
}

.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; }

.ba-body { padding: var(--space-4) var(--space-5) var(--space-5); }

.ba-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 4px;
}

.ba-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.6;
}

.ba-model {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: rgba(99, 102, 241, 0.16);
    border: 1px solid rgba(99, 102, 241, 0.32);
    color: #c7d2fe;
}

/* ─────────────────────────────────────────────────────────────────────────
   MOTION OFF
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sw-card,
    .sw-card img,
    .sw-card video,
    .cut-clip,
    .lb.is-open { transition: none; animation: none; }
    .sw-card:hover { transform: none; }
    .sw-card:hover img,
    .sw-card:hover video { transform: none; }
    .cut-clip:hover { transform: none; }
    .sw-meta { opacity: 1; transform: none; }
}