/* ==========================================
   1. Theme System (Replicated from Tauri App)
   ========================================== */
:root {
    --bg-base: #050308;
    --bg-glow: #110a18;
    --glass-bg: rgba(15, 10, 25, 0.65);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
    
    --text-main: #f0e6ff;
    --text-muted: #a399b5;
    
    --primary-cyan: #00E5FF;
    --cyan-bg: rgba(0, 229, 255, 0.1);
    --cyan-bg-hover: rgba(0, 229, 255, 0.2);
    --cyan-shadow: rgba(0, 229, 255, 0.3);
    
    --primary-purple: #c084fc;
    --purple-bg-hover: rgba(192, 132, 252, 0.2);
    --primary-red: #FF5252;
    --gradient-accent: linear-gradient(135deg, #c084fc, #ec4899);
    
    --upload-zone-bg: rgba(0, 0, 0, 0.2);
    --tab-active-bg: var(--glass-border);
    --btn-hover-bg: rgba(255, 255, 255, 0.1);

    --gauge-placeholder: rgba(255, 255, 255, 0.2);
    --vbar-bg: rgba(255, 255, 255, 0.05);
    --vbar-center: rgba(255, 255, 255, 0.4);
    --vbar-tick: rgba(255, 255, 255, 0.2);
    --gauge-ring-empty: rgba(255, 255, 255, 0.05);
    --inner-shadow: rgba(0, 0, 0, 0.5);

    /* Promo site specific variables */
    --nav-bg: rgba(5, 3, 8, 0.75);
    --transition-speed: 0.3s;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Noto Sans SC", sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* Light Mode Override (Directly from Tauri style.css) */
:root[data-theme="light"] {
    --bg-base: #ffffff;
    --text-main: #050505;
    --text-muted: #334155;
    --glass-bg: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(0, 0, 0, 0.15);
    --btn-hover-bg: rgba(0, 0, 0, 0.05);

    --primary-cyan: #0369a1;
    --cyan-bg: rgba(3, 105, 161, 0.1);
    --cyan-bg-hover: rgba(3, 105, 161, 0.2);
    --cyan-shadow: rgba(3, 105, 161, 0.3);

    --primary-purple: #9333ea;
    --purple-bg-hover: rgba(147, 51, 234, 0.15);
    
    --upload-zone-bg: rgba(0, 0, 0, 0.03);
    --tab-active-bg: rgba(3, 105, 161, 0.08);
    --tab-pro-bg: rgba(147, 51, 234, 0.08);

    --gauge-placeholder: rgba(0, 0, 0, 0.25);
    --vbar-bg: rgba(0, 0, 0, 0.08);
    --vbar-center: rgba(0, 0, 0, 0.25);
    --vbar-tick: rgba(0, 0, 0, 0.15);
    --gauge-ring-empty: rgba(0, 0, 0, 0.05);
    --inner-shadow: rgba(0, 0, 0, 0.05);

    --nav-bg: rgba(255, 255, 255, 0.85);
}

/* ==========================================
   2. Global Resets & Shifting Backgrounds
   ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background-color: #0a0715;
}

body.promo-body {
    background-color: #0a0715;
    background-image: radial-gradient(circle at 50vw 50vh, #151025, #0a0715);
    font-family: var(--font-sans);
    color: var(--text-main);
    line-height: 1.6;
    font-size: clamp(16px, 1.1vw + 8px, 22px); /* Responsive base font */
    overflow-x: hidden;
    position: relative;
    transition: background 0.8s ease, color 0.5s ease;
}

body.promo-body::before {
    content: ""; 
    position: fixed; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(110, 90, 140, 0.12), transparent 60%),
        radial-gradient(circle at 70% 30%, rgba(70, 130, 150, 0.12), transparent 60%),
        radial-gradient(circle at 50% 70%, rgba(140, 80, 110, 0.12), transparent 60%);
    animation: colorShift 20s linear infinite; 
    pointer-events: none; 
    z-index: -2;
    transition: background-image 0.8s ease;
}

:root[data-theme="light"] html {
    background-color: #f1f5f9;
}

:root[data-theme="light"] body.promo-body {
    background-color: #f1f5f9;
    background-image: none;
}

:root[data-theme="light"] body.promo-body::before {
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(167, 139, 250, 0.35), transparent 60%),
        radial-gradient(circle at 70% 30%, rgba(94, 234, 212, 0.35), transparent 60%),
        radial-gradient(circle at 50% 70%, rgba(244, 114, 182, 0.35), transparent 60%);
}

@keyframes colorShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* --- Layout Utilities --- */
.container {
    width: 100%;
    max-width: clamp(1200px, 85vw, 2400px); /* Fill ultra-wide screens */
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 80px);
}

.section-padding {
    padding: clamp(60px, 8vh, 120px) 0;
    min-height: 100vh; /* Fill entire viewport */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

.font-mono {
    font-family: var(--font-mono) !important;
}

.flex { display: flex; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.ml-auto { margin-left: auto; }
.ml-6 { margin-left: 6px; }
.ml-12 { margin-left: 12px; }
.pl-12 { padding-left: 12px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-20 { margin-top: 20px; }
.mb-16 { margin-bottom: 16px; }
.hidden { display: none !important; }

.gradient-text {
    background: linear-gradient(135deg, var(--primary-purple), #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================
   3. Glassmorphism Design (LGGC App Spec)
   ========================================== */
.glass-panel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(35px) saturate(160%) brightness(105%);
    -webkit-backdrop-filter: blur(35px) saturate(160%) brightness(105%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    box-shadow:
        inset 1.5px -1.5px 1px -1px rgba(255, 255, 255, 0.25),
        inset -1.5px 1.5px 1px -1px rgba(255, 255, 255, 0.35),
        inset 0 0 12px rgba(0, 0, 0, 0.5),
        0 16px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    position: relative;
    isolation: isolate;
}

.glass-panel::before {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 2px solid rgba(0, 0, 0, 0.8);
    filter: blur(12px);
    z-index: -1;
}

/* Radial Light Mouse Follower border shine */
.glass-panel::after {
    content: "";
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
        600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px),
        rgba(255, 255, 255, 0.4),
        transparent 50%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 10;
}

/* Light mode glass panel overrides */
:root[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    box-shadow:
        inset 1.5px -1.5px 1px -1px rgba(255, 255, 255, 0.92),
        inset -1.5px 1.5px 1px -1px rgba(255, 255, 255, 0.9),
        0 16px 32px rgba(15, 23, 42, 0.08);
}

:root[data-theme="light"] .glass-panel::before {
    border: 2px solid rgba(255, 255, 255, 0.8);
    filter: blur(12px);
}

:root[data-theme="light"] .glass-panel::after {
    background: radial-gradient(
        600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px),
        rgba(0, 0, 0, 0.15),
        transparent 50%
    );
}

/* ==========================================
   4. Buttons & Tabs Styling (Tauri Match)
   ========================================== */
button, .btn-link {
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 8px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

button:active {
    transform: scale(0.96);
}

.btn-primary, .btn-cyan, .btn-ghost, .btn-danger, .btn-tab {
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    position: relative;
    isolation: isolate;
}

.btn-primary::before, .btn-cyan::before, .btn-ghost::before, .btn-danger::before, .btn-tab::before {
    content: ""; position: absolute; pointer-events: none; border-radius: inherit;
    top: 4px; left: 4px; right: 4px; bottom: 4px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    filter: blur(4px); z-index: -1;
}

.btn-primary::after, .btn-cyan::after, .btn-ghost::after, .btn-danger::after, .btn-tab::after {
    content: ""; position: absolute; pointer-events: none; border-radius: inherit;
    inset: 0;
    box-shadow: 
        inset 1px -1px 1px -1px rgba(255, 255, 255, 0.25),
        inset -1px 1px 1px -1px rgba(255, 255, 255, 0.35);
    z-index: 1;
}

/* Light mode button shadow helpers */
:root[data-theme="light"] .btn-primary::before,
:root[data-theme="light"] .btn-cyan::before,
:root[data-theme="light"] .btn-ghost::before,
:root[data-theme="light"] .btn-danger::before,
:root[data-theme="light"] .btn-tab::before {
    border: 2px solid rgba(255, 255, 255, 1);
    filter: blur(8px);
}
:root[data-theme="light"] .btn-primary::after,
:root[data-theme="light"] .btn-cyan::after,
:root[data-theme="light"] .btn-ghost::after,
:root[data-theme="light"] .btn-danger::after,
:root[data-theme="light"] .btn-tab::after {
    box-shadow: 
        inset 1.5px -1.5px 1px -1px rgba(255, 255, 255, 0.92),
        inset -1.5px 1.5px 1px -1px rgba(255, 255, 255, 0.9);
}

.btn-tab {
    background: transparent; border: 1px solid var(--glass-border); 
    color: var(--text-muted); padding: 10px 24px; border-radius: 8px; 
    cursor: pointer; font-weight: 600;
}
.btn-tab:hover { background: var(--btn-hover-bg); color: var(--text-main); }
.btn-tab.active {
    background: var(--tab-active-bg); color: var(--primary-cyan);
    border-color: var(--primary-cyan);
    box-shadow: 0 0 15px var(--cyan-shadow);
}
.btn-tab.active-pro {
    background: rgba(192, 132, 252, 0.1); color: var(--primary-purple);
    border-color: var(--primary-purple);
    box-shadow: 0 0 15px rgba(192, 132, 252, 0.2);
}

.btn-primary {
    background: var(--gradient-accent); color: white; border: none; 
    padding: 10px 24px; border-radius: 8px; cursor: pointer; font-weight: bold;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
}
.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.5);
    filter: brightness(1.1);
}

.btn-cyan {
    background: var(--cyan-bg); border: 1px solid var(--primary-cyan); 
    color: var(--primary-cyan); padding: 10px 24px; font-weight: 600;
}
.btn-cyan:hover {
    background: var(--cyan-bg-hover);
    box-shadow: 0 0 15px var(--cyan-shadow);
    color: #fff;
}

.btn-danger {
    background: rgba(255, 82, 82, 0.1); border: 1px solid var(--primary-red); 
    color: var(--primary-red); padding: 10px 24px; border-radius: 8px; cursor: pointer; font-weight: bold;
}
.btn-danger:hover {
    background: rgba(255, 82, 82, 0.2);
    box-shadow: 0 0 15px rgba(255, 82, 82, 0.3);
}

.btn-ghost {
    background: transparent; border: 1px solid var(--glass-border); 
    color: var(--text-muted); padding: 6px 14px; border-radius: 6px; 
}
.btn-ghost:hover { background: var(--btn-hover-bg); color: var(--text-main); }
.btn-ghost.active-mini {
    background: var(--cyan-bg);
    color: var(--primary-cyan);
    border-color: var(--primary-cyan);
}

/* ==========================================
   5. Header & Navigation Styles
   ========================================== */
.navbar {
    position: fixed;
    top: 0; left: 0; width: 100%; z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
    transition: background var(--transition-speed), border-color var(--transition-speed);
}

.nav-container {
    max-width: clamp(1200px, 90vw, 2400px);
    margin: 0 auto;
    padding: 16px clamp(24px, 3vw, 80px); /* Fixed vertical padding to prevent vh jumps on mobile */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-img {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.35));
}

.logo-text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-main);
}

.logo-text span {
    color: var(--primary-purple);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 500;
    font-size: 15px;
    opacity: 0.8;
    transition: opacity 0.25s, color 0.25s;
}

.nav-link:hover {
    opacity: 1;
    color: var(--primary-purple);
}

.nav-btn-download {
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 30px;
    background: var(--primary-purple);
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(192, 132, 252, 0.35);
}

.nav-btn-download:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 20px rgba(192, 132, 252, 0.5);
}

.theme-toggle-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed);
}

.theme-toggle-btn:hover {
    background: var(--btn-hover-bg);
    border-color: var(--primary-purple);
}

.theme-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

#iconSun { opacity: 0; transform: rotate(-90deg) scale(0); display: none;}
#iconMoon { opacity: 1; transform: rotate(0deg) scale(1); }

:root[data-theme="light"] #iconSun { opacity: 1; transform: rotate(0deg) scale(1); display: block;}
:root[data-theme="light"] #iconMoon { opacity: 0; transform: rotate(90deg) scale(0); display: none;}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    padding: 8px;
    margin-left: 12px;
}

@media (max-width: 768px) {
    .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
    
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--nav-bg);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        flex-direction: column;
        padding: 20px 0;
        border-bottom: 1px solid var(--glass-border);
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }
    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    .nav-menu a {
        padding: 15px 40px;
        width: 100%;
        text-align: center;
        border-radius: 0;
    }
    .nav-menu .nav-btn-download {
        margin: 15px auto;
        width: auto;
    }
}

/* ==========================================
   6. Hero & App Icon Animations
   ========================================== */
.hero-section {
    padding: clamp(80px, 10vh, 150px) 0 0 0;
    min-height: 100vh; /* Fill entire viewport */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-container {
    max-width: clamp(1200px, 90vw, 2400px);
    margin: 0 auto;
    padding: 0 clamp(24px, 3vw, 80px);
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(40px, 5vw, 100px);
    align-items: center;
}

@media (max-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }
}

.hero-content {
    display: flex;
    flex-direction: column;
}

.hero-badge {
    align-self: flex-start;
    padding: 6px 14px;
    background: rgba(192, 132, 252, 0.1);
    border: 1px solid var(--primary-purple);
    color: var(--primary-purple);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

@media (max-width: 992px) {
    .hero-badge {
        align-self: center;
    }
}

.hero-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-subtitle {
    font-size: 17px;
    color: var(--text-muted);
    margin-bottom: 32px;
    max-width: 580px;
    line-height: 1.7;
}

@media (max-width: 992px) {
    .hero-subtitle {
        margin: 0 auto 32px auto;
    }
}

.hero-cta-group {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

@media (max-width: 600px) {
    .hero-cta-group {
        flex-direction: column;
    }
}

.cta-primary {
    padding: 14px 28px;
    background: var(--primary-purple);
    color: #ffffff;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 6px 20px rgba(192, 132, 252, 0.35);
}

.cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(192, 132, 252, 0.55);
}

.cta-secondary {
    padding: 14px 28px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
}

.cta-secondary:hover {
    background: var(--btn-hover-bg);
    border-color: rgba(255,255,255,0.15);
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 992px) {
    .hero-meta {
        justify-content: center;
    }
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-cyan);
    animation: pulse 1.8s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(0, 229, 255, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}

.hero-image-wrapper {
    display: flex;
    justify-content: center;
}

.logo-3d-card {
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    animation: float-3d 6s ease-in-out infinite;
}

.hero-app-logo {
    width: 200px;
    height: 200px;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 20px rgba(192, 132, 252, 0.3));
}

@keyframes float-3d {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* ==========================================
   7. Highlights / Features Grid
   ========================================== */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-size: clamp(34px, 3vw + 10px, 60px);
    font-weight: 800;
    margin-bottom: clamp(12px, 2vw, 30px);
}

.section-subtitle {
    color: var(--text-muted);
    font-size: clamp(16px, 1.2vw + 5px, 24px);
    max-width: clamp(600px, 50vw, 1200px);
    margin: 0 auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(320px, 25vw, 500px), 1fr));
    gap: clamp(24px, 3vw, 60px);
}

.feature-card {
    padding: 30px;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 25px rgba(192, 132, 252, 0.08);
}

.feature-icon {
    font-size: 28px;
    margin-bottom: 16px;
}

.feature-name {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-main);
}

.feature-desc {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ==========================================
   8. Workstation Simulator (Replicated Tauri App)
   ========================================== */
.bg-simulator-zone {
    background: rgba(255, 255, 255, 0.02); /* Brightened from black */
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

:root[data-theme="light"] .bg-simulator-zone {
    background: rgba(0, 0, 0, 0.03);
}

/* Tauri App Layout Wrapper */
.tauri-app-mockup {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

/* Mobile Simulator Fallback UI */
.mobile-simulator-fallback {
    display: none;
    text-align: center;
    padding: clamp(40px, 6vw, 80px) 20px;
    margin: 40px auto;
    max-width: 600px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
}

.mobile-simulator-fallback h3 {
    font-size: clamp(20px, 2vw, 28px);
    margin-bottom: 12px;
    color: var(--text-main);
    font-weight: bold;
}

.mobile-simulator-fallback p {
    font-size: clamp(14px, 1.2vw, 18px);
    color: var(--text-muted);
}

@media (max-width: 992px) {
    .tauri-app-mockup {
        display: none !important;
    }
    .mobile-simulator-fallback {
        display: block;
    }
}

/* Titlebar */
.mock-titlebar {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.mock-window-controls {
    display: flex;
    gap: 8px;
    margin-right: 20px;
}

.mock-title-text {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    flex-grow: 1;
    text-align: center;
}

.mock-top-version {
    background: rgba(192, 132, 252, 0.1);
    color: var(--primary-purple);
    border: 1px solid rgba(192, 132, 252, 0.3);
    font-size: 10px;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 700;
}

/* Top Navigation (Replicated .top-nav) */
.mock-top-nav {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(0,0,0,0.1);
    border-bottom: 1px solid var(--glass-border);
    align-items: center;
}

.mock-ws-status {
    font-size: 13px;
    font-weight: 600;
    color: #FF5252;
    margin-left: auto;
}

.active-engine {
    background: var(--cyan-bg) !important;
    border-color: var(--primary-cyan) !important;
    color: var(--primary-cyan) !important;
    box-shadow: 0 0 10px var(--cyan-shadow) !important;
}

/* Workspace main content */
.mock-workspace-body {
    min-height: 480px;
    background: rgba(5, 3, 8, 0.45);
    display: flex;
}

.sim-workspace {
    width: 100%;
    padding: 20px;
    display: flex;
    box-sizing: border-box;
}

.flex-layout-sim {
    display: flex;
    gap: 20px;
    width: 100%;
}

.sim-left-panel {
    flex: 1.6;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sim-canvas-container {
    flex: 1;
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

#simPitchCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.sim-record-control-bar {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    height: 52px;
    border-top: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 8px 8px;
    gap: 12px;
}

.sim-vertical-divider {
    width: 1px;
    height: 20px;
    background: var(--glass-border);
}

.sim-playback-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.sim-range-slider {
    -webkit-appearance: none;
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.1);
    outline: none;
    border-radius: 2px;
}
.sim-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: var(--primary-cyan);
    border-radius: 50%;
    cursor: pointer;
}

.recording-dot-pulsate {
    color: #FF5252;
    font-weight: 700;
    font-size: 13px;
    animation: blink-soft 1.5s infinite;
}

@keyframes blink-soft {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Right Dashboard Styles (.dashboard) */
.sim-dashboard {
    flex: 1;
    min-width: 320px;
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-content: start;
    box-sizing: border-box;
}

.dashboard-title {
    grid-column: span 2;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.gauge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
}

.gauge-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.gauge-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.gauge-card.card-large {
    grid-column: span 2;
    padding: 16px;
}

#valPitch {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-main);
    text-shadow: 0 0 15px var(--cyan-shadow);
}

.gauge-card.card-medium {
    grid-column: span 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding: 16px 20px;
}

.cents-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#valDev {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-cyan);
}

/* Dev Vertical Bar */
.v-bar-container {
    width: 14px;
    background: var(--vbar-bg);
    border-radius: 8px;
    position: relative;
    margin-left: 20px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
}

.v-bar-axis {
    position: absolute;
    left: -24px;
    top: 2px;
    bottom: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 8px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-align: right;
    line-height: 1;
}

.v-bar-ticks {
    position: absolute;
    left: -4px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, transparent, transparent 15%, var(--vbar-tick) 15%, var(--vbar-tick) 20%);
}

.v-bar-center-line {
    position: absolute;
    top: 50%;
    left: -5px;
    right: -5px;
    height: 1.5px;
    background: var(--vbar-center);
    transform: translateY(-50%);
    z-index: 2;
}

.v-bar-fill {
    position: absolute;
    left: 0;
    right: 0;
    height: 0%;
    background: var(--primary-cyan);
    border-radius: 8px;
    transition: height 0.2s ease, top 0.2s, bottom 0.2s;
    z-index: 1;
}

.gauge-wrapper {
    position: relative;
    width: 58px;
    height: 58px;
    margin-bottom: 4px;
}

.gauge-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(var(--primary-purple) var(--p, 75%), var(--gauge-ring-empty) var(--p, 75%), var(--gauge-ring-empty) 100%);
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.2);
}

.gauge-inner {
    position: absolute;
    width: 48px;
    height: 48px;
    top: 5px;
    left: 5px;
    background-color: #0d0b1d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    z-index: 2;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}

:root[data-theme="light"] .gauge-inner {
    background-color: #ffffff;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

.gauge-card.card-small {
    grid-column: span 1;
}

/* ==========================================
   9. Pro tab panels inside Mockup
   ========================================== */
.pro-sub-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    width: 100%;
}

.sim-sub-content {
    width: 100%;
    height: 100%;
    animation: fade-in-sim 0.4s ease forwards;
}

@keyframes fade-in-sim {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.sim-state-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 380px;
    padding: 24px;
}

.sim-state-desc {
    color: var(--text-muted);
    font-size: 13.5px;
    max-width: 450px;
    line-height: 1.5;
    margin-top: 10px;
}

.recording-pulsate-dot {
    width: 18px;
    height: 18px;
    background-color: #FF5252;
    border-radius: 50%;
    animation: pulse-recording 1.2s infinite ease-in-out;
    margin-bottom: 16px;
}

@keyframes pulse-recording {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

.sim-state-box-report {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Footer Container to match new layout width */
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1500px; /* Widened to utilize side space */
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.report-header h3 {
    font-size: 15px;
    color: var(--text-main);
}

.report-body-layout {
    display: flex;
    padding: 16px;
    gap: 20px;
}

.report-radar-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.report-presets-row {
    display: flex;
    gap: 6px;
}

.sim-radar-svg {
    width: 170px;
    height: 170px;
}

.radar-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 0.5px;
}
:root[data-theme="light"] .radar-ring {
    stroke: rgba(0, 0, 0, 0.08);
}

.radar-text-val {
    fill: var(--text-muted);
    font-size: 4px;
    font-weight: 600;
}

.radar-value-poly-sim {
    fill: rgba(192, 132, 252, 0.2);
    stroke: var(--primary-purple);
    stroke-width: 1px;
    transition: points 0.5s ease-in-out;
}

.report-text-side {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-text-side h4 {
    font-size: 15px;
    color: var(--text-main);
}

.sim-report-scores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.sim-score-badge {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 6px;
    text-align: center;
}

.sim-score-badge span {
    display: block;
}

.sim-score-badge .s-lbl {
    font-size: 9px;
    color: var(--text-muted);
}

.sim-score-badge .s-vl {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-purple);
}

.sim-report-desc-box {
    background: rgba(0,0,0,0.1);
    border-radius: 6px;
    padding: 12px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    border: 1px dashed var(--glass-border);
}

/* SUB TAB B: Training styles */
.sim-scroll-view {
    width: 100%;
    box-sizing: border-box;
}

.sim-sub-title {
    font-size: 15px;
    color: var(--text-main);
}

.sim-sub-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.sim-range-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.range-card {
    padding: 16px;
    text-align: center;
    cursor: pointer;
    border-color: transparent;
    background: rgba(255, 255, 255, 0.02);
}
.range-card:hover {
    border-color: var(--glass-border-hover);
    background: rgba(255, 255, 255, 0.05);
}
.range-card.active {
    border-color: var(--primary-cyan) !important;
    background: rgba(0, 229, 255, 0.08) !important;
}

.range-card .r-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}
.range-card .r-notes {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.sim-levels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.level-card-lg {
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
}
.level-card-lg:hover {
    border-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

.level-card-lg .level-title {
    font-size: 13px;
    font-weight: 700;
    margin-top: 6px;
    color: var(--text-main);
}
.level-card-lg .level-subtitle {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Training session simulation view */
.sim-session-layout {
    display: flex;
    gap: 16px;
    width: 100%;
}

.session-game-panel {
    flex: 1.5;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.session-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-main);
}

.score-bar-wrapper {
    width: 90px;
    height: 6px;
    background: var(--vbar-bg);
    border-radius: 4px;
    overflow: hidden;
}

.session-toggles-row {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.toggle-switch-sim {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
}
.toggle-switch-sim input {
    display: none;
}
.toggle-slider {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 14px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 10px;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s;
}
.toggle-switch-sim input:checked + .toggle-slider {
    background-color: var(--primary-cyan);
}
.toggle-switch-sim input:checked + .toggle-slider::before {
    transform: translateX(12px);
}

.sim-canvas-container-large {
    background: #000000;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    height: 240px;
}

#simTrainingCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.sim-training-overlay {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    border: 1px solid var(--primary-cyan);
    border-radius: 20px;
    padding: 4px 16px;
    color: var(--primary-cyan);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 0 10px var(--cyan-shadow);
    pointer-events: none;
}

.session-dashboard-panel {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}

.card-large-mini {
    width: 100%;
    padding: 10px;
}
.card-large-mini #simTrainValPitch {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-cyan);
}

.card-medium-mini {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 14px;
}

.cents-left-mini #simTrainValDev {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-cyan);
}

.v-bar-container.mini-bar {
    width: 10px;
    height: 60px;
}
.v-bar-axis.mini-axis {
    left: -16px;
    font-size: 7px;
}

.sim-gauges-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.card-mini {
    padding: 6px 2px;
    text-align: center;
}
.card-mini .gauge-title {
    font-size: 8px;
    margin-bottom: 2px;
}
.mini-circle-val {
    font-size: 11px;
    font-weight: bold;
    color: var(--text-main);
    font-family: var(--font-mono);
}

/* SUB TAB C: Separation Styles */
.sim-device-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    margin-bottom: 12px;
}

.device-tip {
    font-size: 11px;
    opacity: 0.8;
}

.sim-sep-panels {
    display: flex;
    gap: 16px;
    height: calc(100% - 40px);
}

.sep-panel-col {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.sep-header-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sep-header-row h4 {
    font-size: 14px;
    color: var(--text-main);
}

.sep-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.sep-upload-zone {
    border: 1px dashed var(--glass-border);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    background: var(--upload-zone-bg);
    transition: all 0.2s;
    position: relative;
}
.sep-upload-zone:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255,255,255,0.15);
}

.sep-upload-zone .upload-title {
    font-size: 13px;
    font-weight: 700;
    margin-top: 4px;
    color: var(--text-main);
}
.sep-upload-zone .upload-formats {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
}

.model-info {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

.sep-processing {
    text-align: center;
    padding: 20px;
}

.circle-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--glass-border);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 12px;
}
.spinner-cyan { border-top-color: var(--primary-cyan); box-shadow: 0 0 8px var(--cyan-shadow); }
.spinner-purple { border-top-color: var(--primary-purple); box-shadow: 0 0 8px rgba(192, 132, 252, 0.3); }

@keyframes spin { 100% { transform: rotate(360deg); } }

.proc-title {
    font-size: 13px;
    font-weight: 700;
}
.proc-title.text-cyan { color: var(--primary-cyan); }
.proc-title.text-purple { color: var(--primary-purple); }

.proc-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.sep-results {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.success-label {
    color: #00E676;
    font-size: 13px;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 700;
}

.stems-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    max-height: 180px;
    padding-right: 4px;
}

.stem-result-row {
    display: flex;
    align-items: center;
    background: var(--upload-zone-bg);
    border: 1px solid var(--glass-border);
    padding: 8px 10px;
    border-radius: 6px;
    border-left-width: 4px;
}

.stem-result-row span {
    font-size: 12.5px;
    font-weight: bold;
    color: var(--text-main);
    flex-grow: 1;
}

.visual-blender-box {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.waveform-mini-display {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 6px 10px;
}
.wave-tag {
    font-size: 9px;
    color: var(--primary-cyan);
    font-weight: 700;
    margin-bottom: 4px;
}
.wave-visualizer {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 40px;
}

.blender-slider-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-muted);
    gap: 6px;
}

/* ==========================================
   10. Dynamic Pricing Section
   ========================================== */
.pricing-container {
    max-width: clamp(800px, 60vw, 1400px);
    margin: 0 auto;
    padding: clamp(30px, 4vw, 80px);
    border-color: rgba(192, 132, 252, 0.15);
    box-shadow: 0 16px 48px rgba(192, 132, 252, 0.04);
}

.pricing-intro {
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.crown-svg {
    filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.45));
    margin-bottom: 14px;
}

.pricing-intro h3 {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-main);
}

.pricing-intro p {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 6px;
}

.pricing-cards-row {
    display: flex;
    gap: 20px;
    justify-content: center;
}

@media (max-width: 680px) {
    .pricing-cards-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.pricing-card-small {
    flex: 1;
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}
.pricing-card-small:hover {
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.pricing-card-small.recommended-plan {
    border-color: rgba(192, 132, 252, 0.25);
    box-shadow: inset 0 0 15px rgba(192, 132, 252, 0.05);
}

.plan-tag-recom {
    position: absolute;
    top: -10px;
    right: 20px;
    background: linear-gradient(135deg, var(--primary-purple), #ec4899);
    color: #ffffff;
    font-size: clamp(10px, 0.8vw, 16px);
    font-weight: 700;
    padding: clamp(2px, 0.3vw, 6px) clamp(8px, 1vw, 16px);
    border-radius: 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(192,132,252,0.3);
}

.p-card-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p-plan-name {
    font-size: clamp(15px, 1.2vw, 24px);
    font-weight: bold;
    color: var(--text-main);
}

.p-plan-price {
    font-size: clamp(28px, 2.5vw, 48px);
    font-weight: 800;
    color: var(--text-main);
}
.p-price-unit {
    font-size: clamp(13px, 1vw, 20px);
    font-weight: normal;
    color: var(--text-muted);
}

.p-features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vw, 16px);
    font-size: clamp(12px, 1.1vw, 20px);
    color: var(--text-muted);
}

.p-check-icon {
    color: var(--primary-cyan);
    font-weight: bold;
    margin-right: 6px;
}

.pricing-tips-footer {
    margin-top: 30px;
    border-top: 1px dashed var(--glass-border);
    padding-top: 16px;
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 12px;
}

.tip-badge {
    background: rgba(0, 229, 255, 0.1);
    color: var(--primary-cyan);
    border: 1px solid rgba(0, 229, 255, 0.3);
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    white-space: nowrap;
}

/* ==========================================
   11. FAQ & Accordion Styles
   ========================================== */
.faq-accordion-group {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    overflow: hidden;
}

.faq-trigger {
    width: 100%;
    padding: 16px 24px;
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-icon {
    font-size: 18px;
    color: var(--primary-purple);
    transition: transform 0.25s;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), padding 0.35s;
    padding: 0 24px;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.faq-item.active .faq-content {
    max-height: 160px;
    padding-bottom: 16px;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

/* ==========================================
   12. Download Area & Footer
   ========================================== */
.bg-download-zone {
    position: relative;
}

.download-card {
    max-width: 800px;
    margin: 0 auto;
    padding: 50px 30px;
    border-color: var(--glass-border);
}

.download-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-accent);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    box-shadow: 0 3px 8px rgba(192, 132, 252, 0.3);
}

.download-card h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 10px;
}

.download-desc {
    color: var(--text-muted);
    font-size: 15px;
    max-width: 540px;
    margin: 0 auto 30px auto;
}

.download-action-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.download-primary-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    width: 100%;
}

@media (max-width: 600px) {
    .download-primary-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

.download-btn-main {
    text-decoration: none;
    padding: 14px 30px;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-cyan));
    color: #121212;
    border-radius: 35px;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.25);
    border: none;
}

.download-btn-main:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 8px 25px rgba(0, 229, 255, 0.45);
}

.download-btn-sub {
    text-decoration: none;
    padding: 14px 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    border-radius: 35px;
    font-weight: 600;
    font-size: 14px;
}
.download-btn-sub:hover {
    background: var(--btn-hover-bg);
}

.alternative-link {
    text-decoration: none;
    color: var(--primary-cyan);
    font-weight: 600;
    font-size: 13.5px;
}
.alternative-link:hover {
    text-decoration: underline;
}

.download-notes {
    margin-top: 30px;
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.warning-text {
    color: var(--primary-red);
}

/* Footer styles */
.main-footer {
    background: rgba(5, 3, 8, 0.7);
    border-top: 1px solid var(--glass-border);
    padding: 50px 0 20px 0;
    color: var(--text-muted);
    font-size: 13.5px;
}

:root[data-theme="light"] .main-footer {
    background: rgba(240, 240, 245, 0.8);
}

.footer-container {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
    }
}

.footer-left {
    flex: 1.5;
    max-width: 440px;
}

.logo-img-footer {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 6px rgba(192,132,252,0.3));
    margin-right: 8px;
    vertical-align: middle;
}

.footer-left .logo {
    margin-bottom: 16px;
}

.footer-license-note {
    line-height: 1.6;
}

.footer-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
@media (max-width: 768px) {
    .footer-right {
        justify-content: flex-start;
    }
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links h4 {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}

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

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding-top: 20px;
    font-size: 12px;
}
:root[data-theme="light"] .footer-bottom {
    border-top-color: rgba(0,0,0,0.05);
}

/* Toast Notification System */
.toast-container {
    position: fixed;
    top: 100px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.vocalmap-toast {
    width: 340px;
    padding: 16px;
    border-radius: 14px;
    cursor: pointer;
    background: rgba(15, 10, 25, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

.vocalmap-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.vocalmap-toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.vocalmap-toast-content {
    flex: 1;
}

.vocalmap-toast-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.vocalmap-toast-message {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Toast Color Variations */
.vocalmap-toast.warning {
    border-color: rgba(255, 145, 0, 0.4);
    box-shadow: 0 8px 25px rgba(255, 145, 0, 0.15), 0 0 1px rgba(255, 145, 0, 0.5);
}
.vocalmap-toast.warning .vocalmap-toast-icon {
    color: #FF9100;
}
.vocalmap-toast.error {
    border-color: rgba(255, 82, 82, 0.4);
    box-shadow: 0 8px 25px rgba(255, 82, 82, 0.15), 0 0 1px rgba(255, 82, 82, 0.5);
}
.vocalmap-toast.error .vocalmap-toast-icon {
    color: #FF5252;
}
.vocalmap-toast.success {
    border-color: rgba(0, 230, 118, 0.4);
    box-shadow: 0 8px 25px rgba(0, 230, 118, 0.15), 0 0 1px rgba(0, 230, 118, 0.5);
}
.vocalmap-toast.success .vocalmap-toast-icon {
    color: #00E676;
}
.vocalmap-toast.info {
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 8px 25px rgba(0, 229, 255, 0.15), 0 0 1px rgba(0, 229, 255, 0.5);
}
.vocalmap-toast.info .vocalmap-toast-icon {
    color: #00FFF5;
}

/* Light Theme overrides */
:root[data-theme="light"] .vocalmap-toast {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Workstation Mockup Light Mode Overrides */
:root[data-theme="light"] .tauri-app-mockup {
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.15) !important;
}

:root[data-theme="light"] .mock-titlebar {
    background: rgba(0, 0, 0, 0.04) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="light"] .mock-top-nav {
    background: rgba(0, 0, 0, 0.01) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="light"] .mock-workspace-body {
    background: rgba(255, 255, 255, 0.2) !important;
}

:root[data-theme="light"] .sim-canvas-container {
    background: rgba(0, 0, 0, 0.02) !important;
}

:root[data-theme="light"] .sim-record-control-bar {
    background: rgba(0, 0, 0, 0.03) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Custom Select Dropdowns */
.custom-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    border-radius: 6px;
    padding: 8px 12px;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s;
}
.custom-select:hover { border-color: var(--primary-cyan); }
.custom-select:focus { border-color: var(--primary-cyan); box-shadow: 0 0 10px var(--cyan-shadow); }
.custom-select option { background: #1a1a2e; color: #fff; }

:root[data-theme="light"] .custom-select { background: rgba(0,0,0,0.02); }
:root[data-theme="light"] .custom-select option { background: #fff; color: #333; }

/* ==========================================
   9. Advanced Animations & Overrides (VocalMap Web Redesign)
   ========================================== */

/* Page Loader */
.page-loader {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: var(--bg-base);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.page-loader.fade-out {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05);
}
.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.loader-logo-wrapper {
    position: relative;
    width: 80px; height: 80px;
}
.loader-logo {
    width: 100%; height: 100%;
    filter: drop-shadow(0 0 15px rgba(192, 132, 252, 0.6));
    animation: loader-pulse 2s infinite ease-in-out;
}
.loader-glow {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(192,132,252,0.4) 0%, transparent 70%);
    z-index: -1;
    animation: loader-glow-pulse 2s infinite ease-in-out;
}
.loader-wave-container {
    display: flex;
    gap: 6px;
    height: 30px;
    align-items: center;
}
.loader-wave-bar {
    width: 4px;
    height: 10px;
    background: var(--primary-cyan);
    border-radius: 2px;
    animation: wave-bar 1s infinite ease-in-out;
    box-shadow: 0 0 8px var(--primary-cyan);
}
.loader-text {
    color: var(--primary-purple);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: blink-soft 1.5s infinite;
}
@keyframes loader-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 25px rgba(192, 132, 252, 0.9)); }
}
@keyframes loader-glow-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}
@keyframes wave-bar {
    0%, 100% { height: 10px; }
    50% { height: 30px; background: var(--primary-purple); box-shadow: 0 0 12px var(--primary-purple); }
}

/* Scrolled Sticky Header */
.navbar.scrolled {
    padding: 6px 0;
    background: rgba(5, 3, 8, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}
:root[data-theme="light"] .navbar.scrolled {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Hero Wave Canvas Overlay */
.hero-section {
    position: relative;
    overflow: hidden;
}
.hero-wave-canvas {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 60%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.8;
}

/* Scroll Reveal Animations */
[data-reveal] {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-reveal="fade-up"] { transform: translateY(40px); }
[data-reveal="fade-down"] { transform: translateY(-40px); }
[data-reveal="fade-left"] { transform: translateX(40px); }
[data-reveal="fade-right"] { transform: translateX(-40px); }
[data-reveal="zoom-in"] { transform: scale(0.95) translateY(20px); }

[data-reveal].reveal-active {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* 3D Tilt Card Interactive Effect */
.tilt-card, .tilt-card-large {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    transform-style: preserve-3d;
}
.tilt-card:hover {
    z-index: 10;
    border-color: rgba(192, 132, 252, 0.3);
    box-shadow: 0 20px 40px rgba(192, 132, 252, 0.15), inset 0 0 20px rgba(192, 132, 252, 0.05);
}
.tilt-card-large:hover {
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 30px 60px rgba(0, 229, 255, 0.15), inset 0 0 30px rgba(0, 229, 255, 0.05);
}

/* Pricing Card Enhancements */
/* Removed rotating border per user request */
/* FAQ Accordion Transitions */
.faq-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease, padding 0.5s ease;
    padding-top: 0;
    padding-bottom: 0;
}
.faq-item.active .faq-content {
    max-height: 500px; /* Arbitrary large max-height */
    opacity: 1;
    padding-bottom: 20px;
}
.faq-icon {
    transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
    transform: rotate(45deg);
    color: var(--primary-cyan);
}

/* ==========================================
   11. Split Layout & Large Screen Background Decorations
   ========================================== */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 100px);
    align-items: center;
}

@media (max-width: 992px) {
    .split-layout {
        grid-template-columns: 1fr;
    }
}

#pricing, #features, #faq-download {
    position: relative;
}

#pricing::before, #features::before {
    content: "";
    position: absolute;
    top: 20%; left: 5%;
    width: clamp(300px, 40vw, 1000px);
    height: clamp(300px, 40vw, 1000px);
    background: radial-gradient(circle, var(--primary-purple), transparent 70%);
    opacity: 0.1;
    filter: blur(100px);
    z-index: -1;
    animation: orbFloat 15s infinite alternate ease-in-out;
    pointer-events: none;
}

#pricing::after, #features::after, #faq-download::after {
    content: "";
    position: absolute;
    bottom: 10%; right: 5%;
    width: clamp(400px, 50vw, 1200px);
    height: clamp(400px, 50vw, 1200px);
    background: radial-gradient(circle, var(--primary-cyan), transparent 70%);
    opacity: 0.08;
    filter: blur(120px);
    z-index: -1;
    animation: orbFloat 20s infinite alternate-reverse ease-in-out;
    pointer-events: none;
}

@keyframes orbFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, -100px) scale(1.1); }
}