* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        body {

            font-family: 'Arial', sans-serif;

            background: linear-gradient(135deg, #0a0f1c 0%, #1a2332 50%, #0f1419 100%);

            color: white;

            min-height: 100vh;

            overflow-x: hidden;

        }

        html {

            scroll-behavior: smooth;

        }

        /* Header Styles */

        .header {

            position: fixed;

            top: 0;

            width: 100%;

            background: rgba(10, 15, 28, 0.9);

            backdrop-filter: blur(10px);

            z-index: 1000;

            padding: 1rem 0;

            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;

        }

        .nav {

            display: flex;

            justify-content: space-between;

            align-items: center;

            max-width: 1200px;

            margin: 0 auto;

            padding: 0 2rem;

        }

        .logo {

            display: flex;

            align-items: center;

            gap: 10px;

        }

        .logo-image {

            height: 45px;

            width: auto;

            transition: transform 0.3s ease;

        }

        .logo-image:hover {

            transform: scale(1.05);

        }

        .brand-text {

            font-weight: bold;

            font-size: 1.2rem;

            color: #00bcd4;

            margin-left: 10px;

            text-shadow: 0 0 10px rgba(0, 188, 212, 0.3);

        }

        .nav-menu {

            display: flex;

            list-style: none;

            align-items: center;

            gap: 2rem;

        }

        .nav-link {

            color: white;

            text-decoration: none;

            font-weight: 500;

            transition: color 0.3s ease;

        }

        .nav-link:hover {

            color: #00bcd4;

        }

        .nav-btn {

            background: linear-gradient(45deg, #00bcd4, #2196f3);

            color: white;

            padding: 0.5rem 1rem;

            border-radius: 8px;

            text-decoration: none;

            font-weight: 600;

            transition: transform 0.3s ease;

        }

        .nav-btn:hover {

            transform: translateY(-2px);

        }

        /* Dropdown Styles */

        .dropdown {

            position: relative;

        }

        .dropdown-btn {

            display: flex;

            align-items: center;

            gap: 0.5rem;

        }

        .dropdown-arrow {

            font-size: 0.8rem;

            transition: transform 0.3s ease;

        }

        .dropdown:hover .dropdown-arrow {

            transform: rotate(180deg);

        }

        .dropdown-content {

            position: absolute;

            top: 100%;

            right: 0;

            background: rgba(10, 15, 28, 0.95);

            backdrop-filter: blur(15px);

            border: 2px solid rgba(0, 188, 212, 0.3);

            border-radius: 12px;

            min-width: 140px;

            opacity: 0;

            visibility: hidden;

            transform: translateY(-10px);

            transition: all 0.3s ease;

            z-index: 1001;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

        }

        .dropdown:hover .dropdown-content {

            opacity: 1;

            visibility: visible;

            transform: translateY(0);

        }

        .dropdown-link {

            display: block;

            padding: 0.8rem 1.2rem;

            color: white;

            text-decoration: none;

            font-weight: 500;

            transition: all 0.3s ease;

            border-radius: 8px;

            margin: 0.3rem;

        }

        .dropdown-link:hover {

            background: linear-gradient(45deg, #00bcd4, #2196f3);

            color: white;

            transform: translateX(3px);

        }

        /* Hero Section */

        .hero {

            padding: 150px 2rem 100px;

            max-width: 1200px;

            margin: 0 auto;

        }

        .hero-content {

            max-width: 600px;

        }

        .hero-title {

            font-size: clamp(2.5rem, 5vw, 4rem);

            font-weight: bold;

            line-height: 1.1;

            margin-bottom: 1.5rem;

            background: linear-gradient(45deg, #fff, #00bcd4);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

            text-shadow: 0 0 30px rgba(0, 188, 212, 0.3);

        }

        .hero-subtitle {

            font-size: 1.2rem;

            line-height: 1.5;

            margin-bottom: 2rem;

            color: #a0aec0;

        }

        .price-highlight {

            color: #00bcd4;

            font-weight: bold;

        }

        .hero-buttons {

            display: flex;

            gap: 1rem;

            flex-wrap: wrap;

        }

        .btn {

            padding: 1rem 2rem;

            border-radius: 8px;

            text-decoration: none;

            font-weight: 600;

            transition: all 0.3s ease;

            border: none;

            cursor: pointer;

            display: inline-block;

        }

        .btn-primary {

            background: linear-gradient(45deg, #00e676, #4caf50);

            color: white;

        }

        .btn-primary:hover {

            transform: translateY(-3px);

            box-shadow: 0 10px 25px rgba(0, 230, 118, 0.3);

        }

        .btn-secondary {

            background: transparent;

            color: white;

            border: 2px solid #00bcd4;

        }

        .btn-secondary:hover {

            background: #00bcd4;

            transform: translateY(-2px);

        }

        /* Features Section */

        .features {

            padding: 100px 2rem;

            max-width: 1200px;

            margin: 0 auto;

        }

        .section-title {

            text-align: center;

            font-size: 2.5rem;

            font-weight: bold;

            margin-bottom: 3rem;

            color: white;

        }

        .features-grid {

            display: flex;

            justify-content: space-between;

            align-items: stretch;

            gap: 2rem;

            flex-wrap: nowrap;

            margin-bottom: 0;

        }

        .feature-card {

            text-align: center;

            padding: 2rem 1rem;

            flex: 1;

            min-width: 200px;

            border: 2px solid rgba(0, 188, 212, 0.3);

            border-radius: 16px;

            background: rgba(26, 35, 50, 0.5);

            backdrop-filter: blur(10px);

            transition: all 0.3s ease;

        }

        .feature-card:hover {

            border-color: #00bcd4;

            background: rgba(0, 188, 212, 0.1);

            transform: translateY(-5px);

            box-shadow: 0 10px 30px rgba(0, 188, 212, 0.2);

        }

        .feature-icon {

            font-size: 3rem;

            margin-bottom: 1rem;

            background: linear-gradient(45deg, #00bcd4, #2196f3);

            width: 80px;

            height: 80px;

            border-radius: 16px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 0 auto 1rem;

            border: 2px solid rgba(0, 188, 212, 0.3);

        }

        .feature-card h3 {

            font-size: 1.2rem;

            font-weight: bold;

            color: white;

            line-height: 1.3;

        }

        /* Enhanced Pricing Section */

        .pricing {

            padding: 100px 2rem;

            max-width: 1200px;

            margin: 0 auto;

        }

        .pricing-grid {

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 2rem;

            margin-top: 3rem;

        } 

        .pricing-card {

            background: rgba(26, 35, 50, 0.8);

            border: 2px solid rgba(0, 188, 212, 0.3);

            border-radius: 20px;

            padding: 0;

            text-align: center;

            transition: all 0.3s ease;

            position: relative;

            overflow: hidden;

            width: 100%;

            max-width: 400px;

        }

        .pricing-card::before {

            content: '';

            position: absolute;

            top: -50%;

            left: -50%;

            width: 200%;

            height: 200%;

            background: radial-gradient(circle, rgba(0, 188, 212, 0.1) 0%, transparent 70%);

            opacity: 0;

            transition: opacity 0.3s ease;

            pointer-events: none;

            z-index: 1;

        }

        .pricing-card:hover::before {

            opacity: 1;

        }

        .pricing-card > * {

            position: relative;

            z-index: 2;

        }

        .pricing-card.featured {

            border-color: #00bcd4;

            background: rgba(0, 188, 212, 0.1);

        }

        .pricing-card:hover {

            transform: translateY(-10px);

            border-color: #00bcd4;

            box-shadow: 0 20px 40px rgba(0, 188, 212, 0.2);

        }

        /* Package Image Styles */

        .package-image {

            width: 100%;

            height: 200px;

            background: linear-gradient(135deg, #1a2332, #0f1419);

            border-radius: 20px 20px 0 0;

            display: flex;

            align-items: center;

            justify-content: center;

            position: relative;

            overflow: hidden;

            margin-bottom: 0;

        }

        .package-image::before {

            content: '';

            position: absolute;

            width: 100%;

            height: 100%;

            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');

            opacity: 0.3;

        }

        .package-icon {

            font-size: 4rem;

            color: #00bcd4;

            text-shadow: 0 0 20px rgba(0, 188, 212, 0.5);

            z-index: 2;

            position: relative;

            animation: float 3s ease-in-out infinite;

        }

        .package-icon.lite {

            filter: drop-shadow(0 0 15px rgba(76, 175, 80, 0.5));

        }

        .package-icon.basic {

            filter: drop-shadow(0 0 15px rgba(0, 188, 212, 0.5));

        }

        .package-icon.ultra {

            filter: drop-shadow(0 0 15px rgba(156, 39, 176, 0.5));

        }

        @keyframes float {

            0%, 100% { transform: translateY(0px); }

            50% { transform: translateY(-10px); }

        }

        .package-details {

            padding: 2rem;

        }

        .plan-name {

            font-size: 1.5rem;

            font-weight: bold;

            margin-bottom: 0.5rem;

            color: white;

        }

        .plan-ram {

            color: #a0aec0;

            margin-bottom: 1rem;

        }

        .plan-price {

            font-size: 2rem;

            font-weight: bold;

            color: #00bcd4;

            margin-bottom: 0.5rem;

        }

        .plan-desc {

            color: #a0aec0;

            margin-bottom: 2rem;

        }

        .plan-features {

            list-style: none;

            padding: 0;

            margin-bottom: 2rem;

            text-align: left;

        }

        .plan-features li {

            padding: 0.5rem 0;

            color: #a0aec0;

            display: flex;

            align-items: center;

            gap: 0.5rem;

        }

        .plan-features li::before {

            content: '✓';

            color: #00bcd4;

            font-weight: bold;

            font-size: 1.2rem;

        }

        /* FAQ Section */

        .faq {

            padding: 100px 2rem;

            max-width: 1200px;

            margin: 0 auto;

        }

        .faq-container {

            max-width: 800px;

            margin: 0 auto;

        }

        .faq-item {

            background: rgba(26, 35, 50, 0.8);

            border: 2px solid rgba(0, 188, 212, 0.3);

            border-radius: 12px;

            margin-bottom: 1rem;

            overflow: hidden;

            transition: all 0.3s ease;

        }

        .faq-item:hover {

            border-color: #00bcd4;

            transform: translateY(-2px);

        }

        .faq-question {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 1.5rem;

            cursor: pointer;

            transition: background 0.3s ease;

        }

        .faq-question:hover {

            background: rgba(0, 188, 212, 0.1);

        }

        .faq-question p {

            color: white;

            font-size: 1.1rem;

            font-weight: 600;

            margin: 0;

        }

        .faq-toggle {

            color: #00bcd4;

            font-size: 1.5rem;

            font-weight: bold;

            transition: transform 0.3s ease;

        }

        .faq-item.active .faq-toggle {

            transform: rotate(45deg);

        }

        .faq-answer {

            max-height: 0;

            overflow: hidden;

            transition: all 0.3s ease;

            background: rgba(0, 188, 212, 0.05);

        }

        .faq-item.active .faq-answer {

            max-height: 200px;

            padding: 0 1.5rem 1.5rem;

        }

        .faq-answer p {

            color: #a0aec0;

            font-size: 1rem;

            line-height: 1.6;

            margin: 0;

            padding-top: 0.5rem;

        }

        /* Footer */

        .footer {

            padding: 3rem 2rem 2rem;

            max-width: 1200px;

            margin: 0 auto;

            border-top: 1px solid rgba(0, 188, 212, 0.3);

        }

        .footer-content {

            display: flex;

            justify-content: space-between;

            align-items: center;

            flex-wrap: wrap;

            gap: 1rem;

        }

        .footer-links {

            display: flex;

            gap: 2rem;

        }

        .footer-btn {

            display: flex;

            align-items: center;

            gap: 0.5rem;

            background: rgba(0, 188, 212, 0.1);

            color: #00bcd4;

            padding: 0.6rem 1rem;

            border-radius: 8px;

            text-decoration: none;

            font-weight: 500;

            transition: all 0.3s ease;

            border: 1px solid rgba(0, 188, 212, 0.3);

        }

        .footer-btn:hover {

            background: rgba(0, 188, 212, 0.2);

            color: white;

            transform: translateY(-2px);

        }

        .footer-icon {

            width: 20px;

            height: 20px;

        }

        .copyright {

            color: #a0aec0;

            font-size: 0.9rem;

        }

        /* Mobile menu toggle */

        .mobile-menu-toggle {

            display: none;

            background: none;

            border: none;

            color: white;

            font-size: 1.5rem;

            cursor: pointer;

        }

        /* Responsive Design */

        @media (max-width: 768px) {

            .nav {

                padding: 0 1rem;

            }

            

            .nav-menu {

                display: none;

                position: absolute;

                top: 100%;

                left: 0;

                right: 0;

                background: rgba(10, 15, 28, 0.95);

                backdrop-filter: blur(10px);

                flex-direction: column;

                padding: 1rem 2rem;

                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

            }

            

            .nav-menu.mobile-active {

                display: flex;

            }

            

            .mobile-menu-toggle {

                display: block;

            }

            

            .hero {

                padding: 120px 1rem 80px;

                text-align: center;

            }

            

            .hero-title {

                font-size: clamp(2rem, 8vw, 3rem);

            }

            

            .hero-buttons {

                justify-content: center;

                flex-direction: column;

                align-items: center;

            }

            

            .btn {

                width: 100%;

                max-width: 280px;

            }

            

            .features-grid {

                flex-direction: column;

                gap: 1.5rem;

            }

            

            .feature-card {

                padding: 1.5rem 1rem;

            }

            

            .pricing-grid {

                gap: 1.5rem;

            }

            

            .section-title {

                font-size: clamp(1.8rem, 6vw, 2.5rem);

                margin-bottom: 2rem;

            }

            

            .footer-content {

                flex-direction: column;

                text-align: center;

                gap: 1.5rem;

            }

            

            .footer-links {

                justify-content: center;

            }

        }