@charset "utf-8";

/* CSS Document */



 * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        :root {

            --primary-grey: #e5e7eb;

            --primary-orange: #f97316;

            --primary-purple: #7c3aed;

            --secondary-amber: #fbbf24;

            --dark-bg: #1a0b2e;

            --darker-bg: #0f051a;

            --card-bg: rgba(229, 231, 235, 0.03);

            --border-color: rgba(229, 231, 235, 0.2);

            --text-primary: #ffffff;

            --text-secondary: #a1a1aa;

            --primary-cyan: #00ffff;

            --primary-pink: #ff00ff;

        }



        body {

            font-family: 'JetBrains Mono', 'Fira Code', monospace;

            background: var(--darker-bg);

            color: var(--text-primary);

            line-height: 1.6;

            overflow-x: hidden;

        }



        /* Enhanced Cyberpunk Background */

        .cyber-bg {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: var(--darker-bg);

            overflow: hidden;

            z-index: -5;

        }



        /* Animated gradient background */

        .cyber-gradient {

            position: absolute;

            top: -50%;

            left: -50%;

            width: 200%;

            height: 200%;

            background: 

                radial-gradient(circle at 20% 30%, rgba(0, 255, 255, 0.15) 0%, transparent 50%),

                radial-gradient(circle at 80% 70%, rgba(255, 0, 255, 0.15) 0%, transparent 50%),

                radial-gradient(circle at 40% 80%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),

                radial-gradient(circle at 60% 20%, rgba(249, 115, 22, 0.15) 0%, transparent 50%);

            animation: gradientRotate 30s linear infinite;

            filter: blur(40px);

        }



        @keyframes gradientRotate {

            0% { transform: rotate(0deg) scale(1); }

            50% { transform: rotate(180deg) scale(1.2); }

            100% { transform: rotate(360deg) scale(1); }

        }



        /* Matrix rain effect */

        .matrix-rain {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            overflow: hidden;

            opacity: 0.15;

        }



        .matrix-column {

            position: absolute;

            top: -100vh;

            font-family: 'Courier New', monospace;

            font-size: 14px;

            color: var(--primary-cyan);

            text-shadow: 0 0 5px var(--primary-cyan);

            animation: matrixFall linear infinite;

            writing-mode: vertical-rl;

            text-orientation: upright;

            background: linear-gradient(to bottom, transparent 0%, var(--primary-cyan) 50%, transparent 100%);

            -webkit-background-clip: text;

            background-clip: text;

            -webkit-text-fill-color: transparent;

        }



        .matrix-column:nth-child(3n) {

            color: var(--primary-pink);

            text-shadow: 0 0 5px var(--primary-pink);

            background: linear-gradient(to bottom, transparent 0%, var(--primary-pink) 50%, transparent 100%);

        }



        .matrix-column:nth-child(5n) {

            color: var(--primary-purple);

            text-shadow: 0 0 5px var(--primary-purple);

            background: linear-gradient(to bottom, transparent 0%, var(--primary-purple) 50%, transparent 100%);

        }



        @keyframes matrixFall {

            0% { transform: translateY(0); }

            100% { transform: translateY(200vh); }

        }



        /* Animated grid overlay */

        .grid-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            z-index: -2;

        }



        .grid-lines {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-image: 

                linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),

                linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);

            background-size: 50px 50px;

            animation: gridMove 20s linear infinite;

        }



        .grid-glow {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-image: 

                linear-gradient(rgba(255, 0, 255, 0.03) 2px, transparent 2px),

                linear-gradient(90deg, rgba(255, 0, 255, 0.03) 2px, transparent 2px);

            background-size: 100px 100px;

            animation: gridMove 30s linear infinite reverse;

        }



        @keyframes gridMove {

            0% { transform: translate(0, 0); }

            100% { transform: translate(50px, 50px); }

        }



        /* Floating particles */

        .particles {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            overflow: hidden;

            z-index: -3;

        }



        .particle {

            position: absolute;

            width: 4px;

            height: 4px;

            background: var(--primary-cyan);

            border-radius: 50%;

            box-shadow: 0 0 10px var(--primary-cyan);

            animation: float 20s infinite;

            opacity: 0;

            transition: transform 0.3s ease, box-shadow 0.3s ease;

        }



        .particle:nth-child(odd) {

            background: var(--primary-pink);

            box-shadow: 0 0 10px var(--primary-pink);

            animation-duration: 25s;

        }



        @keyframes float {

            0% {

                transform: translateY(100vh) translateX(0);

                opacity: 0;

            }

            10% {

                opacity: 1;

            }

            90% {

                opacity: 1;

            }

            100% {

                transform: translateY(-100vh) translateX(100px);

                opacity: 0;

            }

        }



        /* Glowing orbs */

        .orb {

            position: fixed;

            border-radius: 50%;

            filter: blur(80px);

            opacity: 0.5;

            animation: orbFloat 20s ease-in-out infinite;

            pointer-events: none;

            z-index: -4;

        }



        .orb1 {

            width: 300px;

            height: 300px;

            background: var(--primary-cyan);

            top: 10%;

            left: -150px;

            animation-delay: 0s;

        }



        .orb2 {

            width: 400px;

            height: 400px;

            background: var(--primary-pink);

            bottom: 10%;

            right: -200px;

            animation-delay: 5s;

        }



        .orb3 {

            width: 250px;

            height: 250px;

            background: var(--primary-purple);

            top: 50%;

            left: 50%;

            animation-delay: 10s;

        }



        @keyframes orbFloat {

            0%, 100% {

                transform: translate(0, 0) scale(1);

            }

            33% {

                transform: translate(100px, -50px) scale(1.1);

            }

            66% {

                transform: translate(-50px, 100px) scale(0.9);

            }

        }



        /* Scanlines effect */

        .scanlines {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            pointer-events: none;

            z-index: -1;

        }



        .scanlines::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: linear-gradient(

                transparent 0%,

                rgba(0, 255, 255, 0.03) 50%,

                transparent 100%

            );

            background-size: 100% 4px;

            animation: scanline 8s linear infinite;

        }



        .scanlines::after {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%);

            pointer-events: none;

        }



        /* Noise texture overlay */

        .noise-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            opacity: 0.03;

            z-index: -1;

            pointer-events: none;

            background-image: 

                repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px),

                repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0, 255, 255, 0.02) 2px, rgba(0, 255, 255, 0.02) 4px);

        }



        @keyframes scanline {

            0% { transform: translateY(-100%); }

            100% { transform: translateY(100%); }

        }



        /* Navigation */

        nav {

            position: fixed;

            top: 0;

            width: 100%;

            padding: 1rem 2rem;

            background: rgba(15, 15, 35, 0.9);

            backdrop-filter: blur(20px);

            border-bottom: 1px solid var(--border-color);

            z-index: 10000;

            transition: all 0.3s ease;

        }



        .nav-container {

            max-width: 1400px;

            margin: 0 auto;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        /* Mobile Menu Button */

        .mobile-menu-button {

            display: none;

            background: none;

            border: none;

            color: var(--primary-cyan);

            font-size: 1.5rem;

            cursor: pointer;

            position: relative;

            width: 30px;

            height: 30px;

            transition: all 0.3s ease;

        }



        .mobile-menu-button:hover {

            color: var(--primary-orange);

            transform: scale(1.1);

        }



        .hamburger {

            position: relative;

            width: 25px;

            height: 20px;

            margin: auto;

        }



        .hamburger span {

            display: block;

            position: absolute;

            height: 2px;

            width: 100%;

            background: var(--primary-cyan);

            border-radius: 1px;

            opacity: 1;

            left: 0;

            transform: rotate(0deg);

            transition: all 0.25s ease-in-out;

            box-shadow: 0 0 5px var(--primary-cyan);

            transform-origin: center;

        }



        .hamburger span:nth-child(1) {

            top: 0px;

        }



        .hamburger span:nth-child(2) {

            top: 9px;

        }



        .hamburger span:nth-child(3) {

            top: 18px;

        }



        .mobile-menu-button.active .hamburger span:nth-child(1) {

            top: 9px;

            transform: rotate(135deg);

            background: var(--primary-orange);

        }



        .mobile-menu-button.active .hamburger span:nth-child(2) {

            opacity: 0;

            left: -25px;

        }



        .mobile-menu-button.active .hamburger span:nth-child(3) {

            top: 9px;

            transform: rotate(-135deg);

            background: var(--primary-orange);

        }



        /* Mobile Menu */

        .mobile-menu {

            position: fixed;

            top: 78px;

            right: -100%;

            width: 80%;

            max-width: 350px;

            height: calc(100vh - 78px);

            background: var(--darker-bg);

            backdrop-filter: blur(20px);

            border-left: 2px solid var(--border-color);

            z-index: 9999;

            transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);

            overflow-y: auto;

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

            display: flex;

            flex-direction: column;

        }



        .mobile-menu.active {

            right: 0;

        }



        .mobile-menu-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100vh;

            background: rgba(0, 0, 0, 0.7);

            z-index: 9998;

            opacity: 0;

            visibility: hidden;

            transition: all 0.3s ease;

        }



        .mobile-menu-overlay.active {

            opacity: 1;

            visibility: visible;

        }



        .mobile-menu-header {

            padding: 2rem;

            border-bottom: 1px solid var(--border-color);

            display: flex;

            justify-content: space-between;

            align-items: center;

            flex-shrink: 0;

        }



        .mobile-menu-logo {

            font-size: 1.5rem;

            font-weight: 700;

            color: var(--primary-cyan);

            text-shadow: 0 0 15px var(--primary-cyan);

            text-decoration: none;

            display: inline-block;

            transition: all 0.3s ease;

        }



        .mobile-menu-logo::before {

            content: '>';

            margin-right: 0.5rem;

            color: var(--primary-pink);

            transition: all 0.3s ease;

        }



        .mobile-menu-logo::after {

            content: '_';

            animation: blink 1s infinite;

            color: var(--primary-cyan);

        }



        .mobile-menu-logo:hover {

            text-shadow: 0 0 25px var(--primary-cyan);

            transform: scale(1.05);

        }



        .mobile-menu-logo:hover::before {

            margin-right: 0.8rem;

            text-shadow: 0 0 10px var(--primary-pink);

        }



        .mobile-menu-close {

            background: none;

            border: none;

            color: var(--primary-cyan);

            font-size: 1.5rem;

            cursor: pointer;

            width: 30px;

            height: 30px;

            display: flex;

            align-items: center;

            justify-content: center;

            transition: all 0.3s ease;

        }



        .mobile-menu-close:hover {

            color: var(--primary-orange);

            transform: rotate(90deg);

        }



        .mobile-menu-nav {

            padding: 0;

            flex-grow: 1;

        }



        .mobile-menu-nav ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }



        .mobile-menu-nav li {

            margin: 0;

        }



        .mobile-menu-nav a {

            display: block;

            padding: 1.5rem 2rem;

            color: var(--text-secondary);

            text-decoration: none;

            font-weight: 600;

            text-transform: uppercase;

            letter-spacing: 1px;

            font-size: 1.1rem;

            transition: all 0.3s ease;

            position: relative;

            border-bottom: 1px solid rgba(229, 231, 235, 0.1);

        }



        .mobile-menu-nav a:hover {

            color: var(--primary-cyan);

            background: rgba(0, 255, 255, 0.05);

            padding-left: 3rem;

            text-shadow: 0 0 10px var(--primary-cyan);

        }



        .mobile-menu-nav a::before {

            content: '>';

            position: absolute;

            left: 2rem;

            opacity: 0;

            transform: translateX(-10px);

            transition: all 0.3s ease;

            color: var(--primary-orange);

        }



        .mobile-menu-nav a:hover::before {

            opacity: 1;

            transform: translateX(0);

        }



        .mobile-menu-nav li:last-child a {

            border-bottom: none;

        }



        .mobile-menu-cta {

            padding: 2rem;

            flex-shrink: 0;

            border-bottom: 1px solid var(--border-color);

        }



        .cyber-button {

            display: inline-block;

            background: linear-gradient(135deg, var(--primary-cyan), var(--primary-purple));

            color: var(--darker-bg);

            padding: 1rem 2rem;

            text-decoration: none;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 2px;

            transition: all 0.3s ease;

            clip-path: polygon(15px 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);

            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);

            width: 100%;

            text-align: center;

        }



        .cyber-button:hover {

            transform: translateY(-2px);

            box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);

        }



        /* Animation keyframes for mobile menu */

        @keyframes slideInLeft {

            from {

                opacity: 0;

                transform: translateX(20px);

            }

            to {

                opacity: 1;

                transform: translateX(0);

            }

        }



        @keyframes slideInUp {

            from {

                opacity: 0;

                transform: translateY(20px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }



        /* Desktop Navigation Layout */

        @media (min-width: 769px) {

            .mobile-menu-button {

                display: none !important;

            }

            

            .nav-container {

                flex-direction: row;

                align-items: center;

                gap: 0;

            }

            

            .nav-top {

                flex: 0 0 auto;

            }

            

            .nav-links {

                flex: 1;

                display: flex;

                flex-direction: row;

                justify-content: center;

                margin: 0 2rem;

                max-width: none;

            }

            

            .nav-links a {

                padding: 0;

                border-bottom: none;

                font-size: 0.9rem;

            }

            

            .nav-links a:hover {

                background: none;

                transform: none;

                padding-left: 0;

            }

            

            .nav-links a::before {

                display: none;

            }

            

            .nav-bottom {

                flex: 0 0 auto;

            }

            

            .cyber-button {

                width: auto;

                max-width: none;

            }

        }



        .logo {

            font-size: 1.8rem;

            font-weight: 700;

            color: var(--primary-cyan);

            text-shadow: 0 0 20px var(--primary-cyan);

            position: relative;

            cursor: pointer;

            text-decoration: none;

            display: inline-block;

            transition: all 0.3s ease;

        }



        .logo:hover {

            text-shadow: 0 0 30px var(--primary-cyan);

            transform: scale(1.05);

        }



        .logo::before {

            content: '>';

            margin-right: 0.5rem;

            color: var(--primary-pink);

            transition: all 0.3s ease;

        }



        .logo:hover::before {

            margin-right: 0.8rem;

            text-shadow: 0 0 10px var(--primary-pink);

        }



        .logo::after {

            content: '_';

            animation: blink 1s infinite;

            color: var(--primary-cyan);

        }



        @keyframes blink {

            0%, 50% { opacity: 1; }

            51%, 100% { opacity: 0; }

        }



        .nav-links {

            display: flex;

            list-style: none;

            gap: 2.5rem;

        }



        .nav-links a {

            color: var(--text-secondary);

            text-decoration: none;

            font-weight: 500;

            transition: all 0.3s ease;

            position: relative;

            text-transform: uppercase;

            font-size: 0.9rem;



            letter-spacing: 1px;

        }



        .nav-links a:hover {

            color: var(--primary-cyan);

            text-shadow: 0 0 10px var(--primary-cyan);

        }



        .nav-links a::before {

            content: '';

            position: absolute;

            bottom: -5px;

            left: 0;

            width: 0;

            height: 2px;

            background: linear-gradient(90deg, var(--primary-cyan), var(--primary-purple));

            transition: width 0.3s ease;

            box-shadow: 0 0 10px var(--primary-cyan);

        }



        .nav-links a:hover::before {

            width: 100%;

        }



        /* Hero Section */

        .hero {

            padding: 150px 2rem 100px;

            text-align: center;

            position: relative;

            min-height: 100vh;

            display: flex;

            align-items: center;

        }



        .hero-container {

            max-width: 1400px;

            margin: 0 auto;

            width: 100%;

        }



        .hero-title {

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

            font-weight: 900;

            margin-bottom: 2rem;

            text-transform: uppercase;

            letter-spacing: 3px;

            position: relative;

            cursor: pointer;

            line-height: 1.2;

        }



        .hero-nexus {

            background: linear-gradient(135deg, var(--primary-cyan), #00ccff);

            background: -webkit-linear-gradient(135deg, var(--primary-cyan), #00ccff);

            -webkit-background-clip: text;

            background-clip: text;

            -webkit-text-fill-color: transparent;

            display: inline-block;

            transition: all 0.3s ease;

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

            position: relative;

        }



        .hero-flow {

            background: linear-gradient(135deg, var(--primary-purple), var(--primary-pink));

            background: -webkit-linear-gradient(135deg, var(--primary-purple), var(--primary-pink));

            -webkit-background-clip: text;

            background-clip: text;

            -webkit-text-fill-color: transparent;

            margin-left: 0.1em;

            display: inline-block;

            transition: all 0.3s ease;

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

            animation-delay: 1.5s;

            position: relative;

        }



        @keyframes cyanPulse {

            0%, 100% { 

                filter: brightness(1) drop-shadow(0 0 15px rgba(0, 255, 255, 0.6));

                transform: translateY(0) scale(1);

            }

            50% { 

                filter: brightness(1.1) drop-shadow(0 0 25px rgba(0, 255, 255, 0.8));

                transform: translateY(-2px) scale(1.01);

            }

        }



        @keyframes purplePulse {

            0%, 100% { 

                filter: brightness(1) drop-shadow(0 0 15px rgba(255, 0, 255, 0.6));

                transform: translateY(0) scale(1);

            }

            50% { 

                filter: brightness(1.1) drop-shadow(0 0 25px rgba(255, 0, 255, 0.8));

                transform: translateY(-2px) scale(1.01);

            }

        }



        /* Clean hover effect */

        .hero-title:hover .hero-nexus {

            transform: translateX(-3px) scale(1.02);

            filter: brightness(1.2) drop-shadow(0 0 30px rgba(0, 255, 255, 0.9));

        }



        .hero-title:hover .hero-flow {

            transform: translateX(3px) scale(1.02);

            filter: brightness(1.2) drop-shadow(0 0 30px rgba(255, 0, 255, 0.9));

        }



        /* Subtle background glow for each word */

        .hero-nexus::before {

            content: '';

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            width: 200%;

            height: 200%;

            background: radial-gradient(circle, rgba(0, 255, 255, 0.08) 0%, transparent 60%);

            filter: blur(50px);

            z-index: -1;

            animation: glowPulse 4s ease-in-out infinite;

            pointer-events: none;

        }



        .hero-flow::before {

            content: '';

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            width: 200%;

            height: 200%;

            background: radial-gradient(circle, rgba(255, 0, 255, 0.08) 0%, transparent 60%);

            filter: blur(50px);

            z-index: -1;

            animation: glowPulse 4s ease-in-out infinite;

            animation-delay: 2s;

            pointer-events: none;

        }



        @keyframes glowPulse {

            0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }

            50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }

        }



        /* Apply animation pause on hover */

        .hero-title:hover .hero-nexus,

        .hero-title:hover .hero-flow {

            animation-play-state: paused;

        }



        /* Border animation */

        .hero-nexus::after,

        .hero-flow::after {

            content: '';

            position: absolute;

            bottom: -10px;

            left: 0;

            width: 0;

            height: 3px;

            transition: width 0.3s ease;

        }



        .hero-nexus::after {

            background: linear-gradient(90deg, var(--primary-cyan), transparent);

        }



        .hero-flow::after {

            background: linear-gradient(90deg, transparent, var(--primary-pink));

            left: auto;

            right: 0;

        }



        .hero-title:hover .hero-nexus::after,

        .hero-title:hover .hero-flow::after {

            width: 100%;

        }



        /* Typing effect for hero text on load */

        @keyframes typeIn {

            0% { 

                opacity: 0;

                transform: translateY(20px);

            }

            100% { 

                opacity: 1;

                transform: translateY(0);

            }

        }



        /* Remove scanner line for cleaner look */



        .hero-subtitle {

            font-size: 1.5rem;

            color: var(--text-secondary);

            margin-bottom: 3rem;

            max-width: 800px;

            margin-left: auto;

            margin-right: auto;

            font-weight: 300;

            opacity: 0.9;

            background: linear-gradient(135deg, var(--text-secondary), var(--primary-grey));

            -webkit-background-clip: text;

            background-clip: text;

            -webkit-text-fill-color: transparent;

        }



        .hero-buttons {

            display: flex;

            gap: 2rem;

            justify-content: center;

            flex-wrap: wrap;

        }



        .btn-primary {

            background: linear-gradient(135deg, var(--primary-cyan), var(--primary-purple));

            color: var(--darker-bg);

            padding: 1.2rem 3rem;

            border: none;

            text-decoration: none;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 2px;

            position: relative;

            overflow: hidden;

            transition: all 0.3s ease;

            clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);

        }



        .btn-primary:hover {

            transform: translateY(-3px);

            box-shadow: 0 15px 40px rgba(0, 255, 255, 0.4);

        }



        .btn-secondary {

            background: transparent;

            color: var(--primary-cyan);

            padding: 1.2rem 3rem;

            border: 2px solid var(--primary-cyan);

            text-decoration: none;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 2px;

            transition: all 0.3s ease;

            position: relative;

            overflow: hidden;

            clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);

        }



        .btn-secondary:hover {

            background: var(--primary-cyan);

            color: var(--darker-bg);

            box-shadow: 0 0 30px var(--primary-cyan);

        }



        /* Features Section */

        .features {

            padding: 80px 2rem;

            position: relative;

        }



        .features-container {

            max-width: 1400px;

            margin: 0 auto;

        }



        .section-header {

            text-align: center;

            margin-bottom: 5rem;

        }



        .section-title {

            font-size: 3rem;

            font-weight: 800;

            color: var(--primary-cyan);

            letter-spacing: 2px;

            margin-bottom: 1rem;

            position: relative;

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

        }



        .section-title::after {

            content: '';

            position: absolute;

            bottom: -10px;

            left: 50%;

            transform: translateX(-50%);

            width: 100px;

            height: 3px;

            background: linear-gradient(90deg, var(--primary-cyan), var(--primary-purple));

            box-shadow: 0 0 20px var(--primary-cyan);

        }



        .section-subtitle {

            font-size: 1.2rem;

            color: var(--text-secondary);

            max-width: 600px;

            margin: 0 auto;

        }



        .features-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

            gap: 3rem;

        }



        .feature-card {

            background: var(--card-bg);

            border: 1px solid var(--border-color);

            padding: 0;

            position: relative;

            transition: all 0.4s ease;

            backdrop-filter: blur(10px);

            clip-path: polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px);

            overflow: hidden;

            cursor: pointer;

        }



        .feature-card::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: linear-gradient(135deg, var(--primary-cyan), var(--primary-pink));

            opacity: 0;

            transition: opacity 0.3s ease;

            z-index: -1;

        }



        .feature-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 20px 50px rgba(0, 255, 255, 0.2);

        }



        .feature-card:hover::before {

            opacity: 0.1;

        }



        .feature-banner {

            width: 100%;

            height: 200px;

            object-fit: cover;

            display: block;

            margin-bottom: 2rem;

            border-radius: 0;

            transition: all 0.3s ease;

        }



        .feature-card:hover .feature-banner {

            transform: scale(1.05);

        }



        .feature-card h3 {

            font-size: 1.5rem;

            font-weight: 700;

            color: var(--primary-cyan);

            margin: 0;

            text-transform: uppercase;

            letter-spacing: 1px;

            flex: 1;

        }



        .feature-title-row {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin: 0 2rem 1rem 2rem;

            gap: 1rem;

        }



        .feature-pricing {

            font-size: 0.75rem;

            font-weight: 600;

            color: var(--accent-purple);

            background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(255, 20, 147, 0.2));

            border: 1px solid rgba(138, 43, 226, 0.4);

            border-radius: 12px;

            padding: 0.3rem 0.8rem;

            white-space: nowrap;

            text-transform: uppercase;

            letter-spacing: 0.3px;

            backdrop-filter: blur(5px);

            flex-shrink: 0;

        }



        .feature-card p {

            color: var(--text-secondary);

            line-height: 1.8;

            margin: 0 2rem 1.5rem 2rem;

            flex: 1;

        }



        .feature-details-btn {

            background: transparent;

            color: var(--primary-cyan);

            padding: 0.7rem 1.5rem;

            border: 2px solid var(--primary-cyan);

            border-radius: 0;

            font-size: 0.9rem;

            font-weight: 600;

            text-transform: uppercase;

            letter-spacing: 1px;

            cursor: pointer;

            transition: all 0.3s ease;

            margin: 0 auto 2rem auto;

            display: block;

            width: fit-content;

            position: relative;

            overflow: hidden;

            clip-path: polygon(15px 0%, 100% 0%, calc(100% - 15px) 100%, 0% 100%);

        }



        .feature-details-btn::before {

            content: '';

            position: absolute;

            top: 0;

            left: -100%;

            width: 100%;

            height: 100%;

            background: var(--primary-cyan);

            transition: left 0.3s ease;

            z-index: -1;

        }



        .feature-details-btn:hover {

            background: var(--primary-cyan);

            color: var(--bg-primary);

            transform: translateY(-2px);

            box-shadow: 0 8px 25px rgba(0, 255, 255, 0.3);

        }



        .feature-details-btn:hover::before {

            left: 0;

        }



        /* Stats Section */

        .stats {

            padding: 80px 2rem;

            background: rgba(0, 255, 255, 0.02);

            border-top: 1px solid var(--border-color);

            border-bottom: 1px solid var(--border-color);

        }



        .stats-container {

            max-width: 1400px;

            margin: 0 auto;

        }



        .stats-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

            gap: 3rem;

            text-align: center;

        }



        .stat-item {

            position: relative;

        }



        .stat-number {

            font-size: 4rem;

            font-weight: 900;

            background: linear-gradient(135deg, var(--primary-cyan), var(--primary-purple));

            -webkit-background-clip: text;

            background-clip: text;

            -webkit-text-fill-color: transparent;

            display: block;

            margin-bottom: 0.5rem;

            filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.3));

        }



        .stat-label {

            font-size: 1.1rem;

            color: var(--text-secondary);

            text-transform: uppercase;

            letter-spacing: 1px;

        }



        /* Pricing Section */

        .pricing {

            padding: 120px 2rem;

        }



        .pricing-container {

            max-width: 1400px;

            margin: 0 auto;

        }



        .pricing-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

            gap: 3rem;

            margin-top: 5rem;

        }



        .pricing-card {

            background: var(--card-bg);

            border: 1px solid var(--border-color);

            padding: 3rem;

            text-align: center;

            position: relative;

            transition: all 0.4s ease;

            backdrop-filter: blur(10px);

            clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0% 100%, 0% 30px);

        }



        .pricing-card.featured {

            border-color: var(--primary-cyan);

            background: rgba(0, 255, 255, 0.05);

            transform: scale(1.05);

            box-shadow: 0 0 50px rgba(0, 255, 255, 0.3);

        }



        .pricing-card.featured::before {

            content: 'MOST POPULAR';

            position: absolute;

            top: 6px;

            left: 50%;

            transform: translateX(-50%);

            background: linear-gradient(135deg, var(--primary-cyan), var(--primary-pink));

            color: var(--darker-bg);

            padding: 0.5rem 2rem;

            font-size: 0.8rem;

            font-weight: 700;

            letter-spacing: 2px;

            clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);

            z-index: 1;

        }



        .pricing-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 20px 50px rgba(0, 255, 255, 0.2);

        }



        .pricing-card.featured:hover {

            transform: scale(1.05) translateY(-10px);

        }



        .plan-name {

            font-size: 1.5rem;

            font-weight: 700;

            color: var(--primary-cyan);

            text-transform: uppercase;

            letter-spacing: 2px;

            margin-bottom: 2rem;

            text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);

        }



        .plan-price {

            font-size: 4rem;

            font-weight: 900;

            color: var(--text-primary);

            margin-bottom: 0.5rem;

            text-shadow: 0 0 20px var(--primary-cyan);

        }



        .plan-period {

            color: var(--text-secondary);

            margin-bottom: 3rem;

            text-transform: uppercase;

            letter-spacing: 1px;

        }



        .plan-features {

            list-style: none;

            margin-bottom: 3rem;

            text-align: left;

        }



        .plan-features li {

            padding: 1rem 0;

            color: var(--text-secondary);

            position: relative;

            padding-left: 2rem;

            border-bottom: 1px solid rgba(0, 255, 255, 0.1);

        }



        .plan-features li::before {

            content: '▶';

            position: absolute;

            left: 0;

            color: var(--primary-cyan);

            font-size: 0.8rem;

        }



        /* Preview Section */

        .preview {

            padding: 120px 2rem;

            background: rgba(0, 255, 255, 0.02);

            border-top: 1px solid var(--border-color);

        }



        .preview-container {

            max-width: 1400px;

            margin: 0 auto;

        }



        .video-wrapper {

            max-width: 1000px;

            margin: 4rem auto 0;

            position: relative;

        }



        .video-container {

            position: relative;

            width: 100%;

            height: 0;

            padding-bottom: 56.25%; /* 16:9 aspect ratio */

            background: var(--card-bg);

            border: 2px solid var(--border-color);

            border-radius: 20px;

            overflow: hidden;

            box-shadow: 0 20px 60px rgba(0, 255, 255, 0.2);

            clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0% 100%, 0% 30px);

        }



        .video-container iframe {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            border: none;

        }



        .video-overlay {

            position: absolute;

            bottom: 20px;

            left: 20px;

            right: 20px;

            background: rgba(0, 0, 0, 0.8);

            backdrop-filter: blur(10px);

            padding: 1.5rem;

            border-radius: 12px;

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

        }



        .video-stats {

            display: flex;

            justify-content: space-around;

            gap: 2rem;

        }



        .video-stats .stat {

            text-align: center;

        }



        .video-stats .stat-number {

            display: block;

            font-size: 1.5rem;

            font-weight: 700;

            color: var(--primary-cyan);

            text-shadow: 0 0 10px var(--primary-cyan);

        }



        .video-stats .stat-label {

            font-size: 0.9rem;

            color: var(--text-secondary);

            text-transform: uppercase;

            letter-spacing: 1px;

        }



        .contact-form-wrapper {

            max-width: 600px;

            margin: 0 auto;

            margin-top: 4rem;

        }



        .contact-form {

            background: var(--card-bg);

            border: 1px solid var(--border-color);

            padding: 3rem;

            backdrop-filter: blur(10px);

            clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0% 100%, 0% 30px);

            box-shadow: 0 0 30px rgba(0, 255, 255, 0.1);

        }



        .form-group {

            margin-bottom: 2rem;

        }



        .form-group label {

            display: block;

            color: var(--primary-cyan);

            font-weight: 600;

            text-transform: uppercase;

            letter-spacing: 1px;

            font-size: 0.9rem;

            margin-bottom: 0.8rem;

            text-shadow: 0 0 10px var(--primary-cyan);

        }



        .form-group input,

        .form-group textarea {

            width: 100%;

            padding: 1rem 1.5rem;

            background: rgba(0, 255, 255, 0.05);

            border: 1px solid var(--border-color);

            color: var(--text-primary);

            font-family: inherit;

            font-size: 1rem;

            transition: all 0.3s ease;

            clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);

        }



        .form-group input::placeholder,

        .form-group textarea::placeholder {

            color: var(--text-secondary);

            opacity: 0.7;

        }



        .form-group input:focus,

        .form-group textarea:focus {

            outline: none;

            border-color: var(--primary-cyan);

            background: rgba(0, 255, 255, 0.08);

            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);

        }



        .form-group textarea {

            resize: vertical;

            min-height: 120px;

        }



        .btn-submit {

            width: 100%;

            cursor: pointer;

            font-size: 1rem;

            margin-top: 1rem;

            border: none;

            transition: all 0.3s ease;

        }



        .btn-submit:hover {

            transform: translateY(-3px);

            box-shadow: 0 15px 40px rgba(229, 231, 235, 0.4);

        }



        /* Footer */

        .footer {

            padding: 60px 2rem 40px;

            border-top: 1px solid var(--border-color);

            text-align: center;

            background: rgba(0, 0, 0, 0.5);

            margin-top: 80px;

        }



        .footer-content {

            max-width: 1400px;

            margin: 0 auto;

        }



        .footer-links {

            margin-bottom: 2rem;

            display: flex;

            justify-content: center;

            align-items: center;

            flex-wrap: wrap;

            gap: 0.5rem;

        }



        .footer-links a {

            color: var(--text-secondary);

            text-decoration: none;

            font-weight: 500;

            text-transform: uppercase;

            letter-spacing: 1px;

            font-size: 0.9rem;

            transition: all 0.3s ease;

            position: relative;

            padding: 0 0.5rem;

        }



        .footer-links a:hover {

            color: var(--primary-cyan);

            text-shadow: 0 0 10px var(--primary-cyan);

            transform: translateY(-2px);

        }



        .footer-links a::after {

            content: '';

            position: absolute;

            bottom: -3px;

            left: 50%;

            transform: translateX(-50%);

            width: 0;

            height: 1px;

            background: var(--primary-cyan);

            transition: width 0.3s ease;

            box-shadow: 0 0 5px var(--primary-cyan);

        }



        .footer-links a:hover::after {

            width: 80%;

        }



        .footer-separator {

            color: var(--primary-cyan);

            opacity: 0.5;

            font-size: 0.8rem;

            margin: 0 0.2rem;

        }



        .footer-bottom {

            color: var(--text-secondary);

            font-size: 0.9rem;

        }



        .footer-bottom p {

            margin: 0.5rem 0;

        }



        .footer-credit {

            font-size: 0.85rem;

            opacity: 0.8;

            margin-top: 0.5rem;

        }



        .footer-credit a {

            color: var(--primary-cyan);

            text-decoration: none;

            transition: all 0.3s ease;

            font-weight: 600;

        }



        .footer-credit a:hover {

            color: var(--primary-pink);

            text-shadow: 0 0 10px var(--primary-pink);

            text-decoration: underline;

        }



        /* Mobile Responsive */

        @media (max-width: 768px) {

            .mobile-menu-button {

                display: block !important;

            }

            

            .nav-links {

                display: none;

            }

            

            .nav-bottom .cyber-button {

                display: none;

            }

            

            .hero-title {

                font-size: 2.5rem;

            }

            

            .hero-buttons {

                flex-direction: column;

                align-items: center;

            }

            

            .btn-primary, .btn-secondary {

                width: 100%;

                max-width: 300px;

            }

            

            .features-grid {

                grid-template-columns: 1fr;

            }

            

            .pricing-grid {

                grid-template-columns: 1fr;

            }

            

            .pricing-card.featured {

                transform: none;

            }

            

            .stats-grid {

                grid-template-columns: repeat(2, 1fr);

            }

            

            .contact {

                padding: 80px 1rem;

            }

            

            .contact-form {

                padding: 2rem;

            }

            

            .footer-links {

                flex-direction: column;

                gap: 1rem;

            }

            

            .footer-links a {

                padding: 0.5rem 1rem;

            }

            

            .footer-separator {

                display: none;

            }

            

            .footer {

                margin-top: 40px;

                padding: 40px 1rem 30px;

            }

        }



        @media (max-width: 480px) {

            .mobile-menu {

                width: 90%;

                max-width: none;

            }

            

            .mobile-menu-header {

                padding: 1.5rem;

            }

            

            .mobile-menu-nav a {

                padding: 1.2rem 1.5rem;

                font-size: 1rem;

            }

            

            .mobile-menu-cta {

                padding: 1.5rem;

            }

            

            .cyber-button {

                padding: 0.8rem 1.5rem;

                font-size: 0.9rem;

            }

            

            .hero-title {

                font-size: 2rem;

            }

            

            .hero-nexus, .hero-flow {

                display: block;

                margin: 0;

            }

        }



        /* Scroll animations */

        .fade-up {

            opacity: 0;

            transform: translateY(50px);

            transition: all 0.8s ease;

        }



        .fade-up.visible {

            opacity: 1;

            transform: translateY(0);

        }



        /* Data streams */

        .data-streams {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            overflow: hidden;

            z-index: -3;

            pointer-events: none;

        }



        .data-stream {

            position: absolute;

            height: 1px;

            background: linear-gradient(90deg, transparent, var(--primary-cyan), transparent);

            opacity: 0;

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

        }



        .data-stream:nth-child(odd) {

            background: linear-gradient(90deg, transparent, var(--primary-pink), transparent);

            animation-duration: 4s;

        }



        @keyframes dataFlow {

            0% {

                width: 0;

                opacity: 0;

                transform: translateX(0);

            }

            50% {

                width: 300px;

                opacity: 0.8;

            }

            100% {

                width: 0;

                opacity: 0;

                transform: translateX(100vw);

            }

        }



        /* Performance optimization for mobile */

        @media (max-width: 768px) {

            .matrix-rain {

                display: none;

            }

            

            .particles {

                opacity: 0.5;

            }

            

            .particle {

                animation-duration: 30s !important;

            }

            

            .orb {

                filter: blur(100px);

                opacity: 0.3;

            }

            

            .scanlines::before {

                animation: none;

                transform: translateY(0);

            }

            

            .data-streams {

                display: none;

            }

            

            .noise-overlay {

                display: none;

            }

        }



        /* Reduced motion for accessibility */

        @media (prefers-reduced-motion: reduce) {

            .cyber-gradient,

            .grid-lines,

            .grid-glow,

            .particle,

            .orb,

            .matrix-column,

            .scanlines::before,

            .data-stream {

                animation: none !important;

            }

        }



        /* Custom scrollbar */

        ::-webkit-scrollbar {

            width: 8px;

        }



        ::-webkit-scrollbar-track {

            background: var(--darker-bg);

        }



        ::-webkit-scrollbar-thumb {

            background: linear-gradient(var(--primary-cyan), var(--primary-pink));

            border-radius: 4px;

        }



        ::-webkit-scrollbar-thumb:hover {

            background: linear-gradient(var(--primary-pink), var(--primary-cyan));

        }



        /* Login Overlay Styles */

        .login-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100vh;

            z-index: 10001;

            display: flex;

            align-items: center;

            justify-content: center;

            opacity: 0;

            visibility: hidden;

            transition: all 0.4s ease;

        }



        .login-overlay.active {

            opacity: 1;

            visibility: visible;

        }



        .login-content {

            position: relative;

            background: var(--card-bg);

            border: 2px solid var(--border-color);

            backdrop-filter: blur(20px);

            padding: 0;

            max-width: 500px;

            width: 90%;

            max-height: 90vh;

            overflow-y: auto;

            clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0% 100%, 0% 30px);

            box-shadow: 0 20px 60px rgba(0, 255, 255, 0.3);

            animation: loginSlideIn 0.4s ease;

        }



        @keyframes loginSlideIn {

            0% {

                opacity: 0;

                transform: translateY(-50px) scale(0.9);

            }

            100% {

                opacity: 1;

                transform: translateY(0) scale(1);

            }

        }



        .login-header {

            padding: 3rem 3rem 2rem 3rem;

            border-bottom: 1px solid var(--border-color);

            text-align: center;

        }



        .login-title {

            font-size: 2rem;

            font-weight: 800;

            color: var(--primary-cyan);

            text-transform: uppercase;

            letter-spacing: 2px;

            margin: 0 0 0.5rem 0;

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

        }



        .login-subtitle {

            color: var(--text-secondary);

            font-size: 1rem;

            margin: 0;

            text-transform: uppercase;

            letter-spacing: 1px;

        }



        .login-form-wrapper {

            padding: 3rem;

        }



        .login-form {

            margin-bottom: 2rem;

        }



        .login-form .form-group {

            margin-bottom: 2rem;

        }



        .login-form .form-group:last-child {

            margin-bottom: 3rem;

        }



        .checkbox-group {

            display: flex;

            align-items: center;

            margin-bottom: 1.5rem !important;

        }



        .checkbox-label {

            display: flex;

            align-items: center;

            color: var(--text-secondary);

            font-size: 0.9rem;

            cursor: pointer;

            position: relative;

            padding-left: 2rem;

        }



        .checkbox-label input[type="checkbox"] {

            position: absolute;

            opacity: 0;

            cursor: pointer;

        }



        .checkmark {

            position: absolute;

            left: 0;

            height: 18px;

            width: 18px;

            background: rgba(0, 255, 255, 0.05);

            border: 2px solid var(--border-color);

            clip-path: polygon(4px 0%, 100% 0%, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0% 100%, 0% 4px);

            transition: all 0.3s ease;

        }



        .checkbox-label:hover input ~ .checkmark {

            background: rgba(0, 255, 255, 0.1);

            border-color: var(--primary-cyan);

        }



        .checkbox-label input:checked ~ .checkmark {

            background: var(--primary-cyan);

            border-color: var(--primary-cyan);

        }



        .checkmark:after {

            content: "";

            position: absolute;

            display: none;

        }



        .checkbox-label input:checked ~ .checkmark:after {

            display: block;

        }



        .checkbox-label .checkmark:after {

            left: 5px;

            top: 2px;

            width: 4px;

            height: 8px;

            border: solid var(--darker-bg);

            border-width: 0 2px 2px 0;

            transform: rotate(45deg);

        }



        .login-submit {

            width: 100%;

            cursor: pointer;

            font-size: 1rem;

            border: none;

            transition: all 0.3s ease;

            margin-bottom: 0;

        }



        .login-submit:hover {

            transform: translateY(-3px);

            box-shadow: 0 15px 40px rgba(0, 255, 255, 0.4);

        }



        .login-footer {

            text-align: center;

            padding-top: 1.5rem;

            border-top: 1px solid var(--border-color);

        }



        .login-link {

            color: var(--text-secondary);

            text-decoration: none;

            font-size: 0.9rem;

            transition: all 0.3s ease;

            text-transform: uppercase;

            letter-spacing: 1px;

        }



        .login-link:hover {

            color: var(--primary-cyan);

            text-shadow: 0 0 10px var(--primary-cyan);

        }



        .login-separator {

            color: var(--primary-cyan);

            opacity: 0.5;

            margin: 0 1rem;

        }



        /* Contact Overlay Styles */

        .contact-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100vh;

            z-index: 10001;

            display: flex;

            align-items: center;

            justify-content: center;

            opacity: 0;

            visibility: hidden;

            transition: all 0.4s ease;

        }



        .contact-overlay.active {

            opacity: 1;

            visibility: visible;

        }



        .contact-content {

            position: relative;

            background: var(--card-bg);

            border: 2px solid var(--border-color);

            backdrop-filter: blur(20px);

            padding: 0;

            max-width: 1000px;

            width: 90%;

            max-height: 90vh;

            overflow-y: auto;

            clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0% 100%, 0% 30px);

            box-shadow: 0 20px 60px rgba(0, 255, 255, 0.3);

            animation: overlaySlideIn 0.4s ease;

        }



        .contact-header {

            padding: 3rem 3rem 2rem 3rem;

            border-bottom: 1px solid var(--border-color);

            text-align: center;

        }



        .contact-title {

            font-size: 2rem;

            font-weight: 800;

            color: var(--primary-cyan);

            text-transform: uppercase;

            letter-spacing: 2px;

            margin: 0 0 0.5rem 0;

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

        }



        .contact-subtitle {

            color: var(--text-secondary);

            font-size: 1rem;

            margin: 0;

            text-transform: uppercase;

            letter-spacing: 1px;

        }



        .contact-form-wrapper {

            padding: 2.5rem;

        }



        .contact-form .form-row {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 2rem;

            margin-bottom: 1.5rem;

            align-items: start;

        }



        .contact-form .form-group.full-width {

            grid-column: 1 / -1;

        }



        .contact-form .form-group {

            margin-bottom: 0;

            min-height: 100px;

            display: flex;

            flex-direction: column;

        }



        /* Field note styling */

        .contact-form .field-note {

            font-size: 0.75rem;

            color: #8892b0;

            margin-top: 0.5rem;

            font-style: italic;

            line-height: 1.3;

        }



        .contact-form .form-group label {

            display: block;

            color: var(--primary-cyan);

            font-weight: 600;

            text-transform: uppercase;

            letter-spacing: 1px;

            font-size: 0.9rem;

            margin-bottom: 0.8rem;

            text-shadow: 0 0 10px var(--primary-cyan);

        }



        .contact-form .form-group input,

        .contact-form .form-group textarea,

        .contact-form .form-group select {

            width: 100%;

            padding: 1rem 1.5rem;

            background: rgba(0, 255, 255, 0.05);

            border: 1px solid var(--border-color);

            color: var(--text-primary);

            font-family: inherit;

            font-size: 1rem;

            transition: all 0.3s ease;

            clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);

        }



        .contact-form .form-group input::placeholder,

        .contact-form .form-group textarea::placeholder {

            color: var(--text-secondary);

            opacity: 0.7;

        }



        .contact-form .form-group input:focus,

        .contact-form .form-group textarea:focus,

        .contact-form .form-group select:focus {

            outline: none;

            border-color: var(--primary-cyan);

            background: rgba(0, 255, 255, 0.08);

            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);

        }



        /* Custom Select Dropdown Styling */

        .contact-form .form-group select {

            appearance: none;

            -webkit-appearance: none;

            -moz-appearance: none;

            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");

            background-repeat: no-repeat;

            background-position: right 1rem center;

            background-size: 1rem;

            cursor: pointer;

        }



        .contact-form .form-group select option {

            background: var(--darker-bg);

            color: var(--text-primary);

            padding: 0.5rem;

            border: none;

        }



        .contact-form .form-group select option:hover,

        .contact-form .form-group select option:checked {

            background: rgba(0, 255, 255, 0.2);

            color: var(--primary-cyan);

        }



        .field-note {

            display: block;

            color: var(--text-secondary);

            font-size: 0.8rem;

            margin-top: 0.5rem;

            opacity: 0.8;

            font-style: italic;

        }



        .contact-submit {

            width: 100%;

            cursor: pointer;

            font-size: 1rem;

            border: none;

            transition: all 0.3s ease;

            margin-top: 1rem;

        }



        .contact-submit:hover {

            transform: translateY(-3px);

            box-shadow: 0 15px 40px rgba(0, 255, 255, 0.4);

        }



        /* Mobile Responsive for Contact Overlay */

        @media (max-width: 768px) {

            .contact-content {

                width: 95%;

                max-height: 95vh;

            }

            

            .contact-form .form-row {

                grid-template-columns: 1fr;

                gap: 1.5rem;

            }

            

            .contact-form-wrapper {

                padding: 2rem;

            }

            

            .contact-title {

                font-size: 1.5rem;

            }

            

            .contact-form-wrapper {

                padding: 2rem;

            }

            

            .video-stats {

                flex-direction: column;

                gap: 1rem;

            }

            

            .video-overlay {

                left: 10px;

                right: 10px;

                bottom: 10px;

                padding: 1rem;

            }

        }



        /* Mobile Responsive for Login Overlay */

        @media (max-width: 768px) {

            .login-content {

                width: 95%;

                max-height: 95vh;

            }

            

            .login-header {

                padding: 2rem;

            }

            

            .login-title {

                font-size: 1.5rem;

            }

            

            .login-form-wrapper {

                padding: 2rem;

            }

            

            .login-footer {

                flex-direction: column;

                gap: 1rem;

            }

            

            .login-separator {

                display: none;

            }

        }



        /* Product Overlay Styles */

        .product-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100vh;

            z-index: 10000;

            display: flex;

            align-items: center;

            justify-content: center;

            opacity: 0;

            visibility: hidden;

            transition: all 0.4s ease;

        }



        .product-overlay.active {

            opacity: 1;

            visibility: visible;

        }



        .overlay-background {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.85);

            backdrop-filter: blur(15px);

            cursor: pointer;

        }



        .overlay-content {

            position: relative;

            background: var(--card-bg);

            border: 2px solid var(--border-color);

            backdrop-filter: blur(20px);

            padding: 0;

            max-width: 800px;

            width: 90%;

            max-height: 90vh;

            overflow-y: auto;

            clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0% 100%, 0% 30px);

            box-shadow: 0 20px 60px rgba(0, 255, 255, 0.3);

            animation: overlaySlideIn 0.4s ease;

        }



        @keyframes overlaySlideIn {

            0% {

                opacity: 0;

                transform: translateY(-50px) scale(0.9);

            }

            100% {

                opacity: 1;

                transform: translateY(0) scale(1);

            }

        }



        .overlay-close {

            position: absolute;

            top: 20px;

            right: 20px;

            background: none;

            border: none;

            color: var(--primary-cyan);

            font-size: 1.5rem;

            cursor: pointer;

            width: 40px;

            height: 40px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            transition: all 0.3s ease;

            z-index: 10001;

        }



        .overlay-close:hover {

            color: var(--primary-orange);

            background: rgba(249, 115, 22, 0.1);

            transform: rotate(90deg);

        }



        .overlay-header {

            padding: 3rem 3rem 2rem 3rem;

            border-bottom: 1px solid var(--border-color);

            text-align: center;

        }



        .overlay-title-section {

            width: 100%;

        }



        .overlay-title {

            font-size: 2.5rem;

            font-weight: 800;

            color: var(--primary-cyan);

            text-transform: uppercase;

            letter-spacing: 2px;

            margin: 0 0 0.5rem 0;

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

        }



        .overlay-subtitle {

            color: var(--text-secondary);

            font-size: 1.1rem;

            margin: 0;

            text-transform: uppercase;

            letter-spacing: 1px;

        }



        .overlay-features {

            padding: 2rem 3rem;

        }



        .feature-category {

            margin-bottom: 2.5rem;

        }



        .feature-category:last-child {

            margin-bottom: 0;

        }



        .feature-category h3 {

            font-size: 1.3rem;

            font-weight: 700;

            color: var(--primary-cyan);

            text-transform: uppercase;

            letter-spacing: 1px;

            margin-bottom: 1rem;

            padding-bottom: 0.5rem;

            border-bottom: 2px solid rgba(0, 255, 255, 0.3);

            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);

        }



        .feature-list {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

            gap: 1rem;

        }



        .feature-item {

            background: rgba(0, 255, 255, 0.05);

            border: 1px solid rgba(0, 255, 255, 0.2);

            padding: 1rem;

            border-radius: 8px;

            transition: all 0.3s ease;

            position: relative;

            overflow: hidden;

        }



        .feature-item::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 4px;

            height: 100%;

            background: linear-gradient(to bottom, var(--primary-cyan), var(--primary-purple));

            transition: width 0.3s ease;

        }



        .feature-item:hover {

            background: rgba(0, 255, 255, 0.1);

            border-color: var(--primary-cyan);

            transform: translateX(5px);

        }



        .feature-item:hover::before {

            width: 8px;

        }



        .feature-name {

            font-weight: 600;

            color: var(--text-primary);

            margin-bottom: 0.3rem;

            font-size: 0.95rem;

        }



        .feature-description {

            color: var(--text-secondary);

            font-size: 0.85rem;

            line-height: 1.4;

        }



        /* Membership Benefits Styling */

        .membership-benefits {

            margin-top: 2rem;

            padding-top: 2rem;

            border-top: 1px solid rgba(138, 43, 226, 0.3);

            background: rgba(138, 43, 226, 0.03);

            border-radius: 8px;

            padding: 2rem 1.5rem 1.5rem 1.5rem;

        }



        .membership-benefits h3 {

            font-size: 1rem;

            color: var(--accent-purple);

            border-bottom: 1px solid rgba(138, 43, 226, 0.3);

            text-shadow: 0 0 8px rgba(138, 43, 226, 0.4);

            margin-bottom: 1rem;

        }



        .membership-benefits .feature-list {

            grid-template-columns: 1fr;

            gap: 0.8rem;

        }



        .membership-item {

            background: rgba(138, 43, 226, 0.08);

            border: 1px solid rgba(138, 43, 226, 0.25);

            padding: 0.8rem;

            font-size: 0.9rem;

        }



        .membership-item::before {

            background: linear-gradient(to bottom, var(--accent-purple), #ff1493);

            width: 3px;

        }



        .membership-item:hover {

            background: rgba(138, 43, 226, 0.12);

            border-color: var(--accent-purple);

            transform: translateX(3px);

        }



        .membership-item:hover::before {

            width: 5px;

        }



        .membership-item .feature-name {

            font-size: 0.85rem;

            color: var(--accent-purple);

        }



        .membership-item .feature-description {

            font-size: 0.75rem;

            opacity: 0.85;

        }



        /* Membership Video Styling */

        .membership-video-wrapper {

            margin-top: 2rem;

            padding: 1.5rem;

            background: rgba(100, 255, 218, 0.05);

            border: 1px solid rgba(100, 255, 218, 0.2);

            border-radius: 10px;

            position: relative;

            overflow: hidden;

        }



        .membership-video-wrapper::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: linear-gradient(45deg, transparent 30%, rgba(100, 255, 218, 0.03) 50%, transparent 70%);

            pointer-events: none;

        }



        .video-title {

            color: var(--primary-cyan);

            font-size: 1.2rem;

            text-align: center;

            margin-bottom: 1rem;

            text-transform: uppercase;

            letter-spacing: 1px;

            text-shadow: 0 0 10px var(--primary-cyan);

            position: relative;

            z-index: 2;

        }



        .membership-video-container {

            position: relative;

            width: 100%;

            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */

            height: 0;

            border-radius: 8px;

            overflow: hidden;

            background: #000;

            border: 2px solid var(--primary-cyan);

            box-shadow: 0 0 20px rgba(100, 255, 218, 0.3);

        }



        .membership-video-container iframe {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            border: none;

        }



        /* Subscription Overlay */

        .subscription-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            z-index: 10001;

            display: flex;

            align-items: center;

            justify-content: center;

            opacity: 0;

            visibility: hidden;

            transition: all 0.4s ease;

        }



        .subscription-overlay.active {

            opacity: 1;

            visibility: visible;

        }



        .subscription-content {

            position: relative;

            background: var(--card-bg);

            border: 2px solid var(--border-color);

            backdrop-filter: blur(20px);

            padding: 0;

            max-width: 900px;

            width: 90%;

            max-height: 90vh;

            overflow-y: auto;

            clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0% 100%, 0% 30px);

            box-shadow: 0 20px 60px rgba(0, 255, 255, 0.3);

            animation: overlaySlideIn 0.4s ease;

        }







        .subscription-header {

            padding: 3rem 2rem;

            border-bottom: 1px solid rgba(0, 255, 255, 0.2);

            position: relative;

            min-height: 150px;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

        }



        .subscription-header::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: rgba(0, 0, 0, 0.7);

            z-index: 1;

        }



        .subscription-product-details {

            position: relative;

            z-index: 2;

        }



        .subscription-product-details h2 {

            font-size: 2.2rem;

            font-weight: 700;

            color: var(--primary-cyan);

            margin-bottom: 0.5rem;

            text-transform: uppercase;

            letter-spacing: 2px;

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

        }



        .subscription-product-details p {

            color: var(--text-secondary);

            font-size: 1.1rem;

            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);

        }



        .subscription-options {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

            gap: 1.5rem;

            padding: 2rem;

        }



        .subscription-option {

            background: rgba(0, 255, 255, 0.05);

            border: 1px solid rgba(0, 255, 255, 0.2);

            border-radius: 12px;

            padding: 1.5rem;

            transition: all 0.3s ease;

            position: relative;

            overflow: hidden;

            display: flex;

            flex-direction: column;

            min-height: 380px;

        }



        .subscription-option::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 4px;

            background: linear-gradient(90deg, var(--primary-cyan), var(--primary-purple));

            opacity: 0;

            transition: opacity 0.3s ease;

        }



        .subscription-option:hover {

            background: rgba(0, 255, 255, 0.1);

            border-color: rgba(0, 255, 255, 0.4);

            transform: translateY(-5px);

        }



        .subscription-option:hover::before {

            opacity: 1;

        }



        .subscription-option.featured {

            background: rgba(138, 43, 226, 0.1);

            border-color: var(--accent-purple);

            transform: scale(1.05);

        }



        .subscription-option.featured::before {

            background: linear-gradient(90deg, var(--accent-purple), #ff1493);

            opacity: 1;

        }



        .subscription-option.featured::after {

            content: 'MOST POPULAR';

            position: absolute;

            top: 4px;

            right: 6px;

            background: var(--accent-purple);

            color: white;

            padding: 0.3rem 1rem;

            font-size: 0.7rem;

            font-weight: 700;

            letter-spacing: 1px;

            border-radius: 15px;

            z-index: 1;

        }



        .subscription-option-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 1rem;

        }



        .subscription-option h3 {

            font-size: 1.2rem;

            font-weight: 700;

            color: var(--primary-cyan);

            text-transform: uppercase;

            letter-spacing: 1px;

        }



        .subscription-price {

            font-size: 1.5rem;

            font-weight: 700;

            color: var(--accent-purple);

            text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);

        }



        .subscription-features {

            list-style: none;

            margin: 0 0 1.5rem 0;

            padding: 0;

            flex-grow: 1;

            display: flex;

            flex-direction: column;

            justify-content: flex-start;

        }



        .subscription-features li {

            padding: 0.4rem 0;

            padding-left: 1.5rem;

            position: relative;

            color: var(--text-secondary);

            font-size: 0.9rem;

        }



        .subscription-features li::before {

            content: '✓';

            position: absolute;

            left: 0;

            color: var(--primary-cyan);

            font-weight: bold;

        }



        .subscription-select {

            width: 100%;

            margin-top: auto;

        }



        .overlay-footer {

            padding: 2rem 3rem 3rem 3rem;

            border-top: 1px solid var(--border-color);

            display: flex;

            gap: 1.5rem;

            justify-content: center;

        }



        .overlay-purchase,

        .overlay-demo {

            padding: 1rem 2.5rem;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1px;

            transition: all 0.3s ease;

            cursor: pointer;

            border: none;

            text-decoration: none;

            display: inline-block;

            text-align: center;

            min-width: 180px;

        }



        /* Mobile Responsive for Overlay */

        @media (max-width: 768px) {

            .overlay-content {

                width: 95%;

                max-height: 95vh;

            }

            

            .overlay-header {

                padding: 2rem;

                text-align: center;

            }

            

            .overlay-title {

                font-size: 2rem;

            }

            

            .overlay-features {

                padding: 1.5rem;

            }

            

            .feature-list {

                grid-template-columns: 1fr;

            }

            

            .overlay-footer {

                flex-direction: column;

                padding: 1.5rem;

            }

            

            .overlay-purchase,

            .overlay-demo {

                width: 100%;

            }

        }



/* =============================================

   TERMS OF SERVICE PAGE STYLES

   ============================================= */



.terms-container {

    max-width: 1000px;

    margin: 0 auto;

    padding: 2rem;

    background: rgba(18, 18, 35, 0.95);

    border: 1px solid var(--primary-cyan);

    border-radius: 10px;

    margin-top: 2rem;

    margin-bottom: 2rem;

    position: relative;

    overflow: hidden;

}



.terms-container::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 255, 0.02) 50%, transparent 70%);

    pointer-events: none;

}



.terms-header {

    text-align: center;

    margin-bottom: 3rem;

    position: relative;

    z-index: 2;

}



.terms-title {

    font-size: 3rem;

    font-weight: 800;

    background: linear-gradient(45deg, var(--primary-cyan), var(--primary-purple));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin-bottom: 1rem;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.terms-subtitle {

    font-size: 1.2rem;

    color: #8892b0;

    max-width: 600px;

    margin: 0 auto;

    line-height: 1.6;

}



.terms-content {

    position: relative;

    z-index: 2;

}



.terms-section {

    margin-bottom: 3rem;

    padding: 2rem;

    background: rgba(15, 15, 30, 0.7);

    border-radius: 8px;

}



.terms-section h2 {

    color: var(--primary-cyan);

    font-size: 1.8rem;

    margin-bottom: 1.5rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    text-shadow: 0 0 10px var(--primary-cyan);

}



.terms-section h3 {

    color: var(--primary-purple);

    font-size: 1.4rem;

    margin-bottom: 1rem;

    margin-top: 2rem;

}



.terms-section p,

.terms-section li {

    color: #ccd6f6;

    line-height: 1.8;

    margin-bottom: 1rem;

    font-size: 1rem;

}



.terms-section ul {

    margin-left: 2rem;

    margin-bottom: 1.5rem;

}



.terms-section li {

    margin-bottom: 0.8rem;

}



.highlight {

    color: var(--primary-cyan);

    font-weight: 600;

}



.warning {

    background: rgba(255, 69, 0, 0.1);

    border: 1px solid rgba(255, 69, 0, 0.3);

    padding: 1rem;

    border-radius: 5px;

    margin: 1.5rem 0;

}



.warning p {

    color: #ff6b4a;

    margin: 0;

}



.back-btn {

    position: fixed;

    top: 2rem;

    left: 2rem;

    background: linear-gradient(45deg, var(--primary-cyan), var(--primary-purple));

    color: white;

    border: none;

    padding: 12px 24px;

    border-radius: 25px;

    text-decoration: none;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all 0.3s ease;

    z-index: 1000;

    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);

}



.back-btn:hover {

    transform: scale(1.05);

    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);

    text-decoration: none;

    color: white;

}



.last-updated {

    text-align: center;

    color: #8892b0;

    font-style: italic;

    margin-top: 3rem;

    padding-top: 2rem;

    border-top: 1px solid rgba(100, 255, 218, 0.2);

}



/* Terms of Service Mobile Responsiveness */

@media (max-width: 768px) {

    .terms-container {

        margin: 1rem;

        padding: 1.5rem;

    }



    .terms-title {

        font-size: 2rem;

    }



    .terms-section {

        padding: 1.5rem;

    }



    .back-btn {

        top: 1rem;

        left: 1rem;

        padding: 10px 20px;

    }

}



/* =============================================

   PAYMENT OPTIONS SECTION STYLES

   ============================================= */



.payment-options {

    padding: 6rem 0;

    background: linear-gradient(135deg, rgba(15, 15, 30, 0.95) 0%, rgba(25, 25, 45, 0.9) 100%);

    position: relative;

    overflow: hidden;

}



.payment-options::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(45deg, transparent 30%, rgba(100, 255, 218, 0.02) 50%, transparent 70%);

    pointer-events: none;

}



.payment-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 2rem;

    position: relative;

    z-index: 2;

}



.crypto-showcase {

    margin-top: 3rem;

}



.crypto-slider-container {

    position: relative;

    overflow: hidden;

    padding: 2rem 0;

    background: rgba(0, 255, 255, 0.05);

    border: 1px solid rgba(100, 255, 218, 0.2);

    border-radius: 15px;

    box-shadow: 0 0 30px rgba(100, 255, 218, 0.1);

}



.crypto-slider {

    display: flex;

    animation: cryptoSlide 30s linear infinite;

    gap: 3rem;

    padding: 0 2rem;

}



.crypto-coin {

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 120px;

    padding: 0.6rem;

    background: rgba(15, 15, 30, 0.8);

    border: 1px solid rgba(100, 255, 218, 0.2);

    border-radius: 12px;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.crypto-coin::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(45deg, transparent 30%, rgba(100, 255, 218, 0.03) 50%, transparent 70%);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.crypto-coin:hover {

    transform: translateY(-5px);

    border-color: var(--primary-cyan);

    box-shadow: 0 10px 25px rgba(100, 255, 218, 0.2);

}



.crypto-coin:hover::before {

    opacity: 1;

}



.crypto-coin img {

    width: 50px;

    height: 50px;

    margin-bottom: 1rem;

    filter: drop-shadow(0 0 10px rgba(100, 255, 218, 0.3));

    transition: all 0.3s ease;

    position: relative;

    z-index: 2;

}



.crypto-coin:hover img {

    filter: drop-shadow(0 0 15px rgba(100, 255, 218, 0.5));

    transform: scale(1.1);

}



.crypto-coin span {

    color: var(--text-secondary);

    font-weight: 600;

    font-size: 0.9rem;

    text-align: center;

    letter-spacing: 0.5px;

    position: relative;

    z-index: 2;

}



.crypto-coin:hover span {

    color: var(--primary-cyan);

    text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);

}



/* Crypto Purchase Info */

.crypto-purchase-info {

    margin-top: 2rem;

    text-align: center;

    padding: 1.5rem;

    background: rgba(100, 255, 218, 0.05);

    border: 1px solid rgba(100, 255, 218, 0.1);

    border-radius: 10px;

    position: relative;

    overflow: hidden;

}



.crypto-purchase-info::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(45deg, transparent 30%, rgba(100, 255, 218, 0.02) 50%, transparent 70%);

    pointer-events: none;

}



.crypto-info-text {

    color: var(--text-secondary);

    font-size: 1rem;

    line-height: 1.6;

    margin: 0;

    position: relative;

    z-index: 2;

    font-weight: 400;

}



/* Crypto Slider Animation */

@keyframes cryptoSlide {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(-100%);

    }

}



/* Duplicate items for seamless loop */

.crypto-slider::after {

    content: '';

    display: flex;

    gap: 3rem;

    padding-left: 3rem;

}



/* Mobile Responsiveness */

@media (max-width: 768px) {

    .payment-options {

        padding: 4rem 0;

    }



    .payment-container {

        padding: 0 1rem;

    }



    .crypto-coin {

        min-width: 100px;

        padding: 1rem;

    }



    .crypto-coin img {

        width: 40px;

        height: 40px;

    }



    .crypto-slider {

        gap: 2rem;

    }

}



/* Logo Pink X Styling */

.logo-pink-x {

    color: #ff00ff; /* Kräftiges Pink */

}