/* =====================================================
   Arab Union Tech — Main Stylesheet
   RTL | Cairo Font | Modern Professional Design
   ===================================================== */

/* ─── CSS Variables ──────────────────────────────────── */
:root {
    --font-body:  'Tajawal', 'Cairo', sans-serif;
    --font-ar:    'Cairo', 'Tajawal', sans-serif;
    --font-latin: 'Syne', 'Alexandria', sans-serif;
    --beige:       #E8D9C3;
    --beige-soft:  #F6EFE4;
    --beige-warm:  #DCC4A4;
    --beige-deep:  #B99E7C;
    --ink-dark:    #1A2D3E;
    --navy:        #0C2438;
    --navy-mid:    #144261;
    --navy-light:  #2C6E92;
    --accent:      #3CC7D7;
    --accent-dark: #1FA8BE;
    --accent-glow: rgba(60,199,215,.18);
    --gold:        #D5A24A;
    --gold-light:  rgba(213,162,74,.18);
    --white:       #ffffff;
    --bg:          #F6EFE4;
    --bg-section:  #EFE3D1;
    --text:        #173451;
    --text-muted:  #5F7487;
    --color-muted: #7B8E9E;
    --border:      #D8C4A6;
    --border-dark: #C6AE89;
    --success:     #10b981;
    --danger:      #ef4444;
    --warning:     #f59e0b;
    --surface:     #F3E9DA;
    --surface-alt: #EBDCC7;
    --surface-soft: rgba(243,233,218,.9);
    --hero-bg:     #0a0f1e;
    --hero-bg-soft:#101a31;
    --hero-cyan:   #00d4ff;
    --hero-blue:   #0066ff;
    --hero-gold:   #f5c15a;
    --hero-surface:rgba(255,255,255,.05);
    --hero-surface-strong: rgba(255,255,255,.08);
    --hero-border: rgba(255,255,255,.12);
    --hero-muted:  rgba(225,232,244,.74);
    --shadow-sm:   0 14px 28px rgba(0,0,0,.18);
    --shadow:      0 22px 48px rgba(0,0,0,.24);
    --shadow-lg:   0 32px 72px rgba(0,0,0,.32);
    --radius:      14px;
    --radius-lg:   24px;
    --transition:  .24s ease;
}

/* ─── Reset & Base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-body);
    direction: rtl;
    background: var(--bg);
    color: var(--text);
    line-height: 1.78;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

html[dir="ltr"] body {
    direction: ltr;
}

body.lang-en {
    font-family: var(--font-latin);
}

body.lang-en .btn,
body.lang-en input,
body.lang-en select,
body.lang-en textarea,
body.lang-en .nav-link,
body.lang-en .brand-name,
body.lang-en .brand-sub,
body.lang-en .section-kicker,
body.lang-en .tag,
body.lang-en .footer-heading,
body.lang-en .mobile-menu-title {
    font-family: var(--font-latin);
}

body.lang-en .navbar {
    gap: .75rem;
}

body.lang-en .nav-links {
    gap: .2rem;
    padding: .28rem;
}

body.lang-en .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
    line-height: 1.1;
    font-size: .82rem;
    padding: .56rem .82rem;
}

body.lang-en .nav-actions {
    gap: .5rem;
}

body.lang-en .language-switch {
    min-width: 92px;
    padding-inline: 1rem;
}

body.lang-en .nav-actions .btn-accent {
    padding-inline: 1.2rem;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.34), transparent 24%),
        radial-gradient(circle at bottom left, rgba(199,167,125,.14), transparent 22%),
        linear-gradient(180deg, rgba(255,248,240,.24), rgba(226,213,194,.2));
    pointer-events: none;
    z-index: -1;
}

::selection {
    background: rgba(60,199,215,.26);
    color: var(--white);
}

a { color: inherit; text-decoration: none; transition: color var(--transition); }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ─── Typography ─────────────────────────────────────── */
h1, h2, h3, h4 { font-family: 'Alexandria', 'Tajawal', 'Cairo', sans-serif; }
h1 { font-size: clamp(1.92rem, 4.7vw, 3.2rem); font-weight: 700; line-height: 1.28; }
h2 { font-size: clamp(1.48rem, 3vw, 2.22rem); font-weight: 700; line-height: 1.34; }
h3 { font-size: clamp(1.08rem, 2.2vw, 1.42rem); font-weight: 600; line-height: 1.42; }
h4 { font-size: 1.05rem; font-weight: 600; }
p  { margin-bottom: 1rem; max-width: 72ch; }

/* ─── Layout ─────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.section-lg { padding: 7rem 0; }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 2rem; }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.flex { display: flex; gap: 1rem; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

/* ─── Section Headers ────────────────────────────────── */
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header .tag {
    display: inline-block;
    background: linear-gradient(180deg, rgba(60,199,215,.16), rgba(60,199,215,.08));
    color: #8FE4EF;
    font-size: .77rem;
    font-weight: 700;
    padding: .38rem 1rem;
    border-radius: 50px;
    border: 1px solid rgba(60,199,215,.2);
    letter-spacing: .05em;
    margin-bottom: .75rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.section-header h2 { color: #F2F8FC; margin-bottom: .75rem; }
.section-header p { color: var(--text-muted); max-width: 620px; margin: 0 auto; font-size: 1.05rem; }
.section-divider {
    width: 60px; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    border-radius: 3px;
    margin: 1rem auto 0;
}

/* ─── Buttons ────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .75rem 1.75rem;
    border-radius: var(--radius);
    font-family: 'Tajawal', 'Cairo', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,.35) inset;
}
.btn-primary {
    background: linear-gradient(135deg, var(--navy-mid), var(--accent-dark));
    color: var(--white);
    border-color: rgba(255,255,255,.08);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(42,111,151,.18); }

.btn-accent {
    background: linear-gradient(135deg, var(--accent), #3BAFEC);
    color: var(--white);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 12px 26px rgba(28,198,217,.24);
}
.btn-accent:hover {
    box-shadow: 0 16px 34px rgba(28,198,217,.3);
    transform: translateY(-2px);
}

.btn-outline {
    background: rgba(14,31,45,.72); color: var(--white);
    border-color: rgba(143,228,239,.14);
}
.btn-outline:hover { background: rgba(18,40,58,.92); border-color: rgba(60,199,215,.36); color: #A7EEF5; transform: translateY(-2px); }

.btn-outline-dark {
    background: rgba(10,26,40,.82); color: var(--white);
    border-color: rgba(143,228,239,.12);
}
.btn-outline-dark:hover { background: rgba(13,33,50,.95); border-color: rgba(60,199,215,.28); color: var(--accent); transform: translateY(-2px); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(60,199,215,.28);
    outline-offset: 3px;
}

.btn-sm  { padding: .5rem 1.25rem; font-size: .85rem; }
.btn-lg  { padding: 1rem 2.5rem; font-size: 1.05rem; }
.btn-block { width: 100%; justify-content: center; }

/* ─── Alert / Flash ──────────────────────────────────── */
.alert {
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
    display: flex; gap: .5rem; align-items: center;
}
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

/* ─── Navbar ─────────────────────────────────────────── */
.site-header {
    position: fixed; top: 0; right: 0; left: 0; z-index: 1000;
    padding-top: .8rem;
    background: linear-gradient(180deg, rgba(8, 18, 28, .12), rgba(8, 18, 28, 0));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 0;
    transition: box-shadow var(--transition), border-color var(--transition), background var(--transition), padding var(--transition);
}
.site-header::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 0;
    background: none;
}
.site-header.scrolled {
    padding-top: .45rem;
}

.navbar {
    display: flex; align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 84px; gap: 1.1rem;
    padding: .9rem 1.35rem;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(248, 241, 231, .98), rgba(234, 220, 199, .95));
    border: 1px solid rgba(167, 138, 103, .2);
    box-shadow:
        0 18px 36px rgba(6, 18, 28, .16),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.navbar-brand {
    display: inline-flex; align-items: center; gap: .95rem; flex-shrink: 0;
    max-width: min(30vw, 280px);
}
.brand-logo {
    display: block;
    width: 100%;
    height: 72px;
    object-fit: contain;
    object-position: right center;
    filter: drop-shadow(0 10px 18px rgba(42, 58, 73, .12));
}
.brand-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(228, 211, 186, .96));
    border: 1px solid rgba(175, 146, 111, .18);
    box-shadow: 0 10px 22px rgba(44, 36, 24, .08), inset 0 1px 0 rgba(255,255,255,.78);
}
.brand-text { display: flex; flex-direction: column; }
.brand-name { color: var(--ink-dark); font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
.brand-sub  { color: rgba(26,45,62,.62); font-size: .68rem; font-weight: 600; }

.nav-links {
    display: flex; align-items: center; gap: .32rem;
    padding: .34rem;
    border-radius: 999px;
    background: rgba(255,255,255,.34);
    border: 1px solid rgba(177, 146, 109, .14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.54);
}

.nav-link {
    color: rgba(26,45,62,.82);
    font-size: .875rem;
    font-weight: 700;
    padding: .62rem 1rem;
    border-radius: 999px;
    letter-spacing: .01em;
    transition: color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
    cursor: pointer;
}
.nav-link:hover, .nav-link.active {
    color: var(--ink-dark);
    background: linear-gradient(180deg, rgba(221, 200, 171, .92), rgba(208, 181, 145, .92));
    box-shadow: 0 10px 20px rgba(83, 62, 34, .12), inset 0 1px 0 rgba(255,255,255,.5);
}
.nav-link.has-dropdown {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.nav-dropdown-trigger {
    appearance: none;
    border: 0;
    font: inherit;
    background: transparent;
}
.dropdown-trigger-icon {
    width: 14px;
    height: 14px;
    opacity: .62;
    transition: transform var(--transition), opacity var(--transition);
}
.nav-dropdown:hover .dropdown-trigger-icon,
.nav-dropdown.open .dropdown-trigger-icon {
    transform: translateY(1px);
    opacity: 1;
}

/* Dropdown */
.nav-dropdown { position: relative; }
.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: linear-gradient(180deg, rgba(248, 242, 233, .98), rgba(240, 230, 215, .98));
    border: 1px solid rgba(167, 138, 103, .18);
    border-radius: 20px;
    min-width: 220px;
    padding: .7rem;
    box-shadow: 0 22px 40px rgba(18, 26, 36, .18);
    z-index: 10;
}
.dropdown-menu .nav-link {
    display: block;
    white-space: nowrap;
    color: var(--ink-dark);
}
.dropdown-menu .nav-link:hover,
.dropdown-menu .nav-link.active {
    color: var(--ink-dark);
    background: rgba(215, 193, 165, .5);
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu { display: block; }

.nav-actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

.language-switch {
    min-width: 108px;
    justify-content: center;
    background: linear-gradient(180deg, rgba(240, 229, 212, .96), rgba(224, 208, 184, .92));
    color: #163246;
    border-color: rgba(140, 113, 79, .28);
    box-shadow: 0 10px 22px rgba(73, 54, 31, .08), inset 0 1px 0 rgba(255,255,255,.48);
}

.language-switch .language-switch-icon {
    color: #27465d;
}

.nav-actions .btn-outline:hover,
.language-switch:hover {
    background: linear-gradient(180deg, rgba(232, 216, 193, .98), rgba(216, 196, 166, .95));
    border-color: rgba(140, 113, 79, .36);
    color: #102a3b;
}

.nav-actions .btn-accent {
    background: linear-gradient(180deg, #1F516B, #15384D);
    color: var(--beige-soft);
    border-color: rgba(21, 56, 77, .2);
    box-shadow: 0 14px 28px rgba(21, 56, 77, .18);
}

.nav-actions .btn-accent:hover {
    background: linear-gradient(180deg, #245d7b, #174056);
    box-shadow: 0 18px 34px rgba(21, 56, 77, .24);
}

.language-switch-icon {
    flex-shrink: 0;
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: rgba(255,255,255,.36);
    border: 1px solid rgba(167, 138, 103, .18);
    cursor: pointer;
    padding: .62rem;
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--ink-dark); border-radius: 2px;
    transition: all var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(20, 24, 28, .2);
    backdrop-filter: blur(4px);
}
.mobile-overlay.active { display: block; }

.mobile-menu {
    position: fixed;
    top: 0; right: -320px;
    width: 300px; height: 100%;
    background: linear-gradient(180deg, #FBF4EA 0%, #EFDFCA 100%);
    z-index: 1200;
    display: flex; flex-direction: column;
    transition: right .3s ease;
    overflow-y: auto;
    box-shadow: -18px 0 44px rgba(52, 40, 24, .16);
}
.mobile-menu.open { right: 0; }

html[dir="ltr"] .mobile-menu {
    right: auto;
    left: -100%;
}

html[dir="ltr"] .mobile-menu.open {
    right: auto;
    left: 0;
}

.mobile-menu-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(167, 138, 103, .16);
}
.mobile-menu-title { color: var(--ink-dark); font-weight: 800; font-size: 1rem; }
.mobile-close {
    background: none; border: none;
    color: rgba(26,45,62,.62); font-size: 1.2rem; cursor: pointer;
    padding: .45rem; border-radius: 999px;
    transition: color var(--transition), background var(--transition);
}
.mobile-close:hover { color: var(--ink-dark); background: rgba(215, 193, 165, .34); }

.mobile-nav { flex: 1; padding: 1rem 0; }

.language-switch-mobile {
    margin-bottom: .75rem;
}
.mobile-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: rgba(26,45,62,.88);
    font-size: .95rem; font-weight: 500;
    padding: .9rem 1.5rem;
    border-bottom: 1px solid rgba(167, 138, 103, .08);
    transition: all var(--transition);
}
.mobile-link:hover { color: var(--ink-dark); background: rgba(215, 193, 165, .24); padding-right: 2rem; }
.mobile-link-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(215, 193, 165, .28);
    color: #6E5332;
    flex-shrink: 0;
}
.mobile-close-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.mobile-cta {
    padding: 1.5rem;
    border-top: 1px solid rgba(167, 138, 103, .14);
    background: rgba(255,255,255,.26);
}

/* Page content padding for fixed navbar */
body > :not(.site-header):first-of-type:not(.hero-section),
.page-content { padding-top: 96px; }

/* ─── Inner Pages Shared Layout ─────────────────────── */
.page-masthead {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 4rem) 0 2.5rem;
    background:
        radial-gradient(circle at top right, rgba(28,198,217,.16), transparent 30%),
        radial-gradient(circle at bottom left, rgba(255,181,71,.10), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(234,247,252,.72));
    border-bottom: 1px solid rgba(18,53,78,.06);
}
.page-masthead::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(18,58,88,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,58,88,.035) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: .5;
    pointer-events: none;
}
.page-masthead > .container {
    position: relative;
    z-index: 1;
}
.masthead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}
.masthead-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.page-masthead .breadcrumb {
    justify-content: flex-start;
    color: var(--text-muted);
    margin-bottom: .9rem;
}
.page-masthead .breadcrumb span {
    color: inherit;
}
.page-masthead .breadcrumb a {
    color: var(--navy);
}
.page-title {
    color: var(--navy);
    font-size: clamp(2.1rem, 4.4vw, 3.9rem);
    line-height: 1.18;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    max-width: 14ch;
}
.page-intro {
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.95;
    max-width: 64ch;
    margin-bottom: 0;
}
.page-fact-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.page-fact-card {
    min-height: 100%;
    padding: 1.15rem 1.2rem;
    border-radius: 20px;
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(18,53,78,.08);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.page-fact-card strong {
    display: block;
    color: var(--navy);
    font-size: 1.12rem;
    font-weight: 800;
    margin-bottom: .45rem;
}
.page-fact-card span {
    display: block;
    color: var(--text-muted);
    font-size: .88rem;
    line-height: 1.8;
}
.page-side-visual,
.knowledge-visual {
    position: relative;
    isolation: isolate;
    min-height: 420px;
    padding: 1.25rem;
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0e2a43 0%, #1b5f7d 56%, #49c7df 100%);
    box-shadow: 0 28px 56px rgba(18,58,88,.18);
}
.page-side-visual::before,
.knowledge-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .32;
}
.page-side-visual::after,
.knowledge-visual::after {
    content: '';
    position: absolute;
    inset: auto auto -24% -10%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    filter: blur(16px);
}
.page-side-visual img,
.knowledge-visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 540px;
    max-height: 360px;
    object-fit: contain;
}
.section-block {
    padding: 2rem 0 4rem;
}
.section-block.alt {
    background: linear-gradient(180deg, rgba(234,247,252,.42), rgba(255,255,255,.18));
}
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .92rem;
    border-radius: 999px;
    background: var(--accent-glow);
    border: 1px solid rgba(28,198,217,.18);
    color: var(--accent-dark);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .03em;
}
.page-lead-note {
    margin: .7rem 0 0;
    color: var(--text-muted);
    font-size: .92rem;
}
.filter-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.3rem;
    border-radius: 24px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(18,53,78,.08);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.6rem;
}
.filter-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .55rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(18,53,78,.1);
    background: white;
    color: var(--navy);
    font-size: .86rem;
    font-weight: 700;
    transition: all var(--transition);
}
.filter-chip:hover,
.filter-chip.active {
    background: linear-gradient(135deg, var(--accent), #43b8ee);
    border-color: transparent;
    color: white;
    box-shadow: 0 14px 26px rgba(28,198,217,.22);
}
.surface-card,
.story-card,
.media-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.knowledge-shell,
.form-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr);
    gap: 1.5rem;
    align-items: start;
}
.article-feature {
    padding: 1.4rem;
}
.article-feature-top,
.media-card-top,
.agenda-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.article-feature-top time,
.media-card-top time {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 600;
}
.tag-chip,
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .38rem .78rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
}
.tag-chip {
    background: var(--accent-glow);
    color: var(--accent-dark);
    border: 1px solid rgba(28,198,217,.14);
}
.status-badge {
    background: rgba(16,185,129,.14);
    color: #0f766e;
    border: 1px solid rgba(16,185,129,.18);
}
.status-badge.muted {
    background: rgba(18,53,78,.08);
    color: var(--text-muted);
    border-color: rgba(18,53,78,.1);
}
.article-feature h3,
.story-card h3,
.media-card h3,
.form-aside h3,
.form-panel h3,
.agenda-card h3 {
    color: var(--navy);
}
.article-feature h3 {
    margin: 1rem 0 .7rem;
}
.article-feature p {
    color: var(--text-muted);
    line-height: 1.85;
}
.article-feature img,
.story-card img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    margin: 1rem 0 1.1rem;
    background: linear-gradient(135deg, rgba(18,58,88,.06), rgba(28,198,217,.08));
}
.story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.story-card {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    transition: all var(--transition);
}
.story-card:hover,
.media-card:hover {
    border-color: rgba(28,198,217,.24);
}
.story-card p,
.media-card p,
.form-aside p,
.form-panel p,
.agenda-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.85;
}
.story-card .btn,
.article-feature .btn {
    margin-top: auto;
}
.story-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-top: 1.25rem;
}
.story-list li {
    position: relative;
    padding-right: 1.1rem;
    line-height: 1.85;
}
.story-list li::before {
    content: '';
    position: absolute;
    top: .8rem;
    right: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
}
.form-aside,
.form-panel {
    border-radius: 28px;
    padding: 1.5rem;
    border: 1px solid rgba(18,53,78,.08);
    box-shadow: var(--shadow-sm);
}
.form-aside {
    background: linear-gradient(135deg, #10304b 0%, #1c6282 60%, #4fc7de 100%);
    color: white;
    position: relative;
    overflow: hidden;
}
.form-aside::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: .24;
}
.form-aside > * {
    position: relative;
    z-index: 1;
}
.form-aside .section-kicker {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.18);
    color: rgba(255,255,255,.94);
}
.form-aside h3,
.form-aside p,
.form-aside .story-list li {
    color: rgba(255,255,255,.9);
}
.form-panel {
    background: white;
}
.agenda-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.agenda-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.2rem;
    align-items: center;
    padding: 1.4rem 1.5rem;
    border-radius: 24px;
    background: white;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.agenda-card:hover {
    border-color: rgba(28,198,217,.22);
    box-shadow: var(--shadow);
}
.agenda-date {
    min-width: 84px;
    padding: .9rem 1rem;
    text-align: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #10304b, #1c6282);
    color: white;
}
.agenda-date strong {
    display: block;
    font-size: 1.8rem;
    line-height: 1;
}
.agenda-date span {
    display: block;
    margin-top: .35rem;
    color: rgba(255,255,255,.75);
    font-size: .75rem;
    font-weight: 700;
}
.report-meta,
.media-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    margin-top: .95rem;
    color: var(--text-muted);
    font-size: .86rem;
}
.media-card-top,
.media-card h3,
.media-card p,
.media-meta {
    padding-inline: 1.2rem;
}
.media-card-top {
    padding-top: 1.2rem;
}
.media-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    margin: .9rem 0 1rem;
    background: linear-gradient(135deg, rgba(18,58,88,.06), rgba(28,198,217,.08));
}
.media-card h3 {
    margin-bottom: .55rem;
}
.media-card p {
    margin-bottom: 0;
}
.media-meta {
    padding-bottom: 1.2rem;
}

/* ─── Hero Section ───────────────────────────────────── */
.hero-section {
    min-height: calc(100vh - 78px);
    min-height: calc(100svh - 78px);
    background: linear-gradient(145deg, #F5FBFF 0%, #DFF5FF 46%, #FFF7EB 100%);
    display: flex; flex-direction: column; align-items: stretch;
    position: relative; overflow: hidden;
    padding-top: 78px;
}

/* Animated grid */
.hero-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(18,58,88,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,58,88,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    animation: gridScroll 35s linear infinite;
}
@keyframes gridScroll {
    0%   { background-position: 0 0; }
    100% { background-position: 60px 60px; }
}

/* Glow orbs */
.hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.orb {
    position: absolute; border-radius: 50%;
    filter: blur(110px); opacity: .14;
}
.orb-1 { width: 480px; height: 480px; background: var(--accent); top: -80px; left: -80px; }
.orb-2 { width: 320px; height: 320px; background: var(--gold); bottom: -60px; right: 5%; }
.orb-3 { width: 240px; height: 240px; background: var(--navy-light); top: 40%; right: 22%; }

.hero-content {
    position: relative; z-index: 1;
    text-align: center;
    padding: 4rem 0;
    max-width: 860px;
    margin: 0 auto;
}

.hero-tag {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(28,198,217,.22);
    color: var(--accent-dark);
    font-size: .8rem; font-weight: 500;
    padding: .4rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    letter-spacing: .02em;
    box-shadow: 0 12px 28px rgba(28,198,217,.1);
}
.hero-tag-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.4); }
}

.hero-title {
    font-size: clamp(2rem, 4.8vw, 3.2rem);
    font-weight: 700;
    color: var(--navy);
    line-height: 1.38;
    margin-bottom: 1.25rem;
}
.hero-title span { color: var(--accent-dark); }

.hero-subtitle {
    font-size: clamp(.92rem, 2vw, 1.1rem);
    color: rgba(18,53,78,.72);
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.hero-desc {
    font-size: 1rem;
    color: rgba(23,53,78,.8);
    max-width: 540px;
    margin: 0 0 2.25rem;
    line-height: 1.95;
}

.hero-actions {
    display: flex; gap: 1rem;
    justify-content: center; flex-wrap: wrap;
}

/* Hero Stats */
.hero-stats {
    position: relative; z-index: 1;
    background: rgba(255,255,255,.54);
    border-top: 1px solid rgba(18,53,78,.08);
    padding: 2rem 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
}
.stat-item { text-align: center; padding: 1.1rem 1rem; }
.stat-num {
    display: block;
    font-size: 1.95rem; font-weight: 700;
    color: var(--navy); line-height: 1;
    margin-bottom: .4rem;
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
}
.stat-label {
    font-size: .78rem; color: var(--text-muted); font-weight: 500; letter-spacing: .01em;
}

/* ─── Section: Why ───────────────────────────────────── */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.why-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    position: relative; overflow: hidden;
}
.why-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    transform: scaleX(0);
    transition: transform var(--transition);
    transform-origin: right;
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.why-card:hover::after { transform: scaleX(1); }

.why-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: var(--accent-glow);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    transition: background var(--transition);
}
.why-card:hover .why-icon { background: var(--accent); color: white; }
.why-card h3 { font-size: 1.1rem; color: var(--navy); margin-bottom: .6rem; }
.why-card p  { font-size: .9rem; color: var(--text-muted); margin: 0; line-height: 1.7; }

/* ─── Programs Grid ──────────────────────────────────── */
.programs-preview-section {
    background: #ffffff;
}
.programs-preview-section .section-header .tag {
    background: linear-gradient(180deg, #ffffff, #f6efe5);
    border: 1px solid rgba(176, 145, 107, .28);
    color: #21425d;
    font-size: .96rem;
    font-weight: 800;
    padding: .9rem 2rem;
    border-radius: 999px;
    letter-spacing: 0;
    box-shadow: 0 12px 28px rgba(82, 62, 36, .10), inset 0 1px 0 rgba(255,255,255,.92);
}
.programs-preview-section .section-header h2 {
    color: #111111;
}
.programs-preview-section .section-header p {
    color: #1f2937;
}
.programs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.program-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbf7f0 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(176, 145, 107, .16);
    overflow: hidden;
    transition: all var(--transition);
    box-shadow: 0 18px 34px rgba(64, 49, 29, .08);
}
.program-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px rgba(64, 49, 29, .12);
    border-color: rgba(176, 145, 107, .26);
}

.program-card-top {
    padding: 1.75rem;
    background: linear-gradient(135deg, #f5ede2 0%, #ead8bf 100%);
    position: relative; overflow: hidden;
}
.program-card-top::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(23,52,81,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,52,81,.04) 1px, transparent 1px);
    background-size: 32px 32px;
}
.program-icon {
    width: 50px; height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1f5679 0%, #2eaac1 100%);
    box-shadow: 0 14px 28px rgba(34, 108, 140, .18);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
}
.program-icon svg { width: 24px; height: 24px; }
.program-card-top h3 { color: #173451; font-size: 1.05rem; position: relative; margin-bottom: .4rem; }
.program-tag {
    display: inline-block;
    background: rgba(255,255,255,.72);
    color: #1f5679;
    font-size: .75rem; font-weight: 600;
    padding: .2rem .75rem;
    border-radius: 50px;
    border: 1px solid rgba(176, 145, 107, .24);
    position: relative;
}
.program-body { padding: 1.5rem; }
.program-body p { font-size: .9rem; color: rgba(47, 67, 84, .78); line-height: 1.8; margin-bottom: 1rem; }
.program-meta {
    display: flex; flex-direction: column; gap: .4rem;
    font-size: .82rem; color: rgba(47, 67, 84, .74);
    border-top: 1px solid rgba(176, 145, 107, .18);
    padding-top: 1rem; margin-top: 1rem;
}
.program-meta span { display: flex; gap: .4rem; align-items: flex-start; }
.program-meta span strong { color: #173451; }
.program-meta-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #249ab3;
    flex-shrink: 0;
}

/* ─── Membership Types ───────────────────────────────── */
.membership-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2.5rem 0;
}
.membership-type-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    padding: 2rem;
    text-align: center;
    transition: all var(--transition);
    cursor: default;
}
.membership-type-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 30px var(--accent-glow);
    transform: translateY(-4px);
}
.membership-type-card.featured {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    color: white;
}
.type-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.type-icon svg { width: 34px; height: 34px; }
.membership-type-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.membership-type-card.featured h3 { color: white; }
.membership-type-card p { font-size: .88rem; color: var(--text-muted); }
.membership-type-card.featured p { color: rgba(255,255,255,.75); }

/* ─── Form Styles ────────────────────────────────────── */
.form-section {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.form-section h3 {
    font-size: 1.3rem; color: var(--navy);
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
    display: flex; align-items: center; gap: .6rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
    display: block;
    font-size: .88rem; font-weight: 600;
    color: var(--navy); margin-bottom: .45rem;
}
.form-group label .req { color: var(--accent); }
.form-control {
    width: 100%;
    padding: .75rem 1rem;
    font-family: 'Tajawal', 'Cairo', sans-serif;
    font-size: .92rem;
    color: var(--text);
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: white;
}
textarea.form-control { resize: vertical; min-height: 130px; }
select.form-control { cursor: pointer; }

.section-muted { background: var(--bg-section); }
.container-narrow { max-width: 780px; }
.container-form { max-width: 760px; }
.container-reading { max-width: 860px; }
.section-visual-centered { max-width: 680px; margin: 0 auto 2.5rem; }
.section-visual-spaced { margin-top: 2rem; }

.info-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    height: 100%;
}
.info-card:hover {
    transform: translateY(-4px);
    border-color: rgba(20,165,199,.16);
    box-shadow: var(--shadow);
}
.info-card-start { text-align: right; }
.info-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-glow), rgba(255,255,255,.78));
    border: 1px solid rgba(20,165,199,.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 1rem;
}
.info-card h4 {
    color: var(--navy);
    margin-bottom: .55rem;
}
.info-card p {
    color: var(--text-muted);
    font-size: .88rem;
    margin: 0;
    max-width: none;
}

.quote-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
}
.quote-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 35px 35px;
}
.quote-panel > * { position: relative; }
.quote-panel-dark {
    background: linear-gradient(135deg, var(--navy-mid), var(--accent-dark));
}
.quote-panel-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    background: rgba(20,165,199,.18);
    border: 1px solid rgba(20,165,199,.28);
    color: white;
}
.quote-panel-text {
    color: rgba(255,255,255,.88);
    font-size: 1.02rem;
    line-height: 1.95;
    text-align: center;
    margin: 0;
    max-width: none;
}

.form-title {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.form-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--accent-glow);
    border: 1px solid rgba(20,165,199,.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}
.form-submit {
    width: 100%;
    justify-content: center;
}

.contact-social-block {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.contact-social-note {
    color: rgba(255,255,255,.55);
    font-size: .82rem;
    margin-bottom: 1rem;
}
.contact-social-list {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}
.contact-social-link {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: .45rem .95rem;
    color: rgba(255,255,255,.72);
    font-size: .78rem;
    font-weight: 600;
    transition: all var(--transition);
}
.contact-social-link:hover {
    background: rgba(20,165,199,.18);
    border-color: rgba(20,165,199,.35);
    color: white;
}

.partner-card-heading {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.partner-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-glow);
    border: 1px solid rgba(20,165,199,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}

/* ─── Cards: Knowledge / Articles ───────────────────── */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.article-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.article-card-img {
    height: 180px;
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: rgba(255,255,255,.2);
    position: relative; overflow: hidden;
}
.article-card-img::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
}
.article-card-body { padding: 1.5rem; }
.article-card-cat {
    font-size: .75rem; font-weight: 700;
    color: var(--accent); text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: .6rem;
}
.article-card-body h3 {
    font-size: .98rem; color: var(--navy);
    margin-bottom: .6rem; line-height: 1.45;
}
.article-card-body p {
    font-size: .85rem; color: var(--text-muted);
    line-height: 1.6; margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    font-size: .8rem; color: var(--text-muted);
}

/* ─── Events ─────────────────────────────────────────── */
.events-list { display: flex; flex-direction: column; gap: 1.25rem; }
.event-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem 2rem;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}
.event-card:hover { box-shadow: var(--shadow); border-color: var(--accent); }
.event-date-box {
    background: var(--navy);
    color: white; text-align: center;
    border-radius: 10px;
    padding: .75rem 1rem;
    min-width: 64px;
}
.event-date-day   { font-size: 1.8rem; font-weight: 900; line-height: 1; }
.event-date-month { font-size: .75rem; font-weight: 600; color: var(--accent); }
.event-info h3    { font-size: 1rem; color: var(--navy); margin-bottom: .3rem; }
.event-info p     { font-size: .85rem; color: var(--text-muted); margin: 0; }
.event-info-line {
    display: flex;
    gap: .4rem;
    align-items: flex-start;
}
.event-meta {
    display: flex; flex-direction: column; gap: .3rem; align-items: flex-end;
}
.event-badge {
    display: inline-block;
    padding: .25rem .9rem; border-radius: 50px;
    font-size: .75rem; font-weight: 700;
}
.badge-upcoming { background: #dbeafe; color: #1d4ed8; }
.badge-ongoing  { background: #d1fae5; color: #065f46; }
.badge-completed { background: #f1f5f9; color: var(--text-muted); }
.badge-conference { background: var(--accent-glow); color: var(--accent); }
.badge-workshop   { background: var(--gold-light); color: #92400e; }
.badge-seminar    { background: #ede9fe; color: #5b21b6; }

/* ─── Reports ────────────────────────────────────────── */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.report-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1.75rem;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}
.report-card:hover { box-shadow: var(--shadow); border-color: var(--accent); transform: translateY(-3px); }
.report-icon {
    width: 48px; height: 48px;
    background: var(--accent-glow);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 1.1rem;
    color: var(--accent);
}
.report-cat { font-size: .75rem; font-weight: 700; color: var(--accent); margin-bottom: .5rem; }
.report-card h3 { font-size: .95rem; color: var(--navy); margin-bottom: .6rem; line-height: 1.4; }
.report-card p  { font-size: .85rem; color: var(--text-muted); margin-bottom: 1.1rem; line-height: 1.6; }
.reports-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.report-row {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1.75rem;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
}
.report-row:hover {
    box-shadow: var(--shadow);
    border-color: var(--accent);
    transform: translateY(-3px);
}
.report-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    flex-wrap: wrap;
}
.report-row-top time {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
}
.report-row h3 {
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--navy);
    margin: 0;
}
.report-row p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.9;
    color: var(--text-muted);
}
.report-actions {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(18,53,78,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    flex-wrap: wrap;
}
.final-cta {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) auto;
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: 32px;
    background: linear-gradient(135deg, #10304b 0%, #1a5979 58%, #4cc8df 100%);
    box-shadow: 0 28px 56px rgba(18,58,88,.18);
}
.final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: .32;
}
.final-cta::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    left: -60px;
    bottom: -130px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    filter: blur(12px);
}
.final-cta > * {
    position: relative;
    z-index: 1;
}
.final-cta .section-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.92);
    margin-bottom: 1rem;
}
.final-cta h2 {
    color: white;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.6;
    margin-bottom: .75rem;
    max-width: 24ch;
}
.final-cta p {
    margin: 0;
    max-width: 62ch;
    line-height: 1.9;
    color: rgba(255,255,255,.82);
}
.final-cta-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ─── Reports Page Redesign ──────────────────────────── */
.reports-page .reports-masthead {
    padding-top: clamp(.75rem, 1.4vw, 1.2rem);
    padding-bottom: 3rem;
}
.reports-page .reports-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
    gap: 1.6rem;
    align-items: stretch;
}
.reports-page .reports-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100%;
}
.reports-page .page-title {
    display: flex;
    flex-direction: column;
    gap: .3em;
    font-size: clamp(1.7rem, 2.85vw, 2.65rem);
    line-height: 1.12;
    margin-top: 1rem;
    max-width: none;
}
.reports-page .page-title-line {
    display: block;
}
.reports-page .page-intro {
    max-width: 62ch;
}
.reports-hero-actions {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.reports-hero-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: auto;
}
.reports-hero-metric {
    padding: 1.15rem 1.2rem;
    border-radius: 24px;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(18,53,78,.08);
    box-shadow: var(--shadow-sm);
}
.reports-hero-metric strong {
    display: block;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
    color: var(--navy);
    margin-bottom: .45rem;
}
.reports-hero-metric span {
    display: block;
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.8;
}
.reports-hero-panel {
    position: relative;
}
.reports-panel-shell {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem;
    border-radius: 32px;
    background: linear-gradient(145deg, #0d2840 0%, #154d69 52%, #3fc4df 100%);
    box-shadow: 0 30px 60px rgba(18,58,88,.2);
}
.reports-panel-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .26;
    pointer-events: none;
}
.reports-panel-shell > * {
    position: relative;
    z-index: 1;
}
.reports-panel-illustration {
    min-height: 210px;
    padding: 1rem;
    border-radius: 24px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.reports-panel-illustration img {
    width: 100%;
    max-width: 360px;
    max-height: 220px;
    object-fit: contain;
}
.reports-panel-card {
    padding: 1.2rem;
    border-radius: 24px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.reports-panel-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}
.reports-panel-card .tag-chip {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.18);
    color: white;
}
.reports-panel-card-date {
    color: rgba(255,255,255,.78);
    font-size: .82rem;
    font-weight: 700;
}
.reports-panel-card h2 {
    color: white;
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: .7rem;
}
.reports-panel-card p {
    margin: 0;
    color: rgba(255,255,255,.82);
    line-height: 1.9;
}
.reports-panel-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem;
}
.reports-panel-badges span {
    display: inline-flex;
    align-items: center;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.92);
    font-size: .75rem;
    font-weight: 700;
}
.reports-track-list {
    display: grid;
    gap: .8rem;
}
.reports-track-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 1rem;
    border-radius: 20px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}
.reports-track-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.12);
    color: white;
}
.reports-track-text strong {
    display: block;
    color: white;
    font-size: .95rem;
    margin-bottom: .2rem;
}
.reports-track-text span {
    display: block;
    color: rgba(255,255,255,.78);
    font-size: .82rem;
    line-height: 1.8;
}
.reports-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.reports-pillar-card {
    min-height: 100%;
    padding: 1.45rem;
    border-radius: 28px;
    background: white;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.reports-pillar-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: rgba(28,198,217,.22);
}
.reports-pillar-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-dark);
    background: var(--accent-glow);
    border: 1px solid rgba(28,198,217,.16);
    margin-bottom: 1rem;
}
.reports-pillar-card h3 {
    color: var(--navy);
    font-size: 1.08rem;
    margin-bottom: .55rem;
}
.reports-pillar-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.85;
}
.reports-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    gap: 1.5rem;
    align-items: end;
    margin-bottom: 1.6rem;
}
.reports-page #reports-library {
    scroll-margin-top: 110px;
}
.reports-section-head h2 {
    color: var(--navy);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.6;
    margin-top: .9rem;
}
.reports-section-head p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.9;
}
.reports-featured-card {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
    gap: 1.4rem;
    padding: 1.5rem;
    border-radius: 32px;
    background: white;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.reports-featured-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}
.reports-featured-top time {
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 700;
}
.reports-featured-copy h3 {
    color: var(--navy);
    font-size: clamp(1.45rem, 2.3vw, 2rem);
    line-height: 1.55;
    margin-bottom: .85rem;
}
.reports-featured-copy p {
    margin: 0;
    color: var(--text);
    font-size: .98rem;
    line-height: 1.95;
}
.reports-featured-points {
    display: grid;
    gap: .8rem;
    margin: 1.15rem 0 0;
}
.reports-featured-points li {
    position: relative;
    padding-right: 1.1rem;
    color: var(--text-muted);
    line-height: 1.85;
}
.reports-featured-points li::before {
    content: '';
    position: absolute;
    top: .82rem;
    right: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
.reports-featured-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.35rem;
}
.reports-featured-side {
    padding: 1.2rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(234,247,252,.92), rgba(255,255,255,.9));
    border: 1px solid rgba(18,53,78,.08);
}
.reports-featured-side-label {
    display: inline-block;
    color: var(--navy);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: .95rem;
}
.reports-featured-side-grid {
    display: grid;
    gap: .8rem;
}
.reports-featured-side-card {
    padding: 1rem;
    border-radius: 20px;
    background: white;
    border: 1px solid rgba(18,53,78,.08);
}
.reports-featured-side-card strong {
    display: block;
    color: var(--navy);
    font-size: 1.15rem;
    font-weight: 900;
    margin-bottom: .35rem;
}
.reports-featured-side-card span {
    display: block;
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.8;
}
.reports-library-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.35rem;
}
.reports-library-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: .95rem;
    padding: 1.35rem;
    border-radius: 28px;
    background: white;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.reports-library-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: rgba(28,198,217,.22);
}
.reports-library-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .85rem;
}
.reports-card-index {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--navy-mid), var(--accent-dark));
    color: white;
    font-size: .94rem;
    font-weight: 900;
}
.reports-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
}
.reports-card-meta time {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 700;
}
.reports-library-card h3 {
    color: var(--navy);
    font-size: 1.1rem;
    line-height: 1.65;
    margin: 0;
}
.reports-library-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.9;
}
.reports-card-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(18,53,78,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
}
.reports-card-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--accent-dark);
    font-size: .85rem;
    font-weight: 800;
}
.reports-card-status svg {
    width: 16px;
    height: 16px;
}
.reports-card-status.muted {
    color: var(--text-muted);
}
.reports-contribution-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1.75rem, 3vw, 2.4rem);
    border-radius: 32px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.48), transparent 24%),
        radial-gradient(circle at bottom left, rgba(199,167,125,.16), transparent 24%),
        linear-gradient(180deg, rgba(248,241,231,.98), rgba(234,220,199,.95));
    box-shadow: 0 24px 48px rgba(70,53,31,.12);
}
.reports-contribution-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(26,45,62,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,45,62,.04) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: .14;
}
.reports-contribution-shell::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    left: -60px;
    top: -120px;
    border-radius: 50%;
    background: rgba(207,177,137,.14);
    filter: blur(16px);
}
.reports-contribution-shell > * {
    position: relative;
    z-index: 1;
}
.reports-contribution-copy .section-kicker {
    background: rgba(255,255,255,.4);
    border-color: rgba(167,138,103,.18);
    color: var(--navy);
}
.reports-contribution-copy h2 {
    color: var(--navy);
    font-size: clamp(1.55rem, 2.25vw, 2rem);
    line-height: 1.55;
    margin: 1rem 0 .75rem;
    max-width: 22ch;
}
.reports-contribution-copy p {
    margin: 0;
    max-width: 62ch;
    color: rgba(47,67,84,.82);
    line-height: 1.95;
}
.reports-contribution-points {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.15rem;
}
.reports-contribution-points span {
    display: inline-flex;
    align-items: center;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: rgba(255,255,255,.4);
    border: 1px solid rgba(167,138,103,.16);
    color: var(--navy);
    font-size: .78rem;
    font-weight: 700;
}
.reports-contribution-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ─── Institutional Dark Surface Overrides ──────────── */
.section-muted,
.section-block.alt,
.reports-featured-side {
    background: linear-gradient(180deg, rgba(10,26,41,.96), rgba(6,18,29,.98));
}

.page-fact-card,
.filter-shell,
.surface-card,
.story-card,
.media-card,
.info-card,
.article-card,
.event-card,
.report-card,
.report-row,
.partner-type-card,
.program-card,
.membership-type-card,
.value-prop-card,
.reports-pillar-card,
.reports-featured-card,
.reports-featured-side-card,
.reports-library-card {
    background: linear-gradient(180deg, rgba(16,33,49,.96), rgba(11,24,37,.98));
    border-color: rgba(143,228,239,.12);
    box-shadow: 0 24px 50px rgba(0,0,0,.24);
}

.filter-chip,
.form-control,
.btn-outline,
.btn-outline-dark {
    background-color: rgba(255,255,255,.42);
}

.filter-chip,
.reports-hero-metric,
.page-fact-card,
.reports-featured-side-card {
    border-color: rgba(167,138,103,.16);
}

.filter-chip,
.article-card-body h3,
.article-feature h3,
.story-card h3,
.media-card h3,
.form-panel h3,
.agenda-card h3,
.info-card h4,
.event-info h3,
.report-card h3,
.report-row h3,
.partner-type-card h3,
.value-prop-card h3,
.reports-pillar-card h3,
.reports-featured-copy h3,
.reports-library-card h3,
.reports-featured-side-label,
.reports-featured-side-card strong,
.page-fact-card strong,
.reports-hero-metric strong {
    color: #F2F8FC;
}

.story-card p,
.media-card p,
.form-panel p,
.agenda-card p,
.article-card-body p,
.article-feature p,
.info-card p,
.event-info p,
.report-card p,
.report-row p,
.partner-type-card ul li,
.value-prop-card p,
.reports-pillar-card p,
.reports-featured-copy p,
.reports-library-card p,
.reports-featured-points li,
.reports-featured-side-card span,
.page-fact-card span,
.reports-hero-metric span {
    color: var(--text-muted);
}

.filter-shell,
.reports-featured-side,
.reports-featured-card,
.reports-library-card,
.report-row,
.article-card,
.event-card,
.report-card,
.partner-type-card,
.program-card,
.membership-type-card,
.value-prop-card,
.reports-pillar-card {
    border-color: rgba(143,228,239,.14);
}

.form-control {
    color: var(--navy);
    border-color: rgba(167,138,103,.16);
}

.form-control:focus {
    background: rgba(255,255,255,.85);
}

.filter-chip {
    color: #EAF6FB;
}

.filter-chip:hover,
.filter-chip.active {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    color: var(--white);
}

.reports-hero-metric {
    background: linear-gradient(180deg, rgba(248,241,231,.94), rgba(236,223,204,.96));
    border: 1px solid rgba(167,138,103,.16);
    box-shadow: 0 16px 30px rgba(70,53,31,.1);
}

.hero-stage-route,
.hero-stage-stat,
.about-floating-card {
    background: rgba(9,24,37,.68);
    border-color: rgba(143,228,239,.14);
    box-shadow: 0 22px 46px rgba(0,0,0,.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hero-stage-route-body strong,
.hero-stage-stat .stat-num,
.hero-stage-title,
.hero-stage-desc,
.hero-stage-stat-label,
.about-floating-card {
    color: var(--white);
}

.hero-stage-route-body small,
.hero-stage-route-body span {
    color: rgba(231,241,248,.74);
}

.section-dark-shell {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.4), transparent 22%),
        radial-gradient(circle at bottom left, rgba(199,167,125,.16), transparent 24%),
        linear-gradient(180deg, rgba(248,241,231,.98), rgba(234,220,199,.95));
}
.reports-contribution-actions .btn-outline-dark {
    background: rgba(255,255,255,.42);
    border-color: rgba(167,138,103,.2);
    color: var(--navy);
}
.reports-contribution-actions .btn-outline-dark:hover {
    background: rgba(255,255,255,.78);
    color: var(--navy);
    border-color: rgba(167,138,103,.28);
}

/* ─── Content Pages Hero Pattern ────────────────────── */
.content-page .content-page-masthead {
    padding-top: clamp(.75rem, 1.4vw, 1.2rem);
    padding-bottom: 3rem;
}
.content-page .content-page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: 1.6rem;
    align-items: stretch;
}
.content-page .content-page-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100%;
}
.content-page .page-title {
    display: flex;
    flex-direction: column;
    gap: .28em;
    font-size: clamp(1.75rem, 2.95vw, 2.75rem);
    line-height: 1.12;
    margin-top: 1rem;
    max-width: none;
}
.content-page .page-title-line {
    display: block;
}
.content-page .page-intro {
    max-width: 62ch;
}
.content-page-hero-actions {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: 1.45rem;
}
.content-page-hero-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: auto;
}
.content-page-hero-metric {
    padding: 1.15rem 1.2rem;
    border-radius: 24px;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(18,53,78,.08);
    box-shadow: var(--shadow-sm);
}
.content-page-hero-metric strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
    color: var(--navy);
    margin-bottom: .45rem;
}
.content-page-hero-metric span {
    display: block;
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.8;
}
.content-page-hero-panel {
    position: relative;
    min-height: 100%;
}
.content-page-panel-shell {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem;
    min-height: 100%;
    border-radius: 32px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.48), transparent 24%),
        radial-gradient(circle at bottom left, rgba(199,167,125,.16), transparent 24%),
        linear-gradient(180deg, rgba(248,241,231,.98), rgba(234,220,199,.95));
    box-shadow: 0 24px 48px rgba(70,53,31,.12);
}
.content-page-panel-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(26,45,62,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,45,62,.04) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .14;
    pointer-events: none;
}
.content-page-panel-shell > * {
    position: relative;
    z-index: 1;
}
.content-page-panel-illustration {
    min-height: 220px;
    padding: 1rem;
    border-radius: 24px;
    background: rgba(255,255,255,.42);
    border: 1px solid rgba(167,138,103,.16);
    display: flex;
    align-items: center;
    justify-content: center;
}
.content-page-panel-illustration img {
    width: 100%;
    max-width: 360px;
    max-height: 220px;
    object-fit: contain;
}
.content-page-track-list {
    display: grid;
    gap: .8rem;
    margin-top: auto;
}
.content-page-track-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 1rem;
    border-radius: 20px;
    background: rgba(255,255,255,.42);
    border: 1px solid rgba(167,138,103,.16);
}
.content-page-track-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(224,235,242,.82);
    color: var(--navy);
}
.content-page-track-text strong {
    display: block;
    color: var(--navy);
    font-size: .95rem;
    margin-bottom: .2rem;
}
.content-page-track-text span {
    display: block;
    color: rgba(47,67,84,.76);
    font-size: .82rem;
    line-height: 1.8;
}
.content-page #knowledge-library,
.content-page #events-agenda,
.content-page #media-library {
    scroll-margin-top: 110px;
}

/* ─── Contact Page ───────────────────────────────────── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2.5rem;
    align-items: start;
}
.contact-info-card {
    background: linear-gradient(135deg, var(--navy-mid) 0%, var(--accent-dark) 100%);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    color: white;
    position: relative; overflow: hidden;
}
.contact-info-card::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 32px 32px;
}
.contact-info-card > * { position: relative; }
.contact-info-card h3 { color: white; font-size: 1.3rem; margin-bottom: 1.5rem; }
.contact-item {
    display: flex; gap: .85rem; align-items: flex-start;
    margin-bottom: 1.25rem;
}
.contact-item-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    background: rgba(22,184,217,.10);
    border: 1px solid rgba(22,184,217,.18);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.contact-item-icon svg { width: 18px; height: 18px; }
.contact-item-text span {
    display: block; font-size: .78rem;
    color: rgba(255,255,255,.55); margin-bottom: .2rem;
}
.contact-item-text a, .contact-item-text p {
    color: white; font-weight: 600;
    font-size: .9rem; margin: 0;
}
.contact-item-text a:hover { color: var(--accent); }

/* ─── Page Hero (inner pages) ────────────────────────── */
.page-hero {
    background: linear-gradient(135deg, var(--navy-mid) 0%, #4FC8E2 100%);
    padding: 5rem 0 3.5rem;
    text-align: center;
    position: relative; overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 50px 50px;
}
.page-hero > * { position: relative; }
.page-hero h1  { color: white; margin-bottom: .75rem; }
.page-hero p   { color: rgba(255,255,255,.72); max-width: 600px; margin: 0 auto; font-size: 1.05rem; }
.breadcrumb {
    display: flex; gap: .5rem; align-items: center;
    justify-content: center;
    font-size: .82rem;
    color: rgba(255,255,255,.55);
    margin-bottom: 1.25rem;
}
.breadcrumb a:hover { color: var(--accent); }

/* ─── CTA Sections ───────────────────────────────────── */
.cta-section {
    background: linear-gradient(135deg, var(--navy-mid) 0%, #58D3E8 100%);
    padding: 5rem 0;
    text-align: center;

.vision-page {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.42), transparent 22%),
        radial-gradient(circle at bottom left, rgba(199,167,125,.16), transparent 24%),
        linear-gradient(180deg, #fffdfa 0%, #f5ecdf 100%);
}
.vision-page .section-header h2 {
    color: #173451;
}
.vision-page .section-header p {
    color: rgba(47,67,84,.8);
}
.vision-page-hero {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.56), transparent 24%),
        linear-gradient(180deg, #f6eee2 0%, #ead9c0 100%);
}
.vision-page-hero::before {
    background-image:
        linear-gradient(rgba(23,52,81,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,52,81,.04) 1px, transparent 1px);
}
.vision-page-hero h1 {
    color: #173451;
}
.vision-page-hero p {
    color: rgba(47,67,84,.8);
    max-width: 760px;
}
.vision-page-hero .breadcrumb {
    color: rgba(47,67,84,.6);
}
.vision-page-hero .breadcrumb a:hover {
    color: #1f8eab;
}

.vision-intro-section {
    padding-top: 4rem;
}
.vision-page .vision-grid {
    align-items: stretch;
}
.vision-page .vision-card {
    border-radius: 32px;
    border: 1px solid rgba(143,228,239,.12);
    box-shadow: 0 22px 42px rgba(21, 45, 66, .14);
}
.vision-page .vision-card-dark {
    background: linear-gradient(135deg, #173451 0%, #2397b4 100%);
}
.vision-page .vision-card-dark::before {
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 40px 40px;
}
.vision-page .vision-card-head {
    justify-content: space-between;
}
.vision-page .vision-card-label {
    color: #9feaf1;
    letter-spacing: 0;
    font-size: .95rem;
}
.vision-page .vision-card-dark h3 {
    color: #ffffff;
    font-size: clamp(1.45rem, 2.2vw, 2.1rem);
    line-height: 1.55;
    margin-bottom: 0;
}

    position: relative; overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 50px 50px;
}
.cta-section > .container { position: relative; }
.cta-section h2  { color: white; margin-bottom: 1rem; }
.cta-section p   { color: rgba(255,255,255,.72); max-width: 560px; margin: 0 auto 2.5rem; }
.cta-actions {
    display: flex; gap: 1rem;
    justify-content: center; flex-wrap: wrap;
}

/* ─── Vision Values ──────────────────────────────────── */
.vision-values-section {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.45), transparent 24%),
        radial-gradient(circle at bottom right, rgba(199,167,125,.16), transparent 24%),
        linear-gradient(180deg, #fbf6ee 0%, #f2e8d9 100%);
    position: relative;
    overflow: hidden;
}
.vision-values-header {
    margin-bottom: 2.75rem;
}
.vision-values-header h2 {
    color: #173451;
    font-size: clamp(1.72rem, 2.8vw, 2.55rem);
    margin-bottom: 0;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.value-card {
    background: linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid rgba(176, 145, 107, .16);
    text-align: center;
    transition: all var(--transition);
    box-shadow: 0 16px 32px rgba(64, 49, 29, .08);
    position: relative;
    overflow: hidden;
}
.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    opacity: .9;
}
.value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 38px rgba(64, 49, 29, .12);
    border-color: rgba(176, 145, 107, .26);
}
.value-icon {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--navy-light));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 1.25rem;
    color: white;
    box-shadow: 0 12px 28px rgba(22,184,217,.18);
}
.value-icon svg { width: 28px; height: 28px; }
.value-card h3 {
    font-size: 1.06rem;
    color: var(--navy);
    margin-bottom: .7rem;
}
.value-card p  {
    font-size: .92rem;
    color: rgba(47, 67, 84, .82);
    margin: 0;
    line-height: 1.82;
}

.vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.vision-card {
    border-radius: var(--radius-lg);
    padding: 2.5rem;
}
.vision-card-dark {
    background: linear-gradient(135deg, var(--navy-mid), var(--accent-dark));
    position: relative;
    overflow: hidden;
}
.vision-card-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 35px 35px;
}
.vision-card-dark > * { position: relative; }
.vision-card-light {
    background: white;
    border: 1px solid rgba(20,165,199,.22);
    box-shadow: var(--shadow-sm);
}
.vision-card-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.vision-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vision-card-dark .vision-card-icon {
    background: rgba(20,165,199,.18);
    border: 1px solid rgba(20,165,199,.3);
    color: white;
}
.vision-card-light .vision-card-icon {
    background: var(--accent-glow);
    border: 1px solid rgba(20,165,199,.22);
    color: var(--accent);
}
.vision-card-label {
    color: var(--accent);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.vision-card-dark h3 {
    color: white;
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 1rem;
.vision-principles-section {
    background: linear-gradient(180deg, #fffdfa 0%, #f4ecdf 100%);
}
.vision-principles-section .section-header {
    margin-bottom: 2.25rem;
}
.vision-principles-section .section-header h2 {
    color: #173451;
    font-size: clamp(1.72rem, 2.8vw, 2.55rem);
}
}
    background: linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
    border: 1px solid rgba(176, 145, 107, .16);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.vision-card-dark p {
    box-shadow: 0 16px 32px rgba(64, 49, 29, .08);
    font-size: .9rem;
    line-height: 1.8;
    margin: 0;
    border-color: rgba(176, 145, 107, .28);
    box-shadow: 0 20px 38px rgba(64, 49, 29, .12);
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.8;
    margin: 0;
    color: #249ab3;
    opacity: .24;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
    color: #173451;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: rgba(47,67,84,.76);
    display: flex;

.vision-page-cta {
    background: linear-gradient(135deg, #e7d9c6 0%, #d7c0a0 100%);
}
.vision-page-cta::before {
    background-image:
        linear-gradient(rgba(23,52,81,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,52,81,.05) 1px, transparent 1px);
}
.vision-page-cta h2 {
    color: #173451;
}
.vision-page-cta p {
    color: rgba(47,67,84,.82);
}
.vision-page-cta .btn-accent {
    background: linear-gradient(135deg, #173451, #2a7898);
    color: #fff;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 14px 28px rgba(22,59,87,.18);
}
.vision-page-cta .btn-outline {
    background: rgba(255,255,255,.68);
    color: #173451;
    border-color: rgba(176,145,107,.28);
}
.vision-page-cta .btn-outline:hover {
    background: #ffffff;
    color: #173451;
    border-color: rgba(36,154,179,.26);
}

.programs-page {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.4), transparent 24%),
        radial-gradient(circle at bottom left, rgba(199,167,125,.16), transparent 24%),
        linear-gradient(180deg, #fffdfa 0%, #f4ecdf 100%);
}
.programs-page-hero {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.55), transparent 22%),
        linear-gradient(180deg, #f6eee2 0%, #ead9c0 100%);
}
.programs-page-hero::before {
    background-image:
        linear-gradient(rgba(23,52,81,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,52,81,.04) 1px, transparent 1px);
}
.programs-page-hero h1 {
    color: #173451;
}
.programs-page-hero p {
    color: rgba(47,67,84,.8);
    max-width: 760px;
}
.programs-page-hero .breadcrumb {
    color: rgba(47,67,84,.6);
}
.programs-page-hero .breadcrumb a:hover {
    color: #1f8eab;
}
.programs-page-kicker {
    background: linear-gradient(180deg, #ffffff, #f6efe5);
    border: 1px solid rgba(176, 145, 107, .28);
    color: #21425d;
    font-size: .92rem;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(82, 62, 36, .08), inset 0 1px 0 rgba(255,255,255,.92);
}
.programs-hero-panel {
    background: linear-gradient(135deg, #173451 0%, #2397b4 100%);
    border-radius: 32px;
    box-shadow: 0 24px 44px rgba(21,45,66,.16);
    position: relative;
    overflow: hidden;
}
.programs-hero-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 36px 36px;
}
.programs-hero-panel .card-body {
    position: relative;
}
.programs-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}
.programs-hero-stat-item {
    text-align: center;
}
.programs-hero-stat-item strong {
    display: block;
    color: #fff;
    font-size: 1.28rem;
    font-weight: 800;
    margin-bottom: .25rem;
}
.programs-hero-stat-item span {
    color: rgba(255,255,255,.74);
    font-size: .82rem;
    line-height: 1.6;
}

.programs-bootstrap-section {
    padding-top: 4rem;
}
.programs-section-title {
    color: #173451;
    font-size: clamp(1.72rem, 2.8vw, 2.55rem);
    font-weight: 800;
    margin-bottom: .85rem;
}
.programs-section-copy {
    color: rgba(47,67,84,.8);
    font-size: 1.02rem;
    line-height: 1.9;
    max-width: 760px;
    margin: 0 auto;
}
.programs-bt-card {
    background:
        radial-gradient(circle at top right, rgba(92, 205, 255, .16), transparent 30%),
        linear-gradient(180deg, rgba(46, 100, 141, .96) 0%, rgba(59, 117, 157, .94) 100%);
    border: 1px solid rgba(111, 197, 237, .16);
    box-shadow: 0 22px 40px rgba(17, 49, 74, .16);
    overflow: hidden;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.programs-bt-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid rgba(96, 205, 244, .72);
    pointer-events: none;
}
.programs-bt-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 48px rgba(17, 49, 74, .2);
    border-color: rgba(111, 197, 237, .24);
}
.programs-bt-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.programs-bt-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(61, 135, 186, .78) 0%, rgba(38, 120, 165, .98) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 28px rgba(17, 49, 74, .16);
    flex-shrink: 0;
}
.programs-bt-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 40px;
    padding: 0 .95rem;
    border-radius: 999px;
    background: rgba(108, 197, 239, .14);
    color: #b1efff;
    font-family: var(--font-latin);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .06em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.programs-bt-badge {
    background: rgba(96, 187, 232, .16);
    color: #bdefff;
    border: 1px solid rgba(96, 187, 232, .18);
    font-size: .8rem;
    font-weight: 700;
    padding: .7rem 1.15rem;
}
.programs-bt-title {
    color: #f8fcff;
    font-size: clamp(1.2rem, 1.6vw, 1.42rem);
    font-weight: 800;
    line-height: 1.45;
}
.programs-bt-desc {
    color: rgba(224, 240, 248, .86);
    font-size: 1rem;
    line-height: 1.95;
}
.programs-bt-copy {
    text-align: right;
}
.programs-bt-footer {
    display: flex;
    align-items: center;
    gap: .9rem;
}
.programs-bt-footer-line {
    flex: 1;
    height: 1px;
    background: rgba(124, 207, 243, .22);
}

.programs-page-cta {
    background: transparent;
    padding-top: 2rem;
    padding-bottom: 2.25rem;
}
.programs-page-cta::before {
    display: none;
}
.programs-page-cta .container {
    display: flex;
    justify-content: center;
}
.programs-cta-card {
    background: linear-gradient(135deg, #e5f1f8 0%, #c9e2f2 100%);
    box-shadow: 0 24px 44px rgba(64,49,29,.12);
    width: min(100%, 1220px);
    margin-inline: auto;
}
.programs-page-cta h2 {
    color: #000 !important;
    margin-bottom: 1rem;
}
.programs-page-cta p {
    color: #000 !important;
    max-width: none;
    margin: 0;
}
.programs-page-cta .btn-primary {
    background: linear-gradient(135deg, #173451, #2a7898);
    color: #fff;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 14px 28px rgba(22,59,87,.18);
}
.programs-page-cta .btn-outline {
    background: rgba(255,255,255,.68);
    color: #173451;
    border-color: rgba(176,145,107,.28);
}
.programs-page-cta .btn-outline:hover {
    background: #ffffff;
    color: #173451;
    border-color: rgba(36,154,179,.26);
}

.membership-page {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.52), transparent 24%),
        radial-gradient(circle at bottom right, rgba(88, 184, 223, .12), transparent 26%),
        linear-gradient(180deg, #f7fbfe 0%, #edf4f9 100%);
}
.membership-page-hero {
    background:
        radial-gradient(circle at top right, rgba(165, 228, 255, .16), transparent 24%),
        radial-gradient(circle at bottom left, rgba(255,255,255,.08), transparent 28%),
        linear-gradient(135deg, #0d2338 0%, #124465 54%, #1c7ea3 100%);
}
.membership-page-hero::before {
    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
}
.membership-page-hero h1 {
    color: #f6fbff;
}
.membership-page-hero p {
    color: rgba(223, 239, 248, .84);
    max-width: 760px;
}
.membership-page-hero .breadcrumb {
    color: rgba(218, 236, 247, .66);
}
.membership-page-hero .breadcrumb a:hover {
    color: #c5f0ff;
}
.membership-page-kicker {
    background: rgba(133, 214, 255, .12);
    border: 1px solid rgba(133, 214, 255, .2);
    color: #eefaff;
    font-size: .92rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.membership-hero-panel {
    background: rgba(7, 24, 41, .28);
    border: 1px solid rgba(165, 228, 255, .12);
    box-shadow: 0 24px 44px rgba(6, 19, 31, .22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.membership-hero-visual {
    padding: 1rem;
    border-radius: 28px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(165, 228, 255, .12);
}
.membership-hero-visual img {
    width: 100%;
    height: auto;
    display: block;
}
.membership-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}
.membership-hero-points span {
    display: inline-flex;
    align-items: center;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: rgba(133, 214, 255, .1);
    border: 1px solid rgba(133, 214, 255, .14);
    color: #f0fbff;
    font-size: .82rem;
    font-weight: 700;
}

.membership-why-section {
    padding-top: 4rem;
}
.membership-section-title {
    color: #123451;
    font-size: clamp(1.76rem, 2.9vw, 2.7rem);
    font-weight: 800;
    margin-bottom: .9rem;
}
.membership-section-copy {
    color: rgba(48, 71, 91, .82);
    font-size: 1.02rem;
    line-height: 1.92;
    max-width: 760px;
    margin: 0 auto 1rem;
}
.membership-why-section .membership-page-kicker,
.membership-types-section .membership-page-kicker,
.membership-form-wrap .membership-page-kicker {
    background: linear-gradient(180deg, #ffffff, #eef7fd);
    border: 1px solid rgba(88, 152, 191, .18);
    color: #1b5678;
    box-shadow: 0 12px 24px rgba(26, 71, 103, .08), inset 0 1px 0 rgba(255,255,255,.94);
}
.membership-benefit-card {
    background: linear-gradient(180deg, #ffffff 0%, #f4faff 100%);
    border: 1px solid rgba(79, 135, 171, .14);
    box-shadow: 0 18px 34px rgba(17, 49, 74, .08);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.membership-benefit-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 3px solid rgba(28, 126, 163, .78);
    pointer-events: none;
}
.membership-benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 42px rgba(17, 49, 74, .12);
    border-color: rgba(79, 135, 171, .22);
}
.membership-benefit-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, #123c59 0%, #1d86a8 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 28px rgba(18, 60, 89, .18);
}
.membership-benefit-title {
    color: #123451;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.72;
}

.membership-types-section {
    background: linear-gradient(180deg, #edf5fb 0%, #e2eef7 100%);
}
.membership-type-bt-card {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border: 1px solid rgba(79, 135, 171, .14);
    box-shadow: 0 18px 34px rgba(17, 49, 74, .08);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.membership-type-bt-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 42px rgba(17, 49, 74, .12);
    border-color: rgba(79, 135, 171, .22);
}
.membership-type-bt-card.featured {
    background: linear-gradient(135deg, #102b43 0%, #16567b 56%, #29a0c1 100%);
    border-color: rgba(165, 228, 255, .14);
}
.membership-type-bt-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #d8eef9, #a8d8eb);
    color: #12496b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.membership-type-bt-card.featured .membership-type-bt-icon {
    background: rgba(255,255,255,.14);
    color: #f6fbff;
    border: 1px solid rgba(255,255,255,.14);
}
.membership-type-featured {
    background: rgba(255,255,255,.14);
    color: #f3fbff;
    border: 1px solid rgba(255,255,255,.16);
    font-size: .76rem;
    font-weight: 800;
    padding: .45rem .8rem;
}
.membership-type-bt-title {
    color: #123451;
    font-size: 1.16rem;
    font-weight: 800;
    line-height: 1.62;
    margin-bottom: .8rem;
}
.membership-type-bt-desc {
    color: rgba(48, 71, 91, .78);
    font-size: .94rem;
    line-height: 1.85;
}
.membership-type-bt-card.featured .membership-type-bt-title,
.membership-type-bt-card.featured .membership-type-bt-desc {
    color: #f4fbff;
}

.membership-form-wrap {
    background: linear-gradient(180deg, #f9fcff 0%, #edf4f9 100%);
}
.membership-form-copy {
    top: 110px;
}
.membership-form-note {
    margin-top: 1.5rem;
    padding: 1.25rem 1.3rem;
    border-radius: 24px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(79, 135, 171, .14);
    box-shadow: 0 12px 24px rgba(17, 49, 74, .06);
}
.membership-form-note strong {
    display: block;
    color: #1a587a;
    margin-bottom: .45rem;
}
.membership-form-note p {
    color: rgba(48, 71, 91, .78);
    line-height: 1.82;
}
.membership-form-card {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border: 1px solid rgba(79, 135, 171, .14);
    box-shadow: 0 24px 42px rgba(17, 49, 74, .1);
}
.membership-form-title {
    color: #123451;
    font-size: 1.22rem;
    font-weight: 800;
}
.membership-form-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #123c59 0%, #1d86a8 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.membership-page .form-label {
    color: #294a63;
    font-weight: 700;
}
.membership-page .form-control {
    border-radius: 18px;
    border: 1px solid rgba(79, 135, 171, .18);
    background: #fbfdff;
    color: #123451;
    padding: .88rem 1rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.membership-page .form-control:focus {
    border-color: rgba(29, 134, 168, .4);
    box-shadow: 0 0 0 .2rem rgba(29, 134, 168, .12);
}
.membership-page .btn-primary {
    background: linear-gradient(135deg, #123c59 0%, #1d86a8 100%);
    color: #fff;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 14px 28px rgba(18, 60, 89, .18);
}
.membership-page .btn-outline {
    background: rgba(255,255,255,.78);
    color: #123c59;
    border-color: rgba(79, 135, 171, .2);
}
.membership-page .btn-outline:hover {
    background: #ffffff;
    color: #123c59;
    border-color: rgba(29, 134, 168, .28);
}

.partnerships-page {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.42), transparent 22%),
        radial-gradient(circle at bottom left, rgba(173, 147, 110, .15), transparent 24%),
        linear-gradient(180deg, #f7f5ef 0%, #efe7da 100%);
}
.partnerships-page-hero {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.16), transparent 24%),
        linear-gradient(135deg, #173451 0%, #1f6d76 54%, #35a9a2 100%);
}
.partnerships-page-hero::before {
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}
.partnerships-page-hero h1 {
    color: #f6fbfb;
}
.partnerships-page-hero p {
    color: rgba(245,252,252,.82);
    max-width: 760px;
}
.partnerships-page-hero .breadcrumb {
    color: rgba(227,247,247,.62);
}
.partnerships-page-hero .breadcrumb a:hover {
    color: #d8fbef;
}
.partnerships-page-kicker {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    color: #effcf9;
    font-size: .92rem;
    font-weight: 800;
}
.partnerships-hero-panel {
    background: rgba(9, 23, 35, .22);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 24px 46px rgba(18,52,81,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.partnerships-hero-map {
    padding: 1rem;
    border-radius: 28px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}
.partnerships-hero-map img {
    width: 100%;
    height: auto;
    display: block;
}
.partnerships-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}
.partnerships-hero-points span {
    display: inline-flex;
    align-items: center;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    color: #eefcf8;
    font-size: .82rem;
    font-weight: 700;
}

.partnerships-philosophy-section {
    padding-top: 4rem;
}
.partnerships-page .partnerships-page-kicker {
    background: linear-gradient(180deg, #ffffff, #f3eee2);
    border: 1px solid rgba(138, 122, 94, .22);
    color: #2f5a63;
    box-shadow: 0 12px 24px rgba(54, 47, 35, .07), inset 0 1px 0 rgba(255,255,255,.9);
}
.partnerships-section-title {
    color: #173451;
    font-size: clamp(1.74rem, 2.8vw, 2.7rem);
    font-weight: 800;
    margin-bottom: .9rem;
}
.partnerships-section-copy {
    color: rgba(47,67,84,.82);
    font-size: 1.02rem;
    line-height: 1.92;
    max-width: 760px;
    margin: 0 auto 1rem;
}
.partnerships-section-copy-wrap {
    padding: 2rem 0;
}
.partnerships-quote-card {
    background: linear-gradient(135deg, #173451 0%, #1f6d76 100%);
    box-shadow: 0 24px 44px rgba(18,52,81,.14);
    color: #fff;
}
.partnerships-quote-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.partnerships-quote-text {
    color: rgba(255,255,255,.88);
    font-size: 1.08rem;
    line-height: 2;
}

.partnerships-partners-section {
    background: linear-gradient(180deg, #f3ece1 0%, #ece2d3 100%);
}
.partnerships-target-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbf8f2 100%);
    border: 1px solid rgba(138,122,94,.14);
    box-shadow: 0 18px 34px rgba(54,47,35,.08);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.partnerships-target-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 42px rgba(54,47,35,.12);
    border-color: rgba(138,122,94,.22);
}
.partnerships-target-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1f6d76 0%, #35a9a2 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 28px rgba(30,108,117,.16);
}
.partnerships-target-title {
    color: #173451;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.72;
}

.partnerships-fields-section {
    background: linear-gradient(135deg, #122538 0%, #173451 48%, #1f6d76 100%);
    position: relative;
    overflow: hidden;
}
.partnerships-fields-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}
.partnerships-fields-section .container {
    position: relative;
}
.partnerships-section-copy-light {
    color: rgba(237,249,248,.76);
}
.partnerships-field-pill {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 100%;
    padding: 1.05rem 1.15rem;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #f5fbfb;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.partnerships-field-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(255,255,255,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9cebe2;
    flex-shrink: 0;
}

.partnerships-services-section {
    background: linear-gradient(180deg, #fbf7f0 0%, #f1e8db 100%);
}
.partnerships-service-card {
    background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);
    border: 1px solid rgba(138,122,94,.14);
    box-shadow: 0 18px 34px rgba(54,47,35,.08);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.partnerships-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 42px rgba(54,47,35,.12);
    border-color: rgba(138,122,94,.22);
}
.partnerships-service-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #dcb46c 0%, #b68843 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 28px rgba(182,136,67,.16);
}
.partnerships-service-title {
    color: #173451;
    font-size: 1.16rem;
    font-weight: 800;
    line-height: 1.62;
    margin-bottom: .85rem;
}
.partnerships-service-desc {
    color: rgba(47,67,84,.8);
    font-size: .95rem;
    line-height: 1.9;
}

.partnerships-form-section {
    background: linear-gradient(180deg, #f2ebe0 0%, #ebe1d2 100%);
}
.partnerships-form-copy {
    top: 110px;
}
.partnerships-form-note {
    margin-top: 1.5rem;
    padding: 1.25rem 1.3rem;
    border-radius: 24px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(138,122,94,.16);
    box-shadow: 0 12px 24px rgba(54,47,35,.06);
}
.partnerships-form-note strong {
    display: block;
    color: #2f5a63;
    margin-bottom: .45rem;
}
.partnerships-form-note p {
    color: rgba(47,67,84,.8);
    line-height: 1.82;
}
.partnerships-form-card {
    background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);
    border: 1px solid rgba(138,122,94,.14);
    box-shadow: 0 24px 42px rgba(54,47,35,.1);
}
.partnerships-form-title {
    color: #173451;
    font-size: 1.22rem;
    font-weight: 800;
}
.partnerships-form-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #173451 0%, #1f6d76 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.partnerships-page .form-label {
    color: #355463;
    font-weight: 700;
}
.partnerships-page .form-control {
    border-radius: 18px;
    border: 1px solid rgba(138,122,94,.18);
    background: #fffdf9;
    color: #173451;
    padding: .88rem 1rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
.partnerships-page .form-control:focus {
    border-color: rgba(31,109,118,.36);
    box-shadow: 0 0 0 .2rem rgba(31,109,118,.12);
}
.partnerships-page .btn-primary {
    background: linear-gradient(135deg, #173451 0%, #1f6d76 100%);
    color: #fff;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 14px 28px rgba(18,52,81,.18);
}
.partnerships-page .btn-outline {
    background: rgba(255,255,255,.68);
    color: #173451;
    border-color: rgba(138,122,94,.24);
}
.partnerships-page .btn-outline:hover {
    background: #ffffff;
    color: #173451;
    border-color: rgba(31,109,118,.3);
}

.vision-bootstrap-page {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.46), transparent 22%),
        radial-gradient(circle at bottom left, rgba(199,167,125,.14), transparent 24%),
        linear-gradient(180deg, #fffdf9 0%, #f3eadb 100%);
}
.vision-bootstrap-hero {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.54), transparent 24%),
        linear-gradient(180deg, #f7efe4 0%, #e9dbc5 100%);
    padding: 5.5rem 0 4rem;
}
.vision-bootstrap-hero::before {
    background-image:
        linear-gradient(rgba(23,52,81,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,52,81,.04) 1px, transparent 1px);
    background-size: 48px 48px;
}
.vision-bootstrap-page .breadcrumb {
    color: rgba(47,67,84,.58);
}
.vision-bootstrap-page .breadcrumb a:hover {
    color: #2397b4;
}
.vision-hero-chip,
.vision-section-chip {
    background: linear-gradient(180deg, #ffffff, #f6efe5);
    color: #21425d;
    border: 1px solid rgba(176, 145, 107, .24);
    font-size: .88rem;
    font-weight: 800;
    padding: .7rem 1.15rem;
    box-shadow: 0 12px 28px rgba(82, 62, 36, .08), inset 0 1px 0 rgba(255,255,255,.92);
}
.vision-section-chip-soft {
    background: rgba(255,255,255,.72);
    color: #1f8eab;
    border-color: rgba(36,154,179,.18);
}
.vision-bootstrap-hero h1 {
    color: #173451;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: clamp(2.2rem, 4.6vw, 4.15rem);
    line-height: 1.18;
}
.vision-bootstrap-hero p {
    color: rgba(47,67,84,.82);
    max-width: 780px;
    font-size: 1.08rem;
    line-height: 1.95;
}
.vision-bootstrap-surface,
.vision-bootstrap-values,
.vision-bootstrap-principles {
    position: relative;
}
.vision-section-heading {
    max-width: 780px;
}
.vision-section-heading h2 {
    color: #173451;
}
.vision-section-heading p {
    color: rgba(47,67,84,.78);
    font-size: 1.02rem;
    line-height: 1.9;
}
.vision-statement-card {
    border-radius: 32px;
    overflow: hidden;
    min-height: 100%;
    box-shadow: 0 24px 44px rgba(26, 50, 71, .14);
}
.vision-statement-card-dark {
    background: linear-gradient(135deg, #173451 0%, #2397b4 100%);
    position: relative;
}
.vision-statement-card-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 38px 38px;
}
.vision-statement-card-soft {
    background: linear-gradient(180deg, #ffffff 0%, #fff9f1 100%);
    border: 1px solid rgba(176,145,107,.16);
    box-shadow: 0 20px 38px rgba(64, 49, 29, .08);
}
.vision-statement-card .card-body {
    position: relative;
    z-index: 1;
}
.vision-statement-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
}
.vision-statement-icon-soft {
    background: linear-gradient(135deg, #173451 0%, #2397b4 100%);
    border-color: rgba(23,52,81,.08);
    box-shadow: 0 14px 28px rgba(35,151,180,.16);
}
.vision-bootstrap-page .h1-like {
    color: #fff;
    font-size: clamp(1.28rem, 2vw, 1.95rem);
    line-height: 1.62;
    font-weight: 800;
}
.vision-bootstrap-page .h2-like {
    color: #173451;
    font-size: clamp(1.16rem, 1.7vw, 1.65rem);
    line-height: 1.78;
    font-weight: 800;
}
.vision-value-card {
    border-radius: 28px;
    background: linear-gradient(180deg, #ffffff 0%, #fff9f1 100%);
    border: 1px solid rgba(176,145,107,.16);
    box-shadow: 0 16px 34px rgba(64,49,29,.08);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.vision-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(64,49,29,.12);
    border-color: rgba(176,145,107,.24);
}
.vision-value-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #173451 0%, #2397b4 100%);
    color: #fff;
    box-shadow: 0 14px 28px rgba(35,151,180,.18);
}
.vision-value-card h3 {
    color: #173451;
}
.vision-value-card p {
    color: rgba(47,67,84,.8);
    line-height: 1.85;
    font-size: .95rem;
}
.vision-principle-card-bs {
    border-radius: 26px;
    background: linear-gradient(180deg, #ffffff 0%, #fff9f1 100%);
    border: 1px solid rgba(176,145,107,.16);
    box-shadow: 0 14px 28px rgba(64,49,29,.08);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.vision-principle-card-bs:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(64,49,29,.12);
    border-color: rgba(176,145,107,.24);
}
.vision-principle-pill {
    min-width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(35,151,180,.14), rgba(23,52,81,.08));
    color: #2397b4;
    font-size: 1rem;
    font-weight: 800;
    border: 1px solid rgba(36,154,179,.12);
    flex-shrink: 0;
}
.vision-principle-card-bs h3 {
    color: #173451;
    line-height: 1.7;
}
.vision-bootstrap-cta {
    background: transparent;
}
.vision-cta-card {
    border-radius: 34px;
    background: linear-gradient(135deg, #ead8bf 0%, #d8c1a1 100%);
    box-shadow: 0 22px 42px rgba(64,49,29,.12);
}
.vision-cta-card h2 {
    color: #173451;
}
.vision-cta-card p {
    color: rgba(47,67,84,.82);
    max-width: 760px;
    line-height: 1.9;
}
.vision-btn-primary,
.vision-btn-secondary {
    border-radius: 999px;
    padding: .9rem 1.6rem;
    font-weight: 800;
}
.vision-btn-primary {
    background: linear-gradient(135deg, #173451, #2a7898);
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 14px 28px rgba(22,59,87,.18);
}
.vision-btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);
}
.vision-btn-secondary {
    background: rgba(255,255,255,.74);
    color: #173451;
    border: 1px solid rgba(176,145,107,.26);
}
.vision-btn-secondary:hover {
    background: #ffffff;
    color: #173451;
    transform: translateY(-2px);
}
    gap: 1.5rem;
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.vision-principle-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}
.vision-principle-num {
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent);
    opacity: .25;
    line-height: 1;
    flex-shrink: 0;
}
.vision-principle-card h4 {
    color: var(--navy);
    margin-bottom: .4rem;
}
.vision-principle-card p {
    color: var(--text-muted);
    font-size: .9rem;
    margin: 0;
}

/* ─── Partnership Info ───────────────────────────────── */
.partner-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}
.partner-type-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1.75rem;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}
.partner-type-card:hover { box-shadow: var(--shadow); border-color: var(--accent); }
.partner-type-card h3 {
    color: var(--navy); font-size: 1.05rem;
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: .75rem;
}
.partner-type-card ul { padding-right: 1rem; }
.partner-type-card ul li {
    font-size: .88rem; color: var(--text-muted);
    margin-bottom: .4rem; line-height: 1.5;
    list-style: disc;
}

/* ─── Media Grid ─────────────────────────────────────── */
.media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.media-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}
.media-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.media-type-badge {
    display: inline-block;
    padding: .2rem .8rem;
    border-radius: 50px;
    font-size: .73rem; font-weight: 700;
}
.badge-news    { background: #dbeafe; color: #1e40af; }
.badge-press   { background: #ede9fe; color: #5b21b6; }
.badge-photo   { background: #fef3c7; color: #92400e; }
.badge-identity{ background: #d1fae5; color: #065f46; }

/* ─── Section: About ─────────────────────────────────── */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.about-visual {
    background: linear-gradient(135deg, var(--navy-mid) 0%, #49C8E2 64%, #FFE2A7 100%);
    border-radius: var(--radius-lg);
    padding: 3rem;
    position: relative; overflow: hidden;
    aspect-ratio: 4/3;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 28px 54px rgba(18,58,88,.16);
}
.about-visual::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 36px 36px;
}
.about-icon-big {
    position: relative;
    font-size: 6rem; opacity: .25;
}
.about-floating-card {
    position: absolute;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: .65rem 1.1rem;
    color: var(--navy); font-size: .8rem;
    font-weight: 500;
    display: flex; align-items: center; gap: .5rem;
    box-shadow: 0 16px 30px rgba(18,58,88,.14);
}
.about-floating-card.card-1 { top: 1.5rem; right: 1.5rem; }
.about-floating-card.card-2 { bottom: 1.5rem; left: 1.5rem; }

/* ─── Scroll Animations ──────────────────────────────── */
[data-aos] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
[data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Footer ─────────────────────────────────────────── */
.site-footer {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.42), transparent 30%),
        radial-gradient(circle at bottom right, rgba(198,165,128,.10), transparent 24%),
        linear-gradient(180deg, #F8F1E7 0%, #EADBC5 100%);
    color: var(--navy);
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(23,53,78,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,53,78,.04) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: .35;
    pointer-events: none;
}
.footer-cta-strip {
    position: relative;
    z-index: 1;
    padding: 2.5rem 0 0;
}
.footer-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2.25rem;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(248, 250, 252, .97));
    border: 1px solid rgba(167, 138, 103, .2);
    box-shadow: 0 18px 36px rgba(6, 18, 28, .16), inset 0 1px 0 rgba(255,255,255,.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.footer-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: 999px;
    padding: .4rem .9rem;
    background: rgba(255,255,255,.42);
    border: 1px solid rgba(18,53,78,.10);
    color: var(--accent-dark);
    font-size: .76rem;
    font-weight: 700;
    margin-bottom: .9rem;
}
.footer-cta-copy h2 {
    color: var(--navy);
    margin-bottom: .7rem;
    max-width: 18ch;
}
.footer-cta-copy p {
    margin: 0;
    color: rgba(23,53,78,.84);
    max-width: 62ch;
}
.footer-cta-actions {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.footer-cta-actions .btn {
    min-width: 168px;
    justify-content: center;
    padding: 1rem 1.6rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #173451, #1f6a86);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 14px 28px rgba(20, 66, 97, .18), inset 0 1px 0 rgba(255,255,255,.16);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}
.footer-cta-actions .btn:hover {
    background: linear-gradient(135deg, #1a3c59, #247694);
    box-shadow: 0 18px 34px rgba(20, 66, 97, .22), inset 0 1px 0 rgba(255,255,255,.22);
    transform: translateY(-2px);
}
.footer-main {
    position: relative;
    z-index: 1;
    padding: 4rem 0 3rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 2.5rem;
}
.footer-logo {
    display: flex; align-items: center; gap: .85rem;
    margin-bottom: 1.25rem;
}
.footer-logo-image {
    display: block;
    width: auto;
    height: 58px;
    object-fit: contain;
    object-position: right center;
}
.footer-brand-name { color: var(--navy); font-weight: 800; font-size: 1rem; }
.footer-brand-sub  { color: rgba(18,53,78,.84); font-size: .7rem; font-weight: 600; opacity: 1; }
.footer-desc { font-size: .87rem; color: rgba(23,53,78,.82); line-height: 1.8; margin-bottom: 1.5rem; }
.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.5rem;
}
.footer-badges span {
    padding: .42rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.34);
    border: 1px solid rgba(18,53,78,.08);
    color: rgba(18,53,78,.88);
    font-size: .76rem;
    font-weight: 600;
}

.footer-social { display: flex; gap: .6rem; }
.social-link {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.34);
    border: 1px solid rgba(18,53,78,.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--navy);
    transition: all var(--transition);
}
.social-link:hover { background: var(--accent); color: white; border-color: var(--accent); transform: translateY(-2px); }

.footer-heading {
    font-size: .88rem; font-weight: 700;
    color: var(--navy); text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(18,53,78,.10);
}
.footer-links li + li { margin-top: .5rem; }
.footer-links a {
    font-size: .87rem;
    color: rgba(18,53,78,.86);
    transition: color var(--transition);
}
.footer-links a:hover { color: var(--accent); padding-right: .3rem; }

.footer-contact { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1.5rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: .65rem; }
.footer-contact-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.34);
    border: 1px solid rgba(18,53,78,.08);
    color: var(--accent-dark);
    flex-shrink: 0;
}
.footer-contact a, .footer-contact span { font-size: .85rem; color: rgba(18,53,78,.88); }
.footer-contact a:hover { color: var(--accent); }
.footer-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.footer-actions .btn {
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(31, 45, 62, .10);
}
.footer-actions .btn-outline {
    background: linear-gradient(180deg, rgba(255, 250, 242, .95), rgba(241, 227, 206, .92));
    color: #173451;
    border: 1px solid rgba(167, 138, 103, .26);
}
.footer-actions .btn-outline:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(244, 232, 214, .96));
    color: #173451;
    border-color: rgba(167, 138, 103, .34);
}
.footer-actions .btn-accent {
    background: linear-gradient(135deg, #173451, #1f6a86);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 12px 24px rgba(20, 66, 97, .16), inset 0 1px 0 rgba(255,255,255,.14);
}
.footer-actions .btn-accent:hover {
    background: linear-gradient(135deg, #1a3c59, #247694);
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 16px 28px rgba(20, 66, 97, .2), inset 0 1px 0 rgba(255,255,255,.18);
}

.footer-bottom {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(18,53,78,.08);
    padding: 1.25rem 0;
    text-align: center;
}
.footer-bottom p { font-size: .82rem; color: rgba(18,53,78,.72); margin: 0; }

/* ─── Utility: badges ────────────────────────────────── */
.badge {
    display: inline-block;
    padding: .2rem .8rem;
    border-radius: 50px;
    font-size: .75rem; font-weight: 700;
}
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-green  { background: #d1fae5; color: #065f46; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-gray   { background: #f1f5f9; color: var(--text-muted); }

/* ─── Empty state ────────────────────────────────────── */
.empty-state {
    text-align: center; padding: 4rem 2rem;
    color: var(--text-muted);
}
.empty-state-icon { font-size: 3.5rem; margin-bottom: 1rem; opacity: .4; }
.empty-state p    { font-size: 1rem; max-width: 400px; margin: 0 auto; }

/* ─── Misc ───────────────────────────────────────────── */
.text-accent   { color: var(--accent); }
.text-navy     { color: var(--navy); }
.text-muted    { color: var(--text-muted); }
.text-white    { color: white; }
.bg-navy       { background: var(--navy); }
.bg-light      { background: var(--bg-section); }
.border-top    { border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 1.5rem; }
.no-margin     { margin: 0; }
.lead          { font-size: 1.1rem; line-height: 1.8; }
.strong        { font-weight: 700; }

/* ─── Image Utilities & SVG Support ──────────────────── */
.img-responsive { max-width: 100%; height: auto; display: block; }

/* Hero section decorative visual */
.hero-visual-bg {
    position: absolute;
    left: 0; top: 78px; bottom: 0;
    width: 44%;
    opacity: .20;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.hero-visual-bg img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* About visual — full-fill SVG replacing emoji placeholder */
.about-visual-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .88;
    z-index: 0;
}
.about-floating-card { z-index: 1; }

/* Program card image slot (bleeds to card-top edges) */
.program-card-img {
    margin: -1.75rem -1.75rem 1.25rem;
    height: 150px;
    overflow: hidden;
    position: relative;
}
.program-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.program-card:hover .program-card-img img { transform: scale(1.05); }

/* Article card image — supports <img> as child */
.article-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.article-card:hover .article-card-img img { transform: scale(1.05); }

/* Generic section visual block */
.section-visual {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.section-visual img { width: 100%; height: auto; display: block; }

/* Contact info card visual */
.contact-visual {
    margin-top: 1.5rem;
    border-radius: var(--radius);
    overflow: hidden;
    opacity: .75;
}
.contact-visual img { width: 100%; height: auto; display: block; }

/* ═══════════════════════════════════════════════════════
   Phase 4 — Home Page Premium Redesign
   ═══════════════════════════════════════════════════════ */

/* ─── Hero Body & Two-Column Inner ───────────────────── */
.hero-body {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 3.5rem 0 2.6rem;
    position: relative;
    z-index: 1;
}
.hero-screen-section .hero-body {
    min-height: calc(100svh - 156px);
}
.hero-stage-section .hero-body {
    flex: 1;
    min-height: 0;
    padding: .95rem 0 .7rem;
}
.hero-stage-section {
    margin-top: auto;
    background:
        radial-gradient(circle at 16% 18%, rgba(48,215,232,.16), transparent 22%),
        radial-gradient(circle at 84% 18%, rgba(49,231,191,.14), transparent 20%),
        linear-gradient(135deg, #03111F 0%, #081D31 52%, #0A3341 100%);
}
.hero-stage-section::before {
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 58px 58px;
    opacity: .14;
    animation: heroGridShift 28s linear infinite;
}
.hero-stage-section::after {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(circle at 22% 28%, rgba(52,218,255,.22), transparent 24%),
        radial-gradient(circle at 78% 18%, rgba(39,224,195,.18), transparent 20%),
        radial-gradient(circle at 58% 82%, rgba(65,120,255,.14), transparent 26%);
    filter: blur(34px);
    opacity: .78;
    animation: heroMeshFloat 16s ease-in-out infinite alternate;
    pointer-events: none;
}
.hero-network-canvas,
.hero-mesh-gradient,
.hero-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero-network-canvas {
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
}
.hero-mesh-gradient {
    z-index: 0;
}
.hero-mesh-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(68px);
    opacity: .34;
    animation: heroBlobFloat 18s ease-in-out infinite;
}
.hero-mesh-blob.blob-1 {
    width: 260px;
    height: 260px;
    top: 8%;
    left: 8%;
    background: rgba(46,226,244,.46);
}
.hero-mesh-blob.blob-2 {
    width: 320px;
    height: 320px;
    right: 12%;
    top: 18%;
    background: rgba(34,188,255,.3);
    animation-delay: -5s;
}
.hero-mesh-blob.blob-3 {
    width: 280px;
    height: 280px;
    left: 42%;
    bottom: -4%;
    background: rgba(26,221,181,.26);
    animation-delay: -9s;
}
.hero-stage-section .hero-orbs {
    z-index: 0;
}
.hero-stage-section .orb {
    filter: blur(120px);
    opacity: .26;
}
.hero-stage-section .orb-1 {
    background: rgba(36,216,236,.44);
    top: -120px;
    left: -90px;
}
.hero-stage-section .orb-2 {
    background: rgba(14,111,177,.28);
    bottom: -120px;
    right: 4%;
}
.hero-stage-section .orb-3 {
    background: rgba(29,203,166,.22);
    top: 26%;
    right: 18%;
}
.hero-stage-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(280px, .78fr);
    gap: 1rem;
    align-items: center;
    width: 100%;
    min-height: clamp(300px, 42vh, 430px);
    position: relative;
    z-index: 1;
}
.hero-stage-copy {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(1.15rem, 1.9vw, 1.8rem);
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 34px 70px rgba(0,0,0,.26);
    min-height: clamp(300px, 40vh, 420px);
    text-align: right;
}
.hero-stage-copy::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 44%);
    pointer-events: none;
}
.hero-stage-copy > * {
    position: relative;
    z-index: 1;
}
.hero-stage-kicker {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    width: fit-content;
    padding: .58rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.94);
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: .7rem;
    box-shadow: 0 16px 32px rgba(0,0,0,.14);
}
.hero-stage-kicker-mark {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5DEBEE, #2BC8E7);
    box-shadow: 0 0 0 6px rgba(93,235,238,.14);
    flex-shrink: 0;
}
.hero-stage-overline {
    color: rgba(215,232,242,.72);
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .05em;
    margin-bottom: .65rem;
}
.hero-stage-title {
    font-size: clamp(2.5rem, 4.8vw, 4.2rem);
    line-height: .95;
    margin-bottom: .75rem;
    max-width: 15ch;
    letter-spacing: -.03em;
    text-wrap: balance;
    background: linear-gradient(135deg, #FFFFFF 0%, #E8FBFF 34%, #83F3FF 74%, #40D3E2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.22));
}
.hero-stage-title span {
    display: block;
    margin-top: .18rem;
}
.hero-stage-desc {
    color: rgba(218,232,241,.84);
    font-size: .92rem;
    line-height: 1.72;
    max-width: 40ch;
    margin-bottom: .95rem;
}
.hero-stage-actions {
    justify-content: flex-start;
    gap: .7rem;
}
.hero-stage-actions .btn {
    position: relative;
    overflow: hidden;
}
.hero-stage-actions .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.24) 46%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .45s ease;
}
.hero-stage-actions .btn:hover::after {
    transform: translateX(120%);
}
.hero-stage-actions .btn-accent {
    background: linear-gradient(135deg, #23D6DC 0%, #14B7C9 58%, #0FA3B7 100%);
    border-color: rgba(255,255,255,.12);
    color: white;
    box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 20px 38px rgba(28,198,217,.28);
}
.hero-stage-actions .btn-accent:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 0 22px rgba(35,214,220,.42), 0 24px 44px rgba(28,198,217,.28);
}
.hero-stage-actions .btn-outline,
.hero-stage-actions .btn-outline-dark {
    background: rgba(255,255,255,.06);
    color: white;
    border-color: rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.hero-stage-actions .btn-outline:hover,
.hero-stage-actions .btn-outline-dark:hover {
    transform: translateY(-3px);
    border-color: rgba(93,235,238,.42);
    background: rgba(255,255,255,.12);
    color: white;
}

.hero-stage-visual {
    position: relative;
    z-index: 1;
}
.hero-stage-visual-card {
    position: relative;
    min-height: clamp(300px, 40vh, 420px);
    border-radius: 34px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 34px 70px rgba(0,0,0,.26);
    perspective: 1200px;
}
.hero-stage-visual-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(72,236,245,.12), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,.08), transparent 48%);
    pointer-events: none;
}
.hero-globe-scene {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-globe {
    position: relative;
    width: min(100%, 296px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: heroGlobeFloat 8s ease-in-out infinite;
    background: radial-gradient(circle at 34% 34%, rgba(93,235,238,.22), rgba(7,24,36,.18) 42%, transparent 74%);
    box-shadow: inset 0 0 56px rgba(93,235,238,.14), 0 0 84px rgba(35,214,220,.16);
}
.hero-globe::before,
.hero-globe::after,
.hero-globe-ring,
.hero-globe-lat,
.hero-globe-meridian {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(112,241,255,.22);
}
.hero-globe::before {
    content: '';
    inset: 10%;
}
.hero-globe::after {
    content: '';
    inset: 20%;
}
.hero-globe-ring.ring-1 { inset: 6%; }
.hero-globe-ring.ring-2 { inset: 18%; }
.hero-globe-ring.ring-3 { inset: 30%; }
.hero-globe-lat.lat-1 {
    inset: 22% 8%;
    height: 56%;
}
.hero-globe-lat.lat-2 {
    inset: 34% 6%;
    height: 32%;
}
.hero-globe-lat.lat-3 {
    inset: 44% 12%;
    height: 12%;
}
.hero-globe-meridian.meridian-1 {
    inset: 6% 30%;
    transform: rotateY(66deg);
}
.hero-globe-meridian.meridian-2 {
    inset: 6% 30%;
    transform: rotateY(-66deg);
}
.hero-globe-meridian.meridian-3 {
    inset: 6% 38%;
    transform: rotateY(0deg);
}
.hero-globe-node,
.hero-globe-core {
    position: absolute;
    border-radius: 50%;
}
.hero-globe-node {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #8AF8FF, #31D8EE);
    box-shadow: 0 0 0 10px rgba(49,216,238,.08), 0 0 22px rgba(49,216,238,.4);
    animation: heroNodePulse 3.4s ease-in-out infinite;
}
.hero-globe-node.node-1 { top: 14%; right: 26%; }
.hero-globe-node.node-2 { top: 28%; left: 18%; animation-delay: -.8s; }
.hero-globe-node.node-3 { top: 50%; right: 10%; animation-delay: -1.6s; }
.hero-globe-node.node-4 { bottom: 22%; left: 22%; animation-delay: -2.2s; }
.hero-globe-node.node-5 { bottom: 14%; right: 28%; animation-delay: -2.8s; }
.hero-globe-core {
    inset: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #FFFFFF, #7CEBF0);
    box-shadow: 0 0 0 18px rgba(124,235,240,.08), 0 0 42px rgba(124,235,240,.34);
}
.hero-visual-chip {
    position: absolute;
    padding: .55rem .8rem;
    border-radius: 18px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: rgba(255,255,255,.92);
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 24px 40px rgba(0,0,0,.18);
    animation: heroChipFloat 6s ease-in-out infinite;
}
.hero-visual-chip.chip-top {
    top: 1.25rem;
    right: 1.25rem;
}
.hero-visual-chip.chip-bottom {
    bottom: 1.25rem;
    left: 1.25rem;
    animation-delay: -1.6s;
}
.hero-visual-chip.chip-side {
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    animation-delay: -3s;
}
.hero-stage-routes {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}
.hero-stage-route {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .82rem .9rem;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 26px 42px rgba(0,0,0,.18);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.hero-stage-route::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(93,235,238,0), rgba(93,235,238,.72), rgba(93,235,238,0));
    transform: scaleX(.35);
    opacity: .74;
}
.hero-stage-route:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 54px rgba(0,0,0,.22);
    border-color: rgba(93,235,238,.28);
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
}
.hero-stage-route-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: linear-gradient(135deg, #31E1E9 0%, #2A9FFF 56%, #24D8B4 100%);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 18px 30px rgba(35,214,220,.24);
}
.route-membership .hero-stage-route-icon {
    background: linear-gradient(135deg, #36C9FF 0%, #3A7DFF 58%, #6BE4FF 100%);
}
.route-partnerships .hero-stage-route-icon {
    background: linear-gradient(135deg, #36F1C3 0%, #14B8C7 54%, #2CCEE8 100%);
}
.hero-stage-route-body {
    display: block;
}
.hero-stage-route-body small {
    display: block;
    color: rgba(165,230,240,.78);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    margin-bottom: .2rem;
}
.hero-stage-route-body strong {
    display: block;
    color: white;
    font-size: .92rem;
    margin-bottom: .18rem;
}
.hero-stage-route-body span {
    display: block;
    color: rgba(214,232,242,.82);
    font-size: .76rem;
    line-height: 1.55;
}

.hero-stage-stats-bar {
    position: relative;
    z-index: 1;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.hero-stage-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hero-stage-stat {
    position: relative;
    padding: .9rem 1rem;
}
.hero-stage-stat + .hero-stage-stat {
    border-inline-start: 1px solid rgba(255,255,255,.12);
}
.hero-stage-stat-eyebrow {
    display: block;
    color: rgba(125,240,244,.88);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    margin-bottom: .3rem;
}
.hero-stage-stat .stat-num {
    display: block;
    color: white;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: .2rem;
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
}
.hero-stage-stat-label {
    display: block;
    color: rgba(214,232,242,.78);
    font-size: .76rem;
    font-weight: 600;
}

@keyframes heroGridShift {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 64px 64px, 64px 64px; }
}
@keyframes heroMeshFloat {
    0% { transform: translate3d(-2%, -1%, 0) scale(1); }
    100% { transform: translate3d(2%, 2%, 0) scale(1.08); }
}
@keyframes heroBlobFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(18px, -22px, 0) scale(1.08); }
}
@keyframes heroGlobeFloat {
    0%, 100% { transform: rotateX(8deg) rotateY(-8deg) translateY(0); }
    50% { transform: rotateX(12deg) rotateY(8deg) translateY(-12px); }
}
@keyframes heroChipFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes heroNodePulse {
    0%, 100% { transform: scale(1); opacity: .85; }
    50% { transform: scale(1.22); opacity: 1; }
}
.hero-screen-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
    grid-template-areas:
        'main aside'
        'metrics metrics';
    gap: 1rem;
    width: 100%;
}
.hero-screen-main {
    grid-area: main;
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    padding: clamp(1.6rem, 3vw, 2.8rem);
    background: linear-gradient(145deg, rgba(255,255,255,.92) 0%, rgba(236,248,253,.92) 56%, rgba(255,245,229,.88) 100%);
    border: 1px solid rgba(18,53,78,.08);
    box-shadow: 0 28px 60px rgba(42,111,151,.12);
}
.hero-screen-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(18,58,88,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,58,88,.04) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .45;
    pointer-events: none;
}
.hero-screen-main::after {
    content: '';
    position: absolute;
    left: -10%;
    bottom: -16%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28,198,217,.14), transparent 68%);
    pointer-events: none;
}
.hero-screen-main > * {
    position: relative;
    z-index: 1;
}
.hero-screen-pill {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(18,53,78,.08);
    color: var(--navy);
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 1rem;
    box-shadow: 0 14px 28px rgba(42,111,151,.08);
}
.hero-screen-pill-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    box-shadow: 0 0 0 6px rgba(28,198,217,.14);
    flex-shrink: 0;
}
.hero-screen-label {
    color: rgba(18,53,78,.58);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .05em;
    margin-bottom: 1rem;
}
.hero-screen-title {
    color: var(--navy);
    font-size: clamp(2.35rem, 5.1vw, 4.5rem);
    line-height: 1.08;
    margin-bottom: 1.2rem;
    max-width: 10ch;
}
.hero-screen-title span {
    display: block;
    color: var(--accent-dark);
    margin-top: .35rem;
}
.hero-screen-copy {
    color: rgba(23,53,78,.8);
    font-size: 1rem;
    line-height: 1.95;
    max-width: 58ch;
    margin-bottom: 1.6rem;
}
.hero-screen-actions {
    justify-content: flex-start;
}
.hero-screen-points {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.5rem;
}
.hero-screen-point {
    display: inline-flex;
    align-items: center;
    padding: .55rem .95rem;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(18,53,78,.08);
    color: var(--navy);
    font-size: .77rem;
    font-weight: 700;
}

.hero-screen-aside {
    grid-area: aside;
}
.hero-preview-panel {
    display: grid;
    grid-template-rows: minmax(260px, 1fr) auto;
    gap: 1rem;
    height: 100%;
}
.hero-preview-media {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    min-height: 300px;
    background: linear-gradient(145deg, rgba(18,58,88,.95) 0%, rgba(42,111,151,.88) 65%, rgba(88,169,212,.8) 100%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 26px 56px rgba(18,58,88,.18);
}
.hero-preview-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .36;
    z-index: 1;
}
.hero-preview-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,25,38,.06) 0%, rgba(7,25,38,.44) 100%);
    z-index: 1;
}
.hero-preview-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .92;
}
.hero-preview-chip {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    max-width: calc(100% - 2rem);
    padding: .75rem 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.7;
}
.hero-preview-routes {
    display: grid;
    gap: .85rem;
}
.hero-route-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .8rem;
    padding: .95rem 1rem;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
    border: 1px solid rgba(18,53,78,.08);
    box-shadow: 0 18px 34px rgba(42,111,151,.08);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.hero-route-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 42px rgba(42,111,151,.12);
    border-color: rgba(28,198,217,.2);
}
.hero-route-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--accent-glow);
    color: var(--accent-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hero-route-text {
    display: block;
}
.hero-route-text strong {
    display: block;
    color: var(--navy);
    font-size: .9rem;
    margin-bottom: .2rem;
}
.hero-route-text span {
    display: block;
    color: var(--text-muted);
    font-size: .77rem;
    line-height: 1.7;
}
.hero-route-order {
    color: rgba(18,53,78,.34);
    font-size: .86rem;
    font-weight: 800;
}

.hero-screen-metrics {
    grid-area: metrics;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.hero-metric-card {
    padding: 1.15rem 1.2rem;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.62));
    border: 1px solid rgba(18,53,78,.08);
    box-shadow: 0 18px 34px rgba(42,111,151,.08);
}
.hero-metric-label {
    display: block;
    color: var(--accent-dark);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    margin-bottom: .7rem;
}
.hero-metric-card .stat-num {
    display: block;
    color: var(--navy);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: .35rem;
}
.hero-metric-card p {
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.7;
    margin: 0;
    max-width: none;
}

/* ===============================
   Hero Redesign — Institutional Light Theme
   =============================== */

/* ── Hero colour tokens ── */
:root {
    --hero-teal:   #B68633;
    --hero-blue:   #D8B76C;
    --hero-text:   #1A2B4A;
    --hero-sub:    #5A7A8A;
    --hero-border: #D8E9F6;
    --hero-bg-1:   #EAF6FF;
    --hero-bg-2:   #F7FBFF;
    --hero-bg-3:   #DDEFFA;
}

/* ── Section shell ── */
.hero-orbit-section {
    position: relative;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 50%, var(--hero-bg-3) 100%);
    padding-top: 80px;
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;
}

.hero-orbit-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(270deg,
            rgba(247,251,255,0.84) 0%,
            rgba(247,251,255,0.68) 24%,
            rgba(247,251,255,0.38) 48%,
            rgba(247,251,255,0.12) 72%,
            rgba(247,251,255,0.03) 100%),
        linear-gradient(180deg,
            rgba(250,252,255,0.5) 0%,
            rgba(226,241,252,0.14) 30%,
            rgba(226,241,252,0.03) 62%,
            rgba(221,239,250,0.42) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: 100% 100%, 100% 100%;
    z-index: -1;
    pointer-events: none;
}

.hero-orbit-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/hero/hero-human-ai-contact.jpeg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    opacity: 0.92;
    filter: saturate(1.06) contrast(1.12) brightness(0.98);
    z-index: -2;
    pointer-events: none;
}

/* Dot grid overlay */
.hero-bg-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(182,134,51,.72) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
}

/* Decorative blur orb */
.hero-bg-orb {
    position: absolute;
    width: 520px;
    height: 520px;
    left: 2%;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(182,134,51,0.18) 0%, transparent 70%);
    filter: blur(80px);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

/* ── Body wrapper ── */
.hero-orbit-body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 2rem 0 1.5rem;
}

.hero-orbit-container { width: 100%; }

/* Two-column shell (stacked mobile → side-by-side desktop) */
.hero-orbit-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        'copy'
        'visual';
    align-items: center;
    gap: 2.5rem;
    position: relative;
}

.hero-orbit-copy {
    grid-area: copy;
    position: relative;
    z-index: 2;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    text-align: right;
}

/* ── Badge ── */
.hero-stage-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.35rem;
    border-radius: 50px;
    background: rgba(246, 251, 255, 0.96);
    border: 1px solid rgba(120, 176, 222, 0.48);
    color: #355f88;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.5;
    margin-top: -0.55rem;
    margin-bottom: 0;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 14px 34px rgba(33, 88, 136, 0.08);
}

/* ── Heading ── */
.hero-stage-title {
    font-family: 'Alexandria', 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
    font-weight: 800;
    font-size: clamp(2.2rem, 5.9vw, 3.6rem);
    color: var(--hero-text);
    line-height: 1.14;
    margin: 0;
    letter-spacing: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    align-items: flex-start;
    /* Hard reset — no gradient clip on the parent */
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--hero-text) !important;
    text-shadow: none;
    filter: none;
    max-width: 100%;
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
}

.hero-stage-title-line {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.28rem 0.55rem;
    align-items: baseline;
    line-height: inherit;
    overflow: visible;
    max-width: 100%;
}

.hero-orbit-section .hero-stage-title .hero-stage-title-line {
    display: flex;
}

.hero-stage-title-line-top {
    color: #173057;
    font-weight: 800;
}

.hero-stage-title-line-middle {
    color: #2a6f97;
    font-weight: 800;
}

.hero-stage-title-line-bottom {
    font-size: 0.92em;
    color: #22446e;
    font-weight: 700;
}

.hero-stage-word {
    display: inline-block;
    white-space: nowrap;
}

.hero-orbit-section .hero-stage-title .hero-stage-word {
    display: inline-block;
}

/* Gradient only on the accent word */
.hero-stage-word-gradient {
    display: inline-block;
    padding-bottom: 0.12em;
    margin-bottom: 0.03em;
    background: linear-gradient(135deg, #1f5f8b, #4f9fcb) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent;
    text-shadow: none;
}

/* ── Subtitle ── */
.hero-stage-desc {
    color: var(--hero-sub);
    font-size: 1.05rem;
    line-height: 1.9;
    margin: 0;
    max-width: 46ch;
    overflow-wrap: break-word;
}

.hero-stage-support {
    display: grid;
    gap: 1.15rem;
    width: min(100%, 640px);
    padding: 1.15rem 1.25rem 1.25rem;
    background: linear-gradient(145deg, rgba(250,253,255,0.86), rgba(232,244,252,0.72));
    border: 1px solid rgba(127, 181, 220, 0.18);
    border-radius: 28px;
    box-shadow: 0 18px 48px rgba(16, 45, 78, 0.08);
    backdrop-filter: blur(14px);
}

/* ── CTA Buttons ── */
.hero-stage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
}

.btn-hero-primary {
    background: linear-gradient(135deg, #1f5f8b, #4f9fcb) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 36px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 32px rgba(31,95,139,0.28);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(31,95,139,0.36);
    color: #fff !important;
}

.btn-hero-outline {
    background: transparent !important;
    color: #2f6fa5 !important;
    border: 2px solid #2f6fa5 !important;
    border-radius: 50px !important;
    padding: 12px 32px !important;
    font-weight: 700 !important;
    transition: background 0.25s ease, transform 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-hero-outline:hover {
    background: rgba(47,111,165,0.08) !important;
    transform: translateY(-2px);
}

.btn-hero-white {
    background: #fff !important;
    color: var(--hero-text) !important;
    border: 2px solid var(--hero-border) !important;
    border-radius: 50px !important;
    padding: 12px 32px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-hero-white:hover {
    border-color: #1f5f8b !important;
    color: #1f5f8b !important;
    transform: translateY(-2px);
}

/* ── Visual column ── */
.hero-orbit-visual {
    display: none;
}

/* ── Route Cards ── */
.hero-stage-routes {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    margin-top: 2rem;
}

.hero-stage-route {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, rgba(252,254,255,.98), rgba(234,244,251,.94));
    border: 1px solid rgba(127,181,220,.14);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hero-stage-route:hover {
    transform: translateY(-4px);
    border-color: #4f9fcb;
    box-shadow: 0 12px 32px rgba(31,95,139,0.16);
}

.hero-stage-route-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f5f8b, #4f9fcb);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.route-membership .hero-stage-route-icon  { background: linear-gradient(135deg, #17486a, #3f86b3); }
.route-partnerships .hero-stage-route-icon { background: linear-gradient(135deg, #296d97, #62b4dd); }

.hero-stage-route-body { min-width: 0; }

.hero-stage-route-body small {
    display: block;
    color: #2a6f97;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}

.hero-stage-route-body strong {
    display: block;
    color: var(--hero-text);
    font-size: 0.94rem;
    margin-bottom: 0.22rem;
}

.hero-stage-route-body span {
    display: block;
    color: var(--hero-sub);
    font-size: 0.8rem;
    line-height: 1.6;
}

/* ── Stats Bar ── */
.hero-stage-stats-bar {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(252,254,255,.98), rgba(233,244,251,.96));
    border-top: 2px solid rgba(168,206,233,.32);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.04);
}

.hero-stage-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
}

.hero-stage-stat {
    padding: 1.25rem 1rem;
    text-align: center;
}

.hero-stage-stat:nth-child(2n) {
    border-inline-start: 1px solid var(--hero-border);
}

.hero-stage-stat:nth-child(n+3) {
    border-top: 1px solid var(--hero-border);
}

.hero-stage-stat .stat-num {
    display: block;
    color: #b68633;
    font-family: 'Cairo', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.25rem);
    font-weight: 900;
    line-height: 1;
    direction: ltr;
    margin-bottom: 0.35rem;
}

.hero-stage-stat-label {
    display: block;
    color: var(--hero-sub);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.5;
}

/* ── Desktop layout (≥ 980px) ── */
@media (min-width: 980px) {
    .hero-orbit-section {
        padding-top: 82px;
    }
    .hero-orbit-section::before {
        inset: 0;
        width: auto;
    }
    .hero-orbit-body {
        padding: 3rem 0 2.15rem;
    }
    .hero-orbit-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'copy';
        gap: 0;
        min-height: 430px;
    }
    .hero-orbit-copy {
        max-width: 780px;
    }
    .hero-stage-title {
        font-size: clamp(2.55rem, 4vw, 3.2rem);
        line-height: 1.04;
        gap: 0.2rem;
    }
    .hero-stage-title-line-bottom {
        font-size: 0.88em;
    }
    .hero-stage-title-line-top,
    .hero-stage-title-line-middle,
    .hero-stage-title-line-bottom {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    .hero-stage-support {
        width: min(100%, 620px);
        padding: 1.2rem 1.35rem 1.3rem;
    }
    .hero-stage-routes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 1.7rem;
    }
    .hero-stage-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .hero-stage-stat:nth-child(2n) {
        border-inline-start: none;
    }
    .hero-stage-stat:nth-child(n+3) {
        border-top: none;
    }
    .hero-stage-stat + .hero-stage-stat {
        border-inline-start: 1px solid var(--hero-border);
    }
    .hero-bg-orb { left: 42%; }
}

/* ── Compact desktop (landscape laptop) ── */
@media (min-width: 980px) and (max-height: 840px) {
    .hero-orbit-section { min-height: 85vh; }
    .hero-orbit-section::before { inset: 0; width: auto; }
    .hero-orbit-body { padding: 2rem 0 1.5rem; }
    .hero-stage-title { font-size: clamp(2.4rem, 4vw, 3rem); }
    .hero-stage-desc { font-size: 0.96rem; }
    .hero-orbit-shell { min-height: 390px; }
}

/* ─── Value Propositions Grid ────────────────────────── */
.why-union-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .78fr);
    gap: 2rem;
    align-items: start;
}
.why-union-content {
    min-width: 0;
}
.why-union-content .section-header {
    margin-bottom: 1.8rem;
}
.why-union-content .value-props-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
}
.why-union-visual {
    display: grid;
    gap: 0;
    align-self: start;
}
.why-union-visual-frame {
    position: relative;
    padding: 1.25rem;
    border-radius: 34px;
    background:
        radial-gradient(circle at top left, rgba(22,184,217,.12), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(235,243,249,.98));
    border: 1px solid rgba(102, 146, 176, .22);
    box-shadow: 0 30px 56px rgba(2, 12, 24, .14);
    overflow: hidden;
    min-height: auto;
}
.why-union-visual-frame::before {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.64);
    pointer-events: none;
}
.why-union-visual-frame img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index: 1;
}
.why-union-visual-chip {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: .55rem .95rem;
    border-radius: 999px;
    background: rgba(13, 45, 68, .92);
    color: #dff8ff;
    font-size: .78rem;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(4, 19, 36, .16);
}
.why-union-simple {
    width: min(100%, 760px);
    margin-right: 0;
    margin-left: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
    box-shadow: none;
    text-align: right;
}
.why-union-simple .tag {
    margin-inline: auto;
    margin-bottom: 1rem;
}
.why-union-simple h2 {
    display: inline-block;
    background: linear-gradient(135deg, #1f5f8b, #4f9fcb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: clamp(2.7rem, 5vw, 4.6rem);
    line-height: 1.08;
    margin-bottom: 1rem;
}
.why-union-simple .section-divider {
    margin: 0 0 1.35rem auto;
}
.why-union-simple-copy {
    display: grid;
    gap: 1.15rem;
}
.why-union-simple-copy p {
    margin: 0;
    color: #3f5972;
    font-size: 1.18rem;
    line-height: 1.95;
    max-width: 100%;
}
.why-union-simple-copy p:last-child {
    color: #173451;
    font-size: 1.24rem;
    font-weight: 600;
}
.why-union-section {
    padding-top: 2rem;
    background: #ffffff;
}
.why-union-layout {
    align-items: center;
}
.why-union-layout .why-union-simple {
    width: 100%;
    max-width: 760px;
}
.why-union-visual-frame-question {
    padding: .9rem;
    border-radius: 30px;
}
.why-union-visual-frame-question::before {
    inset: 14px;
    border-radius: 22px;
}
.why-union-visual-frame-question img {
    border-radius: 22px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    max-height: 560px;
}

/* ─── Intro Brief Section ────────────────────────────── */
.intro-brief-section {
    padding: 3rem 0 2.4rem;
    background: #ffffff;
}
.intro-brief-card {
    width: min(100%, 1020px);
    margin: 0 auto;
    position: relative;
    padding: 1.7rem 2.4rem 1.8rem;
    border-radius: 32px;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.42), transparent 22%),
        radial-gradient(circle at bottom right, rgba(199, 167, 125, .18), transparent 26%),
        linear-gradient(180deg, rgba(248, 241, 231, .98), rgba(234, 220, 199, .95));
    border: 1px solid rgba(167, 138, 103, .2);
    box-shadow: 0 20px 42px rgba(58, 44, 27, .12);
    overflow: hidden;
}
.intro-brief-card::before {
    content: none;
}
.intro-brief-copy {
    display: grid;
    gap: 1.15rem;
    width: min(100%, 900px);
    margin: 0 auto;
}
.intro-brief-copy p {
    margin: 0;
    max-width: 100%;
    color: rgba(47, 67, 84, .88);
    font-size: 1rem;
    line-height: 1.95;
}
.intro-brief-copy p:first-child {
    color: #173451;
    font-size: 1.06rem;
    font-weight: 600;
}
.value-props-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.value-prop-card {
    background:
        radial-gradient(circle at top right, rgba(60,199,215,.14), transparent 34%),
        linear-gradient(160deg, rgba(10, 31, 49, .96), rgba(7, 24, 39, .98));
    border-radius: 32px 32px 26px 18px;
    padding: 1.7rem 1.5rem 1.45rem;
    border: 1px solid rgba(104, 164, 205, .18);
    box-shadow: 0 26px 48px rgba(1, 10, 22, .34);
    transition: all var(--transition);
    position: relative; overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 250px;
}
.value-prop-card::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(26,115,232,.18), rgba(60,199,215,.92), rgba(213,162,74,.72));
    transform: none;
    opacity: .9;
    transition: opacity var(--transition), filter var(--transition);
}
.value-prop-card::after {
    content: '';
    position: absolute;
    inset: auto 0 0 auto;
    width: 86px;
    height: 86px;
    background: radial-gradient(circle, rgba(60,199,215,.14), transparent 68%);
    pointer-events: none;
}
.value-prop-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 60px rgba(1, 10, 22, .42);
    border-color: rgba(60,199,215,.28);
}
.value-prop-card:hover::before {
    opacity: 1;
    filter: saturate(1.12);
}
.vp-icon-box {
    width: 72px;
    height: 72px;
    border-radius: 24px 24px 18px 18px;
    background: linear-gradient(155deg, rgba(60,199,215,.24), rgba(213,162,74,.14));
    border: 1px solid rgba(60,199,215,.18);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.4rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(4, 17, 32, .26);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.vp-icon-box::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 18px 18px 14px 14px;
    background: linear-gradient(180deg, rgba(10,33,50,.96), rgba(13,42,64,.86));
    border: 1px solid rgba(255,255,255,.05);
}
.vp-icon-box::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,.85);
    box-shadow: 0 0 0 6px rgba(255,255,255,.08);
}
.vp-icon-box svg {
    position: relative;
    z-index: 1;
    stroke-width: 1.95;
    color: #58d3e6;
    stroke: #58d3e6;
}
.vp-tone-knowledge {
    background: linear-gradient(155deg, rgba(34,198,214,.24), rgba(145,228,239,.22));
}
.vp-tone-institution {
    background: linear-gradient(155deg, rgba(14,76,136,.24), rgba(85,161,216,.22));
}
.vp-tone-partnership {
    background: linear-gradient(155deg, rgba(22,176,188,.24), rgba(213,162,74,.18));
}
.vp-tone-impact {
    background: linear-gradient(155deg, rgba(21,165,209,.24), rgba(213,162,74,.22));
}
.vp-tone-knowledge::after,
.vp-tone-partnership::after,
.vp-tone-impact::after {
    background: rgba(60,199,215,.88);
}
.vp-tone-institution::after {
    background: rgba(33,112,184,.88);
}
.value-prop-card:hover .vp-icon-box {
    transform: translateY(-2px);
    box-shadow: 0 22px 38px rgba(4, 17, 32, .34);
    border-color: rgba(60,199,215,.3);
}
.value-prop-card:hover .vp-icon-box svg { color: var(--accent-dark) !important; stroke: var(--accent-dark) !important; }
.value-prop-card h3 {
    font-size: 1.08rem;
    color: #f4fbff;
    margin-bottom: .7rem;
    font-weight: 800;
    letter-spacing: -.01em;
}
.value-prop-card p  {
    font-size: .92rem;
    color: rgba(214, 229, 240, .84);
    margin: 0;
    line-height: 1.86;
}

/* ─── Fields Domain Cards ────────────────────────────── */
.fields-domain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.domain-card {
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.12));
    border: 1px solid rgba(255,255,255,.32);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
    text-align: center;
    cursor: default;
    transition: all var(--transition);
    position: relative; overflow: hidden;
    box-shadow: 0 20px 36px rgba(18,58,88,.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.domain-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    transform: scaleX(0);
    transition: transform var(--transition);
    transform-origin: center;
}
.domain-card:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.16));
    border-color: rgba(255,255,255,.4);
    box-shadow: 0 26px 44px rgba(18,58,88,.2);
    transform: translateY(-4px);
}
.domain-card:hover::after { transform: scaleX(1); }
.domain-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    margin: 0 auto .9rem;
    background: rgba(255,255,255,.34);
    border: 1px solid rgba(255,255,255,.26);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition);
}
.domain-card:hover .domain-icon { background: rgba(255,255,255,.42); }
.domain-name {
    color: rgba(255,255,255,.98);
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: .3rem;
    text-shadow: 0 2px 10px rgba(18,58,88,.16);
}
.domain-tag  {
    color: rgba(255,255,255,.9);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.fields-domain-section.section-dark-shell {
    position: relative;
    overflow: hidden;
    background:
    radial-gradient(circle at top right, rgba(167, 218, 244, .34), transparent 24%),
    radial-gradient(circle at bottom left, rgba(210, 226, 238, .46), transparent 32%),
    linear-gradient(145deg, #f8fbfe 0%, #edf5fb 54%, #deebf6 100%);
}
.fields-domain-section.section-dark-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(44, 98, 136, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 98, 136, .055) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.9) 25%, rgba(0,0,0,.9) 75%, rgba(0,0,0,.2));
    pointer-events: none;
}
.fields-domain-section .section-shell-bg {
    display: block;
    opacity: .08;
    inset: auto 0 -5% auto;
    width: min(28vw, 320px);
    pointer-events: none;
}
.fields-domain-section .section-shell-inner {
    position: relative;
    z-index: 1;
}
.fields-domain-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 1.5rem;
    align-items: end;
    margin-bottom: 2.1rem;
}
.fields-domain-header {
    margin-bottom: 0;
    text-align: right;
}
.fields-domain-section.section-dark-shell .section-header .tag {
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(233, 242, 250, .94));
    border: 1px solid rgba(115, 170, 209, .18);
    color: #173d5b;
    font-size: .96rem;
    font-weight: 800;
    padding: .82rem 1.85rem;
    border-radius: 999px;
    letter-spacing: 0;
    box-shadow: 0 16px 28px rgba(37, 82, 114, .08), inset 0 1px 0 rgba(255,255,255,.96);
}
.fields-domain-section.section-dark-shell .section-header h2 {
    color: #123a58;
    text-shadow: none;
    font-size: clamp(2rem, 4vw, 3.15rem);
    margin-bottom: .9rem;
}
.fields-domain-section.section-dark-shell .section-header p {
    color: rgba(42, 73, 96, .78);
    max-width: 760px;
    font-size: 1.02rem;
    line-height: 1.95;
}
.fields-domain-summary {
    padding: 1.45rem 1.4rem;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(173, 233, 255, .2), transparent 30%),
        linear-gradient(180deg, rgba(31, 89, 129, .88), rgba(23, 65, 97, .84));
    box-shadow: 0 26px 46px rgba(10, 37, 60, .18);
    border: 1px solid rgba(126, 218, 255, .16);
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.fields-domain-summary-label {
    display: inline-flex;
    align-items: center;
    padding: .38rem .8rem;
    border-radius: 999px;
    background: rgba(126, 218, 255, .12);
    border: 1px solid rgba(126, 218, 255, .18);
    font-size: .76rem;
    font-weight: 700;
    margin-bottom: .9rem;
}
.fields-domain-summary strong {
    display: block;
    font-family: var(--font-latin);
    font-size: clamp(2.5rem, 4vw, 3.4rem);
    line-height: 1;
    margin-bottom: .6rem;
}
.fields-domain-summary p {
    color: rgba(216, 234, 245, .82);
    font-size: .92rem;
    line-height: 1.85;
    margin-bottom: 1rem;
    max-width: none;
}
.fields-domain-summary-points {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.fields-domain-summary-points span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(126, 218, 255, .1);
    color: #e8fbff;
    font-size: .78rem;
    font-weight: 700;
    border: 1px solid rgba(126, 218, 255, .14);
}
.fields-domain-section .fields-domain-grid {
    gap: 1.4rem;
}
.fields-domain-section .domain-card {
    background:
        radial-gradient(circle at top right, rgba(176, 234, 255, .18), transparent 32%),
        linear-gradient(180deg, rgba(34, 93, 133, .9), rgba(24, 69, 102, .86));
    border: 1px solid rgba(126, 218, 255, .14);
    border-radius: 30px;
    padding: 1.35rem;
    box-shadow: 0 20px 38px rgba(14, 43, 68, .16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    overflow: hidden;
}
.fields-domain-section .domain-card::after {
    display: none;
}
.fields-domain-section .domain-card:hover {
    background:
        radial-gradient(circle at top right, rgba(191, 239, 255, .24), transparent 36%),
        linear-gradient(180deg, rgba(42, 109, 153, .94), rgba(27, 78, 114, .9));
    border-color: rgba(141, 227, 255, .22);
    box-shadow: 0 28px 50px rgba(14, 43, 68, .2);
    transform: translateY(-8px);
}
.fields-domain-section .domain-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
}
.fields-domain-section .domain-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 36px;
    padding: 0 .7rem;
    border-radius: 999px;
    background: rgba(126, 218, 255, .12);
    color: #9ae9ff;
    font-family: var(--font-latin);
    font-size: .86rem;
    font-weight: 800;
}
.fields-domain-section .domain-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    margin: 0;
    background: linear-gradient(180deg, rgba(71, 165, 219, .3), rgba(31, 90, 134, .22));
    border: 1px solid rgba(126, 218, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px rgba(2, 11, 20, .22);
}
.fields-domain-section .domain-card:hover .domain-icon {
    background: linear-gradient(180deg, rgba(87, 187, 242, .34), rgba(35, 103, 150, .24));
}
.fields-domain-section .domain-card .domain-icon svg {
    color: #f3fbff;
    stroke: #f3fbff;
}
.fields-domain-section .domain-copy {
    text-align: right;
}
.fields-domain-section .domain-name {
    color: #f3fbff;
    font-size: 1.08rem;
    font-weight: 800;
    margin-bottom: .45rem;
    text-shadow: none;
}
.fields-domain-section .domain-brief {
    color: rgba(214, 232, 244, .78);
    font-size: .9rem;
    line-height: 1.86;
    margin: 0;
    max-width: none;
}
.fields-domain-section .domain-meta {
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid rgba(126, 218, 255, .12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}
.fields-domain-section .domain-tag {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .4rem .78rem;
    border-radius: 999px;
    background: rgba(126, 218, 255, .1);
    color: #9de9ff;
    border: 1px solid rgba(126, 218, 255, .14);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.fields-domain-section .domain-meta-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(126, 218, 255, .36));
}

/* ─── Membership Home Split ──────────────────────────── */
.membership-preview-section {
    background: linear-gradient(180deg, #f9f6f0 0%, #f3ede4 100%);
}
.membership-home-grid {
    display: block;
}
.membership-home-copy {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding: 3.25rem 3rem;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(176, 145, 107, .18);
    border-radius: 32px;
    box-shadow: 0 20px 48px rgba(73, 56, 31, .08);
}
.membership-preview-section .tag {
    background: linear-gradient(180deg, #ffffff, #f6efe5);
    border: 1px solid rgba(176, 145, 107, .28);
    color: #21425d;
    font-size: .96rem;
    font-weight: 800;
    padding: .9rem 2rem;
    border-radius: 999px;
    letter-spacing: 0;
    box-shadow: 0 12px 28px rgba(82, 62, 36, .10), inset 0 1px 0 rgba(255,255,255,.92);
}
.membership-preview-section h2 {
    color: #173451;
    font-size: clamp(1.75rem, 2.8vw, 2.55rem);
    line-height: 1.45;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.2rem;
}
.membership-preview-section .text-muted {
    color: rgba(47, 67, 84, .86);
    max-width: 660px;
    margin: 0 auto;
    font-size: 1.08rem;
    line-height: 2;
}
.membership-types-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    margin-top: 1.5rem;
}
.mem-type-mini {
    display: flex; align-items: center; gap: .75rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.mem-type-mini:hover { border-color: var(--accent); box-shadow: 0 3px 10px rgba(22,184,217,.09); transform: translateY(-2px); }
.mem-ico { font-size: 1.5rem; flex-shrink: 0; }
.mem-ico svg { width: 22px; height: 22px; }
.mem-type-title { font-weight: 700; color: var(--navy); font-size: .88rem; }
.mem-type-copy { font-size: .76rem; color: var(--text-muted); }
.home-actions-row {
    display: flex;
    gap: .75rem;
    margin-top: 1.75rem;
    flex-wrap: wrap;
}
.membership-preview-section .home-actions-row {
    justify-content: center;
}

/* ─── Partnerships Home Split ────────────────────────── */
.partnerships-home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
}
.partnerships-home-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.partnerships-home-grid .tag {
    display: inline-block;
    background: linear-gradient(180deg, #ffffff, #f6efe5);
    border: 1px solid rgba(176, 145, 107, .28);
    color: #21425d;
    font-size: .96rem;
    font-weight: 800;
    padding: .9rem 2rem;
    border-radius: 999px;
    letter-spacing: 0;
    box-shadow: 0 12px 28px rgba(82, 62, 36, .10), inset 0 1px 0 rgba(255,255,255,.92);
    margin-bottom: 1rem;
}
.partnerships-home-copy h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}
.partnerships-home-copy p {
    margin: 0;
}
.partner-types-mini {
    display: flex; flex-wrap: wrap; gap: .65rem;
    margin: 1.25rem 0;
}
.partner-type-mini {
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 8px;
    padding: .45rem 1rem;
    color: rgba(255,255,255,.92);
    font-size: .85rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .4rem;
    transition: all var(--transition);
    box-shadow: 0 10px 24px rgba(18,58,88,.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.text-white-soft { color: rgba(255,255,255,.86); }
.partnerships-home-copy .home-actions-row {
    margin-top: 1rem;
}

.partnerships-preview-section.section-dark-shell {
    background:
        radial-gradient(circle at top right, rgba(167, 218, 244, .34), transparent 24%),
        radial-gradient(circle at bottom left, rgba(210, 226, 238, .46), transparent 32%),
        linear-gradient(145deg, #f8fbfe 0%, #edf5fb 54%, #deebf6 100%);
}
.partnerships-preview-section.section-dark-shell::before {
    background-image:
        linear-gradient(rgba(44, 98, 136, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 98, 136, .055) 1px, transparent 1px);
    background-size: 56px 56px;
    background-color: transparent;
}
.partnerships-preview-section .section-shell-bg img {
    opacity: .08;
}

/* ─── Shared Sweep Utilities ─────────────────────────── */
.tag-accent-soft {
    background: var(--accent-glow);
    color: var(--accent);
    border: 1px solid rgba(22,184,217,.18);
}
.section-dark-shell {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.4), transparent 22%),
        radial-gradient(circle at bottom left, rgba(199,167,125,.16), transparent 24%),
        linear-gradient(180deg, rgba(248,241,231,.98), rgba(234,220,199,.95));
    overflow: hidden;
    position: relative;
}
.section-dark-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top center, rgba(255,255,255,.18), transparent 20%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(96,75,47,.04));
    pointer-events: none;
}
.section-shell-bg {
    position: absolute;
    inset: 0;
}
.section-shell-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .025;
    pointer-events: none;
}
.section-shell-inner {
    position: relative;
    z-index: 1;
}
.section-dark-shell .tag {
    background: rgba(255,255,255,.34);
    border-color: rgba(167,138,103,.18);
    color: #35526a;
}
.section-dark-shell .partnerships-home-grid .tag {
    background: linear-gradient(180deg, #ffffff, #f6efe5);
    border: 1px solid rgba(176, 145, 107, .28);
    color: #21425d;
    box-shadow: 0 12px 28px rgba(82, 62, 36, .10), inset 0 1px 0 rgba(255,255,255,.92);
}
.section-dark-shell .section-header h2 {
    color: var(--navy);
    text-shadow: none;
}
.section-dark-shell .section-header p { color: rgba(47,67,84,.84); }
.section-dark-shell .text-white { color: var(--navy); }
.section-dark-shell .text-white-soft { color: rgba(47,67,84,.82); }
.section-visual-framed {
    border: 1px solid rgba(167,138,103,.16);
    border-radius: var(--radius-lg);
}
.knowledge-preview-section {
    background: linear-gradient(180deg, #fffdfa 0%, #f8f2e8 100%);
}
.knowledge-preview-section .section-header .tag {
    background: linear-gradient(180deg, #ffffff, #f6efe5);
    border: 1px solid rgba(176, 145, 107, .28);
    color: #21425d;
    font-size: .96rem;
    font-weight: 800;
    padding: .9rem 2rem;
    border-radius: 999px;
    letter-spacing: 0;
    box-shadow: 0 12px 28px rgba(82, 62, 36, .10), inset 0 1px 0 rgba(255,255,255,.92);
}
.knowledge-preview-section .section-header h2 {
    color: #173451;
}
.knowledge-preview-section .section-header p {
    color: rgba(47, 67, 84, .82);
}
.events-preview-section {
    background: linear-gradient(180deg, #f6eee3 0%, #ecdfcc 100%);
}
.events-preview-section .section-header h2 {
    color: #173451;
}
.events-preview-section .section-header p {
    color: rgba(47, 67, 84, .8);
}
.final-home-cta-section {
    background:
        radial-gradient(circle at top right, rgba(167, 218, 244, .34), transparent 24%),
        radial-gradient(circle at bottom left, rgba(210, 226, 238, .46), transparent 32%),
        linear-gradient(145deg, #f8fbfe 0%, #edf5fb 54%, #deebf6 100%);
}
.final-home-cta-section::before {
    background-image:
        linear-gradient(rgba(44,98,136,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44,98,136,.055) 1px, transparent 1px);
}
.final-home-cta-section h2 {
    color: #173451;
}
.final-home-cta-section p {
    color: rgba(47, 67, 84, .82);
}
.article-link-accent {
    color: var(--accent);
    font-weight: 700;
}
.events-list-narrow {
    max-width: 860px;
    margin: 0 auto;
}
.filter-chip-wrap-centered {
    justify-content: center;
    margin-top: 32px;
}
.about-intro-title {
    color: var(--navy);
    margin: 1rem 0 1.25rem;
}
.about-intro-lead {
    color: #1f3f5a;
    font-size: clamp(1.24rem, 1.8vw, 1.6rem);
    font-weight: 500;
    line-height: 2;
    max-width: 920px;
    margin: 0 auto 1.35rem;
    text-align: center;
}
.about-intro-copy {
    color: rgba(47, 67, 84, .8);
    font-size: clamp(1.05rem, 1.35vw, 1.26rem);
    line-height: 2.05;
    max-width: 880px;
    margin: 0 auto 1rem;
    text-align: center;
}
.about-intro-copy:last-child { margin-bottom: 0; }
.about-floating-card svg,
.challenge-icon svg,
.problem-card-icon svg,
.bridge-connector svg,
.domain-icon svg,
.vp-icon-box svg {
    color: var(--accent);
    flex-shrink: 0;
}
.domain-card .domain-icon svg { color: var(--navy); }
.about-floating-card.tone-gold svg { color: var(--gold); }
.reveal-delay-1 { transition-delay: .05s; }
.reveal-delay-2 { transition-delay: .1s; }
.reveal-delay-3 { transition-delay: .15s; }
.reveal-delay-4 { transition-delay: .2s; }
.reveal-delay-5 { transition-delay: .25s; }
.reveal-delay-6 { transition-delay: .3s; }
.reveal-delay-7 { transition-delay: .35s; }
.reveal-delay-8 { transition-delay: .4s; }

/* ═══════════════════════════════════════════════════════
   Phase 5 — About Page
   ═══════════════════════════════════════════════════════ */

/* ─── Page Hero Enhancement ──────────────────────────── */
.about-page-hero { position: relative; overflow: hidden; }
.about-hero-decoration {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.about-hero-decoration img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .042;
    pointer-events: none;
}
.about-page-hero > .container { position: relative; z-index: 1; }
.about-feature-tag {
    background: linear-gradient(180deg, #ffffff, #f6efe5) !important;
    border: 1px solid rgba(176, 145, 107, .28) !important;
    color: #21425d !important;
    font-size: .96rem !important;
    font-weight: 800 !important;
    padding: .9rem 2rem !important;
    border-radius: 999px !important;
    letter-spacing: 0 !important;
    box-shadow: 0 12px 28px rgba(82, 62, 36, .10), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.about-problem-section {
    background: linear-gradient(180deg, #fffdfa 0%, #f6efe5 100%);
}
.about-problem-section .section-shell-bg {
    display: none;
}
.about-problem-section .section-header .tag {
    background: linear-gradient(180deg, #ffffff, #f6efe5);
    border: 1px solid rgba(176, 145, 107, .28);
    color: #21425d;
    font-size: .96rem;
    font-weight: 800;
    padding: .9rem 2rem;
    border-radius: 999px;
    letter-spacing: 0;
    box-shadow: 0 12px 28px rgba(82, 62, 36, .10), inset 0 1px 0 rgba(255,255,255,.92);
}
.about-problem-section .section-header h2 {
    color: #173451;
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    line-height: 1.32;
}
.about-problem-section .section-divider {
    display: block;
}
.about-problem-section .section-header p {
    color: rgba(47, 67, 84, .86);
    max-width: 680px;
    font-size: 1.02rem;
    line-height: 1.9;
}
.about-problem-section .problem-solve-grid {
    margin-top: 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.about-problem-section .problem-card {
    background: #ffffff;
    border: 1px solid rgba(176, 145, 107, .14);
    min-height: auto;
    padding: 1.2rem 1rem;
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.about-problem-section .problem-card::after {
    display: none;
}
.about-problem-section .problem-card:hover {
    background: #fffdfa;
    border-color: rgba(176, 145, 107, .24);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.about-problem-section .problem-card-icon {
    display: none;
}
.about-problem-section .problem-card:hover .problem-card-icon {
    display: none;
}
.about-problem-section .problem-card-title {
    color: #173451;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.75;
    margin: 0;
    text-align: center;
}
.about-problem-summary {
    max-width: 920px;
    margin: 2.25rem auto 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.about-problem-summary p {
    color: rgba(47, 67, 84, .84);
    font-size: 1.02rem;
    line-height: 1.95;
    text-align: center;
    margin: 0 auto .7rem;
    max-width: 760px;
}
.about-problem-summary p:last-child {
    margin-bottom: 0;
}
.about-founding-section .section-header h2 {
    color: #173451;
}
.about-founding-section .section-divider {
    display: none;
}
.about-hero-subtitle {
    max-width: 680px;
    margin: 0 auto;
    color: rgba(255,255,255,.92);
    font-size: .98rem;
    line-height: 2;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    padding: 1rem 1.35rem;
    box-shadow: 0 18px 36px rgba(18,58,88,.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.about-page-hero .about-hero-subtitle + .about-hero-subtitle {
    margin-top: 1rem;
}

.partner-type-mini svg { width: 16px; height: 16px; }
/* ─── Intro Credibility Badges ───────────────────────── */
.about-intro-badges {
    display: flex; flex-wrap: wrap; gap: .6rem;
    margin-top: 1.75rem;
}
.about-badge {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .42rem 1rem;
    font-size: .8rem; font-weight: 600;
    color: var(--text);
    transition: all var(--transition);
}
.about-badge:hover { border-color: var(--accent); color: var(--accent); }
.about-badge-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
}

/* ─── Challenge Cards Grid ───────────────────────────── */
.about-challenge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.challenge-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    position: relative; overflow: hidden;
}
.challenge-card::after {
    content: '';
    position: absolute; right: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(to bottom, var(--accent), var(--gold));
    transform: scaleY(0); transform-origin: bottom;
    transition: transform var(--transition);
}
.challenge-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(22,184,217,.14); }
.challenge-card:hover::after { transform: scaleY(1); }
.challenge-icon {
    width: 46px; height: 46px;
    border-radius: 11px;
    background: var(--accent-glow);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.1rem;
    transition: background var(--transition);
}
.challenge-card:hover .challenge-icon { background: rgba(22,184,217,.16); }
.challenge-card h3 { font-size: 1.02rem; color: var(--navy); margin-bottom: .5rem; font-weight: 700; }
.challenge-card p  { font-size: .875rem; color: var(--text-muted); margin: 0; line-height: 1.78; }

/* ─── What We Do Grid (dark section) ────────────────── */
.problem-solve-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.problem-card {
    background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.24);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem;
    transition: all var(--transition);
    position: relative; overflow: hidden;
    box-shadow: 0 18px 34px rgba(18,58,88,.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.problem-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    transform: scaleX(0); transition: transform var(--transition);
    transform-origin: center;
}
.problem-card:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.12));
    border-color: rgba(255,255,255,.34);
    box-shadow: 0 24px 40px rgba(18,58,88,.16);
    transform: translateY(-4px);
}
.problem-card:hover::after { transform: scaleX(1); }
.problem-card-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
    transition: background var(--transition);
}
.problem-card:hover .problem-card-icon { background: rgba(255,255,255,.24); }
.problem-card-title { color: rgba(255,255,255,.96); font-size: .92rem; font-weight: 700; margin-bottom: .35rem; }
.problem-card-desc  { color: rgba(255,255,255,.8); font-size: .78rem; line-height: 1.75; }

/* ─── Bridge Grid ────────────────────────────────────── */
.bridge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.bridge-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    transition: all var(--transition);
}
.bridge-card:hover { box-shadow: var(--shadow); border-color: rgba(22,184,217,.15); transform: translateY(-2px); }
.bridge-side  { font-size: .92rem; font-weight: 700; color: var(--navy); }
.bridge-side-b { font-size: .92rem; font-weight: 700; color: var(--navy-light); text-align: left; }
.bridge-connector {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-glow);
    border: 1px solid rgba(22,184,217,.20);
    display: flex; align-items: center; justify-content: center;
}

/* ─── Founding Quote Block ───────────────────────────── */
.founding-quote-block {
    background: linear-gradient(150deg, var(--navy-mid) 0%, var(--accent-dark) 100%);
    border-radius: var(--radius-lg);
    padding: 3.5rem;
    position: relative; overflow: hidden;
    margin-bottom: 2rem;
}
.founding-quote-block::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 44px 44px;
}
.founding-quote-inner { position: relative; text-align: center; }
.founding-quote-mark {
    display: block;
    font-size: 4rem; line-height: 1;
    color: var(--gold); opacity: .32;
    font-family: 'Georgia', 'Times New Roman', serif;
    margin-bottom: -.5rem;
}
.founding-quote-text {
    color: rgba(255,255,255,.88);
    font-size: 1.1rem; line-height: 2.1;
    font-weight: 500;
    max-width: 680px;
    margin: 0 auto 1.5rem;
}
.founding-quote-source {
    color: rgba(255,255,255,.35);
    font-size: .8rem; font-weight: 500;
}

/* ─── Transformation Pillars ─────────────────────────── */
.transform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}
.transform-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    position: relative; overflow: hidden;
}
.transform-card::before {
    content: '';
    position: absolute; top: 0; right: 0; left: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    transform: scaleX(0); transition: transform var(--transition);
    transform-origin: right;
}
.transform-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.transform-card:hover::before { transform: scaleX(1); }
.transform-label-top {
    font-size: .7rem; color: var(--text-muted); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: .4rem;
}
.transform-val-before {
    color: var(--text-muted); font-size: .95rem; font-weight: 600;
    margin-bottom: 1rem;
}
.transform-divider-line {
    width: 1px; height: 28px;
    background: linear-gradient(to bottom, rgba(22,184,217,.3), var(--accent));
    margin: 0 auto;
}
.transform-label-bottom {
    font-size: .7rem; color: var(--accent); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    margin-top: 1rem; margin-bottom: .4rem;
}
.transform-val-after {
    color: var(--navy); font-size: 1rem; font-weight: 700;
}
.partner-type-mini:hover {
    background: rgba(255,255,255,.24);
    border-color: rgba(255,255,255,.34);
    box-shadow: 0 14px 30px rgba(18,58,88,.14);
    transform: translateY(-2px);
}

/* =====================================================
   2026 Theme Refresh — Global Color Override
   ===================================================== */

:root {
    --beige:       #DCE8F1;
    --beige-soft:  #EEF4F8;
    --beige-warm:  #BED2E1;
    --beige-deep:  #8FA8BC;
    --ink-dark:    #10283E;
    --navy:        #071B2E;
    --navy-mid:    #0D3D61;
    --navy-light:  #1F76A9;
    --accent:      #16C4D7;
    --accent-dark: #118AA8;
    --accent-glow: rgba(22,196,215,.16);
    --gold:        #E9B36A;
    --gold-light:  rgba(233,179,106,.18);
    --bg:          #EEF4F8;
    --bg-section:  #E3EDF4;
    --text:        #10283E;
    --text-muted:  #617C91;
    --color-muted: #7C96A8;
    --border:      #C7D7E3;
    --border-dark: #98AFC1;
    --surface:     #FBFDFF;
    --surface-alt: #EDF4F9;
    --surface-soft: rgba(251,253,255,.92);
    --hero-bg:     #071B2E;
    --hero-bg-soft:#0A2C45;
    --hero-cyan:   #59E5F1;
    --hero-blue:   #2395CB;
    --hero-gold:   #F0C07E;
    --hero-surface: rgba(255,255,255,.08);
    --hero-surface-strong: rgba(255,255,255,.13);
    --hero-border: rgba(120,216,255,.18);
    --hero-muted:  rgba(226,238,246,.8);
    --shadow-sm:   0 16px 30px rgba(7,27,46,.08);
    --shadow:      0 24px 46px rgba(7,27,46,.12);
    --shadow-lg:   0 34px 62px rgba(7,27,46,.16);
    --hero-teal:   #16C4D7;
    --hero-text:   #F4FBFF;
    --hero-sub:    rgba(226,238,246,.84);
    --hero-bg-1:   #071B2E;
    --hero-bg-2:   #0A2C45;
    --hero-bg-3:   #0F466B;
}

body {
    background: linear-gradient(180deg, #EEF4F8 0%, #E5EEF5 100%);
}

body::before {
    background:
        radial-gradient(circle at top right, rgba(73,194,228,.18), transparent 26%),
        radial-gradient(circle at bottom left, rgba(233,179,106,.12), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,.62), rgba(217,231,241,.24));
}

::selection {
    background: rgba(22,196,215,.22);
    color: var(--navy);
}

.section-header .tag {
    background: linear-gradient(180deg, rgba(22,196,215,.14), rgba(17,138,168,.08));
    color: var(--accent-dark);
    border-color: rgba(17,138,168,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.section-header h2 {
    color: var(--navy);
}

.site-header {
    background: linear-gradient(180deg, rgba(3,12,22,.42), rgba(3,12,22,0));
}

.navbar {
    background:
        radial-gradient(circle at top left, rgba(27,153,200,.16), transparent 28%),
        linear-gradient(180deg, rgba(6,22,38,.92), rgba(10,40,63,.9));
    border: 1px solid rgba(120,216,255,.16);
    box-shadow: 0 20px 44px rgba(4,15,26,.32), inset 0 1px 0 rgba(255,255,255,.1);
}

.brand-icon {
    background: linear-gradient(180deg, rgba(73,194,228,.3), rgba(13,61,97,.82));
    border-color: rgba(120,216,255,.18);
    box-shadow: 0 12px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}

.brand-name,
.mobile-menu-title,
.footer-brand-name,
.footer-heading {
    color: #F6FCFF;
}

.brand-sub,
.footer-brand-sub {
    color: var(--hero-muted);
}

.nav-links {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border-color: rgba(120,216,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.nav-link {
    color: rgba(234,246,252,.74);
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(21,192,213,.24), rgba(18,105,156,.28));
    box-shadow: 0 12px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.12);
}

.language-switch {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    color: rgba(240,248,252,.9);
    border-color: rgba(120,216,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.language-switch .language-switch-icon {
    color: #92EEFB;
}

.nav-actions .btn-outline:hover,
.language-switch:hover {
    background: linear-gradient(180deg, rgba(21,192,213,.16), rgba(18,105,156,.14));
    border-color: rgba(120,216,255,.28);
    color: #fff;
}

.nav-actions .btn-accent {
    background: linear-gradient(135deg, #1AD2E1, #178CC0);
    color: #F8FDFF;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 16px 32px rgba(12,95,140,.28);
}

.nav-actions .btn-accent:hover {
    background: linear-gradient(135deg, #31DBE8, #1C98CB);
    box-shadow: 0 18px 34px rgba(12,95,140,.34);
}

.hamburger {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border-color: rgba(120,216,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.mobile-menu-panel {
    background: linear-gradient(180deg, rgba(6,22,38,.98), rgba(9,40,63,.98));
    border-color: rgba(120,216,255,.12);
}

.mobile-link,
.mobile-close {
    color: rgba(244,251,255,.86);
}

.mobile-link:hover {
    background: rgba(22,196,215,.12);
    color: #fff;
}

.mobile-cta {
    border-top-color: rgba(120,216,255,.12);
}

.hamburger span {
    background: #F4FBFF;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-dark), var(--navy-light));
    box-shadow: 0 16px 30px rgba(12,80,120,.24);
}

.btn-primary:hover {
    box-shadow: 0 18px 34px rgba(12,80,120,.3);
}

.btn-accent {
    background: linear-gradient(135deg, #34D9E7, #2192C8);
    box-shadow: 0 14px 28px rgba(22,196,215,.24);
}

.btn-outline {
    background: rgba(7,27,46,.82);
    border-color: rgba(120,216,255,.18);
}

.btn-outline:hover {
    background: rgba(10,45,72,.96);
    border-color: rgba(73,194,228,.4);
    color: #F4FBFF;
}

.btn-outline-dark {
    background: rgba(255,255,255,.66);
    color: var(--navy);
    border-color: rgba(132,164,187,.22);
}

.btn-outline-dark:hover {
    background: #fff;
    border-color: rgba(17,138,168,.26);
    color: var(--accent-dark);
}

.section-muted,
.why-union-section,
.intro-brief-section,
.programs-preview-section,
.membership-preview-section,
.knowledge-preview-section,
.events-preview-section,
.vision-values-section,
.vision-page {
    background: linear-gradient(180deg, #EEF4F8 0%, #E5EEF5 100%);
}

.why-card,
.program-card,
.membership-type-card,
.form-section,
.info-card,
.article-card,
.event-card,
.report-card,
.report-row,
.value-card,
.partner-type-card,
.media-card,
.bridge-card,
.transform-card,
.challenge-card,
.intro-brief-card,
.membership-home-copy,
.footer-cta-card,
.vision-page .vision-card {
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,248,252,.98));
    border-color: rgba(132,164,187,.18);
    box-shadow: 0 20px 40px rgba(7,27,46,.08);
}

.why-card:hover,
.program-card:hover,
.article-card:hover,
.event-card:hover,
.report-card:hover,
.report-row:hover,
.value-card:hover,
.partner-type-card:hover,
.media-card:hover,
.bridge-card:hover,
.transform-card:hover {
    box-shadow: 0 28px 54px rgba(7,27,46,.12);
    border-color: rgba(17,138,168,.24);
}

.why-icon,
.report-icon {
    background: linear-gradient(135deg, rgba(22,196,215,.16), rgba(17,138,168,.1));
    color: var(--accent-dark);
}

.program-card-top {
    background: linear-gradient(135deg, #0B2E4A 0%, #126089 72%, #1CB7CE 100%);
}

.program-card-top::before,
.page-hero::before,
.cta-section::before,
.section-dark-shell::before,
.site-footer::before {
    background-image:
        linear-gradient(rgba(73,194,228,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73,194,228,.08) 1px, transparent 1px);
}

.program-icon,
.value-icon {
    background: linear-gradient(135deg, #34D9E7, #1B8DC2);
    box-shadow: 0 16px 30px rgba(27,141,194,.22);
}

.program-card-top h3,
.program-tag,
.page-hero h1,
.cta-section h2,
.contact-info-card h3,
.vision-page .vision-card-dark h3,
.section-dark-shell .section-header h2,
.section-dark-shell .text-white {
    color: #F4FBFF;
}

.program-tag {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.18);
}

.program-body p,
.program-meta,
.article-card-body p,
.event-info p,
.report-card p,
.report-row p,
.partner-type-card ul li,
.value-card p,
.vision-page .section-header p,
.vision-page-hero p {
    color: var(--text-muted);
}

.membership-type-card.featured,
.article-card-img,
.event-date-box,
.contact-info-card,
.about-visual,
.page-hero,
.cta-section,
.vision-page-hero,
.vision-page .vision-card-dark,
.founding-quote-block,
.final-home-cta-section {
    background: linear-gradient(145deg, #071B2E 0%, #0D3D61 62%, #118AA8 100%);
}

.page-hero p,
.cta-section p,
.breadcrumb,
.section-dark-shell .section-header p,
.section-dark-shell .text-white-soft,
.contact-item-text a,
.contact-item-text p,
.founding-quote-text {
    color: rgba(226,238,246,.8);
}

.section-dark-shell,
.fields-domain-section.section-dark-shell,
.partnerships-preview-section.section-dark-shell {
    background:
        radial-gradient(circle at top right, rgba(73,194,228,.18), transparent 24%),
        radial-gradient(circle at bottom left, rgba(233,179,106,.12), transparent 22%),
        linear-gradient(145deg, #071B2E 0%, #0C3555 56%, #0F466B 100%);
}

.section-dark-shell .tag,
.section-dark-shell .partnerships-home-grid .tag,
.fields-domain-section.section-dark-shell .section-header .tag,
.membership-preview-section .tag,
.knowledge-preview-section .section-header .tag,
.programs-preview-section .section-header .tag,
.partnerships-home-grid .tag {
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,247,252,.92));
    border-color: rgba(132,164,187,.18);
    color: var(--accent-dark);
    box-shadow: 0 14px 30px rgba(7,27,46,.08);
}

.section-dark-shell .tag,
.section-dark-shell .partnerships-home-grid .tag,
.fields-domain-section.section-dark-shell .section-header .tag {
    background: rgba(255,255,255,.08);
    border-color: rgba(120,216,255,.18);
    color: #D8F8FF;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.fields-domain-summary {
    background: linear-gradient(160deg, rgba(6,28,48,.88), rgba(12,70,107,.88));
    border-color: rgba(120,216,255,.16);
    box-shadow: 0 30px 60px rgba(2,15,26,.26);
}

.fields-domain-summary-label,
.fields-domain-summary-points span,
.fields-domain-section .domain-tag {
    background: rgba(73,194,228,.12);
    border-color: rgba(120,216,255,.18);
    color: #D6F8FF;
}

.fields-domain-summary p,
.fields-domain-section .domain-brief,
.fields-domain-section.section-dark-shell .section-header p {
    color: rgba(226,240,248,.76);
}

.fields-domain-section .domain-card {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border-color: rgba(120,216,255,.14);
    box-shadow: 0 22px 42px rgba(0,0,0,.18);
}

.fields-domain-section .domain-card:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    border-color: rgba(120,216,255,.24);
}

.fields-domain-section .domain-index {
    background: rgba(73,194,228,.12);
    color: #C8F5FF;
}

.fields-domain-section .domain-icon {
    background: linear-gradient(180deg, rgba(73,194,228,.22), rgba(13,61,97,.32));
    border-color: rgba(120,216,255,.18);
}

.fields-domain-section .domain-name,
.fields-domain-section .domain-card .domain-icon svg,
.problem-card-title {
    color: #fff;
    stroke: #fff;
}

.fields-domain-section .domain-meta-line {
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(120,216,255,.4));
}

.intro-brief-card {
    background:
        radial-gradient(circle at top right, rgba(73,194,228,.14), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,246,251,.98));
}

.intro-brief-copy p {
    color: rgba(36,58,76,.86);
}

.intro-brief-copy p:first-child,
.membership-preview-section h2,
.knowledge-preview-section .section-header h2,
.programs-preview-section .section-header h2,
.events-preview-section .section-header h2,
.vision-page .section-header h2,
.vision-page-hero h1 {
    color: var(--navy);
}

.membership-preview-section .text-muted,
.knowledge-preview-section .section-header p,
.events-preview-section .section-header p,
.programs-preview-section .section-header p {
    color: var(--text-muted);
}

.section-visual-framed {
    border-color: rgba(120,216,255,.12);
    box-shadow: 0 24px 48px rgba(7,27,46,.18);
    background: rgba(255,255,255,.06);
}

.form-control {
    background: rgba(239,246,251,.86);
    border-color: rgba(132,164,187,.22);
}

.form-control:focus {
    background: #fff;
}

.hero-orbit-section {
    background: linear-gradient(135deg, #0B243A 0%, #123B58 52%, #19577D 100%);
}

.hero-orbit-section::before {
    background-image:
        linear-gradient(270deg,
            rgba(5,18,31,.52) 0%,
            rgba(5,18,31,.2) 52%,
            rgba(5,18,31,.08) 100%),
        linear-gradient(180deg,
            rgba(73,194,228,.12) 0%,
            rgba(73,194,228,0) 60%,
            rgba(233,179,106,.12) 100%);
}

.hero-orbit-section::after {
    opacity: .42;
    filter: saturate(.74) contrast(1.02) brightness(.72);
}

.hero-bg-dots {
    background-image: radial-gradient(circle, rgba(73,194,228,.78) 1px, transparent 1px);
    opacity: .09;
}

.hero-bg-orb {
    background: radial-gradient(circle, rgba(73,194,228,.22) 0%, rgba(73,194,228,0) 70%);
    opacity: .4;
}

.hero-stage-kicker {
    background: rgba(255,255,255,.08);
    border-color: rgba(120,216,255,.18);
    color: #D8F8FF;
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

.hero-stage-title {
    color: var(--hero-text);
    -webkit-text-fill-color: var(--hero-text) !important;
    text-shadow: 0 10px 30px rgba(0,0,0,.24);
}

.hero-stage-title-line-top { color: #F5FBFF; }
.hero-stage-title-line-middle { color: #8CEFFF; }
.hero-stage-title-line-bottom { color: rgba(226,238,246,.86); }

.hero-stage-word-gradient {
    background: none !important;
    -webkit-text-fill-color: #7FEFFF !important;
    color: #7FEFFF !important;
}

.hero-stage-desc,
.hero-stage-route-body span,
.hero-stage-stat-label,
.hero-stage-stat-eyebrow {
    color: var(--hero-sub);
}

.hero-stage-support,
.hero-stage-route,
.hero-stage-stats-bar {
    background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
    border: 1px solid rgba(120,216,255,.16);
    box-shadow: 0 24px 54px rgba(0,0,0,.22);
    backdrop-filter: blur(16px);
}

.btn-hero-primary {
    background: linear-gradient(135deg, #19C9DC, #1B79B1) !important;
    box-shadow: 0 16px 36px rgba(11,89,133,.34);
}

.btn-hero-outline {
    background: rgba(255,255,255,.04) !important;
    color: #DFF9FF !important;
    border-color: rgba(120,216,255,.26) !important;
}

.btn-hero-outline:hover {
    background: rgba(120,216,255,.12) !important;
}

.btn-hero-white {
    background: rgba(255,255,255,.94) !important;
    color: var(--navy) !important;
    border-color: rgba(120,216,255,.16) !important;
}

.btn-hero-white:hover {
    border-color: #19C9DC !important;
    color: #0C577E !important;
}

.hero-stage-route:hover {
    border-color: rgba(120,216,255,.28);
    box-shadow: 0 20px 38px rgba(0,0,0,.2);
}

.hero-stage-route-icon,
.route-membership .hero-stage-route-icon,
.route-partnerships .hero-stage-route-icon {
    background: linear-gradient(135deg, #19C9DC, #1B79B1);
}

.hero-stage-route-body strong,
.hero-stage-stat .stat-num {
    color: #F4FBFF;
}

.hero-stage-route-body small {
    color: #8CEFFF;
}

.badge-upcoming,
.badge-news,
.badge-blue {
    background: rgba(36,154,197,.14);
    color: #0E6B89;
}

.badge-ongoing,
.badge-identity,
.badge-green {
    background: rgba(16,185,129,.14);
    color: #0F766E;
}

.badge-completed,
.badge-gray {
    background: rgba(100,116,139,.12);
    color: #516679;
}

.badge-workshop,
.badge-photo,
.badge-yellow {
    background: rgba(233,179,106,.18);
    color: #9A5F15;
}

.badge-seminar,
.badge-press {
    background: rgba(91,93,196,.14);
    color: #4047A1;
}

.badge-conference {
    background: rgba(73,194,228,.14);
    color: var(--accent-dark);
}

.badge-red {
    background: rgba(239,68,68,.14);
    color: #B42318;
}

.site-footer {
    background:
        radial-gradient(circle at top right, rgba(73,194,228,.18), transparent 26%),
        linear-gradient(180deg, #051523 0%, #0A2F4A 100%);
    color: rgba(240,248,252,.8);
}

.vision-cta-card,
.footer-cta-card {
    background: linear-gradient(180deg, rgba(248,252,255,.96), rgba(232,242,249,.92));
    border-color: rgba(160,191,211,.3);
    box-shadow: 0 24px 48px rgba(1,18,33,.14);
    backdrop-filter: blur(14px);
}

.footer-kicker {
    background: rgba(255,255,255,.82);
    border-color: rgba(131,171,198,.24);
    color: #1A587C;
}

.footer-cta-copy p {
    color: rgba(38,67,89,.82);
}

.footer-cta-copy h2 {
    color: #10283E;
}

.footer-cta-actions .btn {
    background: linear-gradient(135deg, #1AAFD0, #2678AA);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 16px 30px rgba(27,102,146,.18);
    color: #fff;
}

.footer-cta-actions .btn:hover {
    background: linear-gradient(135deg, #22BCDB, #2F84B5);
    box-shadow: 0 18px 34px rgba(27,102,146,.24);
}

.footer-desc,
.footer-brand-sub,
.footer-links a,
.footer-contact a,
.footer-contact span,
.footer-bottom p {
    color: rgba(236,245,250,.84);
}

.footer-brand-name,
.footer-heading,
.footer-contact a,
.footer-contact span {
    color: #F9FDFF;
}

.footer-links a:hover,
.footer-contact a:hover {
    color: #9EF4FF;
}

.footer-badges span {
    background: rgba(255,255,255,.1);
    border-color: rgba(120,216,255,.14);
    color: rgba(244,250,253,.92);
}

.footer-contact-icon {
    background: rgba(255,255,255,.1);
    border-color: rgba(120,216,255,.16);
    color: #9EF4FF;
}

.social-link {
    background: rgba(255,255,255,.1);
    border-color: rgba(120,216,255,.16);
    color: rgba(244,250,253,.88);
}

.social-link:hover {
    background: var(--accent);
    color: var(--navy);
    border-color: var(--accent);
}

.fields-domain-section.section-dark-shell .section-header h2 {
    color: #F4FBFF;
    text-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.fields-domain-section.section-dark-shell .section-header p {
    color: rgba(236,245,250,.9);
}