/* --- IMPORT BACKGROUND SHADER STYLES --- */
        @import url('background-shader.css');

        /* --- IMPORT RISKS SECTION STYLES --- */
        @import url('risks-section.css');

        /* --- CSS VARIABLES --- */
        :root {
            --accent: #3b82f6; /* Electric Blue */
            --text-primary: #ffffff;
            --text-secondary: rgba(255, 255, 255, 0.6);
            --font-display: 'Space Grotesk', 'Inter', sans-serif;
            --font-mono: 'JetBrains Mono', 'Fira Code', 'Roboto Mono', monospace;
        }

        /* --- GLOBAL RESET & SCROLL SNAP ARCHITECTURE --- */
        * { box-sizing: border-box; margin: 0; padding: 0; }

        /* --- TYPOGRAPHY UTILITIES --- */
        .text-gradient {
            background: linear-gradient(180deg, #FFFFFF 0%, #A5B4FC 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .font-mono {
            font-family: var(--font-mono);
            letter-spacing: -0.02em;
        }

        .font-display {
            font-family: var(--font-display);
        }

        h1, h2, h3 {
            font-family: var(--font-display);
            line-height: 1.1;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        html {
            /* JavaScript will handle smooth scrolling for intent-aware snap system */
            scroll-behavior: auto;
        }

        html, body {
            margin: 0; padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden; /* Use single scroll container for vertical scroll */
            font-family: 'Inter', system-ui, sans-serif;
            background: #00000a; /* Updated to match base.html shader background */
        }

        /* --- Modern Scroll (JS-driven intent-aware snapping) --- */
        .main-scroller {
            position: relative;
            height: 100vh;
            width: 100vw;
            overflow-y: auto;
            overflow-x: hidden;
            /* JS handles smooth scrolling - prevents fighting with CSS snap */
            scroll-behavior: auto;

            /* No CSS snapping - intent-aware system in JavaScript */
            scroll-snap-type: none;

            /* 2. Reserve space for fixed navbar (adjust 80px to your navbar height) */
            scroll-padding-top: 80px;

            /* 3. Performance optimizations */
            overscroll-behavior-y: contain; /* Avoid overscroll bounce */
            -webkit-overflow-scrolling: touch; /* Native momentum on iOS */
        }

        /* Generic Section Container */
        .snap-section {
            /* 1. Align the top of the section to the top of the viewport */
            scroll-snap-align: start;

            /* 2. 'normal' allows the user to fling/scroll past multiple sections fast.
               Do NOT use 'always' which forces stops. */
            scroll-snap-stop: normal;

            /* 3. Ensure section is tall enough to not break snapping */
            min-height: 100vh; /* Use min-height for accessibility (zoom support) */
            min-height: 100svh; /* Use small viewport height on mobile */
            width: 100vw;
            position: relative;
            overflow: hidden; /* Contain visuals within the slide */
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: transparent; /* Allow shader background to show through */
        }

        /* Ensure anchor jumps leave space for the fixed navbar */
        section[id],
        .snap-section,
        #hero,
        #risks,
        #shadowAiSection,
        #section-local,
        #section-crypto,
        #section-eu,
        #performance,
        #contact {
            scroll-margin-top: 80px;
        }

        /* (Reverted) No snapping even on desktop */

        /* Mobile adjustments */
        @media (max-width: 768px) {
            .main-scroller {
                /* Keep snapping disabled on mobile to respect touch momentum */
                scroll-snap-type: none;
                scroll-padding-top: 60px;
                scroll-behavior: smooth;
            }

            section[id],
            .snap-section,
            #hero,
            #risks,
            #shadowAiSection,
            #section-local,
            #section-crypto,
            #section-eu,
            #performance,
            #contact {
                scroll-margin-top: 60px;
            }
        }

        /* Accessibility: Disable snapping if user prefers reduced motion */
        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
            .main-scroller {
                scroll-snap-type: none;
            }
        }

        /* Vertical Timeline */
        .progress-timeline {
            position: fixed;
            left: 5vw;
            top: 15vh;
            height: 70vh;
            width: 2px;
            background: linear-gradient(180deg, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0.1) 100%);
            z-index: 100;
            pointer-events: none;
        }

        .progress-timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 8px;
            background: #3B82F6;
            border-radius: 50%;
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
        }

        .progress-timeline::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 8px;
            background: #3B82F6;
            border-radius: 50%;
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
        }

        .timeline-dot {
            position: fixed;
            left: 5vw;
            width: 16px;
            height: 16px;
            background: radial-gradient(circle, #FFFFFF 0%, #3B82F6 50%, #2563EB 100%);
            border-radius: 50%;
            transform: translateX(-50%);
            box-shadow: 0 0 20px rgba(59, 130, 246, 1), 0 0 40px rgba(59, 130, 246, 0.6);
            z-index: 101;
            pointer-events: none;
            transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .timeline-dot::before {
            content: '';
            position: absolute;
            inset: -4px;
            border: 2px solid rgba(59, 130, 246, 0.4);
            border-radius: 50%;
            animation: pulse-ring-timeline 2s infinite;
        }

        @keyframes pulse-ring-timeline {
            0% { transform: scale(0.8); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }

        /* Common Step Label Styling */
        .step-label {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.85rem;
            font-weight: 600;
            color: #60a5fa;
            position: absolute;
            top: -40px;
            left: 0;
            display: inline-block;
            background: rgba(59, 130, 246, 0.15);
            border: 1px solid rgba(59, 130, 246, 0.4);
            padding: 6px 12px;
            border-radius: 6px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.4),
                        0 0 40px rgba(59, 130, 246, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.1);
            text-shadow: 0 0 10px rgba(96, 165, 250, 0.8);
        }

        /* --- RESPONSIVE ADJUSTMENTS (Global) --- */
        @media (max-width: 900px) {
            .snap-section {
                grid-template-columns: 1fr;
                grid-template-rows: auto 1fr;
            }
        }

        /* ==================================================================
           SECTION 1: CRYPTO (Styles Scoped)
           ================================================================== */
        #section-crypto {
            --bg-void: #020617;
            --risk-base: #EF4444;
            --risk-glow: rgba(239, 68, 68, 0.5);
            --safe-base: #10B981;
            --safe-glow: rgba(16, 185, 129, 0.5);
            --process-base: #3B82F6;
            --process-glow: rgba(59, 130, 246, 0.8);
            --metal-surface: linear-gradient(180deg, #334155 0%, #1E293B 100%);
            --metal-dark: #0F172A;
            --font-tech: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;

            background-color: transparent;
            background-image: none;
            color: white;
        }

        #section-crypto .text-col {
            display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
            z-index: 10; gap: 1rem;
            position: relative; /* Required for z-index to work */
            /* Dark glass card for readability - Green theme */
            background: rgba(2, 6, 23, 0.7);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(16, 185, 129, 0.15);
            border-radius: 24px;
            box-shadow:
                0 20px 60px -20px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(16, 185, 129, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
            padding: 3rem 4rem;
            padding-top: 3.5rem; /* Extra space for floating step label */
            margin: auto 0 auto 12vw;
            width: calc(100% - 12vw);
        }
        #section-crypto .label-micro {
            font-family: var(--font-tech); font-size: 0.75rem; letter-spacing: 2px; color: var(--safe-base);
            text-transform: uppercase; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 8px;
        }
        #section-crypto .label-micro::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 1px; box-shadow: 0 0 8px var(--safe-glow); }
        #section-crypto h2 {
            font-size: 2.5rem; font-weight: 700; line-height: 1.15; margin-bottom: 2rem; letter-spacing: -0.03em;
            background: linear-gradient(180deg, #FFF, #94A3B8); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        #section-crypto p { font-size: 1rem; line-height: 1.75; color: #94A3B8; max-width: none; }
        
        /* Visual Col */
        #section-crypto .visual-col {
            position: relative; display: flex; justify-content: center; align-items: center; perspective: 1000px;
            z-index: 10; /* Layer above shader background */
        }
        .pipeline-stage { width: 100%; height: 500px; position: relative; display: flex; align-items: center; justify-content: center; }

        /* Rail & Chassis */
        .data-rail {
            display: none;
        }
        .server-chassis {
            width: 440px; height: 280px; background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
            border-radius: 16px; position: relative; z-index: 10;
            box-shadow: 0 50px 100px -20px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 20px rgba(0,0,0,0.3);
            display: flex; flex-direction: column; align-items: center; padding: 8px;
            border: 1px solid rgba(255,255,255,0.05);
        }
        .brand-badge {
            position: absolute; top: -18px; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(12px);
            border: 1px solid rgba(59, 130, 246, 0.3); padding: 6px 14px; border-radius: 100px;
            display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1); z-index: 20;
        }
        .status-led {
            width: 6px; height: 6px; background: var(--process-base); border-radius: 50%;
            box-shadow: 0 0 10px var(--process-glow), 0 0 4px rgba(59, 130, 246, 0.5); animation: breathe 3s infinite ease-in-out;
        }
        .brand-name { font-weight: 800; font-size: 0.75rem; letter-spacing: 1.5px; color: #FFF; }
        .brand-logo { height: 24px; width: auto; }
        .front-panel {
            width: 100%; height: 100%; background: #0F172A; border-radius: 12px;
            box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); display: flex; flex-direction: column; position: relative; overflow: hidden;
            border: 1px solid #1E293B;
        }
        .panel-header { height: 32px; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; gap: 8px; }
        .vent-line { width: 36px; height: 3px; background: linear-gradient(90deg, #475569, #334155); border-radius: 2px; opacity: 0.7; }
        .processing-void {
            flex: 1; width: 100%; background: #020617; position: relative; overflow: hidden;
            display: flex; align-items: center; justify-content: center; border-top: 1px solid #1E293B; border-bottom: 1px solid #1E293B;
        }
        .void-particles {
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(59, 130, 246, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
            background-size: 20px 20px, 40px 100%; opacity: 0.3; animation: particle-flow 2s linear infinite; transition: opacity 0.3s;
        }
        .scan-laser {
            position: absolute; height: 100%; width: 2px; background: linear-gradient(180deg, transparent, var(--process-base), transparent);
            box-shadow: 0 0 20px var(--process-glow); opacity: 0.5;
        }
        .server-chassis.active .void-particles { opacity: 1; animation: particle-flow 0.5s linear infinite; }
        .server-chassis.active .scan-laser { opacity: 1; width: 4px; filter: blur(1px); }
        .glass-overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.03) 0%, transparent 40%); pointer-events: none; z-index: 5; }
        .panel-footer {
            height: 32px; width: 100%; border-top: 1px solid rgba(255,255,255,0.05);
            display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
        }
        .micro-text {
            font-family: var(--font-tech); font-size: 0.6rem; color: #64748B; letter-spacing: 1px; font-weight: 500;
        }
        .status-indicators {
            display: flex; gap: 6px; align-items: center;
        }
        .mini-led {
            width: 4px; height: 4px; border-radius: 50%; background: #475569;
        }
        .mini-led.active { background: #10B981; box-shadow: 0 0 6px #10B981; }

        /* Packet Cell */
        .packet-cell {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(-600px);
            height: 36px; padding: 0 18px; border-radius: 8px; display: flex; align-items: center; gap: 10px;
            font-family: var(--font-tech); font-size: 0.8rem; font-weight: 700; white-space: nowrap;
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 20;
            transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s; will-change: transform;
        }
        .packet-icon { width: 6px; height: 6px; border-radius: 1px; }
        .packet-cell.state-raw {
            background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.5); color: #FCA5A5; box-shadow: 0 0 20px var(--risk-glow);
        }
        .packet-cell.state-raw .packet-icon { background: var(--risk-base); box-shadow: 0 0 8px var(--risk-base); }
        .packet-cell.state-process {
            background: rgba(59, 130, 246, 0.2); border: 1px solid rgba(255, 255, 255, 0.8); color: #FFF; box-shadow: 0 0 40px var(--process-glow); letter-spacing: 1px;
        }
        .packet-cell.state-process .packet-icon { background: #FFF; box-shadow: 0 0 10px #FFF; }
        .packet-cell.state-safe {
            background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.5); color: #6EE7B7; box-shadow: 0 0 20px var(--safe-glow);
        }
        .packet-cell.state-safe .packet-icon { background: var(--safe-base); box-shadow: 0 0 8px var(--safe-base); }

        /* Keyframes Section 1 */
        @keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
        @keyframes particle-flow { 0% { background-position: 0 0, 0 0; } 100% { background-position: -20px 0, -40px 0; } }
        @keyframes vibrate { 0% { transform: translate(-50%, -50%) translateX(0px); } 20% { transform: translate(-50%, -50%) translateX(-2px); } 40% { transform: translate(-50%, -50%) translateX(2px); } 60% { transform: translate(-50%, -50%) translateX(-1px); } 80% { transform: translate(-50%, -50%) translateX(1px); } 100% { transform: translate(-50%, -50%) translateX(0px); } }

        /* ==================================================================
           SECTION 2: INTERFACE (Styles Scoped)
           ================================================================== */
        #section-interface {
            --bg-deep: #080C17;
            --primary: #3B82F6;
            --primary-dark: #2563EB;
            --alert: #F59E0B;
            --alert-bg: rgba(245, 158, 11, 0.15);
            --text-dark: #1E293B;
            --text-grey: #64748B;

            background-color: transparent;
            background-image: none;
            color: white;
        }
        
        #section-interface .content-col {
            display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
            gap: 1rem; position: relative; z-index: 10;
            /* Dark glass card for readability */
            background: rgba(2, 6, 23, 0.7);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(59, 130, 246, 0.15);
            border-radius: 24px;
            box-shadow:
                0 20px 60px -20px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(59, 130, 246, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
            padding: 3rem 4rem;
            padding-top: 3.5rem; /* Extra space for floating step label */
            margin: auto 0 auto 12vw;
            width: calc(100% - 12vw);
        }
        #section-interface .meta-tag {
            font-size: 0.75rem; font-weight: 700; color: var(--primary); margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 1.5px; display: flex; align-items: center; gap: 8px;
        }
        #section-interface .meta-tag::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
        #section-interface h2 { font-size: 2.5rem; font-weight: 700; line-height: 1.15; margin-bottom: 2rem; letter-spacing: -0.02em; }
        #section-interface .highlight-text { background: linear-gradient(to bottom, #60A5FA, #3B82F6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        #section-interface p { font-size: 1rem; line-height: 1.75; color: #94A3B8; max-width: none; }
        
        #section-interface .visual-col { position: relative; display: flex; justify-content: center; align-items: center; z-index: 10; }
        .chat-interface {
            width: 480px; height: 660px; background: #FFFFFF; border-radius: 12px;
            box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.05); display: flex; flex-direction: column;
            overflow: hidden; position: relative; transform: scale(0.95);
        }
        .chat-header {
            padding: 16px 20px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center;
            background: #FFFFFF; z-index: 10;
        }
        .header-left { display: flex; align-items: center; gap: 12px; }
        .header-logo { height: 20px; width: auto; }
        .header-title { font-weight: 600; color: #111827; font-size: 0.875rem; }
        .header-subtitle { font-size: 0.75rem; color: #10B981; margin-top: 2px; }
        .header-toggle {
            display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #6B7280;
        }
        .toggle-switch {
            width: 36px; height: 20px; background: #E5E7EB; border-radius: 10px; position: relative; cursor: pointer;
        }
        .toggle-switch::after {
            content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
            background: white; border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        .chat-body { flex: 1; padding: 24px; background: #F9FAFB; display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; overflow-y: auto; }
        
        /* Messages */
        .msg-label { font-size: 0.7rem; color: #9CA3AF; margin-bottom: 6px; font-weight: 500; }
        .msg-row-user { display: flex; flex-direction: column; align-items: flex-end; opacity: 0; animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.0s forwards; }
        .bubble-user {
            background: #1E3A8A; color: white; padding: 12px 16px; border-radius: 12px; border-bottom-right-radius: 4px;
            font-size: 0.875rem; line-height: 1.5; max-width: 80%; box-shadow: 0 2px 8px rgba(30, 58, 138, 0.15);
        }
        .msg-row-ai { display: flex; flex-direction: column; align-items: flex-start; opacity: 0; animation: fade-in 0.5s ease-out 5.5s forwards; }
        .bubble-ai {
            background: #FFFFFF; padding: 12px 16px; border-radius: 12px; border-bottom-left-radius: 4px;
            display: flex; align-items: center; gap: 4px; width: fit-content; border: 1px solid #E5E7EB;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .dot { width: 6px; height: 6px; background: #9CA3AF; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
        .dot:nth-child(1) { animation-delay: -0.32s; } .dot:nth-child(2) { animation-delay: -0.16s; }

        /* Highlight & Tooltip - Cohesive Overlay */
        .sensitive-data {
            position: relative; display: inline-block; z-index: 1;
            color: white; /* Initial text is white */
        }
        .sensitive-data::after {
            content: ''; position: absolute; inset: -3px -6px -3px -6px; background: #FFFFFF;
            border-radius: 0 0 6px 6px; opacity: 0; transform: scale(0.95);
            animation: highlight-trigger 0.5s ease-out 4.6s forwards;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }
        .sensitive-data::before {
            content: attr(data-text);
            position: absolute; inset: 0; color: #1E3A8A;
            opacity: 0; z-index: 2;
            animation: text-reveal 0.5s ease-out 4.6s forwards;
        }
        .label-popup {
            position: absolute; top: -28px; left: 50%; transform: translateX(-50%) translateY(0);
            background: #FFFFFF; color: #1E3A8A; font-size: 0.65rem; font-weight: 600;
            padding: 5px 9px; border-radius: 6px 6px 0 0;
            white-space: nowrap; opacity: 0; display: flex; align-items: center; gap: 5px; z-index: 10;
            animation: label-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 4.8s forwards;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
            letter-spacing: 0.3px; text-transform: uppercase;
        }
        .label-popup::after { display: none; }
        .label-popup svg { width: 11px; height: 11px; flex-shrink: 0; }

        @keyframes text-reveal { to { opacity: 1; } }

        /* Input */
        .input-area { background: white; padding: 12px 16px; border-top: 1px solid #E5E7EB; margin-top: auto; }
        .input-container {
            background: #FFFFFF; border: 1px solid #D1D5DB; border-radius: 8px; display: flex; flex-direction: column; justify-content: flex-start;
            padding: 10px 12px; position: relative; height: 42px; animation: box-grow 0.3s cubic-bezier(0.4, 0, 0.2, 1) 1.5s forwards;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .typing-wrapper { display: flex; flex-direction: column; width: 100%; font-size: 0.875rem; color: #111827; line-height: 1.4; }
        .line-1, .line-2 { white-space: nowrap; overflow: hidden; display: inline-block; position: relative; width: 0; border-right: 2px solid transparent; }
        .line-1 { animation: type-line1 1.2s linear 0.3s forwards, cursor-blink 0.3s step-end 5; }
        .line-2 { animation: type-line2 2.0s linear 1.6s forwards; }
        .send-btn {
            width: 28px; height: 28px; background: #1E3A8A; border-radius: 6px; display: flex; align-items: center; justify-content: center;
            position: absolute; bottom: 7px; right: 7px; transition: 0.2s;
        }
        .send-btn svg { width: 14px; height: 14px; fill: white; }
        .send-btn.animate { animation: btn-press 0.3s ease 3.9s; }
        .input-container.finished .typing-wrapper { animation: clear-text 0.1s linear 4.0s forwards; }

        .input-footer {
            display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 0.7rem;
        }
        .model-info {
            display: flex; align-items: center; gap: 6px; color: #6B7280;
        }
        .model-badge {
            display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
            background: #F3F4F6; border-radius: 4px; font-weight: 500;
        }
        .status-dot { width: 6px; height: 6px; background: #10B981; border-radius: 50%; }
        .protection-level { color: #6B7280; }

        /* Keyframes Section 2 */
        @keyframes box-grow { to { height: 74px; border-radius: 12px; } }
        @keyframes type-line1 { 0% { width: 0; border-right: 2px solid var(--primary); } 99% { border-right: 2px solid var(--primary); } 100% { width: 100%; border-right: 2px solid transparent; } }
        @keyframes type-line2 { 0% { width: 0; border-right: 2px solid var(--primary); } 99% { border-right: 2px solid var(--primary); } 100% { width: 100%; border-right: 2px solid transparent; } }
        @keyframes clear-text { to { opacity: 0; } }
        @keyframes btn-press { 50% { transform: scale(0.85); } }
        @keyframes pop-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes highlight-trigger { to { opacity: 1; transform: scale(1); } }
        @keyframes label-pop { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
        @keyframes fade-in { to { opacity: 1; } }
        @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

        /* ==================================================================
           SECTION 3: LOCAL SERVER (Styles Scoped)
           ================================================================== */
        #section-local {
            --bg-deep: #080C17;
            --primary: #3B82F6;
            --success: #10B981;
            --text-hero: #FFFFFF;
            --text-body: #94A3B8;

            background-color: transparent;
            background-image: none;
            color: var(--text-hero);
        }

        #section-local .content-col {
            display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
            z-index: 10; gap: 1rem; position: relative;
            /* Dark glass card for readability */
            background: rgba(2, 6, 23, 0.7);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(59, 130, 246, 0.15);
            border-radius: 24px;
            box-shadow:
                0 20px 60px -20px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(59, 130, 246, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
            padding: 3rem 4rem;
            padding-top: 3.5rem; /* Extra space for floating step label */
            margin: auto 0 auto 12vw;
            width: calc(100% - 12vw);
        }
        #section-local h2 {
            font-size: 2.5rem; font-weight: 700; line-height: 1.15; margin-bottom: 2rem; letter-spacing: -0.02em;
            background: linear-gradient(to bottom, #fff, #cbd5e1); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        #section-local .highlight-text { color: var(--primary); -webkit-text-fill-color: var(--primary); }
        #section-local p { font-size: 1rem; line-height: 1.75; color: var(--text-body); max-width: none; }
        #section-local .meta-tag {
            display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--success);
            margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 1px;
        }
        #section-local .meta-tag::before { content: ''; width: 8px; height: 8px; background: currentColor; border-radius: 50%; box-shadow: 0 0 10px currentColor; }

        #section-local .visual-col {
            position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden;
            background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
            z-index: 10; /* Layer above shader background */
        }
        .rack-wrapper { width: 400px; height: 640px; position: relative; z-index: 5; perspective: 1200px; }
        .server-cabinet {
            width: 100%; height: 100%; background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
            border-radius: 24px;
            box-shadow: 0 -30px 80px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 20px rgba(0,0,0,0.3);
            padding: 24px; display: flex; flex-direction: column; gap: 4px; position: relative; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        #section-local .visual-col:hover .server-cabinet { transform: translateY(-10px) rotateX(1deg); }
        .cabinet-inner {
            background: #0F172A; flex: 1; border-radius: 12px;
            padding: 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
        }
        .blade {
            height: 44px; background: linear-gradient(135deg, #334155 0%, #1E293B 100%); border-radius: 6px; border: 1px solid #475569; display: flex; align-items: center; justify-content: space-between;
            padding: 0 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05); position: relative;
        }
        .blade-left { display: flex; gap: 8px; align-items: center; }
        .blade-right { display: flex; gap: 6px; align-items: center; }
        .vent-grid { display: flex; gap: 2px; }
        .vent-slot { width: 3px; height: 16px; background: #64748B; border-radius: 2px; }
        .port { width: 24px; height: 12px; background: #475569; border-radius: 2px; border-top: 2px solid #64748B; }
        .led { width: 6px; height: 6px; border-radius: 50%; background: #475569; box-shadow: inset 0 1px 2px rgba(0,0,0,0.4); }
        .led.green { background: #10B981; box-shadow: 0 0 8px #10B981, 0 0 4px rgba(16, 185, 129, 0.5); }
        .led.blue { background: #3B82F6; box-shadow: 0 0 8px #3B82F6, 0 0 4px rgba(59, 130, 246, 0.5); }
        .blink-fast { animation: blink 0.5s infinite alternate; }
        .blink-slow { animation: blink 1.5s infinite alternate; }
        .blink-offset { animation: blink 1.5s infinite alternate-reverse; }

        .blade.hero-unit {
            height: 140px; background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); border: 1px solid #475569;
            box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4), inset 0 0 0 1px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255,255,255,0.1);
            flex-direction: column; justify-content: center; align-items: center; gap: 16px; z-index: 2; margin: 8px 0; overflow: hidden;
        }
        .glass-panel {
            position: relative; background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
            border: 1px solid rgba(59, 130, 246, 0.4); border-radius: 12px; padding: 12px 24px; display: flex; align-items: center; gap: 12px; backdrop-filter: blur(4px);
        }
        .logo-mark { width: 28px; height: 28px; background: var(--primary); border-radius: 6px; box-shadow: 0 0 20px var(--primary); animation: pulse-core 3s infinite ease-in-out; }
        .logo-text { font-size: 20px; font-weight: 700; color: #1E293B; letter-spacing: -0.5px; }
        .logo-img { height: 32px; width: auto; }
        .status-text { font-size: 10px; font-weight: 600; color: var(--primary); letter-spacing: 1.5px; margin-top: -8px; }
        .local-scan-laser {
            position: absolute; top: 0; left: 0; width: 100%; height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
            opacity: 0.5; animation: scan-down 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Keyframes Section 3 */
        @keyframes blink { 0% { opacity: 0.4; } 100% { opacity: 1; } }
        @keyframes pulse-core { 0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); } 50% { transform: scale(0.95); box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); } }
        @keyframes scan-down { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }


        /* ==================================================================
           SECTION 4: EU GRID (Styles Scoped)
           ================================================================== */
        #section-eu {
            --bg-dark: #020617;
            --eu-blue: #38bdf8;
            --eu-gold: #fbbf24;
            --text-main: #ffffff;
            --text-muted: #94a3b8;

            background-color: transparent;
            background-image: none;
            color: var(--text-main);
        }

        #section-eu .content-side {
            display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
            z-index: 10; gap: 1rem; position: relative;
            /* Dark glass card for readability - Cyan/Gold EU theme */
            background: rgba(2, 6, 23, 0.7);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(56, 189, 248, 0.15);
            border-radius: 24px;
            box-shadow:
                0 20px 60px -20px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(251, 191, 36, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
            padding: 3rem 4rem;
            padding-top: 3.5rem; /* Extra space for floating step label */
            margin: auto 0 auto 12vw;
            width: calc(100% - 12vw);
        }
        .decor-line { width: 40px; height: 2px; background: linear-gradient(90deg, var(--eu-gold), transparent); margin-bottom: 32px; }
        #section-eu h1 {
            font-size: 2.5rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.04em; margin-bottom: 32px;
            background: linear-gradient(180deg, #fff 0%, #cbd5e1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .story-text { font-size: 16px; line-height: 1.8; color: var(--text-muted); font-weight: 300; max-width: none; }
        #section-eu .highlight { color: #e2e8f0; font-weight: 400; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .impact-box { margin-top: 40px; padding: 20px 24px; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 8px; display: inline-block; width: fit-content;}
        .impact-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--eu-blue); margin-bottom: 6px; letter-spacing: 0.05em; text-transform: uppercase; }
        .impact-text { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }

        #section-eu .visual-side { position: relative; display: flex; align-items: center; justify-content: center; perspective: 1000px; z-index: 10; }
        .globe-container { position: relative; width: 320px; height: 320px; transform-style: preserve-3d; animation: float-globe 6s ease-in-out infinite; }
        .globe-wireframe {
            position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
            background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.15), rgba(2, 6, 23, 0.6)); box-shadow: inset -10px -10px 40px rgba(0,0,0,0.4); z-index: 5;
        }
        .meridian { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); }
        .m1 { transform: rotateY(30deg); } .m2 { transform: rotateY(60deg); } .m3 { transform: rotateY(90deg); } .m4 { transform: rotateX(60deg); }
        .eu-stars-ring {
            position: absolute; top: 50%; left: 50%; width: 480px; height: 480px; transform: translate(-50%, -50%);
            pointer-events: none; animation: rotate-ring 60s linear infinite; z-index: 1;
        }
        .star {
            position: absolute; top: 0; left: 50%; width: 20px; height: 20px; background-color: var(--eu-gold);
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            transform-origin: 0 240px; box-shadow: 0 0 15px var(--eu-gold);
        }
        .s1 { transform: translateX(-50%) rotate(0deg); } .s2 { transform: translateX(-50%) rotate(30deg); } .s3 { transform: translateX(-50%) rotate(60deg); }
        .s4 { transform: translateX(-50%) rotate(90deg); } .s5 { transform: translateX(-50%) rotate(120deg); } .s6 { transform: translateX(-50%) rotate(150deg); }
        .s7 { transform: translateX(-50%) rotate(180deg); } .s8 { transform: translateX(-50%) rotate(210deg); } .s9 { transform: translateX(-50%) rotate(240deg); }
        .s10 { transform: translateX(-50%) rotate(270deg); } .s11 { transform: translateX(-50%) rotate(300deg); } .s12 { transform: translateX(-50%) rotate(330deg); }
        .pin { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); z-index: 20; }
        .pin-origin { top: 35%; left: 45%; width: 12px; height: 12px; background: var(--eu-blue); box-shadow: 0 0 15px var(--eu-blue); }
        .pin-origin::after { content:''; position: absolute; top:-50%; left:-50%; width: 200%; height: 200%; border: 1px solid var(--eu-blue); border-radius: 50%; animation: pulse-ring 2s infinite; }
        .pin-west { top: 30%; left: 15%; background: var(--eu-gold); width: 8px; height: 8px; opacity: 0.8; }
        .pin-east { top: 45%; left: 85%; background: var(--eu-gold); width: 8px; height: 8px; opacity: 0.8; }
        .pin-south { top: 65%; left: 60%; background: var(--eu-gold); width: 6px; height: 6px; opacity: 0.6; }
        .trajectories { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 10; }
        .path-line { fill: none; stroke: url(#gradientLine); stroke-width: 1; opacity: 0.4; }
        .data-packet { fill: #fff; filter: drop-shadow(0 0 4px white); }
        .flow-1 { animation: travel 3s infinite ease-in-out; } .flow-2 { animation: travel 4s infinite ease-in-out; animation-delay: 1s; } .flow-3 { animation: travel 3.5s infinite ease-in-out; animation-delay: 0.5s; }

        /* Keyframes Section 4 */
        @keyframes travel { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
        @keyframes pulse-ring { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }
        @keyframes float-globe { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
        @keyframes rotate-ring { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }


        /* ==================================================================
           MOBILE RESPONSIVE STYLES
           ================================================================== */

        /* --- TABLET BREAKPOINT (768px - 900px) --- */
        @media (max-width: 900px) {
            /* Hide timeline on mobile - conflicts with single column layout */
            .progress-timeline,
            .timeline-dot {
                display: none;
            }

            /* Text cards - reduce padding and adjust margins */
            #section-local .content-col,
            #section-interface .content-col,
            #section-crypto .text-col,
            #section-eu .content-side {
                padding: 2rem 2.5rem;
                margin: auto 5vw;
                width: calc(100% - 10vw);
            }

            /* Scale down headings */
            #section-local h2,
            #section-interface h2,
            #section-crypto h2,
            #section-eu h1 {
                font-size: 2rem;
            }

            /* Scale visual illustrations to 80% */
            .rack-wrapper {
                transform: scale(0.8);
                width: 320px;
                height: 512px;
            }

            .chat-interface {
                transform: scale(0.8);
            }

            .server-chassis {
                width: 352px;
                height: 224px;
            }

            .globe-container {
                transform: scale(0.8);
            }
        }

        /* --- LARGE MOBILE (576px - 768px) --- */
        @media (max-width: 768px) {
            /* Further reduce card padding */
            #section-local .content-col,
            #section-interface .content-col,
            #section-crypto .text-col,
            #section-eu .content-side {
                padding: 1.5rem 2rem;
                margin: auto 3vw;
                width: calc(100% - 6vw);
                border-radius: 16px;
            }

            /* Reduce heading sizes */
            #section-local h2,
            #section-interface h2,
            #section-crypto h2,
            #section-eu h1 {
                font-size: 1.75rem;
                margin-bottom: 1.5rem;
            }

            /* Paragraph text adjustment */
            #section-local p,
            #section-interface p,
            #section-crypto p,
            #section-eu .story-text {
                font-size: 0.9375rem;
                line-height: 1.6;
            }

            /* Scale visual illustrations - INCREASED to 90% for better visibility */
            .rack-wrapper {
                transform: scale(0.85);
                width: 360px;
                height: 576px;
                max-width: 90vw;
            }

            .chat-interface {
                transform: scale(0.85);
                width: 432px;
                height: 594px;
                max-width: 90vw;
            }

            .server-chassis {
                width: 396px;
                height: 252px;
                max-width: 90vw;
            }

            .globe-container {
                transform: scale(0.85);
                max-width: 90vw;
            }

            .eu-stars-ring {
                width: 432px;
                height: 432px;
            }

            /* Ensure visual columns don't overflow */
            #section-local .visual-col,
            #section-interface .visual-col,
            #section-crypto .visual-col,
            #section-eu .visual-side {
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                padding: 0;
                min-height: 350px;
            }
        }

        /* --- STANDARD MOBILE (400px - 576px) --- */
        @media (max-width: 576px) {
            /* Minimal padding, symmetric margins */
            #section-local .content-col,
            #section-interface .content-col,
            #section-crypto .text-col,
            #section-eu .content-side {
                padding: 1.5rem;
                margin: auto 1rem;
                width: calc(100% - 2rem);
                border-radius: 12px;
            }

            /* Compact heading sizes */
            #section-local h2,
            #section-interface h2,
            #section-crypto h2,
            #section-eu h1 {
                font-size: 1.5rem;
                margin-bottom: 1rem;
                line-height: 1.2;
            }

            /* Reduce step label size and make visible on mobile */
            .step-label {
                /* Change from absolute to static positioning */
                position: static;

                /* Center horizontally */
                display: block;
                text-align: center;
                margin: 0 auto 1rem auto;
                width: fit-content;

                /* Remove absolute positioning offsets */
                top: auto;
                left: auto;

                /* Size adjustments */
                font-size: 0.7rem;
                padding: 4px 8px;
            }

            /* Meta tag adjustments */
            .meta-tag,
            .label-micro {
                font-size: 0.65rem;
                margin-bottom: 1rem;
            }

            /* Scale visual illustrations - reduced to 75% for better fit */
            .rack-wrapper {
       
                width: 320px;
                height: 512px;
                max-width: 90vw;
            }

            .chat-interface {
  
                width: 384px;
                height: 528px;
                max-width: 90vw;
            }

            .server-chassis {
                width: 352px;
                height: 224px;
                max-width: 90vw;
            }

            .globe-container {

                max-width: 90vw;
            }

            .eu-stars-ring {
                width: 384px;
                height: 384px;
            }

            /* Reduce gap between sections */
            .snap-section {
                gap: 1rem;
            }

            /* Impact box scaling */
            .impact-box {
                padding: 16px 20px;
                font-size: 0.9rem;
            }
        }

        /* --- SMALL MOBILE (<400px) --- */
        @media (max-width: 400px) {
            /* Extra compact padding */
            #section-local .content-col,
            #section-interface .content-col,
            #section-crypto .text-col,
            #section-eu .content-side {
                padding: 1rem;
                margin: auto 0.5rem;
                width: calc(100% - 1rem);
            }

            /* Further reduce headings */
            #section-local h2,
            #section-interface h2,
            #section-crypto h2,
            #section-eu h1 {
                font-size: 1.25rem;
            }

            /* Scale visual illustrations - reduced to 65% for better fit */
            .rack-wrapper {
      
                width: 280px;
                height: 448px;
                max-width: 90vw;
            }

            .chat-interface {
              
                width: 336px;
                height: 462px;
                max-width: 90vw;
            }

            .server-chassis {
                width: 308px;
                height: 196px;
                max-width: 90vw;
            }

            .globe-container {
 
                max-width: 90vw;
            }

            .eu-stars-ring {
                width: 336px;
                height: 336px;
            }
        }

        /* --- GLOBAL MOBILE FIXES (all screens <900px) --- */
        @media (max-width: 900px) {
            /* Add max-width to all visual containers */
            .rack-wrapper,
            .chat-interface,
            .server-chassis,
            .globe-container,
            .eu-stars-ring {
                max-width: 100%;
            }

            /* Prevent horizontal overflow */
            .visual-col,
            .visual-side {
                overflow-x: hidden;
            }
            .visual-col {
                margin-bottom: 50px;
            }

            /* Keep strict 100vh snap sections on mobile */
            .snap-section {
           
                margin-bottom: 50px;
            }

            /* Reduce blur intensity for performance */
            #section-local .content-col,
            #section-interface .content-col,
            #section-crypto .text-col,
            #section-eu .content-side {
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
            }

            /* Simplify shadows for performance */
            .glass-panel,
            #section-local .content-col,
            #section-interface .content-col,
            #section-crypto .text-col,
            #section-eu .content-side {
                box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
            }
        }

        /* ====================================
           FINAL CTA SECTION
           ==================================== */
        .final-cta-section {
            min-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 120px 24px;
            position: relative;
        }

        .cta-content {
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        .cta-title {
            font-size: clamp(3rem, 7vw, 5.5rem);
            font-weight: 600;
            letter-spacing: -0.03em;
            margin-bottom: 48px;
            line-height: 1.1;
        }

        .cta-primary-button {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 20px 40px;
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
            color: white;
            font-family: var(--font-display);
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 100px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow:
                0 20px 40px rgba(59, 130, 246, 0.3),
                0 0 60px rgba(139, 92, 246, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .cta-primary-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .cta-primary-button:hover::before {
            left: 100%;
        }

        .cta-primary-button:hover {
            transform: translateY(-2px);
            box-shadow:
                0 25px 50px rgba(59, 130, 246, 0.4),
                0 0 80px rgba(139, 92, 246, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        .cta-primary-button .arrow-icon {
            width: 20px;
            height: 20px;
            transition: transform 0.3s ease;
        }

        .cta-primary-button:hover .arrow-icon {
            transform: translateX(4px);
        }

        /* ====================================
           FOOTER
           ==================================== */
        .site-footer {
            background: rgba(10, 10, 20, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding: 60px 24px 40px;
            position: relative;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 32px;
        }

        .footer-cta {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .footer-download-button {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 16px 32px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 100px;
            color: var(--text-primary);
            font-family: var(--font-display);
            font-size: 0.95rem;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }

        .footer-download-button:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        }

        .download-icon {
            width: 18px;
            height: 18px;
            transition: transform 0.3s ease;
        }

        .footer-download-button:hover .download-icon {
            transform: translateY(2px);
        }

        .footer-links {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .footer-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

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

        .footer-separator {
            color: rgba(255, 255, 255, 0.2);
            font-size: 0.9rem;
        }

        .footer-copyright {
            text-align: center;
            padding-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            width: 100%;
        }

        .footer-copyright p {
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.85rem;
        }

        /* ====================================
           RESPONSIVE - FINAL CTA & FOOTER
           ==================================== */

        /* Tablet */
        @media (max-width: 900px) {
            .final-cta-section {
                min-height: 70vh;
                padding: 100px 24px;
            }

            .cta-title {
                font-size: clamp(2.5rem, 6vw, 4.5rem);
                margin-bottom: 40px;
            }

            .cta-primary-button {
                padding: 18px 36px;
                font-size: 1rem;
            }

            .site-footer {
                padding: 50px 24px 32px;
            }

            .footer-download-button {
                padding: 14px 28px;
                font-size: 0.9rem;
            }
        }

        /* Mobile */
        @media (max-width: 768px) {
            .final-cta-section {
                min-height: 60vh;
                padding: 80px 20px;
            }

            .cta-title {
                font-size: clamp(2rem, 5vw, 3.5rem);
                margin-bottom: 36px;
            }

            .cta-primary-button {
                padding: 16px 32px;
                font-size: 0.95rem;
            }

            .site-footer {
                padding: 40px 20px 28px;
            }

            .footer-download-button {
                padding: 12px 24px;
                font-size: 0.85rem;
                gap: 10px;
            }

            .download-icon {
                width: 16px;
                height: 16px;
            }

            .footer-links {
                gap: 12px;
            }

            .footer-link,
            .footer-separator {
                font-size: 0.85rem;
            }

            .footer-copyright p {
                font-size: 0.8rem;
            }
        }

        /* Small mobile */
        @media (max-width: 400px) {
            .final-cta-section {
                padding: 60px 16px;
            }

            .cta-title {
                font-size: clamp(1.8rem, 4.5vw, 3rem);
                margin-bottom: 32px;
            }

            .cta-primary-button {
                padding: 14px 28px;
                font-size: 0.9rem;
                gap: 8px;
            }

            .cta-primary-button .arrow-icon {
                width: 18px;
                height: 18px;
            }

            .footer-download-button {
                padding: 10px 20px;
                font-size: 0.8rem;
            }

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

            .footer-separator {
                display: none;
            }
        }