:root {
            --primary: #00ff9f;
            --accent: #ff00aa;
            --dark-bg: #0d0e14;
            --card-bg: #11111a;
        }

        body {
            background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
            color: #eee;
            font-family: 'Segoe UI', system-ui, sans-serif;
            overflow-x: hidden;
        }

        .navbar {
            background: rgba(17, 17, 30) !important;
            backdrop-filter: blur(12px);
            border-bottom: 2px solid var(--primary);
        }

        .card {
            color: #ffffff;
        }
        .nav-link {
            color: #ccc !important;
            transition: all 0.3s;
        }
        .nav-link:hover {
            color: var(--primary) !important;
            transform: translateY(-2px);
        }

        .hero {
            height: 50vh;
            background: linear-gradient(rgba(10,10,15,0.85), rgba(10,10,15,0.92)), url('/img/bg.png') center/cover no-repeat;
            display: flex;
            align-items: center;
            position: relative;
        }

        .hero-content {
            max-width: 1100px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 4.8rem;
            font-weight: 900;
            background: linear-gradient(90deg, #45ff4b, #ff9900, #ff0000);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.05;
            text-shadow: 0 0 60px rgba(0, 255, 159, 0.4);
        }

        .hero p {
            font-size: 1.35rem;
            opacity: 0.95;
            margin: 1.5rem 0 2rem;
            max-width: 620px;
        }

        a {
            color: rgb(255 255 255);
            text-decoration: none;
        }
        .btn-primary {
            background: linear-gradient(45deg, var(--primary), #00cc80);
            border: none;
            padding: 14px 42px;
            font-size: 1.25rem;
            font-weight: 700;
            border-radius: 50px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 10px 30px rgba(0, 255, 159, 0.3);
        }
        .btn-primary:hover {
            transform: scale(1.08) translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 255, 159, 0.5);
        }

        .section {
            padding: 100px 0;
        }

        .card {
            background: var(--card-bg);
            border: none;
            border-radius: 24px;
            overflow: hidden;
            transition: all 0.4s;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }
        .card:hover {
            transform: translateY(-15px) scale(1.03);
            box-shadow: 0 30px 60px rgba(0, 255, 159, 0.15);
        }

        .feature-icon {
            font-size: 3.8rem;
            margin-bottom: 1rem;
            color: var(--primary);
        }

        .pricing-table {
            max-width: 1100px;
            margin: 0 auto;
        }


        .bg-dark {
            --bs-bg-opacity: 1;
            background-color: #0d0e14 !important;
        }

        .plan-card {
            transition: all 0.3s;
        }
        .plan-card.popular {
            border: 4px solid var(--accent);
            transform: scale(1.08);
            z-index: 10;
            box-shadow: 0 0 0 12px rgba(255, 0, 170, 0.25);
        }
        .plan-card.popular .plan-name {
            background: var(--accent);
            color: white;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 700;
            display: inline-block;
            margin: -40px auto 20px;
        }

        footer {
            background: #05050a;
            padding: 80px 0 30px;
        }

        .logo-text {
            font-size: 2rem;
            font-weight: 900;
            background: linear-gradient(90deg, var(--primary), #ff00aa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }