/* Maintain previous Hero styles exactly as they were until line ~380 */
:root {
    /* Updated Lighter Theme */
    --bg-color: #f8fafc;
    /* Ultra light slate */
    --surface-color: #ffffff;
    --primary: #3b82f6;
    /* Bright Blue */
    --secondary: #2563eb;
    /* Deeper Blue */
    --accent: #f43f5e;
    /* Rose/Red for accents */
    --text-main: #0f172a;
    /* Slate 900 */
    --text-muted: #64748b;
    /* Slate 500 */
    --border-light: #e2e8f0;
    --gradient-main: linear-gradient(135deg, var(--primary), var(--secondary));
    --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 20px 50px -10px rgba(59, 130, 246, 0.2);
}

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

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow-x: hidden;
    perspective: 1000px;
}

body.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* Custom Scrollbar - Lighter */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* --- SPLASH SCREEN --- */
#splash-screen {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}

.loader-bus-container {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-bus {
    font-size: 4rem;
    color: var(--primary);
    animation: bounceLoader 0.5s infinite alternate;
    z-index: 2;
}

.loader-road {
    position: absolute;
    bottom: 30px;
    width: 100px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 50%;
    animation: shadowScale 0.5s infinite alternate;
}

@keyframes bounceLoader {
    to {
        transform: translateY(-20px);
    }
}

@keyframes shadowScale {
    to {
        transform: scaleX(0.7);
        opacity: 0.5;
    }
}

.splash-text {
    margin-top: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    letter-spacing: 5px;
    color: var(--text-main);
    opacity: 0;
    animation: fadeInText 1s forwards 0.5s;
}

@keyframes fadeInText {
    to {
        opacity: 1;
    }
}

/* --- NAVIGATION --- */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.2rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    z-index: 1000;
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    transition: color 0.3s;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s;
}

.nav-links a:hover {
    color: var(--primary);
}

.nav-links a:hover::after {
    width: 100%;
}

.btn-primary {
    padding: 0.7rem 1.8rem;
    background: var(--gradient-main);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    transition: transform 0.3s, box-shadow 0.3s;
}

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

/* --- ANIMATED BUS BUTTON --- */
.btn-bus-theme {
    position: relative;
    padding: 0.8rem 2.2rem;
    background: linear-gradient(135deg, #FFD700 0%, #FBBF24 100%);
    border-radius: 50px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1a1a1a;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 8px 0 #d97706, 0 15px 20px rgba(0, 0, 0, 0.2);
    /* 3D Style Button press feel */
    transition: transform 0.1s, box-shadow 0.1s;
    isolation: isolate;
}

.btn-bus-theme:active {
    transform: translateY(4px);
    /* Press effect */
    box-shadow: 0 4px 0 #d97706, 0 8px 10px rgba(0, 0, 0, 0.2);
}

.btn-bus-theme:hover {
    filter: brightness(1.05);
}

/* Text & Icon Wrapper */
.btn-bus-theme .btn-content-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 5;
    /* Above the road */
}

/* Bouncing Bus Icon */
.btn-bus-theme i {
    font-size: 1.4rem;
    color: #1a1a1a;
    animation: busBounce 0.8s ease-in-out infinite alternate;
    filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.5));
}

/* Road Strip at bottom */
.btn-bus-theme .road-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: #374151;
    /* Asphalt */
    z-index: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Moving Road Lines */
.btn-bus-theme .road-strip::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 200%;
    height: 3px;
    background: linear-gradient(90deg, #fff 50%, transparent 50%);
    background-size: 40px 100%;
    animation: roadRun 1s linear infinite;
}

/* Hover Speed Up */
.btn-bus-theme:hover .road-strip::after {
    animation-duration: 0.5s;
}

.btn-bus-theme:hover i {
    animation-duration: 0.4s;
}

/* Keyframes */
@keyframes busBounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-3px);
    }
}

@keyframes roadRun {
    0% {
        transform: translate(0, -50%);
    }

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

/* --- HERO SCENE (UPGRADED) --- */
.hero-scene {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vibrant daytime sky gradient */
    background: linear-gradient(to bottom, #0284c7 0%, #38bdf8 30%, #a5f3fc 60%, #bae6fd 80%, #f0f9ff 100%);
}

.world-stage {
    position: absolute;
    inset: 0;
    perspective: 1200px;
}

.sky-layer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 70%;
    z-index: 1;
    pointer-events: none;
}

.sun-day {
    position: absolute;
    bottom: 35%;
    right: 15%;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, #ffffff 20%, #fff700 50%, rgba(253, 224, 71, 0.45) 80%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 100px rgba(253, 224, 71, 0.55), 0 0 40px rgba(255, 255, 255, 0.8);
    animation: sunPulse 4s infinite alternate;
}

@keyframes sunPulse {
    to {
        transform: scale(1.06);
        box-shadow: 0 0 120px rgba(253, 224, 71, 0.7), 0 0 50px rgba(255, 255, 255, 0.9);
    }
}

.cloud {
    position: absolute;
    /* White-to-soft-slate gradient for daytime volume */
    background: linear-gradient(to bottom, #ffffff 50%, #f1f5f9 85%, #e2e8f0 100%);
    border-radius: 50px;
    opacity: 0.92;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), inset 0 -3px 6px rgba(148, 163, 184, 0.15);
    animation: moveCloud linear infinite;
}

.cloud::after,
.cloud::before {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.cloud-1 {
    width: 120px;
    height: 40px;
    top: 15%;
    left: -20%;
    animation-duration: 45s;
}

.cloud-1::after {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 20px;
}

.cloud-1::before {
    width: 40px;
    height: 40px;
    top: -15px;
    left: 60px;
}

.cloud-2 {
    width: 100px;
    height: 35px;
    top: 8%;
    left: -10%;
    animation-duration: 35s;
    animation-delay: 10s;
}

.cloud-3 {
    width: 180px;
    height: 60px;
    top: 25%;
    left: -30%;
    animation-duration: 60s;
    animation-delay: 5s;
}

.cloud-3::after {
    width: 80px;
    height: 80px;
    top: -40px;
    left: 30px;
}

.cloud-4 {
    width: 140px;
    height: 50px;
    top: 12%;
    right: -20%;
    animation-duration: 50s;
    animation-direction: reverse;
}

.cloud-5 {
    width: 90px;
    height: 30px;
    top: 35%;
    left: 40%;
    animation-duration: 80s;
    opacity: 0.65;
}

@keyframes moveCloud {
    to {
        transform: translateX(120vw);
    }
}

/* --- MOUNTAINS LAYER --- */
.mountains-layer {
    position: absolute;
    bottom: 30%;
    left: 0;
    width: 100%;
    height: 320px;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.mountain {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.m-back {
    height: 100%;
    background: linear-gradient(to top, #64748b, #94a3b8, #cbd5e1);
    clip-path: polygon(0% 100%, 12% 45%, 28% 68%, 48% 38%, 65% 58%, 78% 32%, 92% 52%, 100% 40%, 100% 100%);
    opacity: 0.4;
    animation: mountainFloat 30s ease-in-out infinite alternate;
}

.m-mid {
    height: 80%;
    background: linear-gradient(to top, #0f766e, #0d9488, #2dd4bf);
    clip-path: polygon(0% 100%, 18% 48%, 32% 70%, 52% 42%, 68% 64%, 82% 36%, 100% 58%, 100% 100%);
    opacity: 0.65;
    animation: mountainFloat 20s ease-in-out infinite alternate-reverse;
}

.m-front {
    height: 60%;
    background: linear-gradient(to top, #14532d, #166534, #22c55e);
    clip-path: polygon(0% 100%, 10% 52%, 22% 72%, 40% 48%, 58% 68%, 74% 50%, 86% 70%, 100% 54%, 100% 100%);
    opacity: 0.88;
}

@keyframes mountainFloat {
    0% { transform: translateY(0) scaleX(1); }
    100% { transform: translateY(-8px) scaleX(1.03); }
}

/* --- CITY SKYLINE --- */
.city-skyline {
    position: absolute;
    bottom: 30%;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

.skyline-row {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    width: 200%;
    height: 100%;
    animation: parallaxMove 45s linear infinite;
}

@keyframes parallaxMove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.building {
    position: relative;
    background: linear-gradient(to top, #334155, #475569);
    width: 60px;
    border-radius: 4px 4px 0 0;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.15);
    /* Windows with blueish glass reflections */
    background-image: 
        repeating-linear-gradient(to bottom, transparent, transparent 8px, rgba(224, 242, 254, 0.5) 8px, rgba(224, 242, 254, 0.5) 12px),
        repeating-linear-gradient(to right, transparent, transparent 6px, rgba(224, 242, 254, 0.5) 6px, rgba(224, 242, 254, 0.5) 10px);
    background-size: 16px 20px;
    background-position: 8px 12px;
}

.building.b-1 { height: 150px; width: 70px; background: linear-gradient(to top, #1e293b, #334155); }
.building.b-2 { height: 190px; width: 55px; background: linear-gradient(to top, #334155, #475569); }
.building.b-3 { height: 130px; width: 80px; background: linear-gradient(to top, #0f172a, #1e293b); }
.building.b-4 { height: 170px; width: 65px; background: linear-gradient(to top, #334155, #64748b); }
.building.b-5 { height: 110px; width: 85px; background: linear-gradient(to top, #1e293b, #475569); }

.building .antenna {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 25px;
    background: #334155;
}

.building .antenna::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    animation: blinker 1.2s infinite alternate;
}

.building .spire {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 35px solid #475569;
}

@keyframes blinker {
    0% { opacity: 0.3; }
    100% { opacity: 1; box-shadow: 0 0 8px #ef4444; }
}

/* --- HOUSING LAYER --- */
.housing-layer {
    position: absolute;
    bottom: 30%;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 4;
    overflow: hidden;
}

.house-row {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    width: 200%;
    animation: moveHouses 20s linear infinite;
}

@keyframes moveHouses {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.house {
    position: relative;
    width: 85px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    border-radius: 3px 3px 0 0;
}

.house.h-1 { height: 90px; background: linear-gradient(to top, #fef08a, #fef9c3); } /* pastel yellow wall */
.house.h-2 { height: 115px; background: linear-gradient(to top, #bfdbfe, #dbeafe); } /* pastel blue wall */
.house.h-3 { height: 98px; background: linear-gradient(to top, #ffedd5, #fff7ed); } /* pastel orange wall */

.roof {
    position: absolute;
    top: -26px;
    left: -5px;
    width: calc(100% + 10px);
    height: 26px;
    background: #ef4444; /* bright red roof */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.house.h-2 .roof { background: #2563eb; } /* bright blue roof */
.house.h-3 .roof { background: #16a34a; } /* bright green roof */

.window-pane {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 26px;
    /* Sky-reflective window shine */
    background: linear-gradient(135deg, #e0f2fe 30%, #bae6fd 70%);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    border: 2px solid #64748b;
}

.window-pane::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #64748b;
}

.window-pane::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #64748b;
}

.door {
    position: absolute;
    bottom: 0;
    left: 35%;
    width: 30%;
    height: 32px;
    background: #451a03;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #78350f;
}

.tree-sil {
    width: 40px;
    height: 75px;
    background: linear-gradient(to top, #15803d, #22c55e);
    border-radius: 50% 50% 0 0;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.tree-sil::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 12px;
    background: #78350f;
}

/* --- GROUND & ROAD SYSTEM --- */
.ground-layer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, #166534 0%, #14532d 100%);
    z-index: 5;
    transform-origin: bottom;
    transform: rotateX(5deg);
}

.road-container {
    position: absolute;
    top: -30px;
    width: 100%;
    height: 200px;
    background: radial-gradient(ellipse at 50% 40%, #1e1e24 0%, #09090b 100%);
    /* Asphalt texture overlay */
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 0),
        radial-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 0),
        linear-gradient(to bottom, #1a1a1e, #09090b);
    background-size: 6px 6px, 3px 3px, 100% 100%;
    background-position: 0 0, 1.5px 1.5px, 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transform: rotateX(15deg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.7);
}

.road-surface {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Concrete Curb */
.road-curb {
    position: absolute;
    top: 0;
    width: 100%;
    height: 16px;
    background: repeating-linear-gradient(90deg, 
        #94a3b8 0px, #94a3b8 70px, 
        #334155 70px, #334155 140px);
    box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0,0,0,0.4);
    border-bottom: 2px solid #0f172a;
    animation: moveCurb 0.6s linear infinite;
}

@keyframes moveCurb {
    0% { transform: translateX(0); }
    100% { transform: translateX(-140px); }
}

/* Road Shoulder */
.road-shoulder {
    position: absolute;
    top: 16px;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, #27272a, #18181b);
    border-bottom: 2px solid #3f3f46;
}

/* Side lanes (solid white fog lines) */
.road-line-white {
    position: absolute;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
}
.road-line-white.side-left {
    top: 30px;
}
.road-line-white.side-right {
    bottom: 20px;
}

/* Double Yellow Center Line */
.road-line-yellow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, 
        #fbbf24 0%, #fbbf24 30%, 
        transparent 30%, transparent 70%, 
        #fbbf24 70%, #fbbf24 100%);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.3);
    opacity: 0.85;
}

/* Dashed middle lane lines (animated) */
.road-line-dashed {
    position: absolute;
    top: 32%;
    width: 100%;
    height: 4px;
    background-image: linear-gradient(90deg, rgba(255,255,255,0.65) 40%, transparent 40%);
    background-size: 120px 100%;
    animation: moveRoadDashed 0.4s linear infinite;
}

.road-surface::after {
    content: '';
    position: absolute;
    top: 68%;
    width: 100%;
    height: 4px;
    background-image: linear-gradient(90deg, rgba(255,255,255,0.65) 40%, transparent 40%);
    background-size: 120px 100%;
    animation: moveRoadDashed 0.4s linear infinite;
}

@keyframes moveRoadDashed {
    0% { background-position-x: 0; }
    100% { background-position-x: -120px; }
}

/* --- STREETLIGHTS & GLOWS --- */
.street-furniture {
    position: absolute;
    top: -200px;
    left: 0;
    width: 100%;
    height: 200px;
    pointer-events: none;
    z-index: 15;
}

.lamp-post {
    position: absolute;
    bottom: -20px;
    width: 6px;
    height: 180px;
    background: linear-gradient(to top, #1e293b, #475569);
    border-radius: 3px;
}

.lamp-post::after {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    width: 50px;
    height: 10px;
    background: #475569;
    border-radius: 5px 0 0 0;
}

.lamp-post::before {
    content: '';
    position: absolute;
    top: 10px;
    left: -35px;
    width: 80px;
    height: 120px;
    background: linear-gradient(to bottom, rgba(254, 240, 138, 0.5) 0%, rgba(254, 240, 138, 0.08) 60%, transparent 100%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
    opacity: 0; /* streetlights off in the daytime */
    pointer-events: none;
    mix-blend-mode: screen;
}

.item-1 {
    left: 120%;
    animation: moveLight 4s linear infinite;
}

.item-2 {
    left: 120%;
    animation: moveLight 4s linear infinite 1.3s;
}

.item-3 {
    left: 120%;
    animation: moveLight 4s linear infinite 2.6s;
}

@keyframes moveLight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-150vw);
    }
}

/* --- HERO BUS & SHADOWS --- */
.hero-bus-container {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 900px;
    height: 400px;
    z-index: 20;
}

/* Smooth realistic ambient shadow under bus */
.bus-shadow {
    position: absolute;
    bottom: 55px;
    left: 5%;
    width: 90%;
    height: 35px;
    background: rgba(0, 0, 0, 0.65);
    filter: blur(12px);
    border-radius: 50%;
    z-index: 18;
    animation: shadowWobble 2s ease-in-out infinite alternate;
}

@keyframes shadowWobble {
    0% {
        transform: scale(0.95);
        opacity: 0.75;
    }
    100% {
        transform: scale(1.02);
        opacity: 0.55;
    }
}

.modern-bus {
    position: relative;
    width: 100%;
    height: 100%;
    animation: busDrive 2s ease-in-out infinite alternate;
}

@keyframes busDrive {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(5px);
    }
}

.bus-main-body {
    position: absolute;
    bottom: 80px;
    width: 100%;
    height: 280px;
    background: #fff;
    border-radius: 40px 10px 10px 40px;
    box-shadow: 10px 20px 50px rgba(0, 0, 0, 0.25);
    border: 3px solid #cbd5e1;
    overflow: hidden;
    display: flex;
}

.bus-front-glass {
    width: 18%;
    height: 100%;
    background: linear-gradient(135deg, #a5f3fc, #38bdf8);
    position: relative;
    border-right: 5px solid #cbd5e1;
}

.mirror {
    position: absolute;
    top: 80px;
    left: -20px;
    width: 20px;
    height: 60px;
    background: #000;
    border-radius: 10px 0 0 10px;
}

.bus-side-panel {
    flex: 1;
    position: relative;
    background: linear-gradient(to right, #f8fafc 40%, #e0f2fe 100%);
    display: flex;
    flex-direction: column;
}

.top-windows {
    height: 35%;
    width: 100%;
    background: #333;
    display: flex;
    gap: 5px;
    padding: 5px 10px;
}

.win {
    flex: 1;
    background: linear-gradient(#38bdf8, #0ea5e9);
    border-radius: 5px;
    opacity: 0.85;
}

.bus-hero-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 2rem;
    position: relative;
    overflow: hidden;
}

.bus-hero-text h1 {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--secondary);
    letter-spacing: -2px;
    transform: skewX(-10deg);
}

.bus-hero-text p {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    margin-top: 0.5rem;
    transform: skewX(-10deg);
}

.bus-hero-text::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 200%;
    height: 10px;
    background: var(--secondary);
    transform: skewX(-45deg);
}

.bus-door {
    width: 80px;
    height: 80%;
    background: #cbd5e1;
    margin: auto 10px 0 0;
    border: 2px solid #94a3b8;
    border-radius: 5px 5px 0 0;
    position: relative;
    bottom: 0;
}

.bus-wheels-area {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
}

.wheel {
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 100px;
    background: #0f172a;
    border-radius: 50%;
    border: 5px solid #1e293b;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

/* tire contact shadow */
.wheel::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 10px;
    background: rgba(0, 0, 0, 0.85);
    filter: blur(4px);
    border-radius: 50%;
    z-index: -1;
}

.rim {
    width: 60px;
    height: 60px;
    background: #94a3b8;
    border-radius: 50%;
    border: 2px dashed #475569;
    animation: spinRim 0.6s linear infinite;
}

.front-wheel {
    left: 120px;
}

.back-wheel {
    right: 100px;
}

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

.exhaust-fumes {
    position: absolute;
    bottom: 20px;
    right: -50px;
    width: 20px;
    height: 20px;
    background: rgba(150, 150, 160, 0.4);
    border-radius: 50%;
    filter: blur(5px);
    animation: fumes 0.8s linear infinite;
}

/* Smooth exhaust fumes keyframes */
@keyframes fumes {
    0% {
        transform: scale(0.6) translate(0, 0);
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: scale(2.2) translate(40px, -20px);
        opacity: 0;
    }
}

.hero-buttons-container {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

/* --- NEW SECTIONS STYLING --- */
.container-wide {
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
}

.section-heading {
    font-size: 3.5rem;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--text-main);
    margin-bottom: 3rem;
    position: relative;
    z-index: 5;
}

.section-heading.center {
    text-align: center;
}

.text-highlight {
    color: var(--primary);
    display: inline-block;
    position: relative;
}

.text-highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(59, 130, 246, 0.2);
    z-index: -1;
}

.section-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: #eff6ff;
    color: var(--primary);
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

/* MISSION SECTION */
.mission-section {
    padding: 6rem 0;
    position: relative;
    background: #fff;
}

.mission-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.mission-card {
    flex: 1;
    padding: 3rem;
    border-radius: 20px;
    background: var(--bg-color);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s, box-shadow 0.3s;
}

.mission-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.icon-box.red {
    background: #fef2f2;
    color: #ef4444;
}

.icon-box.green {
    background: #f0fdf4;
    color: #22c55e;
}

.challenge-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cross {
    width: 25px;
    height: 25px;
    background: #fee2e2;
    color: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.mission-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: relative;
    padding: 0 49px;
}

.bridge-line {
    width: 2px;
    height: 80px;
    background: var(--border-light);
}

.bridge-node {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    z-index: 2;
    transition: 0.3s;
}

.bridge-node:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.1);
}

.bridge-node i {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.bridge-node span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.solution-card {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.solution-card .card-header h3 {
    color: #fff;
}

.solution-text {
    color: #94a3b8;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.stat-row {
    display: flex;
    gap: 2rem;
}

.mini-stat strong {
    display: block;
    font-size: 1.5rem;
    color: var(--primary);
}

.solution-visual {
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.05);
}

/* MODERN FEATURES GRID */
.features-section {
    padding: 6rem 0;
    background: #f8fafc;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

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

.f-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: #eff6ff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    transition: 0.3s;
}

.feature-card:hover .f-icon-box {
    background: var(--primary);
    color: #fff;
    transform: rotate(360deg);
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.8rem;
}

.feature-card p {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
}

.feature-link {
    margin-top: auto;
    padding-top: 1.5rem;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s;
}

.feature-card:hover .feature-link {
    opacity: 1;
    transform: translateX(0);
}

/* Specific card accents if needed */
.f-video-preview {
    margin-top: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 150px;
    position: relative;
}

.f-video-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}










/* IMPACT SECTION */
.impact-section {
    padding: 6rem 0;
    background: #fff;
}

.impact-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.impact-text {
    width: 50%;
}

.impact-desc {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.advantage-ticker {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.ticker-item {
    background: #f0fdf4;
    color: #15803d;
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sdg-display {
    display: flex;
    gap: 2rem;
}

.sdg-block {
    width: 200px;
    height: auto;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--shadow-soft);
    transition: 0.3s;
    overflow: hidden;
}

.sdg-img-box {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 15px;
    overflow: hidden;
}

.sdg-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sdg-details {
    text-align: center;
}

.s-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.3rem;
}

.sdg-details h4 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.sdg-block:hover {
    transform: translateY(-10px) rotate(2deg);
    box-shadow: var(--shadow-hover);
}

.sdg-num {
    font-size: 4rem;
    font-weight: 900;
    opacity: 0.1;
}

.sdg-09 {
    border-bottom: 5px solid #f36d25;
}

.sdg-11 {
    border-bottom: 5px solid #f99d26;
}

/* TEAM SECTION (ID CARDS) - PREMIUM TRANSIT THEME */
.team-section-new {
    padding: 4rem 0 6rem;
    background: #f8fafc;
}

.team-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    /* Ensures equal height */
    gap: 1.5rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.id-card {
    flex: 1;
    min-width: 280px;
    max-width: 300px;
    /* Reduced width to fit 3 in a line */
    height: 550px;
    /* Fixed uniform height */
    background: #fff;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    border: 1px solid #e2e8f0;
}

/* Yellow "Safety Line" Left Border */
.id-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: repeating-linear-gradient(180deg,
            #fbbf24,
            #fbbf24 10px,
            #d97706 10px,
            #d97706 20px);
}

.id-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.id-header {
    background: #1e293b;
    padding: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 2px solid #fbbf24;
    padding-left: 1.5rem;
    /* Space for safety line */
}

/* Bus Route / Company Tag */
.id-header .company {
    font-family: 'Space Grotesk', monospace;
    color: #fbbf24;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.id-header i {
    color: #fff;
    opacity: 0.8;
}

.id-body {
    padding: 1.5rem;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image:
        radial-gradient(#e2e8f0 1.5px, transparent 1.5px),
        radial-gradient(#e2e8f0 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    padding-left: calc(1.5rem + 6px);
    /* Compensate for left border */
}

/* Photo Container - Porthole Style */
/* Simplified ID Photo Style */
.id-photo-container {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 10;
}

.id-photo-front {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 
        0 0 0 3px #e2e8f0,
        0 10px 20px rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    background-color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.id-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.id-info h3 {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}

/* Condensed Role Badge */
.role {
    display: inline-block;
    padding: 0.3rem 1rem;
    background: #eff6ff;
    color: var(--primary);
    border: 1px solid #bfdbfe;
    border-radius: 50px;
    font-weight: 700;
    margin-bottom: 1.2rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-height: 28px;
    /* Ensure uniform height for varying text lines */
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90%;
}

.id-details {
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    margin-bottom: auto;
    /* Pushes bottom content down */
    font-size: 0.85rem;
}

.id-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 0;
    color: #64748b;
    font-family: 'Space Grotesk', monospace;
}

.id-row i {
    color: #fbbf24;
    font-size: 0.9rem;
}

.barcode {
    height: 35px;
    width: 100%;
    object-fit: cover;
    opacity: 0.6;
    mix-blend-mode: multiply;
    margin: 1rem 0;
}

.linkedin-btn {
    width: 100%;
    padding: 0.8rem;
    background: #0f172a;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.3s;
    font-size: 0.9rem;
    border: 1px solid #1e293b;
}

.linkedin-btn:hover {
    background: #1e293b;
    border-color: #fbbf24;
    color: #fbbf24;
    transform: translateY(-2px);
}

.id-info h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    height: 3rem;
    /* Fixed height for 2 lines of name if needed, or just alignment */
    display: flex;
    align-items: flex-end;
    /* Bottom align single lines */
    justify-content: center;
}

.role {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.8rem;
    background: #eff6ff;
    color: var(--primary);
    border-radius: 5px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    min-height: 2.5rem;
    line-height: 1.2;
    width: 100%;
    font-size: 0.8rem;
}

.barcode {
    height: 40px;
    width: 80%;
    width: 80%;
    margin: 0.5rem auto 0.5rem;
    opacity: 0.8;
    display: block;
    margin-top: auto;
    /* Push to bottom of flex container */
}

.linkedin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0077b5;
    color: #fff;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.3s;
    width: 100%;
    margin-top: 1rem;
    position: relative;
    z-index: 10;
}

.linkedin-btn:hover {
    background: #005582;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 119, 181, 0.3);
}

/* Duplicate flip styles removed */

.id-card .ppi-badge {
    position: static;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;
}

.main-footer {
    background: #1e293b;
    color: #fff;
    padding: 4rem 0;
    text-align: center;
}

/* ANIMATED FOOTER STYLES */
.animated-footer {
    position: relative;
    padding: 0;
    margin-top: 0;
    background: linear-gradient(to bottom, #87CEEB 0%, #3b82f6 100%);
    /* Hero-like Sky */
    height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Footer Sky Elements */
.footer-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    pointer-events: none;
}

.footer-cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    animation: moveFooterCloud 20s linear infinite;
}

.c-1 {
    top: 20%;
    left: -20%;
    width: 100px;
    height: 30px;
    animation-duration: 25s;
}

.c-2 {
    top: 40%;
    right: -20%;
    width: 80px;
    height: 25px;
    animation-duration: 30s;
    animation-direction: reverse;
}

@keyframes moveFooterCloud {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(120vw);
    }
}

/* City Silhouette */
.footer-city-silhouette {
    position: absolute;
    bottom: 100px;
    left: 0;
    width: 200%;
    height: 150px;
    background-image:
        linear-gradient(transparent 80%, #1e293b 80%),
        repeating-linear-gradient(90deg, transparent 0, transparent 20px, #1e293b 20px, #1e293b 50px);
    opacity: 0.3;
    animation: parallaxMove 40s linear infinite;
    z-index: 1;
}

/* Footer Road */
.footer-road-stage {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: #334155;
    z-index: 20;
    border-top: 5px solid #64748b;
}

.footer-road {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.f-road-line {
    width: 100%;
    height: 4px;
    background: repeating-linear-gradient(90deg, #fff 0, #fff 50px, transparent 50px, transparent 100px);
    animation: moveRoad 1s linear infinite;
}

/* Mini Bus Animation */
/* Mini Bus Animation */
/* Mini Bus Animation */
.mini-bus-con {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Bounce animation for the whole container to simulate suspension */
    animation: busBounce 0.5s infinite alternate ease-in-out;
}

@keyframes busBounce {
    from {
        transform: translateX(-50%) translateY(0);
    }

    to {
        transform: translateX(-50%) translateY(-2px);
    }
}

.mini-bus-text {
    font-size: 0.7rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    margin-bottom: 8px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* New CSS Bus Styles */
.footer-bus-body {
    position: relative;
    width: 120px;
    height: 60px;
    background: linear-gradient(to right, #3b82f6, #2563eb);
    border-radius: 10px 10px 2px 2px;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.f-bus-top {
    height: 30px;
    background: #1e293b;
    border-radius: 8px 8px 0 0;
    margin: 2px 2px 0 2px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 5px;
}

.f-window {
    width: 20px;
    height: 20px;
    background: linear-gradient(#bae6fd, #7dd3fc);
    border-radius: 3px;
}

.f-bus-bottom {
    height: 26px;
    /* Remainder */
    position: relative;
}

.f-light {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 5px #ef4444;
}

.f-wheel {
    position: absolute;
    bottom: -8px;
    width: 22px;
    height: 22px;
    background: #1e293b;
    border: 3px solid #64748b;
    border-radius: 50%;
    z-index: 2;
    animation: wheelSpin 1s linear infinite;
}

.f-wheel::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #94a3b8;
    border-radius: 50%;
}

.f-wheel.left {
    left: 15px;
}

.f-wheel.right {
    right: 15px;
}

@keyframes wheelSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Glass Content Overlay */
.footer-content-glass {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2rem 10%;
    color: #fff;
    margin-bottom: 100px;
    /* Sit above road */
    border-radius: 20px 20px 0 0;
    margin-left: 5%;
    margin-right: 5%;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1rem;
}

.footer-brand-section h2 {
    font-size: 2rem;
    font-family: 'Space Grotesk';
    margin-bottom: 0.5rem;
}

.footer-brand-section p {
    font-size: 0.9rem;
    opacity: 0.9;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #bfdbfe;
    transform: translateY(-3px);
}

.footer-socials {
    display: flex;
    gap: 1rem;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.social-icon:hover {
    background: #fff;
    color: var(--primary);
    transform: scale(1.1);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1rem;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.8;
}

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

    .item-large,
    .item-tall,
    .item-wide {
        grid-column: span 2;
    }

    .mission-grid {
        flex-direction: column;
    }

    .bridge-line {
        width: 80%;
        height: 2px;
    }

    .mission-bridge {
        flex-direction: row;
    }

    .item-wide-3 {
        grid-column: span 2;
    }
}

/* --- SHOWCASE / INTERFACE SECTION --- */
.showcase-section {
    padding: 6rem 0;
    background: #f8fafc;
    overflow: hidden;
}

.showcase-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 1rem 2rem;
    border: none;
    background: #fff;
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
}

.tab-btn i {
    font-size: 1.1rem;
}

/* Parent Tab Icon Color */
.tab-btn i.fa-user-shield {
    color: #eab308;
}

.tab-btn:hover {
    transform: translateY(-3px);
    color: var(--primary);
    box-shadow: var(--shadow-hover);
}

.tab-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
}

/* Content Area */
.showcase-display {
    position: relative;
    min-height: 500px;
    /* Prevent collapse */
    display: flex;
    justify-content: center;
}

.showcase-pane {
    display: none;
    /* Hidden by default */
    width: 100%;
    animation: fadeUp 0.6s ease-out;
}

.showcase-pane.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pane-caption {
    margin-top: 3rem;
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 500;
    text-align: center;
}

/* MACBOOK MOCKUP CSS */
.macbook-wrapper {
    width: 800px;
    max-width: 95%;
    perspective: 1000px;
    margin: 0 auto;
}

.macbook-screen {
    background: #000;
    border-radius: 20px 20px 0 0;
    border: 2px solid #d1d5db;
    /* Silver border */
    position: relative;
    padding: 2% 2% 0;
    /* Bezel */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}

.mac-camera {
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
}

.mac-content {
    background: #fff;
    width: 100%;
    aspect-ratio: 16/9;
    /* Standard HD Aspect */
    overflow: hidden;
    /* Hide scrollbar usually, but we want horizontal */
    position: relative;
}

/* Scroller inside screen */
.screenshot-scroller {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    height: 100%;
    width: 100%;
    /* Show one full image at a time */
    scroll-snap-type: x mandatory;
}

.screenshot-scroller img {
    height: 100%;
    width: 100%;
    /* Show one full image at a time */
    object-fit: fill;
    /* Force fit to screen */
    background: #1e293b;
    /* Fallback bg */
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* Hide scrollbar but keep functionality */
.screenshot-scroller::-webkit-scrollbar {
    height: 6px;
}

.screenshot-scroller::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.screenshot-scroller::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.macbook-base {
    height: 20px;
    background: #d1d5db;
    border-radius: 0 0 20px 20px;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.mac-opener {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 8px;
    background: #9ca3af;
    border-radius: 0 0 8px 8px;
}

/* PHONE GRID CSS */
.phones-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.phone-frame {
    width: 280px;
    height: 550px;
    background: #1e293b;
    /* Dark frame */
    border-radius: 40px;
    padding: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    border: 4px solid #334155;
    transition: transform 0.3s;
}

.phone-frame:hover {
    transform: translateY(-10px);
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 25px;
    background: #1e293b;
    border-radius: 0 0 15px 15px;
    z-index: 10;
}

.phone-content {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.phone-content img {
    width: 100%;
    object-fit: auto;
    /* Allow natural height scroll if needed, or contain */
    height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .macbook-wrapper {
        width: 100%;
    }

    .phones-grid {
        gap: 1rem;
    }

    .phone-frame {
        width: 45%;
        height: auto;
        aspect-ratio: 9/19;
    }
}

/* --- ABOUT & GOALS SECTION --- */
.about-section {
    padding: 6rem 0;
    background: var(--bg-color);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: flex-start;
}

.about-text-content {
    position: sticky;
    top: 100px;
}

.about-description {
    font-size: 1.2rem;
    color: var(--text-main);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
}

.about-subtext {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
}

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

.goals-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.goals-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--gradient-main);
    border-radius: 2px;
}

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

.goal-item {
    background: var(--surface-color);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    gap: 1.2rem;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
}

.goal-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary);
}

.goal-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #eff6ff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: 0.3s;
}

.goal-item:hover .goal-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.1);
}

.goal-text h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--text-main);
}

.goal-text p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* --- MODULE CARDS SPECIFICS --- */
.module-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.module-specs {
    margin-top: 1.5rem;
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-top: 1px solid var(--border-light);
    padding-top: 1.2rem;
}

.module-specs li {
    font-size: 0.88rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}

.module-specs li i {
    color: var(--primary);
    font-size: 0.95rem;
    width: 16px;
    text-align: center;
}

.module-specs li strong {
    font-weight: 600;
    color: var(--text-muted);
}

/* --- WHY CHOOSE SECTION --- */
.why-choose-section {
    padding: 6rem 0;
    background: #ffffff;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.benefit-card {
    background: var(--bg-color);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 2.5rem 1.8rem;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.benefit-card:hover {
    transform: translateY(-8px);
    background: var(--surface-color);
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
}

.benefit-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f0fdf4;
    color: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    transition: 0.3s;
}

.benefit-card:hover .benefit-icon {
    background: #22c55e;
    color: #fff;
    transform: rotate(360deg);
}

.benefit-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: var(--text-main);
}

.benefit-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* --- SHOWCASE GRID UPDATE --- */
.showcase-pane-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.showcase-visual-col {
    width: 100%;
    display: flex;
    justify-content: center;
}

.showcase-features-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: left;
}

.role-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.role-badge {
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-badge.admin {
    background: #eff6ff;
    color: var(--primary);
}

.role-badge.passenger {
    background: #f0fdf4;
    color: #22c55e;
}

.role-badge.parent {
    background: #fef9c3;
    color: #ca8a04;
}

.role-badge.driver {
    background: #faf5ff;
    color: #a855f7;
}

.role-header h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-main);
}

.role-header p {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 1.05rem;
}

.role-features-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.role-feat-category {
    border-left: 3px solid var(--border-light);
    padding-left: 1.2rem;
    transition: border-color 0.3s;
}

.showcase-pane.active .role-feat-category:hover {
    border-color: var(--primary);
}

.role-feat-category h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-feat-category h4 i {
    color: var(--primary);
    font-size: 1rem;
}

.role-feat-category ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.role-feat-category ul li {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    position: relative;
    padding-left: 12px;
}

.role-feat-category ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

/* --- SECTORS SECTION --- */
.sectors-section {
    padding: 6rem 0;
    background: var(--bg-color);
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.sector-card {
    background: var(--surface-color);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sector-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
}

.sector-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: #eff6ff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    transition: all 0.4s ease;
}

.sector-card:hover .sector-icon {
    background: var(--gradient-main);
    color: #fff;
    transform: scale(1.1) rotate(5deg);
}

.sector-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.sector-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* --- FUTURISTIC ROADMAP TIMELINE --- */
.roadmap-section {
    padding: 6rem 0;
    background: linear-gradient(to bottom, #0f172a, #1e293b);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.roadmap-section .section-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.roadmap-section .section-heading {
    color: #fff;
}

.roadmap-section .section-subtext {
    color: #94a3b8 !important;
}

.roadmap-timeline {
    position: relative;
    max-width: 1000px;
    margin: 4rem auto 0;
    padding: 2rem 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgba(56, 189, 248, 0.2);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 2rem 3rem;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
}

.timeline-item.right {
    left: 50%;
    justify-content: flex-start;
}

/* Circle indicator on timeline */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    background: #0f172a;
    border: 4px solid #38bdf8;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 15px #38bdf8;
    transition: all 0.3s ease;
}

.timeline-item.right::after {
    left: -10px;
    right: auto;
}

.timeline-content {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 400px;
    position: relative;
}

.timeline-item:hover .timeline-content {
    transform: translateY(-5px);
    border-color: #38bdf8;
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.15);
}

.timeline-item:hover::after {
    background: #38bdf8;
    transform: translateY(-50%) scale(1.2);
}

.roadmap-phase {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: #38bdf8;
    letter-spacing: 2px;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}

.timeline-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: #fff;
}

.timeline-content p {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .about-text-content {
        position: static;
    }

    .showcase-pane-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .showcase-features-col {
        padding: 0 1rem;
    }
}

@media (max-width: 768px) {
    .timeline-line {
        left: 30px;
    }
    
    .timeline-item {
        width: 100%;
        padding: 1.5rem 1.5rem 1.5rem 5rem;
        justify-content: flex-start;
    }
    
    .timeline-item.right {
        left: 0;
    }
    
    .timeline-item::after {
        left: 20px;
        right: auto;
    }
}

@media (max-width: 640px) {
    .goals-grid {
        grid-template-columns: 1fr;
    }
    .goals-grid .goal-item {
        grid-column: span 1 !important;
    }
}