/* SwiftCall Landing — dual theme (dark default, light override) */

/* ---- DARK THEME (default) ---- */
:root {
    --sc-bg: #0A0A0F;
    --sc-bg-rgb: 10 10 15;
    --sc-surface: #12121A;
    --sc-surface-rgb: 18 18 26;
    --sc-surface-2: #1A1A2E;
    --sc-surface-2-rgb: 26 26 46;
    --sc-accent: #6366F1;
    --sc-accent-rgb: 99 102 241;
    --sc-accent-hover: #818CF8;
    --sc-accent-glow: rgba(99,102,241,0.2);
    --sc-accent-surface: rgba(99,102,241,0.05);
    --sc-cyan: #22D3EE;
    --sc-cyan-rgb: 34 211 238;
    --sc-amber: #F59E0B;
    --sc-amber-rgb: 245 158 11;
    --sc-text: #F1F5F9;
    --sc-text-rgb: 241 245 249;
    --sc-text-2: #B0BFCF;
    --sc-text-2-rgb: 176 191 207;
    --sc-text-3: #7B8BA3;
    --sc-text-3-rgb: 123 139 163;
    --sc-border: #1E293B;
    --sc-border-rgb: 30 41 59;
    --sc-border-hover: #334155;
    --sc-success: #34D399;
    --sc-success-rgb: 52 211 153;
    --sc-violet: #8B5CF6;
    --sc-grid-line: rgba(255,255,255,0.06);
    --sc-grid-dot: rgba(255,255,255,0.12);
    --sc-orb-opacity: 0.15;
    --sc-nav-scrolled: rgba(10,10,15,0.85);
    --sc-menu-bg: rgba(10,10,15,0.98);
    --sc-modal-bg: rgba(0,0,0,0.7);
    --sc-shadow: rgba(0,0,0,0.3);
    --sc-shadow-sm: rgba(0,0,0,0.2);
    --sc-overlay-hover: rgba(255,255,255,0.05);
    --sc-card-shadow: 0 8px 32px rgba(99,102,241,0.15);
    --sc-btn-white: #fff;
}

/* ---- LIGHT THEME ---- */
[data-theme="light"] {
    --sc-bg: #F5F3FF;
    --sc-bg-rgb: 245 243 255;
    --sc-surface: #FFFFFF;
    --sc-surface-rgb: 255 255 255;
    --sc-surface-2: #EDE9FE;
    --sc-surface-2-rgb: 237 233 254;
    --sc-accent: #6366F1;
    --sc-accent-rgb: 99 102 241;
    --sc-accent-hover: #4F46E5;
    --sc-accent-glow: rgba(99,102,241,0.15);
    --sc-accent-surface: rgba(99,102,241,0.08);
    --sc-cyan: #0891B2;
    --sc-cyan-rgb: 8 145 178;
    --sc-amber: #D97706;
    --sc-amber-rgb: 217 119 6;
    --sc-text: #0F172A;
    --sc-text-rgb: 15 23 42;
    --sc-text-2: #475569;
    --sc-text-2-rgb: 71 85 105;
    --sc-text-3: #94A3B8;
    --sc-text-3-rgb: 148 163 184;
    --sc-border: #DDD6FE;
    --sc-border-rgb: 221 214 254;
    --sc-border-hover: #C4B5FD;
    --sc-success: #10B981;
    --sc-success-rgb: 16 185 129;
    --sc-violet: #7C3AED;
    --sc-grid-line: rgba(99,102,241,0.08);
    --sc-grid-dot: rgba(99,102,241,0.14);
    --sc-orb-opacity: 0.18;
    --sc-nav-scrolled: rgba(245,243,255,0.88);
    --sc-menu-bg: rgba(245,243,255,0.98);
    --sc-modal-bg: rgba(0,0,0,0.35);
    --sc-shadow: rgba(99,102,241,0.1);
    --sc-shadow-sm: rgba(99,102,241,0.06);
    --sc-overlay-hover: rgba(99,102,241,0.05);
    --sc-card-shadow: 0 8px 32px rgba(99,102,241,0.12);
    --sc-btn-white: #fff;
}

/* No-JS fallback */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --sc-bg: #F5F3FF; --sc-bg-rgb: 245 243 255;
        --sc-surface: #FFFFFF; --sc-surface-rgb: 255 255 255;
        --sc-surface-2: #EDE9FE; --sc-surface-2-rgb: 237 233 254;
        --sc-accent-hover: #4F46E5;
        --sc-accent-glow: rgba(99,102,241,0.15); --sc-accent-surface: rgba(99,102,241,0.08);
        --sc-cyan: #0891B2; --sc-cyan-rgb: 8 145 178;
        --sc-amber: #D97706; --sc-amber-rgb: 217 119 6;
        --sc-text: #0F172A; --sc-text-rgb: 15 23 42;
        --sc-text-2: #475569; --sc-text-2-rgb: 71 85 105;
        --sc-text-3: #94A3B8; --sc-text-3-rgb: 148 163 184;
        --sc-border: #E2E8F0; --sc-border-rgb: 226 232 240; --sc-border-hover: #CBD5E1;
        --sc-success: #10B981; --sc-success-rgb: 16 185 129; --sc-violet: #7C3AED;
        --sc-border: #DDD6FE; --sc-border-rgb: 221 214 254; --sc-border-hover: #C4B5FD;
        --sc-grid-line: rgba(99,102,241,0.08); --sc-grid-dot: rgba(99,102,241,0.14); --sc-orb-opacity: 0.18;
        --sc-nav-scrolled: rgba(245,243,255,0.88); --sc-menu-bg: rgba(245,243,255,0.98);
        --sc-modal-bg: rgba(0,0,0,0.35); --sc-shadow: rgba(99,102,241,0.1); --sc-shadow-sm: rgba(99,102,241,0.06);
        --sc-overlay-hover: rgba(99,102,241,0.05); --sc-card-shadow: 0 8px 32px rgba(99,102,241,0.12);
    }
}

/* ---- OPACITY UTILITIES ----
   Tailwind CDN var() colors don't support /opacity syntax.
   These use RGB triplets for alpha. */
.bg-sc-accent\/5  { background: rgb(var(--sc-accent-rgb) / 0.05); }
.bg-sc-accent\/10 { background: rgb(var(--sc-accent-rgb) / 0.1); }
.bg-sc-accent\/20 { background: rgb(var(--sc-accent-rgb) / 0.2); }
.bg-sc-accent\/30 { background: rgb(var(--sc-accent-rgb) / 0.3); }
.bg-sc-accent\/60 { background: rgb(var(--sc-accent-rgb) / 0.6); }
.bg-sc-cyan\/10   { background: rgb(var(--sc-cyan-rgb) / 0.1); }
.bg-sc-amber\/10  { background: rgb(var(--sc-amber-rgb) / 0.1); }
.bg-sc-success\/10{ background: rgb(var(--sc-success-rgb) / 0.1); }
.bg-sc-surface\/50{ background: rgb(var(--sc-surface-rgb) / 0.5); }
.bg-sc-surface\/80{ background: rgb(var(--sc-surface-rgb) / 0.8); }
.border-sc-accent\/15 { border-color: rgb(var(--sc-accent-rgb) / 0.15); }
.border-sc-accent\/20 { border-color: rgb(var(--sc-accent-rgb) / 0.2); }
.border-sc-accent\/30 { border-color: rgb(var(--sc-accent-rgb) / 0.3); }
.border-sc-border\/50 { border-color: rgb(var(--sc-border-rgb) / 0.5); }
.border-sc-border\/60 { border-color: rgb(var(--sc-border-rgb) / 0.6); }
.from-sc-accent { --tw-gradient-from: var(--sc-accent); --tw-gradient-to: rgb(var(--sc-accent-rgb) / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-sc-accent   { --tw-gradient-to: var(--sc-accent); }
.from-sc-cyan   { --tw-gradient-from: var(--sc-cyan); --tw-gradient-to: rgb(var(--sc-cyan-rgb) / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-sc-cyan     { --tw-gradient-to: var(--sc-cyan); }
.from-sc-accent\/5  { --tw-gradient-from: rgb(var(--sc-accent-rgb) / 0.05); --tw-gradient-to: rgb(var(--sc-accent-rgb) / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-sc-accent\/10 { --tw-gradient-from: rgb(var(--sc-accent-rgb) / 0.1); --tw-gradient-to: rgb(var(--sc-accent-rgb) / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-sc-accent\/30 { --tw-gradient-from: rgb(var(--sc-accent-rgb) / 0.3); --tw-gradient-to: rgb(var(--sc-accent-rgb) / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-sc-accent\/60   { --tw-gradient-to: rgb(var(--sc-accent-rgb) / 0.6); }
.from-sc-cyan\/5 { --tw-gradient-from: rgb(var(--sc-cyan-rgb) / 0.05); --tw-gradient-to: rgb(var(--sc-cyan-rgb) / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-sc-cyan\/5   { --tw-gradient-to: rgb(var(--sc-cyan-rgb) / 0.05); }

/* ---- BASE ---- */
body.landing {
    background: var(--sc-bg);
    color: var(--sc-text);
    overflow-x: hidden;
    transition: background 0.3s, color 0.3s;
}

/* ---- HERO ---- */
.hero-mesh {
    position: relative;
    background:
        radial-gradient(ellipse 80% 50% at 20% 50%, rgba(99,102,241,0.15) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139,92,246,0.12) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 60% 90%, rgba(99,102,241,0.08) 0%, transparent 50%),
        linear-gradient(160deg, var(--sc-bg) 0%, var(--sc-surface) 50%, var(--sc-bg) 100%);
}
.hero-mesh::before {
    content: ''; position: absolute; inset: -40px;
    background-image:
        linear-gradient(var(--sc-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--sc-grid-line) 1px, transparent 1px),
        radial-gradient(var(--sc-grid-dot) 1.5px, transparent 1.5px);
    background-size: 40px 40px, 40px 40px, 40px 40px;
    background-position: 0 0, 0 0, 20px 20px;
    animation: gridPulse 6s ease-in-out infinite, noiseShift 80s linear infinite;
    pointer-events: none; z-index: 1;
}
[data-theme="light"] .hero-mesh {
    background:
        radial-gradient(ellipse 80% 50% at 20% 50%, rgba(99,102,241,0.14) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139,92,246,0.12) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 60% 90%, rgba(99,102,241,0.08) 0%, transparent 50%),
        linear-gradient(160deg, #F5F3FF 0%, #EDE9FE 40%, #F5F3FF 100%);
}

.hero-orb {
    position: absolute; border-radius: 50%; filter: blur(80px);
    opacity: var(--sc-orb-opacity); pointer-events: none; z-index: 0;
}
.hero-orb-1 { width: 400px; height: 400px; background: var(--sc-accent); top: 10%; left: 15%; animation: floatOrb 16s ease-in-out infinite; }
.hero-orb-2 { width: 300px; height: 300px; background: var(--sc-violet); bottom: 20%; right: 10%; animation: floatOrb2 13s ease-in-out infinite; }
.hero-orb-3 { width: 200px; height: 200px; background: var(--sc-cyan); top: 60%; left: 50%; opacity: calc(var(--sc-orb-opacity) * 0.5); animation: floatOrb 20s ease-in-out infinite reverse; }

/* ---- HERO WAVEFORM — single bottom band, frequency animation ---- */
.hero-waveform {
    position: absolute; bottom: 0; left: 0; right: 0; height: 240px;
    pointer-events: none; z-index: 1; opacity: 0.45;
}
.hw-1 { opacity: 0.7;  animation: hwFreq1 4s ease-in-out infinite; }
.hw-2 { opacity: 0.5;  animation: hwFreq2 5s ease-in-out infinite; }
.hw-3 { opacity: 0.35; animation: hwFreq3 6s ease-in-out infinite; }
.hw-4 { opacity: 0.45; animation: hwFreq4 4.5s ease-in-out infinite; }
.hw-5 { opacity: 0.3;  animation: hwFreq5 5.5s ease-in-out infinite; }
.hw-6 { opacity: 0.25; animation: hwFreq6 7s ease-in-out infinite; }
.hw-7 { opacity: 0.2;  animation: hwFreq7 8s ease-in-out infinite; }
/* Each wave morphs its path like an audio frequency — tall amplitude */
@keyframes hwFreq1 {
    0%,100% { d: path("M0,120 C160,10 320,230 480,120 C640,10 800,230 960,120 C1120,10 1280,230 1400,120"); }
    50%     { d: path("M0,120 C160,60 320,180 480,120 C640,60 800,180 960,120 C1120,60 1280,180 1400,120"); }
}
@keyframes hwFreq2 {
    0%,100% { d: path("M0,120 C120,30 280,210 440,120 C600,30 760,210 920,120 C1080,30 1240,210 1400,120"); }
    33%     { d: path("M0,120 C120,0  280,240 440,120 C600,0  760,240 920,120 C1080,0  1240,240 1400,120"); }
    66%     { d: path("M0,120 C120,75 280,165 440,120 C600,75 760,165 920,120 C1080,75 1240,165 1400,120"); }
}
@keyframes hwFreq3 {
    0%,100% { d: path("M0,120 C200,45 350,195 500,120 C650,45 800,195 950,120 C1100,45 1250,195 1400,120"); }
    50%     { d: path("M0,120 C200,10 350,230 500,120 C650,10 800,230 950,120 C1100,10 1250,230 1400,120"); }
}
@keyframes hwFreq4 {
    0%,100% { d: path("M0,120 C100,50 250,190 400,120 C550,50 700,190 850,120 C1000,50 1150,190 1300,120 L1400,120"); }
    50%     { d: path("M0,120 C100,15 250,225 400,120 C550,15 700,225 850,120 C1000,15 1150,225 1300,120 L1400,120"); }
}
@keyframes hwFreq5 {
    0%,100% { d: path("M0,120 C180,185 320,55 460,120 C600,185 740,55 880,120 C1020,185 1160,55 1300,120 L1400,120"); }
    50%     { d: path("M0,120 C180,220 320,20 460,120 C600,220 740,20 880,120 C1020,220 1160,20 1300,120 L1400,120"); }
}
@keyframes hwFreq6 {
    0%,100% { d: path("M0,120 C140,25 300,215 460,120 C620,25 780,215 940,120 C1100,25 1260,215 1400,120"); }
    33%     { d: path("M0,120 C140,70 300,170 460,120 C620,70 780,170 940,120 C1100,70 1260,170 1400,120"); }
    66%     { d: path("M0,120 C140,5  300,235 460,120 C620,5  780,235 940,120 C1100,5  1260,235 1400,120"); }
}
@keyframes hwFreq7 {
    0%,100% { d: path("M0,120 C80,200 220,40 380,120 C540,200 680,40 840,120 C1000,200 1140,40 1300,120 L1400,120"); }
    50%     { d: path("M0,120 C80,230 220,10 380,120 C540,230 680,10 840,120 C1000,230 1140,10 1300,120 L1400,120"); }
}

/* ---- HERO PARTICLES ---- */
.hero-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero-particle {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: var(--sc-accent); opacity: 0;
    animation: heroParticleFloat 8s ease-in-out infinite;
}
.hero-particle:nth-child(even) { background: var(--sc-violet); width: 2px; height: 2px; }
.hero-particle:nth-child(3n) { background: var(--sc-cyan); }
@keyframes heroParticleFloat {
    0%   { opacity: 0; transform: translateY(0) scale(1); }
    15%  { opacity: 0.6; }
    50%  { opacity: 0.4; transform: translateY(-60px) scale(1.5); }
    85%  { opacity: 0.6; }
    100% { opacity: 0; transform: translateY(-120px) scale(0.5); }
}

/* ---- HERO PULSE DOT (badge) ---- */
.hero-pulse-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--sc-success);
    position: relative; flex-shrink: 0;
}
.hero-pulse-dot::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid var(--sc-success); opacity: 0;
    animation: heroPulseRing 2s ease-out infinite;
}
@keyframes heroPulseRing {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

/* ---- HERO LIVE DOT (trust line) ---- */
.hero-live-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--sc-success);
    animation: heroLiveBlink 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes heroLiveBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---- HERO GRADIENT TEXT SHIMMER ---- */
.hero-gradient-text {
    background-size: 200% auto;
    animation: heroGradientShift 4s ease-in-out infinite alternate;
}
@keyframes heroGradientShift {
    0% { background-position: 0% center; }
    100% { background-position: 100% center; }
}

/* ---- NAV ---- */
.nav-landing {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
    border-bottom: 1px solid transparent;
}
.nav-landing.scrolled {
    background: var(--sc-nav-scrolled);
    backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom-color: var(--sc-border);
}

/* ---- SCROLL REVEAL ---- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ---- CARDS ---- */
.card-dark { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: 16px; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, box-shadow 0.3s; }
.card-dark:hover { transform: translateY(-4px); border-color: var(--sc-accent); box-shadow: var(--sc-card-shadow); }

/* ---- BADGE ---- */
.badge-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 100px; background: var(--sc-accent-surface); border: 1px solid rgba(99,102,241,0.15); color: var(--sc-accent-hover); font-size: 0.875rem; font-weight: 500; }

/* ---- BUTTONS ---- */
.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 12px; background: var(--sc-accent); color: var(--sc-btn-white); font-weight: 600; font-size: 1rem; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; }
.btn-primary:hover { background: var(--sc-accent-hover); transform: translateY(-1px); box-shadow: 0 4px 24px var(--sc-accent-glow); }
.btn-primary::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); animation: shimmer 3s ease-in-out infinite; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 12px; border: 1px solid var(--sc-border); color: var(--sc-text-2); font-weight: 500; font-size: 1rem; transition: border-color 0.2s, color 0.2s, background 0.2s; background: transparent; }
.btn-ghost:hover { border-color: var(--sc-accent); color: var(--sc-text); background: var(--sc-accent-surface); }

.hover-overlay:hover { background: var(--sc-overlay-hover); }

/* ---- PRICING ---- */
.pricing-popular { border: 1px solid var(--sc-accent); box-shadow: 0 0 30px var(--sc-accent-glow), 0 8px 32px var(--sc-shadow); }
[data-theme="dark"] .pricing-popular, :root:not([data-theme]) .pricing-popular { background: linear-gradient(160deg, #141422 0%, #12121A 100%); }
[data-theme="light"] .pricing-popular { background: linear-gradient(160deg, #FFFFFF 0%, #EDE9FE 100%); }

/* ---- STATS BAND ---- */
.stats-band { border-top: 1px solid rgba(99,102,241,0.1); border-bottom: 1px solid rgba(99,102,241,0.1); }
[data-theme="dark"] .stats-band, :root:not([data-theme]) .stats-band { background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(139,92,246,0.1) 50%, rgba(34,211,238,0.08) 100%); }
[data-theme="light"] .stats-band { background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(139,92,246,0.08) 50%, rgba(34,211,238,0.05) 100%); }

/* ---- FAQ ---- */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), padding 0.3s; padding-top: 0; padding-bottom: 0; }
.faq-item.open .faq-answer { max-height: 300px; padding-top: 12px; padding-bottom: 4px; }
.faq-chevron { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* ---- TIMELINE ---- */
.wf-step-landing { position: relative; cursor: pointer; }
.wf-node-landing { position: relative; z-index: 2; box-shadow: 0 4px 16px var(--sc-shadow-sm); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, background 0.4s; }
/* Inactive: pale solid fill per theme */
[data-theme="dark"] .wf-node-landing, :root:not([data-theme]) .wf-node-landing { background: linear-gradient(135deg, #3B3D78, #4A3D85); }
[data-theme="light"] .wf-node-landing { background: linear-gradient(135deg, #A5A7F2, #B5A0F0); }
/* Active: full brand gradient */
.wf-step-landing.wf-active .wf-node-landing { background: linear-gradient(135deg, var(--sc-accent), var(--sc-violet)); box-shadow: 0 4px 24px rgba(99,102,241,0.35); animation: wfActiveGlow 3s ease-in-out infinite; }
@keyframes wfActiveGlow { 0% { box-shadow: 0 0 0 4px rgba(99,102,241,0.13), 0 0 20px 2px rgba(99,102,241,0.1); } 30% { box-shadow: 0 0 0 14px rgba(99,102,241,0.08), 0 0 30px 4px rgba(99,102,241,0.07); } 60% { box-shadow: 0 0 0 20px rgba(99,102,241,0.03), 0 0 40px 6px rgba(99,102,241,0.05); } 100% { box-shadow: 0 0 0 4px rgba(99,102,241,0.13), 0 0 20px 2px rgba(99,102,241,0.1); } }
.wf-node-landing span { animation: wfNumberPop 0.6s cubic-bezier(0.34,1.56,0.64,1) backwards; }
@keyframes wfNumberPop { 0% { transform: scale(0) rotate(-45deg); } 60% { transform: scale(1.15) rotate(3deg); } 100% { transform: scale(1) rotate(0deg); } }
.wf-step-landing h3 { transition: color 0.3s; }
.wf-step-landing.wf-active h3 { color: var(--sc-accent-hover); }
.wf-orbit { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.wf-orbit-dot { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: white; box-shadow: 0 0 8px 2px rgba(255,255,255,0.6); opacity: 0; transition: opacity 0.4s; animation: wfOrbit 2.5s linear infinite; animation-play-state: paused; }
.wf-step-landing.wf-active .wf-orbit-dot { opacity: 1; animation-play-state: running; }
@keyframes wfOrbit { 0% { transform: translate(calc(var(--orbit-r,38px)*1), 0); } 25% { transform: translate(0, calc(var(--orbit-r,38px)*1)); } 50% { transform: translate(calc(var(--orbit-r,38px)*-1), 0); } 75% { transform: translate(0, calc(var(--orbit-r,38px)*-1)); } 100% { transform: translate(calc(var(--orbit-r,38px)*1), 0); } }
.wf-ring { opacity: 0.15; transition: opacity 0.4s; animation: wfRingSpin 8s linear infinite; animation-play-state: paused; }
.wf-step-landing.wf-active .wf-ring { opacity: 0.7; animation-play-state: running; }
@keyframes wfRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.wf-step-landing .wf-card-landing { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.wf-step-landing.wf-active .wf-card-landing { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wf-rail-bg { position: relative; overflow: hidden; }
[data-theme="dark"] .wf-rail-bg, :root:not([data-theme]) .wf-rail-bg { background: linear-gradient(90deg, #1E1F3A, #2A2450, #1E1F3A); }
[data-theme="light"] .wf-rail-bg { background: linear-gradient(90deg, #D8D9F5, #D0C8F0, #D8D9F5); }
.wf-rail-bg::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 12px rgba(99,102,241,0.7); animation: wfDotTravel 3s ease-in-out infinite; }
@keyframes wfDotTravel { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.wf-rail-fill { background: linear-gradient(90deg, var(--sc-accent), var(--sc-violet)); box-shadow: 0 0 12px rgba(99,102,241,0.4); transition: right 0.6s cubic-bezier(0.16,1,0.3,1); }
.wf-rail-v-landing { background: linear-gradient(to bottom, var(--sc-accent), var(--sc-violet)); box-shadow: 0 0 8px rgba(99,102,241,0.3); position: relative; overflow: hidden; }
.wf-rail-v-landing::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 12px rgba(99,102,241,0.7); animation: wfDotTravelV 3s ease-in-out infinite; }
@keyframes wfDotTravelV { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ---- MODAL ---- */
.modal-backdrop { position: fixed; inset: 0; z-index: 200; background: var(--sc-modal-bg); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal-card { position: fixed; z-index: 201; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95) translateY(16px); width: 90%; max-width: 520px; max-height: 90vh; overflow-y: auto; background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: 20px; padding: 32px; box-shadow: 0 24px 64px var(--sc-shadow); opacity: 0; pointer-events: none; transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1), transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.modal-backdrop.open + .modal-card, .modal-card.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1) translateY(0); }
.form-input { width: 100%; padding: 12px 16px; border-radius: 10px; background: var(--sc-bg); border: 1px solid var(--sc-border); color: var(--sc-text); font-size: 0.875rem; transition: border-color 0.2s, box-shadow 0.2s; outline: none; }
.form-input:focus { border-color: var(--sc-accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.form-input::placeholder { color: var(--sc-text-3); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* ---- MOBILE MENU ---- */
.mobile-menu { position: fixed; inset: 0; z-index: 100; background: var(--sc-menu-bg); backdrop-filter: blur(24px); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.mobile-menu.open { opacity: 1; pointer-events: auto; }

/* ---- MISC ---- */
.testimonial-scroll { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.testimonial-scroll::-webkit-scrollbar { display: none; }
.testimonial-card-wrap { scroll-snap-align: start; flex-shrink: 0; }
.section-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--sc-border), transparent); }
.theme-toggle { padding: 6px; border-radius: 8px; cursor: pointer; color: var(--sc-text-2); transition: color 0.2s, background 0.2s; background: transparent; border: none; display: flex; align-items: center; }
.theme-toggle:hover { color: var(--sc-text); background: var(--sc-overlay-hover); }

/* ---- KEYFRAMES ---- */
@keyframes shimmer { 0%, 100% { left: -100%; } 50% { left: 100%; } }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-orb, .hero-wave, .hero-particle, .hero-pulse-dot::after,
    .hero-live-dot, .hero-gradient-text { animation: none; }
    .hero-mesh::before { animation: none; }
    .btn-primary::after { animation: none; }
    .faq-answer { transition: none; }
    body.landing { transition: none; }
    .hero-particle { opacity: 0.3; }
    .hero-live-dot { opacity: 1; }
}
@media (max-width: 768px) {
    .hero-orb-1 { width: 250px; height: 250px; filter: blur(60px); }
    .hero-orb-2 { width: 180px; height: 180px; filter: blur(50px); }
    .hero-orb-3 { display: none; }
}