/* ===== PROFESSIONAL AI-ERA UI LAYER ===== */
/* Refined, minimal, enterprise-grade polish */

:root {
    --navy: #0B1F3A;
    --navy-deep: #071525;
    --blue: #143B5C;
    --blue-light: #1E5A8A;
    --gold: #D4A82E;
    --gold-light: #F0C95A;
    --accent-cyan: #38BDF8;
    --accent-violet: #818CF8;
    --surface: #FFFFFF;
    --surface-2: #F8FAFC;
    --surface-3: #F1F5F9;
    --border-subtle: rgba(11, 31, 58, 0.08);
    --border-strong: rgba(11, 31, 58, 0.14);
    --text: #0F172A;
    --text-muted: #64748B;
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --radius-xl: 20px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 12px 40px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.12);
    --pro-glass: rgba(255, 255, 255, 0.72);
    --pro-blur: blur(20px) saturate(180%);
}

/* Subtle dot-grid + mesh background */
body.app-ui {
    font-family: var(--font);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--surface-2);
    background-image:
        radial-gradient(ellipse 100% 80% at 0% -20%, rgba(56, 189, 248, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(129, 140, 248, 0.05) 0%, transparent 45%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(212, 168, 46, 0.06) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='%230B1F3A' fill-opacity='0.04'/%3E%3C/svg%3E");
    background-attachment: fixed;
}

body.app-ui.page-home {
    background-image:
        radial-gradient(ellipse 100% 50% at 50% 0%, rgba(11, 31, 58, 0.92) 0%, transparent 55%),
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(56, 189, 248, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse 60% 40% at 0% 30%, rgba(212, 168, 46, 0.05) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='%230B1F3A' fill-opacity='0.035'/%3E%3C/svg%3E");
    background-color: var(--surface-2);
}

/* —— Typography —— */
body.app-ui h1,
body.app-ui h2,
body.app-ui h3,
body.app-ui h4,
body.app-ui .app-section-head h2,
body.app-ui .app-header-name,
body.app-ui .page-banner h1 {
    font-family: var(--font-display);
    letter-spacing: -0.025em;
}

body.app-ui .app-section-head h2 {
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.app-ui .app-section-head p {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 52ch;
    line-height: 1.6;
}

/* —— Section pills — minimal tech badge —— */
body.app-ui .section-pill {
    background: var(--surface);
    color: var(--blue-light);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 6px 14px 6px 6px;
    border-radius: 100px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
    gap: 8px;
}

body.app-ui .section-pill i {
    width: 24px;
    height: 24px;
    font-size: 0.62rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
    color: var(--gold-light);
    border-radius: 50%;
}

body.app-ui .section-pill-light {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: var(--pro-blur);
}

body.app-ui .section-pill-light i {
    background: rgba(255, 255, 255, 0.15);
    color: var(--gold-light);
}

/* —— Mobile shell — frosted enterprise header —— */
body.app-ui .app-mobile-shell {
    background: var(--pro-glass);
    backdrop-filter: var(--pro-blur);
    -webkit-backdrop-filter: var(--pro-blur);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

body.app-ui.page-home .app-mobile-shell:not(.scrolled) {
    background: rgba(7, 21, 37, 0.82);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

body.app-ui .app-mobile-shell.scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-md);
}

body.app-ui .app-status-strip {
    background: linear-gradient(90deg, var(--navy-deep) 0%, var(--navy) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.app-ui .app-status-pill {
    background: rgba(212, 168, 46, 0.12);
    border-color: rgba(212, 168, 46, 0.25);
    color: var(--gold-light);
    font-weight: 600;
}

body.app-ui .app-header-logo-wrap {
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
    background: var(--surface);
}

body.app-ui .app-header-name em {
    color: var(--gold);
    font-weight: 700;
}

body.app-ui .app-header-call-fab {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    border: none;
    box-shadow: 0 4px 16px rgba(212, 168, 46, 0.35);
}

/* —— Cards — unified professional surface —— */
body.app-ui .app-service-card,
body.app-ui .app-review-card,
body.app-ui .app-dest-guide-card,
body.app-ui .app-event-card,
body.app-ui .app-partner-card,
body.app-ui .app-quick-action-card,
body.app-ui .app-promo-trio-card--light,
body.app-ui .oskool-mobile-card,
body.app-ui .app-feature-card,
body.app-ui .app-country-card,
body.app-ui .app-form-card {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.28s ease;
}

body.app-ui .app-service-card:hover,
body.app-ui .app-dest-guide-card:hover,
body.app-ui .app-quick-action-card:hover,
body.app-ui .app-promo-trio-card--light:hover,
body.app-ui .oskool-mobile-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

body.app-ui .app-service-card::before {
    height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--gold), var(--accent-violet));
    opacity: 0;
}

body.app-ui .app-service-card:hover::before {
    opacity: 1;
}

body.app-ui .app-service-icon,
body.app-ui .oskool-mobile-showcase .app-service-icon,
body.app-ui .app-quick-action-icon {
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
    color: var(--gold-light);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.app-ui .app-quick-action-card--visit .app-quick-action-icon {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: var(--navy);
}

body.app-ui .app-quick-action-card--blog .app-quick-action-icon {
    background: linear-gradient(135deg, #0E7490 0%, var(--accent-cyan) 100%);
    color: #fff;
}

/* —— Sections —— */
body.app-ui .app-section {
    padding: 56px 0;
    position: relative;
}

body.app-ui .app-section-white {
    background: transparent;
}

body.app-ui .app-section-cream,
body.app-ui .app-dest-guides-section,
body.app-ui .app-promo-trio-section {
    background: transparent;
}

body.app-ui #services.app-section-white {
    border-radius: 24px 24px 0 0;
    margin-top: -1px;
    background: var(--surface);
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.06);
    border-top: 1px solid var(--border-subtle);
}

body.app-ui .oskool-mobile-showcase {
    background: var(--surface);
}

body.app-ui .oskool-top-destinations,
body.app-ui .home-launchpad-destinations {
    margin-top: 0;
}

body.app-ui .oskool-mobile-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

body.app-ui .oskool-flag-chip {
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

body.app-ui .oskool-flag-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(212, 168, 46, 0.35);
}

body.app-ui .oskool-flag-chip span {
    border-color: rgba(212, 168, 46, 0.3);
    background: #fff;
}

body.app-ui .oskool-flag-chip img,
body.app-ui .country-flag-sm,
body.app-ui .country-flag-md,
body.app-ui .app-dest-guide-flag img {
    object-fit: contain !important;
    object-position: center;
    background: #fff;
}

body.app-ui .app-dest-guide-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

/* —— Open doors stats — premium dark band —— */
body.app-ui .app-open-doors {
    padding: 56px 0;
    margin: 0;
}

body.app-ui .app-open-doors-bg {
    background:
        radial-gradient(ellipse 70% 80% at 20% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 60% 60% at 90% 100%, rgba(129, 140, 248, 0.1) 0%, transparent 50%),
        linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 50%, #0E2D4D 100%);
}

body.app-ui .app-open-doors-stat {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
}

body.app-ui .app-open-doors-stat strong {
    color: var(--gold-light);
    font-weight: 800;
    font-family: var(--font-display);
}

/* —— Buttons —— */
body.app-ui .btn-gold {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    color: var(--navy);
    font-family: var(--font);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 4px 14px rgba(212, 168, 46, 0.3);
    letter-spacing: 0.01em;
}

body.app-ui .btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 168, 46, 0.4);
    color: var(--navy);
}

body.app-ui .btn-outline-navy {
    border: 1.5px solid var(--border-strong);
    color: var(--navy);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 11px 22px;
    border-radius: 10px;
    background: var(--surface);
    transition: all 0.22s ease;
}

body.app-ui .btn-outline-navy:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

body.app-ui .app-link-more {
    background: var(--surface);
    color: var(--navy);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 8px 16px;
    border-radius: 10px;
}

body.app-ui .app-link-more:hover {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    box-shadow: var(--shadow-sm);
}

body.app-ui .app-link-more i {
    transition: transform 0.2s ease;
}

body.app-ui .app-link-more:hover i {
    transform: translateX(3px);
}

/* —— Quick actions —— */
body.app-ui .app-quick-actions {
    padding: 20px 0 12px;
}

body.app-ui .app-quick-action-card {
    border-radius: var(--radius-lg);
}

body.app-ui .app-quick-action-arrow {
    background: var(--surface-3);
    border-radius: 8px;
    width: 28px;
    height: 28px;
}

/* —— Event cards —— */
body.app-ui .app-events-section {
    overflow: hidden;
    max-width: 100%;
}

body.app-ui .app-events-slider-wrap {
    overflow: hidden;
}

body.app-ui .app-events-swiper {
    overflow: hidden !important;
}

body.app-ui .app-event-badge {
    background: var(--navy);
    color: var(--gold-light);
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

body.app-ui .app-event-tag {
    background: rgba(212, 168, 46, 0.12);
    color: var(--gold);
    border-radius: 6px;
}

/* —— Promo trio —— */
body.app-ui .app-promo-trio-section {
    background: transparent;
}

body.app-ui .app-promo-trio-card--featured,
body.app-ui .app-promo-trio-card--gold {
    background:
        radial-gradient(ellipse 80% 80% at 100% 0%, rgba(56, 189, 248, 0.14) 0%, transparent 55%),
        linear-gradient(145deg, var(--navy) 0%, var(--blue) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg);
    color: #fff;
}

body.app-ui .app-promo-trio-card--featured h3,
body.app-ui .app-promo-trio-card--featured p,
body.app-ui .app-promo-trio-card--gold h3,
body.app-ui .app-promo-trio-card--gold p {
    color: #fff;
}

body.app-ui .app-promo-trio-card--featured p,
body.app-ui .app-promo-trio-card--gold p {
    color: rgba(255, 255, 255, 0.88);
}

body.app-ui .app-promo-trio-card--featured .app-promo-trio-link,
body.app-ui .app-promo-trio-card--gold .app-promo-trio-link {
    color: var(--gold-light);
}

body.app-ui .app-promo-trio-icon {
    border-radius: var(--radius-md);
}

/* —— About section —— */
body.app-ui .app-about-card {
    background: linear-gradient(145deg, var(--navy) 0%, var(--blue) 100%);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
}

body.app-ui .app-about-list i {
    color: var(--gold);
}

/* —— Bottom nav — iOS-style dock —— */
body.app-ui .app-bottom-nav {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(15, 23, 42, 0.12),
        0 2px 8px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

body.app-ui .app-bottom-nav a {
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-muted);
}

body.app-ui .app-bottom-nav a.active {
    color: var(--navy);
    background: rgba(11, 31, 58, 0.06);
    box-shadow: none;
}

body.app-ui .app-bottom-nav a.active i {
    color: var(--gold);
}

/* —— CTA banner —— */
body.app-ui .app-cta-banner {
    background:
        radial-gradient(ellipse 80% 80% at 100% 0%, rgba(56, 189, 248, 0.15) 0%, transparent 55%),
        linear-gradient(145deg, var(--navy-deep) 0%, var(--navy) 60%, var(--blue) 100%);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
}

/* —— Testimonials —— */
body.app-ui .app-review-stars {
    color: var(--gold);
}

body.app-ui .swiper-pagination-bullet-active {
    background: var(--gold) !important;
    opacity: 1;
}

/* —— Gallery —— */
body.app-ui .app-gallery-item {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

/* —— Inner pages —— */
body.app-ui .page-banner {
    background:
        radial-gradient(ellipse 80% 80% at 100% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 60% 60% at 0% 100%, rgba(129, 140, 248, 0.08) 0%, transparent 50%),
        linear-gradient(145deg, var(--navy-deep) 0%, var(--navy) 50%, var(--blue) 100%);
    border-radius: 0 0 24px 24px;
    box-shadow: var(--shadow-md);
}

body.app-ui .page-type-badge {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--gold-light);
    backdrop-filter: blur(8px);
}

body.app-ui .app-page-card,
body.app-ui .contact-form-card,
body.app-ui .blog-card {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* —— FAQ accordion —— */
body.app-ui .accordion-item {
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

body.app-ui .accordion-button {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--navy);
}

body.app-ui .accordion-button:not(.collapsed) {
    background: var(--surface-2);
    color: var(--navy);
    box-shadow: none;
}

/* —— Process steps —— */
body.app-ui .app-process-step {
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
}

/* —— Footer refinement —— */
body.app-ui .site-footer-premium {
    background: var(--navy-deep);
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
    body.app-ui * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* —— Desktop polish —— */
@media (min-width: 992px) {
    body.app-ui .app-section {
        padding: 72px 0;
    }

    body.app-ui .app-quick-actions-grid {
        gap: 20px;
    }

    body.app-ui .app-dest-guides-grid {
        gap: 24px;
    }
}

/* —— Hero slider — cinematic professional —— */
body.app-ui .home-hero--fullscreen {
    background: var(--navy-deep);
}

body.app-ui .home-hero-orb--1 {
    background: rgba(56, 189, 248, 0.15);
}

body.app-ui .home-hero-orb--2 {
    background: rgba(129, 140, 248, 0.12);
}

body.app-ui .home-hero-orb--3 {
    background: rgba(212, 168, 46, 0.12);
}

body.app-ui .home-hero-content h1 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
}

body.app-ui .home-hero-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    font-weight: 600;
    letter-spacing: 0.06em;
}

body.app-ui .btn-hero-primary {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    color: var(--navy);
    font-weight: 600;
    border-radius: 10px;
    border: none;
    box-shadow: 0 4px 20px rgba(212, 168, 46, 0.35);
}

body.app-ui .btn-hero-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    font-weight: 600;
}

body.app-ui .home-hero-pagination .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.35);
    opacity: 1;
}

body.app-ui .home-hero-pagination .swiper-pagination-bullet-active {
    background: var(--gold-light);
    width: 24px;
    border-radius: 6px;
}

/* —— Desktop header —— */
body.app-ui .header-stack.is-solid,
body.app-ui .site-header {
    font-family: var(--font);
}

body.page-home .header-stack:not(.is-solid) .site-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(180%);
}

body.app-ui .logo-brand strong {
    font-family: var(--font-display);
}

@media (max-width: 575px) {
    body.app-ui .app-section {
        padding: 40px 0;
    }

    body.app-ui .app-section-head {
        margin-bottom: 20px;
    }

    body.app-ui .app-cta-banner {
        margin: 0 12px 20px;
        border-radius: var(--radius-lg);
    }
}