/* ============================================================
   THEME DEMO CMS SEKOLAH PRO — Full Override
   File ini menimpa style.css bawaan untuk tampilan demo
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

/* ── ANNOUNCEMENT BAR OVERRIDE ── */
.announcement-bar {
    background: linear-gradient(135deg, var(--demo-pink), #fb7185) !important;
    color: white !important;
    position: relative !important;
    z-index: 1002 !important;
}

/* ── DESIGN TOKENS ── */
:root {
    --demo-pink: #f43f5e;
    --demo-pink-hover: #e11d48;
    --demo-pink-light: #ffe4e6;
    --demo-pink-50: #fff1f2;
    --demo-cyan: #2dd4bf;
    --demo-cyan-light: #ccfbf1;
    --demo-yellow: #fcd34d;
    --demo-yellow-light: #fef9c3;
    --demo-bg-gradient: linear-gradient(135deg, #e0f2fe 0%, #fae8ff 40%, #fff1f2 70%, #fef9c3 100%);
    --demo-font: 'Quicksand', 'Plus Jakarta Sans', sans-serif;
}

/* ── GLOBAL FONT OVERRIDE ── */
body {
    font-family: var(--demo-font) !important;
}
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.section-heading,
.section-label,
.section-subtext,
.card-modern .card-title,
.program-card h3,
.footer-brand,
.footer-heading {
    font-family: var(--demo-font) !important;
}

/* ── SECTION HEADING OVERRIDE ── */
.section-heading {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: #1e293b !important;
}

/* ── SECTION LABEL OVERRIDE ── */
.section-label {
    background: var(--demo-pink-light) !important;
    color: var(--demo-pink) !important;
    border-color: rgba(244, 63, 94, 0.15) !important;
}
.section-label i {
    color: var(--demo-pink) !important;
}

/* ── NAVBAR FULL OVERRIDE ── */
.main-navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04) !important;
    border-bottom: none !important;
    padding: 1rem 0 !important;
    transform: none !important; /* Prevent nav-hidden from hiding it */
    pointer-events: auto !important; /* Ensure it stays clickable even if nav-hidden is applied */
}
.main-navbar.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06) !important;
    padding: 0.75rem 0 !important;
}

.navbar-brand {
    color: #0f172a !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
}
.navbar-brand i {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--demo-pink) !important;
    background-clip: unset !important;
    color: var(--demo-pink) !important;
}
.navbar-brand:hover {
    color: #0f172a !important;
}

/* Nav links */
.main-navbar .nav-link {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    background: transparent !important;
}
.main-navbar .nav-link::after {
    display: none !important;
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    color: var(--demo-pink) !important;
    background: transparent !important;
}

/* Dropdown override */
.dropdown-item:hover {
    background: var(--demo-pink-light) !important;
    color: var(--demo-pink) !important;
    transform: translateX(4px) !important;
}

/* Demo pink button (CTA in navbar) */
.btn-demo-pink {
    background: linear-gradient(135deg, var(--demo-pink), #fb7185) !important;
    color: white !important;
    border-radius: 50px !important;
    padding: 0.625rem 1.75rem !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.3) !important;
    transition: all 0.3s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}
.btn-demo-pink:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(244, 63, 94, 0.4) !important;
    color: white !important;
}

/* ── HERO DEMO SECTION ── */
.hero-demo {
    background: var(--demo-bg-gradient) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 60px 0 80px !important; /* Reduced padding because navbar is sticky */
}
.hero-demo::before {
    content: '' !important;
    position: absolute !important;
    bottom: -80px !important;
    left: 0 !important;
    right: 0 !important;
    height: 160px !important;
    background: white !important;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
    z-index: 1 !important;
}

/* Hero Badge */
.hero-badge-demo {
    background: white !important;
    color: var(--demo-pink) !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 24px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}
.hero-badge-dot-demo {
    width: 10px !important;
    height: 10px !important;
    background: var(--demo-yellow) !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

/* Hero Text */
.hero-demo h1 {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.15 !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.02em !important;
    font-style: italic !important;
}
.hero-demo p {
    font-size: 1.1rem !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
    max-width: 480px !important;
    line-height: 1.7 !important;
    font-style: normal !important;
}

/* Hero Image Frame */
.hero-img-container {
    position: relative !important;
    z-index: 10 !important;
}
.hero-img-frame {
    background: white !important;
    padding: 12px !important;
    border-radius: 32px !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
    z-index: 2 !important;
}
.hero-img-frame img {
    border-radius: 24px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    max-height: none !important;
}

/* Floating Badge */
.hero-floating-badge {
    position: absolute !important;
    bottom: 40px !important;
    left: -20px !important;
    background: white !important;
    padding: 14px 22px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    z-index: 3 !important;
    animation: demoFloat 4s ease-in-out infinite !important;
}
.hero-floating-icon {
    width: 42px !important;
    height: 42px !important;
    background: var(--demo-yellow) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}
.hero-floating-badge div h6 {
    margin: 0 !important;
    font-size: 0.95rem !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}
.hero-floating-badge div small {
    color: var(--demo-pink) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

/* Floating WhatsApp */
.hero-floating-wa {
    position: absolute !important;
    bottom: -15px !important;
    right: 30px !important;
    width: 56px !important;
    height: 56px !important;
    background: #25D366 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 1.8rem !important;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4) !important;
    z-index: 3 !important;
    text-decoration: none !important;
    animation: demoFloat 5s ease-in-out infinite alternate !important;
}
.hero-floating-wa:hover {
    color: white !important;
    transform: scale(1.1) !important;
}

@keyframes demoFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* ── STATS SECTION OVERRIDE ── */
.stats-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}
.stat-icon-box {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(244, 63, 94, 0.08)) !important;
    border-color: rgba(244, 63, 94, 0.1) !important;
}
.stat-icon-box i, .stat-icon-box svg {
    color: var(--demo-pink) !important;
}
.stat-number span {
    background: linear-gradient(135deg, #fda4af, var(--demo-pink)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ── PROGRAM CARD OVERRIDE ── */
.program-card::before {
    background: linear-gradient(90deg, var(--demo-pink), #fb7185) !important;
}
.program-card.featured {
    background: linear-gradient(135deg, var(--demo-pink), var(--demo-pink-hover)) !important;
}
.program-card.featured::before {
    background: linear-gradient(90deg, var(--demo-yellow), #fbbf24) !important;
}

/* ── CTA SECTION OVERRIDE ── */
.cta-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}
.btn-hero-primary {
    background: linear-gradient(135deg, var(--demo-pink), #fb7185) !important;
    color: white !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.3) !important;
}
.btn-hero-primary:hover {
    background: linear-gradient(135deg, var(--demo-pink-hover), var(--demo-pink)) !important;
    color: white !important;
    box-shadow: 0 10px 30px rgba(244, 63, 94, 0.4) !important;
}
.btn-hero-secondary {
    border-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
}

/* ── CARD MODERN OVERRIDE ── */
.card-modern .card-category {
    background: var(--demo-pink-light) !important;
    color: var(--demo-pink) !important;
}
.card-modern:hover .card-title {
    color: var(--demo-pink) !important;
}
.card-modern .card-read-more {
    color: var(--demo-pink) !important;
}

/* ── BUTTON OVERRIDES ── */
.btn-primary-modern {
    background: linear-gradient(135deg, var(--demo-pink), #fb7185) !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.25) !important;
}
.btn-primary-modern:hover {
    background: linear-gradient(135deg, var(--demo-pink-hover), var(--demo-pink)) !important;
    box-shadow: 0 10px 30px rgba(244, 63, 94, 0.35) !important;
}
.btn-primary-modern::after {
    display: none !important;
}

.btn-outline-modern:hover {
    border-color: var(--demo-pink) !important;
    background: var(--demo-pink-light) !important;
    color: var(--demo-pink) !important;
}

/* ── PAGE HEADER OVERRIDE (sub-pages) ── */
.page-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}
.page-header .breadcrumb-item.active {
    color: var(--demo-pink) !important;
}

/* ── ACHIEVEMENT OVERRIDE ── */
.ach-year-badge {
    background: linear-gradient(135deg, var(--demo-pink), #fb7185) !important;
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.3) !important;
}

/* ── VISI MISI OVERRIDE ── */
.visi-card {
    border-left-color: var(--demo-pink) !important;
}
.visi-card::after {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.04), transparent) !important;
}
.misi-card {
    background: linear-gradient(135deg, var(--demo-pink), var(--demo-pink-hover)) !important;
}

/* ── FOOTER OVERRIDE ── */
.footer-main::before {
    background: linear-gradient(90deg, transparent, var(--demo-pink), var(--demo-cyan), var(--demo-pink), transparent) !important;
    height: 3px !important;
}
.footer-heading::after {
    background: linear-gradient(90deg, var(--demo-pink), transparent) !important;
}
.footer-links a:hover {
    color: var(--demo-pink) !important;
}
.footer-links a::after {
    background: var(--demo-pink) !important;
}
.footer-social a:hover {
    background: linear-gradient(135deg, var(--demo-pink), #fb7185) !important;
    border-color: var(--demo-pink) !important;
    box-shadow: 0 4px 15px rgba(244, 63, 94, 0.3) !important;
}

/* ── PAGINATION OVERRIDE ── */
.pagination .page-link:hover {
    background: var(--demo-pink-light) !important;
    color: var(--demo-pink) !important;
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--demo-pink), #fb7185) !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3) !important;
}

/* ── BACK TO TOP OVERRIDE ── */
#back-to-top {
    background: linear-gradient(135deg, var(--demo-pink), #fb7185) !important;
    box-shadow: 0 4px 15px rgba(244, 63, 94, 0.3) !important;
}
#back-to-top:hover {
    box-shadow: 0 8px 25px rgba(244, 63, 94, 0.4) !important;
}

/* ── SELECTION COLOR ── */
::selection {
    background: var(--demo-pink) !important;
    color: white !important;
}

/* ── TESTIMONIAL OVERRIDE ── */
.testimonial-card:hover {
    border-color: rgba(244, 63, 94, 0.1) !important;
}
.testimonial-stars {
    color: var(--demo-pink) !important;
}
.testimonial-avatar {
    border-color: var(--demo-pink-light) !important;
}

/* ── AGENDA OVERRIDE ── */
.agenda-date-box {
    background: var(--demo-pink-light) !important;
    border-color: rgba(244, 63, 94, 0.08) !important;
}
.agenda-date-day {
    color: var(--demo-pink) !important;
}
.agenda-date-month {
    color: var(--demo-pink) !important;
}

/* ── GALLERY OVERLAY ── */
.gallery-info span {
    color: var(--demo-pink) !important;
}

/* ── WELCOME SECTION ── */
.welcome-badge {
    background: linear-gradient(135deg, var(--demo-pink), var(--demo-pink-hover)) !important;
    box-shadow: 0 4px 15px rgba(244, 63, 94, 0.3) !important;
}
.welcome-name-line {
    background: linear-gradient(180deg, var(--demo-pink), var(--demo-yellow)) !important;
}
.welcome-role {
    color: var(--demo-pink) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
    .hero-demo {
        padding: 140px 0 100px !important;
        text-align: center !important;
    }
    .hero-demo h1 {
        font-size: 2.5rem !important;
    }
    .hero-demo p {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .hero-img-container {
        margin-top: 40px !important;
    }
    .hero-floating-badge {
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: -10px !important;
        animation: none !important;
    }
    .hero-floating-wa {
        display: none !important;
    }
}

@media (max-width: 575px) {
    .hero-demo h1 {
        font-size: 2rem !important;
    }
    .hero-badge-demo {
        font-size: 0.7rem !important;
        padding: 8px 14px !important;
    }
}

/* ════════════════════════════════════════════
   DEMO SECTIONS OVERRIDES
   ════════════════════════════════════════════ */

/* ── WELCOME SECTION ── */
.demo-welcome-section {
    padding: 6rem 0 !important;
    background: white !important;
    position: relative !important;
}
.demo-welcome-badge {
    display: inline-block !important;
    padding: 0.35rem 1rem !important;
    background: var(--demo-cyan-light) !important;
    color: #0e7490 !important; /* cyan-800 */
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 0.75rem !important;
    margin-bottom: 1.5rem !important;
}
.demo-welcome-title {
    font-size: 2.25rem !important;
    font-weight: 900 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
    margin-bottom: 2rem !important;
}
@media (min-width: 768px) {
    .demo-welcome-title { font-size: 3rem !important; }
}
.demo-welcome-title span {
    color: var(--demo-cyan) !important;
}
.demo-welcome-text {
    font-size: 1.25rem !important;
    color: #475569 !important;
    line-height: 1.8 !important;
    margin-bottom: 2rem !important;
    font-weight: 500 !important;
}
.demo-welcome-author {
    padding-top: 2rem !important;
    border-top: 2px dashed #a5f3fc !important; /* cyan-200 */
}
.demo-welcome-author h4 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 0.25rem !important;
}
.demo-welcome-author p {
    color: #0891b2 !important; /* cyan-600 */
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    margin: 0 !important;
}
.demo-welcome-photo-container {
    position: relative !important;
    width: 100% !important;
    max-width: 24rem !important;
    margin: 0 auto !important;
}
.demo-welcome-photo {
    width: 100% !important;
    aspect-ratio: 4/5 !important;
    border-radius: 3rem !important;
    object-fit: cover !important;
    border: 8px solid white !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    transform: rotate(-2deg) !important;
    position: relative !important;
    z-index: 10 !important;
}
.demo-welcome-photo-backdrop {
    position: absolute !important;
    bottom: -1.5rem !important;
    right: -1.5rem !important;
    width: 8rem !important;
    height: 8rem !important;
    background-color: var(--demo-yellow) !important;
    border-radius: 50% !important;
    z-index: 1 !important;
}

/* ── NEWS SECTION (KABAR TERBARU) ── */
.demo-news-section {
    padding: 6rem 0 !important;
    background: #f8fafc !important; /* slate-50 */
}
.demo-news-badge {
    display: inline-block !important;
    padding: 0.35rem 1rem !important;
    background: #dcfce7 !important; /* green-100 */
    color: #15803d !important; /* green-700 */
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 0.75rem !important;
    margin-bottom: 1rem !important;
}
.demo-news-title {
    font-size: 2.25rem !important;
    font-weight: 900 !important;
    color: #1e293b !important;
    margin-bottom: 2rem !important;
}
.demo-news-btn {
    padding: 0.75rem 1.5rem !important;
    background: #f1f5f9 !important; /* slate-100 */
    color: #334155 !important; /* slate-700 */
    font-weight: 700 !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
}
.demo-news-btn:hover {
    background: #dcfce7 !important;
    color: #15803d !important;
}
.demo-news-card {
    background: white !important;
    border-radius: 2.5rem !important;
    border: 1px solid #e2e8f0 !important; /* slate-200 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    transition: all 0.3s !important;
    display: block !important;
    text-decoration: none !important;
}
.demo-news-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(-0.5rem) !important;
}
.demo-news-img-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
}
.demo-news-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s ease-out !important;
}
.demo-news-card:hover .demo-news-img-wrap img {
    transform: scale(1.1) !important;
}
.demo-news-category {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    background: white !important;
    padding: 0.375rem 1rem !important;
    border-radius: 50px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}
.demo-news-body {
    padding: 2rem !important;
}
.demo-news-date {
    font-size: 0.875rem !important;
    color: #64748b !important; /* slate-500 */
    font-weight: 500 !important;
    margin-bottom: 0.75rem !important;
}
.demo-news-card-title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: #1e293b !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.25 !important;
    transition: color 0.2s !important;
}
.demo-news-card:hover .demo-news-card-title {
    color: #16a34a !important; /* green-600 */
}
.demo-news-desc {
    color: #475569 !important; /* slate-600 */
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ── FEATURED PROGRAMS (KEUNGGULAN) ── */
.demo-programs-section {
    padding: 6rem 0 !important;
    background: white !important;
}
.demo-programs-badge {
    display: inline-block !important;
    padding: 0.35rem 1rem !important;
    background: var(--demo-yellow-light) !important;
    color: #a16207 !important; /* yellow-700 */
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 0.75rem !important;
    margin-bottom: 1rem !important;
}
.demo-program-card {
    padding: 2rem !important;
    border-radius: 2.5rem !important;
    background: white !important;
    border: 4px solid transparent !important;
    transition: all 0.3s !important;
    height: 100% !important;
}
.demo-program-card:hover {
    transform: translateY(-0.75rem) !important;
}
/* Colors variations for program cards */
.demo-program-card.color-0 {
    border-color: #fbcfe8 !important; /* pink-200 */
    background: rgba(253, 242, 248, 0.3) !important;
}
.demo-program-card.color-0:hover {
    border-color: #f472b6 !important; /* pink-400 */
    box-shadow: 0 10px 15px -3px rgba(251, 207, 232, 0.5) !important;
}
.demo-program-card.color-0 .demo-program-icon {
    background: #fce7f3 !important; /* pink-100 */
    color: #ec4899 !important; /* pink-500 */
}
.demo-program-card.color-1 {
    border-color: #a5f3fc !important; /* cyan-200 */
    background: rgba(236, 254, 255, 0.3) !important;
}
.demo-program-card.color-1:hover {
    border-color: #22d3ee !important; /* cyan-400 */
    box-shadow: 0 10px 15px -3px rgba(165, 243, 252, 0.5) !important;
}
.demo-program-card.color-1 .demo-program-icon {
    background: #cffafe !important; /* cyan-100 */
    color: #06b6d4 !important; /* cyan-500 */
}
.demo-program-card.color-2 {
    border-color: #fef08a !important; /* yellow-200 */
    background: rgba(254, 252, 232, 0.3) !important;
}
.demo-program-card.color-2:hover {
    border-color: #facc15 !important; /* yellow-400 */
    box-shadow: 0 10px 15px -3px rgba(254, 240, 138, 0.5) !important;
}
.demo-program-card.color-2 .demo-program-icon {
    background: #fef9c3 !important; /* yellow-100 */
    color: #eab308 !important; /* yellow-500 */
}
.demo-program-card.color-3 {
    border-color: #e9d5ff !important; /* purple-200 */
    background: rgba(250, 245, 255, 0.3) !important;
}
.demo-program-card.color-3:hover {
    border-color: #c084fc !important; /* purple-400 */
    box-shadow: 0 10px 15px -3px rgba(233, 213, 255, 0.5) !important;
}
.demo-program-card.color-3 .demo-program-icon {
    background: #f3e8ff !important; /* purple-100 */
    color: #a855f7 !important; /* purple-500 */
}
.demo-program-icon {
    width: 5rem !important;
    height: 5rem !important;
    border-radius: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.25rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
}
.demo-program-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 0.75rem !important;
}
.demo-program-desc {
    color: #475569 !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* ── STATS SECTION ── */
.demo-stats-section {
    padding: 6rem 0 !important;
    background: #ecfeff !important; /* cyan-50 */
    position: relative !important;
    overflow: hidden !important;
}
.demo-stats-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 16rem !important;
    height: 16rem !important;
    background: #fbcfe8 !important; /* pink-200 */
    border-radius: 50% !important;
    filter: blur(40px) !important;
    opacity: 0.4 !important;
}
.demo-stats-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 16rem !important;
    height: 16rem !important;
    background: #a5f3fc !important; /* cyan-200 */
    border-radius: 50% !important;
    filter: blur(40px) !important;
    opacity: 0.4 !important;
}
.demo-stat-card {
    background: white !important;
    border-radius: 3rem !important;
    padding: 2rem !important;
    text-align: center !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    border: 4px solid #fef08a !important; /* yellow-100 */
    transition: all 0.3s !important;
}
.demo-stat-card:hover {
    transform: translateY(-0.5rem) !important;
}
.demo-stat-number {
    font-size: 3rem !important;
    font-weight: 900 !important;
    margin-bottom: 0.5rem !important;
}
@media (min-width: 768px) {
    .demo-stat-number { font-size: 3rem !important; }
}
.demo-stat-number.color-pink { color: #ec4899 !important; }
.demo-stat-number.color-cyan { color: #06b6d4 !important; }
.demo-stat-number.color-purple { color: #a855f7 !important; }
.demo-stat-number.color-green { color: #10b981 !important; }
.demo-stat-number.color-orange { color: #f97316 !important; }
.demo-stat-label {
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
}

/* ── GALLERY SECTION ── */
.demo-gallery-section {
    padding: 6rem 0 !important;
    background: #fefce8 !important; /* yellow-50 */
    position: relative !important;
}
.demo-gallery-badge {
    display: inline-block !important;
    padding: 0.35rem 1rem !important;
    background: white !important;
    color: #0891b2 !important; /* cyan-600 */
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 0.75rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.demo-gallery-card {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 3rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    border: 4px solid white !important;
    transition: all 0.5s !important;
}
.demo-gallery-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
    border-color: #a5f3fc !important; /* cyan-200 */
}
.demo-gallery-img-wrap {
    aspect-ratio: 4/5 !important;
}
.demo-gallery-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s ease-out !important;
}
.demo-gallery-card:hover .demo-gallery-img-wrap img {
    transform: scale(1.1) !important;
}
.demo-gallery-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(22, 78, 99, 0.8), transparent, transparent) !important; /* cyan-900 */
    opacity: 0 !important;
    transition: opacity 0.3s !important;
}
.demo-gallery-card:hover .demo-gallery-overlay {
    opacity: 1 !important;
}
.demo-gallery-info {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1.5rem !important;
    transform: translateY(1rem) !important;
    opacity: 0 !important;
    transition: all 0.3s !important;
}
.demo-gallery-card:hover .demo-gallery-info {
    transform: translateY(0) !important;
    opacity: 1 !important;
}
.demo-gallery-info h3 {
    color: white !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
}
.demo-gallery-info p {
    color: #a5f3fc !important; /* cyan-200 */
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
}
.demo-btn-cyan {
    display: inline-flex !important;
    align-items: center !important;
    padding: 1rem 2rem !important;
    background: #06b6d4 !important; /* cyan-500 */
    color: white !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    border: 4px solid #a5f3fc !important; /* cyan-200 */
    transition: all 0.3s !important;
    text-decoration: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}
.demo-btn-cyan:hover {
    background: #0891b2 !important; /* cyan-600 */
    border-color: #67e8f9 !important; /* cyan-300 */
    color: white !important;
}

/* ── CTA SECTION ── */
.demo-cta-section {
    padding: 6rem 0 !important;
    background: white !important;
    position: relative !important;
}
.demo-cta-box {
    background: #ec4899 !important; /* pink-500 */
    border-radius: 4rem !important;
    padding: 3rem 1.5rem !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(244, 114, 182, 0.5) !important;
    border: 8px solid #f9a8d4 !important; /* pink-300 */
}
@media (min-width: 768px) {
    .demo-cta-box { padding: 5rem 3rem !important; }
}
.demo-cta-bg-pattern {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0.1 !important;
    background-image: radial-gradient(circle at 2px 2px, white 2px, transparent 0) !important;
    background-size: 32px 32px !important;
}
.demo-cta-content {
    position: relative !important;
    z-index: 10 !important;
}
.demo-cta-title {
    font-size: 2.25rem !important;
    font-weight: 900 !important;
    color: white !important;
    margin-bottom: 1.5rem !important;
}
@media (min-width: 768px) {
    .demo-cta-title { font-size: 3rem !important; }
}
.demo-cta-desc {
    font-size: 1.25rem !important;
    color: #fce7f3 !important; /* pink-100 */
    margin-bottom: 2.5rem !important;
    font-weight: 500 !important;
    max-width: 42rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.demo-btn-white {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.25rem 2.5rem !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: #db2777 !important; /* pink-600 */
    background: white !important;
    border-radius: 50px !important;
    border: 4px solid #fbcfe8 !important; /* pink-200 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
}
.demo-btn-white:hover {
    transform: scale(1.05) !important;
    background: #fef08a !important; /* yellow-100 */
    color: #be185d !important; /* pink-700 */
}

/* ── TESTIMONIALS SECTION ── */
.demo-testimonials-section {
    padding: 6rem 0 !important;
    background: #f8fafc !important; /* slate-50 */
    border-top: 4px dashed #f1f5f9 !important; /* slate-100 */
    position: relative !important;
}
.demo-testimonials-badge {
    display: inline-block !important;
    padding: 0.35rem 1rem !important;
    background: #f3e8ff !important; /* purple-100 */
    color: #7e22ce !important; /* purple-700 */
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 0.75rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.demo-testimonials-carousel {
    display: flex !important;
    overflow-x: auto !important;
    gap: 2rem !important;
    padding-bottom: 2rem !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}
.demo-testimonials-carousel::-webkit-scrollbar {
    display: none !important;
}
.demo-testimonial-card {
    flex: 0 0 100% !important;
    background: rgba(250, 245, 255, 0.5) !important; /* purple-50/50 */
    border-radius: 3rem !important;
    padding: 2rem !important;
    border: 2px solid #f3e8ff !important; /* purple-100 */
    scroll-snap-align: start !important;
    transition: all 0.5s !important;
}
@media (min-width: 768px) {
    .demo-testimonial-card { flex: 0 0 calc(33.333% - 1.4rem) !important; }
}
.demo-testimonial-card:hover {
    border-color: #d8b4fe !important; /* purple-300 */
    background: #faf5ff !important; /* purple-50 */
}
.demo-testimonial-stars {
    display: flex !important;
    gap: 0.25rem !important;
    margin-bottom: 1.5rem !important;
    color: #facc15 !important; /* yellow-400 */
}
.demo-testimonial-content {
    color: #334155 !important; /* slate-700 */
    font-weight: 500 !important;
    font-size: 1.125rem !important;
    line-height: 1.8 !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
    font-style: italic !important;
}
.demo-testimonial-author {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
}
.demo-testimonial-avatar {
    width: 4rem !important;
    height: 4rem !important;
    border-radius: 50% !important;
    border: 4px solid white !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    object-fit: cover !important;
}
.demo-testimonial-avatar-placeholder {
    width: 4rem !important;
    height: 4rem !important;
    border-radius: 50% !important;
    background: #e9d5ff !important; /* purple-200 */
    color: #9333ea !important; /* purple-600 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    border: 4px solid white !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}
.demo-testimonial-name {
    font-weight: 700 !important;
    color: #1e293b !important; /* slate-800 */
    margin: 0 0 0.25rem 0 !important;
}
.demo-testimonial-role {
    color: #9333ea !important; /* purple-600 */
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    margin: 0 !important;
}