/* --- HERO BANNER STYLES --- */
.hero-section {
    width: 100%;
    position: relative;
    background-color: #f8fafc; /* Fallback color */
    overflow: hidden;
    margin-top: 0; /* Ensures it sits right under the header */
}

.hero-banner-container {
    position: relative;
    width: 100%;
    line-height: 0; /* Removes tiny gap at bottom of image */
}

.hero-main-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Maintain professional aspect ratio on large screens */
    max-height: 700px; 
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 46, 91, 0.05); /* Very light brand blue tint */
    pointer-events: none;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-main-img {
        min-height: 350px; /* Ensures banner doesn't get too small on mobile */
    }
}




/* --- STUDIO-GRADE HERO UI --- */
.su-studio-hero {
    padding: 80px 0;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.su-studio-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
}

.su-studio-header {
    width: 100%;
    margin-bottom: 20px;
}

.su-studio-eyebrow {
    font-weight: 700;
    color: #F97316;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.su-studio-title {
    font-size: 58px;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
    letter-spacing: -2px;
    margin: 0;
}

.su-c-dark { color: #475569; }
.su-c-orange { color: #F97316; }

.su-studio-grid {
    display: flex;
    align-items: center;
    gap: 50px;
}

.su-studio-text { flex: 1; }
.su-studio-visual { flex: 1.8; display: flex; justify-content: flex-end; }

.su-studio-para {
    font-size: 18px;
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 500px;
}

.su-studio-stats {
    display: flex;
    gap: 60px;
    margin-bottom: 40px;
}

.su-stat-num-row {
    font-size: 40px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
}

.su-plus { color: #F97316; margin-left: 4px; }

.su-stat-item p {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    margin-top: -5px;
    letter-spacing: 1px;
}

.su-studio-pills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap; /* Prevents pills from going off-screen */
}

.su-pill {
    padding: 10px 22px;
    border: 1px solid #e2e8f0;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.su-pill-filled {
    background: #F97316;
    color: #fff;
    padding: 10px 22px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
}

.su-massive-img {
    width: 100%;
    max-width: 850px;
    height: auto;
    display: block;
    object-fit: contain;
}

/* --- THE MOBILE FIX (MAX-WIDTH 992px) --- */
@media (max-width: 992px) {
    .su-studio-hero {
        padding: 40px 0; /* Reduced padding for mobile */
    }

    .su-studio-container {
        padding: 0 20px; /* More room for content on small screens */
    }

    .su-studio-grid {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .su-studio-visual {
        order: -1; /* Image stays at top */
        width: 100%;
        justify-content: center;
    }

    .su-massive-img {
        max-width: 100%; /* Image fills width properly */
    }

    .su-studio-header {
        text-align: center;
    }

    .su-studio-title {
        font-size: 32px; /* Balanced size for phones */
        letter-spacing: -1px;
    }

    .su-studio-para {
        margin: 0 auto 30px;
        font-size: 16px;
    }

    .su-studio-stats {
        justify-content: center;
        gap: 30px; /* Reduced gap to prevent cropping */
        flex-wrap: wrap;
    }

    .su-stat-num-row {
        font-size: 32px;
    }

    .su-studio-pills {
        justify-content: center;
    }
}

/* Extra fix for very small phones */
@media (max-width: 480px) {
    .su-studio-title { font-size: 28px; }
    .su-studio-stats { gap: 20px; }
    .su-stat-num-row { font-size: 28px; }
}






/* --- CORE STUDIO THEME UPDATES --- */
.su-studio-section { 
    /* Reduced top padding from 80px to 20px to close the gap */
    padding: 20px 0 80px 0; 
    background: #fff; 
    font-family: 'Poppins', sans-serif; 
}

.su-studio-container { 
    max-width: 1440px; 
    margin: 0 auto; 
    padding: 0 40px; 
}

/* Tightened Header Spacing */
.su-studio-header { 
    width: 100%; 
    margin-bottom: 20px; /* Reduced from 30px */
}

.su-studio-eyebrow { 
    font-weight: 700; 
    color: #F97316; 
    font-size: 13px; 
    letter-spacing: 3px; 
    text-transform: uppercase; 
    display: block; 
    margin-bottom: 5px; /* Reduced from 10px */
}

/* DECREASED TITLE SIZE */
.su-studio-title { 
    font-size: 42px; 
    font-weight: 800; 
    line-height: 1.1; 
    color: #0f172a; 
    letter-spacing: -1.5px; 
    margin: 0; 
}

.su-c-orange { color: #F97316; }

/* --- SECTION 2 SPECIFIC ADJUSTMENTS --- */
.su-border-top {
    border-top: 1px solid #f1f5f9;
    padding-top: 20px; /* Reduced gap */
}

.su-row-reverse-mobile {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.su-text-right {
    flex: 1.2;
    padding-top: 10px;
}

.su-visual-left {
    flex: 1.8;
    display: flex;
    justify-content: flex-start;
}

/* IMAGE STACK FOR CAPTION */
.su-image-content-stack {
    width: 100%;
    text-align: center;
}

.su-impact-caption {
    margin-top: 20px;
    font-size: 22px;
    font-weight: 800;
    color: #F97316; /* Your Brand Orange */
    line-height: 1.3;
    letter-spacing: -0.5px;
    /* Optional: Subtle animation to catch attention */
    animation: su-fade-in-up 0.8s ease forwards;
}

@keyframes su-fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reality Comparison UI */
.su-reality-box {
    margin-bottom: 30px;
    border-left: 3px solid #f1f5f9;
    padding-left: 25px;
}

.su-reality-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.su-reality-item p {
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

.su-reality-active p { color: #0f172a; }
.su-cross { color: #ef4444; font-weight: 800; }
.su-check { color: #22c55e; font-weight: 800; }

.su-skills-header {
    font-size: 13px;
    font-weight: 800;
    color: #94a3b8;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.su-pills-wrap {
    flex-wrap: wrap;
    margin-bottom: 30px;
    display: flex;
    gap: 10px;
}

/* --- STUDIO CORE --- */
.su-studio-section { padding: 40px 0 80px 0; background: #fff; font-family: 'Poppins', sans-serif; }
.su-studio-container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.su-studio-header { width: 100%; margin-bottom: 20px; }
.su-studio-eyebrow { font-weight: 700; color: #F97316; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; display: block; margin-bottom: 8px; }

.su-studio-title { 
    font-size: 42px; 
    font-weight: 800; 
    line-height: 1.1; 
    color: #0f172a; 
    letter-spacing: -1.5px; 
    margin: 0; 
}

.su-c-orange { color: #F97316; }
.su-studio-para { font-size: 19px; color: #64748b; line-height: 1.8; margin-bottom: 30px; }

.su-pill { padding: 8px 20px; border: 1px solid #e2e8f0; border-radius: 50px; font-size: 14px; font-weight: 600; color: #334155; }
.su-pill-filled { background: #F97316; color: #fff; border: 1px solid #F97316; padding: 8px 20px; border-radius: 50px; font-size: 14px; font-weight: 600; }

.su-massive-img { width: 100%; max-width: 850px; height: auto; display: block; object-fit: contain; }

/* --- MOBILE --- */
@media (max-width: 992px) {
    .su-studio-section { padding: 30px 0 60px 0; }
    .su-row-reverse-mobile { flex-direction: column; text-align: center; }
    .su-visual-left { order: -1; justify-content: center; width: 100%; }
    .su-massive-img { max-width: 450px; }
    .su-studio-title { font-size: 30px; }
    .su-reality-box { border-left: none; padding-left: 0; }
    .su-reality-item { justify-content: center; }
    .su-pills-wrap { justify-content: center; }
    .su-impact-caption { font-size: 18px; margin-top: 15px; }
}



    /* --- SECTION 3: CENTERED CURRICULUM UI --- */
.su-learn-v5 {
    padding: 30px 0 100px 0; /* Tight top padding to reduce white space */
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.su-center-header {
    text-align: center;
    margin-bottom: 50px;
}

.su-text-center { text-align: center !important; }

/* Desktop Split Layout */
.su-learn-split {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 40px;
}

.su-learn-text-side { flex: 1; }
.su-learn-img-side { flex: 1.6; display: flex; justify-content: flex-end; }

/* Content Styling */
.su-skill-group {
    margin-bottom: 35px;
}

.su-skill-label {
    font-size: 13px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.su-skill-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.su-skill-list li {
    font-size: 19px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.su-skill-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #F97316;
    border-radius: 50%;
    flex-shrink: 0;
}

.su-skill-list li small {
    font-size: 11px;
    color: #94a3b8;
    margin-left: 10px;
    border: 1px solid #e2e8f0;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Image - Plane & Massive */
.su-learn-massive-img {
    width: 100%;
    max-width: 850px; /* Large Plane Photo */
    height: auto;
    display: block;
    object-fit: contain;
}

/* Bottom Flow Content */
.su-learn-extra {
    text-align: center;
    padding-top: 40px;
    border-top: 1px dashed #e2e8f0;
}

.su-soft-skills-bar p {
    font-size: 20px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 40px;
}

.su-learn-final-tag p {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

/* --- MOBILE VIEW OPTIMIZATION --- */
@media (max-width: 992px) {
    .su-learn-v5 { padding-top: 20px; }
    
    .su-learn-split {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .su-learn-img-side {
        order: -1; /* Image comes first on mobile */
        justify-content: center;
    }

    .su-learn-massive-img {
        max-width: 100%; /* No cropping on mobile */
    }

    .su-skill-list li {
        justify-content: center;
        font-size: 17px;
    }

    .su-skill-list li::before { display: none; } /* Clean look for mobile */

    .su-learn-final-tag p {
        font-size: 22px;
    }

    .su-soft-skills-bar p {
        font-size: 16px;
    }
}

    /* --- SECTION 4: 3D ROBOT SHOWROOM --- */
.su-3d-showroom {
    padding: 60px 0 100px;
    background: #ffffff;
    font-family: 'Poppins', sans-serif !important; /* FORCED POPPINS */
}

/* Heading Adjustment */
.su-center-header { text-align: center; margin-bottom: 50px; }

.su-beginner-zone { margin-bottom: 60px; } /* Reduced bottom margin */
.su-zone-header h3 { font-size: 28px; font-weight: 800; color: #0f172a; margin: 0; font-family: 'Poppins', sans-serif; }
.su-zone-header h3 small { font-size: 14px; color: #64748b; margin-left: 10px; font-weight: 600; }
.su-zone-header p { font-size: 16px; color: #475569; margin-top: 5px; font-family: 'Poppins', sans-serif; }

/* 3D GRID FOR 4 ROBOTS */
.su-robot-3d-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.su-robot-card-3d {
    text-align: center;
    perspective: 1000px; /* Enables 3D space */
}

/* INCREASED IMAGE SIZE (280px+) */
.su-img-perspective {
    position: relative;
    padding-bottom: 20px;
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.su-3d-img {
    width: 100%;
    max-width: 280px; /* INCREASED AS REQUESTED */
    height: auto;
    display: block;
    margin: 0 auto;
    /* THE 3D EFFECT: Advanced Shadow for standing look */
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.12)); 
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.su-robot-card-3d:hover .su-3d-img {
    transform: translateY(-20px) rotateX(10deg); /* 3D Tilt Effect */
    filter: drop-shadow(0 50px 60px rgba(0,0,0,0.18));
}

/* No Masking - Robot names fully visible below */
.su-robot-info { margin-top: 15px; }
.su-robot-info h4 { font-size: 20px; font-weight: 800; color: #1e293b; margin: 0; font-family: 'Poppins', sans-serif; }
.su-robot-info p { font-size: 13px; color: #94a3b8; font-weight: 600; font-family: 'Poppins', sans-serif; }

/* --- SECOND SECTION (ROBOTIC CARS) --- */
.su-highlight-core {
    border-top: 1px solid #f1f5f9;
    padding-top: 40px; /* REDUCED GAP TO PREVIOUS SECTION */
}

.su-highlight-grid {
    display: flex;
    align-items: center;
    gap: 80px;
}

.su-highlight-content { flex: 1; }
.su-highlight-visual-area { flex: 1.5; display: flex; justify-content: flex-end; }

.su-para-sub { font-size: 17px; color: #64748b; line-height: 1.7; margin: 15px 0 35px; }

.su-star-product {
    border-left: 5px solid #F97316;
    padding-left: 30px;
}

.su-badge { font-size: 11px; font-weight: 900; color: #F97316; letter-spacing: 2px; margin-bottom: 10px; }
.su-star-product h4 { font-size: 32px; font-weight: 800; color: #0f172a; margin-bottom: 25px; line-height: 1.1; }

.su-spec-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.su-spec-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 10px;
}

.su-spec-pill span { color: #F97316; font-size: 11px; opacity: 0.6; }

.su-focus-note {
    font-size: 14px;
    color: #1e293b;
    background: #fff7ed;
    display: inline-block;
    padding: 8px 20px;
    border-radius: 6px;
}

.su-massive-hero-img {
    width: 100%;
    max-width: 800px; /* HUGE Image size */
    height: auto;
    display: block;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 992px) {
    .su-robot-3d-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .su-highlight-grid { flex-direction: column; text-align: center; }
    .su-highlight-visual-area { order: -1; justify-content: center; width: 100%; }
    .su-massive-hero-img { max-width: 100%; }
    .su-star-product { border-left: none; border-top: 5px solid #F97316; padding-left: 0; padding-top: 30px; }
    .su-spec-tags { justify-content: center; }
}

@media (max-width: 480px) {
    .su-robot-3d-grid { grid-template-columns: 1fr; }
    .su-studio-title { font-size: 32px; }
}

    /* --- 3D STAGGERED LAB STYLES --- */
.su-3d-lab-section {
    padding: 60px 0 120px;
    background-color: #ffffff; /* PURE WHITE */
    font-family: 'Poppins', sans-serif !important;
}

.su-lab-header-compact { text-align: center; margin-bottom: 80px; }

/* THE STAGGERED GRID */
.su-staggered-lab {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 100px 80px; /* Large horizontal gap, staggered vertical */
    max-width: 1200px;
    margin: 0 auto;
}

.su-robot-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    perspective: 1200px; /* Enabling 3D Space */
}

/* Staggered vertical effect */
.su-move-down { margin-top: 100px; }

/* 3D IMAGE STYLING */
.su-3d-visual {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.su-plane-3d {
    width: 100%;
    max-width: 420px; /* INCREASED SIZE */
    height: auto;
    display: block;
    margin: 0 auto;
    /* Advanced shadow to create "floor" perspective */
    filter: drop-shadow(0 40px 50px rgba(0,0,0,0.1));
}

/* Interaction: Robot pops out */
.su-robot-display:hover .su-3d-visual {
    transform: translateY(-20px) rotateX(12deg) rotateY(-5deg);
}

.su-robot-display:hover .su-plane-3d {
    filter: drop-shadow(0 60px 70px rgba(249, 115, 22, 0.15));
}

/* TECHNICAL CONTENT */
.su-tech-code {
    font-family: monospace;
    font-size: 11px;
    font-weight: 800;
    color: #cbd5e1;
    letter-spacing: 2px;
    margin-bottom: 10px;
    display: block;
}

.su-robot-data h3 {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 15px;
}

.su-robot-data p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.7;
    max-width: 320px;
    margin: 0 auto 20px;
}

.su-mini-link {
    font-size: 13px;
    font-weight: 800;
    color: #F97316;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
}

.su-mini-link:hover { border-bottom-color: #F97316; }

/* BOTTOM SEO BAR */
.su-lab-mini-footer {
    text-align: center;
    margin-top: 100px;
    padding-top: 40px;
    border-top: 1px dashed #e2e8f0;
}

.su-lab-mini-footer p { font-size: 14px; color: #94a3b8; letter-spacing: 0.5px; }
.su-lab-mini-footer strong { color: #F97316; }

/* --- MOBILE --- */
@media (max-width: 992px) {
    .su-staggered-lab { grid-template-columns: 1fr; gap: 60px; }
    .su-move-down { margin-top: 0; }
    .su-plane-3d { max-width: 300px; }
    .su-robot-display:hover .su-3d-visual { transform: translateY(-10px); }
}
    /* --- COMPACT HUD FINALE STYLES --- */
.su-innovation-finale {
    padding: 40px 0 80px;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif !important;
}

/* 1. HUD COMPARISON */
.su-hud-comparison {
    display: flex;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto 60px;
    background: #f8fafc;
    border-radius: 20px;
    padding: 30px;
    border: 1px solid #f1f5f9;
}

.su-hud-side { flex: 1; }
.su-hud-divider {
    padding: 0 40px;
    font-weight: 900;
    color: #cbd5e1;
    font-size: 14px;
}

.su-hud-label {
    display: block;
    font-family: monospace;
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.su-blunt-items { list-style: none; padding: 0; margin: 0; }
.su-blunt-items li { font-size: 15px; font-weight: 700; color: #94a3b8; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.su-blunt-items i { font-size: 12px; color: #ef4444; }

.su-advantage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.su-adv-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
}

/* 2. IMPACT HUD FRAME */
.su-impact-hud-frame {
    position: relative;
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 60px 40px;
    text-align: center;
    border: 1px solid #f1f5f9;
}

/* Technical HUD Corners */
.su-hud-corners::before, .su-hud-corners::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    border: 3px solid #F97316;
}
.su-hud-corners::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.su-hud-corners::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

.su-hud-pre { font-size: 12px; font-weight: 800; color: #cbd5e1; letter-spacing: 4px; }

.su-hud-main-statement {
    font-size: 42px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
    margin: 20px 0;
}

.su-hud-main-statement span { color: #F97316; display: block; }

.su-target-marquee {
    font-size: 12px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 1px;
}

/* 3. ACTION DOCK */
.su-action-dock {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 40px;
    background: #0f172a;
    border-radius: 100px;
    color: #fff;
}

.su-dock-text h3 { font-size: 20px; font-weight: 700; margin: 0; }

.su-dock-btns { display: flex; align-items: center; gap: 20px; }

.su-dock-btn {
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    transition: 0.3s;
}

.su-dock-orange { background: #F97316; color: #fff; }
.su-dock-orange:hover { background: #ea580c; transform: translateY(-3px); }

.su-dock-dark { border: 2px solid #fff; color: #fff; }
.su-dock-dark:hover { background: #fff; color: #0f172a; }

.su-dock-link { color: #94a3b8; text-decoration: none; font-size: 13px; font-weight: 700; }
.su-dock-link:hover { color: #F97316; }

/* --- MOBILE --- */
@media (max-width: 992px) {
    .su-hud-comparison { flex-direction: column; text-align: center; }
    .su-hud-divider { padding: 20px 0; }
    .su-hud-main-statement { font-size: 28px; }
    .su-action-dock { flex-direction: column; border-radius: 30px; text-align: center; gap: 20px; }
    .su-dock-btns { flex-direction: column; width: 100%; }
    .su-dock-btn { width: 100%; text-align: center; }
}