/* 
 * SAT-MAKON Mobile Responsive Styles
 * Optimized for iPhone 14 Pro Max (428px) and all mobile devices
 * Last updated: 2025-01-06 - Aggressive mobile-first approach
 * This file will automatically reload in debug mode without cache
 */

/* ===========================================
   MOBILE NAVBAR STYLES
   =========================================== */

/* Mobile Navbar Container - ULTRA FIXED POSITIONING */
@media (max-width: 480px) {
    /* FORCE OVERRIDE TAILWIND CLASSES */
    #navbar-container.relative {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1050 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(15px) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        height: 60px !important;
        padding: 0 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        width: 100% !important;
        display: block !important;
    }
    
    /* Backup selector */
    #navbar-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1050 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(15px) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        height: 60px !important;
        width: 100% !important;
    }
    
    /* Create mobile navbar structure if it doesn't exist */
    #navbar-container::before {
        content: '';
        display: block;
        width: 100%;
        height: 60px;
    }
    
    /* Mobile navbar content - ALWAYS VISIBLE */
    .mobile-navbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 1.5rem !important;
        height: 60px !important;
        width: 100% !important;
        position: relative !important;
        background: transparent !important;
        z-index: 1051 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Mobile logo */
    .mobile-logo {
        font-size: 1.375rem !important; /* 22px */
        font-weight: 800 !important;
        color: #9A4EFF !important;
        text-decoration: none !important;
        letter-spacing: -0.02em !important;
        transition: color 0.2s ease !important;
    }
    
    .mobile-logo:hover {
        color: #8239cc !important;
    }
    
    /* Mobile hamburger menu */
    .mobile-hamburger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 26px !important;
        height: 20px !important;
        cursor: pointer !important;
        padding: 4px !important;
        background: none !important;
        border: none !important;
        border-radius: 4px !important;
        transition: background-color 0.2s ease !important;
    }
    
    .mobile-hamburger:hover {
        background-color: rgba(154, 78, 255, 0.08) !important;
    }
    
    .mobile-hamburger span {
        display: block !important;
        width: 100% !important;
        height: 2.5px !important;
        background-color: #333 !important;
        border-radius: 2px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Hamburger animation */
    .mobile-hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    
    .mobile-hamburger.active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .mobile-hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px) !important;
    }
    
    /* Mobile menu dropdown */
    .mobile-menu {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-100%) !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 999 !important;
        padding: 1.5rem 0 !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
    }
    
    .mobile-menu.open {
        transform: translateY(0) !important;
    }
    
    .mobile-menu a {
        display: block !important;
        padding: 1rem 1.5rem !important;
        color: #333 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 1rem !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
        transition: all 0.2s ease !important;
        position: relative !important;
    }
    
    .mobile-menu a:hover {
        background-color: rgba(154, 78, 255, 0.08) !important;
        color: #9A4EFF !important;
        padding-left: 2rem !important;
    }
    
    .mobile-menu a:active {
        background-color: rgba(154, 78, 255, 0.15) !important;
    }
    
    .mobile-menu a:last-child {
        border-bottom: none !important;
    }
}

/* ===========================================
   CRITICAL MOBILE VIEWPORT SETUP
   =========================================== */

/* Prevent zoom on mobile and ensure proper viewport handling */
@viewport {
    width: device-width;
    initial-scale: 1.0;
    maximum-scale: 1.0;
    user-scalable: no;
}

/* Prevent horizontal scroll on all mobile devices */
@media (max-width: 480px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 0 !important;
    }
    
    /* BODY PADDING FOR FIXED NAVBAR */
    body {
        padding-top: 60px !important;
    }
    
    /* HERO SECTION BOTTOM SPACING */
    .hero-section {
        margin-bottom: 0 !important;
        padding-bottom: 1rem !important;
    }
    
    /* ALL IN ONE SECTION TOP SPACING */
    .py-20 {
        padding-top: 2rem !important;
        padding-bottom: 3rem !important;
    }
    
    * {
        box-sizing: border-box !important;
    }
}

/* ===========================================
   HERO SECTION - MOBILE RESPONSIVE
   iPhone 14 Pro Max: 428px width
   =========================================== */

/* Mobile: 320px - 480px (includes iPhone 14 Pro Max at 428px) */
@media (max-width: 480px) {
    
    /* Hero Container - Full mobile viewport */
    .hero-section,
    .bg-\[#f5f9fa\].relative.w-full.h-screen.overflow-hidden {
        height: 100vh !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
    }
    
    /* Background Element - Hide or center properly */
    .hero-background,
    .absolute.bottom-0.flex.h-\[900px\] {
        display: none !important;
    }
    
    /* Alternative mobile background */
    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, #f5f9fa 0%, #e8f4f8 100%);
        z-index: 1;
    }
    
    /* Main Content Container - MAXIMUM SPACE for 3D logo */
    .hero-main-content,
    .absolute.box-border.flex.flex-col.gap-7,
    div[style*="calc(50% - 351px)"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 14rem 1rem 1.5rem 1rem !important; /* INCREASED top space */
        gap: 1.5rem !important;
        align-items: center !important;
        text-align: center !important;
        margin-top: 3rem !important; /* More margin */
        margin-bottom: 0 !important;
        z-index: 10 !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    /* Heading Container - Mobile typography */
    .hero-heading,
    .flex.flex-col.font-vk-sans.font-semibold {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 2rem !important; /* 32px */
        line-height: 1.1 !important;
        gap: 1rem !important;
        text-align: center !important;
        align-items: center !important;
    }
    
    .hero-heading > div,
    .hero-heading .relative.shrink-0,
    .hero-heading .gradient-text {
        width: 100% !important;
        text-align: center !important;
        font-size: 2rem !important; /* 32px */
        line-height: 1.1 !important;
    }
    
    /* Description - Mobile sizing */
    .hero-description,
    .font-normal.font-inter.text-\[\#0b1628\] {
        width: 100% !important;
        max-width: 300px !important;
        text-align: center !important;
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.4 !important;
        margin: 0 auto !important;
    }
    
    /* Buttons Container - Mobile stacking */
    .hero-buttons,
    .flex.flex-row.gap-3.items-center.justify-center {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 280px !important;
        gap: 0.75rem !important;
        margin: 0 auto !important;
    }
    
    /* Individual buttons - Mobile sizing */
    .hero-buttons > div,
    .flex-1.gradient-button,
    .flex-1.backdrop-blur-\[10px\] {
        flex: none !important;
        width: 100% !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* BUTTON ALIGNMENT FIX - Text and icon on same level */
    .hero-buttons .flex.flex-row.gap-1.items-center.justify-center {
        padding: 0.75rem 1rem !important;
        gap: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 48px !important;
    }
    
    .hero-buttons .font-vk-sans.font-semibold {
        font-size: 0.875rem !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .hero-buttons .size-5 {
        width: 1rem !important;
        height: 1rem !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 3D Logo - ULTRA POSITIONING (override Tailwind classes) */
    .hero-3d-logo,
    .absolute.-right-8,
    div.absolute.-right-8,
    [class*="-right-8"] {
        position: absolute !important;
        top: 8% !important; /* MOVED UP for better visibility */
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        width: 320px !important; /* Larger for maximum visibility */
        height: 320px !important; /* Larger for maximum visibility */
        opacity: 0.18 !important; /* More visible */
        z-index: 2 !important; /* Higher z-index */
        pointer-events: none !important;
    }
    
    /* OVERRIDE ALL TAILWIND RESPONSIVE CLASSES FOR 3D LOGO */
    [class*="w-[250px]"],
    [class*="w-[500px]"],
    [class*="w-[650px]"],
    [class*="w-[800px]"],
    [class*="w-[950px]"],
    [class*="w-[1100px]"],
    [class*="h-[250px]"],
    [class*="h-[500px]"],
    [class*="h-[650px]"],
    [class*="h-[800px]"],
    [class*="h-[950px]"],
    [class*="h-[1000px]"] {
        width: 320px !important;
        height: 320px !important;
    }
    
    /* Override Tailwind positioning classes */
    [class*="-right-8"],
    [class*="top-[60%]"],
    [class*="-translate-y-1/2"] {
        right: auto !important;
        top: 8% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* Ensure logo doesn't cause horizontal scroll */
    .hero-3d-logo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        filter: blur(1px) !important;
    }
}

/* ===========================================
   ALL-IN-ONE SECTION - MOBILE RESPONSIVE  
   =========================================== */

@media (max-width: 480px) {
    
    /* Section Container */
    .max-w-\[1184px\].mx-auto.px-8.relative.z-10 {
        padding: 0 1rem !important;
        max-width: 100% !important;
    }
    
    /* Section Header - Mobile */
    .allinone-header,
    .mb-16 {
        margin-bottom: 2rem !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .allinone-header > div {
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Title - Mobile typography */
    .allinone-title,
    .flex.flex-row.font-vk-sans.font-bold {
        flex-direction: column !important;
        font-size: 1.5rem !important; /* 24px */
        line-height: 1.2 !important;
        gap: 0.5rem !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .allinone-title > div {
        text-align: center !important;
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    
    .allinone-title p {
        white-space: normal !important;
        text-align: center !important;
    }
    
    /* Subtitle - Mobile */
    .allinone-subtitle,
    .font-vk-sans.font-normal.relative.shrink-0.text-\[\#aab9bd\] {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .allinone-subtitle p {
        white-space: normal !important;
        text-align: center !important;
    }
    
    /* Features Grid - Mobile Single Column */
    .features-grid-row,
    .flex.flex-row.gap-6.items-center.justify-center {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        justify-items: center !important;
        margin-bottom: 1rem !important;
    }
    
    /* Individual Feature Cards - SMALLER Mobile Cards */
    .feature-card,
    .bg-\[rgba\(255\,255\,255\,0\.04\)\].h-\[248px\] {
        width: 100% !important;
        max-width: 250px !important;
        height: auto !important;
        min-height: 160px !important;
        margin: 0 auto !important;
        border-radius: 0.75rem !important;
    }
    
    .feature-card-inner,
    .h-\[248px\].overflow-clip.relative {
        height: auto !important;
        min-height: 160px !important;
        width: 100% !important;
    }
    
    /* Feature Card Content - SMALLER Mobile positioning */
    .feature-card-content,
    .absolute.box-border.flex.flex-col.gap-6 {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        padding: 0.75rem !important;
        width: 100% !important;
        height: 100% !important;
        gap: 0.75rem !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Feature titles - SMALLER Mobile */
    .feature-card-title,
    .font-inter.font-medium.relative.text-\[\#ffffff\] {
        font-size: 1rem !important; /* 16px */
        text-align: center !important;
        line-height: 1.3 !important;
    }
    
    /* Feature descriptions - SMALLER */
    .feature-card .font-inter.font-normal.relative.text-\[\#aab9bd\] {
        font-size: 0.8125rem !important; /* 13px */
        line-height: 1.4 !important;
        text-align: center !important;
    }
}

/* ===========================================
   SOLUTION SECTION - MOBILE RESPONSIVE
   =========================================== */

@media (max-width: 480px) {
    
    /* Solution Section Container */
    .solution-section,
    .bg-white.relative.w-full.py-20.overflow-hidden {
        padding: 2rem 0 !important;
    }
    
    .solution-container,
    .max-w-\[1183px\].mx-auto.px-8.relative {
        padding: 0 1rem !important;
        max-width: 100% !important;
    }
    
    /* Solution Title */
    .solution-title-container,
    .flex.flex-row.gap-2\.5.items-center.justify-start.mb-16 {
        justify-content: center !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }
    
    .solution-title,
    .font-inter.font-bold.text-\[\#111214\] {
        font-size: 1.5rem !important; /* 24px */
        text-align: center !important;
    }
    
    /* Feature Container - Mobile stacking */
    .solution-feature-container,
    .box-border.content-stretch.flex.flex-row {
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    /* Feature Column - Mobile full width */
    .solution-feature-column,
    .bg-white.h-full.overflow-clip.relative.rounded-3xl {
        width: 100% !important;
        max-width: 350px !important;
        height: auto !important;
        min-height: 250px !important;
        margin: 0 auto !important;
    }
    
    /* Hide complex decorative elements on mobile */
    .solution-decorative,
    .absolute.contents {
        display: none !important;
    }
    
    /* Mobile background */
    .solution-mobile-bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #f8f6ff 0%, #fff 100%);
        opacity: 0.3;
    }
    
    /* Purple overlay - mobile */
    .solution-purple-overlay,
    .absolute.bg-\[\#9a4eff\] {
        position: absolute !important;
        inset: 0 !important;
        height: 100% !important;
        width: 100% !important;
        opacity: 0.05 !important;
        mix-blend-mode: multiply !important;
    }
    
    /* Solution content - mobile positioning */
    .solution-feature-content,
    .absolute.box-border.content-stretch.flex.flex-col {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        padding: 1.5rem !important;
        width: 100% !important;
        height: 100% !important;
        gap: 1rem !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Solution icon - mobile */
    .solution-icon,
    .bg-white.relative.rounded-\[18px\] {
        width: 4rem !important; /* 64px */
        height: 4rem !important; /* 64px */
        border-radius: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .solution-icon-text,
    .solution-icon .absolute {
        position: relative !important;
        inset: auto !important;
        font-size: 1.5rem !important; /* 24px */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Solution description - mobile */
    .solution-description,
    .font-vk-demibold.leading-\[0\] {
        font-size: 1rem !important; /* 16px */
        line-height: 1.3 !important;
        text-align: center !important;
        width: 100% !important;
    }
}

/* ===========================================
   ADDITIONAL MOBILE FIXES
   =========================================== */

/* iPhone 14 Pro Max specific (428px) */
@media (max-width: 428px) {
    .hero-main-content,
    div[style*="calc(50% - 351px)"] {
        margin-top: 2.5rem !important;
        padding: 13rem 0.75rem 1.5rem 0.75rem !important;
    }
    
    .hero-heading {
        font-size: 1.875rem !important; /* 30px */
    }
    
    .hero-description {
        max-width: 280px !important;
    }
    
    .hero-buttons {
        max-width: 260px !important;
    }
    
    /* 3D logo positioning for iPhone 14 Pro Max - ULTRA VISIBLE */
    .hero-3d-logo,
    .absolute.-right-8,
    div.absolute.-right-8,
    div[class*="-right-8"] {
        position: absolute !important;
        left: 50% !important;
        top: 8% !important; /* Higher positioning */
        transform: translateX(-50%) !important;
        right: auto !important;
        width: 300px !important;
        height: 300px !important;
        opacity: 0.18 !important;
        z-index: 2 !important;
    }
}

/* Smaller phones (iPhone SE, etc.) */
@media (max-width: 375px) {
    .hero-main-content,
    div[style*="calc(50% - 351px)"] {
        margin-top: 2rem !important;
        padding: 12rem 0.5rem 1rem 0.5rem !important;
    }
    
    .hero-heading {
        font-size: 1.75rem !important; /* 28px */
    }
    
    .hero-description {
        max-width: 260px !important;
        font-size: 0.8125rem !important; /* 13px */
    }
    
    .hero-buttons {
        max-width: 240px !important;
    }
    
    .feature-card {
        max-width: 220px !important;
        min-height: 140px !important;
    }
    
    .solution-feature-column {
        max-width: 300px !important;
    }
    
    /* 3D logo for smaller phones - ULTRA VISIBLE */
    .hero-3d-logo,
    .absolute.-right-8,
    div.absolute.-right-8,
    div[class*="-right-8"] {
        width: 260px !important;
        height: 260px !important;
        top: 10% !important; /* Higher up */
        opacity: 0.18 !important;
        z-index: 2 !important;
    }
}

/* ===========================================
   MOBILE GRADUATES SLIDER - ADVANCED FEATURES
   =========================================== */

@media (max-width: 480px) {
    /* Advanced mobile slider with momentum scrolling */
    .mobile-graduates-container {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
        padding: 0 1rem !important;
    }
    
    /* Slider track */
    .mobile-slider-track {
        display: flex !important;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        will-change: transform !important;
        touch-action: pan-x !important;
    }
    
    /* Card sizing for mobile */
    .mobile-graduate-card {
        min-width: calc(100vw - 4rem) !important;
        max-width: 280px !important;
        margin: 0 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Swipe indicators */
    .mobile-swipe-indicator {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        z-index: 10 !important;
    }
    
    .mobile-swipe-indicator:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: translateY(-50%) scale(1.1) !important;
    }
    
    .mobile-swipe-indicator.left {
        left: 1rem !important;
    }
    
    .mobile-swipe-indicator.right {
        right: 1rem !important;
    }
    
    .mobile-swipe-indicator.disabled {
        opacity: 0.3 !important;
        pointer-events: none !important;
    }
    
    /* Progress indicator */
    .mobile-slider-progress {
        position: absolute !important;
        bottom: 1rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: rgba(255, 255, 255, 0.2) !important;
        height: 4px !important;
        border-radius: 2px !important;
        width: 80px !important;
        overflow: hidden !important;
    }
    
    .mobile-slider-progress-fill {
        height: 100% !important;
        background: rgba(255, 255, 255, 0.8) !important;
        border-radius: 2px !important;
        transition: width 0.4s ease !important;
    }
}

/* ===========================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   =========================================== */

@media (max-width: 480px) {
    /* Improve scrolling performance */
    * {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* GPU acceleration for slider elements */
    .mobile-slider-track,
    .mobile-graduate-card,
    .mobile-swipe-indicator {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
    }
    
    /* Optimize animations for mobile */
    .mobile-menu {
        will-change: transform !important;
    }
    
    .mobile-hamburger span {
        will-change: transform, opacity !important;
    }
    
    /* Prevent text selection on interactive elements */
    .mobile-hamburger,
    .mobile-logo,
    .mobile-menu a {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    /* Improve tap targets */
    .mobile-hamburger,
    .mobile-menu a {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* ===========================================
   DEBUG MODE INDICATORS - DISABLED
   =========================================== */

@media (max-width: 480px) {
    /* REMOVE DEBUG RED LINES */
    .debug-mode::after {
        display: none !important;
    }
    
    .debug-breakpoint::before {
        display: none !important;
    }
    
    /* Remove any debug outlines */
    body.debug-mode.mobile-active *,
    body.debug-mode.mobile-active .absolute {
        outline: none !important;
        border: none !important;
    }
}

/* ===========================================
   FORCE MOBILE LAYOUT UTILITY CLASSES
   =========================================== */

/* Override any conflicting Tailwind classes and ensure mobile responsiveness */
@media (max-width: 480px) {
    
    /* CRITICAL: Override Tailwind's positioning classes */
    .absolute[style*="left: calc"] {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        padding: 2rem 1rem !important;
        margin-top: 8rem !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* CRITICAL: Override large fixed widths */
    .w-\[482px\], .w-\[549px\], .w-\[278px\], .w-\[653px\], .w-\[1183px\], .w-\[1184px\] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* CRITICAL: Override fixed heights */
    .h-\[248px\], .h-\[495px\], .h-\[494px\] {
        height: auto !important;
        min-height: 200px !important;
    }
    
    /* CRITICAL: Override large text sizes */
    .text-\[56px\], .text-\[40px\], .text-\[36px\], .text-\[42px\] {
        font-size: 2rem !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }
    
    /* CRITICAL: Force flex direction to column on mobile */
    .flex-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    /* CRITICAL: Override absolute positioning */
    .absolute {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }
    
    /* Exception: Keep 3D logo absolute but fix position */
    .absolute.-right-8 {
        position: absolute !important;
        right: -1rem !important;
        top: 70% !important;
        width: 180px !important;
        height: 180px !important;
        opacity: 0.3 !important;
    }
    
    /* Hide elements that might interfere with sliders */
    .scroll-container:not(.mobile-slider-track) {
        animation: none !important;
    }
    
    /* ULTRA NAVBAR VISIBILITY */
    .mobile-navbar,
    #mobile-navbar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 100% !important;
        height: 60px !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 1.5rem !important;
        background: transparent !important;
        z-index: 1051 !important;
    }
    
    /* Force show mobile navbar elements */
    .mobile-logo,
    .mobile-hamburger {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide any conflicting desktop navbar on mobile */
    @media (max-width: 480px) {
        nav:not(.mobile-navbar):not(#mobile-navbar) {
            display: none !important;
        }
    }
    
    /* FORCE BUTTON CONTENT ALIGNMENT */
    .hero-buttons .flex.flex-row.gap-1.items-center.justify-center {
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }
    
    .hero-buttons .font-vk-sans.font-semibold,
    .hero-buttons .size-5 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }
    /* Force mobile positioning */
    .mobile-center {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    /* Force mobile full width */
    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Force mobile column layout */
    .mobile-column {
        flex-direction: column !important;
    }
    
    /* Force mobile text sizing */
    .mobile-text-sm {
        font-size: 0.875rem !important;
    }
    
    .mobile-text-base {
        font-size: 1rem !important;
    }
    
    .mobile-text-lg {
        font-size: 1.125rem !important;
    }
    
    .mobile-text-xl {
        font-size: 1.25rem !important;
    }
    
    .mobile-text-2xl {
        font-size: 1.5rem !important;
    }
    
    /* EMERGENCY MOBILE OVERRIDES - If nothing else works */
    body.mobile-active * {
        max-width: 100% !important;
    }
    
    body.mobile-active .absolute {
        position: relative !important;
    }
    
    body.mobile-active .text-\[56px\] {
        font-size: 2rem !important;
    }
    
    body.mobile-active .w-\[482px\] {
        width: 90% !important;
        margin: 0 auto !important;
    }
    
    body.mobile-active .flex-row {
        flex-direction: column !important;
    }
    
    /* Debug helper - shows red border on mobile elements */
    body.debug-mode.mobile-active * {
        outline: 1px dashed rgba(255, 0, 0, 0.3) !important;
    }
    
    body.debug-mode.mobile-active .absolute {
        outline: 2px solid red !important;
    }
}

/* ===========================================
   MOBILE GRADUATES SLIDER FUNCTIONALITY
   =========================================== */

@media (max-width: 480px) {
    /* Graduates section container */
    .overflow-hidden.w-full.mb-16 {
        position: relative !important;
        width: 100% !important;
        margin-bottom: 2rem !important;
    }
    
    /* Mobile slider container */
    .scroll-container {
        animation: none !important; /* Disable auto-scroll on mobile */
        width: auto !important;
        display: flex !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: transform !important;
    }
    
    /* Individual graduate cards - mobile sizing */
    .bg-\[rgba\(255\,255\,255\,0\.13\)\].relative.rounded-\[32px\].w-\[311px\] {
        width: calc(100vw - 3rem) !important;
        max-width: 300px !important;
        margin: 0 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Mobile slider navigation dots */
    .mobile-slider-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin-top: 1.5rem !important;
        padding: 0 1rem !important;
    }
    
    .mobile-slider-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.4) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-slider-dot.active {
        background-color: rgba(255, 255, 255, 0.9) !important;
        transform: scale(1.2) !important;
    }
    
    /* Hide desktop scroll animation on mobile */
    .scroll-container:hover {
        animation-play-state: running !important;
    }
    
    /* Touch area for swiping */
    .mobile-graduates-slider {
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
    }
    
    .mobile-graduates-slider .scroll-container {
        scroll-snap-align: start !important;
    }
    
    /* Individual cards snap to center */
    .mobile-graduates-slider .bg-\[rgba\(255\,255\,255\,0\.13\)\] {
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
    }
    
    /* Smooth scrolling behavior */
    .mobile-slider-smooth {
        scroll-behavior: smooth !important;
    }
}

/* ===========================================
   MOBILE STUDENT SCORES SLIDER (NEW-RESULTS.HTML)
   =========================================== */

@media (max-width: 480px) {
    /* Student scores section */
    .bg-\[\#f0f3f3\].relative.w-full {
        padding: 2rem 1rem !important;
    }
    
    /* Student scores heading */
    .font-vk-demibold.text-\[\#03151a\].text-\[36px\] {
        font-size: 1.5rem !important; /* 24px */
        line-height: 1.2 !important;
        margin-bottom: 1.5rem !important;
        padding: 0 1rem !important;
    }
    
    /* Mobile slider container adjustments */
    .relative.w-full.max-w-\[320px\] {
        max-width: calc(100vw - 2rem) !important;
        margin: 0 auto !important;
    }
    
    /* Individual score cards in mobile */
    .bg-white.relative.rounded-\[32px\].w-\[311px\] {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 1.5rem !important;
    }
    
    /* Score card content adjustments */
    .flex.items-center.gap-4.p-6 {
        padding: 1rem !important;
        gap: 0.75rem !important;
    }
    
    /* Avatar sizing in mobile */
    .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    /* Student name sizing */
    .font-semibold.text-lg {
        font-size: 1rem !important;
    }
    
    /* Score display adjustments */
    .text-4xl.font-bold {
        font-size: 2rem !important;
    }
    
    /* Navigation arrows styling */
    .absolute.left-2.top-1\/2,
    .absolute.right-2.top-1\/2 {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 1.25rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        backdrop-filter: blur(5px) !important;
    }
    
    /* Dots navigation */
    .flex.justify-center.gap-2.mt-6 {
        margin-top: 1.5rem !important;
        gap: 0.5rem !important;
    }
    
    /* Dot styling */
    .w-2.h-2.rounded-full {
        width: 0.5rem !important;
        height: 0.5rem !important;
        transition: all 0.3s ease !important;
    }
}

/* ===========================================
   RESPONSIVE FIXES FOR TEACHERS PAGE
   =========================================== */

@media (max-width: 480px) {
    /* Teachers page hero section */
    .bg-white.relative.min-h-\[60vh\] {
        min-height: 100vh !important;
        padding-top: 60px !important;
    }
    
    /* Teachers hero content */
    .text-center.px-5.pt-44 {
        padding: 6rem 1rem 2rem 1rem !important;
        text-align: center !important;
    }
    
    /* Teachers main heading */
    .text-5xl.md\:text-6xl {
        font-size: 1.875rem !important; /* 30px */
        line-height: 1.1 !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Teachers buttons container */
    .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
        max-width: 280px !important;
        margin: 0 auto 2rem auto !important;
    }
    
    /* Teacher cards grid */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        max-width: 350px !important;
        margin: 0 auto !important;
    }
    
    /* Individual teacher cards */
    .bg-white.rounded-2xl.border {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Teacher card content */
    .p-6.flex.items-center.gap-4 {
        padding: 1.5rem !important;
        flex-direction: row !important;
        text-align: left !important;
    }
    
    /* Teacher profile images */
    .w-16.h-16.rounded-full {
        width: 4rem !important;
        height: 4rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Teacher names */
    .font-bold.text-lg.uppercase {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    
    /* Teacher score display */
    .text-4xl.font-bold {
        font-size: 2rem !important;
    }
    
    /* Tab buttons container */
    .bg-gray-200.p-0\.5.rounded-full {
        padding: 0.25rem !important;
        margin: 0 auto 2rem auto !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .tab-button {
        padding: 0.5rem 1.5rem !important;
        font-size: 0.875rem !important;
    }
}

/* ===========================================
   MOBILE SLIDER PERFORMANCE OPTIMIZATIONS
   =========================================== */

@media (max-width: 480px) {
    /* Optimize slider performance */
    .flex.transition-transform {
        will-change: transform !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }
    
    /* Smooth scrolling for touch */
    .overflow-hidden {
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }
    
    /* Prevent text selection during swipe */
    .relative.w-full.max-w-\[320px\] {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
    }
    
    /* Touch area optimization */
    .relative.w-full.max-w-\[320px\] * {
        touch-action: pan-x !important;
    }
}

/* ===========================================
   FINAL AGGRESSIVE MOBILE OVERRIDES
   iPhone 14 Pro Max: 428px - FORCE RESPONSIVE
   =========================================== */

/* Target the EXACT HTML structure for mobile */
@media screen and (max-width: 430px) {
    
    /* Force hero section to be mobile - REDUCED HEIGHT */
    div.bg-\[\#f5f9fa\].relative.w-full.h-screen.overflow-hidden {
        height: auto !important; /* Changed from 100vh */
        min-height: 100vh !important; /* Ensure minimum height */
        overflow-x: hidden !important;
        padding-top: 0 !important;
        padding-bottom: 2rem !important; /* Add some bottom padding */
        position: relative !important;
    }
    
    /* Force main content to be mobile positioned WITH MORE SPACE FOR LOGO */
    div.absolute.box-border.flex.flex-col.gap-7[style*="calc"] {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        width: 95% !important;
        margin: 0 auto !important;
        padding: 12rem 1rem 1.5rem 1rem !important; /* Increased top padding */
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Force heading to be mobile sized */
    div.flex.flex-col.font-vk-sans.font-semibold.gap-6 {
        font-size: 1.75rem !important;
        width: 100% !important;
        text-align: center !important;
        gap: 1rem !important;
    }
    
    div.flex.flex-col.font-vk-sans.font-semibold.gap-6 > div {
        font-size: 1.75rem !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Force description to be mobile */
    div.font-normal.font-inter.text-\[\#0b1628\].text-\[14px\] {
        text-align: center !important;
        font-size: 0.875rem !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    
    /* Force buttons to stack */
    div.flex.flex-row.gap-3.items-center.justify-center.w-full {
        flex-direction: column !important;
        gap: 0.75rem !important;
        max-width: 260px !important;
        margin: 0 auto !important;
    }
    
    div.flex.flex-row.gap-3.items-center.justify-center.w-full > div {
        width: 100% !important;
    }
    
    /* AGGRESSIVE 3D logo positioning */
    div.absolute.-right-8,
    div[class*="-right-8"],
    .hero-3d-logo {
        position: absolute !important;
        left: 50% !important;
        top: 6% !important; /* MOVED WAY UP */
        transform: translateX(-50%) translateY(0) !important;
        right: auto !important;
        width: 320px !important;
        height: 320px !important;
        opacity: 0.18 !important;
        z-index: 2 !important;
        margin: 0 !important;
        inset: auto !important;
    }
    
    /* Force All-in-One section to be mobile */
    div.max-w-\[1184px\].mx-auto.px-8 {
        padding: 0 1rem !important;
        max-width: 100% !important;
    }
    
    /* Force section title to be mobile */
    div.box-border.content-stretch.flex.flex-row.font-vk-sans.font-bold {
        flex-direction: column !important;
        font-size: 1.25rem !important;
        text-align: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    /* Force features grid to single column */
    div.flex.flex-row.gap-6.items-center.justify-center {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        justify-items: center !important;
    }
    
    /* Force feature cards to be mobile sized */
    div.bg-\[rgba\(255\,255\,255\,0\.04\)\].h-\[248px\] {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        min-height: 180px !important;
        margin: 0 auto !important;
    }
    
    /* Force feature card content to be relative */
    div.absolute.box-border.flex.flex-col.gap-6.items-center {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        padding: 1rem !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Force solution section to be mobile */
    div.bg-white.relative.w-full.py-20 {
        padding: 2rem 0 !important;
    }
    
    div.max-w-\[1183px\].mx-auto.px-8 {
        padding: 0 1rem !important;
    }
    
    /* Force solution container to stack */
    div.box-border.content-stretch.flex.flex-row.gap-3\.5 {
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        width: 100% !important;
    }
    
    /* Force solution feature column to be mobile */
    div.bg-white.h-full.overflow-clip.relative.rounded-3xl {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        min-height: 200px !important;
        margin: 0 auto !important;
    }
}