:root {
            --bg: #0d1117;
            --bg-elevated: #161b22;
            --bg-card: #1c2129;
            --fg: #f0f6fc;
            --fg-muted: #8b949e;
            --accent: #3b82f6;
            --accent-glow: rgba(59, 130, 246, 0.15);
            --border: rgba(139, 148, 158, 0.15);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html {
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) var(--bg);
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg);
            color: var(--fg);
            overflow-x: hidden;
        }

        /* Animated grid background */
        .grid-bg {
            position: fixed;
            inset: 0;
            z-index: 0;
            background-image:
                 linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
                 linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 30%, transparent 100%);
        }

        /* Floating orbs */
        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.4;
            animation: orbFloat 20s ease-in-out infinite;
        }
        .orb-1 {
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 70%);
            top: -100px; left: -100px;
            animation-delay: 0s;
        }
        .orb-2 {
            width: 300px; height: 300px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent 70%);
            top: 200px; right: -50px;
            animation-delay: -7s;
            animation-duration: 25s;
        }
        .orb-3 {
            width: 250px; height: 250px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 70%);
            bottom: 100px; left: 20%;
            animation-delay: -14s;
            animation-duration: 30s;
        }

        @keyframes orbFloat {
            0%, 100% { transform: translate(0, 0) scale(1); }
            25% { transform: translate(30px, -40px) scale(1.05); }
            50% { transform: translate(-20px, 20px) scale(0.95); }
            75% { transform: translate(15px, 30px) scale(1.02); }
        }

        /* Nav styles */
        .nav-scrolled {
            background: rgba(13, 17, 23, 0.85) !important;
            backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid var(--border);
        }

        .nav-link {
            position: relative;
            color: var(--fg-muted);
            transition: color 0.3s ease;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px; left: 0;
            width: 0; height: 2px;
            background: var(--accent);
            transition: width 0.3s ease;
        }
        .nav-link:hover { color: var(--fg); }
        .nav-link:hover::after { width: 100%; }

        /* Button styles */
        .btn-primary {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            color: white;
            padding: 12px 28px;
            border-radius: 10px;
            font-weight: 600;
            font-family: 'Space Grotesk', sans-serif;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .btn-primary::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(59, 130, 246, 0.35);
        }
        .btn-primary:hover::before { opacity: 1; }

        .btn-secondary {
            background: transparent;
            color: var(--fg);
            padding: 12px 28px;
            border-radius: 10px;
            font-weight: 600;
            font-family: 'Space Grotesk', sans-serif;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            border-color: var(--accent);
            background: var(--accent-glow);
            transform: translateY(-2px);
        }

        /* Feature cards */
        .feature-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 32px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-6px);
            border-color: rgba(59, 130, 246, 0.3);
            box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px var(--accent-glow);
        }
        .feature-card:hover::before { opacity: 1; }

        .feature-icon {
            width: 52px; height: 52px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            background: var(--accent-glow);
            color: var(--accent);
            font-size: 22px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        .feature-card:hover .feature-icon {
            background: var(--accent);
            color: white;
            transform: scale(1.1);
        }

        /* Dashboard mockup */
        .dashboard-mock {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 60px var(--accent-glow);
        }
        .dash-topbar {
            background: var(--bg-card);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid var(--border);
        }
        .dot { width: 10px; height: 10px; border-radius: 50%; }
        .dot-r { background: #ff5f57; }
        .dot-y { background: #febc2e; }
        .dot-g { background: #28c840; }

        /* Stat counter */
        .stat-item {
            text-align: center;
            padding: 32px;
        }
        .stat-number {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 3rem;
            font-weight: 700;
            color: var(--accent);
            line-height: 1;
        }

        /* Step cards */
        .step-card {
            position: relative;
            padding: 40px 32px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            transition: all 0.3s ease;
        }
        .step-card:hover {
            border-color: rgba(59, 130, 246, 0.3);
            transform: translateY(-4px);
        }
        .step-number {
            width: 48px; height: 48px;
            border-radius: 50%;
            background: var(--accent-glow);
            color: var(--accent);
            display: flex; align-items: center; justify-content: center;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 1.25rem;
            margin-bottom: 20px;
        }

        /* Pricing cards */
        .pricing-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 40px 32px;
            transition: all 0.4s ease;
            position: relative;
        }
        .pricing-card.featured {
            border-color: var(--accent);
            background: linear-gradient(180deg, rgba(22,179,100,0.05), var(--bg-card));
        }
        .pricing-card.featured::before {
            content: 'Most Popular';
            position: absolute;
            top: -14px; left: 50%;
            transform: translateX(-50%);
            background: var(--accent);
            color: white;
            padding: 4px 20px;
            border-radius: 20px;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 0.8rem;
            letter-spacing: 0.05em;
        }
        .pricing-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }

        .price-value {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 3rem;
            font-weight: 700;
        }

        .check-icon { color: var(--accent); margin-right: 10px; }

        /* Testimonial card */
        .testimonial-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 32px;
            transition: all 0.3s ease;
        }
        .testimonial-card:hover {
            border-color: rgba(59, 130, 246, 0.2);
            transform: translateY(-4px);
        }

        /* Reveal animations */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }

        /* Marquee */
        .marquee-track {
            display: flex;
            animation: marquee 30s linear infinite;
            width: max-content;
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Mini chart bars animation */
        .bar-animate {
            animation: barGrow 1.5s ease-out forwards;
            transform-origin: bottom;
        }
        @keyframes barGrow {
            from { transform: scaleY(0); }
            to { transform: scaleY(1); }
        }

        /* Pulse ring */
        .pulse-ring {
            position: relative;
        }
        .pulse-ring::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid var(--accent);
            animation: pulseRing 2s ease-out infinite;
        }
        @keyframes pulseRing {
            0% { transform: scale(1); opacity: 0.6; }
            100% { transform: scale(1.5); opacity: 0; }
        }

        /* Mobile nav */
        .mobile-menu {
            position: fixed;
            inset: 0;
            background: rgba(13, 17, 23, 0.95);
            backdrop-filter: blur(20px);
            z-index: 100;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 32px;
            transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .mobile-menu.open { transform: translateX(0); }
        .mobile-menu a {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--fg);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .mobile-menu a:hover { color: var(--accent); }

        /* Ticker bar */
        .ticker-bar {
            background: var(--bg-elevated);
            border-bottom: 1px solid var(--border);
            overflow: hidden;
            white-space: nowrap;
            padding: 10px 0;
        }
        .ticker-bar span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0 32px;
            font-size: 0.8rem;
            color: var(--fg-muted);
            font-weight: 500;
        }
        .ticker-bar .accent { color: var(--accent); font-weight: 700; }

        /* Table inside dashboard */
        .mini-table th {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--fg-muted);
            font-weight: 600;
            padding: 8px 12px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }
        .mini-table td {
            font-size: 0.75rem;
            padding: 8px 12px;
            color: var(--fg);
            border-bottom: 1px solid var(--border);
        }
        .mini-table tr:last-child td { border-bottom: none; }

        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: 0.65rem;
            font-weight: 600;
        }
        .status-in { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
        .status-low { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
        .status-out { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

        /* Progress bar */
        .progress-bar {
            height: 6px;
            border-radius: 3px;
            background: rgba(255,255,255,0.05);
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--accent), #2563eb);
            transition: width 1.5s ease;
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: #2d333b; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
        }

        @media (max-width: 768px) {
            .stat-number { font-size: 2rem; }
            .price-value { font-size: 2.25rem; }
            .dashboard-mock { margin: 0 -16px; border-radius: 12px; }
        }