\
        * \{\
            margin: 0;\
            padding: 0;\
            box-sizing: border-box;\
        \}\
\
        :root \{\
            --primary-blue: #2B7A9F;\
            --accent-teal: #3D9B9B;\
            --accent-orange: #E85D35;\
            --accent-gold: #D4A756;\
            --dark-navy: #0A1929;\
            --light-grey: #F5F7FA;\
            --text-primary: #1A2332;\
            --text-secondary: #5A6C7D;\
        \}\
\
        body \{\
            font-family: 'Inter', sans-serif;\
            color: var(--text-primary);\
            line-height: 1.6;\
            overflow-x: hidden;\
        \}\
\
        h1, h2, h3, h4, h5, h6 \{\
            font-family: 'Montserrat', sans-serif;\
            font-weight: 700;\
            line-height: 1.2;\
        \}\
\
        .mono \{\
            font-family: 'JetBrains Mono', monospace;\
        \}\
\
        /* Navigation */\
        nav \{\
            position: fixed;\
            top: 0;\
            width: 100%;\
            background: rgba(255, 255, 255, 0.95);\
            backdrop-filter: blur(10px);\
            z-index: 1000;\
            padding: 1.5rem 0;\
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);\
        \}\
\
        .nav-container \{\
            max-width: 1400px;\
            margin: 0 auto;\
            padding: 0 3rem;\
            display: flex;\
            justify-content: space-between;\
            align-items: center;\
        \}\
\
        .logo \{\
            font-family: 'Montserrat', sans-serif;\
            font-size: 1.5rem;\
            font-weight: 800;\
            color: var(--dark-navy);\
            text-decoration: none;\
            display: flex;\
            align-items: center;\
            gap: 0.5rem;\
        \}\
\
        .logo-icon \{\
            width: 40px;\
            height: 40px;\
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-teal));\
            border-radius: 8px;\
            display: flex;\
            align-items: center;\
            justify-content: center;\
            color: white;\
            font-weight: 800;\
        \}\
\
        .nav-links \{\
            display: flex;\
            gap: 2.5rem;\
            list-style: none;\
        \}\
\
        .nav-links a \{\
            color: var(--text-primary);\
            text-decoration: none;\
            font-weight: 500;\
            font-size: 0.95rem;\
            transition: color 0.3s ease;\
        \}\
\
        .nav-links a:hover \{\
            color: var(--primary-blue);\
        \}\
\
        .cta-button \{\
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-teal));\
            color: white;\
            padding: 0.75rem 1.75rem;\
            border-radius: 8px;\
            text-decoration: none;\
            font-weight: 600;\
            font-size: 0.95rem;\
            transition: transform 0.3s ease, box-shadow 0.3s ease;\
            border: none;\
            cursor: pointer;\
        \}\
\
        .cta-button:hover \{\
            transform: translateY(-2px);\
            box-shadow: 0 10px 30px rgba(43, 122, 159, 0.3);\
        \}\
\
        /* Hero Section */\
        .hero \{\
            min-height: 100vh;\
            background: linear-gradient(135deg, #0A1929 0%, #1A2F42 100%);\
            color: white;\
            display: flex;\
            align-items: center;\
            padding: 8rem 3rem 4rem;\
            position: relative;\
            overflow: hidden;\
        \}\
\
        .hero::before \{\
            content: '';\
            position: absolute;\
            top: 0;\
            left: 0;\
            right: 0;\
            bottom: 0;\
            background: \
                radial-gradient(circle at 20% 30%, rgba(43, 122, 159, 0.15) 0%, transparent 50%),\
                radial-gradient(circle at 80% 70%, rgba(61, 155, 155, 0.15) 0%, transparent 50%);\
        \}\
\
        .hero-container \{\
            max-width: 1400px;\
            margin: 0 auto;\
            display: grid;\
            grid-template-columns: 1fr 1fr;\
            gap: 4rem;\
            align-items: center;\
            position: relative;\
            z-index: 1;\
        \}\
\
        .hero-content h1 \{\
            font-size: 3.5rem;\
            margin-bottom: 1.5rem;\
            line-height: 1.1;\
        \}\
\
        .hero-tagline \{\
            font-size: 1.5rem;\
            font-weight: 700;\
            color: var(--accent-teal);\
            margin-bottom: 1rem;\
            font-family: 'Montserrat', sans-serif;\
        \}\
\
        .hero-description \{\
            font-size: 1.15rem;\
            line-height: 1.8;\
            margin-bottom: 2rem;\
            color: rgba(255, 255, 255, 0.9);\
        \}\
\
        .hero-stats \{\
            display: grid;\
            grid-template-columns: repeat(3, 1fr);\
            gap: 2rem;\
            margin: 3rem 0;\
        \}\
\
        .stat-item \{\
            text-align: center;\
            padding: 1.5rem;\
            background: rgba(255, 255, 255, 0.05);\
            border-radius: 12px;\
            backdrop-filter: blur(10px);\
        \}\
\
        .stat-number \{\
            font-size: 2.5rem;\
            font-weight: 800;\
            color: var(--accent-teal);\
            font-family: 'Montserrat', sans-serif;\
        \}\
\
        .stat-label \{\
            font-size: 0.9rem;\
            color: rgba(255, 255, 255, 0.8);\
            margin-top: 0.5rem;\
        \}\
\
        .hero-visual \{\
            display: flex;\
            justify-content: center;\
            align-items: center;\
        \}\
\
        .shield-container \{\
            width: 400px;\
            height: 400px;\
            background: linear-gradient(135deg, rgba(43, 122, 159, 0.2), rgba(61, 155, 155, 0.2));\
            border-radius: 50%;\
            display: flex;\
            align-items: center;\
            justify-content: center;\
            position: relative;\
            animation: float 6s ease-in-out infinite;\
        \}\
\
        @keyframes float \{\
            0%, 100% \{ transform: translateY(0px); \}\
            50% \{ transform: translateY(-20px); \}\
        \}\
\
        .shield-icon \{\
            font-size: 12rem;\
            opacity: 0.9;\
        \}\
\
        /* Problem Section */\
        .problem-section \{\
            padding: 6rem 3rem;\
            background: white;\
        \}\
\
        .section-container \{\
            max-width: 1400px;\
            margin: 0 auto;\
        \}\
\
        .section-header \{\
            text-align: center;\
            margin-bottom: 4rem;\
        \}\
\
        .section-label \{\
            font-size: 0.9rem;\
            font-weight: 700;\
            color: var(--accent-orange);\
            text-transform: uppercase;\
            letter-spacing: 2px;\
            margin-bottom: 1rem;\
        \}\
\
        .section-title \{\
            font-size: 2.5rem;\
            margin-bottom: 1.5rem;\
            color: var(--dark-navy);\
        \}\
\
        .section-description \{\
            font-size: 1.15rem;\
            color: var(--text-secondary);\
            max-width: 800px;\
            margin: 0 auto;\
        \}\
\
        .problem-grid \{\
            display: grid;\
            grid-template-columns: repeat(2, 1fr);\
            gap: 3rem;\
            margin-top: 3rem;\
        \}\
\
        .problem-card \{\
            padding: 3rem;\
            background: var(--light-grey);\
            border-radius: 16px;\
            transition: transform 0.3s ease, box-shadow 0.3s ease;\
        \}\
\
        .problem-card:hover \{\
            transform: translateY(-5px);\
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);\
        \}\
\
        .problem-card h3 \{\
            font-size: 1.75rem;\
            margin-bottom: 1.5rem;\
            color: var(--dark-navy);\
        \}\
\
        .problem-card.danger \{\
            border-left: 4px solid var(--accent-orange);\
        \}\
\
        .problem-card.slow \{\
            border-left: 4px solid var(--accent-gold);\
        \}\
\
        .problem-list \{\
            list-style: none;\
        \}\
\
        .problem-list li \{\
            padding: 0.75rem 0;\
            padding-left: 2rem;\
            position: relative;\
            color: var(--text-secondary);\
        \}\
\
        .problem-list li::before \{\
            content: '\'d7';\
            position: absolute;\
            left: 0;\
            color: var(--accent-orange);\
            font-size: 1.5rem;\
            font-weight: 700;\
        \}\
\
        /* Solution Section */\
        .solution-section \{\
            padding: 6rem 3rem;\
            background: linear-gradient(135deg, #F5F7FA 0%, #E8EEF3 100%);\
        \}\
\
        .solution-showcase \{\
            display: grid;\
            grid-template-columns: 1fr 1fr;\
            gap: 4rem;\
            align-items: center;\
            margin-top: 4rem;\
        \}\
\
        .solution-feature \{\
            background: white;\
            padding: 2.5rem;\
            border-radius: 16px;\
            margin-bottom: 2rem;\
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);\
            transition: transform 0.3s ease;\
        \}\
\
        .solution-feature:hover \{\
            transform: translateX(10px);\
        \}\
\
        .feature-number \{\
            display: inline-block;\
            width: 50px;\
            height: 50px;\
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-teal));\
            color: white;\
            border-radius: 12px;\
            display: flex;\
            align-items: center;\
            justify-content: center;\
            font-weight: 800;\
            font-size: 1.25rem;\
            margin-bottom: 1.5rem;\
            font-family: 'Montserrat', sans-serif;\
        \}\
\
        .solution-feature h4 \{\
            font-size: 1.35rem;\
            margin-bottom: 1rem;\
            color: var(--dark-navy);\
        \}\
\
        .solution-feature p \{\
            color: var(--text-secondary);\
            line-height: 1.8;\
        \}\
\
        .righttime-visual \{\
            background: white;\
            padding: 3rem;\
            border-radius: 20px;\
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);\
        \}\
\
        .righttime-title \{\
            font-size: 2rem;\
            margin-bottom: 2rem;\
            text-align: center;\
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-teal));\
            -webkit-background-clip: text;\
            -webkit-text-fill-color: transparent;\
            background-clip: text;\
        \}\
\
        .timeline \{\
            position: relative;\
            padding-left: 3rem;\
        \}\
\
        .timeline::before \{\
            content: '';\
            position: absolute;\
            left: 0;\
            top: 0;\
            bottom: 0;\
            width: 3px;\
            background: linear-gradient(180deg, var(--primary-blue), var(--accent-teal));\
        \}\
\
        .timeline-item \{\
            margin-bottom: 2.5rem;\
            position: relative;\
        \}\
\
        .timeline-item::before \{\
            content: '';\
            position: absolute;\
            left: -3.5rem;\
            top: 0.25rem;\
            width: 15px;\
            height: 15px;\
            background: var(--accent-teal);\
            border-radius: 50%;\
            border: 3px solid white;\
            box-shadow: 0 0 0 3px var(--accent-teal);\
        \}\
\
        .timeline-label \{\
            font-size: 0.85rem;\
            font-weight: 700;\
            color: var(--primary-blue);\
            text-transform: uppercase;\
            letter-spacing: 1px;\
            margin-bottom: 0.5rem;\
        \}\
\
        .timeline-item h5 \{\
            font-size: 1.1rem;\
            margin-bottom: 0.5rem;\
            color: var(--dark-navy);\
        \}\
\
        .timeline-item p \{\
            color: var(--text-secondary);\
            font-size: 0.95rem;\
        \}\
\
        /* Platform Section */\
        .platform-section \{\
            padding: 6rem 3rem;\
            background: white;\
        \}\
\
        .platform-grid \{\
            display: grid;\
            grid-template-columns: repeat(3, 1fr);\
            gap: 2.5rem;\
            margin-top: 4rem;\
        \}\
\
        .platform-card \{\
            background: var(--light-grey);\
            padding: 2.5rem;\
            border-radius: 16px;\
            transition: all 0.3s ease;\
            position: relative;\
            overflow: hidden;\
        \}\
\
        .platform-card::before \{\
            content: '';\
            position: absolute;\
            top: 0;\
            left: 0;\
            right: 0;\
            height: 4px;\
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-teal));\
            transform: scaleX(0);\
            transition: transform 0.3s ease;\
        \}\
\
        .platform-card:hover::before \{\
            transform: scaleX(1);\
        \}\
\
        .platform-card:hover \{\
            transform: translateY(-10px);\
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);\
        \}\
\
        .platform-icon \{\
            font-size: 3rem;\
            margin-bottom: 1.5rem;\
        \}\
\
        .platform-card h4 \{\
            font-size: 1.35rem;\
            margin-bottom: 1rem;\
            color: var(--dark-navy);\
        \}\
\
        .platform-card ul \{\
            list-style: none;\
        \}\
\
        .platform-card ul li \{\
            padding: 0.5rem 0;\
            padding-left: 1.5rem;\
            position: relative;\
            color: var(--text-secondary);\
            font-size: 0.95rem;\
        \}\
\
        .platform-card ul li::before \{\
            content: '\uc0\u10003 ';\
            position: absolute;\
            left: 0;\
            color: var(--accent-teal);\
            font-weight: 700;\
        \}\
\
        /* Pricing Section */\
        .pricing-section \{\
            padding: 6rem 3rem;\
            background: linear-gradient(135deg, #0A1929 0%, #1A2F42 100%);\
            color: white;\
        \}\
\
        .pricing-grid \{\
            display: grid;\
            grid-template-columns: repeat(3, 1fr);\
            gap: 2.5rem;\
            margin-top: 4rem;\
        \}\
\
        .pricing-card \{\
            background: rgba(255, 255, 255, 0.05);\
            backdrop-filter: blur(10px);\
            border-radius: 20px;\
            padding: 3rem;\
            transition: all 0.3s ease;\
            border: 2px solid transparent;\
        \}\
\
        .pricing-card:hover \{\
            transform: translateY(-10px);\
            border-color: var(--accent-teal);\
            box-shadow: 0 20px 60px rgba(61, 155, 155, 0.3);\
        \}\
\
        .pricing-card.featured \{\
            background: linear-gradient(135deg, rgba(43, 122, 159, 0.2), rgba(61, 155, 155, 0.2));\
            border: 2px solid var(--accent-teal);\
            transform: scale(1.05);\
        \}\
\
        .pricing-tier \{\
            font-size: 0.9rem;\
            font-weight: 700;\
            color: var(--accent-teal);\
            text-transform: uppercase;\
            letter-spacing: 2px;\
            margin-bottom: 1rem;\
        \}\
\
        .pricing-card h4 \{\
            font-size: 2rem;\
            margin-bottom: 0.5rem;\
        \}\
\
        .pricing-description \{\
            color: rgba(255, 255, 255, 0.7);\
            margin-bottom: 2rem;\
            font-size: 0.95rem;\
        \}\
\
        .price \{\
            font-size: 3rem;\
            font-weight: 800;\
            color: white;\
            font-family: 'Montserrat', sans-serif;\
            margin-bottom: 0.5rem;\
        \}\
\
        .price-period \{\
            color: rgba(255, 255, 255, 0.6);\
            font-size: 0.9rem;\
        \}\
\
        .pricing-features \{\
            list-style: none;\
            margin: 2rem 0;\
        \}\
\
        .pricing-features li \{\
            padding: 0.75rem 0;\
            padding-left: 1.75rem;\
            position: relative;\
            color: rgba(255, 255, 255, 0.9);\
        \}\
\
        .pricing-features li::before \{\
            content: '\uc0\u10003 ';\
            position: absolute;\
            left: 0;\
            color: var(--accent-teal);\
            font-weight: 700;\
        \}\
\
        .pricing-cta \{\
            width: 100%;\
            padding: 1rem;\
            background: rgba(255, 255, 255, 0.1);\
            color: white;\
            border: 2px solid rgba(255, 255, 255, 0.3);\
            border-radius: 8px;\
            font-weight: 600;\
            cursor: pointer;\
            transition: all 0.3s ease;\
            margin-top: 2rem;\
        \}\
\
        .pricing-cta:hover \{\
            background: white;\
            color: var(--dark-navy);\
            border-color: white;\
        \}\
\
        .pricing-card.featured .pricing-cta \{\
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-teal));\
            border: none;\
        \}\
\
        /* CTA Section */\
        .cta-section \{\
            padding: 6rem 3rem;\
            background: linear-gradient(135deg, var(--accent-teal) 0%, var(--primary-blue) 100%);\
            color: white;\
            text-align: center;\
        \}\
\
        .cta-content \{\
            max-width: 800px;\
            margin: 0 auto;\
        \}\
\
        .cta-content h2 \{\
            font-size: 2.75rem;\
            margin-bottom: 1.5rem;\
        \}\
\
        .cta-content p \{\
            font-size: 1.25rem;\
            margin-bottom: 2.5rem;\
            opacity: 0.95;\
        \}\
\
        .cta-buttons \{\
            display: flex;\
            gap: 1.5rem;\
            justify-content: center;\
        \}\
\
        .cta-primary \{\
            background: white;\
            color: var(--primary-blue);\
            padding: 1.25rem 3rem;\
            border-radius: 8px;\
            text-decoration: none;\
            font-weight: 700;\
            font-size: 1.1rem;\
            transition: all 0.3s ease;\
        \}\
\
        .cta-primary:hover \{\
            transform: translateY(-3px);\
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);\
        \}\
\
        .cta-secondary \{\
            background: transparent;\
            color: white;\
            padding: 1.25rem 3rem;\
            border: 2px solid white;\
            border-radius: 8px;\
            text-decoration: none;\
            font-weight: 700;\
            font-size: 1.1rem;\
            transition: all 0.3s ease;\
        \}\
\
        .cta-secondary:hover \{\
            background: white;\
            color: var(--primary-blue);\
        \}\
\
        /* Footer */\
        footer \{\
            background: var(--dark-navy);\
            color: rgba(255, 255, 255, 0.8);\
            padding: 4rem 3rem 2rem;\
        \}\
\
        .footer-container \{\
            max-width: 1400px;\
            margin: 0 auto;\
            display: grid;\
            grid-template-columns: 2fr 1fr 1fr 1fr;\
            gap: 3rem;\
            margin-bottom: 3rem;\
        \}\
\
        .footer-brand h3 \{\
            color: white;\
            font-size: 1.5rem;\
            margin-bottom: 1rem;\
        \}\
\
        .footer-brand p \{\
            line-height: 1.8;\
            margin-bottom: 1.5rem;\
        \}\
\
        .footer-tagline \{\
            font-weight: 700;\
            color: var(--accent-teal);\
            font-family: 'Montserrat', sans-serif;\
        \}\
\
        .footer-section h4 \{\
            color: white;\
            font-size: 1.1rem;\
            margin-bottom: 1.5rem;\
        \}\
\
        .footer-links \{\
            list-style: none;\
        \}\
\
        .footer-links li \{\
            margin-bottom: 0.75rem;\
        \}\
\
        .footer-links a \{\
            color: rgba(255, 255, 255, 0.7);\
            text-decoration: none;\
            transition: color 0.3s ease;\
        \}\
\
        .footer-links a:hover \{\
            color: var(--accent-teal);\
        \}\
\
        .footer-bottom \{\
            text-align: center;\
            padding-top: 2rem;\
            border-top: 1px solid rgba(255, 255, 255, 0.1);\
            color: rgba(255, 255, 255, 0.5);\
        \}\
\
        /* Responsive Design */\
        @media (max-width: 1024px) \{\
            .hero-container \{\
                grid-template-columns: 1fr;\
                text-align: center;\
            \}\
\
            .hero-visual \{\
                display: none;\
            \}\
\
            .solution-showcase \{\
                grid-template-columns: 1fr;\
            \}\
\
            .platform-grid \{\
                grid-template-columns: 1fr;\
            \}\
\
            .pricing-grid \{\
                grid-template-columns: 1fr;\
            \}\
\
            .pricing-card.featured \{\
                transform: scale(1);\
            \}\
\
            .footer-container \{\
                grid-template-columns: 1fr;\
            \}\
        \}\
\
        @media (max-width: 768px) \{\
            .nav-links \{\
                display: none;\
            \}\
\
            .hero-content h1 \{\
                font-size: 2.5rem;\
            \}\
\
            .hero-stats \{\
                grid-template-columns: 1fr;\
            \}\
\
            .problem-grid \{\
                grid-template-columns: 1fr;\
            \}\
\
            .cta-buttons \{\
                flex-direction: column;\
            \}\
        \}\