/* =========================================================
   ROOT
========================================================= */
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --navy: #07111f;
    --navy-2: #0b172a;
    --gold: #fbbf24;
    --gold-dark: #d99b0b;
    --white: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --light: #f8fafc;
    --border: rgba(15, 23, 42, .08);
    --shadow: 0 20px 50px rgba(15, 23, 42, .12);
}

/* =========================================================
   GLOBAL
========================================================= */
.premium-page {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    overflow: hidden;
    background: #f8fafc;
}
.premium-page a { text-decoration: none; }
.premium-page img { max-width: 100%; }

/* =========================================================
   FLOATING ORBS
========================================================= */
.floating-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
    opacity: .35;
}
.orb-1 { width: 260px; height: 260px; background: #2563eb; top: 10%; left: -120px; }
.orb-2 { width: 220px; height: 220px; background: #7c3aed; top: 45%; right: -100px; }
.orb-3 { width: 180px; height: 180px; background: #fbbf24; bottom: 10%; left: 30%; }

/* Wave Divider Section */
.wave-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: -1px; /* Section ke gap ko hatane ke liye */
}
.wave-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px; /* Wave ki height yahan se adjust karein */
}
.wave-divider .shape-fill {
    fill: #f8fafc; /* Niche wale section ka background color yahan likhein */
}

/* =========================================================
   HERO
========================================================= */
.premium-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    color: white;
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 30%, rgba(37,99,235,.35), transparent 30%),
        radial-gradient(circle at 20% 80%, rgba(124,58,237,.2), transparent 30%),
        linear-gradient(135deg, #020617, #07111f 50%, #0f1d38);
}
.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .15;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: linear-gradient(to bottom, black, transparent);
}

/* =========================================================
   HERO TEXT
========================================================= */
.hero-badge {
    display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px;
    border-radius: 100px; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(15px);
    color: #fbbf24; font-size: .78rem; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 25px;
}
.badge-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 15px #22c55e; animation: pulseDot 1.8s infinite;
}
@keyframes pulseDot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.5); } }

.hero-heading {
    font-size: clamp(2.6rem, 5vw, 4.8rem);
    font-weight: 900; line-height: 1.05; letter-spacing: -2px; margin-bottom: 25px;
}
.hero-heading span {
    display: block; margin-top: 8px;
    background: linear-gradient(90deg, #60a5fa, #fbbf24);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-description {
    max-width: 600px; color: rgba(255,255,255,.72);
    font-size: 1.1rem; line-height: 1.8; margin-bottom: 32px;
}

/* =========================================================
   BUTTONS
========================================================= */
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.premium-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 50px; padding: 13px 22px; border-radius: 12px; font-weight: 800;
    transition: transform .25s ease, box-shadow .25s ease; border: 0; cursor: pointer;
}
.premium-btn:hover { transform: translateY(-5px); }
.btn-blue {
    color: white; background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 10px 0 #123c9e, 0 18px 35px rgba(37,99,235,.3);
}
.btn-blue:hover { color: white; box-shadow: 0 14px 0 #123c9e, 0 25px 40px rgba(37,99,235,.4); }
.btn-gold {
    color: #111827; background: linear-gradient(135deg, #fde047, #f59e0b);
    box-shadow: 0 10px 0 #b77908, 0 18px 35px rgba(245,158,11,.3);
}
.btn-gold:hover { color: #111827; box-shadow: 0 14px 0 #b77908, 0 25px 40px rgba(245,158,11,.4); }
.btn-glass {
    color: white; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(15px);
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
}
.btn-glass:hover { color: white; background: rgba(255,255,255,.15); }

/* =========================================================
   HERO STATS
========================================================= */
.hero-stats { display: flex; align-items: center; gap: 22px; margin-top: 45px; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat strong { font-size: 1.35rem; color: white; }
.hero-stat span { font-size: .75rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 1px; }
.stat-line { width: 1px; height: 35px; background: rgba(255,255,255,.2); }

/* =========================================================
   3D HERO SCENE
========================================================= */
.hero-3d-scene {
    position: relative; min-height: 500px; display: flex;
    align-items: center; justify-content: center; perspective: 1500px;
}
.hero-3d-card {
    width: 100%; max-width: 570px; min-height: 400px;
    border-radius: 30px; overflow: hidden; position: relative;
    transform: rotateY(-8deg) rotateX(4deg); transform-style: preserve-3d;
    transition: transform .5s ease; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 40px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
    backdrop-filter: blur(20px);
}
.hero-3d-card:hover { transform: rotateY(0deg) rotateX(0deg) translateY(-8px); }
.card-glow {
    position: absolute; width: 250px; height: 250px; border-radius: 50%;
    background: #3b82f6; filter: blur(100px); opacity: .25; top: -100px; right: -80px;
}

/* =========================================================
   COURSE SLIDES
========================================================= */
.course-slide { min-height: 400px; padding: 55px 45px; position: relative; overflow: hidden; }
.course-slide::before {
    content: ""; position: absolute; width: 240px; height: 240px;
    border-radius: 50%; background: rgba(255,255,255,.08); right: -80px; bottom: -100px;
}
.slide-one { background: linear-gradient(135deg, #172554, #2563eb); }
.slide-two { background: linear-gradient(135deg, #0f172a, #0369a1); }
.slide-three { background: linear-gradient(135deg, #064e3b, #059669); }
.slide-four { background: linear-gradient(135deg, #312e81, #7c3aed); }

.slide-icon {
    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;
    border-radius: 20px; font-size: 2rem; color: #fbbf24;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
    margin-bottom: 30px; box-shadow: 0 15px 30px rgba(0,0,0,.2);
}
.slide-number { color: #fbbf24; font-size: .75rem; font-weight: 900; letter-spacing: 2px; margin-bottom: 10px; }
.course-slide h2 { font-size: 2.2rem; font-weight: 900; text-transform: uppercase; margin-bottom: 15px; }
.course-slide p { color: rgba(255,255,255,.72); line-height: 1.7; max-width: 430px; }
.slide-bottom { margin-top: 30px; color: rgba(255,255,255,.85); font-size: .85rem; }
.language-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.language-pills span {
    padding: 7px 12px; border-radius: 8px; background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15); font-size: .75rem; font-weight: 700;
}
.carousel-indicators { margin-bottom: 18px; }
.carousel-indicators button { width: 25px !important; height: 4px !important; border-radius: 20px; }

/* =========================================================
   FLOATING MINI CARDS
========================================================= */
.floating-mini-card {
    position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; border-radius: 16px; background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(18px);
    box-shadow: 0 20px 40px rgba(0,0,0,.25); animation: floatingCard 4s ease-in-out infinite;
}
.floating-mini-card i { font-size: 1.4rem; color: #fbbf24; }
.floating-mini-card strong { display: block; color: white; font-size: .8rem; }
.floating-mini-card small { color: rgba(255,255,255,.5); }
.mini-one { top: 40px; right: -10px; }
.mini-two { bottom: 45px; left: -20px; animation-delay: 1s; }
@keyframes floatingCard { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* =========================================================
   GENERAL SECTION
========================================================= */
.premium-section { position: relative; padding: 100px 0; background: #f8fafc; }
.section-heading { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.section-label { color: #2563eb; font-size: .75rem; font-weight: 900; letter-spacing: 3px; margin-bottom: 12px; }
.section-heading h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -1px; }
.section-heading h2 span { color: #2563eb; }
.section-heading p { color: #64748b; margin-bottom: 0; }

/* =========================================================
   FEATURE CARDS
========================================================= */
.feature-card-link { color: inherit; }
.feature-card {
    position: relative; min-height: 285px; padding: 35px; border-radius: 25px;
    background: rgba(255,255,255,.9); border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 15px 40px rgba(15,23,42,.07); overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}
.feature-card::after {
    content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%;
    right: -60px; bottom: -60px; background: rgba(37,99,235,.05);
}
.feature-card:hover { transform: translateY(-12px) rotateX(2deg); box-shadow: 0 30px 60px rgba(15,23,42,.15); }
.feature-number { position: absolute; top: 20px; right: 25px; color: #e2e8f0; font-size: 2rem; font-weight: 900; }
.feature-icon {
    width: 65px; height: 65px; display: flex; align-items: center; justify-content: center;
    border-radius: 18px; font-size: 1.7rem; margin-bottom: 25px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 20px rgba(15,23,42,.08);
}
.feature-icon.blue { color: #2563eb; background: #dbeafe; }
.feature-icon.green { color: #059669; background: #d1fae5; }
.feature-icon.gold { color: #d97706; background: #fef3c7; }
.feature-icon.cyan { color: #0891b2; background: #cffafe; }
.feature-icon.pink { color: #db2777; background: #fce7f3; }
.feature-icon.purple { color: #7c3aed; background: #ede9fe; }
.feature-card h4 { font-weight: 900; margin-bottom: 10px; }
.feature-card p { color: #64748b; line-height: 1.6; font-size: .9rem; }
.feature-arrow { color: #2563eb; font-size: .8rem; font-weight: 800; }
.feature-arrow i { transition: transform .2s ease; }
.feature-card:hover .feature-arrow i { transform: translateX(5px); }

/* =========================================================
   DARK SECTION
========================================================= */
.dark-section {
    padding: 100px 0; color: white;
    background:
        radial-gradient(circle at 85% 20%, rgba(37,99,235,.25), transparent 30%),
        linear-gradient(135deg, #020617, #0f172a);
}
.light-label { color: #60a5fa; }
.dark-heading { font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 900; letter-spacing: -1px; }
.dark-heading span { display: block; color: #fbbf24; }
.dark-text { color: rgba(255,255,255,.62); line-height: 1.8; max-width: 500px; }
.achievement-box {
    display: flex; align-items: center; gap: 15px; margin-top: 30px; padding: 18px;
    border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    max-width: 400px;
}
.achievement-box > i { font-size: 2rem; color: #fbbf24; }
.achievement-box strong, .achievement-box small { display: block; }
.achievement-box small { color: rgba(255,255,255,.5); margin-top: 4px; }

/* =========================================================
   LEADERBOARD (SLOW TRAIN SCROLL ADDED)
========================================================= */
.leaderboard-3d {
    border-radius: 28px; overflow: hidden; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(20px);
    box-shadow: 0 35px 80px rgba(0,0,0,.35);
}
.leaderboard-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 25px 30px; background: rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.leaderboard-header span { color: #60a5fa; font-size: .65rem; letter-spacing: 2px; font-weight: 800; }
.leaderboard-header h4 { margin: 4px 0 0; font-weight: 900; }
.trophy-big {
    width: 55px; height: 55px; display: flex; align-items: center; justify-content: center;
    border-radius: 16px; color: #fbbf24; background: rgba(251,191,36,.1); font-size: 1.5rem;
}
.leaderboard-scroll { height: 450px; overflow: hidden; position: relative; }

/* SLOW TRAIN ANIMATION TRACK */
.leaderboard-track {
    display: flex; flex-direction: column;
    animation: leaderboardScroll 30s linear infinite;
}
.leaderboard-scroll:hover .leaderboard-track { animation-play-state: paused; }
@keyframes leaderboardScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

.student-row {
    display: flex; align-items: center; gap: 15px; padding: 18px 25px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.rank { width: 35px; color: rgba(255,255,255,.4); font-size: .75rem; font-weight: 800; }
.student-avatar {
    width: 55px; height: 55px; border-radius: 50%; object-fit: cover;
    border: 3px solid rgba(96,165,250,.5); box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.student-info { flex: 1; min-width: 0; }
.student-info strong {
    display: block; color: white; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.student-info small { color: rgba(255,255,255,.4); }
.score { text-align: right; }
.score strong { display: block; color: #fbbf24; font-size: 1.15rem; }
.score span { color: rgba(255,255,255,.4); font-size: .65rem; }
.empty-state { padding: 50px; text-align: center; color: rgba(255,255,255,.5); }

/* =========================================================
   COURSES
========================================================= */
.course-section { padding: 100px 0; background: #eef2ff; overflow: hidden; }
.course-slider-wrapper { overflow: hidden; padding: 20px 0 35px; }
.course-track {
    display: flex; width: max-content; gap: 25px;
    animation: coursesMove 45s linear infinite;
}
.course-slider-wrapper:hover .course-track { animation-play-state: paused; }
@keyframes coursesMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.premium-course-card {
    width: 320px; min-height: 370px; flex-shrink: 0; padding: 30px;
    border-radius: 26px; background: rgba(255,255,255,.95);
    border: 1px solid rgba(37,99,235,.08); box-shadow: 0 20px 45px rgba(37,99,235,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}
.premium-course-card:hover { transform: translateY(-12px) rotateY(-3deg); box-shadow: 0 35px 60px rgba(37,99,235,.16); }
.course-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.course-icon {
    width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
    border-radius: 17px; color: white; background: linear-gradient(135deg, #2563eb, #7c3aed);
    font-size: 1.4rem; box-shadow: 0 10px 25px rgba(37,99,235,.25);
}
.course-card-top > span { color: #94a3b8; font-size: .65rem; font-weight: 900; letter-spacing: 2px; }
.premium-course-card h3 { font-weight: 900; color: #0f172a; margin-bottom: 12px; }
.premium-course-card p { color: #64748b; font-size: .88rem; line-height: 1.6; height: 72px; overflow: hidden; }
.course-details { display: flex; gap: 20px; margin: 25px 0; }
.course-details div { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: #475569; }
.course-details i { color: #2563eb; }
.course-details div:last-child i { color: #f59e0b; }
.course-apply-btn {
    display: flex; align-items: center; justify-content: space-between; padding: 13px 16px;
    border-radius: 12px; color: white; background: #0f172a;
    font-size: .82rem; font-weight: 800; transition: background .25s ease, transform .25s ease;
}
.course-apply-btn:hover { color: white; background: #2563eb; transform: translateY(-2px); }
.premium-outline-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 13px 25px;
    border-radius: 12px; border: 2px solid #2563eb; color: #2563eb; font-weight: 800;
    transition: all .25s ease;
}
.premium-outline-btn:hover { color: white; background: #2563eb; transform: translateY(-3px); }

/* =========================================================
   FACULTY
========================================================= */
.faculty-section { background: white; }
.faculty-card {
    position: relative; text-align: center; padding: 35px 25px;
    border-radius: 25px; background: #fff; border: 1px solid #e2e8f0;
    box-shadow: 0 15px 40px rgba(15,23,42,.06);
    transition: transform .35s ease, box-shadow .35s ease; overflow: hidden;
}
.faculty-card:hover { transform: translateY(-12px); box-shadow: 0 30px 60px rgba(15,23,42,.13); }
.faculty-image-wrap { width: 145px; height: 145px; position: relative; margin: 0 auto 25px; }
.faculty-ring {
    position: absolute; inset: -7px; border-radius: 50%;
    border: 2px dashed #2563eb; animation: rotateRing 12s linear infinite;
}
@keyframes rotateRing { to { transform: rotate(360deg); } }
.faculty-image {
    width: 145px; height: 145px; border-radius: 50%; object-fit: cover;
    border: 5px solid white; position: relative; z-index: 2;
    box-shadow: 0 15px 30px rgba(15,23,42,.15);
}
.faculty-content h4 { font-weight: 900; margin-bottom: 5px; }
.faculty-subject { display: inline-block; color: #2563eb; font-size: .75rem; font-weight: 800; margin-bottom: 12px; }
.faculty-content p {
    color: #64748b; font-size: .82rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =========================================================
   GALLERY
========================================================= */
.gallery-section { padding: 100px 0; background: #f1f5f9; overflow: hidden; }
.gallery-title {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 35px 0 18px; font-weight: 900;
}
.gallery-title i { color: #2563eb; }
.video-title i { color: #ef4444; }
.gallery-marquee { width: 100%; overflow: hidden; padding: 15px 0 30px; }
.gallery-track {
    display: flex; width: max-content; gap: 20px;
    animation: galleryMove 40s linear infinite;
}
.gallery-marquee:hover .gallery-track { animation-play-state: paused; }
@keyframes galleryMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.gallery-photo-card {
    position: relative; width: 300px; height: 210px; flex-shrink: 0;
    border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(15,23,42,.12);
    transform: perspective(700px) rotateY(-2deg); transition: transform .3s ease;
}
.gallery-photo-card:hover { transform: perspective(700px) rotateY(0deg) translateY(-8px); }
.gallery-photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-photo-card:hover img { transform: scale(1.08); }
.gallery-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 35px 15px 15px;
    color: white; background: linear-gradient(transparent, rgba(0,0,0,.75));
    font-size: .8rem; font-weight: 700;
}
.gallery-video-card {
    width: 360px; height: 220px; flex-shrink: 0; border-radius: 20px; overflow: hidden;
    background: #020617; box-shadow: 0 15px 35px rgba(15,23,42,.15);
}
.gallery-video-card video { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   CTA
========================================================= */
.cta-3d-section {
    position: relative; padding: 80px 0; overflow: hidden; color: white;
    background: linear-gradient(135deg, #020617, #172554);
}
.cta-grid {
    position: absolute; inset: 0; opacity: .08;
    background-image:
        linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
    background-size: 40px 40px;
}
.cta-card {
    position: relative; display: flex; align-items: center; gap: 30px; padding: 40px;
    border-radius: 30px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
    backdrop-filter: blur(20px); box-shadow: 0 30px 70px rgba(0,0,0,.3);
}
.cta-icon {
    width: 75px; height: 75px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 22px; color: #fbbf24; background: rgba(251,191,36,.1); font-size: 2rem;
}
.cta-card h2 { font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 900; margin: 5px 0 8px; }
.cta-card h2 span { color: #fbbf24; }
.cta-card p { margin: 0; color: rgba(255,255,255,.6); }

/* =========================================================
   FOOTER
========================================================= */
.premium-footer { padding: 70px 0 20px; color: #94a3b8; background: #020617; border-top: 1px solid rgba(255,255,255,.08); }
.footer-brand { display: flex; align-items: center; gap: 15px; }
.footer-logo {
    width: 55px; height: 55px; display: flex; align-items: center; justify-content: center;
    border-radius: 15px; color: #fbbf24; background: rgba(251,191,36,.1); font-size: 1.5rem;
}
.footer-brand h3 { margin: 0; color: white; font-size: 1.1rem; font-weight: 900; }
.footer-brand span { font-size: .75rem; }
.footer-description { max-width: 420px; margin-top: 20px; line-height: 1.7; font-size: .85rem; }
.footer-heading { color: white; font-weight: 900; margin-bottom: 20px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: #94a3b8; font-size: .85rem; transition: color .2s ease; }
.footer-links a:hover { color: #60a5fa; }
.footer-links i { font-size: .65rem; margin-right: 5px; }
.contact-item { display: flex; gap: 12px; margin-bottom: 16px; font-size: .82rem; line-height: 1.6; }
.contact-item i { color: #60a5fa; margin-top: 3px; }
.contact-item a { color: #94a3b8; }
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    margin-top: 50px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08);
    font-size: .75rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: #60a5fa; }

/* =========================================================
   NOTICE MODAL
========================================================= */
.premium-modal { overflow: hidden; border: 0; border-radius: 25px; box-shadow: 0 40px 100px rgba(0,0,0,.35); }
.notice-header {
    display: flex; align-items: center; gap: 15px; padding: 25px; color: white;
    background: linear-gradient(135deg, #1d4ed8, #312e81);
}
.notice-icon {
    width: 55px; height: 55px; display: flex; align-items: center; justify-content: center;
    border-radius: 16px; color: #fbbf24; background: rgba(255,255,255,.1); font-size: 1.3rem;
}
.notice-header small { color: rgba(255,255,255,.55); font-size: .65rem; font-weight: 800; letter-spacing: 2px; }
.notice-header h4 { margin: 3px 0 0; font-weight: 900; }
.notice-header .btn-close { margin-left: auto; }
.notice-body { padding: 30px; }
.notice-date {
    display: inline-flex; gap: 8px; padding: 7px 12px; border-radius: 8px;
    color: #2563eb; background: #eff6ff; font-size: .75rem; font-weight: 700; margin-bottom: 20px;
}
.notice-body p { white-space: pre-line; color: #475569; line-height: 1.7; }
.notice-footer { padding: 0 30px 30px; }

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 991px) {
    .premium-hero { min-height: auto; padding: 90px 0; }
    .hero-heading { font-size: clamp(2.4rem, 8vw, 4rem); }
    .hero-3d-scene { min-height: 450px; }
    .hero-3d-card { transform: none; }
    .hero-3d-card:hover { transform: translateY(-5px); }
    .cta-card { flex-wrap: wrap; }
}

@media (max-width: 767px) {
    .premium-section, .dark-section, .course-section, .gallery-section { padding: 70px 0; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .premium-btn { width: 100%; }
    .hero-stats { justify-content: center; gap: 15px; }
    .hero-stat strong { font-size: 1.1rem; }
    .hero-stat span { font-size: .6rem; }
    .hero-3d-scene { min-height: 400px; }
    .hero-3d-card { min-height: 360px; }
    .course-slide { min-height: 360px; padding: 40px 30px; }
    .course-slide h2 { font-size: 1.7rem; }
    .floating-mini-card { display: none; }
    .feature-card { min-height: 260px; padding: 28px; }
    .leaderboard-scroll { height: 400px; }
    .student-row { padding: 15px; gap: 10px; }
    .student-avatar { width: 45px; height: 45px; }
    .rank { width: 25px; }
    .premium-course-card { width: 290px; }
    .gallery-photo-card { width: 260px; height: 180px; }
    .gallery-video-card { width: 300px; height: 190px; }
    .cta-card { text-align: center; justify-content: center; padding: 30px 20px; }
    .cta-icon { margin: 0 auto; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .premium-hero { padding: 70px 0; }
    .hero-heading { font-size: 2.25rem; }
    .hero-description { font-size: .95rem; }
    .hero-stats { gap: 10px; }
    .stat-line { height: 28px; }
    .course-slide { padding: 35px 25px; }
    .slide-icon { width: 58px; height: 58px; }
    .feature-card { padding: 22px; }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}