.hero {
    text-align: center;
    padding: 3rem 1rem;
    background-color: #121212;
    color: white;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.security-badge {
    background-color: #00bfff;
    color: #000;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.5);
    margin-bottom: 1rem;
}

.hero-logo {
    width: 150px;
    height: auto;
    margin: 1rem 0;
}



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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    color: #ffffff;
    overflow-x: hidden;
    min-height: 100vh;
    line-height: 1.6;
}

/* Animated Background Pattern */
.bg-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.1;
}

    .bg-pattern::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(239, 68, 68, 0.3) 0%, transparent 50%);
        animation: float 20s ease-in-out infinite;
    }

    .bg-pattern::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, transparent 49%, rgba(59, 130, 246, 0.1) 50%, transparent 51%), linear-gradient(-45deg, transparent 49%, rgba(147, 51, 234, 0.1) 50%, transparent 51%);
        background-size: 60px 60px;
        animation: slide 15s linear infinite;
    }

@@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

@@keyframes slide {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 60px 60px, -60px 60px;
    }
}

/* Hero Section */
/*.hero {
    background: linear-gradient(to bottom right, #000000, #0e0e0e, #001f33);
    text-align: center;
    padding: 6rem 2rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

    .hero img {
        width: 160px;
        border-radius: 16px;
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
        margin-bottom: 1rem;
        animation: pulse 2s infinite;
    }*/

@@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.security-badge {
    display: inline-block;
    background: linear-gradient(45deg, #dc2626, #ef4444);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2rem;
    letter-spacing: 1px;
}

.hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: #00bfff;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
    font-weight: 700;
    text-shadow: 0 0 12px #00bfff;
}

    .hero h1::before {
        content: attr(data-text);
        position: absolute;
        top: 2px;
        left: 2px;
        color: #9333ea;
        z-index: -1;
        opacity: 0.7;
    }

    .hero h1::after {
        content: attr(data-text);
        position: absolute;
        top: -2px;
        left: -2px;
        color: #ef4444;
        z-index: -2;
        opacity: 0.7;
    }

.hero p {
    font-size: 1.2rem;
    color: #ccc;
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    width: 250px;
    text-align: center;
}

.btn-primary {
    background: linear-gradient(45deg, #3b82f6, #9333ea);
    color: white;
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-access {
    background: linear-gradient(45deg, #059669, #10b981);
    color: white;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

/* Section Styling */
.section {
    padding: 5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-alt {
    background: rgba(0, 0, 0, 0.2);
}

.section h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #00bfff;
    margin-bottom: 3rem;
    position: relative;
    font-weight: 700;
}

    .section h2::after {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(45deg, #3b82f6, #9333ea, #ef4444);
        border-radius: 2px;
    }

.section p {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ddd;
    text-align: center;
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    background: rgba(45, 45, 45, 0.6);
    padding: 2.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .feature-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(45deg, #3b82f6, #9333ea, #ef4444);
    }

    .feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        border-color: rgba(59, 130, 246, 0.3);
        background: rgba(45, 45, 45, 0.8);
    }

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: block;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #ffffff;
    font-weight: 600;
}

.feature-card p {
    color: #cccccc;
    line-height: 1.7;
    text-align: left;
}

/* Access Keys Grid */
.access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.access-card {
    background: rgba(45, 45, 45, 0.8);
    padding: 3rem 2rem;
    border-radius: 20px;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    text-align: center;
}

    .access-card.permanent {
        border-color: #059669;
        box-shadow: 0 0 30px rgba(5, 150, 105, 0.2);
    }

    .access-card.temporary {
        border-color: #f59e0b;
        box-shadow: 0 0 30px rgba(245, 158, 11, 0.2);
    }

    .access-card.trial {
        border-color: #8b5cf6;
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
    }

    .access-card:hover {
        transform: translateY(-5px);
    }

    .access-card h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }

.price {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

    .price.permanent {
        color: #10b981;
    }

    .price.temporary {
        color: #f59e0b;
    }

    .price.trial {
        color: #8b5cf6;
    }

.access-card ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.access-card li {
    padding: 0.5rem 0;
    color: #cccccc;
}

    .access-card li::before {
        content: '✓';
        color: #10b981;
        font-weight: bold;
        margin-right: 0.5rem;
    }

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.stat-item {
    text-align: center;
    padding: 2rem 1rem;
}

.stat-number {
    font-size: 3rem;
    font-weight: bold;
    background: linear-gradient(45deg, #3b82f6, #9333ea, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #cccccc;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Tech Grid */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.tech-item {
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(45, 45, 45, 0.4);
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .tech-item:hover {
        background: rgba(59, 130, 246, 0.1);
        transform: translateY(-5px);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .tech-item h4 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
        color: #ffffff;
    }

    .tech-item p {
        color: #cccccc;
        font-size: 0.9rem;
    }

/* Footer */
.footer {
    padding: 3rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(26, 26, 26, 0.9);
    margin-top: 4rem;
    color: #777;
}

    .footer p {
        margin-bottom: 1rem;
        color: #cccccc;
        line-height: 1.6;
    }

    .footer a {
        color: #3b82f6;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .footer a:hover {
            color: #60a5fa;
        }

/* Responsive Design */
@@media (max-width: 768px) {
    .hero {
        padding: 4rem 1rem 3rem;
    }

    .section {
        padding: 3rem 1rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 300px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .access-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@@media (max-width: 480px) {
    .stats-grid, .tech-grid {
        grid-template-columns: 1fr;
    }
}
body {
    background-color: #0e0e0e;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

/* Navbar */
.navbar {
    background-color: #0e0e0e !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* No 'text-align: right;' needed here, Flexbox handles alignment */
}

.navbar-brand,
.navbar-nav .nav-link {
    color: white !important;
    font-weight: 500;
    transition: color 0.3s ease;
}

    .navbar-brand:hover,
    .navbar-nav .nav-link:hover {
        color: #00bfff !important;
        text-shadow: 0 0 6px #00bfff;
    }

.navbar-toggler-icon {
    /* This is the default Bootstrap 5 hamburger SVG data URI */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    
    /* Ensure other critical properties are not being overridden */
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important; /* Ensure it scales correctly */
    
    /* You can also set a color for the lines if you want, e.g., white for dark background */
    /* stroke: white; */ /* This would be for the SVG path, not directly here. The rgba(0,0,0,.55) in the SVG is the default color. You can change that in the data URI itself or use CSS variables if Bootstrap supports them for the icon */
    
    /* If you want a white hamburger on a dark background, change the rgba in the SVG */
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; */
}

/* Also, ensure your navbar-toggler itself has dimensions if it's completely missing */
.navbar-toggler {
    width: 45px; /* Adjust as needed */
    height: 45px; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Bootstrap default often has padding */
    border: none; /* If you don't want a border */
}

/* Footer (no change needed here for this request) */
footer.footer {
    background-color: #0e0e0e;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 0;
    text-align: center;
    color: #ccc;
}

    footer.footer a {
        color: #00bfff;
        text-decoration: none;
    }

        footer.footer a:hover {
            text-decoration: underline;
        }