/* ============================================================
   VPES SIMS — School Website + Portal Landing Page CSS v4.0
   ============================================================ */

/* === RESET & BASE === */
*{margin:0;padding:0;box-sizing:border-box;}

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --secondary: #8b5cf6;
    --accent: #ec4899;
    --dark: #111827;
    --dark-2: #1f2937;
    --gray: #6b7280;
    --gray-light: #9ca3af;
    --light: #f9fafb;
    --light-2: #f3f4f6;
    --border: #e5e7eb;
    --white: #ffffff;
    --success: #10b981;
    --error: #ef4444;
    --warning: #f59e0b;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
    --radius: 12px;
    --radius-lg: 20px;
}

html{scroll-behavior:smooth;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.6;color:var(--dark);background:var(--white);overflow-x:hidden;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}
input[type="password"]::-ms-reveal,input[type="password"]::-ms-clear{display:none!important;width:0!important;height:0!important;}

/* === TOPBAR === */
.topbar{background:var(--dark-2);padding:0.4rem 0;font-size:0.8rem;}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem;}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:1.25rem;}
.topbar-left span,.topbar-right a{color:rgba(255,255,255,0.75);display:flex;align-items:center;gap:0.4rem;transition:color 0.2s;}
.topbar-right a:hover{color:#fff;}
.topbar-left i,.topbar-right i{font-size:0.75rem;}

/* === HEADER === */
.header{background:var(--white);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--border);}
.header .container{max-width:1540px;padding:0 32px;}
.nav-container{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0;gap:1.5rem;}
.school-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;}
.brand-logo-img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.1));}
.brand-info{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{font-family:'Montserrat',sans-serif;font-size:clamp(0.76rem,1.15vw,1.05rem);font-weight:900;letter-spacing:0.3px;color:#0F172A;white-space:nowrap;}
.brand-name-full{display:inline;}
.brand-name-short{display:none;}
.brand-tag{font-size:clamp(0.58rem,0.75vw,0.68rem);font-weight:600;color:#0E6835;letter-spacing:0.3px;white-space:nowrap;}
.brand-tag-full{display:inline;}
.brand-tag-short{display:none;}

@media (max-width: 540px) {
    .brand-name-full{display:none;}
    .brand-name-short{display:inline;font-size:1.15rem;letter-spacing:0.5px;}
    .brand-tag-full{display:none;}
    .brand-tag-short{display:inline;font-size:0.72rem;}
    .brand-logo-img{width:40px;height:40px;}
    .school-brand{gap:8px;}
}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo img{width:42px;height:42px;object-fit:contain;}
.logo-text{display:flex;flex-direction:column;line-height:1.2;}
.logo-name{font-weight:800;font-size:1.1rem;color:var(--primary);}
.logo-sub{font-size:0.65rem;color:var(--gray);font-weight:500;white-space:nowrap;}
.nav-menu{display:flex;align-items:center;gap:0.25rem;}
.nav-menu li{display:flex;}
.nav-link{color:var(--dark-2);font-weight:500;font-size:0.9rem;padding:0.5rem 0.75rem;border-radius:8px;transition:all 0.2s;white-space:nowrap;}
.nav-link:hover,.nav-link.active{color:#0E6835;background:rgba(14,104,53,0.07);}
.nav-dashboard-link{color:#0E6835!important;font-weight:600;}
.enroll-btn-container{display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
.login-btn{display:inline-flex;align-items:center;color:#0E6835!important;font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.85rem;padding:0.5rem 1.25rem;border-radius:9999px;border:1.5px solid #0E6835;background:transparent;transition:all 0.25s ease;text-transform:uppercase;letter-spacing:0.4px;}
.login-btn:hover{background-color:rgba(14,104,53,0.08);color:#07421E!important;border-color:#07421E;transform:translateY(-2px);}
.enroll-btn{display:inline-flex;align-items:center;gap:0.5rem;background-color:#0E6835;color:#FFFFFF!important;font-family:'Montserrat',sans-serif;font-size:0.85rem;font-weight:800;letter-spacing:0.5px;padding:0.55rem 1.4rem;border-radius:9999px;box-shadow:0 4px 14px rgba(14,104,53,0.28);transition:all 0.25s ease;text-transform:uppercase;}
.enroll-btn:hover{background-color:#07421E;transform:translateY(-2px);box-shadow:0 6px 18px rgba(14,104,53,0.38);}
/* === AUTHENTICATED NAV === */
.auth-nav{display:flex;align-items:center;gap:0.5rem;flex-shrink:0;position:relative;}

/* Clickable user pill that triggers dropdown */
.user-profile{display:inline-flex;align-items:center;gap:0.65rem;padding:0.35rem 0.85rem 0.35rem 0.45rem;border-radius:9999px;cursor:pointer;background:#FFFFFF;border:1.5px solid #E2E8F0;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:all 0.25s cubic-bezier(0.4,0,0.2,1);max-width:220px;user-select:none;}
.user-profile:hover{background:#F0FDF4;border-color:rgba(14,104,53,0.35);box-shadow:0 4px 14px rgba(14,104,53,0.1);transform:translateY(-1px);}
.user-profile.open{background:#F0FDF4;border-color:#0E6835;box-shadow:0 0 0 3px rgba(14,104,53,0.15);}
.user-avatar{width:32px;height:32px;background:linear-gradient(135deg,#0E6835 0%,#07421E 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(14,104,53,0.3);border:1.5px solid #FFFFFF;}
.user-avatar i{font-size:0.95rem;color:#FFFFFF;}
.user-info{display:flex;flex-direction:column;min-width:0;}
.user-info span:first-child{font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0F172A;}
.user-email{display:none;}
.user-profile::after{content:'\f107';font-family:'Font Awesome 6 Free';font-weight:900;font-size:0.72rem;color:#0E6835;margin-left:2px;flex-shrink:0;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);}
.user-profile.open::after{transform:rotate(180deg);}

/* User Dropdown Menu Card */
.user-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:#FFFFFF;border:1.5px solid #E2E8F0;border-radius:18px;box-shadow:0 16px 36px -4px rgba(0,0,0,0.12),0 4px 12px rgba(14,104,53,0.06);min-width:235px;max-width:280px;z-index:1050;opacity:0;visibility:hidden;transform:translateY(-8px) scale(0.97);transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);pointer-events:none;overflow:hidden;}
.user-dropdown.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:all;}
.user-dropdown-header{display:flex;align-items:center;gap:0.75rem;padding:1rem 1.15rem;background:linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);border-bottom:1px solid #F1F5F9;}
.dropdown-header-avatar{width:36px;height:36px;border-radius:10px;background:rgba(14,104,53,0.1);color:#0E6835;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.dropdown-header-text{min-width:0;flex:1;}
.user-dropdown-name{font-family:'Montserrat',sans-serif;font-weight:800;font-size:0.88rem;color:#0F172A;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.user-dropdown-email{font-size:0.76rem;color:#64748B;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;font-weight:500;}
.user-dropdown-body{padding:0.5rem;}
.user-dropdown-item{display:flex;align-items:center;gap:0.65rem;padding:0.6rem 0.85rem;border-radius:10px;font-family:'Montserrat',sans-serif;font-size:0.82rem;font-weight:700;color:#334155;cursor:pointer;transition:all 0.2s ease;border:none;background:none;width:100%;text-align:left;text-decoration:none;}
.user-dropdown-item:hover{background:#F8FAFC;color:#0F172A;}
.user-dropdown-item i{width:18px;text-align:center;color:#64748B;font-size:0.85rem;transition:color 0.2s ease;}
.user-dropdown-divider{height:1px;background:#F1F5F9;margin:4px 0;}
.user-dropdown-item.logout-item{color:#DC2626;margin-top:0.15rem;}
.user-dropdown-item.logout-item i{color:#DC2626;}
.user-dropdown-item.logout-item:hover{background:#FEF2F2;color:#B91C1C;transform:translateX(2px);}
.user-dropdown-item.logout-item:hover i{color:#B91C1C;}

.logout-btn{display:none;}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:0.4rem;}
.hamburger span{width:24px;height:2.5px;background:var(--dark);border-radius:3px;transition:all 0.3s;}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(7px,7px);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px);}

/* === MOBILE MENU === */
.mobile-menu{position:fixed;top:0;left:-100%;width:290px;height:100vh;height:100dvh;background:var(--white);z-index:1100;transition:left 0.35s ease;box-shadow:4px 0 20px rgba(0,0,0,0.15);display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;}
.mobile-menu.active{left:0;}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1099;backdrop-filter:blur(2px);}
.mobile-overlay.active{display:block;}
.mobile-menu-content{padding:1.5rem 0 0 0;height:100%;width:100%;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;}
.mobile-nav-menu{padding:0 1rem;flex:1;overflow-y:auto;list-style:none;}
.mobile-nav-link{display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;color:var(--dark-2);font-weight:500;border-radius:10px;transition:all 0.2s;margin-bottom:0.35rem;}
.mobile-nav-link:hover{color:#0E6835;background:rgba(14,104,53,0.07);}
.mobile-nav-link i{width:20px;text-align:center;color:#0E6835;}
.mobile-auth-footer{flex-shrink:0;margin-top:auto;padding:16px 16px 24px 16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;background:#F8FAFC;box-sizing:border-box;}
#mobileGuestNavigation[style*="display: none"],#mobileGuestNavigation[style*="display:none"],.mobile-auth-footer[style*="display: none"],.mobile-auth-footer[style*="display:none"]{display:none!important;}
.mobile-login-btn{display:flex;align-items:center;justify-content:center;gap:0.6rem;padding:0.78rem 1rem;border:1.5px solid #0E6835;border-radius:9999px;color:#0E6835;font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.4px;transition:all 0.2s ease;background:transparent;text-decoration:none;margin:0 0 8px 0;}
.mobile-login-btn:hover{background:rgba(14,104,53,0.08);color:#07421E;}
.mobile-enroll-btn{display:flex;align-items:center;justify-content:center;gap:0.6rem;background-color:#0E6835;color:var(--white)!important;font-family:'Montserrat',sans-serif;padding:0.82rem 1rem;border-radius:9999px;font-weight:800;font-size:0.85rem;text-align:center;text-transform:uppercase;letter-spacing:0.5px;box-shadow:0 4px 14px rgba(14,104,53,0.28);transition:all 0.2s ease;text-decoration:none;margin:0;}
.mobile-enroll-btn:hover{background-color:#07421E;transform:translateY(-2px);box-shadow:0 6px 18px rgba(14,104,53,0.38);}

/* Mobile Authenticated Profile Card */
.mobile-auth-card{background:#F8FAFC;border-top:1px solid var(--border);padding:14px 16px 20px 16px;margin-top:auto;flex-shrink:0;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;}
#mobileAuthenticatedNavigation[style*="display: none"],#mobileAuthenticatedNavigation[style*="display:none"],.mobile-auth-card[style*="display: none"],.mobile-auth-card[style*="display:none"]{display:none!important;}
.mobile-user-profile-box{display:flex;align-items:center;gap:12px;background:#FFFFFF;padding:10px 12px;border-radius:14px;border:1px solid #E2E8F0;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
.mobile-auth-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#0E6835 0%,#07421E 100%);display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:1rem;flex-shrink:0;box-shadow:0 2px 6px rgba(14,104,53,0.25);border:1.5px solid #FFFFFF;}
.mobile-user-details{display:flex;flex-direction:column;min-width:0;flex:1;}
.mobile-user-name{display:block;font-family:'Montserrat',sans-serif;font-size:0.88rem;font-weight:800;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.mobile-user-email{display:block;font-size:0.76rem;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;font-weight:500;}
.mobile-logout-btn{display:flex;align-items:center;justify-content:center;gap:0.6rem;background:#FEF2F2;color:#DC2626;border:1px solid #FEE2E2;padding:0.75rem 1rem;border-radius:9999px;width:100%;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:800;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.4px;transition:all 0.2s ease;}
.mobile-logout-btn:hover{background:#DC2626;color:#FFFFFF;border-color:#DC2626;transform:translateY(-1px);box-shadow:0 4px 12px rgba(220,38,38,0.25);}

/* === MESSAGES === */
.message{padding:1rem;border-radius:10px;font-size:0.9rem;font-weight:500;margin-bottom:0.5rem;}
.loading{color:var(--primary);background:rgba(99,102,241,0.1);display:flex;align-items:center;gap:0.75rem;}
.error-message{background:#fef2f2;color:var(--error);border:1px solid #fecaca;}
.success-message{background:#f0fdf4;color:var(--success);border:1px solid #bbf7d0;}

/* === SECTION SHARED (VPES Institutional Theme) === */
.section-header{text-align:center;margin-bottom:2.75rem;}
.section-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(14,104,53,0.08);color:#0E6835;border:1px solid rgba(14,104,53,0.2);padding:0.4rem 1.15rem;border-radius:9999px;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:0.85rem;}
.section-title{font-family:'Montserrat',sans-serif;font-size:clamp(1.85rem,3.2vw,2.35rem);font-weight:800;color:#0F172A;line-height:1.25;margin-bottom:0.85rem;letter-spacing:-0.5px;}
.section-title.left{text-align:left;}
.section-subtitle{color:#64748B;font-size:1rem;line-height:1.6;max-width:620px;margin:0 auto;}

/* === HERO SECTION (VPES Modern Wave & Vector Design) === */
.hero-section {
    position: relative;
    min-height: calc(100vh - 72px);
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #ffffff;
}

.hero-artwork-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    padding: 100px 32px 40px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-text-block {
    max-width: 580px;
    color: #ffffff;
    animation: heroFadeIn 0.8s ease-out;
    flex-shrink: 0;
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Academic Pill Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #FDE68A;
    margin-bottom: 18px;
}

.badge-dot {
    width: 7px;
    height: 7px;
    background-color: #F59E0B;
    border-radius: 50%;
    box-shadow: 0 0 8px #F59E0B;
}

/* Hero Titles */
.hero-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 18px;
    line-height: 1.05;
}

.title-solid {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(38px, 4.4vw, 58px);
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-transform: uppercase;
}

.title-outline {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(38px, 4.4vw, 58px);
    font-weight: 900;
    letter-spacing: 1.5px;
    color: transparent;
    -webkit-text-stroke: 2.2px #ffffff;
    text-stroke: 2.2px #ffffff;
    text-transform: uppercase;
    position: relative;
    top: -2px;
}

/* Hero Subtitle */
.hero-subtitle {
    font-size: clamp(14px, 1.05vw, 15.5px);
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 32px;
    max-width: 500px;
}

/* Hero Buttons */
.hero-buttons {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 36px;
}

/* Enroll Badge (Clean Bubble Pill) */
.enroll-badge-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Premium Subtle Shaking & Pulse Animation */
@keyframes heroBadgePulse {
    0%, 70%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    74% {
        transform: translateY(-3px) rotate(-2.5deg) scale(1.03);
    }
    78% {
        transform: translateY(-3px) rotate(2.5deg) scale(1.03);
    }
    82% {
        transform: translateY(-1px) rotate(-1.5deg) scale(1.02);
    }
    86% {
        transform: translateY(0) rotate(1.5deg) scale(1.01);
    }
    90% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

.enroll-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #ffffff;
    color: #07421E;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 900;
    letter-spacing: 0.6px;
    padding: 12px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: heroBadgePulse 5s ease-in-out infinite;
    cursor: pointer;
}

.bubble-tail {
    position: absolute;
    bottom: -6px;
    left: 18px;
    width: 0;
    height: 0;
    border-left: 8px solid #ffffff;
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transition: border-left-color 0.25s ease;
}

.enroll-badge:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 0 2px #F59E0B;
    color: #042913;
    animation-play-state: paused;
}

.enroll-badge:active {
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.enroll-subtext {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

/* Call Info */
.call-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 3px;
}

.call-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.call-number {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.call-number:hover {
    color: #FDE68A;
    transform: translateX(2px);
}

.phone-icon {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero Stats Section */
.hero-stats {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 20px;
    border-radius: 14px;
    backdrop-filter: blur(8px);
    width: fit-content;
}

.hero-stat {
    text-align: center;
}

.hero-stat-number {
    display: block;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
}

.hero-stat-label {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

.hero-stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
}

/* Right Illustration Display (Large & Prominent) */
.hero-illustration-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 720px;
    width: 100%;
    flex: 1;
    animation: floatHeroArt 4.5s ease-in-out infinite alternate;
}

.vector-glow-backdrop {
    position: absolute;
    width: 95%;
    height: 95%;
    background: radial-gradient(circle, rgba(253, 230, 138, 0.3) 0%, rgba(245, 158, 11, 0.12) 50%, transparent 75%);
    border-radius: 50%;
    filter: blur(35px);
    z-index: 1;
    pointer-events: none;
}

@keyframes floatHeroArt {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-14px) rotate(1deg); }
}

.school-vector-art {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    max-height: 660px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 24px 45px rgba(0, 0, 0, 0.28));
    transition: transform 0.3s ease;
}

.school-vector-art:hover {
    transform: scale(1.03);
}

@media(max-width: 1200px) {
    .header .container { padding: 0 24px; }
    .hero-content { padding: 80px 24px 40px 24px; gap: 30px; }
    .hero-illustration-wrapper { max-width: 500px; }
    .school-vector-art { max-height: 460px; }
}

@media(max-width: 992px) {
    .header .container { padding: 0 20px; }
    .hero-section {
        background: linear-gradient(175deg, #073B1D 0%, #0E6835 40%, #0A5229 70%, #042412 100%);
        min-height: auto;
        padding-bottom: 30px;
    }
    .hero-artwork-container {
        opacity: 0.35;
    }
    .hero-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 50px 20px 40px 20px;
        gap: 30px;
    }
    .hero-text-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 100%;
    }
    .hero-badge {
        margin-bottom: 14px;
    }
    .hero-title {
        align-items: center;
        text-align: center;
        margin-bottom: 14px;
    }
    .title-solid,
    .title-outline {
        font-size: clamp(26px, 6.5vw, 44px);
    }
    .hero-subtitle {
        text-align: center;
        margin-bottom: 24px;
        font-size: 14px;
    }
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
        margin-bottom: 26px;
    }
    .enroll-badge-wrapper {
        align-items: center;
    }
    .call-info {
        align-items: center;
        text-align: center;
    }
    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 20px;
        width: 100%;
        max-width: 380px;
        padding: 14px 18px;
        justify-items: center;
    }
    .hero-stat {
        text-align: center;
    }
    .hero-stat-divider {
        display: none;
    }
    .hero-stat-number {
        font-size: 1.25rem;
    }
    .hero-stat-label {
        font-size: 11px;
    }
    .hero-illustration-wrapper {
        max-width: 360px;
        margin-top: 10px;
    }
    .school-vector-art {
        max-height: 340px;
    }
}

@media(max-width: 768px) {
    .hero-illustration-wrapper {
        display: none !important;
    }
}

@media(max-width: 540px) {
    .hero-content {
        padding: 38px 16px 32px 16px;
        gap: 22px;
    }
    .hero-badge {
        padding: 5px 12px;
        font-size: 10px;
        letter-spacing: 0.5px;
    }
    .title-solid,
    .title-outline {
        font-size: clamp(22px, 7vw, 32px);
    }
    .title-outline {
        -webkit-text-stroke: 1.5px #ffffff;
        text-stroke: 1.5px #ffffff;
    }
    .hero-subtitle {
        font-size: 13px;
        line-height: 1.55;
        margin-bottom: 20px;
    }
    .hero-buttons {
        gap: 16px;
        margin-bottom: 22px;
    }
    .enroll-badge {
        padding: 12px 30px;
        font-size: 14px;
    }
    .hero-stats {
        max-width: 330px;
        gap: 10px 14px;
        padding: 12px 14px;
    }
    .hero-stat-number {
        font-size: 1.15rem;
    }
    .hero-illustration-wrapper {
        max-width: 260px;
    }
    .school-vector-art {
        max-height: 240px;
    }
}

/* === SYSTEM SECTION (VPES Modern Institutional Theme) === */
.system-section{padding:3.5rem 0 4.5rem 0;background:#F8FAFC;position:relative;border-bottom:1px solid #E2E8F0;}
.system-section .container{max-width:1320px;padding:0 24px;}
.system-section .section-header{text-align:center;margin-bottom:2.75rem;}
.system-section .section-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(14,104,53,0.08);color:#0E6835;border:1px solid rgba(14,104,53,0.2);padding:0.4rem 1.15rem;border-radius:9999px;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:0.85rem;}
.system-section .section-title{font-family:'Montserrat',sans-serif;font-size:clamp(1.85rem,3.2vw,2.35rem);font-weight:800;color:#0F172A;line-height:1.25;margin-bottom:0.85rem;letter-spacing:-0.5px;}
.system-section .section-subtitle{color:#64748B;font-size:1rem;line-height:1.6;max-width:620px;margin:0 auto;}

.system-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:3rem;}
.system-card{background:#FFFFFF;padding:1.25rem 1.25rem 1.75rem 1.25rem;border-radius:18px;box-shadow:0 4px 20px rgba(0,0,0,0.04),0 1px 3px rgba(0,0,0,0.02);border:1.5px solid #F1F5F9;transition:all 0.35s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;position:relative;}
.system-card:hover{transform:translateY(-8px);box-shadow:0 20px 30px -10px rgba(14,104,53,0.15),0 8px 16px -4px rgba(0,0,0,0.04);border-color:rgba(14,104,53,0.35);}
.system-card-img-wrap{position:relative;height:160px;border-radius:12px;overflow:hidden;margin-bottom:1.35rem;background:#E2E8F0;}
.system-card-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.45s ease;}
.system-card:hover .system-card-img-wrap img{transform:scale(1.08);}
.system-card-icon-badge{position:absolute;bottom:-12px;right:14px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:1.05rem;box-shadow:0 4px 14px rgba(0,0,0,0.22);border:3px solid #FFFFFF;transition:transform 0.3s ease;}
.system-card:hover .system-card-icon-badge{transform:scale(1.1) rotate(5deg);}
.system-card h3{font-family:'Montserrat',sans-serif;font-size:1.12rem;font-weight:700;color:#0F172A;margin-top:0.5rem;margin-bottom:0.6rem;line-height:1.35;}
.system-card p{color:#64748B;font-size:0.88rem;line-height:1.55;flex:1;}

.system-cta{display:flex;gap:1.25rem;justify-content:center;align-items:center;flex-wrap:wrap;}
.btn-primary-outline{display:inline-flex;align-items:center;gap:0.65rem;background:#0E6835;color:#FFFFFF!important;font-family:'Montserrat',sans-serif;font-weight:800;font-size:0.92rem;text-transform:uppercase;letter-spacing:0.4px;padding:0.85rem 2rem;border-radius:9999px;box-shadow:0 6px 18px rgba(14,104,53,0.28);transition:all 0.25s ease;text-decoration:none;}
.btn-primary-outline:hover{background:#07421E;transform:translateY(-2px);box-shadow:0 8px 24px rgba(14,104,53,0.38);color:#FFFFFF!important;}
.btn-secondary-outline{display:inline-flex;align-items:center;gap:0.65rem;background:#FFFFFF;color:#0E6835!important;font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.92rem;text-transform:uppercase;letter-spacing:0.4px;padding:0.82rem 1.85rem;border-radius:9999px;border:1.5px solid #0E6835;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:all 0.25s ease;text-decoration:none;}
.btn-secondary-outline:hover{background:rgba(14,104,53,0.08);color:#07421E!important;transform:translateY(-2px);}

/* === ABOUT SECTION (VPES Modern Institutional Theme) === */
.about-section{padding:5rem 0;background:#FFFFFF;position:relative;}
.about-grid{display:grid;grid-template-columns:1.05fr 1.15fr;gap:4.5rem;align-items:center;max-width:1320px;margin:0 auto;padding:0 24px;}
.about-image-wrapper{position:relative;border-radius:24px;}
.about-image{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 20px 40px -15px rgba(14,104,53,0.2),0 8px 16px -6px rgba(0,0,0,0.08);border:3px solid #FFFFFF;}
.about-image img{width:100%;height:480px;object-fit:cover;display:block;transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);}
.about-image-wrapper:hover .about-image img{transform:scale(1.04);}
.about-image-badge{position:absolute;bottom:-18px;right:-14px;background:linear-gradient(135deg,#0E6835 0%,#07421E 100%);color:#FFFFFF;padding:0.9rem 1.35rem;border-radius:18px;box-shadow:0 12px 28px -6px rgba(14,104,53,0.4),0 4px 10px rgba(0,0,0,0.05);display:flex;align-items:center;gap:0.85rem;border:2px solid #F59E0B;z-index:5;}
.badge-icon-wrap{width:44px;height:44px;background:rgba(245,158,11,0.2);border:1.5px solid #F59E0B;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#FCD34D;flex-shrink:0;}
.about-image-badge strong{display:block;font-family:'Montserrat',sans-serif;font-size:0.92rem;font-weight:800;color:#FFFFFF;letter-spacing:0.3px;margin-bottom:2px;}
.about-image-badge span{font-size:0.76rem;color:#FDE68A;font-weight:600;}
.about-content .section-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(14,104,53,0.08);color:#0E6835;border:1px solid rgba(14,104,53,0.2);padding:0.4rem 1.15rem;border-radius:9999px;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:0.85rem;}
.about-title{font-family:'Montserrat',sans-serif;font-size:clamp(1.85rem,3vw,2.35rem);font-weight:800;color:#0F172A;line-height:1.25;margin-bottom:0.5rem;letter-spacing:-0.5px;}
.about-subtitle{color:#0E6835;font-weight:700;font-size:0.95rem;margin-bottom:1.15rem;display:flex;align-items:center;gap:0.4rem;}
.about-text{color:#64748B;margin-bottom:1rem;line-height:1.7;font-size:0.95rem;}
.vm-cards{display:flex;flex-direction:column;gap:0.9rem;margin:1.6rem 0;}
.vm-card{display:flex;gap:1rem;padding:1.1rem 1.25rem;border-radius:14px;background:#F8FAFC;border:1px solid #E2E8F0;transition:all 0.25s ease;}
.vm-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.05);border-color:rgba(14,104,53,0.3);}
.vm-vision{background:#F8FAFC;border:1px solid #E2E8F0;}
.vm-mission{background:#F8FAFC;border:1px solid #E2E8F0;}
.vm-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.vm-vision .vm-icon{background:rgba(14,104,53,0.12);color:#0E6835;}
.vm-mission .vm-icon{background:rgba(217,119,6,0.12);color:#D97706;}
.vm-card strong{display:block;font-family:'Montserrat',sans-serif;font-size:0.92rem;font-weight:800;color:#0F172A;margin-bottom:0.25rem;}
.vm-card p{color:#475569;font-size:0.86rem;margin:0;line-height:1.5;}
.about-highlights{display:grid;grid-template-columns:repeat(2,1fr);gap:0.85rem;margin-top:1.25rem;}
.highlight-item{display:flex;align-items:center;gap:0.75rem;padding:0.7rem 1rem;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;font-weight:700;font-size:0.88rem;color:#1E293B;transition:all 0.25s ease;}
.highlight-item:hover{background:#F0FDF4;border-color:rgba(14,104,53,0.25);transform:translateY(-2px);box-shadow:0 4px 12px rgba(14,104,53,0.08);}
.hl-icon{width:32px;height:32px;border-radius:8px;background:rgba(14,104,53,0.1);color:#0E6835;display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0;}

/* === PROGRAMS / GRADE LEVELS === */
.programs-section{padding:5rem 0;background:#F8FAFC;position:relative;border-top:1px solid #E2E8F0;border-bottom:1px solid #E2E8F0;}
.grades-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:1.25rem;}
.grade-card{background:#FFFFFF;border-radius:18px;padding:1.6rem 1rem;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,0.03);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border:1.5px solid #F1F5F9;display:flex;flex-direction:column;align-items:center;}
.grade-card:hover{transform:translateY(-8px);box-shadow:0 18px 30px -10px rgba(14,104,53,0.18);border-color:rgba(14,104,53,0.35);}
.grade-icon{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem;font-size:1.55rem;color:#FFFFFF;box-shadow:0 8px 18px rgba(0,0,0,0.12);transition:transform 0.3s ease;}
.grade-card:hover .grade-icon{transform:scale(1.1) rotate(4deg);}
.grade-card h3{font-family:'Montserrat',sans-serif;font-size:1.05rem;font-weight:800;color:#0F172A;margin-bottom:0.25rem;}
.grade-card p{color:#64748B;font-size:0.8rem;margin-bottom:0.85rem;font-weight:500;}
.grade-tag{display:inline-block;padding:0.25rem 0.65rem;border-radius:9999px;font-size:0.72rem;font-weight:700;letter-spacing:0.3px;margin-top:auto;}
.tag-foundation{background:rgba(14,104,53,0.1);color:#0E6835;}
.tag-primary{background:rgba(2,132,199,0.1);color:#0284C7;}
.tag-intermediate{background:rgba(217,119,6,0.1);color:#D97706;}

/* === REQUIREMENTS SECTION === */
.requirements-section{padding:5.5rem 0;background:#FFFFFF;position:relative;}
.steps-row{display:flex;align-items:center;justify-content:center;gap:0.75rem;margin-bottom:3.5rem;flex-wrap:wrap;}
.step-card{text-align:center;padding:1.75rem 1.25rem;background:#F8FAFC;border-radius:18px;width:185px;position:relative;border:1.5px solid #F1F5F9;transition:all 0.3s ease;}
.step-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(14,104,53,0.1);border-color:rgba(14,104,53,0.3);}
.step-num{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#0E6835;color:#FFFFFF;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:800;border:2px solid #FFFFFF;box-shadow:0 4px 10px rgba(14,104,53,0.35);}
.step-icon{font-size:1.75rem;color:#0E6835;margin-bottom:0.85rem;margin-top:0.4rem;display:flex;align-items:center;justify-content:center;}
.step-card h4{font-family:'Montserrat',sans-serif;font-size:0.95rem;font-weight:800;color:#0F172A;margin-bottom:0.4rem;}
.step-card p{color:#64748B;font-size:0.8rem;line-height:1.5;margin:0;}
.step-arrow{color:#0E6835;font-size:1.25rem;opacity:0.6;}

/* Requirements Table */
.requirements-table{border-radius:18px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.06);border:1.5px solid #E2E8F0;margin-top:2.5rem;background:#FFFFFF;}
.table-header{display:grid;grid-template-columns:1.2fr 2fr 2.8fr;background:linear-gradient(135deg,#0E6835,#07421E);color:#FFFFFF;padding:1.15rem 1.5rem;font-family:'Montserrat',sans-serif;font-weight:800;font-size:0.84rem;text-transform:uppercase;letter-spacing:0.8px;gap:1.25rem;border-bottom:2px solid #F59E0B;}
.table-row{display:grid;grid-template-columns:1.2fr 2fr 2.8fr;gap:1.25rem;padding:1.35rem 1.5rem;border-bottom:1px solid #F1F5F9;transition:background 0.2s ease;align-items:center;}
.table-row:last-child{border-bottom:none;}
.table-row:hover{background:#F8FAFC;}
.level-cell{font-family:'Montserrat',sans-serif;font-weight:800;color:#0E6835;font-size:0.95rem;display:flex;align-items:center;gap:0.5rem;}
.level-cell i{color:#F59E0B;font-size:0.9rem;}
.eligibility-cell,.documents-cell{color:#475569;font-size:0.9rem;line-height:1.65;}
.documents-cell ul{padding-left:1.2rem;list-style:disc;margin:0;}
.documents-cell li{margin-bottom:0.35rem;}
.highlight-text{background:rgba(245,158,11,0.15);color:#B45309;padding:0.15rem 0.45rem;border-radius:4px;font-weight:700;}

/* Requirements CTA Banner */
.requirements-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-top:3rem;padding:2.25rem 2.75rem;background:linear-gradient(135deg,#F0FDF4,#FEFCE8);border-radius:20px;border:1.5px solid rgba(14,104,53,0.2);box-shadow:0 8px 24px rgba(14,104,53,0.06);flex-wrap:wrap;}
.req-cta-text h3{font-family:'Montserrat',sans-serif;font-size:1.35rem;font-weight:800;color:#0F172A;margin-bottom:0.35rem;}
.req-cta-text p{color:#475569;margin:0;font-size:0.95rem;}
.btn-primary-enroll{display:inline-flex;align-items:center;gap:0.75rem;background:#0E6835;color:#FFFFFF!important;padding:0.95rem 2.25rem;border-radius:9999px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:0.95rem;text-transform:uppercase;letter-spacing:0.4px;box-shadow:0 6px 20px rgba(14,104,53,0.32);transition:all 0.25s ease;text-decoration:none;}
.btn-primary-enroll:hover{background:#07421E;transform:translateY(-2px);box-shadow:0 8px 26px rgba(14,104,53,0.42);color:#FFFFFF!important;}

/* === NEWS CAROUSEL === */
.news-section{padding:5.5rem 0;background:#F8FAFC;border-top:1px solid #E2E8F0;}
.news-carousel-wrap{display:flex;align-items:center;gap:1.25rem;}
.news-track{display:grid;flex:1;min-width:0;}
.news-card{grid-area:1/1;display:flex;flex-direction:row;background:#FFFFFF;border-radius:22px;overflow:hidden;border:1.5px solid #E2E8F0;opacity:0;pointer-events:none;transition:all 0.5s ease;box-shadow:0 6px 24px rgba(0,0,0,0.04);}
.news-card.nc-active{opacity:1;pointer-events:auto;box-shadow:0 16px 36px -10px rgba(14,104,53,0.18);border-color:rgba(14,104,53,0.3);}
.news-img-wrap{position:relative;width:44%;flex-shrink:0;overflow:hidden;min-height:320px;background:#0E6835;}
.news-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s ease;}
.news-card.nc-active:hover .news-img{transform:scale(1.06);}
.news-category{position:absolute;top:16px;left:16px;background:rgba(4,36,18,0.85);color:#FFFFFF;padding:0.35rem 0.85rem;border-radius:9999px;font-family:'Montserrat',sans-serif;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);}
.news-body{flex:1;padding:2.5rem 2.75rem;display:flex;flex-direction:column;justify-content:center;}
.news-date{display:inline-flex;align-items:center;gap:0.45rem;color:#0E6835;font-weight:700;font-size:0.82rem;margin-bottom:0.85rem;background:rgba(14,104,53,0.08);padding:0.25rem 0.65rem;border-radius:6px;align-self:flex-start;}
.news-card h3{font-family:'Montserrat',sans-serif;font-size:1.3rem;font-weight:800;color:#0F172A;margin-bottom:0.85rem;line-height:1.4;}
.news-card p{color:#64748B;font-size:0.92rem;line-height:1.7;margin-bottom:1.5rem;}
.news-read-more{display:inline-flex;align-items:center;gap:0.5rem;color:#0E6835;font-family:'Montserrat',sans-serif;font-weight:800;font-size:0.88rem;text-transform:uppercase;letter-spacing:0.4px;transition:all 0.25s ease;align-self:flex-start;text-decoration:none;}
.news-read-more:hover{color:#07421E;gap:0.8rem;}
.nc-btn{background:#FFFFFF;border:1.5px solid #E2E8F0;color:#0F172A;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.25s ease;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,0.06);font-size:1.05rem;}
.nc-btn:hover{background:#0E6835;color:#FFFFFF;border-color:#0E6835;box-shadow:0 6px 16px rgba(14,104,53,0.3);transform:scale(1.06);}
.news-dots{display:flex;justify-content:center;gap:0.65rem;margin-top:1.75rem;}
.news-dot{width:10px;height:10px;border-radius:50%;border:none;background:#CBD5E1;cursor:pointer;transition:all 0.3s ease;padding:0;}
.news-dot.nc-dot-active{background:#0E6835;width:28px;border-radius:9999px;}

/* === CONTACT SECTION === */
.contact-section{padding:5.5rem 0;background:#FFFFFF;position:relative;border-top:1px solid #E2E8F0;}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4.5rem;align-items:start;max-width:1320px;margin:0 auto;padding:0 24px;}
.contact-details{display:flex;flex-direction:column;gap:1.35rem;margin:2rem 0;}
.contact-row{display:flex;gap:1.15rem;align-items:flex-start;}
.contact-icon-box{width:48px;height:48px;background:#F0FDF4;color:#0E6835;border:1px solid rgba(14,104,53,0.18);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;box-shadow:0 4px 12px rgba(14,104,53,0.08);}
.contact-row > div strong{display:block;font-family:'Montserrat',sans-serif;font-size:0.8rem;text-transform:uppercase;color:#64748B;letter-spacing:0.8px;margin-bottom:0.25rem;font-weight:800;}
.contact-row > div span,.contact-row > div a{color:#0F172A;font-size:0.95rem;font-weight:600;text-decoration:none;transition:color 0.2s ease;}
.contact-row > div a:hover{color:#0E6835;}
.contact-map-wrap{border-radius:24px;overflow:hidden;box-shadow:0 18px 40px -15px rgba(0,0,0,0.12);height:420px;border:2px solid #FFFFFF;outline:1.5px solid #E2E8F0;}
.social-links{display:flex;gap:0.85rem;margin-top:1rem;}
.social-link{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all 0.25s ease;color:#FFFFFF;box-shadow:0 4px 12px rgba(0,0,0,0.1);text-decoration:none;}
.social-link.facebook{background:#1877F2;}
.social-link.email{background:#0E6835;}
.social-link.phone{background:#D97706;}
.social-link:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,0.18);color:#FFFFFF;}

/* === FOOTER === */
.footer{background:linear-gradient(175deg,#042412 0%,#02180C 100%);color:#FFFFFF;padding:4.5rem 0 0;position:relative;border-top:3px solid #0E6835;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr 1.4fr;gap:3rem;padding-bottom:3.5rem;border-bottom:1px solid rgba(255,255,255,0.1);max-width:1320px;margin:0 auto;padding-left:24px;padding-right:24px;}
.footer-logo{display:flex;align-items:center;gap:0.85rem;margin-bottom:1.25rem;}
.footer-logo img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3));}
.footer-logo strong{display:block;font-family:'Montserrat',sans-serif;color:#FFFFFF;font-size:0.98rem;font-weight:800;line-height:1.3;}
.footer-logo span{color:#FDE68A;font-size:0.76rem;font-weight:600;}
.footer-brand p{color:rgba(255,255,255,0.7);font-size:0.88rem;line-height:1.75;margin-bottom:1.5rem;max-width:380px;}
.footer-brand .social-links{margin-top:0;}
.footer-col h4{font-family:'Montserrat',sans-serif;color:#FFFFFF;font-size:0.92rem;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:1.35rem;padding-bottom:0.75rem;border-bottom:1px solid rgba(255,255,255,0.12);}
.footer-col a{display:block;color:rgba(255,255,255,0.7);font-size:0.88rem;margin-bottom:0.75rem;transition:all 0.2s ease;text-decoration:none;}
.footer-col a:hover{color:#34D399;transform:translateX(4px);}
.footer-contact-item{display:flex;gap:0.85rem;align-items:flex-start;margin-bottom:1rem;}
.footer-contact-item i{color:#F59E0B;font-size:0.9rem;margin-top:4px;flex-shrink:0;width:16px;}
.footer-contact-item span,.footer-contact-item a{color:rgba(255,255,255,0.7);font-size:0.88rem;line-height:1.6;text-decoration:none;transition:color 0.2s ease;}
.footer-contact-item a:hover{color:#34D399;}
.footer-bottom{padding:1.5rem 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem;max-width:1320px;margin:0 auto;}
.footer-bottom p{color:rgba(255,255,255,0.5);font-size:0.82rem;margin:0;}
.footer-bottom strong{color:#34D399;}

/* Welcome message */
.welcome-section{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1.5rem;color:#fff;backdrop-filter:blur(10px);}

/* === SPINNER === */
.spinner{width:20px;height:20px;border:2px solid rgba(99,102,241,0.3);border-top-color:var(--primary);border-radius:50%;animation:spin 0.6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* =========================================
   RESPONSIVE
   ========================================= */

/* === 1024px — Tablet === */
@media (max-width: 1024px) {
    .about-grid{grid-template-columns:1fr;}
    .about-image-badge{bottom:-15px;right:-10px;}
    .contact-grid{grid-template-columns:1fr;}
    .contact-map-wrap{height:300px;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .news-carousel-wrap{gap:0.5rem;}
    .system-cards{grid-template-columns:1fr 1fr;}

    /* Reduce section padding on tablet */
    .about-section,.programs-section,.requirements-section,.news-section,.contact-section{padding:4rem 0;}
    .system-section{padding:1.5rem 0 3.5rem 0;}
    .footer{padding:3rem 0 0;}
    .footer-grid{padding-bottom:2.5rem;}
}

/* === 768px — Mobile === */
@media (max-width: 768px) {
    /* Hide topbar and desktop nav */
    .topbar{display:none;}
    .nav-menu,.enroll-btn-container,.auth-nav{display:none !important;}
    .hamburger{display:flex;}
    .logo-sub{display:none;}

    /* Section spacing */
    .about-section,.programs-section,.requirements-section,.news-section,.contact-section{padding:3rem 0;}
    .system-section{padding:1.25rem 0 2.5rem 0;}
    .section-header{margin-bottom:2rem;}
    .footer{padding:2.5rem 0 0;}
    .footer-grid{grid-template-columns:1fr;gap:2rem;padding-bottom:2rem;}
    .footer-bottom{flex-direction:column;text-align:center;}

    /* Hero */
    .hero-section{min-height:520px;}
    .hero-content{padding:5rem 56px 6rem;}
    .hero-title{font-size:clamp(2rem,8vw,3rem);}
    .hero-subtitle{font-size:0.95rem;max-width:100%;}
    .hero-buttons{flex-wrap:wrap;gap:0.75rem;}
    .hero-stats{gap:1rem;flex-wrap:wrap;}
    .hero-stat-number{font-size:1.2rem;}
    .hero-stat-divider{height:28px;}
    .hero-scroll-indicator{bottom:70px;}

    /* System / Feature cards */
    .system-cards{grid-template-columns:1fr 1fr;gap:1rem;}
    .system-card{padding:1.5rem;}

    /* About on Mobile */
    .about-image img{height:300px;}
    .about-image-badge{display:flex;bottom:-12px;right:10px;padding:0.6rem 0.9rem;border-radius:14px;}
    .badge-icon-wrap{width:36px;height:36px;font-size:1rem;}
    .about-image-badge strong{font-size:0.82rem;}
    .about-image-badge span{font-size:0.7rem;}
    .about-highlights{grid-template-columns:1fr 1fr;gap:0.6rem;}

    /* Grades */
    .grades-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem;}

    /* Enrollment steps */
    .steps-row{flex-direction:column;align-items:center;gap:0.75rem;margin-bottom:2rem;}
    .step-arrow{transform:rotate(90deg);}
    .step-card{width:100%;max-width:300px;}

    /* Requirements table — show label above each value */
    .table-header{display:none;}
    .table-row{
        display:block;
        padding:1.25rem;
        border-bottom:1px solid var(--border);
        border-radius:0;
    }
    .table-row + .table-row{margin-top:0;}
    .level-cell{font-size:0.95rem;font-weight:800;color:var(--primary);margin-bottom:0.75rem;padding-bottom:0.5rem;border-bottom:1px dashed var(--border);}
    .eligibility-cell,.documents-cell{font-size:0.85rem;margin-top:0.5rem;}
    .eligibility-cell::before{content:"Eligibility: ";font-weight:700;color:var(--dark-2);display:block;font-size:0.72rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:0.25rem;}
    .documents-cell::before{content:"Requirements: ";font-weight:700;color:var(--dark-2);display:block;font-size:0.72rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:0.25rem;}
    .requirements-cta{padding:1.5rem;margin-top:1.5rem;}
    .requirements-cta p{font-size:0.95rem;}

    /* News carousel — stack on mobile */
    .news-card{flex-direction:column;}
    .news-img-wrap{width:100%;min-height:0;height:220px;}
    .news-body{padding:1.5rem;}
    .news-card h3{font-size:1rem;}

    /* Contact */
    .contact-grid{gap:2rem;}
    .contact-map-wrap{height:250px;}

    /* Footer */
    .footer-contact-item span,.footer-contact-item a{font-size:0.85rem;}
}

/* === 480px — Small Mobile === */
@media (max-width: 480px) {
    .container{padding:0 16px;}

    /* Header */
    .logo-name{font-size:1rem;}

    /* Hero */
    .hero-content{padding:4rem 54px 5rem;}
    .hero-title{font-size:clamp(1.75rem,7vw,2.5rem);}
    .hero-buttons{flex-direction:column;gap:0.75rem;}
    .btn-hero-primary,.btn-hero-secondary{width:100%;justify-content:center;}
    .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem 1.5rem;align-items:start;}
    .hero-stat{display:flex;flex-direction:column;}
    .hero-stat-number{font-size:1.25rem;}
    .hero-stat-label{font-size:0.72rem;}
    .hero-stat-divider{display:none;}
    .hero-scroll-indicator{display:none;}

    /* System cards */
    .system-cards{grid-template-columns:1fr;}
    .system-cta{flex-direction:column;align-items:stretch;}
    .btn-primary-outline,.btn-secondary-outline{width:100%;justify-content:center;}

    /* About */
    .about-highlights{grid-template-columns:1fr;}
    .vm-cards{gap:0.75rem;}

    /* Grades */
    .grades-grid{grid-template-columns:1fr 1fr;}

    /* Steps */
    .step-card{max-width:100%;}
    .step-card i{font-size:1.5rem;}

    /* Requirements CTA button */
    .btn-primary-enroll{width:100%;justify-content:center;}

    /* News */
    .news-img-wrap{height:160px;}

    /* Section headers */
    .section-title{font-size:1.6rem;}
    .section-subtitle{font-size:0.9rem;}
    .section-badge{font-size:0.75rem;}

    /* Footer */
    .footer-grid{gap:1.5rem;}
    .footer-bottom{gap:0.35rem;}
}