/* --- PREMIUM CALMING AESTHETICS & ZERO EMOJIS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap');

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

body { background-color: #F8FAFC; color: #1E293B; overflow-x: hidden; scroll-behavior: smooth; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased;}

h1, h2, h3, .logo, .scene-number, .btn-primary { font-family: 'Outfit', sans-serif; }

/* --- PREMIUM NAVBAR (CENTERED LINKS) --- */
.navbar { position: fixed; top: 0; width: 100%; padding: 18px 5%; display: flex; justify-content: space-between; align-items: center; z-index: 1000; background: rgba(248, 250, 252, 0.85); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(226, 232, 240, 0.8); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.logo { font-size: 1.5rem; font-weight: 700; color: #0F172A; position: relative; z-index: 1002;}
.logo span { color: #4F46E5; }

.nav-wrapper { display: flex; align-items: center; width: 100%; justify-content: flex-end;}
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; }
.nav-links a { margin: 0 16px; text-decoration: none; color: #475569; font-weight: 500; font-size: 0.95rem; transition: color 0.3s ease;}
.nav-links a:hover { color: #4F46E5; }

.nav-actions { display: flex; align-items: center; gap: 24px; }
.login-link { text-decoration: none; color: #475569; font-weight: 600; font-size: 0.95rem; transition: color 0.2s; }
.login-link:hover { color: #0F172A; }
.btn-nav { background: #FFFFFF; color: #0F172A; border: 1px solid #CBD5E1; padding: 8px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: all 0.3s ease; }
.btn-nav:hover { border-color: #94A3B8; box-shadow: 0 6px 15px rgba(0,0,0,0.05); transform: translateY(-1px);}

.menu-toggle { display: none; flex-direction: column; cursor: pointer; gap: 5px; z-index: 1002; }
.menu-toggle span { width: 25px; height: 2px; background: #0F172A; transition: 0.3s ease; border-radius: 2px;}

/* --- HERO SECTION --- */
.hero { position: relative; min-height: 85vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 5% 0; }
.hero-bg-pattern { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(#E2E8F0 1px, transparent 1px), linear-gradient(90deg, #E2E8F0 1px, transparent 1px); background-size: 30px 30px; opacity: 0.5; z-index: 0; pointer-events: none;}
.hero-bg-glow { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(79, 70, 229, 0.05) 0%, transparent 70%); top: 10%; filter: blur(60px); z-index: 1; pointer-events: none; animation: pulseGlow 6s infinite alternate;}
@keyframes pulseGlow { 0% { transform: scale(1); opacity: 0.8;} 100% { transform: scale(1.1); opacity: 1;} }

.hero-content { position: relative; z-index: 2; max-width: 850px; display: flex; flex-direction: column; align-items: center;}
.status-badge { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid #E2E8F0; color: #475569; padding: 6px 16px; border-radius: 50px; font-weight: 500; font-size: 0.85rem; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.02);}
.indicator-dot { width: 6px; height: 6px; background: #10B981; border-radius: 50%; box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
.hero h1 { font-size: 4.2rem; color: #0F172A; font-weight: 600; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 24px; }
.hero p { font-size: 1.2rem; color: #475569; line-height: 1.7; max-width: 650px; margin-bottom: 40px; font-weight: 300; }

.btn-primary { display: inline-block; background: #0F172A; color: white; padding: 16px 36px; border-radius: 8px; text-decoration: none; font-weight: 500; letter-spacing: 0.5px; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-primary:hover { background: #1E293B; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(15, 23, 42, 0.2); }

/* --- SCROLLYTELLING / VISUALS --- */
.scrolly-container { display: flex; max-width: 1200px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 5;}
.scroll-text-col { width: 45%; }
.step { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-right: 50px; opacity: 0.35; transition: opacity 0.4s ease; }
.step.active-text { opacity: 1; }
.scene-number { font-weight: 600; font-size: 0.85rem; letter-spacing: 1px; color: #64748B; margin-bottom: 15px; display: block; text-transform: uppercase; }
.step h2 { font-size: 2.6rem; color: #0F172A; margin-bottom: 20px; letter-spacing: -1px; line-height: 1.2; font-weight: 600; }
.step p { font-size: 1.15rem; color: #475569; line-height: 1.7; font-weight: 300; }

.mobile-visual-wrapper { display: none; margin-top: 30px; width: 100%; }
.sticky-visual-col { width: 55%; position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
.visual-viewport { width: 100%; max-width: 500px; height: 420px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px); border-radius: 20px; border: 1px solid #E2E8F0; box-shadow: 0 25px 50px rgba(0,0,0,0.03); position: relative; overflow: hidden; background-image: radial-gradient(#F1F5F9 1px, transparent 1px); background-size: 20px 20px; }

.canvas-scene { position: absolute; width: 100%; height: 100%; padding: 30px; opacity: 0; transform: translateY(15px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.canvas-scene.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Visual Stage Designs */
.visual-box { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; }
.text-card, .text-card-large { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; padding: 22px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); width: 100%; transition: transform 0.3s ease;}
.float-slow { animation: floatSlow 6s ease-in-out infinite; }
.float-slow-delayed { animation: floatSlow 6s ease-in-out infinite 3s; }
@keyframes floatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.card-meta { display: flex; justify-content: space-between; margin-bottom: 12px; font-family: 'Outfit', sans-serif;}
.badge-blue { color: #4F46E5; background: #EEF2FF; padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 0.75rem;}
.badge-tag { color: #64748B; border: 1px solid #E2E8F0; padding: 4px 10px; border-radius: 6px; font-weight: 500; font-size: 0.75rem;}
.raw-data { color: #64748B; font-size: 0.95rem; font-style: italic; }
.blur-text { filter: blur(3px); }
.annotated-data { color: #0F172A; font-weight: 500; font-size: 0.95rem; border-top: 1px dashed #E2E8F0; padding-top: 15px; margin-top: 15px;}

.blueprint-box, .blueprint-box-large { width: 100%; height: 100%; background: #F1F5F9; border-radius: 12px; position: relative; overflow: hidden; border: 1px solid #E2E8F0;}
.scanning-line { position: absolute; top: -10px; left: 0; width: 100%; height: 20%; background: linear-gradient(to bottom, transparent, rgba(79, 70, 229, 0.15)); border-bottom: 2px solid #4F46E5; animation: laserDown 3s linear infinite; z-index: 5;}
@keyframes laserDown { 0% { top: -20%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.shape-car { position: absolute; background: #FFFFFF; border-radius: 8px; border: 1px solid #CBD5E1; box-shadow: 0 4px 10px rgba(0,0,0,0.02); z-index: 1; }
.shape-pedestrian { position: absolute; background: #FFFFFF; border-radius: 20px; border: 1px solid #CBD5E1; z-index: 1; }
.cv-stage-large .shape-car { top: 32%; left: 22%; width: 34%; height: 24%; }
.cv-stage-large .cv-box-car { top: 29%; left: 20%; width: 38%; height: 30%; }
.cv-stage-large .shape-pedestrian { top: 58%; left: 66%; width: 12%; height: 26%; }
.cv-stage-large .cv-box-pedestrian { top: 55%; left: 63%; width: 18%; height: 32%; }

.annotation-box { position: absolute; border-radius: 6px; opacity: 0; transform: scale(0.95); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s; z-index: 10; }
.box-purple { border: 2px solid #6366F1; background: rgba(99, 102, 241, 0.1); }
.box-blue { border: 2px solid #0EA5E9; background: rgba(14, 165, 233, 0.1); }
.annotation-box span { position: absolute; top: -24px; left: -2px; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; color: white; border-radius: 4px; white-space: nowrap; font-family: Outfit,sans-serif; box-shadow: 0 4px 10px rgba(0,0,0,0.15);}
.box-purple span { background: #6366F1; }
.box-blue span { background: #0EA5E9; }
.active .annotation-box, .annotated .annotation-box { opacity: 1; transform: scale(1); }

.chat-ui { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.chat-prompt, .chat-response { padding: 16px 20px; border-radius: 12px; max-width: 90%; font-size: 0.95rem; line-height: 1.6;}
.prompt-meta { display: block; font-size: 0.7rem; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; font-family: Outfit,sans-serif;}
.chat-prompt { background: #FFFFFF; border: 1px solid #E2E8F0; align-self: flex-start; color: #475569;}
.chat-response { background: #F1F5F9; align-self: flex-end; color: #0F172A; border: 1px solid #CBD5E1; opacity: 0; transform: translateY(10px); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }
.active .chat-response, .annotated .chat-response { opacity: 1; transform: translateY(0); }

.tags-group { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.ui-tag, .tag-green, .tag-outline { font-size: 0.7rem; padding: 4px 10px; border-radius: 6px; font-family: Outfit,sans-serif; font-weight: 500;}
.ui-tag { background: #EEF2FF; color: #4F46E5;}
.tag-green { background: #ECFDF5; color: #059669;}
.tag-outline { border: 1px solid #CBD5E1; color: #475569;}

/* --- EXTENDED SECTIONS (CAPABILITIES, VERTICALS) --- */
.capabilities-section, .verticals-section, .security-protocol-section, .elite-workforce-section, .cta-section { padding: 100px 5%; background: white; border-top: 1px solid #E2E8F0; }
.section-container { max-width: 1200px; margin: 0 auto; }
.cap-header, .section-header { text-align: center; margin-bottom: 60px;}
.cap-header h2, .section-header h2 { font-size: 2.6rem; color: #0F172A; letter-spacing: -1px;}
.cap-header p, .section-header p { color: #475569; margin-top: 10px; font-size: 1.15rem; font-weight: 300;}

.cap-grid, .verticals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.cap-card, .vertical-card { background: #FAFAFC; border: 1px solid #E2E8F0; padding: 40px; border-radius: 16px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.cap-card:hover, .vertical-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.04); border-color: #CBD5E1; background: white;}
.vertical-card h3 { font-size: 1.4rem; color: #0F172A; margin-bottom: 15px; font-weight: 600;}
.vertical-card p { color: #475569; line-height: 1.65; font-size: 0.95rem; font-weight: 300;}

/* --- RESTORED: ELITE WORKFORCE SECTION --- */
.experience-header { max-width: 800px; }
.badge-accent { font-family: 'Outfit', sans-serif; color: #4F46E5; font-weight: 600; font-size: 0.85rem; letter-spacing: 1px; display: block; margin-bottom: 15px; text-transform: uppercase;}
.experience-header h2 { font-size: 2.8rem; color: #0F172A; letter-spacing: -1px; margin-bottom: 20px; font-weight: 600;}
.experience-header p { font-size: 1.15rem; color: #475569; line-height: 1.7; font-weight: 300;}
.experience-header strong { color: #0F172A; font-weight: 500;}

/* --- RESTORED: SECURITY PROTOCOL SECTION --- */
.security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;}
.badge-security { font-family: 'Outfit', sans-serif; color: #059669; font-weight: 600; font-size: 0.85rem; letter-spacing: 1px; display: block; margin-bottom: 15px; text-transform: uppercase;}
.security-text h2 { font-size: 2.6rem; color: #0F172A; margin-bottom: 20px; letter-spacing: -1px; line-height: 1.2; font-weight: 600;}
.security-text p { font-size: 1.1rem; color: #475569; line-height: 1.7; margin-bottom: 30px; font-weight: 300;}
.security-list { list-style: none; display: flex; flex-direction: column; gap: 15px;}
.security-list li { font-size: 1rem; color: #0F172A; line-height: 1.5; padding-left: 25px; position: relative; font-weight: 400;}
.security-list li::before { content: "→"; position: absolute; left: 0; color: #059669; font-weight: bold;}

.security-visual-card { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px; padding: 40px; display: flex; flex-direction: column; gap: 15px; box-shadow: inset 0 0 20px rgba(0,0,0,0.01);}
.shield-line-1, .shield-line-2, .shield-line-3 { font-family: monospace; font-size: 0.85rem; padding: 15px 20px; border-radius: 8px; border: 1px solid #E2E8F0; background: white; box-shadow: 0 4px 10px rgba(0,0,0,0.01); transition: transform 0.3s ease;}
.security-visual-card:hover .shield-line-1 { transform: translateX(5px); }
.shield-line-1 { border-left: 4px solid #10B981; color: #065F46; font-weight: bold;}
.shield-line-2 { border-left: 4px solid #4F46E5; color: #1E293B;}
.shield-line-3 { border-left: 4px solid #94A3B8; color: #475569;}

/* --- CTA & FOOTER --- */
.cta-box { max-width: 800px; margin: 0 auto; background: white; border: 1px solid #E2E8F0; padding: 60px 40px; border-radius: 20px; text-align: center; box-shadow: 0 15px 40px rgba(0,0,0,0.03); }
.cta-box h2 { font-size: 2.6rem; color: #0F172A; margin-bottom: 15px; letter-spacing: -0.5px; font-weight: 600;}
.cta-box p { color: #475569; font-size: 1.15rem; margin-bottom: 35px; line-height: 1.6; font-weight: 300; max-width: 650px; margin-left: auto; margin-right: auto;}

.footer { padding: 30px 5%; background: white; border-top: 1px solid #E2E8F0; }
.footer-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; color: #64748B; font-size: 0.85rem; }

/* =======================================================
   STRICT MOBILE LAYOUT WITH HAMBURGER DROPDOWN
   ======================================================= */
@media (max-width: 991px) {
    /* Navbar Changes */
    .menu-toggle { display: flex; } 
    
    .nav-links { position: static; transform: none; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; margin-bottom: 30px; border-bottom: 1px solid #E2E8F0; padding-bottom: 25px;}
    
    .nav-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 30px 5%;
        border-bottom: 1px solid #E2E8F0;
        box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        transform: translateY(-20px);
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        margin-left: 0;
        z-index: 1001;
    }
    .nav-wrapper.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    
    .nav-links a { margin: 0; font-size: 1.1rem; }
    
    .nav-actions { width: 100%; flex-direction: column; gap: 20px; align-items: flex-start;}
    .btn-nav { text-align: center; width: 100%; padding: 12px;}

    /* Hamburger Animation */
    .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle.active span:nth-child(2) { opacity: 0; }
    .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Fixes for Index Page Layouts */
    .sticky-visual-col { display: none !important; }
    .scroll-text-col { width: 100%; }
    .step { height: auto; padding: 60px 0; border-bottom: 1px solid #E2E8F0; opacity: 1 !important; }
    
    .hero { min-height: auto; padding: 160px 5% 60px; }
    .hero h1 { font-size: 2.6rem; letter-spacing: -1px; }
    
    .mobile-visual-wrapper { display: block; margin-top: 30px; }
    .visual-box { background: white; border-radius: 12px; border: 1px solid #E2E8F0; padding: 20px; height: 300px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(0,0,0,0.02);}
    
    .shape-car { top: 40%; left: 15%; width: 45%; height: 22%; }
    .cv-box-car { top: 37%; left: 12%; width: 51%; height: 28%; }
    .shape-pedestrian { top: 65%; left: 65%; width: 15%; height: 20%; }
    .cv-box-pedestrian { top: 62%; left: 62%; width: 21%; height: 26%; }

    /* Restored Mobile Grid Rules */
    .security-grid { grid-template-columns: 1fr; gap: 40px; }
    
    .cta-box h2 { font-size: 2rem; }
    .footer-content { flex-direction: column; gap: 15px; text-align: center; }
}