/* Landing page specific styles */
        
        /* Aurora-inspired background */
        .bg-gradient {
            position: fixed;
            inset: 0;
            z-index: -3;
            background:
                radial-gradient(60% 60% at 85% 10%, rgba(139, 30, 229, 0.15) 0%, transparent 60%),
                radial-gradient(50% 50% at 15% 80%, rgba(30, 136, 229, 0.12) 0%, transparent 60%),
                linear-gradient(180deg, rgba(3, 6, 26, 1) 0%, rgba(5, 10, 30, 1) 100%);
            pointer-events: none;
        }
        
        /* Particle background canvas */
        .bg-canvas {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            pointer-events: none;
        }


        /* Landing Hero */
        .landing-hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            padding: 120px 2rem 80px;
            overflow: visible;
        }

        .landing-hero .tagline {
            font-size: clamp(3.5rem, 9vw, 6rem);
            font-weight: 800;
            margin-bottom: 1.5rem;
            line-height: 1.1;
            background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            overflow: visible;
            letter-spacing: -0.03em;
        }

        .landing-hero .tagline span {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .landing-hero .subtitle {
            font-size: 1.35rem;
            opacity: 0.88;
            max-width: 700px;
            margin-bottom: 3rem;
            line-height: 1.65;
            font-weight: 400;
        }

        .hero-cta {
            display: flex;
            gap: 1.25rem;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 3rem;
        }

        /* ===== PRODUCTS SHOWCASE (Proton-style) ===== */
        .products-showcase {
            width: 100%;
            max-width: 800px;
            margin: 0 auto 3rem;
        }

        .products-grid {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 0.75rem;
        }

        .products-grid-secondary {
            opacity: 0.7;
        }

        .products-grid-secondary .product-card {
            transform: scale(0.9);
        }

        .product-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            padding: 1.25rem 1.5rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.9);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            min-width: 100px;
            position: relative;
        }

        .product-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(169, 73, 243, 0.4);
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(169, 73, 243, 0.15);
        }

        .product-card.coming-soon {
            opacity: 0.6;
            cursor: default;
        }

        .product-card.coming-soon:hover {
            transform: none;
            box-shadow: none;
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.08);
        }

        .product-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            font-size: 0.6rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 3px 8px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 20px;
            color: #fff;
        }

        .product-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(169, 73, 243, 0.15), rgba(30, 136, 229, 0.1));
            border-radius: 12px;
        }

        .product-icon i {
            font-size: 1.25rem;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .product-name {
            font-size: 0.8rem;
            font-weight: 500;
            opacity: 0.9;
        }

        /* ===== HERO TRUST BAR ===== */
        .hero-trust-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            padding: 1rem 2rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 50px;
            margin-bottom: 2rem;
        }

        .trust-badge {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.7);
        }

        .trust-badge i {
            font-size: 1rem;
            color: var(--primary-color);
        }

        .trust-divider {
            width: 1px;
            height: 20px;
            background: rgba(255, 255, 255, 0.15);
        }

        /* ===== SCROLL INDICATOR ===== */
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
            animation: bounce 2s infinite;
        }

        .scroll-indicator i {
            font-size: 1.5rem;
            color: rgba(255, 255, 255, 0.4);
            transition: color 0.3s ease;
        }

        .scroll-indicator:hover i {
            color: rgba(255, 255, 255, 0.8);
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-10px);
            }
            60% {
                transform: translateX(-50%) translateY(-5px);
            }
        }

        /* ===== DEMO CAROUSEL ===== */
        .demo-carousel {
            width: 100%;
            max-width: 1200px;
            padding: 0 2rem;
            margin-top: 3rem;
            margin-bottom: -150px;
            position: relative;
            z-index: 1;
        }

        .demo-tabs {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .demo-tab {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.2rem;
            background: rgba(248, 250, 252, 0.06);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            font-family: inherit;
        }

        .demo-tab:hover {
            background: rgba(248, 250, 252, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.9);
        }

        .demo-tab.active {
            background: rgba(169, 73, 243, 0.2);
            border-color: rgba(169, 73, 243, 0.4);
            color: #fff;
        }

        .demo-tab i {
            font-size: 0.85rem;
        }

        .demo-glass {
            background: rgba(10, 12, 28, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 2px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            overflow: hidden;
        }

        .demo-slides {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            height: auto;
            background: linear-gradient(135deg, rgba(15, 18, 35, 1) 0%, rgba(8, 10, 25, 1) 100%);
            border-radius: 22px;
            overflow: hidden;
        }

        .demo-slide {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transform: translateX(20px);
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            pointer-events: none;
        }

        .demo-slide.active {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
        }

        .demo-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 22px;
        }

        /* Keep original showcase styles for product pages */
        .hero-showcase {
            width: 100%;
            max-width: 1200px;
            padding: 0 2rem;
            margin-top: 3rem;
            margin-bottom: -150px;
            position: relative;
            z-index: -2;
        }

        .showcase-glass {
            background: rgba(248, 250, 252, 0.08);
            backdrop-filter: blur(12px) contrast(1.1);
            -webkit-backdrop-filter: blur(12px) contrast(1.1);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 24px;
            padding: 2px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
            overflow: hidden;
        }

        .showcase-glass img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 22px;
        }

        /* Trust Stats Section */
        .trust-stats {
            padding: 4rem 2rem;
            background: linear-gradient(180deg, transparent 0%, rgba(15, 15, 26, 0.5) 100%);
        }

        .trust-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1.5rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .trust-item {
            text-align: center;
            padding: 1.5rem;
            background: var(--glass-background);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            transition: all 0.3s ease;
        }

        .trust-item:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
        }

        .trust-item i {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 0.75rem;
            display: block;
        }

        .trust-value {
            font-size: 1.75rem;
            font-weight: 700;
            display: block;
            margin-bottom: 0.25rem;
        }

        .trust-label {
            font-size: 0.85rem;
            opacity: 0.7;
        }

        /* Hosting Sections */
        .hosting-section {
            padding: 6rem 2rem;
            position: relative;
        }

        .hosting-section:nth-child(even) {
            background: rgba(15, 15, 26, 0.3);
        }

        .hosting-section .container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .hosting-section:nth-child(even) .container {
            direction: rtl;
        }

        .hosting-section:nth-child(even) .container > * {
            direction: ltr;
        }

        .hosting-content h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .hosting-content h2 span {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hosting-content p {
            font-size: 1.1rem;
            opacity: 0.85;
            margin-bottom: 1.5rem;
            line-height: 1.7;
        }

        .hosting-features {
            list-style: none;
            margin-bottom: 2rem;
        }

        .hosting-features li {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
            font-size: 1rem;
        }

        .hosting-features li i {
            color: var(--success-color);
            font-size: 1rem;
        }

        .hosting-visual {
            position: relative;
        }

        .hosting-visual .visual-card {
            background: var(--glass-background);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            padding: 2rem;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .hosting-visual .icon-large {
            font-size: 4rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
            display: block;
            text-align: center;
        }

        .hosting-visual .visual-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .hosting-visual .visual-stat {
            text-align: center;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
        }

        .hosting-visual .visual-stat span {
            display: block;
        }

        .hosting-visual .visual-stat .value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
        }

        .hosting-visual .visual-stat .label {
            font-size: 0.8rem;
            opacity: 0.7;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .products-grid {
                gap: 0.75rem;
            }

            .product-card {
                padding: 1rem 1.25rem;
                min-width: 85px;
            }

            .hosting-section .container {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .hosting-section:nth-child(even) .container {
                direction: ltr;
            }
        }

        @media (max-width: 768px) {
            .landing-hero {
                padding: 100px 1.5rem 100px;
            }

            .products-showcase {
                padding: 0 1rem;
            }

            .products-grid {
                gap: 0.5rem;
            }

            .product-card {
                padding: 0.75rem 1rem;
                min-width: 70px;
            }

            .product-icon {
                width: 40px;
                height: 40px;
            }

            .product-icon i {
                font-size: 1rem;
            }

            .product-name {
                font-size: 0.7rem;
            }

            .hero-trust-bar {
                flex-wrap: wrap;
                gap: 1rem;
                padding: 1rem;
                border-radius: 16px;
            }

            .trust-divider {
                display: none;
            }

            .hosting-content h2 {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .landing-hero .tagline {
                font-size: 2rem;
            }

            .landing-hero .subtitle {
                font-size: 0.95rem;
            }

            .products-grid-secondary {
                display: none;
            }

            .hero-trust-bar {
                flex-direction: column;
                gap: 0.75rem;
            }
        }

        /* ===== MINECRAFT HOSTING SECTION ===== */
        .minecraft-section {
            padding: 8rem 2rem;
            position: relative;
            background: linear-gradient(180deg, transparent 0%, rgba(139, 30, 229, 0.03) 50%, transparent 100%);
            overflow: hidden;
        }

        .minecraft-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url('/images/minecraft2.png');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            opacity: 0.05;
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 8%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0.3) 92%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 8%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0.3) 92%, rgba(0,0,0,0) 100%);
            pointer-events: none;
            z-index: 0;
        }

        .minecraft-section .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Section Header */
        .mc-header {
            text-align: center;
            margin-bottom: 4rem;
            position: relative;
            padding: 3rem 2rem;
            border-radius: 16px;
            z-index: 1;
        }

        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(139, 30, 229, 0.15);
            border: 1px solid rgba(139, 30, 229, 0.3);
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
        }

        .section-badge i {
            font-size: 0.9rem;
        }

        .mc-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.85) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .mc-title span {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .mc-subtitle {
            font-size: 1.15rem;
            opacity: 0.8;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* ===== SHOWCASE SECTION ===== */
        .mc-showcase {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 3rem;
            align-items: center;
            margin-bottom: 4rem;
        }

        .mc-showcase-content {
            padding-right: 1rem;
        }

        .showcase-headline {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.3;
        }

        .showcase-headline span {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .showcase-desc {
            font-size: 1rem;
            opacity: 0.85;
            line-height: 1.7;
            margin-bottom: 2rem;
        }

        .showcase-desc strong {
            color: var(--primary-color);
            font-weight: 600;
        }

        /* Value Cards */
        .value-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .value-card {
            display: flex;
            align-items: flex-start;
            gap: 0.9rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateX(-20px);
            animation: slideInCard 0.6s ease forwards;
        }

        .value-card:nth-child(1) { animation-delay: 0.1s; }
        .value-card:nth-child(2) { animation-delay: 0.2s; }
        .value-card:nth-child(3) { animation-delay: 0.3s; }
        .value-card:nth-child(4) { animation-delay: 0.4s; }

        @keyframes slideInCard {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .value-card:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(139, 30, 229, 0.3);
            transform: translateY(-2px);
        }

        .value-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(139, 30, 229, 0.2), rgba(30, 136, 229, 0.15));
            border-radius: 10px;
            flex-shrink: 0;
        }

        .value-icon i {
            font-size: 1rem;
            color: var(--primary-color);
        }

        .value-text {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }

        .value-title {
            font-size: 0.9rem;
            font-weight: 600;
        }

        .value-desc {
            font-size: 0.8rem;
            opacity: 0.7;
            line-height: 1.4;
        }

        /* ===== AURORA PANEL MOCKUP ===== */
        .mc-panel-mockup {
            position: relative;
            perspective: 1000px;
        }

        .panel-window {
            display: flex;
            background: rgba(15, 15, 30, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 
                0 25px 80px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset;
            transform: rotateY(-5deg) rotateX(2deg);
            transition: transform 0.4s ease;
        }

        .panel-window:hover {
            transform: rotateY(-2deg) rotateX(1deg);
        }

        /* Panel Sidebar */
        .panel-sidebar {
            width: 180px;
            background: rgba(20, 20, 40, 0.9);
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            padding: 1rem 0;
            flex-shrink: 0;
        }

        .panel-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            font-size: 0.9rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 1rem;
        }

        .panel-logo i {
            color: var(--primary-color);
        }

        .app-sidebar {
            list-style: none;
            margin: 0;
            padding: 0 0.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .app-sidebar > li {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            padding: 0.6rem 0.8rem;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
            white-space: nowrap;
            border: 1px solid transparent;
            border-radius: 8px;
            user-select: none;
        }

        .app-sidebar > li.active {
            color: #fff;
            background: linear-gradient(90deg, rgba(139, 30, 229, 0.2), transparent);
            border-left: 2px solid var(--primary-color);
            padding-left: calc(0.8rem - 2px);
        }

        .app-sidebar i {
            font-size: 0.85rem;
            width: 18px;
            text-align: center;
            flex-shrink: 0;
        }

        /* Panel Main Content */
        .panel-main {
            flex: 1;
            padding: 1.25rem;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-height: 420px;
        }

        .console-page-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
        }

        .console-title-row {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .server-status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-top: 6px;
            flex-shrink: 0;
        }

        .server-status-dot.online {
            background: #22c55e;
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
            animation: pulse-dot 2s infinite;
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .console-title {
            font-size: 1rem;
            font-weight: 600;
            margin: 0;
        }

        .console-desc {
            font-size: 0.75rem;
            opacity: 0.6;
            margin: 0;
        }

        /* Console Output */
        .console-output {
            flex: 1;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            padding: 0.75rem;
            max-height: 120px;
            min-height: 80px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.5;
            overflow-y: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .dev-console {
            max-height: 220px;
        }

        .console-input-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            padding: 0.5rem 0.75rem;
        }

        .console-input {
            flex: 1;
            font-size: 0.75rem;
            opacity: 0.5;
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, 0.8);
            outline: none;
            pointer-events: none;
        }

        .console-input::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .send-btn {
            padding: 0.35rem 0.75rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 6px;
            color: #fff;
            font-size: 0.7rem;
            font-weight: 500;
        }

        /* Server Controls */
        .server-controls-bar {
            display: flex;
            gap: 0.5rem;
        }

        .ctrl-pill {
            flex: 1;
            padding: 0.6rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ctrl-pill.ctrl-start {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05));
            border-color: rgba(34, 197, 94, 0.25);
            color: #4ade80;
        }


        .ctrl-pill.ctrl-restart {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
            border-color: rgba(245, 158, 11, 0.25);
            color: #fbbf24;
        }


        .ctrl-pill.ctrl-stop {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05));
            border-color: rgba(239, 68, 68, 0.25);
            color: #f87171;
        }


        /* Stats Row */
        .stats-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
        }

        .live-stat-card {
            background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px;
            padding: 0.75rem;
        }

        .live-stat-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.7rem;
            color: rgba(255,255,255,0.55);
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .live-stat-header i {
            font-size: 0.7rem;
            opacity: 0.7;
        }

        .live-stat-value {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.25rem;
        }

        .live-stat-value.status-running {
            color: #22c55e;
        }

        .live-stat-sub {
            font-size: 0.65rem;
            color: rgba(255,255,255,0.4);
        }

        .live-stat-bar {
            width: 100%;
            height: 4px;
            background: rgba(255,255,255,0.08);
            border-radius: 2px;
            margin-top: 0.5rem;
            overflow: hidden;
        }

        .live-stat-bar-fill {
            height: 100%;
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .live-stat-bar-fill.cpu-bar {
            background: linear-gradient(90deg, #3b82f6, #60a5fa);
        }

        .live-stat-bar-fill.mem-bar {
            background: linear-gradient(90deg, #a855f7, #c084fc);
        }

        /* Feature Pills */
        .mc-features {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.75rem;
            margin-bottom: 4rem;
        }

        .feature-pill {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.1rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.85);
            transition: all 0.3s ease;
        }

        .feature-pill:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(139, 30, 229, 0.4);
            transform: translateY(-2px);
        }

        .feature-pill i {
            color: var(--primary-color);
            font-size: 0.85rem;
        }

        /* Plan Preview Cards */
        .mc-plan-previews {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .plan-preview {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 1.1rem;
            background: linear-gradient(135deg, rgba(139, 30, 229, 0.08), rgba(30, 136, 229, 0.05));
            border: 1px solid rgba(139, 30, 229, 0.2);
            border-radius: 14px;
            transition: all 0.3s ease;
        }

        .plan-preview:hover {
            background: linear-gradient(135deg, rgba(139, 30, 229, 0.12), rgba(30, 136, 229, 0.08));
            border-color: rgba(139, 30, 229, 0.35);
            transform: translateY(-2px);
        }

        .preview-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(139, 30, 229, 0.15);
            border-radius: 10px;
            flex-shrink: 0;
        }

        .preview-icon i {
            font-size: 1rem;
            color: var(--primary-color);
        }

        .preview-info {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            min-width: 0;
        }

        .preview-name {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text);
        }

        .preview-price {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--primary-color);
        }

        .preview-spec {
            font-size: 0.75rem;
            opacity: 0.65;
        }

        /* Slim Plan Cards */
        .mc-plans {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto 2rem;
        }

        .plan-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .plan-card-slim {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            padding: 1.5rem 1.25rem;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
            border: 2px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            transition: all 0.3s ease;
        }

        .plan-card-slim:hover {
            border-color: rgba(139, 30, 229, 0.4);
            background: linear-gradient(135deg, rgba(139, 30, 229, 0.08), rgba(30, 136, 229, 0.04));
        }

        .plan-card-slim.popular {
            border-color: var(--primary-color);
            background: linear-gradient(135deg, rgba(139, 30, 229, 0.2), rgba(30, 136, 229, 0.1));
            box-shadow: 0 0 30px rgba(139, 30, 229, 0.2);
            transform: scale(1.02);
        }

        .plan-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, var(--primary-color), #a855f7);
            color: #fff;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 0.35rem 0.85rem;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            white-space: nowrap;
            box-shadow: 0 4px 15px rgba(139, 30, 229, 0.3);
        }

        .mc-plans-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }

        .mc-plans-header h3 {
            font-size: clamp(1.5rem, 4vw, 2.2rem);
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #fff;
        }

        .mc-plans-header h3 span {
            background: linear-gradient(135deg, var(--primary-color), #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .mc-plans-header p {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.7);
            max-width: 500px;
            margin: 0 auto;
        }

        .plan-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .plan-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(139, 30, 229, 0.2), rgba(30, 136, 229, 0.1));
            border-radius: 10px;
            color: var(--primary-color);
            font-size: 1rem;
            flex-shrink: 0;
        }

        .plan-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: #fff;
        }

        .plan-description {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.75);
            line-height: 1.4;
            margin: 0.25rem 0;
        }

        .plan-specs-list {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .spec-item {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .spec-item i {
            width: 14px;
            text-align: center;
            opacity: 0.7;
        }

        .plan-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-top: 0.5rem;
        }

        .plan-price {
            font-size: 1.6rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary-color), #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .plan-price span {
            font-size: 0.85rem;
            font-weight: 400;
            background: none;
            -webkit-text-fill-color: unset;
            color: rgba(255, 255, 255, 0.6);
        }

        .plan-card-slim .btn-small {
            padding: 0.5rem 1rem;
            font-size: 0.8rem;
            flex-shrink: 0;
        }

        /* Pricing CTA Section */
        .mc-pricing-cta {
            text-align: center;
            padding: 1.5rem 2rem;
            margin-bottom: 3rem;
        }

        .btn-large {
            padding: 1rem 2.5rem;
            font-size: 1rem;
            font-weight: 600;
        }

        /* Custom Plans Banner */
        .mc-custom-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            padding: 2rem;
            margin: 2rem 0;
            background: linear-gradient(135deg, rgba(139, 30, 229, 0.1), rgba(30, 136, 229, 0.05));
            border: 1px solid rgba(139, 30, 229, 0.3);
            border-radius: 14px;
            flex-wrap: wrap;
        }

        .custom-banner-text {
            flex: 1;
            min-width: 250px;
        }

        .custom-banner-text h3 {
            font-size: 1.2rem;
            font-weight: 700;
            color: #fff;
            margin: 0 0 0.5rem 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .custom-banner-text h3 i {
            color: var(--primary-color);
        }

        .custom-banner-text p {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.7);
            margin: 0;
        }

        .custom-banner-text strong {
            color: var(--primary-color);
            font-weight: 600;
        }

        .mc-custom-banner .btn {
            flex-shrink: 0;
        }

        /* All Plans Link */
        .mc-all-plans-link {
            text-align: center;
            margin: 1.5rem 0 0 0;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }

        .mc-all-plans-link a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            transition: opacity 0.3s ease;
        }

        .mc-all-plans-link a:hover {
            opacity: 0.8;
        }

        /* Bottom Section */
        .mc-bottom {
            text-align: center;
        }

        .mc-custom {
            font-size: 1rem;
            opacity: 0.8;
            margin-bottom: 2rem;
        }

        .mc-custom a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }

        .mc-custom a:hover {
            color: var(--secondary-color);
        }

        .mc-trust {
            display: inline-flex;
            align-items: center;
            gap: 2rem;
            padding: 1.25rem 2.5rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 50px;
        }

        .trust-stat {
            text-align: center;
        }

        .stat-value {
            display: block;
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--primary-color);
        }

        .stat-label {
            font-size: 0.8rem;
            opacity: 0.7;
        }

        .mc-trust .trust-divider {
            width: 1px;
            height: 30px;
            background: rgba(255, 255, 255, 0.15);
        }

        /* Scroll Reveal Animations */
        .reveal-up {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        .reveal-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .delay-1 { transition-delay: 0.1s; }
        .delay-2 { transition-delay: 0.2s; }
        .delay-3 { transition-delay: 0.3s; }
        .delay-4 { transition-delay: 0.4s; }

        /* Responsive - Minecraft Section */
        @media (max-width: 1024px) {
            .mc-showcase {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }

            .mc-showcase-content {
                padding-right: 0;
                text-align: center;
            }

            .value-cards {
                max-width: 500px;
                margin: 0 auto;
            }

            .mc-panel-mockup {
                max-width: 600px;
                margin: 0 auto;
            }

            .panel-window {
                transform: none;
            }

            .panel-window:hover {
                transform: none;
            }

            .mc-plan-previews {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 768px) {
            .minecraft-section {
                padding: 5rem 1.5rem;
            }

            .mc-title {
                font-size: 2.2rem;
            }

            .mc-subtitle {
                font-size: 1.05rem;
            }

            .showcase-headline {
                font-size: 1.5rem;
            }

            .showcase-desc {
                font-size: 1rem;
            }

            .value-cards {
                grid-template-columns: 1fr;
            }

            .panel-sidebar {
                width: 140px;
            }

            .panel-logo {
                font-size: 0.8rem;
            }

            .nav-item {
                font-size: 0.7rem;
                padding: 0.5rem 0.75rem;
            }

            .stats-row {
                grid-template-columns: 1fr;
            }

            .mc-features {
                gap: 0.5rem;
            }

            .feature-pill {
                padding: 0.5rem 0.9rem;
                font-size: 0.8rem;
            }

            .mc-plan-previews {
                grid-template-columns: 1fr;
            }

            .plan-row {
                grid-template-columns: 1fr;
            }

            .plan-card-slim {
                flex-direction: row;
                align-items: center;
                gap: 1rem;
            }

            .plan-header {
                min-width: fit-content;
            }

            .plan-footer {
                margin-left: auto;
                flex-direction: column;
                gap: 0.5rem;
            }

            .plan-description {
                display: none;
            }

            .plan-specs-list {
                display: none;
            }

            .mc-pricing-cta h3 {
                font-size: 1.5rem;
            }

            .mc-pricing-cta p {
                font-size: 0.95rem;
            }

            .mc-trust {
                flex-direction: column;
                gap: 1rem;
                padding: 1.5rem 2rem;
                border-radius: 20px;
            }

            .mc-trust .trust-divider {
                width: 50px;
                height: 1px;
            }
        }

        @media (max-width: 480px) {
            .minecraft-section {
                padding: 4rem 1rem;
            }

            .mc-title {
                font-size: 1.9rem;
                margin-bottom: 0.75rem;
            }

            .mc-subtitle {
                font-size: 0.95rem;
            }

            .showcase-headline {
                font-size: 1.35rem;
            }

            .showcase-desc {
                font-size: 0.95rem;
                margin-bottom: 1.5rem;
            }

            .plan-preview {
                padding: 0.9rem;
            }

            .preview-icon {
                width: 36px;
                height: 36px;
            }

            .preview-icon i {
                font-size: 0.9rem;
            }

            .preview-name {
                font-size: 0.85rem;
            }

            .preview-price {
                font-size: 0.8rem;
            }

            .preview-spec {
                font-size: 0.7rem;
            }

            .panel-sidebar {
                display: none;
            }

            .panel-main {
                padding: 0.9rem;
            }

            .console-title {
                font-size: 0.9rem;
            }

            .console-desc {
                font-size: 0.7rem;
            }

            .mc-pricing-cta {
                padding: 2rem 1.25rem;
            }

            .mc-pricing-cta h3 {
                font-size: 1.35rem;
            }

            .mc-pricing-cta p {
                font-size: 0.9rem;
            }

            .btn-large {
                padding: 0.85rem 1.75rem;
                font-size: 0.95rem;
            }
        }

/* ============================================
   TESTIMONIALS / WALL OF LOVE
   ============================================ */

.t-section { position: relative; padding: 5rem 0; }
.t-heading { text-align: center; margin-bottom: 1.5rem; }
.t-badge { display:inline-block; padding:.35rem .8rem; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); font-size:.85rem; }
.t-title { font-size: clamp(1.8rem,4vw,3rem); margin:.6rem 0 .4rem; background: linear-gradient(90deg,#fff,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent; }
.t-sub { opacity:.8; }
.t-wall { display: grid; gap: 1rem; margin-top: 1.25rem; --speed: 48s; --gap: 1rem; mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 2%, #000 98%, rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 2%, #000 98%, rgba(0,0,0,0) 100%); }
.marquee-row { overflow: hidden; }
.track { display: flex; gap: var(--gap); width: max-content; animation: scrollX var(--speed) linear infinite; }
.marquee-row.reverse .track { animation-direction: reverse; }
.t-card { width: clamp(420px, 42vw, 640px); padding: 1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.t-user { display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem; }
.t-pfp { width: 40px; height: 40px; border-radius: 50%; display:grid; place-items:center; font-weight:700; color:#0b0b14; background:#dcdcf3; overflow:hidden; }
.t-name { font-weight:600; }
.t-handle { opacity:.7; font-size:.9rem; }
.t-discord-btn { margin-top: .75rem; gap: .5rem; }
.t-text { opacity:.9; }
.t-wall:hover .track { animation-play-state: paused; }
@keyframes scrollX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 720px){ .t-card { width: 85vw; } }

/* ============================================
   AURORA PANEL SECTION
   ============================================ */

.aurora-section {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
}

.aurora-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/aurorabg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.1;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 8%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0.3) 92%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 8%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0.3) 92%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 0;
}

.aurora-header {
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.aurora-header .section-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(139, 30, 229, 0.15);
    border: 1px solid rgba(139, 30, 229, 0.3);
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: 600;
}

.aurora-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.aurora-logo {
    height: 1em;
    width: auto;
    opacity: 0.95;
}

.aurora-title span {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aurora-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
}

.aurora-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 1rem;
    align-items: center;
    position: relative;
    z-index: 1;
    min-height: 500px;
}

.aurora-showcase-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.aurora-showcase-content .showcase-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.aurora-showcase-content .showcase-headline span {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aurora-showcase-content .showcase-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

/* Aurora Panel Carousel - Full Width */
.aurora-carousel-full {
    position: relative;
    margin: 4rem 0;
}

.carousel-wrapper-full {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(139, 30, 229, 0.2);
    border: 1px solid rgba(139, 30, 229, 0.2);
    aspect-ratio: 16 / 9;
    background: rgba(15, 15, 25, 0.8);
    z-index: 1;
}

.carousel-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Carousel Navigation Dots */
.carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0 1rem;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-dot.active {
    width: 24px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 0 12px rgba(139, 30, 229, 0.4);
}

.carousel-dot:hover {
    background: rgba(255, 255, 255, 0.5);
}

.carousel-dot.active:hover {
    box-shadow: 0 0 16px rgba(139, 30, 229, 0.6);
}

/* Demo Link */
.aurora-demo-link {
    margin-top: 1.5rem;
}

.aurora-demo-link .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Aurora Stats - Full Width */
.aurora-stats-full {
    width: 100%;
    margin: 3rem 0 4rem 0;
}

.aurora-stats-full .aurora-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: rgba(139, 30, 229, 0.08);
    border: 1px solid rgba(139, 30, 229, 0.15);
    border-radius: 12px;
    flex-wrap: wrap;
    gap: 2rem;
}

.aurora-stats-full .trust-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 120px;
}

.aurora-stats-full .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aurora-stats-full .stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.5rem;
}

.aurora-stats-full .trust-divider {
    width: 1px;
    height: 35px;
    background: rgba(139, 30, 229, 0.3);
}

/* Aurora How It Works - Inline */
.aurora-how-inline {
    margin: 2rem 0;
}

.aurora-how-inline h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.how-grid-inline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.how-card-inline {
    padding: 1.25rem;
    background: rgba(139, 30, 229, 0.05);
    border: 1px solid rgba(139, 30, 229, 0.15);
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.how-card-inline:hover {
    background: rgba(139, 30, 229, 0.1);
    border-color: rgba(139, 30, 229, 0.25);
    transform: translateY(-3px);
}

.how-card-inline .how-icon {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.how-card-inline h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.how-card-inline p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

/* Aurora "How It Works" Section */
.aurora-how {
    margin-bottom: 4rem;
}

.aurora-how h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    text-align: center;
}

.how-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.how-card {
    padding: 2rem;
    background: rgba(139, 30, 229, 0.06);
    border: 1px solid rgba(139, 30, 229, 0.15);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.how-card:hover {
    background: rgba(139, 30, 229, 0.12);
    border-color: rgba(139, 30, 229, 0.3);
    transform: translateY(-6px);
}

.how-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin: 0 auto;
}

.how-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.how-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* Aurora CTA Banner */
.aurora-cta-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(139, 30, 229, 0.15), rgba(30, 136, 229, 0.1));
    border: 2px solid rgba(139, 30, 229, 0.3);
    border-radius: 16px;
    flex-wrap: wrap;
}

.cta-banner-text {
    flex: 1;
    min-width: 250px;
}

.cta-banner-text h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.95);
}

.cta-banner-text p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Responsive Aurora */
@media (max-width: 1024px) {
    .aurora-showcase {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .carousel-wrapper-full {
        aspect-ratio: 16 / 10;
    }

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

@media (max-width: 768px) {
    .aurora-section {
        padding: 3rem 0;
    }

    .aurora-header {
        margin-bottom: 2.5rem;
    }

    .aurora-title {
        font-size: 1.75rem;
    }

    .aurora-showcase {
        grid-template-columns: 1fr;
    }

    .aurora-showcase-content .showcase-headline {
        font-size: 1.35rem;
    }

    .carousel-wrapper-full {
        aspect-ratio: 4 / 3;
    }

    .carousel-nav {
        gap: 0.35rem;
    }

    .carousel-dot {
        width: 6px;
        height: 6px;
    }

    .carousel-dot.active {
        width: 18px;
    }

    .aurora-stats-inline .aurora-trust {
        flex-direction: column;
        gap: 1rem;
    }

    .aurora-stats-inline .trust-divider {
        width: 30px;
        height: 1px;
    }

    .aurora-cta-banner {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
    }

    .cta-banner-text h3 {
        font-size: 1.25rem;
    }

    .how-grid-inline {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .aurora-how-inline h4 {
        font-size: 1.1rem;
    }
}

/* ============================================
   DEVELOPER HOSTING SECTION
   ============================================ */

/* Developer Color Variables */
.developer-section {
    --dev-primary: #f339cb;
    --dev-primary-light: hsl(300, 93%, 89%);
    --dev-secondary: hsl(347, 78%, 67%);
    --dev-secondary-light: hsl(352, 78%, 82%);
}

.developer-section {
    padding: 8rem 2rem;
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(243, 57, 203, 0.03) 50%, transparent 100%);
    overflow: hidden;
}

.developer-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/servers.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.05;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 8%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0.3) 92%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 8%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0.3) 92%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 0;
}

.developer-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header */
.dev-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    padding: 3rem 2rem;
    border-radius: 16px;
    z-index: 1;
}

.dev-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(243, 57, 203, 0.15);
    border: 1px solid rgba(243, 57, 203, 0.3);
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--dev-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

.dev-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.dev-title span {
    background: linear-gradient(135deg, var(--dev-primary), var(--dev-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dev-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
    margin: 0 auto;
}

/* Showcase: Same as Minecraft */
.dev-showcase {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: stretch;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.dev-showcase-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dev-showcase-headline {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
}

.dev-showcase-headline span {
    background: linear-gradient(135deg, var(--dev-primary), var(--dev-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dev-showcase-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
}

/* Developer Value Cards - Same as MC */
.dev-value-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.dev-value-card {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(243, 57, 203, 0.1);
    background: rgba(243, 57, 203, 0.02);
    transition: all 0.3s;
}

.dev-value-card:hover {
    border-color: rgba(243, 57, 203, 0.25);
    background: rgba(243, 57, 203, 0.05);
}

.dev-value-icon {
    font-size: 1.5rem;
    color: var(--dev-primary);
}

.dev-value-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dev-value-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.dev-value-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Developer Panel Mockup - Same structure as MC */
.dev-panel-mockup {
    position: relative;
    z-index: 1;
}

.dev-panel-mockup .panel-window {
    border-color: rgba(243, 57, 203, 0.2);
}

.dev-panel-mockup .panel-sidebar {
    border-color: rgba(243, 57, 203, 0.15);
}

.dev-panel-mockup .panel-logo {
    color: white;
}

.dev-panel-mockup .dev-panel-logo i {
    color: var(--dev-primary);
}

.dev-panel-mockup .app-sidebar li.active {
    background: rgba(243, 57, 203, 0.15);
    color: var(--dev-primary);
    border-left-color: var(--dev-primary);
}

.dev-console {
    max-height: 140px;
    font-size: 0.7rem;
}

.dev-send {
    background: var(--dev-primary) !important;
}

.dev-stat {
    border-color: rgba(243, 57, 203, 0.1) !important;
}

.dev-cpu-bar {
    background: linear-gradient(90deg, var(--dev-primary), var(--dev-secondary)) !important;
}

.dev-mem-bar {
    background: linear-gradient(90deg, var(--dev-secondary), var(--dev-primary)) !important;
}

/* Trust Section */
.dev-trust-section {
    position: relative;
    z-index: 1;
    margin: 3rem 0;
}

.dev-trust {
    border-color: rgba(243, 57, 203, 0.15) !important;
    background: rgba(243, 57, 203, 0.03) !important;
}

.dev-trust .stat-value {
    color: var(--dev-primary) !important;
}

.dev-trust .trust-divider {
    background: rgba(243, 57, 203, 0.2) !important;
}

/* Plans Section */
.dev-plans {
    position: relative;
    z-index: 1;
    margin: 3rem 0 2rem 0;
}

.dev-plans-header {
    text-align: center;
    margin-bottom: 2rem;
}

.dev-plans-header h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.5rem;
}

.dev-plans-header h3 span {
    background: linear-gradient(135deg, var(--dev-primary), var(--dev-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dev-plans-header p {
    color: rgba(255, 255, 255, 0.7);
}

/* Tab Selector */
.dev-tab-selector {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.dev-tab {
    padding: 0.8rem 1.75rem;
    border: 2px solid rgba(243, 57, 203, 0.3);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dev-tab:hover {
    border-color: var(--dev-primary);
    color: white;
}

.dev-tab.active {
    background: linear-gradient(135deg, var(--dev-primary), var(--dev-secondary));
    color: white;
    border-color: var(--dev-primary);
    box-shadow: 0 8px 20px rgba(243, 57, 203, 0.3);
}

/* Tab Content */
.dev-tab-content {
    display: none;
}

.dev-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Plan Cards - Developer Themed */
.dev-plan {
    border-color: rgba(243, 57, 203, 0.15) !important;
    background: rgba(243, 57, 203, 0.02) !important;
}

.dev-plan:hover {
    border-color: rgba(243, 57, 203, 0.35) !important;
    background: rgba(243, 57, 203, 0.06) !important;
    box-shadow: 0 15px 40px rgba(243, 57, 203, 0.15) !important;
}

.dev-plan.popular {
    border-color: rgba(243, 57, 203, 0.4) !important;
    background: linear-gradient(135deg, rgba(243, 57, 203, 0.08), rgba(243, 57, 203, 0.03)) !important;
    box-shadow: 0 0 30px rgba(243, 57, 203, 0.15) !important;
}

.dev-plan.popular:hover {
    box-shadow: 0 0 50px rgba(243, 57, 203, 0.25) !important;
}

.dev-badge-pop {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--dev-primary), var(--dev-secondary)) !important;
    color: white !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 15px rgba(243, 57, 203, 0.35) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.dev-plan .plan-icon {
    color: var(--dev-primary);
}

.dev-plan .plan-price {
    background: linear-gradient(135deg, var(--dev-primary), var(--dev-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-dev-outline {
    border: 2px solid rgba(243, 57, 203, 0.4);
    color: var(--dev-primary);
    background: transparent;
    padding: 0.65rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
}

.btn-dev-outline:hover {
    background: var(--dev-primary);
    color: white;
    border-color: var(--dev-primary);
    box-shadow: 0 6px 15px rgba(243, 57, 203, 0.2);
}

/* Custom Banner */
.dev-custom-banner {
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid rgba(243, 57, 203, 0.2);
    background: linear-gradient(135deg, rgba(243, 57, 203, 0.08), rgba(243, 57, 203, 0.02));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}

.dev-custom-banner h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dev-custom-banner h3 i {
    color: var(--dev-primary);
}

.dev-custom-banner p {
    color: rgba(255, 255, 255, 0.7);
}

.dev-price-highlight {
    color: var(--dev-primary) !important;
    font-weight: 700;
}

.dev-custom-banner .btn-primary {
    background: linear-gradient(135deg, var(--dev-primary), var(--dev-secondary));
    box-shadow: 0 4px 15px rgba(243, 57, 203, 0.4);
}

.dev-custom-banner .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(243, 57, 203, 0.5);
    border-color: rgba(243, 57, 203, 0.6);
}

.btn-dev-primary {
    background: linear-gradient(135deg, var(--dev-primary), var(--dev-secondary));
    color: white;
    padding: 1rem 2rem;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-dev-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(243, 57, 203, 0.3);
}

.dev-all-plans-link {
    text-align: center;
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

.dev-all-plans-link a {
    color: var(--dev-primary);
    font-weight: 600;
    transition: color 0.3s;
}

.dev-all-plans-link a:hover {
    color: var(--dev-secondary);
}

/* Responsive */
@media (max-width: 1024px) {
    .dev-showcase {
        grid-template-columns: 1fr;
    }

    .dev-custom-banner {
        flex-direction: column;
        text-align: center;
    }

    .btn-dev-primary {
        width: 100%;
    }

    .dev-tab-selector {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .developer-section {
        padding: 4rem 1.5rem;
    }

    .dev-value-cards {
        grid-template-columns: 1fr;
    }

    .dev-tab-selector {
        flex-direction: column;
    }

    .dev-tab {
        width: 100%;
        justify-content: center;
    }

    .plan-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   NEWS SECTION
   ============================================ */

.news-section {
    padding: 6rem 2rem;
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(104, 147, 236, 0.03) 50%, transparent 100%);
    overflow: hidden;
}

.news-header {
    text-align: center;
    margin-bottom: 3rem;
}

.news-badge {
    background: rgba(104, 147, 236, 0.15);
    color: #6893ec;
}

.news-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin: 1rem 0 0.75rem;
    color: var(--text-color, #fff);
}

.news-title span {
    background: linear-gradient(135deg, #6893ec, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.news-subtitle {
    font-size: 1.1rem;
    opacity: 0.7;
    max-width: 550px;
    margin: 0 auto;
}

/* Card grid — 3 horizontal cards */
.news-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.news-card {
    text-decoration: none;
    color: inherit;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: var(--glass-background, rgba(30, 30, 36, 0.4));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.205));
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 15px var(--glass-inner, rgba(255, 255, 255, 0.048));
}

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
                inset 0 0 15px var(--glass-inner, rgba(255, 255, 255, 0.048));
}

.news-card-inner {
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.news-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #6893ec, #a855f7);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.news-card:hover .news-card-inner::before {
    transform: scaleX(1);
}

.news-card-badge {
    display: inline-block;
    background: rgba(104, 147, 236, 0.2);
    color: #6893ec;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    margin-bottom: 1rem;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.news-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.75rem;
}

.news-card-desc {
    font-size: 0.95rem;
    opacity: 0.7;
    line-height: 1.65;
    flex: 1;
    margin-bottom: 1.25rem;
}

.news-card-meta {
    display: flex;
    gap: 1.25rem;
    font-size: 0.8rem;
    opacity: 0.5;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.85rem;
}

.news-card-meta i {
    margin-right: 0.35rem;
}

.news-cta {
    text-align: center;
    margin-top: 1rem;
}

.news-loading {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.news-loading .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.1);
    border-left-color: #6893ec;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1024px) {
    .news-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .news-cards {
        grid-template-columns: 1fr;
    }
    .news-section {
        padding: 4rem 1rem;
    }
}

/* News Page (standalone /news) */
.news-page-hero {
    padding: 8rem 2rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.news-page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(104, 147, 236, 0.25), transparent 60%),
                radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.2), transparent 60%);
    z-index: -1;
}

.news-page-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--text-color, #fff);
}

.news-page-title span {
    background: linear-gradient(135deg, #6893ec, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.news-page-subtitle {
    font-size: 1.15rem;
    opacity: 0.7;
    max-width: 550px;
    margin: 0 auto;
}

.news-page-content {
    padding: 2rem 2rem 6rem;
}

.news-page-content .news-cards {
    max-width: 1200px;
    margin: 0 auto;
}

/* ============================================
   GAME HOSTING SECTION (Green Theme)
   ============================================ */

.games-section {
    --games-primary: #65eccf;
    --games-primary-light: hsl(167, 93%, 89%);
    --games-secondary: #4ecdc4;
    --games-secondary-light: hsl(175, 58%, 82%);
}

.games-section {
    padding: 8rem 2rem;
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(101, 236, 207, 0.03) 50%, transparent 100%);
    overflow: hidden;
}

.games-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/games/rust.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.04;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 8%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0.3) 92%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 8%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0.3) 92%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 0;
}

.games-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header */
.games-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    padding: 3rem 2rem;
    border-radius: 16px;
    z-index: 1;
}

.games-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(101, 236, 207, 0.15);
    border: 1px solid rgba(101, 236, 207, 0.3);
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--games-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

.games-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.games-title span {
    background: linear-gradient(135deg, var(--games-primary), var(--games-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.games-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
    margin: 0 auto;
}

/* Showcase: Same as Minecraft */
.games-showcase {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: stretch;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.games-showcase-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.games-showcase-headline {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
}

.games-showcase-headline span {
    background: linear-gradient(135deg, var(--games-primary), var(--games-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.games-showcase-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
}

/* Games Value Cards */
.games-value-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.games-value-card {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(101, 236, 207, 0.1);
    background: rgba(101, 236, 207, 0.02);
    transition: all 0.3s;
}

.games-value-card:hover {
    border-color: rgba(101, 236, 207, 0.25);
    background: rgba(101, 236, 207, 0.05);
}

.games-value-icon {
    font-size: 1.5rem;
    color: var(--games-primary);
}

.games-value-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.games-value-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.games-value-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Games Panel Mockup */
.games-panel-mockup {
    position: relative;
    z-index: 1;
}

.games-panel-mockup .panel-window {
    border-color: rgba(101, 236, 207, 0.2);
}

.games-panel-mockup .panel-sidebar {
    border-color: rgba(101, 236, 207, 0.15);
}

.games-panel-mockup .panel-logo {
    color: white;
}

.games-panel-mockup .games-panel-logo i {
    color: var(--games-primary);
}

.games-panel-mockup .app-sidebar li.active {
    background: rgba(101, 236, 207, 0.15);
    color: var(--games-primary);
    border-left-color: var(--games-primary);
}

.games-console {
    max-height: 140px;
    font-size: 0.7rem;
}

.games-send {
    background: var(--games-primary) !important;
    color: #0f0f1a !important;
}

.games-cpu-bar {
    background: linear-gradient(90deg, var(--games-primary), var(--games-secondary)) !important;
}

.games-mem-bar {
    background: linear-gradient(90deg, var(--games-secondary), var(--games-primary)) !important;
}

/* Games Carousel Wrapper */
.games-carousel-wrapper {
    position: relative;
    z-index: 1;
    margin: 3rem 0;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.games-carousel-wrapper .carousel {
    width: 100%;
    overflow: hidden;
    margin: 0.5rem 0;
    position: relative;
}

.games-carousel-wrapper .carousel-track {
    display: flex;
    width: max-content;
    animation: games-scroll-right 40s linear infinite;
}

.games-carousel-wrapper .carousel-bottom .carousel-track {
    animation: games-scroll-left 40s linear infinite;
}

.games-carousel-wrapper .carousel-item {
    width: 220px;
    height: 120px;
    margin: 0 0.75rem;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.games-carousel-wrapper .carousel-item:hover {
    transform: scale(1.05);
}

.games-carousel-wrapper .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.games-carousel-wrapper .carousel-item:hover::after {
    opacity: 1;
}

.games-carousel-wrapper .game-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.games-carousel-wrapper .carousel-item:hover .game-title {
    opacity: 1;
}

.games-carousel-wrapper .carousel:hover .carousel-track {
    animation-play-state: paused;
}

@keyframes games-scroll-right {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes games-scroll-left {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Games Plans Section */
.games-plans {
    position: relative;
    z-index: 1;
    margin: 3rem 0 2rem 0;
}

.games-plans-header {
    text-align: center;
    margin-bottom: 2rem;
}

.games-plans-header h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.5rem;
}

.games-plans-header h3 span {
    background: linear-gradient(135deg, var(--games-primary), var(--games-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.games-plans-header p {
    color: rgba(255, 255, 255, 0.7);
}

/* Plan Cards - Games Themed */
.games-plan {
    border-color: rgba(101, 236, 207, 0.15) !important;
    background: rgba(101, 236, 207, 0.02) !important;
}

.games-plan:hover {
    border-color: rgba(101, 236, 207, 0.35) !important;
    background: rgba(101, 236, 207, 0.06) !important;
    box-shadow: 0 15px 40px rgba(101, 236, 207, 0.15) !important;
}

.games-plan.popular {
    border-color: rgba(101, 236, 207, 0.4) !important;
    background: linear-gradient(135deg, rgba(101, 236, 207, 0.08), rgba(101, 236, 207, 0.03)) !important;
    box-shadow: 0 0 30px rgba(101, 236, 207, 0.15) !important;
}

.games-plan.popular:hover {
    box-shadow: 0 0 50px rgba(101, 236, 207, 0.25) !important;
}

.games-badge-pop {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--games-primary), var(--games-secondary)) !important;
    color: #0f0f1a !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 15px rgba(101, 236, 207, 0.35) !important;
    text-shadow: none !important;
}

.games-plan .plan-icon {
    background: linear-gradient(135deg, rgba(101, 236, 207, 0.2), rgba(78, 205, 196, 0.1));
    color: var(--games-primary);
}

.games-plan .plan-price {
    background: linear-gradient(135deg, var(--games-primary), var(--games-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-games-outline {
    border: 2px solid rgba(101, 236, 207, 0.4);
    color: var(--games-primary);
    background: transparent;
    padding: 0.65rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
    text-decoration: none;
}

.btn-games-outline:hover {
    background: var(--games-primary);
    color: #0f0f1a;
    border-color: var(--games-primary);
    box-shadow: 0 6px 15px rgba(101, 236, 207, 0.2);
}

/* Custom Banner */
.games-custom-banner {
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid rgba(101, 236, 207, 0.2);
    background: linear-gradient(135deg, rgba(101, 236, 207, 0.08), rgba(101, 236, 207, 0.02));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}

.games-custom-banner h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.games-custom-banner h3 i {
    color: var(--games-primary);
}

.games-custom-banner p {
    color: rgba(255, 255, 255, 0.7);
}

.games-price-highlight {
    color: var(--games-primary) !important;
    font-weight: 700;
}

.games-custom-banner .btn-primary {
    background: linear-gradient(135deg, var(--games-primary), var(--games-secondary));
    box-shadow: 0 4px 15px rgba(101, 236, 207, 0.4);
    color: white;
}

.games-custom-banner .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(101, 236, 207, 0.5);
    border-color: rgba(101, 236, 207, 0.6);
}

.games-all-plans-link {
    text-align: center;
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

.games-all-plans-link a {
    color: var(--games-primary);
    font-weight: 600;
    transition: color 0.3s;
}

.games-all-plans-link a:hover {
    color: var(--games-secondary);
}

/* Games Section Responsive */
@media (max-width: 1024px) {
    .games-showcase {
        grid-template-columns: 1fr;
    }

    .games-custom-banner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .games-section {
        padding: 4rem 1.5rem;
    }

    .games-value-cards {
        grid-template-columns: 1fr;
    }

    .games-carousel-wrapper .carousel-item {
        width: 180px;
        height: 100px;
    }
}

/* Light Mode - Games Section */
[data-theme="light"] .games-section::before {
    opacity: 0.03;
}

[data-theme="light"] .games-value-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .games-plan {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .games-plan:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(101, 236, 207, 0.3) !important;
}

/* ============================================
   IMAGE MODAL / LIGHTBOX
   ============================================ */

.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.image-modal.show {
    display: flex;
}

.modal-content {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    animation: zoomIn 0.3s ease-out;
    cursor: pointer;
}

.modal-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 3rem;
    color: white;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10001;
    line-height: 1;
}

.modal-close:hover {
    color: var(--primary-color);
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.carousel-slide img {
    cursor: pointer;
    transition: transform 0.2s;
}

.carousel-slide img:hover {
    transform: scale(1.02);
}

/* ==================================================
   LIGHT MODE OVERRIDES
================================================== */
[data-theme="light"] .bg-gradient {
    background:
        radial-gradient(60% 60% at 85% 10%, rgba(139, 30, 229, 0.06) 0%, transparent 60%),
        radial-gradient(50% 50% at 15% 80%, rgba(30, 136, 229, 0.05) 0%, transparent 60%),
        linear-gradient(180deg, #f5f7fa 0%, #eef1f6 100%);
}

[data-theme="light"] .landing-hero .tagline {
    background: linear-gradient(135deg, #1a1f36 0%, #2d3654 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .landing-hero .subtitle {
    color: #4a5568;
}

/* Panel mockups - lighter backgrounds in light mode */
[data-theme="light"] .panel-window {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .panel-sidebar {
    background: rgba(248, 250, 252, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .panel-logo,
[data-theme="light"] .app-sidebar li {
    color: #1a1f36;
}

[data-theme="light"] .app-sidebar li.active {
    background: rgba(139, 30, 229, 0.1);
    color: var(--primary-color);
}

[data-theme="light"] .console-output {
    background: #1a1f36;
    color: #e2e8f0;
}

[data-theme="light"] .console-input-row {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .console-input {
    color: #1a1f36;
}

[data-theme="light"] .console-input::placeholder {
    color: rgba(26, 31, 54, 0.5);
}

/* Cards and sections */
[data-theme="light"] .plan-card-slim {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .plan-card-slim:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(139, 30, 229, 0.3);
}

[data-theme="light"] .plan-name,
[data-theme="light"] .plan-description {
    color: #1a1f36;
}

[data-theme="light"] .spec-item {
    color: #4a5568;
}

/* Value cards */
[data-theme="light"] .mc-value-card,
[data-theme="light"] .dev-value-card,
[data-theme="light"] .aurora-value-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .mc-value-title,
[data-theme="light"] .dev-value-title,
[data-theme="light"] .aurora-value-title {
    color: #1a1f36;
}

[data-theme="light"] .mc-value-desc,
[data-theme="light"] .dev-value-desc,
[data-theme="light"] .aurora-value-desc {
    color: #64748b;
}

/* Stats */
[data-theme="light"] .mc-stat-value,
[data-theme="light"] .aurora-stat-value {
    color: #1a1f36;
}

[data-theme="light"] .mc-stat-label,
[data-theme="light"] .aurora-stat-label {
    color: #64748b;
}

/* Section backgrounds */
[data-theme="light"] .minecraft-section::before {
    opacity: 0.03;
}

[data-theme="light"] .developer-section::before {
    opacity: 0.03;
}

[data-theme="light"] .aurora-section::before {
    opacity: 0.03;
}

/* Custom banners */
[data-theme="light"] .mc-custom-banner,
[data-theme="light"] .aurora-cta-banner {
    background: linear-gradient(135deg, rgba(139, 30, 229, 0.08), rgba(30, 136, 229, 0.05));
    border-color: rgba(139, 30, 229, 0.15);
}

[data-theme="light"] .mc-custom-banner h3,
[data-theme="light"] .aurora-cta-banner h3 {
    color: #1a1f36;
}

[data-theme="light"] .mc-custom-banner p,
[data-theme="light"] .aurora-cta-banner p {
    color: #4a5568;
}

/* Headlines and text */
[data-theme="light"] .mc-showcase-headline,
[data-theme="light"] .dev-showcase-headline,
[data-theme="light"] .aurora-showcase-headline {
    color: #1a1f36;
}

[data-theme="light"] .mc-showcase-desc,
[data-theme="light"] .dev-showcase-desc,
[data-theme="light"] .aurora-desc {
    color: #4a5568;
}

[data-theme="light"] .section-badge {
    background: rgba(139, 30, 229, 0.1);
    color: var(--primary-color);
}

[data-theme="light"] .dev-badge {
    background: rgba(243, 57, 203, 0.1);
    color: var(--dev-primary);
}

/* Tab selectors */
[data-theme="light"] .dev-tab-selector {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .dev-tab {
    color: #4a5568;
}

[data-theme="light"] .dev-tab:hover {
    color: #1a1f36;
}

/* CTA section */
[data-theme="light"] .cta-section {
    background: linear-gradient(135deg, rgba(139, 30, 229, 0.05), rgba(30, 136, 229, 0.03));
}

[data-theme="light"] .cta-section h2 {
    color: #1a1f36;
}

[data-theme="light"] .cta-section p {
    color: #4a5568;
}

/* Trust badges */
[data-theme="light"] .trust-bar {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .trust-item span {
    color: #1a1f36;
}

[data-theme="light"] .trust-item small {
    color: #64748b;
}

/* Aurora how-it-works cards */
[data-theme="light"] .aurora-how-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .aurora-how-title {
    color: #1a1f36;
}

[data-theme="light"] .aurora-how-desc {
    color: #64748b;
}

/* Carousel */
[data-theme="light"] .carousel-slide img {
    border-color: rgba(0, 0, 0, 0.1);
}

/* Footer and misc */
[data-theme="light"] .console-title {
    color: #1a1f36;
}

[data-theme="light"] .console-desc {
    color: #64748b;
}

/* Testimonials */
[data-theme="light"] .t-title {
    background: linear-gradient(90deg, #1a1f36, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[data-theme="light"] .t-sub { color: #4a5568; }
[data-theme="light"] .t-badge { background: rgba(139, 30, 229, 0.1); border-color: rgba(139, 30, 229, 0.15); color: #7c3aed; }
[data-theme="light"] .t-card { background: rgba(255,255,255,.8); border-color: rgba(0,0,0,.06); box-shadow: 0 10px 40px rgba(0,0,0,.06); }
[data-theme="light"] .t-name { color: #1a1f36; }
[data-theme="light"] .t-handle { color: #64748b; }
[data-theme="light"] .t-text { color: #4a5568; }