/* ═══════════════════════════════════════════════════════════
   روضة التميز — Altamjuz Kindergarten — Main Stylesheet
   Full RTL, 3D Effects, Glassmorphism, Animations
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
    --blue: #163d88;
    --blue2: #2f63c7;
    --blue3: #4f8cf7;
    --blue-light: #eaf1ff;
    --gold: #f7b500;
    --gold2: #ffd560;
    --gold-light: #fff8e1;
    --green: #22c55e;
    --red: #ef4444;
    --purple: #7c3aed;
    --bg: #f5f8fd;
    --text: #17324d;
    --muted: #6f7d91;
    --border: #e2e8f0;
    --white: #ffffff;
    --shadow-3d: 0 20px 60px rgba(22,61,136,.15), 0 8px 20px rgba(22,61,136,.08);
    --shadow-sm: 0 4px 12px rgba(22,61,136,.08);
    --shadow-md: 0 8px 30px rgba(22,61,136,.12);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;
    --transition: .3s cubic-bezier(.4,0,.2,1);
    --font: 'Cairo', sans-serif;

    /* ── Fluid Typography (Mobile-first) ── */
    --fs-hero: clamp(1.75rem, 4vw + 0.5rem, 3.2rem);
    --fs-hero-sub: clamp(0.95rem, 1.5vw + 0.4rem, 1.25rem);
    --fs-h1: clamp(1.5rem, 3vw + 0.5rem, 2.8rem);
    --fs-h2: clamp(1.3rem, 2.5vw + 0.4rem, 2.2rem);
    --fs-h3: clamp(1.1rem, 2vw + 0.3rem, 1.6rem);
    --fs-body: clamp(0.92rem, 0.5vw + 0.8rem, 1.05rem);
    --fs-small: clamp(0.78rem, 0.3vw + 0.7rem, 0.88rem);
    --fs-xs: clamp(0.68rem, 0.2vw + 0.6rem, 0.78rem);

    /* ── Fluid Spacing ── */
    --space-section: clamp(44px, 6vw, 80px);
    --space-card: clamp(16px, 3vw, 28px);
    --space-container: clamp(14px, 3vw, 24px);

    /* ── Mobile-specific ── */
    --nav-height: 64px;
    --bottom-nav-height: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    direction: inherit;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
}
/* Body scroll lock when mobile menu/sidebar is open */
body.menu-open { overflow: hidden; position: fixed; width: 100%; }
a { text-decoration: none; color: inherit; transition: color var(--transition); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    border: none;
    outline: none;
}
button { cursor: pointer; }
.icon {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
}
.icon-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24; }

/* ── Container ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container-sm { max-width: 900px; margin: 0 auto; padding: 0 20px; }

/* ── Section ── */
.section { padding: 80px 0; position: relative; }
.section-title {
    text-align: center;
    margin-bottom: 50px;
}
.section-title h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 12px;
}
.section-title p {
    color: var(--muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}
.section-title .line {
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    border-radius: 2px;
    margin: 16px auto 0;
}

/* ═══════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════ */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 14px 0;
    transition: all .35s cubic-bezier(.4,0,.2,1);
}
.navbar.scrolled {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 1px 0 rgba(22,61,136,.06), 0 4px 24px rgba(22,61,136,.08);
    padding: 6px 0;
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ── Brand ── */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.navbar-brand img,
.navbar-brand .brand-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
    transition: transform var(--transition);
}
.navbar-brand .brand-logo:hover { transform: scale(1.06) rotate(-2deg); }
.navbar-brand .brand-text {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--white);
    white-space: nowrap;
    transition: color var(--transition);
}
.navbar.scrolled .navbar-brand .brand-text { color: var(--blue); }

/* ── Nav Links ── */
.navbar-links {
    display: flex;
    align-items: center;
    gap: 2px;
}
.navbar-links a:not(.btn):not(.btn-admin-link) {
    color: rgba(255,255,255,.85);
    font-weight: 600;
    font-size: .87rem;
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    position: relative;
    white-space: nowrap;
}
/* Animated underline */
.navbar-links a:not(.btn):not(.btn-admin-link)::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 11px;
    left: 11px;
    height: 2.5px;
    background: var(--gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.navbar-links a:not(.btn):not(.btn-admin-link):hover::after,
.navbar-links a:not(.btn):not(.btn-admin-link).active::after {
    transform: scaleX(1);
}
.navbar-links a:not(.btn):not(.btn-admin-link):hover {
    color: var(--white);
}
.navbar-links a:not(.btn):not(.btn-admin-link).active {
    color: var(--white);
}
/* Scrolled state */
.navbar.scrolled .navbar-links a:not(.btn):not(.btn-admin-link) { color: var(--text); }
.navbar.scrolled .navbar-links a:not(.btn):not(.btn-admin-link):hover,
.navbar.scrolled .navbar-links a:not(.btn):not(.btn-admin-link).active { color: var(--blue); }
.navbar.scrolled .navbar-links a:not(.btn):not(.btn-admin-link)::after { background: var(--blue2); }

/* ── Register CTA Button ── */
.navbar-links .btn.btn-gold {
    font-size: .83rem;
    padding: 7px 18px;
    white-space: nowrap;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(247,181,0,.3);
    transition: all var(--transition);
}
.navbar-links .btn.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(247,181,0,.4);
}

/* ── Language Toggle (pill) ── */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.2);
    color: var(--white);
    padding: 6px 14px;
    border-radius: 50px;
    font-family: var(--font);
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.lang-toggle .icon {
    font-size: 17px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'opsz' 20;
}
.lang-toggle:hover {
    background: rgba(255,255,255,.24);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.navbar.scrolled .lang-toggle,
.navbar-inner .lang-toggle {
    background: var(--blue-light);
    border-color: transparent;
    color: var(--blue);
}
.navbar.scrolled .lang-toggle:hover,
.navbar-inner .lang-toggle:hover {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}
.lang-label { letter-spacing: .5px; }

/* ── Admin Link (circle) ── */
.btn-admin-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    background: rgba(255,255,255,.12) !important;
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 50% !important;
    transition: all var(--transition);
    flex-shrink: 0;
}
.btn-admin-link .icon { font-size: 18px !important; }
.btn-admin-link:hover {
    background: rgba(255,255,255,.24) !important;
    transform: translateY(-1px);
}
.navbar.scrolled .btn-admin-link,
.navbar-inner .btn-admin-link {
    background: var(--blue-light) !important;
    border-color: transparent;
}
.navbar.scrolled .btn-admin-link:hover,
.navbar-inner .btn-admin-link:hover {
    background: var(--blue) !important;
    border-color: var(--blue);
    color: var(--white);
}
.navbar.scrolled .btn-admin-link:hover .icon,
.navbar-inner .btn-admin-link:hover .icon { color: var(--white); }

/* ── Mobile Toggle (Animated Hamburger) ── */
.mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.2);
    color: var(--white);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    transition: all var(--transition);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}
.mobile-toggle:hover { background: rgba(255,255,255,.24); }
.navbar.scrolled .mobile-toggle,
.navbar-inner .mobile-toggle {
    color: var(--blue);
    background: var(--blue-light);
    border-color: transparent;
}

/* Hamburger bars */
.hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 18px;
    position: relative;
}
.hamburger-line {
    display: block;
    width: 22px;
    height: 2.5px;
    border-radius: 2px;
    background: currentColor;
    transition: all .4s cubic-bezier(.68,-.55,.265,1.55);
    position: absolute;
}
.hamburger-line:nth-child(1) { top: 0; }
.hamburger-line:nth-child(2) { top: 50%; transform: translateY(-50%); width: 16px; }
.hamburger-line:nth-child(3) { bottom: 0; width: 18px; }

/* Hamburger → X animation when menu is open */
.mobile-menu.open ~ .navbar .mobile-toggle .hamburger-line:nth-child(1),
.mobile-toggle.is-active .hamburger-line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 22px;
}
.mobile-menu.open ~ .navbar .mobile-toggle .hamburger-line:nth-child(2),
.mobile-toggle.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
}
.mobile-menu.open ~ .navbar .mobile-toggle .hamburger-line:nth-child(3),
.mobile-toggle.is-active .hamburger-line:nth-child(3) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    width: 22px;
}

/* ── Inner page navbar (solid bg) ── */
.navbar-inner {
    background: var(--white);
    box-shadow: 0 1px 0 rgba(22,61,136,.06), 0 4px 20px rgba(22,61,136,.06);
    padding: 6px 0;
}
.navbar-inner .navbar-brand .brand-text { color: var(--blue); }
.navbar-inner .navbar-links a:not(.btn):not(.btn-admin-link) { color: var(--text); }
.navbar-inner .navbar-links a:not(.btn):not(.btn-admin-link):hover,
.navbar-inner .navbar-links a:not(.btn):not(.btn-admin-link).active { color: var(--blue); }
.navbar-inner .navbar-links a:not(.btn):not(.btn-admin-link)::after { background: var(--blue2); }
.navbar-inner .mobile-toggle { color: var(--blue); background: var(--blue-light); border-color: transparent; }

/* ═══════════════════════════════════════════
   MOBILE MENU — Premium Slide Panel
   ═══════════════════════════════════════════ */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(6,8,25,.55);
    backdrop-filter: blur(10px) saturate(1.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.6);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s ease;
}
.mobile-menu.open { opacity: 1; visibility: visible; }

.mobile-menu-content {
    position: absolute;
    top: 0; right: 0;
    width: 320px; max-width: 85vw;
    height: 100%;
    background: linear-gradient(180deg, #0f2b5e 0%, #163d88 40%, #1a458f 100%);
    padding: 0;
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.32,.72,.35,1);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: -12px 0 50px rgba(22,61,136,.2);
    display: flex;
    flex-direction: column;
}
[dir="ltr"] .mobile-menu-content {
    right: auto; left: 0;
    transform: translateX(-100%);
    box-shadow: 12px 0 50px rgba(22,61,136,.2);
}
.mobile-menu.open .mobile-menu-content { transform: translateX(0); }

/* Gold accent line on menu panel */
.mobile-menu-content::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gold), var(--blue3), var(--gold));
    background-size: 100% 200%;
    animation: menuAccentShimmer 3s ease-in-out infinite;
    z-index: 1;
}
[dir="ltr"] .mobile-menu-content::after { right: auto; left: 0; }
@keyframes menuAccentShimmer {
    0%, 100% { background-position: 0 0; }
    50% { background-position: 0 100%; }
}

/* Branded header in mobile menu */
.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(201,169,98,.2);
    background: linear-gradient(135deg, rgba(15,43,94,.8) 0%, rgba(22,61,136,.6) 100%);
    flex-shrink: 0;
    position: relative;
}
.mobile-menu-header .navbar-brand { gap: 8px; }
.mobile-menu-header .navbar-brand .brand-logo { height: 36px; border-radius: 8px; }
.mobile-menu-header .navbar-brand .brand-text {
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
}
.mobile-menu-close {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.7);
    width: 38px; height: 38px;
    border-radius: 10px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
    cursor: pointer;
}
.mobile-menu-close:hover { background: var(--red); color: var(--white); border-color: var(--red); }

/* Staggered link animations */
.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px;
    flex: 1;
}
.mobile-menu-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .95rem;
    color: rgba(255,255,255,.8);
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(20px);
}
[dir="ltr"] .mobile-menu-links a { transform: translateX(-20px); }
.mobile-menu.open .mobile-menu-links a {
    opacity: 1;
    transform: translateX(0);
}
/* Staggered delays for each link */
.mobile-menu.open .mobile-menu-links a:nth-child(1)  { transition-delay: .06s; }
.mobile-menu.open .mobile-menu-links a:nth-child(2)  { transition-delay: .09s; }
.mobile-menu.open .mobile-menu-links a:nth-child(3)  { transition-delay: .12s; }
.mobile-menu.open .mobile-menu-links a:nth-child(4)  { transition-delay: .15s; }
.mobile-menu.open .mobile-menu-links a:nth-child(5)  { transition-delay: .18s; }
.mobile-menu.open .mobile-menu-links a:nth-child(6)  { transition-delay: .21s; }
.mobile-menu.open .mobile-menu-links a:nth-child(7)  { transition-delay: .24s; }
.mobile-menu.open .mobile-menu-links a:nth-child(8)  { transition-delay: .27s; }
.mobile-menu.open .mobile-menu-links a:nth-child(9)  { transition-delay: .30s; }
.mobile-menu.open .mobile-menu-links a:nth-child(10) { transition-delay: .33s; }
.mobile-menu.open .mobile-menu-links a:nth-child(11) { transition-delay: .36s; }
.mobile-menu.open .mobile-menu-links a:nth-child(12) { transition-delay: .39s; }
.mobile-menu.open .mobile-menu-links a:nth-child(13) { transition-delay: .42s; }
.mobile-menu.open .mobile-menu-links a:nth-child(14) { transition-delay: .45s; }
.mobile-menu.open .mobile-menu-links a:nth-child(15) { transition-delay: .48s; }
.mobile-menu.open .mobile-menu-links a:nth-child(16) { transition-delay: .51s; }

/* Ripple effect on touch */
.mobile-menu-links a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), var(--blue-light) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .3s;
}
.mobile-menu-links a:active::before { opacity: 1; }

.mobile-menu-links a .icon {
    font-size: 22px;
    color: rgba(255,255,255,.5);
    transition: all .25s ease;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.mobile-menu-links a:hover,
.mobile-menu-links a.active {
    background: rgba(255,255,255,.1);
    color: #fff;
}
.mobile-menu-links a.active {
    background: linear-gradient(135deg, rgba(201,169,98,.15), rgba(255,255,255,.08));
    border-right: 3px solid var(--gold);
}
[dir="ltr"] .mobile-menu-links a.active {
    border-right: none;
    border-left: 3px solid var(--gold);
}
.mobile-menu-links a:hover .icon,
.mobile-menu-links a.active .icon {
    color: var(--gold);
    font-variation-settings: 'FILL' 1;
}

/* Divider before utility links */
.mobile-menu-divider {
    height: 1px;
    background: rgba(255,255,255,.1);
    margin: 8px 0;
}

/* Mobile language toggle */
.mobile-lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.85);
    font-family: var(--font);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: all var(--transition);
    margin-top: 4px;
}
.mobile-lang-toggle:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
    border-color: rgba(255,255,255,.25);
}
.mobile-lang-toggle .icon { font-size: 22px; }

/* Mobile menu footer */
.mobile-menu-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(10,25,60,.5);
    flex-shrink: 0;
}

/* Mobile menu — section labels & CTA card */
.mobile-menu-section-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    color: rgba(201,169,98,.8);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 16px 16px 6px;
    margin-top: 4px;
}
.mobile-menu-cta {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 16px !important;
    background: linear-gradient(135deg, rgba(201,169,98,.15), rgba(247,181,0,.08)) !important;
    border: 1.5px solid rgba(201,169,98,.25) !important;
    border-radius: 14px !important;
    margin-bottom: 8px;
    position: relative;
}
.mobile-menu-cta .icon.icon-filled {
    font-size: 28px;
    color: var(--gold);
}
.mobile-menu-cta strong {
    display: block;
    color: var(--gold);
    font-size: .95rem;
    line-height: 1.3;
}
.mobile-menu-cta small {
    display: block;
    color: rgba(255,255,255,.5);
    font-size: .76rem;
    font-weight: 400;
    margin-top: 2px;
}
.mobile-menu-cta .cta-arrow {
    margin-inline-start: auto;
    color: var(--gold);
    font-size: 20px;
    opacity: .5;
    transition: transform .25s ease;
}
[dir="ltr"] .mobile-menu-cta .cta-arrow {
    transform: rotate(180deg);
}
.mobile-menu-cta:active {
    background: linear-gradient(135deg, var(--gold), var(--gold2)) !important;
}
.mobile-menu-cta:active strong,
.mobile-menu-cta:active .icon,
.mobile-menu-cta:active .cta-arrow {
    color: #fff !important;
}

/* ═══════════════════════════════════════════
   HERO SLIDER (Homepage)
   ═══════════════════════════════════════════ */
.hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: #0a1f4e;
}

/* Slides container */
.hero-slides { position: absolute; inset: 0; z-index: 1; }
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity 1.2s cubic-bezier(.4,0,.2,1), visibility 1.2s;
}
.hero-slide.active { opacity: 1; visibility: visible; }

/* Slide background — image */
div.hero-slide-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    background-color: #0a1f4e;
    will-change: transform;
}
/* Ken Burns — multiple direction variants */
.hero-slide.active div.hero-slide-bg { animation: heroKB1 10s ease-out forwards; }
.hero-slide.active.kb-2 div.hero-slide-bg { animation: heroKB2 10s ease-out forwards; }
.hero-slide.active.kb-3 div.hero-slide-bg { animation: heroKB3 10s ease-out forwards; }
.hero-slide.active.kb-4 div.hero-slide-bg { animation: heroKB4 10s ease-out forwards; }
@keyframes heroKB1 {
    from { transform: scale(1.15); }
    to   { transform: scale(1); }
}
@keyframes heroKB2 {
    from { transform: scale(1.12) translate(-2%, 1%); }
    to   { transform: scale(1) translate(0); }
}
@keyframes heroKB3 {
    from { transform: scale(1.12) translate(2%, -1%); }
    to   { transform: scale(1) translate(0); }
}
@keyframes heroKB4 {
    from { transform: scale(1.1) translate(0, 2%); }
    to   { transform: scale(1) translate(0); }
}
/* Slide background — video */
video.hero-slide-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}

/* Dark overlay — with subtle animated gradient */
.hero-slide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(10,31,78,.75) 0%, rgba(30,64,175,.55) 50%, rgba(37,99,235,.45) 100%);
    z-index: 1;
}

/* Slide content */
.hero-slide-content {
    position: relative; z-index: 3;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
    min-height: 100vh; padding: 120px 20px 160px;
}
.hero-slide-content h1 {
    font-size: 3.2rem; font-weight: 900; color: #fff;
    margin-bottom: 20px; line-height: 1.3;
    opacity: 0; transform: translateY(40px) scale(.96);
    filter: blur(6px);
    transition: opacity .8s cubic-bezier(.4,0,.2,1) .2s,
               transform .8s cubic-bezier(.4,0,.2,1) .2s,
               filter .8s cubic-bezier(.4,0,.2,1) .2s;
}
.hero-slide-content p {
    font-size: 1.3rem; color: rgba(255,255,255,.85);
    max-width: 650px; margin: 0 auto 36px;
    opacity: 0; transform: translateY(30px);
    filter: blur(4px);
    transition: opacity .8s cubic-bezier(.4,0,.2,1) .45s,
               transform .8s cubic-bezier(.4,0,.2,1) .45s,
               filter .8s cubic-bezier(.4,0,.2,1) .45s;
}
.hero-slide-content .hero-btns {
    opacity: 0; transform: translateY(25px);
    filter: blur(3px);
    transition: opacity .8s cubic-bezier(.4,0,.2,1) .7s,
               transform .8s cubic-bezier(.4,0,.2,1) .7s,
               filter .8s cubic-bezier(.4,0,.2,1) .7s;
}
.hero-slide.active .hero-slide-content h1,
.hero-slide.active .hero-slide-content p,
.hero-slide.active .hero-slide-content .hero-btns {
    opacity: 1; transform: translateY(0) scale(1); filter: blur(0);
}

.hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Trust bar at bottom */
.hero-trust-bar {
    position: absolute; bottom: 140px; left: 0; right: 0;
    z-index: 5; display: flex; gap: 24px;
    justify-content: center; flex-wrap: wrap; padding: 0 20px;
}
.trust-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50px;
    color: rgba(255,255,255,.9);
    font-size: .9rem; font-weight: 600;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.trust-badge .icon { font-size: 20px; color: var(--gold); }

/* Slider Arrows */
.hero-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 6; background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
    width: 48px; height: 48px; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .2s;
}
.hero-slider-arrow:hover { background: rgba(255,255,255,.25); }
.hero-arrow-prev { right: 24px; }
.hero-arrow-next { left: 24px; }
[dir="ltr"] .hero-arrow-prev { right: auto; left: 24px; }
[dir="ltr"] .hero-arrow-next { left: auto; right: 24px; }
.hero-slider-arrow .icon { font-size: 28px; }

/* Dots */
.hero-slider-dots {
    position: absolute; bottom: 100px; left: 50%;
    transform: translateX(-50%);
    z-index: 6; display: flex; gap: 10px;
}
.hero-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: rgba(255,255,255,.3); border: 2px solid rgba(255,255,255,.4);
    cursor: pointer; transition: all .3s; padding: 0;
}
.hero-dot.active {
    background: var(--gold); border-color: var(--gold);
    width: 32px; border-radius: 6px;
}

/* Progress bar */
.hero-slider-progress {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: rgba(255,255,255,.15); z-index: 6;
}
.hero-progress-bar {
    height: 100%; width: 0; background: var(--gold);
    transition: width .1s linear;
}

/* ── Floating 3D Shapes ── */
.floating-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.shape {
    position: absolute;
    opacity: .15;
}
.shape-cube {
    width: 60px; height: 60px;
    border: 3px solid var(--gold);
    border-radius: 12px;
    animation: rotateCube 20s linear infinite;
}
.shape-ring {
    width: 80px; height: 80px;
    border: 3px solid var(--blue3);
    border-radius: 50%;
    animation: rotateRing 15s linear infinite;
}
.shape-sphere {
    width: 40px; height: 40px;
    background: radial-gradient(circle at 30% 30%, var(--gold2), var(--gold));
    border-radius: 50%;
    animation: floatSphere 12s ease-in-out infinite;
}
.shape-1 { top: 15%; right: 10%; }
.shape-2 { top: 60%; right: 85%; }
.shape-3 { top: 25%; right: 75%; }
.shape-4 { top: 70%; right: 20%; }
.shape-5 { top: 40%; right: 50%; }
.shape-6 { top: 80%; right: 60%; }

@keyframes rotateCube {
    from { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    to { transform: rotate(360deg) scale(1); }
}
@keyframes rotateRing {
    from { transform: rotate(0deg) translateY(0); }
    50% { transform: rotate(180deg) translateY(-20px); }
    to { transform: rotate(360deg) translateY(0); }
}
@keyframes floatSphere {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.15); }
}
@keyframes trustFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion — disable heavy hero animations */
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: opacity .4s ease; }
    .hero-slide.active div.hero-slide-bg,
    .hero-slide.active.kb-2 div.hero-slide-bg,
    .hero-slide.active.kb-3 div.hero-slide-bg,
    .hero-slide.active.kb-4 div.hero-slide-bg { animation: none; }
    .hero-slide-content h1,
    .hero-slide-content p,
    .hero-slide-content .hero-btns { transition-duration: .01s; filter: none !important; }
    .shape { animation: none !important; }
}

/* ── Wave Divider ── */
.wave-divider {
    position: absolute;
    bottom: -2px;
    left: 0; right: 0;
    line-height: 0;
    z-index: 3;
}
.wave-divider svg { width: 100%; height: auto; display: block; }

/* ═══════════════════════════════════════════
   PAGE HERO — Premium Banner (Inner Pages)
   ═══════════════════════════════════════════ */
.page-hero {
    background: linear-gradient(160deg, #040e24 0%, #0a1f4e 30%, var(--blue) 65%, #1a3a7a 100%);
    padding: 160px 0 110px;
    position: relative;
    overflow: hidden;
    text-align: center;
}
/* Dot pattern */
.page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 28px 28px;
    z-index: 1;
}
/* Ambient gold glow */
.page-hero::after {
    content: '';
    position: absolute;
    top: -40%; right: -15%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(212,175,55,.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
/* Content z-index above shapes */
.page-hero-content {
    position: relative;
    z-index: 3;
}
/* Featured Icon Badge */
.page-hero-icon {
    width: 80px; height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212,175,55,.15), rgba(212,175,55,.05));
    border: 2px solid rgba(212,175,55,.3);
    border-radius: 24px;
    animation: floatSphere 6s ease-in-out infinite;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.page-hero-icon .icon {
    font-size: 36px;
    color: var(--gold);
}
.page-hero h1 {
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--white);
    margin-bottom: 8px;
    position: relative;
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.page-hero-sub {
    color: rgba(255,255,255,.7);
    font-size: 1.1rem;
    margin-top: 4px;
    margin-bottom: 0;
    position: relative;
    max-width: 600px;
    margin-inline: auto;
}
.page-hero .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.6);
    font-size: .9rem;
    background: rgba(255,255,255,.07);
    padding: 8px 24px;
    border-radius: 50px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    position: relative;
    margin-top: 20px;
}
.page-hero .breadcrumb a { color: rgba(255,255,255,.7); transition: color .2s; }
.page-hero .breadcrumb a:hover { color: var(--gold); }
.page-hero .breadcrumb .icon { font-size: 16px; }
/* Wave at bottom */
.page-hero-wave {
    position: absolute;
    bottom: -2px;
    left: 0; right: 0;
    line-height: 0;
    z-index: 4;
}
.page-hero-wave svg { width: 100%; height: auto; display: block; }
/* Floating shapes inside page hero */
.page-hero .floating-shapes { z-index: 2; }

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50px;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    border: none;
}
.btn .icon { font-size: 20px; }
.btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color: var(--blue);
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transition: left .6s;
}
.btn-primary:hover::after { left: 100%; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(247,181,0,.4); }
.btn-secondary {
    background: rgba(255,255,255,.15);
    color: var(--white);
    border: 2px solid rgba(255,255,255,.3);
}
.btn-secondary:hover {
    background: rgba(255,255,255,.25);
    transform: translateY(-2px);
}
.btn-blue {
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    color: var(--white);
}
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(22,61,136,.3); }
.btn-outline {
    background: transparent;
    border: 2px solid var(--blue);
    color: var(--blue);
}
.btn-outline:hover { background: var(--blue); color: var(--white); }
.btn-sm { padding: 8px 20px; font-size: .9rem; border-radius: 8px; }
.btn-icon {
    width: 40px; height: 40px;
    padding: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-green { background: var(--green); color: var(--white); }
.btn-red { background: var(--red); color: var(--white); }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: var(--blue); }

/* ═══════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════ */
.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition);
}
.card:hover {
    box-shadow: var(--shadow-3d);
    transform: translateY(-6px);
}
.card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.card-body { padding: 24px; }
.card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 8px;
    line-height: 1.5;
}
.card-text {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.7;
}
.card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: .85rem;
    margin-top: 12px;
}
.card-meta .icon { font-size: 18px; }
.card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Tilt Card ── */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* ── Glass Card ── */
.glass-card {
    background: rgba(255,255,255,.6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.3);
}

/* ── Stat Card — Premium ── */
.stat-card {
    position: relative;
    text-align: center;
    padding: 44px 28px 40px;
    border-radius: 24px;
    background: linear-gradient(165deg, #ffffff 0%, #f0f5ff 100%);
    box-shadow: 0 4px 24px rgba(22,61,136,.07), 0 1px 4px rgba(22,61,136,.04);
    transition: all .45s cubic-bezier(.25,.8,.25,1);
    overflow: hidden;
    border: 1px solid rgba(22,61,136,.06);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--gold), var(--blue2));
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity .4s ease;
}
.stat-card::after {
    content: '';
    position: absolute;
    bottom: -40px; right: -40px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22,61,136,.04) 0%, transparent 70%);
    transition: transform .5s ease;
}
.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(22,61,136,.12), 0 8px 20px rgba(22,61,136,.08);
    border-color: rgba(22,61,136,.12);
}
.stat-card:hover::before { opacity: 1; }
.stat-card:hover::after { transform: scale(1.4); }

.stat-card .stat-icon {
    width: 76px; height: 76px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    position: relative;
    transition: all .4s cubic-bezier(.25,.8,.25,1);
}
.stat-card .stat-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 26px;
    border: 2px dashed rgba(255,255,255,.25);
    animation: statIconSpin 20s linear infinite;
}
@keyframes statIconSpin {
    to { transform: rotate(360deg); }
}
.stat-card:hover .stat-icon {
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 12px 28px rgba(22,61,136,.18);
}

.stat-card .stat-number {
    font-size: 2.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.stat-card .stat-plus {
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 2px;
}
.stat-card .stat-label {
    color: var(--muted);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.stat-card .stat-divider {
    width: 40px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold2));
    margin: 14px auto;
    transition: width .4s ease;
}
.stat-card:hover .stat-divider { width: 64px; }

/* ── Feature Card — Premium ── */
.feature-card {
    padding: 40px 30px 36px;
    border-radius: 20px;
    background: linear-gradient(165deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 4px 20px rgba(22,61,136,.06), 0 1px 3px rgba(22,61,136,.04);
    text-align: center;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(22,61,136,.04);
}
/* Top accent line */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    border-radius: 0 0 4px 4px;
    opacity: 0;
    transition: opacity .4s, left .4s, right .4s;
}
/* Ambient glow on hover */
.feature-card::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(212,175,55,.04) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .5s;
    pointer-events: none;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(22,61,136,.12), 0 8px 20px rgba(22,61,136,.06);
    border-color: rgba(212,175,55,.15);
}
.feature-card:hover::before {
    opacity: 1;
    left: 10%; right: 10%;
}
.feature-card:hover::after { opacity: 1; }
.feature-card .feature-icon {
    width: 76px; height: 76px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    font-size: 34px;
    color: var(--white);
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s;
}
.feature-card:hover .feature-icon {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
/* Icon ring decoration */
.feature-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 26px;
    border: 2px dashed rgba(255,255,255,.15);
    animation: featureRingSpin 12s linear infinite;
}
@keyframes featureRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.feature-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.feature-card p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.75;
    position: relative;
    z-index: 1;
}

/* ── Animated British Flag ── */
.uk-flag {
    display: inline-block;
    position: relative;
    width: 32px; height: 20px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
    animation: flagWave 3s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.uk-flag svg { width: 100%; height: 100%; display: block; }
.uk-flag--lg { width: 44px; height: 28px; border-radius: 4px; }
.uk-flag--sm { width: 24px; height: 15px; border-radius: 2px; }

@keyframes flagWave {
    0%, 100% { transform: perspective(200px) rotateY(0deg); }
    25% { transform: perspective(200px) rotateY(4deg) scaleX(1.02); }
    50% { transform: perspective(200px) rotateY(0deg); }
    75% { transform: perspective(200px) rotateY(-4deg) scaleX(1.02); }
}

/* Pulsing glow behind flag */
.uk-flag-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.uk-flag-wrap::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 6px;
    background: radial-gradient(circle, rgba(0,36,125,.15) 0%, transparent 70%);
    animation: flagGlow 3s ease-in-out infinite;
    z-index: -1;
}
@keyframes flagGlow {
    0%, 100% { opacity: .4; transform: scale(1); }
    50% { opacity: .8; transform: scale(1.15); }
}

/* ── Features Marquee (Full-width continuous scroll) ── */
.features-marquee {
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
    padding: 16px 0;
}
.features-marquee::before,
.features-marquee::after {
    content: '';
    position: absolute; top: 0; bottom: 0; width: 100px;
    z-index: 2; pointer-events: none;
}
.features-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--blue-light, #eef4fb), transparent);
}
.features-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--blue-light, #eef4fb), transparent);
}
.features-marquee-track {
    display: flex;
    gap: 28px;
    width: max-content;
    animation: marqueeScroll 45s linear infinite;
    will-change: transform;
}
.features-marquee:hover .features-marquee-track {
    animation-play-state: running;
}
.features-marquee-track .feature-card {
    min-width: 320px;
    max-width: 340px;
    flex-shrink: 0;
}
@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-100% / 3)); }
}
[dir="ltr"] .features-marquee-track {
    animation-name: marqueeScrollLtr;
}
@keyframes marqueeScrollLtr {
    0%   { transform: translateX(calc(-100% / 3)); }
    100% { transform: translateX(0); }
}

/* Icon colors */
.icon-blue { background: linear-gradient(135deg, var(--blue), var(--blue2)); }
.icon-gold { background: linear-gradient(135deg, var(--gold), var(--gold2)); }
.icon-green { background: linear-gradient(135deg, #16a34a, var(--green)); }
.icon-purple { background: linear-gradient(135deg, #6d28d9, var(--purple)); }
.icon-red { background: linear-gradient(135deg, #dc2626, var(--red)); }

/* ═══════════════════════════════════════════
   GRIDS
   ═══════════════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ═══════════════════════════════════════════
   STATS SECTION
   ═══════════════════════════════════════════ */
.stats-section {
    background: linear-gradient(180deg, var(--white) 0%, #f4f7fc 100%);
    position: relative;
    overflow: hidden;
}
.stats-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22,61,136,.03) 0%, transparent 70%);
    pointer-events: none;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 960px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════
   NEWS SECTION
   ═══════════════════════════════════════════ */
.news-card .card-img { height: 200px; }
.news-card .card-body { padding: 20px 24px; }
.news-card .card-date {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: 10px;
}
.news-card .card-date .icon { font-size: 16px; }

/* ═══════════════════════════════════════════
   GALLERY SECTION
   ═══════════════════════════════════════════ */
.album-card { position: relative; border-radius: var(--radius); overflow: hidden; }
.album-card .album-img {
    width: 100%; height: 240px;
    object-fit: cover;
    transition: transform var(--transition);
}
.album-card:hover .album-img { transform: scale(1.05); }
.album-card .album-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 24px;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    color: var(--white);
}
.album-card .album-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.album-card .album-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    opacity: .85;
}
.album-card .featured-badge {
    position: absolute;
    top: 16px; right: 16px;
    background: var(--gold);
    color: var(--blue);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 700;
}

/* ── Lightbox ── */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}
.lightbox.active { display: flex; opacity: 1; }
.lightbox img { max-width: 90%; max-height: 85vh; border-radius: 8px; }
.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: rgba(255,255,255,.15);
    border: none;
    color: var(--white);
    width: 50px; height: 50px;
    border-radius: 50%;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.3); }
.lightbox-close { top: 20px; left: 20px; }
.lightbox-prev { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { left: 20px; top: 50%; transform: translateY(-50%); }

/* ── Lightbox Mobile ── */
@media (max-width: 768px) {
    .lightbox img { max-width: 96%; max-height: 75dvh; border-radius: 6px; }
    .lightbox-close, .lightbox-prev, .lightbox-next { width: 42px; height: 42px; font-size: 22px; }
    .lightbox-close { top: 14px; left: 14px; }
    .lightbox-prev { right: 10px; }
    .lightbox-next { left: 10px; }
}
@media (max-width: 480px) {
    .lightbox img { max-width: 100%; max-height: 70dvh; border-radius: 0; }
    .lightbox-prev, .lightbox-next { display: none; }
    .lightbox-close { top: 10px; left: 10px; width: 38px; height: 38px; font-size: 20px; }
}

/* ── News Detail Mobile ── */
.news-detail-body { padding: 32px; }
.news-detail-title { font-size: 1.8rem; font-weight: 800; color: var(--blue); margin-bottom: 20px; }
.news-detail-content { line-height: 2; color: var(--text); font-size: 1.05rem; }
.news-detail-en-title { font-size: 1.4rem; color: var(--blue); margin-bottom: 12px; }
.news-detail-en-content { line-height: 2; color: var(--muted); font-size: 1rem; }
@media (max-width: 768px) {
    .news-detail-body { padding: 22px 18px; }
    .news-detail-title { font-size: 1.4rem; margin-bottom: 14px; }
    .news-detail-content { font-size: 1rem; }
}
@media (max-width: 480px) {
    .news-detail-body { padding: 16px 14px; }
    .news-detail-title { font-size: 1.2rem; margin-bottom: 12px; }
    .news-detail-content { font-size: .92rem; line-height: 1.85; }
    .news-detail-en-title { font-size: 1.1rem; }
    .news-detail-en-content { font-size: .9rem; }
}

/* ═══════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════ */
.cta-banner {
    background: #112d5a;
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.cta-banner::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 28px 28px;
}
/* CTA wave transition */
.cta-wave {
    position: absolute;
    bottom: -2px;
    left: 0; right: 0;
    line-height: 0;
    z-index: 4;
}
.cta-wave svg { width: 100%; height: auto; display: block; }
.cta-banner h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 16px;
    position: relative;
}
.cta-banner p {
    color: rgba(255,255,255,.75);
    font-size: 1.1rem;
    margin-bottom: 32px;
    position: relative;
}
.cta-banner .hero-btns { position: relative; }

/* ═══════════════════════════════════════════
   CONTACT PAGE — Premium Redesign v2
   ═══════════════════════════════════════════ */

/* ── Info Cards Grid ── */
.cp-info-section { padding-bottom: 0; }
.cp-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.cp-info-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cp-info-card {
    position: relative;
    text-align: center;
    padding: 32px 20px 28px;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all .4s cubic-bezier(.4,0,.2,1);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}
.cp-info-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--blue3));
    border-radius: 4px 4px 0 0;
    transform: scaleX(0);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.cp-info-card:hover::before { transform: scaleX(1); }
.cp-info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(22,61,136,.12);
    border-color: var(--blue-light);
}
.cp-info-ring {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    position: relative;
}
.cp-info-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px dashed currentColor;
    opacity: .2;
    animation: cpRingSpin 12s linear infinite;
}
@keyframes cpRingSpin { to { transform: rotate(360deg); } }
.cp-ring-blue { background: linear-gradient(135deg, var(--blue), var(--blue3)); color: var(--blue); }
.cp-ring-gold { background: linear-gradient(135deg, #e6a800, var(--gold2)); color: var(--gold); }
.cp-ring-green { background: linear-gradient(135deg, #16a34a, #4ade80); color: var(--green); }
.cp-ring-purple { background: linear-gradient(135deg, #6d28d9, #a78bfa); color: var(--purple); }
.cp-info-ring .icon { font-size: 28px; color: #fff; }
.cp-info-card h4 {
    font-size: .95rem; font-weight: 800; color: var(--blue);
    margin-bottom: 4px;
}
.cp-info-card > p { color: var(--muted); font-size: .85rem; margin: 0; }
.cp-card-arrow {
    position: absolute;
    top: 14px; left: 14px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--blue-light);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: translate(6px, -6px);
    transition: all .3s ease;
}
[dir="ltr"] .cp-card-arrow { left: auto; right: 14px; }
.cp-card-arrow .icon { font-size: 16px; color: var(--blue); }
.cp-info-card:hover .cp-card-arrow { opacity: 1; transform: translate(0); }

/* ── Main Layout (Form + Sidebar) ── */
.cp-main-section { padding-top: 0; }
.cp-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    align-items: start;
}

/* ── Form Card ── */
.cp-form-card {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 40px;
    border: 1px solid var(--border);
    overflow: hidden;
}
.cp-form-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--blue), var(--blue3), var(--gold), var(--gold2));
    background-size: 300% 100%;
    animation: cpAccentSlide 6s ease-in-out infinite;
}
@keyframes cpAccentSlide {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.cp-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.cp-form-header-icon {
    width: 52px; height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gold-light), #fff8e1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cp-form-header-icon .icon { font-size: 28px; color: var(--gold); }
.cp-form-header h3 { font-size: 1.3rem; font-weight: 800; color: var(--blue); margin: 0; }
.cp-form-header p { color: var(--muted); font-size: .88rem; margin: 3px 0 0; }

/* ── Form Inputs ── */
.cp-label {
    display: flex; align-items: center; gap: 6px;
    font-size: .9rem; font-weight: 700; color: var(--text);
    margin-bottom: 8px;
}
.cp-label .icon { font-size: 18px; color: var(--blue3); }
.cp-label .required { color: var(--red); }
.cp-input-wrap {
    position: relative;
}
.cp-input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: .95rem;
    color: var(--text);
    transition: all .3s ease;
    outline: none;
}
.cp-input:focus {
    border-color: var(--blue3);
    box-shadow: 0 0 0 3px rgba(79,140,247,.12);
}
.cp-input-focus {
    position: absolute;
    bottom: 0; left: 50%; right: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--blue3));
    border-radius: 2px;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.cp-input:focus ~ .cp-input-focus { left: 0; right: 0; }
.cp-select { cursor: pointer; appearance: none; }
.cp-textarea { resize: vertical; min-height: 120px; }

/* ── Submit Button ── */
.cp-submit-btn {
    width: 100%;
    position: relative;
    padding: 16px 24px;
    border: none;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    color: #fff;
    font-size: 1rem; font-weight: 800;
    cursor: pointer;
    overflow: hidden;
    transition: all .3s ease;
    margin-top: 8px;
}
.cp-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(22,61,136,.25);
}
.cp-submit-text {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 8px;
}
.cp-submit-shine {
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transition: none;
}
.cp-submit-btn:hover .cp-submit-shine {
    animation: cpShine .8s ease forwards;
}
@keyframes cpShine { to { left: 150%; } }

/* ── Alerts ── */
.cp-alert {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 22px; border-radius: var(--radius);
    margin-bottom: 28px;
}
.cp-alert-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cp-alert-icon .icon { font-size: 20px; }
.cp-alert strong { display: block; font-size: .95rem; margin-bottom: 2px; }
.cp-alert p { font-size: .88rem; margin: 0; opacity: .85; }
.cp-alert-success {
    background: linear-gradient(135deg, #dcfce7, #f0fdf4);
    border: 1px solid #86efac; color: #16a34a;
}
.cp-alert-success .cp-alert-icon { background: #16a34a; }
.cp-alert-success .cp-alert-icon .icon { color: #fff; }
.cp-alert-error {
    background: linear-gradient(135deg, #fef2f2, #fff5f5);
    border: 1px solid #fecaca; color: #dc2626;
}
.cp-alert-error .cp-alert-icon { background: #dc2626; }
.cp-alert-error .cp-alert-icon .icon { color: #fff; }

/* ── Sidebar Cards ── */
.cp-sidebar-col { display: flex; flex-direction: column; gap: 20px; }
.cp-sidebar-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all .3s ease;
}
.cp-sidebar-card:hover { box-shadow: var(--shadow-md); }
.cp-sidebar-header {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--bg), var(--white));
    border-bottom: 1px solid var(--border);
}
.cp-sidebar-header-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.cp-sh-blue { background: linear-gradient(135deg, var(--blue), var(--blue3)); }
.cp-sh-gold { background: linear-gradient(135deg, #e6a800, var(--gold2)); }
.cp-sidebar-header-icon .icon { font-size: 18px; color: #fff; }
.cp-sidebar-header h4 { font-size: 1rem; font-weight: 700; color: var(--blue); margin: 0; }

/* Map Card */
.cp-map-card .cp-map-embed { position: relative; }
.cp-map-card .cp-map-embed iframe {
    width: 100%; height: 220px; border: 0; display: block;
}
.cp-map-caption {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px;
    font-size: .88rem; color: var(--muted);
    background: var(--bg);
    border-top: 1px solid var(--border);
}
.cp-map-caption .icon { font-size: 18px; color: var(--green); }

/* Hours Card */
.cp-hours-list { padding: 4px 0; }
.cp-hours-row {
    display: flex; justify-content: space-between;
    padding: 11px 22px;
    font-size: .9rem;
    border-bottom: 1px solid rgba(0,0,0,.04);
    transition: background .2s ease;
}
.cp-hours-row:last-child { border-bottom: none; }
.cp-hours-row:hover { background: var(--blue-light); }
.cp-day { font-weight: 600; color: var(--text); }
.cp-time.cp-open { color: var(--green); font-weight: 700; }
.cp-time.cp-closed { color: var(--red); font-weight: 600; }
.cp-hours-closed { opacity: .55; }
.cp-hours-closed:hover { opacity: 1; }

/* Links Card */
.cp-links-list { padding: 6px 0; }
.cp-link-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 22px;
    font-size: .9rem; font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.04);
    transition: all .25s ease;
}
.cp-link-item:last-child { border-bottom: none; }
.cp-link-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--blue-light);
    display: flex; align-items: center; justify-content: center;
    transition: all .25s ease;
}
.cp-link-icon .icon { font-size: 18px; color: var(--blue3); }
.cp-link-item span:nth-child(2) { flex: 1; }
.cp-link-arrow { font-size: 18px; color: var(--muted); transition: all .25s ease; }
.cp-link-item:hover {
    background: var(--blue-light);
    padding-right: 28px;
}
[dir="ltr"] .cp-link-item:hover { padding-right: 22px; padding-left: 28px; }
.cp-link-item:hover .cp-link-icon { background: var(--blue); }
.cp-link-item:hover .cp-link-icon .icon { color: #fff; }
.cp-link-item:hover .cp-link-arrow { transform: translateX(-4px); color: var(--blue); }
[dir="ltr"] .cp-link-item:hover .cp-link-arrow { transform: translateX(4px); }

/* ── CTA Section ── */
.cp-cta-section { padding: 0 0 80px; }
.cp-cta {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 56px 48px;
    text-align: center;
    color: var(--white);
    overflow: hidden;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue2) 50%, var(--blue3) 100%);
}
.cp-cta-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 15% 85%, rgba(247,181,0,.12) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(255,255,255,.06) 0%, transparent 50%);
    pointer-events: none;
}
.cp-cta::before {
    content: '';
    position: absolute;
    top: -60%; right: -15%;
    width: 320px; height: 320px;
    border: 2px solid rgba(255,255,255,.06);
    border-radius: 50%;
    animation: cpCtaPulse 6s ease-in-out infinite;
}
.cp-cta::after {
    content: '';
    position: absolute;
    bottom: -50%; left: -10%;
    width: 260px; height: 260px;
    border: 2px solid rgba(255,255,255,.04);
    border-radius: 50%;
    animation: cpCtaPulse 6s ease-in-out infinite 3s;
}
@keyframes cpCtaPulse {
    0%, 100% { transform: scale(1); opacity: .5; }
    50% { transform: scale(1.15); opacity: 1; }
}
.cp-cta-content { position: relative; z-index: 1; }
.cp-cta-icon-wrap {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    border: 1px solid rgba(255,255,255,.15);
}
.cp-cta-icon-wrap .icon { font-size: 36px; color: var(--gold); }
.cp-cta h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 10px; }
.cp-cta p { opacity: .85; font-size: 1rem; max-width: 500px; margin: 0 auto 28px; }
.cp-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── FAQ Section ── */
.cp-faq-section { background: var(--white); }
.cp-faq-list { display: flex; flex-direction: column; gap: 14px; }
.cp-faq-item {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all .3s ease;
}
.cp-faq-item:hover { border-color: var(--blue-light); }
.cp-faq-item.open { border-color: var(--blue3); box-shadow: 0 4px 16px rgba(22,61,136,.08); }
.cp-faq-q {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
    transition: all .25s ease;
    user-select: none;
}
.cp-faq-q:hover { background: var(--blue-light); }
.cp-faq-num {
    min-width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--blue), var(--blue3));
    color: #fff;
    font-size: .75rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cp-faq-item.open .cp-faq-num {
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color: var(--blue);
}
.cp-faq-q span:nth-child(2) { flex: 1; font-size: .95rem; }
.cp-faq-chevron {
    font-size: 22px; color: var(--muted);
    transition: transform .3s ease;
}
.cp-faq-item.open .cp-faq-chevron { transform: rotate(180deg); color: var(--blue); }
.cp-faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .4s ease;
    padding: 0 22px;
}
.cp-faq-item.open .cp-faq-a {
    max-height: 300px;
    padding: 0 22px 20px;
}
.cp-faq-a p { color: var(--muted); line-height: 1.9; font-size: .92rem; margin: 0; padding-right: 46px; }
[dir="ltr"] .cp-faq-a p { padding-right: 0; padding-left: 46px; }

/* WhatsApp Button */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: var(--white);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: .95rem;
    transition: all var(--transition);
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-whatsapp:hover { background: #1da855; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,.3); }
.btn-whatsapp svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════
   COMPLAINTS PAGE — Premium Enhancements
   ═══════════════════════════════════════════ */

/* ── Steps Process ── */
.cmp-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}
.cmp-step {
    text-align: center;
    position: relative;
    padding: 0 8px;
}
.cmp-step-num {
    position: absolute;
    top: -8px;
    right: 50%;
    transform: translateX(50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color: var(--blue);
    font-size: .8rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(247,181,0,.3);
}
.cmp-step-connector {
    position: absolute;
    top: 5px;
    left: -50%;
    right: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--blue3), var(--gold));
    z-index: 1;
    opacity: .25;
}
.cmp-step:first-child .cmp-step-connector { display: none; }
.cmp-step-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--blue-light), #edf2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 16px;
    border: 2px solid rgba(79,140,247,.1);
    transition: all .4s cubic-bezier(.4,0,.2,1);
}
.cmp-step:hover .cmp-step-icon {
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(22,61,136,.2);
}
.cmp-step-icon .icon {
    font-size: 32px;
    color: var(--blue);
    transition: color .3s;
}
.cmp-step:hover .cmp-step-icon .icon { color: var(--white); }
.cmp-step h4 {
    font-size: .95rem;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 6px;
}
.cmp-step p {
    font-size: .84rem;
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
}

/* ── Type Selector Tabs ── */
.cmp-type-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.cmp-type-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    border: 2px solid var(--border);
    border-radius: 14px;
    background: var(--bg);
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    font-family: inherit;
}
.cmp-type-tab:hover {
    border-color: var(--blue3);
    background: var(--blue-light);
}
.cmp-type-tab.active {
    border-color: var(--blue);
    background: linear-gradient(135deg, var(--blue-light), #edf2ff);
    color: var(--blue);
    box-shadow: 0 4px 16px rgba(22,61,136,.1);
}
.cmp-type-tab-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .35s;
}
.cmp-tab-complaint {
    background: rgba(239,68,68,.1);
}
.cmp-tab-complaint .icon { font-size: 22px; color: var(--red); }
.cmp-tab-suggestion {
    background: rgba(247,181,0,.12);
}
.cmp-tab-suggestion .icon { font-size: 22px; color: var(--gold); }
.cmp-type-tab.active .cmp-tab-complaint {
    background: linear-gradient(135deg, #dc2626, var(--red));
}
.cmp-type-tab.active .cmp-tab-complaint .icon { color: var(--white); }
.cmp-type-tab.active .cmp-tab-suggestion {
    background: linear-gradient(135deg, #e5a400, var(--gold));
}
.cmp-type-tab.active .cmp-tab-suggestion .icon { color: var(--blue); }

/* ── Enhanced Success Alert ── */
.cmp-success-enhanced {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 28px;
    gap: 16px;
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 60%, #ecfdf5 100%);
    border: 1px solid #86efac;
}
.cmp-success-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.cmp-success-check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(22,197,94,.3);
    animation: cmpCheckBounce .6s cubic-bezier(.68,-.55,.27,1.55);
}
@keyframes cmpCheckBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.cmp-success-check .icon { font-size: 28px; color: var(--white); }
.cmp-success-enhanced strong { font-size: 1.15rem; color: #16a34a; }
.cmp-success-ref {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--white);
    border-radius: 12px;
    border: 1px dashed #86efac;
    flex-wrap: wrap;
    justify-content: center;
}
.cmp-ref-label { font-size: .82rem; color: var(--muted); }
.cmp-ref-number {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--blue);
    letter-spacing: 1px;
    font-family: monospace;
    direction: ltr;
}
.cmp-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(22,61,136,.15);
    background: var(--blue-light);
    color: var(--blue);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
    font-family: inherit;
}
.cmp-copy-btn .icon { font-size: 16px; }
.cmp-copy-btn:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }
.cmp-copy-feedback {
    font-size: .8rem;
    color: var(--green);
    font-weight: 700;
    opacity: 0;
    transition: opacity .3s;
}
.cmp-success-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .84rem;
    color: #166534;
    opacity: .8;
    margin: 0;
}
.cmp-success-note .icon { font-size: 18px; }

/* ── Character Count ── */
.cmp-char-count {
    text-align: left;
    font-size: .78rem;
    color: var(--muted);
    margin-top: 6px;
    direction: ltr;
}

/* ── Track Form ── */
.cmp-track-form {
    display: flex;
    gap: 8px;
}
.cmp-track-form .cp-input-wrap { flex: 1; }
.cmp-track-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* ── Track Result ── */
.cmp-track-result {
    margin-top: 18px;
    padding: 18px;
    background: linear-gradient(135deg, var(--blue-light), #f0f4ff);
    border-radius: 12px;
    border: 1px solid rgba(79,140,247,.12);
}
.cmp-track-ref {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(79,140,247,.12);
}
.cmp-track-ref .icon { font-size: 22px; color: var(--blue); }
.cmp-track-ref strong { font-size: .95rem; color: var(--blue); font-family: monospace; direction: ltr; }
.cmp-track-details { display: flex; flex-direction: column; gap: 8px; }
.cmp-track-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .86rem;
    color: var(--text);
}
.cmp-track-label {
    font-weight: 700;
    color: var(--muted);
    font-size: .82rem;
}
.cmp-track-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 14px 18px;
    background: #fef2f2;
    border-radius: 10px;
    color: var(--red);
    font-size: .88rem;
    font-weight: 600;
    border: 1px solid rgba(239,68,68,.12);
}
.cmp-track-error .icon { font-size: 20px; }

/* ── Track Timeline ── */
.cmp-track-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(79,140,247,.12);
    justify-content: space-between;
}
.cmp-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
}
.cmp-timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 7px;
    left: -50%;
    right: 50%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.cmp-timeline-step.done:not(:last-child)::after {
    background: linear-gradient(90deg, var(--green), #4ade80);
}
.cmp-timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--border);
    border: 2px solid var(--white);
    position: relative;
    z-index: 1;
    transition: all .3s;
}
.cmp-timeline-step.done .cmp-timeline-dot {
    background: var(--green);
    box-shadow: 0 2px 8px rgba(34,197,94,.3);
}
.cmp-timeline-step.current .cmp-timeline-dot {
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(79,140,247,.2), 0 2px 8px rgba(22,61,136,.2);
    animation: cmpTimelinePulse 2s ease-in-out infinite;
}
@keyframes cmpTimelinePulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(79,140,247,.2), 0 2px 8px rgba(22,61,136,.2); }
    50% { box-shadow: 0 0 0 8px rgba(79,140,247,.1), 0 2px 8px rgba(22,61,136,.2); }
}
.cmp-timeline-step span:last-child {
    font-size: .68rem;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
}
.cmp-timeline-step.done span:last-child { color: var(--green); }
.cmp-timeline-step.current span:last-child { color: var(--blue); font-weight: 800; }

/* ── Commitment List ── */
.cmp-commit-list {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cmp-commit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.cmp-commit-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--blue-light), #edf2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .3s;
}
.cmp-commit-item:hover .cmp-commit-icon {
    background: linear-gradient(135deg, var(--blue), var(--blue2));
}
.cmp-commit-icon .icon { font-size: 18px; color: var(--blue); transition: color .3s; }
.cmp-commit-item:hover .cmp-commit-icon .icon { color: var(--white); }
.cmp-commit-item strong {
    display: block;
    font-size: .88rem;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 2px;
}
.cmp-commit-item span {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ── Complaints Responsive ── */
@media (max-width: 900px) {
    .cmp-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
    .cmp-step-connector { display: none; }
}
@media (max-width: 768px) {
    .cmp-type-tabs { gap: 8px; }
    .cmp-type-tab { padding: 12px 14px; font-size: .88rem; }
    .cmp-type-tab-icon { width: 34px; height: 34px; border-radius: 10px; }
    .cmp-track-timeline { gap: 0; }
    .cmp-timeline-step span:last-child { font-size: .62rem; }
}
@media (max-width: 576px) {
    .cmp-steps-grid { grid-template-columns: 1fr 1fr; }
    .cmp-step-icon { width: 60px; height: 60px; border-radius: 16px; }
    .cmp-step-icon .icon { font-size: 26px; }
    .cmp-success-ref { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
    .cmp-type-tabs { grid-template-columns: 1fr; }
    .cmp-steps-grid { grid-template-columns: 1fr; gap: 20px; }
    .cmp-step { display: flex; align-items: center; gap: 16px; text-align: right; }
    .cmp-step-num { position: static; transform: none; }
    .cmp-step-icon { margin: 0; width: 52px; height: 52px; flex-shrink: 0; }
    .cmp-step-icon .icon { font-size: 24px; }
    .cmp-step h4 { font-size: .88rem; margin-bottom: 2px; }
    .cmp-step p { font-size: .8rem; }
}

/* ═══════════════════════════════════════════
   TERMS & POLICIES PAGE — Premium v3
   ═══════════════════════════════════════════ */

/* ── Reading Progress Bar ── */
.terms-progress {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--blue3), var(--gold));
    z-index: 10000;
    transition: width .15s linear;
    border-radius: 0 0 0 2px;
    box-shadow: 0 0 16px rgba(247,181,0,.5), 0 0 4px rgba(247,181,0,.3);
}

/* ── Hero Meta Badges ── */
.terms-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0 10px;
}
.terms-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255,255,255,.92);
    font-size: .84rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.14);
    transition: all var(--transition);
}
.terms-hero-badge .icon { font-size: 18px; }
.terms-print-btn {
    cursor: pointer;
    font-family: inherit;
}
.terms-print-btn:hover {
    background: rgba(255,255,255,.24);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

/* ── Document Stats Bar ── */
.terms-doc-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(22,61,136,.06);
    padding: 24px 32px;
    position: relative;
    overflow: hidden;
}
.terms-doc-bar::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--gold), var(--blue3), var(--gold));
    background-size: 200% 100%;
    animation: termsBarShimmer 4s ease infinite;
}
@keyframes termsBarShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.terms-doc-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 12px;
}
.terms-doc-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(22,61,136,.12);
}
.terms-doc-stat-icon .icon { font-size: 20px; color: var(--white); }
.terms-doc-stat-icon.gold { background: linear-gradient(135deg, #e5a400, var(--gold)); }
.terms-doc-stat-icon.gold .icon { color: var(--blue); }
.terms-doc-stat-icon.green { background: linear-gradient(135deg, #16a34a, var(--green)); }
.terms-doc-stat-icon.purple { background: linear-gradient(135deg, #6d28d9, var(--purple)); }
.terms-doc-stat > div { display: flex; flex-direction: column; gap: 1px; }
.terms-doc-stat strong {
    font-size: .95rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.2px;
}
.terms-doc-stat span {
    font-size: .76rem;
    color: var(--muted);
    font-weight: 500;
}
.terms-doc-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent, var(--border), transparent);
    margin: 0 8px;
}

/* ── Page Layout ── */
.terms-page-wrap {
    padding: 48px 0 80px;
}
.terms-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
    align-items: flex-start;
}
.terms-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Sidebar TOC ── */
.terms-sidebar {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(22,61,136,.1) transparent;
}
.terms-sidebar::-webkit-scrollbar { width: 3px; }
.terms-sidebar::-webkit-scrollbar-track { background: transparent; }
.terms-sidebar::-webkit-scrollbar-thumb { background: rgba(22,61,136,.12); border-radius: 10px; }
.terms-toc {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(22,61,136,.06);
    overflow: hidden;
}
.terms-toc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 22px;
    font-size: .95rem;
    font-weight: 800;
    color: var(--blue);
    background: linear-gradient(180deg, rgba(245,248,253,.9) 0%, var(--white) 100%);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.terms-toc-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 22px;
    left: 22px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .5;
}
.terms-toc-header .icon { font-size: 21px; color: var(--blue3); }
.terms-toc-list {
    list-style: none;
    padding: 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.terms-toc-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    position: relative;
}
.terms-toc-link:hover {
    background: var(--blue-light);
    color: var(--blue);
    padding-right: 18px;
}
.terms-toc-link.active {
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    color: var(--white);
    box-shadow: 0 4px 20px rgba(22,61,136,.22);
    font-weight: 700;
}
.terms-toc-link.active .terms-toc-num {
    background: rgba(255,255,255,.2);
    color: var(--white);
}
.terms-toc-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--bg);
    color: var(--blue3);
    font-size: .74rem;
    font-weight: 800;
    flex-shrink: 0;
    transition: all .3s;
}

/* ── Mobile Quick Nav ── */
.terms-mobile-only { display: none; }
.terms-quick-nav {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(22,61,136,.06);
}
.terms-quick-nav h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 20px;
}
.terms-quick-nav h3 .icon { font-size: 22px; color: var(--blue3); }
.terms-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.terms-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-xs);
    background: var(--bg);
    font-weight: 600;
    font-size: .85rem;
    color: var(--text);
    transition: all var(--transition);
    text-decoration: none;
}
.terms-nav-item:hover {
    background: var(--blue-light);
    color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22,61,136,.06);
}
.terms-nav-item .icon { font-size: 20px; color: var(--blue3); flex-shrink: 0; }

/* ── Section Card ── */
.terms-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 2px 16px rgba(22,61,136,.04);
    overflow: hidden;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    border-right: 4px solid transparent;
}
.terms-section:hover {
    box-shadow: 0 8px 36px rgba(22,61,136,.08);
    border-right-color: var(--blue3);
    transform: translateY(-3px);
}
.terms-section-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 30px;
    background: linear-gradient(135deg, rgba(245,248,253,.9) 0%, rgba(255,255,255,.2) 100%);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.terms-section-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 30px;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    border-radius: 2px;
}
.terms-section-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.terms-section-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 20px;
    background: inherit;
    opacity: .12;
    z-index: -1;
    filter: blur(8px);
}
.terms-section-icon .icon { font-size: 28px; color: var(--white); }
.terms-section-icon.blue { background: linear-gradient(135deg, var(--blue), var(--blue2)); box-shadow: 0 6px 20px rgba(22,61,136,.22); }
.terms-section-icon.green { background: linear-gradient(135deg, #16a34a, var(--green)); box-shadow: 0 6px 20px rgba(34,197,94,.22); }
.terms-section-icon.gold { background: linear-gradient(135deg, #e5a400, var(--gold)); box-shadow: 0 6px 20px rgba(247,181,0,.22); }
.terms-section-icon.gold .icon { color: var(--blue); }
.terms-section-icon.red { background: linear-gradient(135deg, #dc2626, var(--red)); box-shadow: 0 6px 20px rgba(239,68,68,.22); }
.terms-section-icon.purple { background: linear-gradient(135deg, #6d28d9, var(--purple)); box-shadow: 0 6px 20px rgba(124,58,237,.22); }
.terms-section-icon.teal { background: linear-gradient(135deg, #0d9488, var(--teal)); box-shadow: 0 6px 20px rgba(20,184,166,.22); }
.terms-section-icon.orange { background: linear-gradient(135deg, #ea580c, var(--orange)); box-shadow: 0 6px 20px rgba(249,115,22,.22); }
.terms-section-num {
    font-size: .72rem;
    font-weight: 800;
    color: var(--blue3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .8;
}
.terms-section-header h2 { font-size: 1.25rem; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -.2px; }
.terms-section-body { padding: 30px 32px; }
.terms-section-body p {
    color: var(--muted);
    line-height: 2.1;
    font-size: .95rem;
    margin-bottom: 18px;
}
.terms-section-body p:last-child { margin-bottom: 0; }
.terms-section-body h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--blue);
    margin: 32px 0 16px;
    padding: 10px 18px 10px 0;
    border-right: 4px solid var(--gold);
    background: linear-gradient(to left, rgba(247,181,0,.04), transparent);
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .3s;
}
.terms-section-body h4:hover {
    background: linear-gradient(to left, rgba(247,181,0,.08), transparent);
}
.terms-section-body h4:first-child { margin-top: 0; }

/* ── Lists ── */
.terms-bullet {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.terms-bullet li {
    position: relative;
    padding: 10px 34px 10px 14px;
    color: var(--muted);
    line-height: 1.9;
    font-size: .93rem;
    transition: all .25s;
    border-radius: 10px;
    background: transparent;
}
.terms-bullet li:hover {
    color: var(--text);
    background: rgba(245,248,253,.7);
}
.terms-bullet li::before {
    content: '';
    position: absolute;
    right: 10px;
    top: 18px;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--blue3), var(--blue2));
    opacity: .5;
    transition: all .25s;
}
.terms-bullet li:hover::before { opacity: 1; transform: scale(1.3); }
.terms-ordered {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    counter-reset: terms-counter;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.terms-ordered li {
    counter-increment: terms-counter;
    position: relative;
    padding: 10px 48px 10px 14px;
    color: var(--muted);
    line-height: 1.9;
    font-size: .93rem;
    transition: all .25s;
    border-radius: 10px;
    background: transparent;
}
.terms-ordered li:hover {
    color: var(--text);
    background: rgba(245,248,253,.7);
}
.terms-ordered li::before {
    content: counter(terms-counter);
    position: absolute;
    right: 6px;
    top: 8px;
    width: 30px; height: 30px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--blue), var(--blue3));
    color: var(--white);
    font-size: .76rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(22,61,136,.15);
    transition: all .25s;
}
.terms-ordered li:hover::before {
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(22,61,136,.2);
}

/* ── Tables ── */
.terms-table-wrap {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: 16px;
    border: 1px solid rgba(22,61,136,.06);
    box-shadow: 0 4px 24px rgba(22,61,136,.06);
    background: var(--white);
}
.terms-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}
.terms-table th {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue2) 100%);
    padding: 16px 22px;
    text-align: right;
    font-weight: 700;
    font-size: .82rem;
    color: var(--white);
    white-space: nowrap;
    letter-spacing: .4px;
    position: relative;
}
.terms-table th::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), rgba(247,181,0,.3), transparent);
}
.terms-table td {
    padding: 16px 22px;
    border-top: 1px solid rgba(22,61,136,.05);
    font-size: .9rem;
    color: var(--text);
    font-weight: 500;
}
.terms-table tbody tr {
    transition: all .25s ease;
}
.terms-table tbody tr:nth-child(even) td {
    background: rgba(245,248,253,.5);
}
.terms-table tbody tr:hover td {
    background: linear-gradient(135deg, rgba(79,140,247,.06) 0%, rgba(22,61,136,.03) 100%);
}
.terms-table tbody tr:hover td:first-child {
    color: var(--blue);
    font-weight: 600;
}

/* ── Note Boxes ── */
.terms-note-box {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 14px;
    margin: 20px 0;
    font-size: .9rem;
    line-height: 1.9;
    position: relative;
    overflow: hidden;
    transition: all .3s;
}
.terms-note-box:hover {
    transform: translateX(-2px);
}
.terms-note-box::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}
.terms-note-box .icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}
.terms-note-box.green {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    color: #166534;
    border: 1px solid rgba(34,197,94,.15);
}
.terms-note-box.green::before { background: linear-gradient(180deg, #16a34a, var(--green)); }
.terms-note-box.green .icon { background: rgba(34,197,94,.12); color: var(--green); }
.terms-note-box.orange {
    background: linear-gradient(135deg, #fff7ed 0%, #fffbf5 100%);
    color: #9a3412;
    border: 1px solid rgba(249,115,22,.15);
}
.terms-note-box.orange::before { background: linear-gradient(180deg, #ea580c, var(--orange)); }
.terms-note-box.orange .icon { background: rgba(249,115,22,.12); color: var(--orange); }
.terms-note-box.blue {
    background: linear-gradient(135deg, var(--blue-light) 0%, rgba(234,241,255,.5) 100%);
    color: var(--blue);
    border: 1px solid rgba(79,140,247,.12);
}
.terms-note-box.blue::before { background: linear-gradient(180deg, var(--blue), var(--blue3)); }
.terms-note-box.blue .icon { background: rgba(79,140,247,.12); color: var(--blue3); }
.terms-note-box.red {
    background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
    color: #991b1b;
    border: 1px solid rgba(239,68,68,.15);
}
.terms-note-box.red::before { background: linear-gradient(180deg, #dc2626, var(--red)); }
.terms-note-box.red .icon { background: rgba(239,68,68,.12); color: var(--red); }

/* ── Vision/Mission Duo Cards ── */
.terms-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.terms-duo-card {
    padding: 32px 28px;
    border-radius: var(--radius-lg);
    transition: all .4s cubic-bezier(.4,0,.2,1);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.terms-duo-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: .04;
    pointer-events: none;
}
.terms-duo-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    border-radius: 0 var(--radius-lg) 0 50%;
    opacity: .06;
    pointer-events: none;
}
.terms-duo-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(22,61,136,.1); }
.terms-duo-card.blue { background: linear-gradient(145deg, var(--blue-light), rgba(234,241,255,.4)); }
.terms-duo-card.blue::before { background: var(--blue); }
.terms-duo-card.blue::after { background: var(--blue); }
.terms-duo-card.gold { background: linear-gradient(145deg, var(--gold-light), rgba(255,248,225,.4)); }
.terms-duo-card.gold::before { background: var(--gold); }
.terms-duo-card.gold::after { background: var(--gold); }
.terms-duo-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.terms-duo-card.blue .terms-duo-icon { background: linear-gradient(135deg, var(--blue), var(--blue2)); box-shadow: 0 6px 20px rgba(22,61,136,.15); }
.terms-duo-card.gold .terms-duo-icon { background: linear-gradient(135deg, #e5a400, var(--gold)); box-shadow: 0 6px 20px rgba(247,181,0,.15); }
.terms-duo-icon .icon { font-size: 28px; color: var(--white); }
.terms-duo-card.gold .terms-duo-icon .icon { color: var(--blue); }
.terms-duo-card .terms-section-num { font-size: .75rem; margin-bottom: 4px; }
.terms-duo-card h3 { font-size: 1.18rem; font-weight: 800; color: var(--blue); margin-bottom: 14px; }
.terms-duo-card p { color: var(--muted); line-height: 2; font-size: .93rem; }
.terms-duo-card .terms-bullet { margin-bottom: 0; }
.terms-duo-card .terms-bullet li { font-size: .9rem; padding-right: 28px; }

/* ── Values Grid ── */
.terms-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
}
.terms-value-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--bg);
    font-weight: 600;
    font-size: .88rem;
    color: var(--text);
    line-height: 1.6;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}
.terms-value-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--blue3), var(--gold));
    opacity: 0;
    transition: opacity .3s;
    border-radius: 0 2px 2px 0;
}
.terms-value-card:hover {
    background: var(--white);
    border-color: rgba(79,140,247,.15);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(22,61,136,.08);
}
.terms-value-card:hover::before { opacity: 1; }
.terms-value-card .icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(79,140,247,.08), rgba(22,61,136,.04));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--blue3);
    flex-shrink: 0;
    transition: all .3s;
}
.terms-value-card:hover .icon {
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    color: var(--white);
    box-shadow: 0 4px 12px rgba(22,61,136,.15);
}

/* ── Bullying Grid ── */
.terms-bullying-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 16px 0;
}
.terms-bullying-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    transition: all .3s cubic-bezier(.4,0,.2,1);
}
.terms-bullying-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: transparent; }
.terms-bullying-card .icon { font-size: 28px; }
.terms-bullying-card strong { font-size: .9rem; color: var(--text); }
.terms-bullying-card span:last-child { font-size: .84rem; color: var(--muted); line-height: 1.6; }

/* ── Final Section ── */
.terms-final {
    text-align: center;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue2) 50%, var(--blue3) 100%);
    border-radius: var(--radius-lg);
    padding: 64px 48px;
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.terms-final::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
}
.terms-final::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(247,181,0,.06) 0%, transparent 60%);
    pointer-events: none;
}
.terms-final > * { position: relative; z-index: 1; }
.terms-final-icon {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
    border: 2px solid rgba(255,255,255,.1);
    animation: terms-pulse 3s ease-in-out infinite;
}
@keyframes terms-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247,181,0,.3); }
    50% { box-shadow: 0 0 0 24px rgba(247,181,0,0); }
}
.terms-final-icon .icon { font-size: 42px; color: var(--gold); }
.terms-final h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -.3px;
}
.terms-final p {
    max-width: 700px;
    margin: 0 auto 36px;
    opacity: .88;
    line-height: 2.1;
    font-size: .96rem;
}
.terms-final-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.terms-final-cta .btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color: var(--blue);
    box-shadow: 0 6px 24px rgba(247,181,0,.35);
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 14px;
}
.terms-final-cta .btn-primary:hover { box-shadow: 0 10px 36px rgba(247,181,0,.45); transform: translateY(-3px); }
.terms-final-cta .btn-outline {
    border-color: rgba(255,255,255,.3);
    color: var(--white);
    padding: 14px 32px;
    border-radius: 14px;
}
.terms-final-cta .btn-outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }

/* ── Back to Top Button ── */
.terms-back-top {
    position: fixed;
    bottom: 32px;
    left: 32px;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgba(22,61,136,.3);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all .4s cubic-bezier(.4,0,.2,1);
}
.terms-back-top .icon { font-size: 26px; }
.terms-back-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.terms-back-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(22,61,136,.4);
}

/* ── Terms Responsive ── */
@media (max-width: 1100px) {
    .terms-layout { grid-template-columns: 1fr 240px; gap: 28px; }
    .terms-doc-bar { grid-template-columns: 1fr auto 1fr; gap: 0; padding: 20px 24px; }
    .terms-doc-bar .terms-doc-divider:nth-child(4),
    .terms-doc-bar .terms-doc-stat:nth-child(n+5) { display: none; }
}
@media (max-width: 900px) {
    .terms-layout { grid-template-columns: 1fr; }
    .terms-sidebar { display: none; }
    .terms-mobile-only { display: block; }
    .terms-nav-grid { grid-template-columns: repeat(3, 1fr); }
    .terms-values-grid { grid-template-columns: repeat(2, 1fr); }
    .terms-doc-bar { grid-template-columns: repeat(4, 1fr); }
    .terms-doc-bar .terms-doc-divider { display: none; }
    .terms-doc-bar .terms-doc-stat:nth-child(n+5) { display: flex; }
    .terms-doc-stat { justify-content: center; padding: 8px 4px; }
}
@media (max-width: 768px) {
    .terms-page-wrap { padding: 32px 0 60px; }
    .terms-nav-grid { grid-template-columns: repeat(2, 1fr); }
    .terms-duo { grid-template-columns: 1fr; }
    .terms-section-header { padding: 22px 22px; gap: 14px; }
    .terms-section-header::after { right: 22px; }
    .terms-section-icon { width: 48px; height: 48px; border-radius: 14px; }
    .terms-section-icon .icon { font-size: 24px; }
    .terms-section-header h2 { font-size: 1.08rem; }
    .terms-section-body { padding: 22px; }
    .terms-section-body h4 { font-size: .96rem; padding: 8px 14px 8px 0; }
    .terms-quick-nav { padding: 22px 20px; }
    .terms-quick-nav h3 { font-size: 1rem; }
    .terms-bullying-grid { grid-template-columns: 1fr; }
    .terms-final { padding: 44px 28px; }
    .terms-final h2 { font-size: 1.25rem; }
    .terms-final p { font-size: .88rem; }
    .terms-section { border-right-width: 3px; }
    .terms-back-top { bottom: 20px; left: 20px; width: 46px; height: 46px; border-radius: 14px; }
    .terms-doc-bar { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 20px; }
    .terms-doc-stat { gap: 10px; }
    .terms-doc-stat-icon { width: 38px; height: 38px; border-radius: 10px; }
    .terms-doc-stat-icon .icon { font-size: 18px; }
    .terms-doc-stat strong { font-size: .88rem; }

    /* ── Mobile list items — flexbox layout to prevent overlap ── */
    .terms-bullet li {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        line-height: 1.8;
    }
    .terms-bullet li::before {
        position: static;
        flex-shrink: 0;
        margin-top: 10px;
    }
    .terms-ordered li {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        line-height: 1.8;
    }
    .terms-ordered li::before {
        position: static;
        flex-shrink: 0;
        margin-top: 2px;
    }
}
@media (max-width: 480px) {
    .terms-page-wrap { padding: 24px 0 48px; }
    .terms-nav-grid { grid-template-columns: 1fr; }
    .terms-nav-item { padding: 8px 12px; font-size: .82rem; }
    .terms-values-grid { grid-template-columns: 1fr; }
    .terms-section-header { flex-direction: column; text-align: center; }
    .terms-section-header::after { right: 50%; transform: translateX(50%); width: 40px; }
    .terms-section-body { padding: 18px; }
    .terms-section-body h4 { font-size: .92rem; }
    .terms-section-body p { font-size: .88rem; }

    /* ── Mobile list items — flexbox layout ── */
    .terms-bullet li {
        font-size: .86rem;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 10px;
        line-height: 1.75;
    }
    .terms-bullet li::before {
        position: static;
        flex-shrink: 0;
        margin-top: 9px;
        width: 7px;
        height: 7px;
    }
    .terms-ordered li {
        font-size: .86rem;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 10px;
        line-height: 1.75;
    }
    .terms-ordered li::before {
        position: static;
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        min-width: 26px;
        border-radius: 8px;
        font-size: .7rem;
        margin-top: 1px;
    }
    .terms-table { min-width: 0; width: 100%; }
    .terms-duo-card { padding: 24px 18px; }
    .terms-final { padding: 36px 18px; }
    .terms-final h2 { font-size: 1.1rem; }
    .terms-final-cta .btn-primary,
    .terms-final-cta .btn-outline { padding: 12px 24px; border-radius: 12px; font-size: .88rem; }
    .terms-hero-meta { gap: 8px; }
    .terms-hero-badge { font-size: .76rem; padding: 6px 12px; }
    .terms-doc-bar { grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
    .terms-doc-stat-icon { width: 34px; height: 34px; border-radius: 9px; }
    .terms-doc-stat-icon .icon { font-size: 16px; }
    .terms-doc-stat strong { font-size: .82rem; }
    .terms-doc-stat span { font-size: .7rem; }
}

/* ── Print Styles ── */
@media print {
    .terms-progress, .terms-sidebar, .terms-back-top, .terms-mobile-only,
    .terms-hero-meta, .page-hero-wave, .floating-shapes, .navbar, .footer,
    .terms-final-cta, .terms-doc-bar { display: none !important; }
    .terms-layout { grid-template-columns: 1fr !important; }
    .terms-section { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
    .terms-section:hover { transform: none; border-right-color: transparent; }
    .terms-final { background: #163d88 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .terms-page-wrap { padding: 0; }
    .page-hero { padding: 24px 0; min-height: auto; }
    .terms-table th { background: #163d88 !important; color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── LTR Overrides ── */
[dir="ltr"] .terms-section { border-right: none; border-left: 4px solid transparent; }
[dir="ltr"] .terms-section:hover { border-left-color: var(--blue3); border-right-color: transparent; }
[dir="ltr"] .terms-section-header::after { right: auto; left: 30px; background: linear-gradient(270deg, var(--gold), transparent); }
[dir="ltr"] .terms-section-body h4 { padding-right: 0; padding-left: 18px; border-right: none; border-left: 4px solid var(--gold); border-radius: 8px 0 0 8px; background: linear-gradient(to right, rgba(247,181,0,.04), transparent); }
[dir="ltr"] .terms-section-body h4:hover { background: linear-gradient(to right, rgba(247,181,0,.08), transparent); }
[dir="ltr"] .terms-bullet li { padding-right: 14px; padding-left: 34px; }
[dir="ltr"] .terms-bullet li::before { right: auto; left: 10px; }
[dir="ltr"] .terms-ordered li { padding-right: 14px; padding-left: 48px; }
[dir="ltr"] .terms-ordered li::before { right: auto; left: 6px; }
[dir="ltr"] .terms-note-box::before { right: auto; left: 0; }
[dir="ltr"] .terms-note-box:hover { transform: translateX(2px); }
[dir="ltr"] .terms-back-top { left: auto; right: 32px; }
[dir="ltr"] .terms-value-card::before { right: auto; left: 0; border-radius: 2px 0 0 2px; }

/* ── LTR Mobile flex direction fix ── */
@media (max-width: 768px) {
    [dir="ltr"] .terms-bullet li,
    [dir="ltr"] .terms-ordered li { flex-direction: row; }
}

/* ═══════════════════════════════════════════
   FOOTER — Premium v2
   ═══════════════════════════════════════════ */
.footer {
    background: #0b1d3c;
    color: rgba(255,255,255,.72);
    position: relative; overflow: hidden;
}
.footer::before { display: none; }
.footer::after { display: none; }
.footer-wave { display: none; }

/* ── Brand Bar ── */
.footer-brand-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 48px 0 36px; gap: 24px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,.05);
    margin-bottom: 40px;
}
.footer-brand {
    display: flex; align-items: center; gap: 18px;
}
.footer-logo-wrap {
    width: 64px; height: 64px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(201,169,98,.12), rgba(201,169,98,.04));
    border: 1px solid rgba(201,169,98,.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 24px rgba(201,169,98,.08);
}
.footer-brand-logo {
    width: 48px; height: 48px; object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(201,169,98,.3));
}
.footer-logo-wrap > .icon { font-size: 36px; color: var(--gold); }
.footer-brand-name {
    font-size: 1.4rem; font-weight: 800; color: #fff;
    margin: 0; line-height: 1.3;
    letter-spacing: -.2px;
}
.footer-brand-tagline {
    font-size: .85rem; color: var(--gold); margin: 4px 0 0;
    font-weight: 600; opacity: .85; letter-spacing: .2px;
}

/* ── Social Icons ── */
.footer-social-row { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social-btn {
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(255,255,255,.05);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.55);
    transition: all .3s cubic-bezier(.4,0,.2,1);
    border: 1px solid rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.footer-social-btn:hover {
    background: linear-gradient(135deg, var(--gold), #d4af37);
    color: #0a1a3e;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(201,169,98,.25);
    border-color: transparent;
}
.footer-social-whatsapp:hover {
    background: linear-gradient(135deg, #25d366, #128C7E);
    color: #fff; box-shadow: 0 8px 24px rgba(37,211,102,.25);
}

/* ── Main Grid ── */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: 40px; padding-bottom: 48px;
}

/* Column titles */
.footer-col-title {
    color: #fff; font-size: .95rem; font-weight: 700;
    margin: 0 0 20px; display: flex; align-items: center; gap: 10px;
    letter-spacing: .3px;
}
.footer-col-icon {
    width: 32px; height: 32px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(201,169,98,.15), rgba(201,169,98,.05));
    border: 1px solid rgba(201,169,98,.12);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.footer-col-icon .icon { font-size: 17px; color: var(--gold); }

/* About text */
.footer-col-text {
    font-size: .88rem; line-height: 1.9;
    color: rgba(255,255,255,.6);
}

/* Work hours badge */
.footer-hours {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px; padding: 10px 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    font-size: .84rem; color: rgba(255,255,255,.7);
}
.footer-hours .icon { font-size: 18px; color: var(--gold); }

/* ── Link List ── */
.footer-link-list { list-style: none; padding: 0; margin: 0; }
.footer-link-list li { margin-bottom: 12px; }
.footer-link-list a {
    color: rgba(255,255,255,.58); font-size: .88rem;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all .25s; position: relative;
    padding-right: 16px;
}
.footer-link-list a::before {
    content: '';
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(201,169,98,.3);
    transition: all .25s;
}
.footer-link-list a:hover {
    color: var(--gold); transform: translateX(-5px);
}
.footer-link-list a:hover::before {
    background: var(--gold);
    box-shadow: 0 0 8px rgba(201,169,98,.4);
}
[dir="ltr"] .footer-link-list a { padding-right: 0; padding-left: 16px; }
[dir="ltr"] .footer-link-list a::before { right: auto; left: 0; }
[dir="ltr"] .footer-link-list a:hover { transform: translateX(5px); }

/* ── Contact List ── */
.footer-contact-list { display: flex; flex-direction: column; gap: 14px; }
.footer-contact-row {
    display: flex; align-items: center; gap: 12px;
    font-size: .88rem; color: rgba(255,255,255,.6);
    text-decoration: none; transition: color .25s;
}
a.footer-contact-row:hover { color: var(--gold); }
a.footer-contact-row:hover .footer-contact-icon {
    background: rgba(201,169,98,.12); border-color: rgba(201,169,98,.2);
}
.footer-contact-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all .25s;
}
.footer-contact-icon .icon { font-size: 17px; color: var(--gold); }

/* ── Bottom Bar ── */
.footer-bottom {
    background: rgba(0,0,0,.15);
    border-top: 1px solid rgba(255,255,255,.05);
    position: relative;
}
.footer-bottom::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 100px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,169,98,.35), transparent);
}
.footer-bottom-inner {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
    padding: 18px 0;
    font-size: .82rem; color: rgba(255,255,255,.35);
}
.footer-bottom-copy { margin: 0; }
.footer-bottom-links { display: flex; gap: 8px; align-items: center; }
.footer-bottom-links a {
    color: rgba(255,255,255,.35); transition: color .25s;
}
.footer-bottom-links a:hover { color: var(--gold); }
.footer-bottom-dot { opacity: .3; }

/* ═══════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════ */
.form-group { margin-bottom: 20px; }
.form-label {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    font-size: .95rem;
}
.form-label .required { color: var(--red); }
.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .95rem;
    background: var(--white);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
    border-color: var(--blue3);
    box-shadow: 0 0 0 4px rgba(79,140,247,.15);
}
.form-control.error { border-color: var(--red); }
.error-text { color: var(--red); font-size: .85rem; margin-top: 4px; }
textarea.form-control { min-height: 120px; resize: vertical; }
select.form-control { cursor: pointer; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ── Checkbox ── */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.form-check input[type="checkbox"] {
    width: 20px; height: 20px;
    accent-color: var(--blue);
    margin-top: 3px;
    cursor: pointer;
}

/* ═══════════════════════════════════════════
   PROFESSIONAL WIZARD FORM
   ═══════════════════════════════════════════ */

/* --- Wizard Container --- */
.wizard {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}
.wizard-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3d);
    overflow: hidden;
    position: relative;
}

/* --- Progress Bar (top) --- */
.wizard-progress {
    height: 5px;
    background: var(--blue-light);
    position: relative;
    overflow: hidden;
}
.wizard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue), var(--blue2), var(--gold));
    border-radius: 0 5px 5px 0;
    transition: width .5s cubic-bezier(.4,0,.2,1);
    position: relative;
}
.wizard-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

/* --- Stepper Header --- */
.wizard-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 20px 24px;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: linear-gradient(180deg, var(--blue-light) 0%, transparent 100%);
    position: relative;
}
.wizard-stepper::-webkit-scrollbar { display: none; }

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 0 18px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all .3s ease;
}
.wizard-step:hover .wz-circle { transform: scale(1.08); }

/* Connector line between steps */
.wizard-step + .wizard-step::before {
    content: '';
    position: absolute;
    top: 22px;
    right: calc(50% + 24px);
    width: calc(100% - 48px);
    height: 3px;
    background: var(--border);
    z-index: 0;
    transition: background .4s ease;
    border-radius: 3px;
}
.wizard-step.completed + .wizard-step::before,
.wizard-step.completed + .wizard-step.active::before { background: var(--green); }
.wizard-step.active + .wizard-step::before { background: var(--border); }

.wz-circle {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .95rem;
    background: var(--white);
    color: var(--muted);
    border: 3px solid var(--border);
    position: relative;
    z-index: 1;
    transition: all .4s cubic-bezier(.4,0,.2,1);
}
.wizard-step.active .wz-circle {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
    box-shadow: 0 0 0 6px rgba(22,61,136,.12), 0 4px 15px rgba(22,61,136,.25);
    animation: pulse-step .8s ease-out;
}
.wizard-step.completed .wz-circle {
    background: var(--green);
    color: var(--white);
    border-color: var(--green);
    box-shadow: 0 2px 8px rgba(34,197,94,.2);
}
.wizard-step.completed .wz-circle .wz-num { display: none; }
.wizard-step.completed .wz-circle::after {
    content: 'check';
    font-family: 'Material Symbols Rounded';
    font-size: 22px;
    font-weight: 400;
}
.wizard-step.error .wz-circle {
    background: #fef2f2;
    color: var(--red);
    border-color: var(--red);
    box-shadow: 0 0 0 6px rgba(239,68,68,.1);
}

.wz-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    transition: color .3s ease;
    text-align: center;
    max-width: 80px;
    line-height: 1.3;
}
.wizard-step.active .wz-label { color: var(--blue); }
.wizard-step.completed .wz-label { color: var(--green); }

@keyframes pulse-step {
    0% { box-shadow: 0 0 0 0 rgba(22,61,136,.3), 0 4px 15px rgba(22,61,136,.25); }
    70% { box-shadow: 0 0 0 12px rgba(22,61,136,0), 0 4px 15px rgba(22,61,136,.25); }
    100% { box-shadow: 0 0 0 6px rgba(22,61,136,.12), 0 4px 15px rgba(22,61,136,.25); }
}

/* --- Step Panels --- */
.wizard-body {
    padding: 36px 40px 20px;
    position: relative;
    min-height: 320px;
}
.wz-panel {
    display: none;
    animation: wzSlideIn .45s cubic-bezier(.4,0,.2,1);
}
.wz-panel.active { display: block; }

@keyframes wzSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
[dir="rtl"] .wz-panel { animation-name: wzSlideInRtl; }
@keyframes wzSlideInRtl {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.wz-panel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--blue-light);
}
.wz-panel-icon {
    width: 52px; height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}
.wz-panel-icon.blue { background: var(--blue-light); color: var(--blue); }
.wz-panel-icon.green { background: #dcfce7; color: var(--green); }
.wz-panel-icon.purple { background: #f3e8ff; color: var(--purple); }
.wz-panel-icon.gold { background: var(--gold-light); color: #b8860b; }
.wz-panel-icon.red { background: #fef2f2; color: var(--red); }
.wz-panel-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--blue);
    line-height: 1.3;
}
.wz-panel-subtitle {
    font-size: .88rem;
    color: var(--muted);
    margin-top: 2px;
}

/* --- Field Groups inside wizard --- */
.wz-field-group {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
}
.wz-field-group-title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--blue2);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wz-field-group-title .icon { font-size: 18px; }

/* --- Wizard Navigation Footer --- */
.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px 28px;
    border-top: 1px solid var(--border);
    background: var(--glass-bg);
}
.wizard-footer .btn {
    min-width: 160px;
    font-weight: 700;
    gap: 8px;
    padding: 12px 28px;
    font-size: .95rem;
}
.wz-step-counter {
    font-size: .85rem;
    color: var(--muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wz-step-counter strong { color: var(--blue); font-size: 1rem; }

/* Submit button special style */
.btn-submit-wizard {
    background: linear-gradient(135deg, var(--green), #16a34a);
    color: var(--white);
    border: none;
    box-shadow: 0 4px 15px rgba(34,197,94,.3);
    position: relative;
    overflow: hidden;
}
.btn-submit-wizard:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34,197,94,.4);
}
.btn-submit-wizard::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    animation: shimmer 2s infinite;
}

/* --- Review Step --- */
.wz-review-card {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 16px;
    transition: box-shadow .3s ease;
}
.wz-review-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.wz-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--blue-light);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.wz-review-header h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.wz-review-header .edit-link {
    font-size: .82rem;
    color: var(--blue2);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color .2s;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
}
.wz-review-header .edit-link:hover { color: var(--gold); }
.wz-review-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
}
.wz-review-item {
    display: flex;
    flex-direction: column;
    padding: 12px 20px;
    border-bottom: 1px solid var(--blue-light);
}
.wz-review-item:nth-child(odd) { border-left: 1px solid var(--blue-light); }
[dir="rtl"] .wz-review-item:nth-child(odd) { border-left: none; border-right: 1px solid var(--blue-light); }
.wz-review-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 2px;
}
.wz-review-value {
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
}
.wz-review-value.empty { color: var(--border); font-style: italic; }

/* --- Terms checkbox --- */
.wz-terms {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    background: var(--gold-light);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all .3s ease;
    margin-top: 24px;
}
.wz-terms:has(input:checked) {
    border-color: var(--green);
    background: #dcfce7;
}
.wz-terms input[type="checkbox"] {
    width: 22px; height: 22px;
    margin-top: 2px;
    accent-color: var(--green);
    cursor: pointer;
    flex-shrink: 0;
}
.wz-terms span {
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.6;
}

/* --- Success Page Wizard --- */
.wizard-success {
    text-align: center;
    padding: 60px 40px;
    max-width: 600px;
    margin: 0 auto;
}
.wizard-success-icon {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 0 0 12px rgba(34,197,94,.08);
    animation: success-pop .6s cubic-bezier(.4,0,.2,1);
}
.wizard-success-icon .icon {
    font-size: 52px;
    color: var(--green);
}
@keyframes success-pop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
.wizard-success h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 10px;
}
.wizard-success p { color: var(--muted); margin-bottom: 6px; font-size: .95rem; }
.wizard-success .wz-booking-no {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--gold-light), #fef3c7);
    border: 2px dashed var(--gold);
    padding: 14px 36px;
    border-radius: 60px;
    margin: 24px 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: #92400e;
    letter-spacing: 1px;
}
.wizard-success .wz-booking-no .icon { font-size: 24px; color: var(--gold); }
.wizard-success .wz-note {
    font-size: .85rem;
    color: var(--muted);
    background: var(--blue-light);
    display: inline-block;
    padding: 8px 20px;
    border-radius: 20px;
    margin-bottom: 24px;
}

/* --- Wizard Layout (form + sidebar) --- */
.wizard-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}
.wizard-layout .wizard { max-width: none; }

/* --- Info Sidebar for wizard --- */
.wizard-sidebar .wz-info-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 20px;
}
.wz-info-card .wz-info-header {
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--blue-light), #e0e7ff);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--blue);
}
.wz-info-card .wz-info-header .icon { font-size: 22px; }
.wz-info-card .wz-info-body { padding: 18px 22px; }
.wz-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wz-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9rem;
    line-height: 1.5;
}
.wz-info-list li .icon { color: var(--green); font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.wz-contact-card {
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    border-radius: var(--radius-lg);
    padding: 24px;
    color: white;
    box-shadow: var(--shadow-md);
}
.wz-contact-card h4 { font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.wz-contact-card p { opacity: .85; font-size: .9rem; margin-bottom: 4px; }
.wz-contact-card .phone-big { font-size: 1.2rem; font-weight: 800; opacity: 1; margin-top: 8px; }

/* --- Validation styling --- */
.form-control.is-invalid { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.form-control.is-valid { border-color: var(--green) !important; }
.field-error {
    color: var(--red);
    font-size: .8rem;
    font-weight: 600;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: fadeInUp .3s ease;
}
.field-error .icon { font-size: 14px; }

/* --- Responsive Wizard --- */
@media (max-width: 768px) {
    .wizard-stepper { padding: 20px 12px 16px; gap: 0; }
    .wizard-step { padding: 0 10px; }
    .wz-circle { width: 36px; height: 36px; font-size: .85rem; border-width: 2px; }
    .wz-label { font-size: .7rem; max-width: 60px; }
    .wizard-step + .wizard-step::before { top: 18px; }
    .wizard-body { padding: 24px 20px 16px; }
    .wizard-footer { padding: 16px 20px 20px; }
    .wizard-footer .btn { min-width: 120px; padding: 10px 20px; font-size: .88rem; }
    .wz-panel-header { flex-direction: column; text-align: center; }
    .wz-panel-icon { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
    .wz-panel-title { font-size: 1.1rem; }
    .wz-review-body { grid-template-columns: 1fr; }
    .wz-review-item:nth-child(odd) { border-left: none; border-right: none; }
    .wizard-success { padding: 40px 20px; }
    .wizard-success h2 { font-size: 1.3rem; }
    .wizard-success .wz-booking-no { font-size: 1.05rem; padding: 10px 24px; }
    .wizard-layout { grid-template-columns: 1fr !important; }
    .wizard-sidebar { order: -1; }
}
@media (max-width: 480px) {
    .wizard-stepper { justify-content: flex-start; }
    .wz-circle { width: 32px; height: 32px; font-size: .8rem; }
    .wz-label { display: none; }
    .wizard-step + .wizard-step::before { top: 16px; }
}

/* ═══════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 600;
}
.badge-blue { background: var(--blue-light); color: var(--blue); }
.badge-green { background: #dcfce7; color: #16a34a; }
.badge-red { background: #fef2f2; color: #dc2626; }
.badge-gold { background: var(--gold-light); color: #b45309; }
.badge-purple { background: #f3e8ff; color: #7c3aed; }
.badge-muted { background: #f1f5f9; color: var(--muted); }

/* ═══════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
}
.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px; height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    font-weight: 600;
    color: var(--text);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.page-link:hover { background: var(--blue-light); color: var(--blue); }
.page-link.active {
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(22,61,136,.3);
}
.page-dots { color: var(--muted); padding: 0 4px; }

/* ═══════════════════════════════════════════
   SEARCH BAR
   ═══════════════════════════════════════════ */
.search-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    background: var(--white);
    padding: 12px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.search-bar .form-control { border: none; background: transparent; flex: 1; }
.search-bar .btn { flex-shrink: 0; }

/* ── Filter Bar ── */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.filter-btn {
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: .9rem;
    background: var(--white);
    color: var(--muted);
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all var(--transition);
}
.filter-btn:hover, .filter-btn.active {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}

/* ═══════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════ */
.toast-container {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-3d);
    min-width: 320px;
    animation: slideIn .4s ease;
    border-right: 4px solid var(--green);
}
.toast.error { border-right-color: var(--red); }
.toast .toast-icon { font-size: 24px; }
.toast.success .toast-icon { color: var(--green); }
.toast.error .toast-icon { color: var(--red); }
.toast-body { flex: 1; }
.toast-title { font-weight: 700; font-size: .95rem; }
.toast-msg { font-size: .85rem; color: var(--muted); }
.toast-close {
    background: none; border: none;
    color: var(--muted); font-size: 20px;
    cursor: pointer;
}

@keyframes slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ═══════════════════════════════════════════
   CONFIRM MODAL
   ═══════════════════════════════════════════ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}
.modal-overlay.active { display: flex; opacity: 1; }
.modal {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3d);
    padding: 32px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    animation: fadeInUp .3s ease;
}
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1000px; }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.modal-header h3 { font-size: 1.2rem; font-weight: 700; color: var(--blue); }
.modal-close {
    background: var(--blue-light);
    border: none;
    color: var(--blue);
    width: 36px; height: 36px;
    border-radius: 8px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════
   FAQ / ACCORDION
   ═══════════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    color: var(--blue);
    transition: background var(--transition);
}
.faq-question:hover { background: var(--blue-light); }
.faq-question .icon { transition: transform var(--transition); }
.faq-item.open .faq-question .icon { transform: rotate(180deg); }
.faq-answer {
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition: all var(--transition);
}
.faq-item.open .faq-answer {
    padding: 0 24px 20px;
    max-height: 500px;
}
.faq-answer p { color: var(--muted); line-height: 1.8; }

/* ═══════════════════════════════════════════
   ABOUT PAGE EXTRAS
   ═══════════════════════════════════════════ */
.about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.about-text h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 16px;
}
.about-text p { color: var(--muted); line-height: 1.8; margin-bottom: 20px; }
.about-mini-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.mini-stat {
    position: relative;
    background: var(--white);
    border-radius: var(--radius);
    padding: 28px 20px 22px;
    text-align: center;
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(22,61,136,.06);
    transition: all var(--transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 170px;
}
.mini-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--gold));
    opacity: 0;
    transition: opacity var(--transition);
}
.mini-stat:hover {
    border-color: transparent;
    box-shadow: var(--shadow-3d);
    transform: translateY(-6px);
}
.mini-stat:hover::before { opacity: 1; }
.mini-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: linear-gradient(135deg, var(--blue-light), rgba(29,78,216,.08));
    color: var(--blue);
    font-size: 0;
}
.mini-stat-icon .icon { font-size: 24px; }
.mini-stat-icon .uk-flag-wrap { display: flex; align-items: center; justify-content: center; }
.mini-stat-icon .uk-flag { width: 28px; height: auto; display: block; }
.mini-stat-icon .uk-flag svg { width: 28px; height: auto; border-radius: 4px; display: block; }
.mini-stat-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--blue);
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 4px;
}
.mini-stat-label {
    font-size: .82rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.3px;
}
.mini-stat-address {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
    margin-top: 10px; font-size: .75rem; color: var(--muted); font-weight: 500;
}
.mini-stat-address span {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--blue-light); padding: 4px 10px; border-radius: 8px;
    font-weight: 600; color: var(--blue); font-size: .72rem;
}

.vision-mission { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.vm-card {
    padding: 36px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.vm-card:hover { box-shadow: var(--shadow-3d); transform: translateY(-4px); }
.vm-card .vm-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--white);
    margin-bottom: 16px;
}
.vm-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--blue); margin-bottom: 10px; }
.vm-card p { color: var(--muted); line-height: 1.8; }

/* ── Team ── */
.team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    transition: all .4s cubic-bezier(.4,0,.2,1);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
}
.team-card-cover {
    width: 100%; height: 80px;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue2) 60%, var(--blue3) 100%);
    position: relative; overflow: hidden; flex-shrink: 0;
}
.team-card-cover::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 60%, rgba(255,255,255,0.12), transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(201,169,98,0.1), transparent 40%);
}
.team-card-logo {
    position: absolute; bottom: 10px; right: 14px;
    width: 52px; height: 52px; border-radius: 8px;
    object-fit: contain; opacity: 0.25; filter: brightness(10);
    transition: opacity .4s ease;
}
[dir="ltr"] .team-card-logo { right: auto; left: 14px; }
.team-card:hover .team-card-logo { opacity: 0.45; }
.team-card-avatar {
    width: 96px; height: 96px; border-radius: 50%;
    margin-top: -48px; position: relative; z-index: 2;
    padding: 3px; background: var(--white);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: all .4s cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}
.team-card:hover .team-card-avatar { transform: scale(1.06); box-shadow: 0 6px 24px rgba(0,0,0,0.12); }
.team-card-avatar img {
    width: 100%; height: 100%; border-radius: 50%;
    object-fit: cover; display: block;
}
.team-card-placeholder {
    width: 100%; height: 100%; border-radius: 50%;
    background: var(--blue-light);
    display: flex; align-items: center; justify-content: center;
}
.team-card-placeholder .icon { font-size: 40px; color: var(--blue3); }
.team-card-body { padding: 12px 20px 4px; }
.team-card h4 { font-size: 1.05rem; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.team-card .role { color: var(--gold); font-weight: 600; font-size: .88rem; margin-bottom: 8px; }
.team-card p { color: var(--muted); font-size: .83rem; line-height: 1.6; margin-bottom: 0; }
.team-card-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; font-weight: 700; color: var(--blue3);
    padding: 12px 20px 20px;
    opacity: 0; transform: translateY(6px);
    transition: all .35s ease;
}
.team-card-link .icon { font-size: 16px; transition: transform .3s ease; }
[dir="ltr"] .team-card-link .icon { transform: scaleX(-1); }
.team-card:hover .team-card-link { opacity: 1; transform: translateY(0); }
.team-card:hover .team-card-link .icon { transform: translateX(-3px); }
[dir="ltr"] .team-card:hover .team-card-link .icon { transform: scaleX(-1) translateX(-3px); }
.team-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1); transform: translateY(-6px); }

/* ═══════════════════════════════════════════
   TEAM MEMBER DETAIL — Premium Profile Card
   ═══════════════════════════════════════════ */

/* ── Profile Card ── */
.tm-profile-card {
    max-width: 680px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(22,61,136,.1), 0 4px 16px rgba(22,61,136,.06);
    overflow: hidden;
    position: relative;
    padding: 0 0 40px;
}

/* Decorative gold accent line at top */
.tm-card-accent {
    height: 5px;
    background: linear-gradient(90deg, var(--blue), var(--blue3), var(--gold), var(--blue3), var(--blue));
    background-size: 300% 100%;
    animation: tmAccentShimmer 5s ease-in-out infinite;
}
@keyframes tmAccentShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ── Profile Header ── */
.tm-profile-header {
    text-align: center;
    padding: 48px 32px 24px;
    background: linear-gradient(180deg, var(--blue-light) 0%, transparent 100%);
    position: relative;
}

/* Avatar */
.tm-avatar-wrap {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 24px;
}
.tm-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2;
    border: 4px solid var(--white);
    box-shadow: 0 8px 32px rgba(22,61,136,.15);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.tm-avatar:hover {
    transform: scale(1.04);
}
.tm-avatar-placeholder {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-light), rgba(79,140,247,.15));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    border: 4px solid var(--white);
    box-shadow: 0 8px 32px rgba(22,61,136,.15);
}
.tm-avatar-placeholder .icon {
    font-size: 60px;
    color: var(--blue3);
}

/* Decorative ring around avatar */
.tm-avatar-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed rgba(22,61,136,.1);
    animation: tmRingSpin 20s linear infinite;
    z-index: 1;
}
@keyframes tmRingSpin { to { transform: rotate(360deg); } }

/* Verified badge */
.tm-verified-badge {
    position: absolute;
    bottom: 8px;
    right: 12px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(22,61,136,.12);
}
.tm-verified-badge .icon {
    font-size: 26px;
    color: var(--blue);
    font-variation-settings: 'FILL' 1;
}

/* Name & Role */
.tm-name {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.4;
    letter-spacing: -.3px;
}
.tm-role {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(247,181,0,.08), rgba(247,181,0,.03));
    border: 1px solid rgba(247,181,0,.15);
    border-radius: 50px;
    padding: 6px 20px;
}

/* ── Decorative Divider ── */
.tm-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 32px;
    position: relative;
}
.tm-divider::before,
.tm-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.tm-divider-icon {
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tm-divider-icon .icon {
    font-size: 18px;
    color: var(--gold);
    font-variation-settings: 'FILL' 1;
}

/* ── Bio Section ── */
.tm-bio-section {
    padding: 0 40px 28px;
}
.tm-bio-content {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--text);
    text-align: center;
    position: relative;
}
.tm-bio-content::before {
    content: '\201C';
    position: absolute;
    top: -20px;
    right: -8px;
    font-size: 4rem;
    color: rgba(22,61,136,.06);
    font-family: Georgia, serif;
    line-height: 1;
}
[dir="ltr"] .tm-bio-content::before {
    right: auto;
    left: -8px;
}

/* ── Contact Section ── */
.tm-contact-section {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 0 32px 28px;
    flex-wrap: wrap;
}
.tm-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    transition: all .3s ease;
    border: 1px solid transparent;
}
.tm-contact-item:hover {
    background: var(--blue-light);
    border-color: rgba(22,61,136,.1);
    color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(22,61,136,.08);
}
.tm-contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .3s ease;
}
.tm-contact-icon .icon {
    font-size: 18px;
    color: var(--blue);
}
.tm-contact-item:hover .tm-contact-icon {
    background: var(--blue);
}
.tm-contact-item:hover .tm-contact-icon .icon {
    color: var(--white);
}

/* ── Actions ── */
.tm-actions {
    display: flex;
    justify-content: center;
    padding: 8px 32px 0;
}
.btn-outline-blue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--blue-light);
    color: var(--blue);
    font-weight: 700;
    font-size: .92rem;
    background: transparent;
    transition: all .3s ease;
    text-decoration: none;
}
.btn-outline-blue:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(22,61,136,.2);
}
[dir="rtl"] .btn-outline-blue .icon { transform: rotate(180deg); }

/* ── Other Members Section ── */
.tm-others-section {
    max-width: 680px;
    margin: 48px auto 0;
}
.tm-others-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
    padding-right: 4px;
}
[dir="ltr"] .tm-others-title { padding-right: 0; padding-left: 4px; }

.tm-others-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tm-other-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all .3s ease;
}
.tm-other-card:hover {
    border-color: var(--blue-light);
    box-shadow: 0 4px 20px rgba(22,61,136,.08);
    transform: translateX(-4px);
}
[dir="ltr"] .tm-other-card:hover { transform: translateX(4px); }

.tm-other-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--blue-light);
    flex-shrink: 0;
}
.tm-other-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tm-other-placeholder .icon {
    font-size: 24px;
    color: var(--blue3);
}
.tm-other-info {
    flex: 1;
    min-width: 0;
}
.tm-other-info h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tm-other-info span {
    font-size: .82rem;
    color: var(--gold);
    font-weight: 600;
}
.tm-other-arrow {
    color: var(--muted);
    font-size: 20px;
    transition: all .3s ease;
    flex-shrink: 0;
}
[dir="ltr"] .tm-other-arrow { transform: scaleX(-1); }
.tm-other-card:hover .tm-other-arrow {
    color: var(--blue);
    transform: translateX(-4px);
}
[dir="ltr"] .tm-other-card:hover .tm-other-arrow {
    transform: scaleX(-1) translateX(-4px);
}

/* ── Team Detail — Responsive ── */
@media (max-width: 768px) {
    .tm-profile-card { border-radius: var(--radius); }
    .tm-profile-header { padding: 36px 24px 20px; }
    .tm-avatar-wrap { width: 120px; height: 120px; margin-bottom: 20px; }
    .tm-avatar, .tm-avatar-placeholder { width: 120px; height: 120px; }
    .tm-avatar-placeholder .icon { font-size: 48px; }
    .tm-avatar-ring { inset: -6px; }
    .tm-verified-badge { width: 30px; height: 30px; bottom: 4px; right: 8px; }
    .tm-verified-badge .icon { font-size: 22px; }
    .tm-name { font-size: 1.4rem; }
    .tm-role { font-size: .9rem; padding: 5px 16px; }
    .tm-bio-section { padding: 0 24px 24px; }
    .tm-bio-content { font-size: .98rem; line-height: 1.9; }
    .tm-bio-content::before { font-size: 3rem; top: -16px; }
    .tm-contact-section { padding: 0 20px 24px; gap: 10px; }
    .tm-contact-item { padding: 10px 18px; font-size: .88rem; }
    .tm-actions { padding: 8px 20px 0; }
    .tm-others-section { margin-top: 36px; }
}
@media (max-width: 480px) {
    .tm-profile-header { padding: 28px 18px 16px; }
    .tm-avatar-wrap { width: 100px; height: 100px; margin-bottom: 16px; }
    .tm-avatar, .tm-avatar-placeholder { width: 100px; height: 100px; }
    .tm-avatar-placeholder .icon { font-size: 40px; }
    .tm-verified-badge { width: 28px; height: 28px; bottom: 2px; right: 4px; }
    .tm-verified-badge .icon { font-size: 20px; }
    .tm-name { font-size: 1.25rem; }
    .tm-role { font-size: .85rem; }
    .tm-divider { padding: 14px 20px; }
    .tm-bio-section { padding: 0 18px 20px; }
    .tm-bio-content { font-size: .92rem; line-height: 1.85; }
    .tm-contact-section { flex-direction: column; padding: 0 18px 20px; }
    .tm-contact-item { width: 100%; justify-content: center; }
    .tm-actions { padding: 8px 18px 0; }
    .tm-actions .btn-outline-blue { width: 100%; justify-content: center; }
    .tm-others-section { margin-top: 28px; }
    .tm-other-card { padding: 12px 14px; }
}

/* ═══════════════════════════════════════════
   EVENTS
   ═══════════════════════════════════════════ */
.event-card .event-date-badge {
    position: absolute;
    top: 16px; right: 16px;
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.event-date-badge .day { font-size: 1.4rem; font-weight: 900; color: var(--blue); line-height: 1; }
.event-date-badge .month { font-size: .75rem; color: var(--muted); font-weight: 600; }
.event-card .event-status {
    position: absolute;
    top: 16px; left: 16px;
}

/* ═══════════════════════════════════════════
   REGISTRATION SUCCESS
   ═══════════════════════════════════════════ */
.success-page {
    text-align: center;
    padding: 60px 20px;
}
.success-icon {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16a34a, var(--green));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: var(--white);
    font-size: 48px;
    animation: pulse-glow 2s infinite;
}
.success-page h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 12px;
}
.success-page p { color: var(--muted); margin-bottom: 8px; }
.app-number {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--gold);
    background: var(--gold-light);
    display: inline-block;
    padding: 10px 30px;
    border-radius: 50px;
    margin: 20px 0;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
    50% { box-shadow: 0 0 0 20px rgba(34,197,94,0); }
}

/* ═══════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════ */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    color: var(--white);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(22,61,136,.3);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    z-index: 100;
    border: none;
    cursor: pointer;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-4px); }

/* ═══════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

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

/* ═══════════════════════════════════════════
   MAP & WORKING HOURS
   ═══════════════════════════════════════════ */
.map-embed {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-top: 24px;
}
.map-embed iframe { width: 100%; height: 300px; border: none; }
.working-hours { margin-top: 24px; }
.working-hours h4 { font-size: 1rem; font-weight: 700; color: var(--blue); margin-bottom: 12px; }
.hours-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: .93rem;
}
.hours-row .day { font-weight: 600; color: var(--text); }
.hours-row .time { color: var(--muted); }

/* ═══════════════════════════════════════════
   404 PAGE
   ═══════════════════════════════════════════ */
.page-404 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}
.page-404 h1 {
    font-size: 8rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--blue), var(--blue3));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.page-404 h2 { font-size: 1.5rem; color: var(--text); margin: 16px 0; }
.page-404 p { color: var(--muted); margin-bottom: 24px; }

/* ═══════════════════════════════════════════
   FILE UPLOAD PREVIEW
   ═══════════════════════════════════════════ */
.file-upload {
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}
.file-upload:hover { border-color: var(--blue3); background: var(--blue-light); }
.file-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.file-upload .icon { font-size: 36px; color: var(--blue3); margin-bottom: 8px; }
.file-upload p { color: var(--muted); font-size: .9rem; }
.file-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px;
    background: var(--blue-light);
    border-radius: 8px;
}
.file-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.file-preview .file-info { flex: 1; font-size: .85rem; }
.file-preview .remove-file {
    background: none; border: none;
    color: var(--red); cursor: pointer;
    font-size: 20px;
}

/* ═══════════════════════════════════════════
   REVIEW SUMMARY (Registration Step 7)
   ═══════════════════════════════════════════ */
/* (review-section moved to wizard CSS above) */
.review-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--blue-light); }
.review-label { color: var(--muted); font-weight: 600; font-size: .88rem; }
.review-value { color: var(--text); font-weight: 600; font-size: .88rem; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .about-intro { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .cp-info-grid { grid-template-columns: repeat(2, 1fr); }
    .cp-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .grid-3, .grid-6 { grid-template-columns: repeat(2, 1fr); }
    .vision-mission { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    .navbar-links { display: none; }
    .mobile-toggle { display: flex; }
    .mobile-menu { display: block; }
}
@media (max-width: 768px) {
    /* Hero — premium mobile overlay with depth */
    .hero-slide-overlay {
        background: linear-gradient(160deg, rgba(8,25,66,.92) 0%, rgba(22,61,136,.78) 40%, rgba(47,99,199,.65) 70%, rgba(79,140,247,.5) 100%);
    }
    /* Show full image on mobile: contain + gradient fill */
    div.hero-slide-bg {
        background-size: contain;
        background-position: center 30%;
        background-repeat: no-repeat;
    }
    .floating-shapes .shape { opacity: .06; }
    .shape-cube { width: 40px; height: 40px; }
    .shape-ring { width: 50px; height: 50px; }
    .shape-sphere { width: 28px; height: 28px; }
    .hero-slide-content h1 { font-size: var(--fs-hero); line-height: 1.3; }
    .hero-slide-content p { font-size: var(--fs-hero-sub); line-height: 1.7; }
    .hero-slide-content { padding: 100px 16px 140px; }
    .hero-slider-arrow { width: 40px; height: 40px; }
    .hero-arrow-prev { right: 12px; }
    .hero-arrow-next { left: 12px; }
    .hero-trust-bar { bottom: 110px; gap: 10px; flex-wrap: wrap; justify-content: center; }
    .trust-badge {
        font-size: var(--fs-xs);
        padding: 8px 14px;
        background: rgba(255,255,255,.12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,.15);
        animation: trustFadeUp .6s ease both;
    }
    .trust-badge:nth-child(2) { animation-delay: .15s; }
    .hero-slider-dots { bottom: 80px; }
    /* Sections — fluid spacing */
    .section { padding: var(--space-section) 0; }
    .section-title h2 { font-size: var(--fs-h2); }
    /* Page hero — premium mobile */
    .page-hero { padding: 130px 0 80px; }
    .page-hero h1 { font-size: var(--fs-h1); line-height: 1.35; }
    .page-hero-icon {
        width: 64px; height: 64px; border-radius: 18px;
        box-shadow: 0 8px 24px rgba(22,61,136,.2);
    }
    .page-hero-icon .icon { font-size: 28px; }
    .page-hero-sub { font-size: var(--fs-body); }
    .page-hero .breadcrumb { font-size: var(--fs-small); padding: 6px 16px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-brand-bar { flex-direction: column; text-align: center; gap: 20px; }
    .footer-brand { flex-direction: column; }
    .footer-brand-info { text-align: center; }
    .footer-social-row { justify-content: center; }
    .footer-col-title { justify-content: center; }
    .footer-col { text-align: center; }
    .footer-link-list a { justify-content: center; padding-right: 0; }
    .footer-link-list a::before { display: none; }
    .footer-contact-list { align-items: center; }
    .footer-contact-row { justify-content: center; }
    .footer-hours { justify-content: center; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .review-grid, .wz-review-body { grid-template-columns: 1fr; }
    .steps-bar, .steps-bar { justify-content: flex-start; padding: 20px 0; }
    .cp-info-grid { grid-template-columns: 1fr; }
    .cp-cta { padding: 40px 24px; }
    .cp-cta h3 { font-size: 1.4rem; }
    .cp-cta-btns { flex-direction: column; align-items: center; }
    /* CTA Banner */
    .cta-banner { padding: 52px 0 70px; }
    .cta-banner h2 { font-size: var(--fs-h2); }
    .cta-banner p { font-size: var(--fs-body); margin-bottom: 24px; }
    /* Stat cards — premium mobile */
    .stat-card .stat-number { font-size: 2.2rem; }
    .stat-card .stat-plus { font-size: 1.3rem; }
    .stat-card {
        border-radius: var(--radius);
        transition: transform .3s ease, box-shadow .3s ease;
    }
    /* 404 page */
    .page-404 h1 { font-size: 5rem; }
    .page-404 h2 { font-size: 1.3rem; }
    /* Card images */
    .card-img { height: 190px; }
    .album-card .album-img { height: 200px; }
    /* Modal */
    .modal { padding: 24px; border-radius: var(--radius-lg); }
    .modal-lg { max-width: 92vw; }
    .modal-xl { max-width: 95vw; }
    /* Wizard */
    .wizard-body { min-height: 260px; }
    /* Popup slide-up fix for mid-screens */
    .site-popup-slide-up { margin-left: 0; left: 4%; right: 4%; max-width: 92%; }
    .site-popup-slide-up.site-popup-has-image { margin-left: 0; }
    /* Marquee fade edges */
    .features-marquee::before,
    .features-marquee::after { width: 50px; }
}
@media (max-width: 480px) {
    .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .hero-btns { flex-direction: column; align-items: center; gap: 12px; }
    .hero-btns .btn { width: 100%; max-width: 300px; justify-content: center; }
    .hero-slide-content h1 { font-size: var(--fs-hero); }
    .hero-slide-content p { font-size: var(--fs-hero-sub); max-width: 90%; }
    .hero-slide-content { padding: 80px 14px 120px; min-height: 100dvh; }
    .hero { min-height: 100dvh; }
    div.hero-slide-bg {
        background-size: contain;
        background-position: center 25%;
        background-repeat: no-repeat;
    }
    .hero-slide-overlay {
        background: linear-gradient(160deg, rgba(8,25,66,.92) 0%, rgba(22,61,136,.8) 40%, rgba(47,99,199,.7) 70%, rgba(79,140,247,.55) 100%);
    }
    .floating-shapes { display: none; }
    .hero-slider-arrow { display: none; }
    .hero-trust-bar { bottom: 82px; gap: 8px; padding: 0 16px; }
    .trust-badge { font-size: .75rem; padding: 8px 14px; gap: 6px; }
    .hero-slider-dots { bottom: 60px; }
    .step-item, .wizard-step { padding: 0 14px; }
    .about-mini-stats { grid-template-columns: 1fr; }
    .toast { min-width: auto; max-width: calc(100vw - 32px); }
    .toast-container { top: 12px; left: 12px; right: 12px; }
    .cp-form-card { padding: var(--space-card); }
    .cp-form-header h3 { font-size: var(--fs-h3); }
    .cp-sidebar-card { border-radius: var(--radius); }
    .cp-faq-q { font-size: 0.95rem; padding: 14px 18px; }
    /* CTA Banner */
    .cta-banner { padding: 40px 0 56px; }
    .cta-banner h2 { font-size: var(--fs-h2); }
    .cta-banner p { font-size: var(--fs-body); }
    /* Stat cards */
    .stat-card .stat-number { font-size: 1.9rem; }
    .stat-card .stat-plus { font-size: 1.1rem; }
    /* 404 page */
    .page-404 h1 { font-size: 3.5rem; }
    .page-404 h2 { font-size: 1.15rem; }
    .page-404 p { font-size: .9rem; }
    /* Card images — consistent aspect ratio */
    .card-img { height: 170px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
    .album-card .album-img { height: 180px; }
    .news-card .card-img { height: 170px; }
    /* Modal — premium feel */
    .modal { padding: 20px 16px; border-radius: var(--radius-lg); }
    .modal-header h3 { font-size: 1.05rem; }
    /* Wizard */
    .wizard-body { min-height: auto; padding: 20px 16px 14px; }
    /* About text */
    .about-text h2 { font-size: var(--fs-h2); }
    /* Section — fluid */
    .section { padding: var(--space-section) 0; }
    .section-title h2 { font-size: var(--fs-h2); }
    /* Container */
    .container { padding: 0 var(--space-container); }
    /* Map card */
    .cp-map-card iframe { height: 180px; }
    /* Marquee fade edges */
    .features-marquee::before,
    .features-marquee::after { width: 30px; }
    .feature-card { min-width: 280px; }
    /* Back to top */
    .back-to-top { width: 42px; height: 42px; bottom: 16px; left: 16px; font-size: 20px; }
}

/* ── 360px — Ultra-small screens ── */
@media (max-width: 360px) {
    html { font-size: 14px; }
    .container { padding: 0 12px; }
    .hero-slide-content h1 { font-size: 1.5rem; }
    .hero-slide-content p { font-size: .85rem; }
    .hero-slide-content { padding: 70px 12px 100px; }
    .hero-trust-bar { bottom: 68px; gap: 4px; padding: 0 10px; }
    .trust-badge { font-size: .65rem; padding: 5px 8px; gap: 4px; }
    .trust-badge .icon { font-size: 14px; }
    .hero-slider-dots { bottom: 48px; }
    .section { padding: 36px 0; }
    .section-title h2 { font-size: 1.3rem; }
    .page-hero { padding: 110px 0 60px; }
    .page-hero h1 { font-size: 1.4rem; }
    .page-hero-icon { width: 52px; height: 52px; border-radius: 14px; }
    .page-hero-icon .icon { font-size: 24px; }
    .stat-card .stat-number { font-size: 1.6rem; }
    .stat-card .stat-label { font-size: .75rem; }
    .page-404 h1 { font-size: 2.8rem; }
    .page-404 h2 { font-size: 1rem; }
    .page-404 p { font-size: .82rem; }
    .card-img { height: 150px; }
    .album-card .album-img { height: 160px; }
    .feature-card { min-width: 250px; }
    .cta-banner { padding: 32px 0 44px; }
    .cta-banner h2 { font-size: 1.15rem; }
    .cta-banner p { font-size: .85rem; }
    .footer-brand-logo { width: 50px; height: 50px; }
    .footer-brand-info h3 { font-size: 1rem; }
    .modal { padding: 16px 12px; border-radius: var(--radius); }
    .modal-header h3 { font-size: .95rem; }
    .cp-form-card { padding: 18px; }
    /* Bottom nav compact */
    .bottom-nav-cta { padding: 8px 12px; transform: translateY(-2px); }
    .bottom-nav-item { padding: 5px 6px; min-width: 48px; }
    .bottom-nav-item .icon { font-size: 20px; }
    .bottom-nav-item span:not(.icon) { font-size: .62rem; }
    .btn { padding: 10px 18px; font-size: .88rem; }
    .btn-lg { padding: 12px 22px; font-size: .95rem; }
    .about-text h2 { font-size: 1.3rem; }
    .wizard-body { padding: 16px 12px 12px; }
    .wizard-footer { padding: 12px 16px 16px; }
    .wizard-footer .btn { min-width: 100px; padding: 8px 16px; font-size: .82rem; }
    .wizard-stepper { padding: 16px 8px 12px; }
    .wizard-step { padding: 0 6px; }
    .wz-circle { width: 30px; height: 30px; font-size: .75rem; }
    .wz-label { font-size: .6rem; max-width: 48px; }
    .wizard-step + .wizard-step::before { top: 15px; }
    .container-sm { padding: 0 12px; }
    /* Popup */
    .site-popup-content { padding: 28px 18px 24px; }
    .site-popup h3 { font-size: 1.15rem; }
    .site-popup p { font-size: .82rem; }
    .site-popup-icon-wrap { width: 64px; height: 64px; }
    .site-popup-icon { width: 64px; height: 64px; }
    .site-popup-icon .icon { font-size: 28px; }
    .site-popup-image-col { height: auto; }
    .site-popup-image-col img { height: auto; max-height: 40vh; object-fit: contain; background: #f5f8fd; }
    .btn-popup-primary { padding: 12px 20px; font-size: .92rem; }
}

/* ═══════════════════════════════════════════
   MOBILE ENHANCEMENTS — Professional v2
   Footer · Popup · Sizing · Touch
   ═══════════════════════════════════════════ */

/* ── 768px — Tablets & Large Phones ── */
@media (max-width: 768px) {
    /* — Footer — */
    .footer-brand-bar { padding: 32px 0 28px; margin-bottom: 28px; }
    .footer-brand-name { font-size: 1.2rem; }
    .footer-brand-tagline { font-size: .8rem; }
    .footer-social-btn { width: 44px; height: 44px; }
    .footer-grid { padding-bottom: 32px; gap: 24px; }
    .footer-col { max-width: 400px; margin: 0 auto; }
    .footer-col-text { max-width: 360px; margin: 0 auto; line-height: 1.8; }
    .footer-link-list a { min-height: 44px; display: inline-flex; align-items: center; }
    .footer-link-list li { margin-bottom: 4px; }
    .footer-contact-row { min-height: 44px; }
    .footer-bottom-inner { padding: 16px 0; gap: 8px; }
    .footer-col-title { font-size: .92rem; margin-bottom: 16px; }

    /* — Popup — */
    .site-popup-overlay { padding: 16px; }
    .site-popup-close { width: 44px; height: 44px; font-size: 22px; }
    .btn-popup-primary { width: 100%; justify-content: center; }
    .btn-popup-dismiss { width: 100%; justify-content: center; }
    .site-popup-btns { gap: 8px; }
    .site-popup-content { overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 70vh; }

    /* — General Sizing — */
    .section-title { margin-bottom: 36px; }
    .section-title p { font-size: 1rem; padding: 0 8px; }
    .cta-banner .hero-btns { flex-wrap: wrap; justify-content: center; gap: 12px; }
    .cta-banner .btn { min-width: 160px; justify-content: center; }
    .cta-wave svg { height: 48px; }
}

/* ── 480px — Phones ── */
@media (max-width: 480px) {
    /* — Footer — */
    .footer-brand-bar { padding: 24px 0 20px; margin-bottom: 20px; gap: 16px; }
    .footer-logo-wrap { width: 56px; height: 56px; border-radius: 14px; }
    .footer-brand-logo { width: 40px; height: 40px; }
    .footer-brand-name { font-size: 1.1rem; }
    .footer-social-row { gap: 8px; }
    .footer-social-btn { width: 42px; height: 42px; }
    .footer-grid { gap: 20px; padding-bottom: 24px; }
    .footer-col-title { font-size: .88rem; margin-bottom: 12px; }
    .footer-col-text { font-size: .84rem; }
    .footer-link-list a { font-size: .88rem; }
    .footer-contact-row { font-size: .85rem; }
    .footer-contact-icon { width: 34px; height: 34px; border-radius: 8px; }
    .footer-hours { padding: 8px 14px; font-size: .82rem; }
    .footer-bottom-inner { padding: 14px 0; font-size: .78rem; }
    .footer-bottom-links { font-size: .78rem; }

    /* — Popup — */
    .site-popup-overlay { padding: 10px; }
    .site-popup { border-radius: 20px; }
    .site-popup-has-image .site-popup-content { padding: 24px 20px 28px; }
    .btn-popup-primary { border-radius: 14px; }
    .btn-popup-dismiss { padding: 10px 20px; border-radius: 12px; }
    .site-popup-content { max-height: 65vh; }

    /* — General Sizing — */
    .section-title { margin-bottom: 28px; }
    .section-title p { font-size: .92rem; }
    .hero-btns .btn { width: 100%; max-width: 280px; justify-content: center; }
    .cta-banner .hero-btns { flex-direction: column; align-items: center; gap: 10px; }
    .cta-banner .hero-btns .btn { width: 100%; max-width: 280px; }
    .cta-wave svg { height: 36px; }
    .mobile-menu-links a { min-height: 48px; padding: 14px 16px; }
    .mobile-menu-footer { padding: 14px 16px; }
}

/* ── 360px — Small Phones ── */
@media (max-width: 360px) {
    /* — Footer — */
    .footer-brand-bar { padding: 20px 0 16px; margin-bottom: 16px; gap: 14px; }
    .footer-logo-wrap { width: 48px; height: 48px; border-radius: 12px; }
    .footer-brand-logo { width: 36px; height: 36px; }
    .footer-brand-name { font-size: 1rem; }
    .footer-social-btn { width: 40px; height: 40px; border-radius: 10px; }
    .footer-social-row { gap: 6px; }
    .footer-grid { gap: 16px; padding-bottom: 20px; }
    .footer-col-title { font-size: .85rem; margin-bottom: 10px; }
    .footer-col-text { font-size: .8rem; }
    .footer-link-list a { font-size: .84rem; }
    .footer-contact-row { font-size: .82rem; }
    .footer-contact-icon { width: 30px; height: 30px; border-radius: 8px; }
    .footer-hours { padding: 6px 12px; font-size: .78rem; }
    .footer-bottom-inner { padding: 12px 0; font-size: .75rem; }

    /* — Popup — */
    .site-popup-overlay { padding: 8px; }
    .site-popup { border-radius: 16px; }
    .site-popup-close { width: 38px; height: 38px; top: 10px; left: 10px; font-size: 18px; }
    [dir="ltr"] .site-popup-close { right: 10px; left: auto; }
    .site-popup-has-image .site-popup-content { padding: 20px 16px 22px; }
    .site-popup-countdown { gap: 6px; }
    .site-popup-countdown-num { font-size: 1rem; min-width: 38px; padding: 6px 4px; border-radius: 10px; }
    .site-popup-content { max-height: 80vh; overflow-y: auto; }

    /* — General — */
    .mobile-menu-links a { min-height: 44px; font-size: .9rem; }
    .mobile-menu-header { padding: 14px 16px; }
    .mobile-menu-close { width: 34px; height: 34px; font-size: 20px; }
    .cta-wave svg { height: 28px; }
}

/* ── iOS Safe Area Support ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .footer-bottom-inner {
            padding-bottom: calc(16px + env(safe-area-inset-bottom));
        }
        .mobile-menu-footer {
            padding-bottom: calc(16px + env(safe-area-inset-bottom));
        }
        .site-popup-overlay {
            padding-bottom: env(safe-area-inset-bottom);
        }
        .back-to-top {
            bottom: calc(16px + env(safe-area-inset-bottom));
        }
    }
}

/* ── Touch Feedback ── */
@media (hover: none) and (pointer: coarse) {
    .footer-social-btn:active {
        transform: scale(0.92);
        transition: transform .1s;
    }
    .footer-link-list a:active {
        opacity: .7;
        transition: opacity .1s;
    }
    .btn-popup-primary:active {
        transform: scale(0.97);
        transition: transform .1s;
    }
    .btn-popup-dismiss:active {
        background: #f0f0f0;
        transition: background .1s;
    }
    .mobile-menu-links a:active {
        background: var(--blue-light);
        transition: background .1s;
    }
    .back-to-top:active {
        transform: scale(0.9);
        transition: transform .1s;
    }
}

/* ═══════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════ */
@media print {
    .navbar, .footer, .back-to-top, .mobile-menu, .toast-container,
    .no-print, .btn, .step-actions, .wizard-footer { display: none !important; }
    body { background: #fff; color: #000; }
    .card, .stat-card, .feature-card { box-shadow: none; border: 1px solid #ddd; }
    .page-hero { padding: 20px 0; background: #eee; }
    .page-hero-icon, .page-hero-wave, .page-hero .floating-shapes { display: none; }
    .section { padding: 20px 0; }
}

/* ═══════════════════════════════════════════
   SITE POPUP — Premium Design v2
   ═══════════════════════════════════════════ */
.site-popup-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(6,8,20,0.7);
    backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    padding: 24px;
}
.site-popup-overlay.active { opacity: 1; visibility: visible; }

/* ── Main Card ── */
.site-popup {
    background: #fff;
    border-radius: 28px;
    max-width: 640px; width: 100%;
    position: relative; overflow: hidden;
    transform: translateY(50px) scale(0.88);
    transition: transform 0.6s cubic-bezier(.22,1.2,.36,1);
    box-shadow:
        0 40px 100px rgba(0,0,0,0.3),
        0 0 0 1px rgba(201,169,98,0.12),
        inset 0 1px 0 rgba(255,255,255,0.9);
}
.site-popup-overlay.active .site-popup { transform: translateY(0) scale(1); }

/* Wide layout when image present */
.site-popup-has-image { max-width: 900px; }

/* ── Decorative Gold Accents ── */
.site-popup-decor-top {
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--gold), #e8c547, var(--gold-dark, #b8962e), var(--gold));
    background-size: 300% 100%;
    animation: popupGoldShimmer 4s ease-in-out infinite;
    z-index: 2;
}
@keyframes popupGoldShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.site-popup-decor-bottom {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 120px; height: 3px; border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ── Sparkle Decorations ── */
.site-popup-sparkle {
    position: absolute; z-index: 3; pointer-events: none;
    color: var(--popup-accent, var(--gold)); opacity: 0;
}
.site-popup-overlay.active .site-popup-sparkle { animation: popupSparkle 0.5s forwards; }
.site-popup-sparkle:nth-child(1) { top: -8px; right: 40px; animation-delay: 0.3s; }
.site-popup-sparkle:nth-child(2) { top: 30px; left: -12px; animation-delay: 0.5s; }
.site-popup-sparkle:nth-child(3) { bottom: 20px; right: -8px; animation-delay: 0.7s; }
.site-popup-sparkle:nth-child(4) { bottom: -6px; left: 60px; animation-delay: 0.4s; }
@keyframes popupSparkle {
    0% { opacity: 0; transform: scale(0) rotate(-30deg); }
    60% { opacity: 1; transform: scale(1.2) rotate(5deg); }
    100% { opacity: 0.7; transform: scale(1) rotate(0deg); animation-fill-mode: forwards; }
}
.site-popup-sparkle .icon { font-size: 22px; }
.site-popup-sparkle:nth-child(2) .icon { font-size: 16px; }
.site-popup-sparkle:nth-child(4) .icon { font-size: 18px; }

/* ── Inner Layout ── */
.site-popup-inner {
    display: flex; flex-direction: row;
}
.site-popup-has-image .site-popup-inner { min-height: 520px; }

/* ── Image Column ── */
.site-popup-image-col {
    flex: 0 0 42%; max-width: 42%; min-height: 100%;
    position: relative; overflow: hidden;
    margin: 10px; margin-left: 0;
    border-radius: 0 20px 20px 0;
}
[dir="ltr"] .site-popup-image-col {
    order: -1;
    margin-left: 10px; margin-right: 0;
    border-radius: 20px 0 0 20px;
}
.site-popup-image-col img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
    transition: transform 8s cubic-bezier(.25,.46,.45,.94);
}
.site-popup-overlay.active .site-popup-image-col img {
    transform: scale(1.1);
}
.site-popup-image-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,30,0.05) 0%, transparent 30%, transparent 60%, rgba(10,10,30,0.25) 100%);
    pointer-events: none;
}

/* ── Content Column ── */
.site-popup-content {
    flex: 1; padding: 52px 44px 44px;
    display: flex; flex-direction: column;
    justify-content: center;
    text-align: center;
}
.site-popup-has-image .site-popup-content { text-align: start; padding: 44px 36px 36px; }

/* ── Staggered Animation ── */
.site-popup-content > * {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.site-popup-overlay.active .site-popup-content > * { opacity: 1; transform: translateY(0); }
.site-popup-overlay.active .site-popup-content > *:nth-child(1) { transition-delay: 0.15s; }
.site-popup-overlay.active .site-popup-content > *:nth-child(2) { transition-delay: 0.25s; }
.site-popup-overlay.active .site-popup-content > *:nth-child(3) { transition-delay: 0.35s; }
.site-popup-overlay.active .site-popup-content > *:nth-child(4) { transition-delay: 0.45s; }
.site-popup-overlay.active .site-popup-content > *:nth-child(5) { transition-delay: 0.55s; }

/* ── Badge ── */
.site-popup-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 700;
    color: var(--popup-accent, var(--gold, #c9a962));
    background: linear-gradient(135deg, rgba(201,169,98,0.1), rgba(201,169,98,0.04));
    border: 1px solid rgba(201,169,98,0.2);
    border-radius: 20px; padding: 5px 14px;
    margin-bottom: 16px; width: fit-content;
    letter-spacing: .3px;
}
.site-popup-has-image .site-popup-badge { margin-left: 0; margin-right: 0; }
.site-popup-badge .icon { font-size: 14px; }

/* ── Icon (no-image mode) ── */
.site-popup-icon-wrap {
    position: relative; width: 96px; height: 96px;
    margin: 0 auto 28px;
}
.site-popup-has-image .site-popup-icon-wrap { margin: 0 0 24px; }
.site-popup-icon {
    width: 96px; height: 96px; border-radius: 50%;
    background: linear-gradient(135deg, var(--popup-accent, #c9a962), #8a7034);
    background: linear-gradient(135deg, var(--popup-accent, #c9a962), color-mix(in srgb, var(--popup-accent, #c9a962) 65%, #000));
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1;
    box-shadow:
        0 10px 40px rgba(201,169,98,0.35),
        0 0 0 6px rgba(201,169,98,0.08);
    animation: popupIconFloat 3s ease-in-out infinite;
}
@keyframes popupIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.site-popup-icon .icon { font-size: 42px; color: #fff; }
.site-popup-icon-ring {
    position: absolute; inset: -10px;
    border-radius: 50%;
    border: 2px dashed rgba(201,169,98,0.25);
    animation: popupRingSpin 14s linear infinite;
}
@keyframes popupRingSpin { to { transform: rotate(360deg); } }

/* ── Close Button ── */
.site-popup-close {
    position: absolute; top: 14px; left: 14px; z-index: 10;
    background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 50%; width: 40px; height: 40px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #888; font-size: 20px;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
[dir="ltr"] .site-popup-close { left: auto; right: 14px; }
.site-popup-close:hover {
    background: var(--red, #dc3545); color: #fff;
    border-color: transparent; transform: rotate(90deg) scale(1.05);
    box-shadow: 0 4px 16px rgba(220,53,69,0.3);
}

/* ── Typography ── */
.site-popup h3 {
    font-size: 1.65rem; color: var(--heading, #1a1a2e);
    margin-bottom: 14px; font-weight: 800;
    line-height: 1.4; letter-spacing: -0.3px;
}
.site-popup p {
    color: var(--muted, #666); line-height: 1.9;
    margin-bottom: 0; font-size: 1rem;
}

/* ── Countdown Timer ── */
.site-popup-countdown {
    display: flex; gap: 10px; justify-content: center;
    margin-bottom: 24px;
}
.site-popup-has-image .site-popup-countdown { justify-content: flex-start; }
.site-popup-countdown-item {
    text-align: center; min-width: 52px;
}
.site-popup-countdown-num {
    display: block; font-size: 1.4rem; font-weight: 900;
    color: var(--popup-accent, var(--gold)); line-height: 1;
    background: linear-gradient(135deg, rgba(201,169,98,0.08), rgba(201,169,98,0.03));
    border: 1px solid rgba(201,169,98,0.15);
    border-radius: 12px; padding: 10px 6px;
}
.site-popup-countdown-label {
    display: block; font-size: 0.68rem; font-weight: 600;
    color: var(--muted, #888); margin-top: 4px; letter-spacing: .3px;
}

/* ── Buttons ── */
.site-popup-btns {
    display: flex; flex-direction: column; gap: 10px;
    padding-top: 24px;
    border-top: 1px solid rgba(0,0,0,0.05);
    margin-top: auto;
}
.btn-popup-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 32px; font-size: 1.05rem; font-weight: 700;
    border-radius: 16px; border: none; cursor: pointer;
    transition: all 0.35s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden;
    text-decoration: none;
}
.btn-popup-primary::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent);
    opacity: 0; transition: opacity 0.35s;
}
.btn-popup-primary:hover::before { opacity: 1; }
.btn-popup-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.btn-popup-primary:active { transform: translateY(-1px); }
.btn-popup-primary.btn-primary { background: linear-gradient(135deg, var(--blue, #1d4ed8), var(--blue2, #2563eb)); color: #fff; }
.btn-popup-primary.btn-gold { background: linear-gradient(135deg, var(--gold, #c9a962), var(--gold-dark, #b8962e)); color: #fff; }
.btn-popup-primary.btn-success { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; }
.btn-popup-primary.btn-danger { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; }

/* Pulse attention on CTA */
.site-popup-overlay.active .btn-popup-primary {
    animation: popupBtnPulse 2.5s ease-in-out 1.2s infinite;
}
@keyframes popupBtnPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
    50% { box-shadow: 0 4px 24px rgba(0,0,0,0.22), 0 0 0 4px rgba(201,169,98,0.12); }
}

.btn-popup-dismiss {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1.5px solid #e5e5e5;
    color: #999; padding: 12px 24px; border-radius: 14px;
    cursor: pointer; font-size: 0.92rem; font-weight: 500;
    transition: all 0.3s;
}
.btn-popup-dismiss:hover { border-color: #bbb; color: var(--heading, #1a1a2e); background: #f8f8f8; }

/* ── Close Animation ── */
.site-popup-overlay.closing { opacity: 0; transition: opacity 0.35s ease; }
.site-popup-overlay.closing .site-popup { transform: translateY(30px) scale(0.92); transition: transform 0.35s ease; }

/* ── Slide-up variant ── */
.site-popup-slide-up {
    transform: translateY(100%) scale(1); border-radius: 28px 28px 0 0;
    position: fixed; bottom: 0; left: 50%;
    margin-left: -280px;
}
.site-popup-slide-up.site-popup-has-image { margin-left: -400px; }
.site-popup-overlay.active .site-popup-slide-up { transform: translateY(0) scale(1); }
.site-popup-overlay[data-style="slide-up"] { align-items: flex-end; }

/* ── Slide-right variant ── */
.site-popup-slide-right {
    transform: translateX(100%); border-radius: 28px 0 0 28px;
    position: fixed; top: 50%; right: 0; margin-top: -220px;
}
[dir="ltr"] .site-popup-slide-right { transform: translateX(-100%); left: 0; right: auto; border-radius: 0 28px 28px 0; }
.site-popup-overlay.active .site-popup-slide-right { transform: translateX(0); }
.site-popup-overlay[data-style="slide-right"] { justify-content: flex-end; }
[dir="ltr"] .site-popup-overlay[data-style="slide-right"] { justify-content: flex-start; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .site-popup { max-width: 92vw; border-radius: 24px; }
    .site-popup-has-image { max-width: 92vw; }
    .site-popup-inner { flex-direction: column; }
    .site-popup-image-col {
        flex: 0 0 100%; max-width: 100%;
        height: auto; margin: 0;
        border-radius: 0;
    }
    .site-popup-image-col img { height: auto; max-height: 45vh; object-fit: contain; background: #f5f8fd; }
    [dir="ltr"] .site-popup-image-col { margin: 0; border-radius: 0; }
    .site-popup-has-image .site-popup-content { text-align: center; padding: 28px 28px 32px; }
    .site-popup-has-image .site-popup-badge { margin: 0 auto 16px; }
    .site-popup-has-image .site-popup-countdown { justify-content: center; }
    .site-popup-has-image .site-popup-inner { min-height: auto; }
    .site-popup-slide-up { margin-left: 0; left: 0; right: 0; max-width: 100%; border-radius: 24px 24px 0 0; }
    .site-popup-slide-right { max-width: 88vw; margin-top: -200px; }
    .site-popup-sparkle { display: none; }
}
@media (max-width: 480px) {
    .site-popup-content { padding: 36px 24px 28px; }
    .site-popup h3 { font-size: 1.3rem; }
    .site-popup p { font-size: .9rem; }
    .site-popup-icon-wrap { width: 76px; height: 76px; }
    .site-popup-icon { width: 76px; height: 76px; }
    .site-popup-icon .icon { font-size: 34px; }
    .site-popup-image-col { height: auto; }
    .site-popup-image-col img { height: auto; max-height: 40vh; object-fit: contain; background: #f5f8fd; }
    .btn-popup-primary { padding: 14px 24px; font-size: 1rem; }
    .site-popup-countdown-num { font-size: 1.15rem; padding: 8px 4px; min-width: 44px; }
}

/* ── Utility ── */
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

/* ═══════════════════════════════════════════
   MOBILE PRO — App-like Experience v3
   Navbar auto-hide, bottom nav, iOS fixes,
   swipe gestures, smooth transitions
   ═══════════════════════════════════════════ */

/* ── Navbar hide-on-scroll (mobile) ── */
@media (max-width: 1100px) {
    .navbar {
        transition: transform .35s cubic-bezier(.4,0,.2,1), background .3s, box-shadow .3s;
        will-change: transform;
    }
    .navbar.nav-hidden {
        transform: translateY(-100%);
        pointer-events: none;
    }
    .navbar.nav-visible {
        transform: translateY(0);
    }
}

/* ── iOS Input Zoom Prevention ── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ── Mobile Bottom Navigation Bar — Premium ── */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1500;
    background: linear-gradient(135deg, rgba(22,61,136,.95), rgba(30,70,150,.92));
    backdrop-filter: blur(24px) saturate(2);
    -webkit-backdrop-filter: blur(24px) saturate(2);
    border-top: 1px solid rgba(201,169,98,.25);
    box-shadow: 0 -2px 20px rgba(22,61,136,.15), 0 -8px 40px rgba(22,61,136,.10);
    padding: 8px 0 calc(8px + var(--safe-bottom));
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.mobile-bottom-nav.nav-hidden {
    transform: translateY(100%);
}

@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex; }
    body { padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom)); }
    .back-to-top { bottom: calc(var(--bottom-nav-height) + 10px + var(--safe-bottom)) !important; }
    .toast-container { bottom: calc(var(--bottom-nav-height) + 16px + var(--safe-bottom)); top: auto; }
}

.mobile-bottom-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 8px;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 10px;
    min-width: 56px;
    border-radius: 14px;
    text-decoration: none;
    color: rgba(255,255,255,.65);
    font-size: .68rem;
    font-weight: 600;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.bottom-nav-item .icon {
    font-size: 22px;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    line-height: 1;
}
.bottom-nav-item span:not(.icon) {
    white-space: nowrap;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    font-size: var(--fs-xs);
}
/* Active state — premium pill indicator */
.bottom-nav-item.active {
    color: #fff;
}
.bottom-nav-item.active .icon {
    font-variation-settings: 'FILL' 1;
    transform: scale(1.1);
    color: var(--gold);
}
.bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold2));
    box-shadow: 0 2px 8px rgba(201,169,98,.35);
}
.bottom-nav-item.active::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    opacity: .5;
    z-index: -1;
}
/* CTA button (register) in bottom nav — elevated */
.bottom-nav-cta {
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color: #fff !important;
    border-radius: 16px;
    padding: 10px 16px;
    min-width: 64px;
    box-shadow: 0 4px 20px rgba(247,181,0,.35), 0 0 0 0 rgba(247,181,0,0);
    transform: translateY(-4px);
    animation: bottomNavCtaPulse 3s ease-in-out infinite;
}
@keyframes bottomNavCtaPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(247,181,0,.35); }
    50% { box-shadow: 0 6px 28px rgba(247,181,0,.45), 0 0 0 3px rgba(247,181,0,.1); }
}
.bottom-nav-cta .icon { color: #fff; font-variation-settings: 'FILL' 1; }
.bottom-nav-cta span:not(.icon) { color: #fff; font-weight: 700; }

/* Touch feedback for bottom nav — bounce effect */
@media (hover: none) and (pointer: coarse) {
    .bottom-nav-item:active:not(.bottom-nav-cta) {
        background: rgba(255,255,255,.12);
        transform: scale(0.9);
        transition: all .1s;
    }
    .bottom-nav-cta:active {
        transform: translateY(-4px) scale(0.93);
        box-shadow: 0 2px 10px rgba(247,181,0,.4);
        transition: all .1s;
    }
}

/* ── Enhanced Mobile Menu — Smoother Transitions ── */
@media (max-width: 1100px) {
    .mobile-menu {
        transition: opacity .4s ease, visibility .4s ease;
    }
    .mobile-menu-content {
        transition: transform .45s cubic-bezier(.32,.72,.35,1);
    }
    /* Swipe indicator on mobile menu */
    .mobile-menu-content::before {
        content: '';
        position: absolute;
        top: 50%; left: 4px;
        transform: translateY(-50%);
        width: 4px; height: 48px;
        border-radius: 4px;
        background: rgba(255,255,255,.15);
        opacity: 0;
        transition: opacity .3s;
        z-index: 10;
    }
    [dir="ltr"] .mobile-menu-content::before {
        left: auto; right: 4px;
    }
    .mobile-menu.open .mobile-menu-content::before {
        opacity: 1;
        transition-delay: .4s;
    }
}

/* ── Mobile Performance — Premium Animations ── */
@media (max-width: 768px) {
    /* Reduce tilt card effects */
    .tilt-card { transform: none !important; }
    /* Smooth card interactions — luxury feel */
    .card,
    .stat-card,
    .news-card,
    .event-card,
    .album-card {
        transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease !important;
    }
    .card:hover,
    .stat-card:hover,
    .news-card:hover,
    .event-card:hover,
    .album-card:hover {
        transform: translateY(-4px) !important;
    }
    /* Card touch effect — subtle scale on press */
    .card:active,
    .stat-card:active,
    .news-card:active,
    .event-card:active,
    .album-card:active {
        transform: scale(0.98) !important;
        transition-duration: .1s !important;
    }
    /* Faster reveals */
    .reveal {
        transition-duration: .4s !important;
    }
    /* Reduce parallax on shapes */
    .floating-shapes .shape {
        animation-duration: 12s !important;
    }
    /* Smooth skeleton loading for images */
    .card-img,
    .album-card .album-img {
        background: linear-gradient(110deg, #f0f4f8 0%, #e8eef5 40%, #f0f4f8 60%);
        background-size: 200% 100%;
        animation: skeletonShimmer 1.5s ease-in-out infinite;
    }
    @keyframes skeletonShimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    .card-img img,
    .album-card .album-img img {
        animation: none;
    }
}

/* ── Reduced Motion — Respect user preference ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .mobile-bottom-nav { backdrop-filter: none; background: #fff; }
    .navbar.nav-hidden { transform: none; }
}

/* ── Pull-to-refresh style indicator ── */
@media (max-width: 768px) {
    .ptr-indicator {
        position: fixed;
        top: -50px; left: 50%;
        transform: translateX(-50%);
        width: 40px; height: 40px;
        border-radius: 50%;
        background: var(--white);
        box-shadow: 0 4px 20px rgba(22,61,136,.12);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: top .3s ease, opacity .3s ease;
        opacity: 0;
    }
    .ptr-indicator.visible {
        top: 12px;
        opacity: 1;
    }
    .ptr-indicator .icon {
        font-size: 20px;
        color: var(--blue);
        animation: ptrSpin 1s linear infinite;
    }
    @keyframes ptrSpin { to { transform: rotate(360deg); } }
}

/* ── Floating Registration CTA (Mobile) ── */
@media (max-width: 768px) {
    .mobile-float-cta {
        display: none; /* Controlled by JS — shown when user scrolls past hero */
    }
    .mobile-float-cta.visible {
        display: flex;
    }
}
.mobile-float-cta {
    display: none;
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + 10px + var(--safe-bottom));
    left: 16px; right: 16px;
    z-index: 1400;
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    color: #fff;
    padding: 14px 20px;
    border-radius: 16px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: .95rem;
    box-shadow: 0 8px 32px rgba(22,61,136,.3);
    text-decoration: none;
    animation: floatCtaPulse 3s ease-in-out infinite;
    transition: transform .2s, opacity .3s;
}
.mobile-float-cta .icon { font-size: 20px; font-variation-settings: 'FILL' 1; }
.mobile-float-cta:active { transform: scale(0.96); }
@keyframes floatCtaPulse {
    0%, 100% { box-shadow: 0 8px 32px rgba(22,61,136,.3); }
    50% { box-shadow: 0 8px 40px rgba(22,61,136,.45), 0 0 0 4px rgba(79,140,247,.15); }
}
/* Hide float CTA on registration page (already there) */
body.page-registration .mobile-float-cta { display: none !important; }

/* ── Better Mobile Cards — Premium Full-width ── */
@media (max-width: 480px) {
    .card, .news-card, .event-card, .album-card {
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(22,61,136,.06);
    }
    .card-body { padding: var(--space-card); }
    .card-footer { padding: 12px var(--space-card); }
    /* Card badges on mobile */
    .card .badge, .news-card .badge { font-size: var(--fs-xs); }
    /* Better card text hierarchy */
    .card-body h3, .card-body h4 { font-size: var(--fs-h3); line-height: 1.4; }
    .card-body p { font-size: var(--fs-body); line-height: 1.7; }
}

/* ── Landscape Phone Optimization ── */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: 100vh; }
    .hero-slide-content { padding-top: 70px; padding-bottom: 80px; }
    .hero-slide-content h1 { font-size: 1.6rem; }
    .page-hero { padding: 80px 0 40px; }
    .section { padding: 36px 0; }
    .mobile-bottom-nav { padding: 4px 0; }
    .mobile-bottom-nav { padding-bottom: 4px; }
    .bottom-nav-item { padding: 4px 8px; }
    .bottom-nav-item .icon { font-size: 20px; }
    .bottom-nav-item span:not(.icon) { font-size: .6rem; }
}

/* ═══════════════════════════════════════════
   PREMIUM MOBILE — Forms, Inputs & Micro-interactions
   ═══════════════════════════════════════════ */

/* ── Premium Mobile Form Inputs ── */
@media (max-width: 768px) {
    /* Enhanced input styling */
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    textarea,
    select {
        border-radius: var(--radius-sm);
        padding: 14px 16px;
        transition: all .3s cubic-bezier(.4,0,.2,1);
        -webkit-appearance: none;
        appearance: none;
    }

    /* Focus state — premium glow */
    .form-input:focus,
    input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
    textarea:focus,
    select:focus {
        border-color: var(--blue3);
        box-shadow: 0 0 0 3px rgba(79,140,247,.12), 0 2px 8px rgba(22,61,136,.08);
        outline: none;
    }

    /* Buttons — touch-optimized */
    .btn {
        min-height: 48px;
        padding: 12px 24px;
        border-radius: var(--radius-sm);
        font-weight: 700;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .btn-lg {
        min-height: 52px;
        padding: 14px 28px;
    }

    /* Select arrow enhancement */
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236f7d91' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left 14px center;
        padding-left: 36px;
    }
    [dir="ltr"] select {
        background-position: right 14px center;
        padding-left: 16px;
        padding-right: 36px;
    }
}

/* ── Premium Page Transitions ── */
@media (max-width: 768px) {
    /* Smooth content entrance */
    .page-hero,
    .section {
        animation: mobileContentFadeIn .5s ease both;
    }
    .section:nth-child(2) { animation-delay: .1s; }
    .section:nth-child(3) { animation-delay: .15s; }
    .section:nth-child(4) { animation-delay: .2s; }

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

/* ── Premium Navbar Glass Effect (Mobile) ── */
@media (max-width: 1100px) {
    .navbar.scrolled,
    .navbar-inner {
        background: rgba(255,255,255,.88);
        backdrop-filter: blur(20px) saturate(2);
        -webkit-backdrop-filter: blur(20px) saturate(2);
        box-shadow: 0 1px 0 rgba(22,61,136,.04), 0 4px 24px rgba(22,61,136,.06);
    }
}

/* ── Premium Mobile Floating CTA ── */
@media (max-width: 768px) {
    .mobile-float-cta {
        border-radius: var(--radius);
        background: linear-gradient(135deg, var(--blue) 0%, var(--blue2) 50%, var(--blue3) 100%);
        background-size: 200% 100%;
        animation: floatCtaGradient 4s ease infinite, floatCtaPulse 3s ease-in-out infinite;
        font-size: var(--fs-body);
        padding: 14px 20px;
        box-shadow: 0 8px 32px rgba(22,61,136,.3), 0 0 0 0 rgba(79,140,247,0);
    }
    @keyframes floatCtaGradient {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
}

/* ── Enhanced Scrollbar (Mobile) ── */
@media (max-width: 768px) {
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; margin: 8px; }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(22,61,136,.15), rgba(79,140,247,.2));
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:active {
        background: rgba(22,61,136,.3);
    }
}

/* ── Premium Back-to-Top ── */
@media (max-width: 768px) {
    .back-to-top {
        border-radius: 14px;
        background: rgba(255,255,255,.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(226,232,240,.5);
        box-shadow: 0 4px 16px rgba(22,61,136,.1);
        color: var(--blue);
        transition: all .3s cubic-bezier(.4,0,.2,1);
    }
    .back-to-top:active {
        transform: scale(0.9);
        background: var(--blue);
        color: var(--white);
    }
}

/* ── Smooth Image Loading ── */
@media (max-width: 768px) {
    img {
        content-visibility: auto;
    }
    .card-img img,
    .album-card .album-img img,
    .hero-slide-bg {
        transition: opacity .4s ease;
    }
}

/* ── Touch Optimization — Global ── */
@media (hover: none) and (pointer: coarse) {
    /* All interactive elements get minimum touch target */
    .btn, a.btn,
    .mobile-menu-links a,
    .footer-link-list a,
    .footer-social-btn,
    .bottom-nav-item {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover states that cause sticky-hover on touch */
    .card:hover { box-shadow: var(--shadow-sm); }
    .news-card:hover .card-img img { transform: none; }
}

/* ═══════════════════════════════════════════
   LTR (English) Mode Adjustments
   ═══════════════════════════════════════════ */
[dir="ltr"] .lang-ar-only { display: none !important; }

/* Font adjustment for English */
[dir="ltr"] body { font-family: 'Inter', 'Segoe UI', 'Cairo', Tahoma, sans-serif; direction: ltr; }

/* Breadcrumb chevron flip */
[dir="ltr"] .breadcrumb .icon { transform: scaleX(-1); }

/* Navbar */
[dir="ltr"] .navbar-links { direction: ltr; }
[dir="ltr"] .navbar-links a:not(.btn):not(.btn-admin-link)::after { transform-origin: center; }

/* Hero shapes — mirror positions */
[dir="ltr"] .shape-1 { right: auto; left: 10%; }
[dir="ltr"] .shape-2 { right: auto; left: 85%; }
[dir="ltr"] .shape-3 { right: auto; left: 75%; }
[dir="ltr"] .shape-4 { right: auto; left: 20%; }
[dir="ltr"] .shape-5 { right: auto; left: 50%; }
[dir="ltr"] .shape-6 { right: auto; left: 60%; }

/* Wizard step connector line (starts from left in LTR) */
[dir="ltr"] .wizard-step + .wizard-step::before {
    right: auto;
    left: calc(50% + 24px);
}

/* Wizard footer arrow icons flip */
[dir="ltr"] .wizard-footer .btn .icon { transform: scaleX(-1); }

/* Event date badge & status — swap sides */
[dir="ltr"] .event-card .event-date-badge { right: auto; left: 16px; }
[dir="ltr"] .event-card .event-status { left: auto; right: 16px; }

/* Featured badge — swap side */
[dir="ltr"] .album-card .featured-badge { right: auto; left: 16px; }

/* Lightbox prev/next — swap sides */
[dir="ltr"] .lightbox-prev { right: auto; left: 20px; }
[dir="ltr"] .lightbox-next { left: auto; right: 20px; }

/* Toast — border on left side in LTR */
[dir="ltr"] .toast { border-right: none; border-left: 4px solid var(--green); }
[dir="ltr"] .toast.error { border-left-color: var(--red); border-right-color: transparent; }

/* Toast container — right side in LTR */
[dir="ltr"] .toast-container { left: auto; right: 24px; }

/* Back-to-top — right side in LTR */
[dir="ltr"] .back-to-top { left: auto; right: 30px; }

/* FAQ */
[dir="ltr"] .faq-question,
[dir="ltr"] .faq-answer { text-align: left; }

/* Contact & form alignment */
[dir="ltr"] .form-label { text-align: left; }
[dir="ltr"] .card-date,
[dir="ltr"] .card-meta { direction: ltr; }

/* Working hours */
[dir="ltr"] .hours-row { direction: ltr; }

/* Footer links icon alignment */
[dir="ltr"] .footer-links a .icon { transform: scaleX(-1); }

/* Review items border swap */
[dir="ltr"] .wz-review-item:nth-child(odd) { border-right: none; border-left: 1px solid var(--blue-light); }

/* Mobile menu slide from left in LTR — handled in main mobile menu section */

/* Search bar alignment */
[dir="ltr"] .search-bar { direction: ltr; }

/* Filter bar */
[dir="ltr"] .filter-bar { direction: ltr; }

/* Page hero text alignment */
[dir="ltr"] .page-hero { text-align: center; }

/* Section titles stay centered — OK by default */

/* Contact cards text */
[dir="ltr"] .cp-info-card { text-align: center; }
[dir="ltr"] .cp-form-card,
[dir="ltr"] .cp-sidebar-card { text-align: left; }
[dir="ltr"] .cp-link-arrow { transform: scaleX(-1); }
[dir="ltr"] .cp-link-item:hover .cp-link-arrow { transform: scaleX(-1) translateX(4px); }
[dir="ltr"] .breadcrumb .icon { transform: scaleX(-1); }

/* Wizard progress bar corners */
[dir="ltr"] .wizard-progress-fill { border-radius: 5px 0 0 5px; }

/* Stat card plus sign */
[dir="ltr"] .stat-card .stat-plus { margin-right: 0; margin-left: 2px; }

/* Lightbox close button */
[dir="ltr"] .lightbox-close { left: auto; right: 20px; }

/* Stat card decorative circle */
[dir="ltr"] .stat-card::after { right: auto; left: -40px; }

/* Feature card flag position flip for LTR */
[dir="ltr"] .feature-icon .uk-flag--sm { right: auto; left: -4px; }

/* Login input icon */
[dir="ltr"] .login-input-wrap .icon { right: auto; left: 16px; }

/* Login page input padding flip */
[dir="ltr"] .login-input { padding: 14px 16px 14px 48px; }

/* ═══════════════════════════════════════════
   ACADEMIC CALENDAR — Timeline
   ═══════════════════════════════════════════ */
.cal-timeline { max-width: 800px; margin: 0 auto; }

.cal-month-group { margin-bottom: 40px; }
.cal-month-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px; padding-bottom: 8px;
    border-bottom: 2px solid var(--gold);
}
.cal-month-name {
    font-size: 1.3rem; font-weight: 800;
    color: var(--navy); background: var(--gold-light);
    padding: 6px 18px; border-radius: 24px;
}
.cal-event-item {
    display: flex; gap: 0; align-items: stretch;
    margin-bottom: 16px; position: relative;
}
.cal-event-date {
    flex: 0 0 70px; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding-top: 14px;
}
.cal-day {
    font-size: 1.6rem; font-weight: 800; line-height: 1;
    color: var(--cat-color, var(--navy));
}
.cal-month-short { font-size: .72rem; color: var(--muted); margin-top: 2px; }

.cal-event-line {
    flex: 0 0 24px; display: flex; flex-direction: column;
    align-items: center; position: relative;
}
.cal-event-line::before {
    content: ''; position: absolute; top: 0; bottom: -16px; width: 2px;
    background: var(--border); right: 50%; transform: translateX(50%);
}
.cal-month-group:last-child .cal-event-item:last-child .cal-event-line::before { bottom: 50%; }
.cal-event-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--cat-color, var(--blue3));
    border: 2px solid #fff; box-shadow: 0 0 0 2px var(--cat-color, var(--blue3));
    position: relative; z-index: 1; margin-top: 18px;
}

.cal-event-content {
    flex: 1; background: #fff; border-radius: 12px;
    padding: 16px 20px; margin-right: 12px;
    border: 1px solid var(--border);
    border-right: 4px solid var(--cat-color, var(--blue3));
    transition: box-shadow .2s, transform .2s;
}
.cal-event-content:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.cal-event-cat {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .78rem; font-weight: 600;
    color: var(--cat-color, var(--muted));
    margin-bottom: 6px;
}
.cal-event-title { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.cal-event-desc { font-size: .88rem; color: var(--muted); line-height: 1.6; margin-bottom: 6px; }
.cal-event-range {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .8rem; color: var(--muted);
    background: var(--bg-light, #f8f9fa); padding: 4px 10px; border-radius: 6px;
}

/* Calendar responsive */
@media (max-width: 768px) {
    .cal-event-date { flex: 0 0 50px; }
    .cal-day { font-size: 1.3rem; }
    .cal-event-content { padding: 12px 14px; margin-right: 8px; }
    .cal-month-name { font-size: 1.1rem; padding: 4px 14px; }
}
@media (max-width: 480px) {
    .cal-event-date { display: none; }
    .cal-event-line { display: none; }
    .cal-event-content { margin-right: 0; border-right-width: 4px; }
    .cal-event-content::before {
        content: attr(data-day); display: inline-block;
        font-weight: 800; font-size: .85rem; color: var(--cat-color, var(--navy));
        margin-bottom: 4px;
    }
}

/* LTR overrides */
[dir="ltr"] .cal-event-content { margin-right: 0; margin-left: 12px; border-right: 1px solid var(--border); border-left: 4px solid var(--cat-color, var(--blue3)); }
[dir="ltr"] .cal-event-line::before { right: auto; left: 50%; transform: translateX(-50%); }
@media (max-width: 480px) {
    [dir="ltr"] .cal-event-content { margin-left: 0; border-left-width: 4px; }
}

/* Footer LTR */
[dir="ltr"] .footer-col-title::after { right: auto; left: 0; }
[dir="ltr"] .footer-link-list a:hover { transform: translateX(4px); }
@media (max-width: 768px) {
    [dir="ltr"] .footer-col-title::after { left: 50%; transform: translateX(-50%); }
}

/* Bottom Nav & Swipe indicator — centered, works in both directions */

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM MOBILE EXPERIENCE — Comprehensive Responsive Upgrade v3
   Full coverage: Contact, Stats, Calendar, Forms, Cards, Touch, Spacing
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Image Loading Shimmer Placeholder ── */
.img-loading {
    background: linear-gradient(90deg, var(--blue-light) 25%, #e8eef8 50%, var(--blue-light) 75%);
    background-size: 300% 100%;
    animation: imgShimmer 1.5s ease-in-out infinite;
}
@keyframes imgShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── Smooth Image Reveal ── */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity .4s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"][complete] {
    opacity: 1;
}

/* ── Touch Ripple ── */
.touch-ripple {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.touch-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
        rgba(22,61,136,.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.touch-ripple:active::after {
    opacity: 1;
}

/* ── 768px — Tablets & Large Phones ── */
@media (max-width: 768px) {
    /* — Contact Info Cards — */
    .cp-info-card { padding: 24px 16px 22px; }
    .cp-info-ring { width: 52px; height: 52px; }
    .cp-info-ring .icon { font-size: 24px; }
    .cp-info-ring::before { inset: -3px; }
    .cp-info-card h4 { font-size: .88rem; }
    .cp-info-card > p { font-size: .82rem; }
    .cp-card-arrow { width: 24px; height: 24px; top: 10px; left: 10px; }
    .cp-card-arrow .icon { font-size: 14px; }

    /* — Contact Form Card — */
    .cp-form-card { padding: 28px 22px; }
    .cp-form-header { gap: 12px; margin-bottom: 24px; padding-bottom: 18px; }
    .cp-form-header-icon { width: 44px; height: 44px; border-radius: 12px; }
    .cp-form-header-icon .icon { font-size: 24px; }
    .cp-form-header h3 { font-size: 1.15rem; }
    .cp-form-header p { font-size: .84rem; }

    /* — Contact Sidebar Cards — */
    .cp-sidebar-card { padding: 22px 18px; }
    .cp-sidebar-card h4 { font-size: .95rem; }

    /* — Contact CTA — */
    .cp-cta-icon-wrap { width: 60px; height: 60px; margin-bottom: 16px; }
    .cp-cta-icon-wrap .icon { font-size: 30px; }
    .cp-cta h3 { font-size: 1.25rem; }
    .cp-cta p { font-size: .92rem; }

    /* — Contact FAQ — */
    .cp-faq-q { padding: 16px 18px; gap: 12px; }
    .cp-faq-num { min-width: 28px; height: 28px; font-size: .7rem; }
    .cp-faq-a p { font-size: .88rem; padding-right: 40px; }
    [dir="ltr"] .cp-faq-a p { padding-right: 0; padding-left: 40px; }

    /* — Stats — */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .stat-card { padding: 24px 16px; }
    .stat-icon-wrap { width: 60px; height: 60px; margin-bottom: 12px; }
    .stat-icon-wrap .icon { font-size: 26px; }
    .stat-card .stat-label { font-size: .82rem; }

    /* — Registration Wizard — */
    .wizard-stepper { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .wizard-body { padding: 24px 20px; }

    /* — About Mini Stats — */
    .about-mini-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .mini-stat { min-height: 150px; padding: 22px 16px 18px; }
    .mini-stat-icon { width: 42px; height: 42px; border-radius: 12px; }
    .mini-stat-value { font-size: 1.3rem; }
    .mini-stat-label { font-size: .78rem; }

    /* — Gallery Album Cards — */
    .album-card .album-info { padding: 16px 14px; }
    .album-card h3 { font-size: 1rem; }
    .album-icon-badge { width: 44px; height: 44px; }
    .album-icon-badge .icon { font-size: 22px; }

    /* — News/Event Cards — */
    .card-body { padding: 18px 16px; }
    .card-body h3 { font-size: 1rem; }
    .card-body p { font-size: .86rem; }
    .card-date { font-size: .78rem; }

    /* — Feature Cards — */
    .feature-card { min-width: 260px; padding: 28px 22px; }
    .feature-icon { width: 60px; height: 60px; margin-bottom: 14px; }
    .feature-icon .icon { font-size: 28px; }
    .feature-card h3 { font-size: 1.02rem; }
    .feature-card p { font-size: .85rem; }

    /* — Vision/Mission — */
    .vm-card { padding: 28px 22px; }
    .vm-icon { width: 56px; height: 56px; }
    .vm-icon .icon { font-size: 26px; }
    .vm-card h3 { font-size: 1.2rem; }
    .vm-card p { font-size: .92rem; }

    /* — Values Feature Cards — */
    .values-grid .feature-card { padding: 24px 18px; }

    /* — Calendar — */
    .cal-month-name { font-size: 1.05rem; padding: 4px 12px; }
    .cal-filter-bar { gap: 6px; flex-wrap: wrap; padding: 0 4px; }
    .cal-filter-btn { padding: 6px 14px; font-size: .8rem; }
    .cal-event-content { padding: 14px 16px; }
    .cal-event-title { font-size: .95rem; }
    .cal-event-desc { font-size: .84rem; }

    /* — Complaints — */
    .cmp-commit-list { padding: 14px 18px; }
    .cmp-commit-item { gap: 10px; }
    .cmp-commit-icon { width: 32px; height: 32px; border-radius: 8px; }
    .cmp-commit-icon .icon { font-size: 16px; }

    /* — Terms — */
    .terms-layout { grid-template-columns: 1fr; }
    .terms-sidebar { display: none; }
    .terms-content { padding: 0; }

    /* — Pagination — */
    .pagination { gap: 4px; }
    .page-link { min-width: 38px; height: 38px; font-size: .85rem; }

    /* — Global touch-optimized spacing — */
    .btn { min-height: 44px; }
    .form-control { min-height: 46px; font-size: 16px; }
    select.form-control { font-size: 16px; }
    textarea.form-control { min-height: 100px; font-size: 16px; }
    .form-group label { font-size: .88rem; margin-bottom: 6px; }
    .form-group { margin-bottom: 16px; }

    /* — Cards hover → active press style — */
    .card:active, .cp-info-card:active, .album-card:active {
        transform: scale(0.98);
        transition: transform .15s ease;
    }

    /* — Breadcrumb mobile wrap — */
    .breadcrumb { flex-wrap: wrap; gap: 4px; }
    .breadcrumb .icon { font-size: 14px; }
}

/* ── 480px — Standard Phones ── */
@media (max-width: 480px) {
    /* — Contact Info Cards — */
    .cp-info-card { padding: 20px 14px 18px; border-radius: var(--radius); }
    .cp-info-ring { width: 44px; height: 44px; }
    .cp-info-ring .icon { font-size: 20px; }
    .cp-info-ring::before { display: none; }
    .cp-info-card h4 { font-size: .84rem; }
    .cp-info-card > p { font-size: .78rem; }
    .cp-card-arrow { display: none; }

    /* — Contact Form — */
    .cp-form-card { padding: 20px 16px; }
    .cp-form-header { gap: 10px; margin-bottom: 20px; padding-bottom: 14px; }
    .cp-form-header-icon { width: 40px; height: 40px; border-radius: 10px; }
    .cp-form-header-icon .icon { font-size: 22px; }
    .cp-form-header h3 { font-size: 1.05rem; }
    .cp-form-header p { font-size: .8rem; }
    .cp-label { font-size: .84rem; }
    .cp-input { padding: 12px 14px; font-size: 16px; border-radius: 10px; }
    .cp-input-icon { right: 12px; }
    [dir="ltr"] .cp-input-icon { right: auto; left: 12px; }
    .cp-textarea { font-size: 16px; }

    /* — Contact Sidebar — */
    .cp-sidebar-card { padding: 18px 14px; border-radius: var(--radius); }
    .cp-sidebar-card h4 { font-size: .9rem; }

    /* — Contact CTA — */
    .cp-cta { padding: 32px 18px; border-radius: var(--radius); }
    .cp-cta-icon-wrap { width: 52px; height: 52px; margin-bottom: 14px; }
    .cp-cta-icon-wrap .icon { font-size: 26px; }
    .cp-cta h3 { font-size: 1.15rem; }
    .cp-cta p { font-size: .88rem; margin-bottom: 22px; }

    /* — Contact FAQ — */
    .cp-faq-q { padding: 12px 14px; gap: 10px; font-size: .9rem; }
    .cp-faq-num { min-width: 26px; height: 26px; font-size: .65rem; border-radius: 6px; }
    .cp-faq-a { padding: 0 14px; }
    .cp-faq-item.open .cp-faq-a { padding: 0 14px 16px; }
    .cp-faq-a p { font-size: .84rem; padding-right: 36px; }
    [dir="ltr"] .cp-faq-a p { padding-right: 0; padding-left: 36px; }

    /* — Stats — */
    .stat-card { padding: 20px 16px; border-radius: var(--radius); }
    .stat-icon-wrap { width: 52px; height: 52px; margin-bottom: 10px; }
    .stat-icon-wrap .icon { font-size: 22px; }
    .stat-card .stat-label { font-size: .78rem; }

    /* — About Mini Stats — */
    .about-mini-stats { gap: 8px; }
    .mini-stat { min-height: 140px; padding: 16px 10px 14px; }
    .mini-stat-icon { width: 38px; height: 38px; border-radius: 10px; }
    .mini-stat-icon .icon { font-size: 20px; }
    .mini-stat-value { font-size: 1.15rem; }
    .mini-stat-label { font-size: .72rem; }

    /* — Registration Wizard — */
    .wizard-body { padding: 18px 14px; }
    .wizard-footer { padding: 14px 16px; }
    .wizard-footer .btn { font-size: .85rem; padding: 10px 18px; }

    /* — Gallery — */
    .album-card .album-info { padding: 14px 12px; }
    .album-card h3 { font-size: .92rem; }
    .album-icon-badge { width: 40px; height: 40px; }
    .album-icon-badge .icon { font-size: 20px; }
    .album-count { font-size: .78rem; }

    /* — News/Event Cards — */
    .card-body { padding: 14px 12px; }
    .card-body h3 { font-size: .92rem; }
    .card-body p { font-size: .82rem; line-height: 1.6; }

    /* — Feature Cards — */
    .feature-card { min-width: 240px; padding: 22px 18px; }
    .feature-icon { width: 52px; height: 52px; margin-bottom: 12px; }
    .feature-icon .icon { font-size: 24px; }
    .feature-card h3 { font-size: .95rem; }

    /* — Vision/Mission — */
    .vm-card { padding: 22px 18px; }
    .vm-icon { width: 48px; height: 48px; }
    .vm-icon .icon { font-size: 22px; }
    .vm-card h3 { font-size: 1.1rem; }
    .vm-card p { font-size: .88rem; }

    /* — Calendar — */
    .cal-filter-bar { gap: 4px; }
    .cal-filter-btn { padding: 5px 10px; font-size: .75rem; min-height: 36px; }
    .cal-event-content { padding: 12px 14px; }
    .cal-event-title { font-size: .9rem; }
    .cal-event-desc { font-size: .8rem; }
    .cal-event-range { font-size: .75rem; padding: 3px 8px; }

    /* — Complaints — */
    .cmp-success-enhanced { padding: 24px 18px; }
    .cmp-success-check { width: 48px; height: 48px; }
    .cmp-success-check .icon { font-size: 24px; }
    .cmp-success-ref { padding: 10px 14px; }
    .cmp-ref-number { font-size: 1rem; }
    .cmp-track-form { flex-direction: column; }
    .cmp-track-btn { width: 100%; justify-content: center; }
    .cmp-track-result { padding: 14px; }
    .cmp-track-row { font-size: .82rem; }
    .cmp-timeline-step span:last-child { font-size: .58rem; }

    /* — Team Card Avatars — */
    .team-card-cover { height: 70px; }
    .team-card-avatar { width: 80px; height: 80px; margin-top: -40px; }
    .team-card-placeholder .icon { font-size: 32px; }
    .team-card h4 { font-size: .95rem; }
    .team-card .role { font-size: .82rem; }
    .team-card p { font-size: .8rem; }
    .mini-stat-address { gap: 6px; font-size: .72rem; }
    .mini-stat-address span { padding: 3px 8px; }

    /* — Form Controls — */
    .form-control { padding: 12px 14px; }
    .form-group label { font-size: .84rem; }

    /* — Buttons — */
    .btn { padding: 10px 20px; font-size: .9rem; }
    .hero-btns .btn .icon { font-size: 18px; }

    /* — Breadcrumb — */
    .breadcrumb { font-size: .78rem; }

    /* — Scroll snap for horizontal grids on mobile — */
    .grid-4, .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ── 360px — Ultra-Small Phones ── */
@media (max-width: 360px) {
    /* — Contact — */
    .cp-info-card { padding: 16px 12px 14px; }
    .cp-info-ring { width: 38px; height: 38px; }
    .cp-info-ring .icon { font-size: 18px; }
    .cp-info-card h4 { font-size: .8rem; }
    .cp-info-card > p { font-size: .75rem; }
    .cp-form-card { padding: 16px 12px; }
    .cp-form-header h3 { font-size: .98rem; }
    .cp-form-header p { font-size: .76rem; }
    .cp-form-header-icon { width: 36px; height: 36px; }
    .cp-form-header-icon .icon { font-size: 20px; }
    .cp-label { font-size: .8rem; }
    .cp-sidebar-card { padding: 14px 12px; }

    /* — Stats — */
    .stat-card { padding: 16px 12px; }
    .stat-icon-wrap { width: 44px; height: 44px; margin-bottom: 8px; }
    .stat-icon-wrap .icon { font-size: 20px; }

    /* — Cards — */
    .card-body { padding: 12px 10px; }
    .card-body h3 { font-size: .88rem; }
    .card-body p { font-size: .78rem; }
    .album-card .album-info { padding: 12px 10px; }
    .album-card h3 { font-size: .88rem; }

    /* — Calendar — */
    .cal-event-content { padding: 10px 12px; }
    .cal-event-title { font-size: .86rem; }
    .cal-event-desc { font-size: .76rem; }
    .cal-filter-btn { padding: 4px 8px; font-size: .72rem; }

    /* — Team Cards — */
    .team-card-cover { height: 60px; }
    .team-card-avatar { width: 64px; height: 64px; margin-top: -32px; }
    .team-card-placeholder .icon { font-size: 26px; }
    .team-card-body { padding: 8px 14px 4px; }
    .team-card h4 { font-size: .9rem; }
    .team-card .role { font-size: .78rem; }

    /* — Complaints — */
    .cmp-type-tab { padding: 10px 12px; font-size: .82rem; }
    .cmp-type-tab-icon { width: 30px; height: 30px; border-radius: 8px; }
    .cmp-type-tab-icon .icon { font-size: 18px; }
    .cmp-commit-list { padding: 10px 14px; }
    .cmp-commit-icon { width: 28px; height: 28px; }
    .cmp-commit-icon .icon { font-size: 14px; }

    /* — Vision/Mission — */
    .vm-card { padding: 18px 14px; }
    .vm-icon { width: 42px; height: 42px; }
    .vm-icon .icon { font-size: 20px; }
    .vm-card h3 { font-size: 1rem; }
    .vm-card p { font-size: .84rem; }

    /* — Feature Cards — */
    .feature-card { min-width: 220px; padding: 18px 14px; }
    .feature-icon { width: 44px; height: 44px; }
    .feature-icon .icon { font-size: 20px; }
    .feature-card h3 { font-size: .9rem; }
    .feature-card p { font-size: .78rem; }

    /* — About Mini Stats — */
    .mini-stat { min-height: 130px; padding: 14px 8px 12px; }
    .mini-stat-icon { width: 34px; height: 34px; border-radius: 10px; }
    .mini-stat-icon .icon { font-size: 18px; }
    .mini-stat-value { font-size: 1rem; }
    .mini-stat-label { font-size: .68rem; }

    /* — Pagination — */
    .pagination { gap: 2px; }
    .page-link { min-width: 34px; height: 34px; font-size: .8rem; }

    /* — Breadcrumb — */
    .breadcrumb { font-size: .72rem; padding: 5px 12px; }
}

/* ── Touch Device Optimizations ── */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover animations on touch — use active states instead */
    .cp-info-card:hover { transform: none; box-shadow: var(--shadow-sm); }
    .cp-info-card:hover::before { transform: scaleX(0); }
    .cp-info-card:active { transform: scale(0.97); }
    .cp-info-card:active::before { transform: scaleX(1); }

    .team-card:hover { transform: none; box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
    .team-card:active { transform: scale(0.97); }
    .team-card:hover .team-card-avatar { transform: none; }
    .team-card:hover .team-card-link { opacity: 1; transform: translateY(0); }

    .album-card:hover { transform: none; }
    .album-card:active { transform: scale(0.98); }

    .vm-card:hover { transform: none; }
    .vm-card:active { transform: scale(0.98); }

    /* Larger touch targets for interactive elements */
    .cp-faq-q { min-height: 52px; }
    .cal-filter-btn { min-height: 40px; }
    .pagination .page-link { min-width: 44px; min-height: 44px; }
    .cmp-type-tab { min-height: 52px; }
    .footer-link-list a { min-height: 44px; }
}

/* ── Landscape Phone ── */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-slide-content { padding: 60px 20px 80px; min-height: auto; }
    .hero-slide-content h1 { font-size: 1.4rem; }
    .hero-slide-content p { font-size: .85rem; }
    .hero-trust-bar { bottom: 48px; }
    .hero-slider-dots { bottom: 28px; }
    .page-hero { padding: 90px 0 50px; }
    .page-hero h1 { font-size: 1.3rem; }
    .section { padding: 28px 0; }
    .cp-form-card { padding: 20px; }
    .modal { max-height: 90vh; overflow-y: auto; }
    .site-popup-content { max-height: 85vh; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .img-loading { animation: none; }
    .touch-ripple::after { transition: none; }
    img[loading="lazy"] { transition: none; opacity: 1; }
}

/* ── Print ── */
@media print {
    .mobile-bottom-nav,
    .mobile-float-cta,
    .back-to-top,
    .mobile-toggle,
    .mobile-menu { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ULTRA PREMIUM MOBILE — Luxury App-like Experience v4
   Glass morphism menu, refined cards, premium interactions,
   smooth page flow, professional typography, immersive hero
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. LUXURY MOBILE MENU UPGRADE ── */
@media (max-width: 1100px) {
    .mobile-menu-content {
        width: 340px;
        max-width: 88vw;
        background: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%);
        box-shadow: -20px 0 60px rgba(22,61,136,.15), -4px 0 20px rgba(22,61,136,.08);
    }
    [dir="ltr"] .mobile-menu-content {
        box-shadow: 20px 0 60px rgba(22,61,136,.15), 4px 0 20px rgba(22,61,136,.08);
    }

    /* Premium header with gradient bar */
    .mobile-menu-header {
        padding: 20px 24px;
        background: linear-gradient(135deg, var(--blue) 0%, var(--blue2) 60%, var(--blue3) 100%);
        border-bottom: none;
        position: relative;
        overflow: hidden;
    }
    .mobile-menu-header::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.12) 0%, transparent 60%);
    }
    .mobile-menu-header .navbar-brand .brand-text {
        color: #fff;
        font-size: 1rem;
        text-shadow: 0 1px 3px rgba(0,0,0,.15);
    }
    .mobile-menu-header .navbar-brand .brand-logo {
        border-radius: 10px;
        box-shadow: 0 2px 12px rgba(0,0,0,.2);
    }
    .mobile-menu-close {
        background: rgba(255,255,255,.15);
        border-color: rgba(255,255,255,.2);
        color: #fff;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .mobile-menu-close:hover,
    .mobile-menu-close:active {
        background: rgba(255,255,255,.3);
        color: #fff;
        border-color: rgba(255,255,255,.4);
    }

    /* Registration CTA — handled by .mobile-menu-cta class in base styles */

    /* Enhanced active state */
    .mobile-menu-links a.active {
        background: linear-gradient(135deg, var(--blue-light) 0%, rgba(79,140,247,.06) 100%);
        border-right: 3px solid var(--blue2);
        box-shadow: inset 0 0 0 0.5px rgba(79,140,247,.1);
    }
    [dir="ltr"] .mobile-menu-links a.active {
        border-right: none;
        border-left: 3px solid var(--blue2);
    }

    /* Refined link padding */
    .mobile-menu-links {
        padding: 12px 16px;
        gap: 1px;
    }
    .mobile-menu-links a {
        padding: 14px 16px;
        border-radius: 12px;
        font-size: .93rem;
        min-height: 48px;
        color: var(--text);
    }
    .mobile-menu-links a .icon {
        color: var(--muted);
    }
    .mobile-menu-links a:hover,
    .mobile-menu-links a.active {
        color: var(--blue);
        background: var(--blue-light);
    }
    .mobile-menu-links a:hover .icon,
    .mobile-menu-links a.active .icon {
        color: var(--blue2);
        font-variation-settings: 'FILL' 1;
    }

    /* Divider */
    .mobile-menu-divider {
        background: var(--border);
    }

    /* CTA card on light bg */
    .mobile-menu-cta small {
        color: var(--muted) !important;
    }
    .mobile-menu-section-label {
        color: var(--blue2);
    }

    /* Premium footer */
    .mobile-menu-footer {
        padding: 14px 20px;
        background: linear-gradient(135deg, var(--bg) 0%, #eef2f9 100%);
        border-top: 1px solid rgba(226,232,240,.5);
    }
    .mobile-lang-toggle {
        background: var(--blue-light);
        border-color: var(--border);
        color: var(--blue);
    }
    .mobile-lang-toggle:hover {
        background: var(--blue);
        color: #fff;
        border-color: var(--blue);
    }

    /* Smoother accent line */
    .mobile-menu-content::after {
        width: 2px;
        background: linear-gradient(180deg,
            var(--gold) 0%,
            var(--blue3) 30%,
            var(--gold) 50%,
            var(--blue3) 70%,
            var(--gold) 100%
        );
        background-size: 100% 300%;
        animation: menuAccentShimmer 4s ease-in-out infinite;
    }
}

/* ── 2. PREMIUM MOBILE HERO — Immersive ── */
@media (max-width: 768px) {
    /* Deeper, richer overlay for hero */
    .hero-slide-overlay {
        background: linear-gradient(
            170deg,
            rgba(8,25,66,.94) 0%,
            rgba(15,45,110,.85) 25%,
            rgba(22,61,136,.72) 50%,
            rgba(47,99,199,.6) 75%,
            rgba(79,140,247,.45) 100%
        );
    }

    /* Premium hero content layout */
    .hero-slide-content {
        padding: 100px 20px 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .hero-slide-content h1 {
        text-shadow: 0 2px 16px rgba(0,0,0,.3), 0 0 40px rgba(79,140,247,.15);
        letter-spacing: -0.02em;
    }
    .hero-slide-content p {
        text-shadow: 0 1px 6px rgba(0,0,0,.2);
        max-width: 90%;
        line-height: 1.85;
    }

    /* Hero buttons — full width premium */
    .hero-btns {
        width: 100%;
        max-width: 320px;
        gap: 12px;
    }
    .hero-btns .btn {
        border-radius: 14px;
        font-weight: 700;
        letter-spacing: 0.01em;
        box-shadow: 0 4px 16px rgba(0,0,0,.15);
    }

    /* Trust badges — glass morphism */
    .trust-badge {
        background: rgba(255,255,255,.1);
        backdrop-filter: blur(16px) saturate(1.5);
        -webkit-backdrop-filter: blur(16px) saturate(1.5);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 100px;
        padding: 8px 16px;
        font-weight: 600;
    }

    /* Dots — refined style */
    .hero-slider-dots .hero-dot {
        transition: all .4s cubic-bezier(.4,0,.2,1);
    }
    .hero-slider-dots .hero-dot.active {
        width: 24px;
        border-radius: 6px;
    }

    /* Page Hero — enhanced depth */
    .page-hero {
        padding: 120px 0 70px;
    }
    .page-hero h1 {
        letter-spacing: -0.02em;
        text-shadow: 0 2px 12px rgba(22,61,136,.15);
    }
    .page-hero-icon {
        box-shadow: 0 8px 32px rgba(22,61,136,.18), 0 0 0 4px rgba(255,255,255,.1);
    }
    .page-hero-sub {
        max-width: 90%;
        margin: 0 auto;
        line-height: 1.8;
    }
}

@media (max-width: 480px) {
    .hero-slide-content {
        padding: 90px 16px 130px;
    }
    .hero-btns {
        max-width: 280px;
    }
    .page-hero {
        padding: 110px 0 65px;
    }
}

/* ── 3. PREMIUM MOBILE CARDS — Luxury Feel ── */
@media (max-width: 768px) {
    /* Cards — subtle shadow + border */
    .card,
    .news-card,
    .event-card {
        border: 1px solid rgba(226,232,240,.6);
        box-shadow: 0 2px 8px rgba(22,61,136,.04), 0 8px 24px rgba(22,61,136,.03);
        border-radius: var(--radius);
        overflow: hidden;
        transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
    }
    .card:active,
    .news-card:active,
    .event-card:active {
        border-color: rgba(79,140,247,.2);
        box-shadow: 0 2px 12px rgba(22,61,136,.08) !important;
    }

    /* Card images — smooth loading */
    .card-img {
        position: relative;
        overflow: hidden;
    }
    .card-img img {
        transition: transform .4s ease, opacity .4s ease;
    }

    /* Card body — refined spacing */
    .card-body h3 {
        line-height: 1.45;
        margin-bottom: 8px;
    }
    .card-body p {
        line-height: 1.75;
        color: var(--muted);
    }

    /* Album cards — premium overlay */
    .album-card {
        border: 1px solid rgba(226,232,240,.6);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(22,61,136,.05);
    }

    /* Stat cards — glass morphism on mobile */
    .stat-card {
        background: linear-gradient(135deg, var(--white) 0%, rgba(250,251,254,.95) 100%);
        border: 1px solid rgba(226,232,240,.6);
        box-shadow: 0 2px 16px rgba(22,61,136,.06);
    }

    /* Feature cards (marquee) — premium feel */
    .feature-card {
        border: 1px solid rgba(226,232,240,.5);
        background: linear-gradient(135deg, var(--white) 0%, #fafbfe 100%);
        box-shadow: 0 4px 16px rgba(22,61,136,.05);
    }
}

/* ── 4. PREMIUM MOBILE SECTIONS — Refined Spacing ── */
@media (max-width: 768px) {
    /* Section headers — centered, elegant */
    .section-title {
        margin-bottom: 32px;
    }
    .section-title h2 {
        line-height: 1.35;
        letter-spacing: -0.01em;
    }
    .section-title p {
        line-height: 1.75;
        padding: 0 16px;
    }
    .section-title .line {
        width: 50px;
        height: 3px;
        margin-top: 14px;
    }

    /* CTA Banner — immersive mobile */
    .cta-banner {
        text-align: center;
    }
    .cta-banner h2 {
        line-height: 1.4;
        letter-spacing: -0.01em;
    }
    .cta-banner p {
        line-height: 1.75;
        max-width: 90%;
        margin: 0 auto 24px;
    }
    .cta-banner .hero-btns .btn {
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(0,0,0,.12);
    }

    /* Vision/Mission cards — premium borders */
    .vm-card {
        border: 1px solid rgba(226,232,240,.6);
        box-shadow: 0 4px 20px rgba(22,61,136,.05);
    }

    /* Modal — premium mobile feel */
    .modal {
        border: 1px solid rgba(226,232,240,.5);
        box-shadow: 0 20px 60px rgba(22,61,136,.15);
    }
}

/* ── 5. PREMIUM MOBILE BOTTOM NAV — Refined ── */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        background: rgba(255,255,255,.95);
        backdrop-filter: blur(28px) saturate(2.2);
        -webkit-backdrop-filter: blur(28px) saturate(2.2);
        border-top: 1px solid rgba(226,232,240,.3);
        box-shadow: 0 -4px 24px rgba(22,61,136,.06);
        padding: 6px 0 calc(6px + var(--safe-bottom));
    }

    .bottom-nav-item {
        border-radius: 12px;
        gap: 2px;
        font-size: .64rem;
        color: var(--muted);
    }
    .bottom-nav-item .icon {
        font-size: 23px;
        color: var(--muted);
    }

    /* Active indicator — premium glow */
    .bottom-nav-item.active {
        color: var(--blue);
    }
    .bottom-nav-item.active .icon {
        color: var(--blue2);
    }
    .bottom-nav-item.active::before {
        width: 24px;
        height: 2.5px;
        border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg, var(--blue2), var(--blue3));
        box-shadow: 0 2px 10px rgba(47,99,199,.3);
    }
    .bottom-nav-item.active::after {
        border-radius: 10px;
        background: linear-gradient(135deg, var(--blue-light), rgba(79,140,247,.06));
        opacity: .6;
    }

    /* CTA button — premium gold */
    .bottom-nav-cta {
        border-radius: 14px;
        padding: 8px 14px;
        box-shadow: 0 4px 16px rgba(247,181,0,.3), inset 0 1px 0 rgba(255,255,255,.2);
        transform: translateY(-3px);
    }
    .bottom-nav-cta .icon {
        font-size: 20px;
    }
}

/* ── 6. PREMIUM MOBILE TYPOGRAPHY ── */
@media (max-width: 768px) {
    /* Better reading experience */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* Headings — tighter on mobile */
    h1, h2, h3, h4, h5, h6 {
        letter-spacing: -0.02em;
        line-height: 1.35;
    }

    /* Body text — better readability */
    p, li {
        line-height: 1.8;
    }

    /* Links — larger touch targets */
    .card-body a,
    .terms-section-body a {
        text-decoration-thickness: 1.5px;
        text-underline-offset: 3px;
    }
}

/* ── 7. PREMIUM POLICIES/TERMS PAGE MOBILE ── */
@media (max-width: 768px) {
    /* Better section cards on mobile */
    .terms-section {
        border-radius: var(--radius);
        border: 1px solid rgba(226,232,240,.6);
        box-shadow: 0 2px 12px rgba(22,61,136,.04);
        overflow: hidden;
    }

    /* Section header — compact and elegant */
    .terms-section-header {
        padding: 18px 20px;
        gap: 14px;
    }
    .terms-section-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        flex-shrink: 0;
    }
    .terms-section-icon .icon {
        font-size: 22px;
    }
    .terms-section-num {
        font-size: .72rem;
    }
    .terms-section-header h2 {
        font-size: 1.05rem;
        line-height: 1.4;
    }

    /* Section body — better reading */
    .terms-section-body {
        padding: 20px;
    }
    .terms-section-body p {
        font-size: .9rem;
        line-height: 1.85;
        margin-bottom: 16px;
    }
    .terms-section-body h4 {
        font-size: .95rem;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    /* Ordered lists — refined */
    .terms-ordered li,
    .terms-bullet li {
        font-size: .88rem;
        line-height: 1.8;
        padding: 6px 0;
    }

    /* Table — responsive with scroll hint */
    .terms-table-wrap {
        position: relative;
        border-radius: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--border);
    }
    .terms-table {
        min-width: 0;
        width: 100%;
    }
    .terms-table-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(90deg, rgba(22,61,136,.06), transparent);
        pointer-events: none;
        opacity: 0;
        transition: opacity .3s;
    }
    [dir="ltr"] .terms-table-wrap::after {
        left: auto;
        right: 0;
        background: linear-gradient(270deg, rgba(22,61,136,.06), transparent);
    }
    .terms-table th,
    .terms-table td {
        font-size: .82rem;
        padding: 10px 12px;
    }
    .terms-table th {
        white-space: normal;
        word-break: keep-all;
    }

    /* Note box — compact */
    .terms-note-box {
        border-radius: 12px;
        padding: 16px;
        font-size: .88rem;
    }

    /* Bullying cards on mobile */
    .terms-bullying-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .terms-bullying-card {
        padding: 14px 12px;
        border-radius: 10px;
        font-size: .82rem;
    }
    .terms-bullying-card .icon {
        font-size: 24px;
    }
    .terms-bullying-card strong {
        font-size: .8rem;
    }
    .terms-bullying-card span:last-child {
        font-size: .72rem;
    }

    /* Hero meta badges — refined */
    .terms-hero-meta {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .terms-hero-badge {
        font-size: .78rem;
        padding: 8px 14px;
        border-radius: 100px;
    }

    /* Reading progress bar */
    .terms-progress {
        height: 3px;
    }

    /* Mobile quick nav — premium grid */
    .terms-quick-nav {
        border: 1px solid rgba(226,232,240,.6);
        border-radius: var(--radius);
        box-shadow: 0 2px 12px rgba(22,61,136,.04);
        padding: 18px;
    }
    .terms-quick-nav h3 {
        font-size: .95rem;
        margin-bottom: 14px;
    }
    .terms-nav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .terms-nav-item {
        padding: 10px 12px;
        font-size: .78rem;
        border-radius: 10px;
        min-height: 44px;
    }
    .terms-nav-item .icon {
        font-size: 18px;
    }

    /* Final section — premium */
    .terms-final {
        border-radius: var(--radius);
        border: 1px solid rgba(226,232,240,.6);
        box-shadow: 0 4px 20px rgba(22,61,136,.06);
        padding: 32px 20px;
    }
    .terms-final h2 {
        font-size: 1.1rem;
    }
    .terms-final p {
        font-size: .88rem;
        line-height: 1.85;
    }
    .terms-final-cta {
        gap: 10px;
    }
    .terms-final-cta .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        border-radius: 14px;
    }

    /* Back to top — refined */
    .terms-back-top {
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(22,61,136,.1);
    }
}

@media (max-width: 480px) {
    .terms-section-header {
        padding: 16px;
    }
    .terms-section-body {
        padding: 16px;
    }
    .terms-section-body p {
        font-size: .86rem;
    }
    .terms-section-header h2 {
        font-size: .98rem;
    }
    .terms-ordered li,
    .terms-bullet li {
        font-size: .84rem;
    }
    .terms-bullying-grid {
        grid-template-columns: 1fr;
    }
    .terms-nav-grid {
        grid-template-columns: 1fr;
    }
    .terms-nav-item {
        padding: 12px 14px;
    }
    .terms-quick-nav {
        padding: 14px;
    }
    .terms-final {
        padding: 24px 16px;
    }
    .terms-final h2 {
        font-size: 1rem;
    }
    .terms-final-cta .btn {
        max-width: 260px;
    }
    .terms-hero-badge {
        font-size: .74rem;
        padding: 6px 12px;
    }
}

@media (max-width: 360px) {
    .terms-section-header {
        padding: 14px;
        gap: 10px;
    }
    .terms-section-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
    .terms-section-icon .icon {
        font-size: 18px;
    }
    .terms-section-header h2 {
        font-size: .9rem;
    }
    .terms-section-body {
        padding: 14px;
    }
    .terms-section-body p {
        font-size: .82rem;
    }
    .terms-ordered li,
    .terms-bullet li {
        font-size: .8rem;
    }
    .terms-table {
        min-width: 0;
        width: 100%;
    }
    .terms-table th,
    .terms-table td {
        font-size: .76rem;
        padding: 8px;
    }
    .terms-table th {
        white-space: normal;
        word-break: keep-all;
    }
}

/* ── 8. PREMIUM MOBILE FOOTER ── */
@media (max-width: 768px) {
    /* Collapsible footer sections */
    .footer-col {
        border-bottom: 1px solid rgba(255,255,255,.06);
        padding-bottom: 20px;
    }
    .footer-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Footer brand bar — premium layout */
    .footer-brand-bar {
        padding: 28px 0 24px;
    }
    .footer-brand-tagline {
        max-width: 280px;
        margin: 0 auto;
        line-height: 1.75;
    }

    /* Social buttons — refined */
    .footer-social-btn {
        border-radius: 12px;
        transition: all .25s ease;
    }
    .footer-social-btn:active {
        transform: scale(0.88);
    }

    /* Bottom bar — clean */
    .footer-bottom-inner {
        gap: 6px;
        font-size: .78rem;
    }
}

/* ── 9. PREMIUM MOBILE FORMS ── */
@media (max-width: 768px) {
    /* Contact form card — premium */
    .cp-form-card {
        border: 1px solid rgba(226,232,240,.6);
        box-shadow: 0 4px 20px rgba(22,61,136,.05);
    }

    /* Input focus — refined glow */
    .cp-input:focus,
    .cp-textarea:focus {
        border-color: var(--blue3);
        box-shadow: 0 0 0 3px rgba(79,140,247,.1), 0 4px 12px rgba(22,61,136,.06);
    }

    /* Sidebar cards — glass effect */
    .cp-sidebar-card {
        border: 1px solid rgba(226,232,240,.6);
        background: linear-gradient(135deg, var(--white), #fafbfe);
    }

    /* FAQ items — refined */
    .cp-faq-item {
        border-radius: 12px;
        border: 1px solid rgba(226,232,240,.6);
        overflow: hidden;
    }
}

/* ── 10. PREMIUM MOBILE REGISTRATION WIZARD ── */
@media (max-width: 768px) {
    .wizard-card {
        border: 1px solid rgba(226,232,240,.5);
        box-shadow: 0 4px 24px rgba(22,61,136,.06);
        border-radius: var(--radius);
    }
    .wizard-stepper {
        background: linear-gradient(135deg, var(--blue-light), #f0f5ff);
        border-bottom: 1px solid rgba(226,232,240,.5);
    }
    .wz-circle {
        box-shadow: 0 2px 8px rgba(22,61,136,.1);
    }
    .wizard-footer {
        border-top: 1px solid rgba(226,232,240,.5);
        background: linear-gradient(135deg, #fafbfe, var(--white));
    }
    .wizard-footer .btn {
        border-radius: 12px;
        min-height: 46px;
        font-weight: 700;
    }

    /* Visit sidebar cards — premium treatment */
    .wizard-sidebar .wz-info-card {
        border: 1px solid rgba(226,232,240,.6);
        box-shadow: 0 2px 12px rgba(22,61,136,.05);
        border-radius: var(--radius);
    }
    .wz-info-card .wz-info-header {
        background: linear-gradient(135deg, var(--blue-light), #e8eeff);
        border-bottom: 1px solid rgba(226,232,240,.5);
    }
    .wz-contact-card {
        border-radius: var(--radius);
        box-shadow: 0 4px 20px rgba(22,61,136,.12);
    }

    /* Field groups — refined mobile spacing */
    .wz-field-group {
        border-radius: 14px;
        padding: 16px;
        margin-bottom: 16px;
    }
    .wz-field-group-title {
        font-size: .88rem;
        margin-bottom: 12px;
    }
}

/* ── 11. PREMIUM MOBILE ABOUT PAGE ── */
@media (max-width: 768px) {
    .about-text {
        text-align: center;
    }
    .about-text p {
        line-height: 1.85;
        max-width: 90%;
        margin: 0 auto 16px;
    }

    .mini-stat {
        border: 1px solid rgba(226,232,240,.5);
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(22,61,136,.04);
        transition: transform .2s ease;
    }
    .mini-stat:active {
        transform: scale(0.97);
    }
}

/* ── 12. PREMIUM MOBILE EVENTS ── */
@media (max-width: 768px) {
    .event-timeline-item {
        border-radius: var(--radius);
        border: 1px solid rgba(226,232,240,.5);
        box-shadow: 0 2px 12px rgba(22,61,136,.04);
        overflow: hidden;
    }
}

/* ── 13. PREMIUM MOBILE GALLERY ── */
@media (max-width: 768px) {
    .album-card {
        transition: transform .3s ease, box-shadow .3s ease !important;
    }
    .album-card .album-img {
        overflow: hidden;
    }
    .album-card .album-img img {
        transition: transform .5s ease;
    }
    .album-card:active .album-img img {
        transform: scale(1.03);
    }
}

/* ── 14. PREMIUM MOBILE COMPLAINTS ── */
@media (max-width: 768px) {
    .cmp-type-tab {
        border: 1px solid rgba(226,232,240,.5);
        border-radius: 14px;
        box-shadow: 0 2px 8px rgba(22,61,136,.03);
    }
    .cmp-type-tab.active {
        box-shadow: 0 4px 16px rgba(22,61,136,.08);
    }

    .cmp-success-enhanced {
        border: 1px solid rgba(34,197,94,.15);
        border-radius: var(--radius);
        box-shadow: 0 4px 20px rgba(34,197,94,.08);
    }
}

/* ── 15. SMOOTH SCROLL SNAP FOR HORIZONTAL CONTENT (Mobile) ── */
@media (max-width: 768px) {
    /* The marquee already auto-scrolls, but stats grid benefits from horizontal scroll */
    .stats-grid {
        scroll-snap-type: x mandatory;
    }
    .stats-grid > * {
        scroll-snap-align: center;
    }
}

/* ── 16. PREMIUM MOBILE ANIMATIONS & TRANSITIONS ── */
@media (max-width: 768px) {
    /* Refined page entrance */
    .reveal {
        transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1) !important;
    }
    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Smooth focus transitions for all interactive elements */
    a, button, input, select, textarea {
        transition: all .25s cubic-bezier(.4,0,.2,1);
    }

    /* Hero slide transitions — smoother */
    .hero-slide {
        transition: opacity .8s cubic-bezier(.4,0,.2,1);
    }
}

/* ── 17. MOBILE DARK SURFACE REFINEMENTS ── */
@media (max-width: 768px) {
    /* Popup — premium glass */
    .site-popup {
        border: 1px solid rgba(226,232,240,.5);
        box-shadow: 0 20px 60px rgba(22,61,136,.18);
    }
    .site-popup-close {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* ── 18. PREMIUM 404 PAGE MOBILE ── */
@media (max-width: 768px) {
    .page-404 {
        padding: 100px 20px 60px;
        text-align: center;
    }
    .page-404 h1 {
        background: linear-gradient(135deg, var(--blue), var(--blue3));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .page-404 .hero-btns {
        justify-content: center;
    }
    .page-404 .btn {
        border-radius: 14px;
    }
}

/* ── 19. PREMIUM MOBILE BREADCRUMB ── */
@media (max-width: 768px) {
    .breadcrumb {
        background: rgba(255,255,255,.08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 100px;
        padding: 8px 18px;
        font-weight: 600;
    }
}

/* ── 20. PREMIUM MOBILE LIGHTBOX ── */
@media (max-width: 768px) {
    .lightbox-overlay {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    .lightbox-close {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE REFINEMENTS v4 — Deep Audit Fixes
   Addresses: contact cards, search bar, badges, gallery, event badges,
   map, lightbox safe-area, filter bar, sidebar order, news detail
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Homepage Contact Cards — Premium treatment ── */
.contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.contact-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.contact-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-icon .icon { font-size: 24px; color: var(--white); }
.contact-icon.icon-blue { background: linear-gradient(135deg, var(--blue), var(--blue3)); }
.contact-icon.icon-gold { background: linear-gradient(135deg, #d4a017, var(--gold)); }
.contact-icon.icon-green { background: linear-gradient(135deg, #16a34a, var(--green)); }
.contact-card h4 { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.contact-card p { font-size: .88rem; color: var(--muted); margin: 0; }

@media (max-width: 768px) {
    .contact-card {
        border: 1px solid rgba(226,232,240,.6);
        box-shadow: 0 2px 12px rgba(22,61,136,.04);
        border-radius: 16px;
        padding: 20px;
        gap: 14px;
    }
    .contact-icon {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }
    .contact-icon .icon { font-size: 22px; }
}

/* ── Search Bar — Premium mobile glass treatment ── */
@media (max-width: 768px) {
    .search-bar {
        border: 1px solid rgba(226,232,240,.6);
        box-shadow: 0 2px 12px rgba(22,61,136,.05);
        border-radius: 14px;
        padding: 10px 16px;
    }
    .search-bar .form-control {
        font-size: 16px; /* prevent iOS zoom */
    }
    .search-bar .form-control:focus {
        box-shadow: none;
    }
}

/* ── Featured Badge — Glass treatment ── */
@media (max-width: 768px) {
    .album-card .featured-badge {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        background: rgba(255,255,255,.88);
        box-shadow: 0 2px 8px rgba(0,0,0,.12);
        border-radius: 10px;
        padding: 5px 12px;
        font-size: .78rem;
    }
}

/* ── Album Image Max-Height on small phones ── */
@media (max-width: 480px) {
    .album-card .album-img img {
        max-height: 220px;
        object-fit: cover;
    }
}

/* ── Map Iframe — Aspect ratio constraint on mobile ── */
@media (max-width: 768px) {
    .cp-map-card {
        overflow: hidden;
        border-radius: var(--radius);
    }
    .cp-map-card iframe {
        width: 100%;
        min-height: 220px;
        aspect-ratio: 4 / 3;
    }
}

/* ── Visit Sidebar — Form first on mobile ── */
@media (max-width: 768px) {
    .wizard-sidebar {
        order: 1;
    }
}

/* ── Lightbox Close — Safe area for notch/dynamic island ── */
@media (max-width: 768px) {
    .lightbox-close {
        top: calc(10px + env(safe-area-inset-top));
    }
}

/* ── News Detail — Mobile typography refinement ── */
@media (max-width: 768px) {
    .news-detail-content {
        font-size: 0.95rem;
        line-height: 2;
    }
    .news-detail-content p {
        margin-bottom: 18px;
    }
    .news-detail-title {
        font-size: 1.2rem;
        line-height: 1.5;
    }
    .container-sm .card > img,
    .container-sm .card > .card-img-top {
        max-height: 280px;
        object-fit: cover;
    }
}

/* ── Event Date Badge — Scale down on small screens ── */
@media (max-width: 480px) {
    .event-card .event-date-badge {
        transform: scale(0.85);
        transform-origin: top right;
        top: 10px;
        right: 10px;
    }
    .event-card .event-status {
        top: auto;
        bottom: 10px;
        left: 10px;
        font-size: .75rem;
    }
}
[dir="ltr"] .event-card .event-date-badge { transform-origin: top left; }

/* ── Filter Button — Touch active feedback ── */
@media (hover: none) and (pointer: coarse) {
    .filter-btn:active {
        transform: scale(0.95);
        transition-duration: 0.1s;
    }
}

/* ── Calendar Filter Bar — Horizontal scroll on small phones ── */
@media (max-width: 480px) {
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        gap: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .filter-bar::-webkit-scrollbar {
        display: none;
    }
    .filter-btn {
        flex-shrink: 0;
        scroll-snap-align: start;
        font-size: .82rem;
        padding: 7px 14px;
        white-space: nowrap;
    }
}

/* ── Popup Close — Safe area treatment ── */
@media (max-width: 768px) {
    .site-popup-close {
        top: calc(12px + env(safe-area-inset-top));
    }
}

/* ── Stats Grid — Center orphan card ── */
@media (max-width: 768px) {
    .stats-grid {
        justify-items: center;
    }
    .stat-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 320px;
    }
}

/* ── Contact Info Grid — 2x2 on small phones for compact layout ── */
@media (max-width: 480px) {
    .cp-info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .cp-info-card {
        padding: 16px 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   ██████  PREMIUM MOBILE APP EXPERIENCE — v3.0  ██████
   Full app-like mobile transformation
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page Transition Overlay ── */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    background: var(--bg);
    transition: opacity .25s ease;
}
.page-transition.active {
    opacity: 1;
    pointer-events: all;
}
.page-transition-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border: 3px solid var(--blue-light);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: ptSpin .7s linear infinite;
}
@keyframes ptSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── Pull-to-Refresh Indicator ── */
.pull-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    z-index: 9998;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 4px 20px rgba(22,61,136,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.pull-indicator .icon {
    font-size: 22px;
    color: var(--blue);
    transition: transform .3s ease;
}
.pull-indicator.pulling {
    transform: translateX(-50%) translateY(20px);
}
.pull-indicator.pulling .icon {
    animation: pullRotate .6s ease infinite;
}
@keyframes pullRotate {
    0%   { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

/* ── Install PWA Banner ── */
.pwa-install-banner {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 12px);
    left: 16px;
    right: 16px;
    z-index: 9990;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue2) 100%);
    color: var(--white);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 40px rgba(22,61,136,.35);
    transform: translateY(200%);
    transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.pwa-install-banner.show {
    transform: translateY(0);
}
.pwa-install-banner .pwa-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pwa-install-banner .pwa-icon .icon {
    font-size: 24px;
}
.pwa-install-banner .pwa-text {
    flex: 1;
    min-width: 0;
}
.pwa-install-banner .pwa-text strong {
    display: block;
    font-size: .95rem;
    margin-bottom: 2px;
}
.pwa-install-banner .pwa-text small {
    font-size: .78rem;
    opacity: .85;
}
.pwa-install-banner .pwa-btn {
    padding: 8px 18px;
    border-radius: 10px;
    background: var(--gold);
    color: var(--text);
    font-weight: 700;
    font-size: .85rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .2s, background .2s;
}
.pwa-install-banner .pwa-btn:active {
    transform: scale(0.95);
}
.pwa-install-banner .pwa-close {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: none;
    color: var(--white);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
[dir="ltr"] .pwa-install-banner .pwa-close {
    left: auto;
    right: 8px;
}

/* ═══════════════════════════════════════════
   MOBILE ≤ 768px — APP-LIKE OVERHAUL
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── App-Like Body ── */
    body {
        -webkit-user-select: none;
        user-select: text;
        touch-action: pan-y;
    }
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-top, 0px);
        background: var(--blue);
        z-index: 100000;
    }

    /* ── Navbar — Frosted App Bar ── */
    .navbar,
    .navbar-inner {
        border-radius: 0;
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(20px) saturate(1.8);
        -webkit-backdrop-filter: blur(20px) saturate(1.8);
        border-bottom: 1px solid rgba(226,232,240,.6);
        box-shadow: 0 1px 3px rgba(22,61,136,.04);
    }
    .navbar .navbar-brand .brand-text { color: var(--blue); }
    .navbar .mobile-toggle { color: var(--blue); background: var(--blue-light); border-color: transparent; }
    .navbar.scrolled,
    .navbar-inner.scrolled {
        box-shadow: 0 2px 12px rgba(22,61,136,.08);
    }

    /* ── Homepage Grid → Horizontal Scroll Carousel ── */
    .section .grid-3 {
        display: flex !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 14px;
        padding-bottom: 8px;
        margin: 0 calc(-1 * var(--space-container));
        padding-left: var(--space-container);
        padding-right: var(--space-container);
        scrollbar-width: none;
    }
    .section .grid-3::-webkit-scrollbar { display: none; }
    .section .grid-3 > * {
        flex: 0 0 82vw;
        max-width: 82vw;
        scroll-snap-align: start;
    }
    /* Fade edges for scroll hint */
    .section .grid-3 {
        mask-image: linear-gradient(to left, transparent 0%, black 4%, black 96%, transparent 100%);
        -webkit-mask-image: linear-gradient(to left, transparent 0%, black 4%, black 96%, transparent 100%);
    }
    [dir="ltr"] .section .grid-3 {
        mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    }
    .section .grid-3::after {
        content: '';
        flex: 0 0 1px;
    }

    /* ── Cards — Premium App Style ── */
    .card,
    .news-card,
    .event-card {
        border-radius: var(--radius-lg) !important;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(22,61,136,.06), 0 1px 4px rgba(22,61,136,.04);
        border: 1px solid rgba(226,232,240,.5);
        transition: transform .25s ease, box-shadow .25s ease;
    }
    .card:active,
    .news-card:active,
    .event-card:active {
        transform: scale(0.975);
        box-shadow: 0 2px 8px rgba(22,61,136,.08);
    }
    .card-img {
        height: 200px !important;
        border-radius: 0 !important;
    }
    .card-body {
        padding: 18px 20px 14px;
    }
    .card-footer {
        padding: 0 20px 18px;
    }
    .card-title {
        font-size: 1.05rem;
        line-height: 1.4;
    }
    .card-text {
        font-size: .88rem;
        line-height: 1.6;
        color: var(--muted);
    }
    .card-date {
        font-size: .78rem;
        color: var(--blue3);
    }

    /* ── Album Cards — App Gallery ── */
    .album-card {
        border-radius: var(--radius-lg) !important;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(22,61,136,.06);
    }
    .album-card:active {
        transform: scale(0.975);
    }
    .album-card .album-img {
        height: 220px !important;
    }

    /* ── Section Titles — App Style ── */
    .section-title {
        margin-bottom: 20px;
    }
    .section-title h2 {
        font-size: 1.35rem !important;
        font-weight: 800;
    }
    .section-title p {
        font-size: .88rem;
    }
    .section-title .line {
        width: 50px;
        height: 3px;
        margin-top: 10px;
    }

    /* ── Page Hero — App Screen ── */
    .page-hero {
        padding: 110px 0 60px;
        min-height: auto;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        overflow: hidden;
    }
    .page-hero::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(to top, var(--bg), transparent);
        pointer-events: none;
    }
    .page-hero h1 {
        font-size: 1.45rem !important;
        font-weight: 800;
    }
    .page-hero-wave { display: none; }

    /* ── Homepage Hero — Immersive ── */
    .hero {
        min-height: 100dvh;
        border-radius: 0 !important;
    }
    .hero-slide-content {
        padding: 90px 20px 140px !important;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .hero-slide-content h1 {
        font-size: 1.85rem !important;
        font-weight: 900;
        line-height: 1.35;
        letter-spacing: -0.01em;
        text-shadow: 0 2px 20px rgba(0,0,0,.25);
    }
    .hero-slide-content p {
        font-size: 1rem !important;
        line-height: 1.7;
        opacity: .92;
        max-width: 85% !important;
    }
    .hero-btns {
        width: 100%;
        padding: 0 16px;
    }
    .hero-btns .btn {
        width: 100% !important;
        max-width: 320px !important;
        padding: 15px 24px;
        font-size: 1rem;
        border-radius: var(--radius);
        font-weight: 700;
        justify-content: center;
    }
    .hero-btns .btn-primary {
        box-shadow: 0 8px 24px rgba(247,181,0,.35);
    }

    /* ── Trust Badges — App Chips ── */
    .hero-trust-bar {
        gap: 8px;
        padding: 0 20px;
    }
    .trust-badge {
        border-radius: 20px;
        padding: 10px 16px;
        font-size: .8rem;
        font-weight: 600;
        background: rgba(255,255,255,.15) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255,255,255,.2);
    }

    /* ── Buttons — Tactile App Feel ── */
    .btn {
        border-radius: var(--radius-sm);
        font-weight: 600;
        transition: transform .15s ease, box-shadow .15s ease, background .2s;
    }
    .btn:active {
        transform: scale(0.95) !important;
    }
    .btn-primary,
    .btn-gold {
        box-shadow: 0 4px 16px rgba(247,181,0,.3);
    }
    .btn-primary:active,
    .btn-gold:active {
        box-shadow: 0 2px 8px rgba(247,181,0,.2);
    }
    .btn-blue {
        box-shadow: 0 4px 16px rgba(22,61,136,.25);
    }

    /* ── CTA Banner — Rounded App Style ── */
    .cta-banner {
        margin: 0 8px;
        border-radius: var(--radius-lg);
        padding: 44px 20px 64px;
    }
    .cta-banner h2 {
        font-size: 1.35rem;
        font-weight: 800;
    }

    /* ── Footer — App-like compact ── */
    .footer {
        padding-top: 40px;
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 20px);
    }
    .footer-brand-logo {
        height: 44px;
    }
    .footer-brand-name {
        font-size: 1.15rem;
    }
    .footer-link-list a {
        font-size: .9rem;
        padding: 8px 0;
    }
    .footer-bottom {
        padding: 16px 0;
        font-size: .8rem;
    }

    /* ── Mobile Bottom Nav — Enhanced ── */
    .mobile-bottom-nav {
        border-radius: 20px 20px 0 0;
        border-top: none;
        box-shadow: 0 -4px 30px rgba(22,61,136,.1), 0 -1px 0 rgba(226,232,240,.4);
    }
    .bottom-nav-item {
        gap: 3px;
        font-size: .65rem;
        font-weight: 600;
        color: var(--muted);
    }
    .bottom-nav-item .icon {
        font-size: 24px;
        color: var(--muted);
        transition: transform .2s cubic-bezier(.4,0,.2,1), color .2s;
    }
    .bottom-nav-item.active {
        color: var(--blue);
    }
    .bottom-nav-item.active .icon {
        transform: scale(1.15);
        color: var(--blue2);
    }
    .bottom-nav-cta {
        margin-top: -12px;
        color: var(--text) !important;
    }
    .bottom-nav-cta .icon {
        width: 52px;
        height: 52px;
        background: linear-gradient(135deg, var(--gold) 0%, #ffc942 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(247,181,0,.4);
        color: var(--text);
        font-size: 26px;
    }
    .bottom-nav-cta:active .icon {
        transform: scale(0.9);
        box-shadow: 0 3px 10px rgba(247,181,0,.3);
    }

    /* ── Mobile Menu — Enhanced Slide Sheet ── */
    .mobile-menu-content {
        max-width: 88vw;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        box-shadow: -12px 0 60px rgba(22,61,136,.2);
    }
    [dir="ltr"] .mobile-menu-content {
        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
        box-shadow: 12px 0 60px rgba(22,61,136,.2);
    }
    .mobile-menu-links a {
        padding: 13px 20px;
        font-size: .93rem;
        border-radius: var(--radius-sm);
        margin: 2px 12px;
    }
    .mobile-menu-links a .icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 20px;
    }
    .mobile-menu-cta {
        margin: 8px 12px;
        border-radius: var(--radius);
        padding: 14px 16px;
    }

    /* ── Forms — Premium App Feel ── */
    .form-control {
        border-radius: var(--radius-sm);
        padding: 14px 16px;
        font-size: 1rem;
        border: 1.5px solid var(--border);
        background: var(--white);
        transition: border-color .2s, box-shadow .2s;
    }
    .form-control:focus {
        border-color: var(--blue3);
        box-shadow: 0 0 0 4px rgba(79,140,247,.12);
    }
    select.form-control {
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236f7d91' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left 12px center;
        background-size: 20px;
        padding-left: 36px;
    }
    [dir="ltr"] select.form-control {
        background-position: right 12px center;
        padding-left: 16px;
        padding-right: 36px;
    }

    /* ── Wizard — App Step Flow ── */
    .wizard-card {
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(22,61,136,.06);
    }
    .wizard-footer {
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .wz-panel-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    /* ── Contact Form Card ── */
    .cp-form-card {
        border-radius: var(--radius-lg);
        box-shadow: 0 4px 20px rgba(22,61,136,.06);
    }

    /* ── Event Cards — Date Badge ── */
    .event-date-badge {
        border-radius: var(--radius-sm);
    }

    /* ── Modal — Bottom Sheet Feel ── */
    .modal-backdrop {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .modal {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 90dvh;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto !important;
        transform: translateY(0) !important;
        margin: 0;
        overflow-y: auto;
        animation: modalSlideUp .35s cubic-bezier(.4,0,.2,1);
    }
    @keyframes modalSlideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .modal::before {
        content: '';
        position: sticky;
        top: 0;
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
        margin: 0 auto 12px;
    }

    /* ── Smooth Card Image Loading ── */
    .card-img,
    .album-img {
        background: linear-gradient(110deg, #f0f4fa 30%, #e8edf5 50%, #f0f4fa 70%);
        background-size: 200% 100%;
        animation: shimmer 1.5s ease infinite;
    }
    @keyframes shimmer {
        from { background-position: 200% 0; }
        to   { background-position: -200% 0; }
    }
    .card-img[src],
    .album-img[src] {
        animation: none;
    }

    /* ── Gallery Detail — Immersive ── */
    .lightbox-image {
        border-radius: var(--radius);
        box-shadow: 0 12px 40px rgba(0,0,0,.3);
    }
}

/* ═══════════════════════════════════════════
   MOBILE ≤ 480px — DEEP APP POLISH
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {
    .section .grid-3 > * {
        flex: 0 0 85vw;
        max-width: 85vw;
    }
    .bottom-nav-cta .icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
    .site-popup {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-width: 100%;
    }
    .site-popup-overlay {
        align-items: flex-end;
    }
}

/* ═══════════════════════════════════════════
   MOBILE ≤ 360px — ULTRA-COMPACT
   ═══════════════════════════════════════════ */
@media (max-width: 360px) {
    .section .grid-3 > * {
        flex: 0 0 90vw;
        max-width: 90vw;
    }
    .card-body {
        padding: 14px 16px 12px;
    }
    .card-footer {
        padding: 0 16px 14px;
    }
    .bottom-nav-item {
        font-size: .6rem;
    }
    .bottom-nav-item .icon {
        font-size: 22px;
    }
    .bottom-nav-cta .icon {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
}

/* ═══════════════════════════════════════════
   LANDSCAPE — Phones
   ═══════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
    .hero { min-height: 100dvh; }
    .hero-slide-content { padding: 70px 20px 80px !important; min-height: 100dvh; }
    .hero-slide-content h1 { font-size: 1.3rem !important; }
    .hero-btns { flex-direction: row; gap: 10px; }
    .hero-btns .btn { max-width: 200px !important; padding: 10px 20px; font-size: .9rem; }
    .hero-trust-bar { display: none; }
    .page-hero { padding: 80px 0 40px; }
    .modal { max-height: 100dvh; border-radius: var(--radius); }
}

/* ═══════════════════════════════════════════
   TOUCH DEVICE ENHANCEMENTS
   ═══════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    .footer-link-list a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .section .grid-3,
    .filter-bar,
    .wizard-steps {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .card:hover,
    .album-card:hover {
        transform: none;
        box-shadow: 0 4px 16px rgba(22,61,136,.06), 0 1px 4px rgba(22,61,136,.04);
    }
    .btn,
    .card,
    .album-card,
    .bottom-nav-item,
    .mobile-menu-links a,
    .footer-link-list a {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ═══════════════════════════════════════════
   PWA STANDALONE — Installed as app
   ═══════════════════════════════════════════ */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top, 0px);
    }
    .navbar,
    .navbar-inner {
        top: env(safe-area-inset-top, 0px);
    }
    body::before {
        display: block;
    }
    .btn-admin-link { display: none; }
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .page-transition { transition: none; }
    .pull-indicator { transition: none; }
    .pwa-install-banner { transition: none; }
    .modal { animation: none; }
    @keyframes shimmer { from, to { background-position: 0 0; } }
    .card, .btn, .album-card { transition: none !important; }
}