:root {
            --charcoal: #0a0a0a;
            --accent-blue: #3b82f6;
            --soft-white: #f5f5f5;
        }

        body {
            background-color: var(--charcoal);
            color: white;
            font-family: 'Montserrat', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .font-serif { font-family: 'Bodoni Moda', serif; }
        .font-cursive { font-family: 'Great Vibes', cursive; }
        .font-mono { font-family: 'Fira Code', monospace; }

        /* --- THE SIGNAL OPENING --- */
        #opening-scene {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: black;
            display: flex;
            flex-col: column;
            align-items: center;
            justify-content: center;
            transition: opacity 2s ease;
        }

        .ambient-glow {
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
            filter: blur(40px);
            animation: pulse 4s infinite alternate;
        }

        @keyframes pulse { from { opacity: 0.3; transform: scale(1); } to { opacity: 0.7; transform: scale(1.2); } }

        /* --- ANIMATIONS --- */
        .reveal-node { opacity: 0; transform: translateY(30px); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-node.active { opacity: 1; transform: translateY(0); }

        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* --- UI COMPONENTS --- */
        .btn-revealed {
            padding: 12px 32px;
            border: 1px solid rgba(255,255,255,0.15);
            background: transparent;
            color: white;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 0.7rem;
            transition: all 0.5s;
            position: relative;
            overflow: hidden;
        }
        .btn-revealed:hover {
            border-color: var(--accent-blue);
            background: rgba(59, 130, 246, 0.05);
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
        }

        .product-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .product-card:hover {
            transform: translateY(-10px);
            border-color: rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.04);
        }

        .layer { display: none; opacity: 0; transition: opacity 1s ease; }
        .layer.active { display: block; opacity: 1; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-thumb { background: #333; }
        ::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

        .luxury-input {
            background: transparent;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            padding: 1rem 0;
            width: 100%;
            outline: none;
            font-family: 'Fira Code', monospace;
            transition: border-color 0.4s;
        }
        .luxury-input:focus { border-color: var(--accent-blue); }
        /* Animation Keyframes */
    @keyframes slideInLeft {
        from {
            transform: translateX(-100px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideInRight {
        from {
            transform: translateX(100px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideInBottom {
        from {
            transform: translateY(50px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes typing {
        from { width: 0 }
        to { width: 100% }
    }
    
    @keyframes bounceSlow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(5deg); }
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 1; }
    }
    
    @keyframes drawCheck {
        to { stroke-dashoffset: 0; }
    }
    
    @keyframes sparkle {
        0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
        50% { opacity: 1; transform: scale(1) rotate(180deg); }
    }
    
    /* Animation Classes */
    .slide-in-left {
        animation: slideInLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    .slide-in-right {
        animation: slideInRight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    .slide-in-bottom {
        animation: slideInBottom 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    .fade-in-delay {
        animation: fadeIn 1s ease-out 1s forwards;
        opacity: 0;
    }
    
    .title-reveal {
        animation: slideInBottom 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
    }
    
    .quote-typing {
        overflow: hidden;
        white-space: nowrap;
        animation: typing 3s steps(40) 1s forwards;
        border-right: 3px solid transparent;
    }
    
    .animate-bounce-slow {
        animation: bounceSlow 3s ease-in-out infinite;
    }
    
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }
    .delay-4 { animation-delay: 0.4s; }
    
    /* Background Elements */
    .blueprint-grid {
        background-image: 
            linear-gradient(to right, #00000008 1px, transparent 1px),
            linear-gradient(to bottom, #00000008 1px, transparent 1px);
        background-size: 50px 50px;
    }
    
    .circuit-line {
        position: absolute;
        background: linear-gradient(90deg, transparent, #2563eb10, transparent);
        height: 1px;
        opacity: 0.3;
    }
    
    .circuit-line.line-1 {
        top: 20%;
        left: 0;
        right: 0;
        animation: pulse 4s ease-in-out infinite;
    }
    
    .circuit-line.line-2 {
        top: 50%;
        left: 10%;
        right: 10%;
        animation: pulse 4s ease-in-out infinite 1s;
    }
    
    .circuit-line.line-3 {
        top: 80%;
        left: 5%;
        right: 5%;
        animation: pulse 4s ease-in-out infinite 2s;
    }
    
    .floating-number {
        position: absolute;
        font-family: monospace;
        font-size: 10rem;
        font-weight: 900;
        color: #2563eb03;
        animation: float 20s ease-in-out infinite;
        pointer-events: none;
    }
    
    .floating-number.n1 {
        top: 10%;
        left: 5%;
        animation-delay: 0s;
    }
    
    .floating-number.n2 {
        top: 40%;
        right: 10%;
        animation-delay: 5s;
    }
    
    .floating-number.n3 {
        bottom: 20%;
        left: 15%;
        animation-delay: 10s;
    }
    
    /* Progress Indicator */
    .progress-track {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .progress-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #00000020;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }
    
    .progress-dot.active {
        background: #2563eb;
        transform: scale(1.3);
    }
    
    .progress-dot.active::after {
        content: '';
        position: absolute;
        inset: -4px;
        border: 2px solid #2563eb40;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }
    
    /* Manifesto Content */
    .manifesto-chapter {
        opacity: 0;
        transform: translateY(50px);
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .manifesto-chapter.active {
        opacity: 1;
        transform: translateY(0);
    }
    
    .btn-manifesto {
        padding: 1rem 2rem;
        background: transparent;
        border: 2px solid #000;
        color: #000;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: 0.75rem;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .btn-manifesto:hover {
        background: #000;
        color: #fff;
        transform: translateY(-2px);
    }
    
    .btn-spark {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #2563eb;
        border-radius: 50%;
        animation: sparkle 1s infinite;
        opacity: 0;
    }
    
    .btn-manifesto:hover .btn-spark {
        opacity: 1;
    }
    
    .material-preview {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 0 auto;
    }
    
    .material-preview.copper {
        background: linear-gradient(45deg, #b87333, #daa520);
    }
    
    .material-preview.leather {
        background: linear-gradient(45deg, #8b4513, #d2b48c);
    }
    
    .material-preview.aluminum {
        background: linear-gradient(45deg, #848789, #d4d4d4);
    }
    
    /* Timeline */
    .obsolescence-timeline {
        position: relative;
        height: 100%;
    }
    
    .timeline-item {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 20px;
    }
    
    .timeline-item.past { top: 20%; left: 0; }
    .timeline-item.present { top: 50%; left: 30%; }
    .timeline-item.future { top: 80%; left: 60%; }
    
    .timeline-marker {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #00000020;
        position: relative;
    }
    
    .timeline-marker.active {
        background: #2563eb;
        animation: pulse 2s infinite;
    }
    
    .timeline-marker.active::after {
        content: '';
        position: absolute;
        inset: -5px;
        border: 2px solid #2563eb40;
        border-radius: 50%;
    }
    
    /* Interface Demo */
    .interface-demo {
        border: 1px solid #00000010;
        border-radius: 12px;
        overflow: hidden;
    }
    
    .demo-screen {
        height: 300px;
        background: #f8fafc;
        position: relative;
    }
    
    .notification {
        position: absolute;
        padding: 10px 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        animation: slideInLeft 0.5s ease-out;
    }
    
    .notification[data-type="intrusive"] {
        top: 20px;
        left: 20px;
        background: #fecaca;
        animation-delay: 0.5s;
    }
    
    .notification[data-type="subtle"] {
        bottom: 20px;
        right: 20px;
        background: #dbeafe;
        animation-delay: 1s;
    }
    
    /* Checkmark Animation */
    .checkmark-circle {
        stroke: #2563eb;
        stroke-width: 4;
        fill: none;
        stroke-dasharray: 283;
        stroke-dashoffset: 283;
        animation: drawCheck 1s ease-out 0.5s forwards;
    }
    
    .checkmark-check {
        stroke: #2563eb;
        stroke-width: 4;
        fill: none;
        stroke-dasharray: 50;
        stroke-dashoffset: 50;
        animation: drawCheck 0.5s ease-out 1.5s forwards;
    }
    
    .btn-manifesto-final {
        padding: 1.5rem 3rem;
        background: #000;
        color: #fff;
        border: none;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        font-size: 0.875rem;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .btn-manifesto-final:hover {
        background: #2563eb;
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(37, 99, 235, 0.3);
    }
    
    .final-sparkles .sparkle {
        position: absolute;
        width: 6px;
        height: 6px;
        background: white;
        border-radius: 50%;
        animation: sparkle 1s infinite;
    }
    
    .sparkle.s1 { top: 10px; left: 20px; animation-delay: 0s; }
    .sparkle.s2 { top: 30px; right: 30px; animation-delay: 0.3s; }
    .sparkle.s3 { bottom: 20px; left: 40px; animation-delay: 0.6s; }
    
    .signature-line {
        width: 200px;
        height: 1px;
        background: #000;
        margin: 0 auto;
        position: relative;
    }
    
    .signature-line::after {
        content: '';
        position: absolute;
        top: -4px;
        right: 0;
        width: 8px;
        height: 8px;
        background: #2563eb;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }