@charset "UTF-8";

/* ==========================================================================
   Hero Section & Content (PRESERVED - DO NOT MODIFY BACKGROUND/BUTTONS)
   ========================================================================== */
#main-hero { 
    min-height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; 
    background: #000; color: #fff; z-index: 1; 
}
.hero-visual-v5 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
.stripe-bg-base { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at 70% 30%, #1a2a6c 0%, #000 85%); }

.planes-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; perspective: 2000px; transform-style: preserve-3d; }
.tilt-plane { position: absolute; border-radius: 60px; filter: blur(2px); opacity: 0.4; transition: 0.6s; }
.plane-1 { width: 1100px; height: 500px; background: linear-gradient(135deg, #0066FF, #000); top: -10%; right: -15%; transform: rotate(-15deg) skewX(-20deg) translateZ(100px); }
.plane-2 { width: 800px; height: 400px; background: linear-gradient(135deg, #00f2ff, #0066FF); bottom: 5%; right: 0%; transform: rotate(12deg) skewX(15deg) translateZ(60px); opacity: 0.3; }

#heroCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

.hero-inner { position: relative; z-index: 20; padding: 180px 0; }
.hero-content { max-width: 850px; }

/* Badge, Title, Desc, Buttons - PRESERVED */
.badge { 
    display: inline-block; color: var(--electric-blue); font-family: var(--font-en) !important; 
    font-size: 14px; font-weight: 800; letter-spacing: 0.25em; margin-bottom: 40px;
    text-transform: uppercase; opacity: 1;
}
.hero-title { font-family: var(--font-en) !important; font-weight: 900; font-size: 92px; line-height: 1.0; letter-spacing: -0.05em; margin-bottom: 45px; }
.hero-title span { background: linear-gradient(90deg, #fff, #00f2ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-desc { font-family: var(--font-primary) !important; font-size: 23px; color: #9ca3af; margin-bottom: 55px; font-weight: 500; line-height: 1.7; max-width: 650px; }

.hero-btns { display: flex; gap: 20px; }
.btn-primary { background: #fff; color: #000; padding: 22px 50px; border-radius: 50px; font-family: var(--font-en); font-weight: 900; font-size: 16px; display: inline-block; box-shadow: 0 20px 40px rgba(255,255,255,0.15); transition: 0.4s; }
.btn-secondary { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.25); padding: 22px 50px; border-radius: 50px; font-family: var(--font-en); font-weight: 900; font-size: 16px; display: inline-block; transition: 0.4s; }
.btn-primary:hover { transform: translateY(-5px); background: #f0f0f0; box-shadow: 0 25px 50px rgba(0,102,255,0.4); }
.btn-secondary:hover { transform: translateY(-5px); border-color: #fff; background: rgba(255,255,255,0.05); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(50px); transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

@media (max-width: 991px) {
    .hero-title { font-size: 56px; }
}

@media (max-width: 768px) {
    .hero-btns { 
        flex-direction: column; 
        gap: 15px; 
        width: 100%; 
    }
    .btn-primary, .btn-secondary { 
        width: 100%; 
        box-sizing: border-box; 
        text-align: center; 
        padding: 18px 20px; 
        font-size: 15px; 
        white-space: nowrap; 
    }
}