/* =====================================================================
   URBAN GLOBAL UNIVERSITY — PREMIUM DESIGN SYSTEM
   Single source of truth for color, type, spacing, components, motion.
   Swap brand hex in :root to rebrand the entire site in one place.
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand — deep navy + gold academic palette */
  --navy-900: #061634;
  --navy-800: #0A1F44;
  --navy-700: #0E2A5E;
  --navy-600: #14387A;
  --navy-500: #1E4794;
  --navy-300: #6E86B6;
  --navy-100: #DCE4F2;

  --gold-600: #B8862F;
  --gold-500: #C9A24B;
  --gold-400: #DcBB6E;
  --gold-200: #F0DEB0;

  --ink: #0B1B33;
  --ink-soft: #33415C;
  --muted: #5B6B86;
  --line: #E6EAF2;
  --line-strong: #D3DAE8;
  --paper: #FFFFFF;
  --canvas: #F6F8FC;
  --canvas-2: #EEF2F9;

  --success: #16A34A;
  --danger: #DC2626;

  /* Primary semantic aliases */
  --brand: var(--navy-700);
  --brand-deep: var(--navy-900);
  --accent: var(--gold-500);

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 55%, var(--navy-500) 100%);
  --grad-hero: radial-gradient(1200px 600px at 78% -10%, rgba(201,162,75,.20), transparent 60%),
               radial-gradient(900px 500px at 8% 110%, rgba(30,71,148,.35), transparent 55%),
               linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 60%, #0a234e 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-400), var(--gold-600));

  /* Typography */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-hero: clamp(2.6rem, 1.4rem + 4.6vw, 5rem);
  --fs-h1: clamp(2.1rem, 1.3rem + 3.1vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 1.1rem + 2.1vw, 2.7rem);
  --fs-h3: clamp(1.3rem, 1rem + 1.1vw, 1.7rem);
  --fs-lead: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;
  --fs-eyebrow: .8rem;

  /* Spacing / layout */
  --container: 1200px;
  --container-wide: 1340px;
  --gutter: clamp(1.1rem, 3vw, 2.2rem);
  --section-y: clamp(3.6rem, 7vw, 7rem);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(11,27,51,.06);
  --sh-sm: 0 4px 14px rgba(11,27,51,.07);
  --sh-md: 0 14px 40px rgba(11,27,51,.10);
  --sh-lg: 0 30px 70px rgba(11,27,51,.16);
  --sh-gold: 0 12px 34px rgba(201,162,75,.35);
  --sh-brand: 0 16px 40px rgba(14,42,94,.30);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. RESET & BASE ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
h1,h2,h3,h4,h5 { font-family: var(--font-display); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. LAYOUT HELPERS ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container.wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-y); }
.section.tight { padding-block: clamp(2.4rem,5vw,4rem); }
.bg-canvas { background: var(--canvas); }
.bg-canvas-2 { background: var(--canvas-2); }
.bg-brand { background: var(--grad-brand); color: #fff; }
.center { text-align: center; }
.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 2rem); }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr;} }

/* ---------- 4. TYPOGRAPHY ELEMENTS ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-eyebrow); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-600);
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--grad-gold); border-radius: 2px; }
.bg-brand .eyebrow, .bg-brand .eyebrow { color: var(--gold-400); }
.section-head { max-width: 760px; margin: 0 auto clamp(2rem,4vw,3.2rem); text-align: center; }
.section-head h2 { font-size: var(--fs-h2); margin: .7rem 0 .8rem; }
.section-head p { color: var(--muted); font-size: var(--fs-lead); }
.bg-brand .section-head p { color: var(--navy-100); }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); }
.text-gold { color: var(--gold-600); }
.text-grad { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 5. BUTTONS ---------- */
.btn {
  --b-bg: var(--navy-700); --b-fg:#fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.7rem; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  background: var(--b-bg); color: var(--b-fg);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s;
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-brand); }
.btn:active { transform: translateY(0); }
.btn--gold { --b-bg: var(--gold-500); --b-fg: var(--navy-900); }
.btn--gold:hover { box-shadow: var(--sh-gold); background: var(--gold-400); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy-500); background: var(--canvas); }
.btn--on-dark.btn--ghost { --b-fg:#fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.btn--on-dark.btn--ghost:hover { background: rgba(255,255,255,.08); }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* magnetic wrapper */
.magnetic { display: inline-block; will-change: transform; }

/* ---------- 6. CARDS ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--line-strong); }

/* Program card */
.prog-card { display: flex; flex-direction: column; }
.prog-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--grad-brand); }
.prog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.prog-card:hover .prog-card__media img { transform: scale(1.06); }
.prog-card__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(6,22,52,.78); color: #fff; backdrop-filter: blur(6px);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem .7rem; border-radius: var(--r-pill);
}
.prog-card__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.prog-card__body h3 { font-size: 1.22rem; margin-bottom: .6rem; }
.prog-card__desc { color: var(--muted); font-size: .96rem; flex: 1; }
.prog-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  background: var(--canvas-2); padding: .35rem .7rem; border-radius: var(--r-pill);
}
.chip svg { width: .95em; height: .95em; color: var(--navy-500); }
.price { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1.1rem; }
.price__now { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--navy-700); }
.price__was { color: var(--muted); text-decoration: line-through; font-weight: 600; }
.price__save { font-size: .72rem; font-weight: 700; color: var(--success); background: rgba(22,163,74,.1); padding: .2rem .5rem; border-radius: var(--r-pill); }
.prog-card__actions { display: flex; gap: .6rem; margin-top: auto; }
.prog-card__actions .btn { flex: 1; padding: .8rem 1rem; font-size: .9rem; }

/* Feature card */
.feature { padding: 1.8rem; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.feature:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.feature__ic {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--navy-100); color: var(--navy-700); margin-bottom: 1.1rem;
}
.bg-brand .feature { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.bg-brand .feature:hover { background: rgba(255,255,255,.07); }
.bg-brand .feature h3 { color:#fff; } .bg-brand .feature p { color: var(--navy-100); }
.bg-brand .feature__ic { background: rgba(201,162,75,.16); color: var(--gold-400); }
.feature h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.feature p { color: var(--muted); font-size: .95rem; }

/* ---------- 7. STATS ---------- */
.stat { text-align: center; padding: 1.4rem 1rem; }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem,1.4rem+2.4vw,3.4rem); line-height: 1; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label { margin-top: .6rem; color: var(--navy-100); font-weight: 600; font-size: .98rem; }

/* ---------- 8. HEADER / NAV ---------- */
.topbar { background: var(--navy-900); color: #cdd8ee; font-size: .82rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; flex-wrap: wrap; }
.topbar a:hover { color: #fff; }
.topbar__social { display: flex; gap: .9rem; }
.topbar__social a { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); transition: background .25s, transform .25s; }
.topbar__social a:hover { background: var(--gold-500); color: var(--navy-900); transform: translateY(-2px); }
.topbar__social svg { width: 14px; height: 14px; }
@media (max-width: 720px){ .topbar__contact span:nth-child(2){ display:none;} .topbar { font-size:.76rem;} }

.header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .3s, background .3s; }
.header.scrolled { box-shadow: var(--sh-sm); background: rgba(255,255,255,.96); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-weight: 800; }
.brand img { height: 46px; width: auto; }
.brand__txt { display:flex; flex-direction:column; line-height:1; }
.brand__txt b { font-size: 1.02rem; color: var(--navy-800); letter-spacing: -.01em; }
.brand__txt span { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-600); font-weight: 700; }

.menu { display: flex; align-items: center; gap: .3rem; }
.menu > li { position: relative; }
.menu > li > a { display: flex; align-items: center; gap: .3rem; padding: .7rem .85rem; font-weight: 600; font-size: .95rem; color: var(--ink-soft); border-radius: var(--r-sm); transition: color .2s, background .2s; }
.menu > li > a:hover, .menu > li.active > a { color: var(--navy-700); background: var(--canvas); }
.menu .caret { width: 14px; height: 14px; transition: transform .3s; }
.menu > li:hover .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 290px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-lg);
  padding: .6rem; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility .28s;
}
.menu > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: .65rem .8rem; border-radius: var(--r-sm); font-size: .92rem; font-weight: 500; color: var(--ink-soft); transition: background .2s, color .2s, padding-left .2s; }
.dropdown a:hover { background: var(--canvas); color: var(--navy-700); padding-left: 1.05rem; }
.dropdown a small { display:block; color: var(--muted); font-weight:400; font-size:.76rem; }

.nav__cta { display: flex; align-items: center; gap: .7rem; }
.nav__cta .btn { padding: .7rem 1.25rem; font-size: .9rem; }
.burger { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); place-items: center; }
.burger span { position: relative; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s; }
.burger span::before, .burger span::after { content:""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s; }
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.burger.open span { background: transparent; }
.burger.open span::before { top: 0; transform: rotate(45deg); }
.burger.open span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px){
  .menu, .nav__cta .btn--login { display: none; }
  .burger { display: grid; }
}

/* Mobile drawer */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); background: #fff; z-index: 200; transform: translateX(100%); transition: transform .4s var(--ease-out); box-shadow: var(--sh-lg); overflow-y: auto; padding: 1.4rem; display:flex; flex-direction:column; gap:.4rem; }
.drawer.open { transform: translateX(0); }
.drawer__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.drawer__head button { font-size: 1.6rem; line-height: 1; color: var(--muted); width:40px;height:40px; }
.drawer__group > button { width:100%; display:flex; justify-content:space-between; align-items:center; padding:.9rem .6rem; font-family:var(--font-display); font-weight:700; color:var(--navy-800); border-bottom:1px solid var(--line); }
.drawer__sub { max-height:0; overflow:hidden; transition:max-height .35s var(--ease-out); }
.drawer__sub.open { max-height: 700px; }
.drawer__sub a { display:block; padding:.6rem .9rem; color:var(--ink-soft); font-size:.92rem; }
.drawer__sub a:hover { color: var(--navy-700); }
.drawer > a.drawer__link { padding:.9rem .6rem; font-family:var(--font-display); font-weight:700; color:var(--navy-800); border-bottom:1px solid var(--line); }
.overlay { position: fixed; inset: 0; background: rgba(6,22,52,.5); backdrop-filter: blur(2px); z-index: 150; opacity: 0; visibility: hidden; transition: .35s; }
.overlay.open { opacity: 1; visibility: visible; }

/* ---------- 9. MARQUEE ---------- */
.marquee { background: var(--grad-gold); color: var(--navy-900); overflow: hidden; padding: .7rem 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem; white-space: nowrap; flex: none; }
.marquee__group span { font-family: var(--font-display); font-weight: 700; font-size: .92rem; letter-spacing: .04em; }
.marquee__group .star { color: var(--navy-700); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 10. LOGO STRIPS ---------- */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.6rem,5vw,3.4rem); }
.logos img { height: 30px; width: auto; opacity: .6; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.logos img:hover { opacity: 1; filter: grayscale(0); }
.logo-marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logo-marquee__track { display:flex; align-items:center; gap:clamp(2rem,5vw,4rem); width:max-content; animation: marquee 38s linear infinite; }
.logo-marquee__track img { height: 34px; opacity:.55; filter:grayscale(1); }

/* ---------- 11. HERO ---------- */
.hero { position: relative; background: var(--grad-hero); color: #fff; overflow: hidden; padding-block: clamp(3.5rem,7vw,6.5rem); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
@media (max-width: 920px){ .hero__grid { grid-template-columns: 1fr; } }
.hero__badge { display:inline-flex; align-items:center; gap:.5rem; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); padding:.5rem .9rem; border-radius:var(--r-pill); font-size:.82rem; font-weight:600; color:#fff; }
.hero__badge .dot { width:8px;height:8px;border-radius:50%;background:var(--gold-400); box-shadow:0 0 0 4px rgba(201,162,75,.25); }
.hero h1 { font-size: var(--fs-hero); margin: 1.3rem 0; color: #fff; }
.hero h1 .text-grad { display:inline-block; }
.hero__sub { font-size: var(--fs-lead); color: var(--navy-100); max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero__trust { display: flex; flex-wrap:wrap; gap: 1.6rem; margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.14); }
.hero__trust div b { display:block; font-family:var(--font-display); font-size:1.5rem; color: var(--gold-400); }
.hero__trust div span { font-size:.84rem; color: var(--navy-100); }
.hero__visual { position: relative; }
.hero__card { background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius: var(--r-xl); padding: clamp(1.4rem,2.5vw,2rem); backdrop-filter: blur(8px); box-shadow: var(--sh-lg); }
.hero__card h3 { color:#fff; font-size:1.15rem; margin-bottom:1rem; }
.hero__pill-row { display:flex; flex-direction:column; gap:.7rem; }
.hero__pill { display:flex; align-items:center; gap:.8rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:.8rem 1rem; border-radius:var(--r-md); }
.hero__pill .ic { width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(201,162,75,.16);color:var(--gold-400); flex:none; }
.hero__pill b { color:#fff; font-size:.95rem; } .hero__pill span { color:var(--navy-100); font-size:.82rem; }
.hero__float { position:absolute; background:#fff; color:var(--ink); border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:.8rem 1rem; display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:.88rem; }
.hero__float .ic { width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--navy-100);color:var(--navy-700); }
.hero__float--1 { top:-14px; right:-10px; } .hero__float--2 { bottom:-16px; left:-14px; }
@media(max-width:920px){ .hero__float{ display:none; } }

/* glow orbs */
.orb { position:absolute; border-radius:50%; filter: blur(60px); opacity:.5; pointer-events:none; }
.orb--gold { width:340px;height:340px; background:rgba(201,162,75,.4); top:-80px; right:-60px; }
.orb--blue { width:420px;height:420px; background:rgba(30,71,148,.55); bottom:-160px; left:-120px; }

/* ---------- 12. PAGE HERO (interior) ---------- */
.phero { background: var(--grad-hero); color:#fff; padding-block: clamp(3rem,6vw,5rem); position:relative; overflow:hidden; }
.phero h1 { color:#fff; font-size: var(--fs-h1); margin:.8rem 0; max-width: 18ch; }
.phero p { color: var(--navy-100); max-width: 60ch; font-size: var(--fs-lead); }
.breadcrumb { display:flex; gap:.5rem; align-items:center; font-size:.84rem; color:var(--navy-100); }
.breadcrumb a:hover { color:#fff; } .breadcrumb span { opacity:.6; }

/* ---------- 13. ACCORDION / FAQ ---------- */
.accordion { max-width: 860px; margin-inline:auto; display:flex; flex-direction:column; gap:.8rem; }
.acc { border:1px solid var(--line); border-radius: var(--r-md); background:#fff; overflow:hidden; transition:box-shadow .3s, border-color .3s; }
.acc.open { box-shadow: var(--sh-md); border-color: var(--navy-100); }
.acc__q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.15rem 1.3rem; text-align:left; font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--navy-800); }
.acc__q .ic { flex:none; width:30px;height:30px;border-radius:50%; display:grid;place-items:center; background:var(--canvas-2); color:var(--navy-700); transition:.3s; }
.acc.open .acc__q .ic { background:var(--navy-700); color:#fff; transform:rotate(45deg); }
.acc__a { max-height:0; overflow:hidden; transition:max-height .4s var(--ease-out); }
.acc__a-inner { padding:0 1.3rem 1.25rem; color:var(--muted); }
.acc__a-inner ul { list-style:disc; padding-left:1.2rem; margin-top:.5rem; }
.acc__a-inner li { margin:.25rem 0; }

/* ---------- 14. TESTIMONIALS ---------- */
.tcard { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem; box-shadow:var(--sh-sm); height:100%; display:flex; flex-direction:column; }
.tcard__stars { color: var(--gold-500); letter-spacing:2px; margin-bottom:.8rem; }
.tcard__text { color:var(--ink-soft); font-size:.98rem; flex:1; }
.tcard__who { display:flex; align-items:center; gap:.8rem; margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.tcard__avatar { width:44px;height:44px;border-radius:50%; background:var(--grad-brand); color:#fff; display:grid;place-items:center; font-family:var(--font-display); font-weight:800; flex:none; }
.tcard__who b { display:block; font-size:.95rem; color:var(--navy-800); }
.tcard__who span { font-size:.8rem; color:var(--muted); display:inline-flex; align-items:center; gap:.3rem; }
.verified { color: var(--success); font-weight:700; font-size:.74rem; }

/* ---------- 15. FORMS ---------- */
.field { margin-bottom: 1.1rem; }
.field label { display:block; font-weight:600; font-size:.88rem; color:var(--ink-soft); margin-bottom:.4rem; }
.field input, .field select, .field textarea {
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--line-strong); border-radius:var(--r-sm);
  font:inherit; font-size:.98rem; color:var(--ink); background:#fff; transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--navy-500); box-shadow:0 0 0 4px rgba(30,71,148,.12); }
.field textarea { resize:vertical; min-height:120px; }
.form-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.4rem); box-shadow:var(--sh-md); }
.form-note { font-size:.8rem; color:var(--muted); margin-top:.6rem; }
.form-success { display:none; padding:1rem 1.2rem; border-radius:var(--r-sm); background:rgba(22,163,74,.1); color:#15803d; font-weight:600; border:1px solid rgba(22,163,74,.3); margin-bottom:1rem; }
.form-success.show { display:block; }

/* multi-step */
.steps { display:flex; gap:.5rem; margin-bottom:1.5rem; }
.steps .step { flex:1; height:5px; border-radius:3px; background:var(--line-strong); transition:background .3s; }
.steps .step.active { background:var(--grad-gold); }
.fstep { display:none; } .fstep.active { display:block; animation: fadeUp .4s var(--ease-out); }

/* ---------- 16. SPLIT / PROSE ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items:center; }
@media(max-width:860px){ .split { grid-template-columns:1fr; } }
.prose p { margin-bottom: 1rem; color: var(--ink-soft); }
.prose h3 { margin: 1.6rem 0 .6rem; font-size: var(--fs-h3); }
.prose ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; margin:1rem 0; }
.prose ul li { position:relative; padding-left:1.9rem; color:var(--ink-soft); }
.prose ul li::before { content:""; position:absolute; left:0; top:.35em; width:18px;height:18px; border-radius:50%; background:var(--navy-100); box-shadow:inset 0 0 0 5px var(--navy-500); }

.media-frame { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); border:1px solid var(--line); position:relative; }
.media-frame img { width:100%; }

/* ---------- 17. CTA BAND ---------- */
.cta-band { background: var(--grad-hero); color:#fff; border-radius: var(--r-xl); padding: clamp(2.4rem,5vw,4rem); text-align:center; position:relative; overflow:hidden; }
.cta-band h2 { color:#fff; font-size: var(--fs-h2); max-width: 20ch; margin:0 auto 1rem; }
.cta-band p { color: var(--navy-100); max-width: 56ch; margin:0 auto 1.8rem; font-size: var(--fs-lead); }

/* ---------- 18. FOOTER ---------- */
.footer { background: var(--navy-900); color: #aebcd6; padding-top: clamp(3rem,6vw,5rem); font-size:.92rem; }
.footer__top { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(1.5rem,3vw,2.5rem); padding-bottom:2.6rem; }
@media(max-width:900px){ .footer__top { grid-template-columns: 1fr 1fr; } }
@media(max-width:560px){ .footer__top { grid-template-columns: 1fr; } }
.footer h4 { color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer a { color:#aebcd6; transition: color .2s, padding-left .2s; display:inline-block; padding:.28rem 0; }
.footer a:hover { color:#fff; }
.footer__brand img { height:50px; margin-bottom:1rem; }
.footer__brand p { color:#8ea0c0; max-width: 42ch; font-size:.92rem; }
.footer__social { display:flex; gap:.6rem; margin-top:1.2rem; }
.footer__social a { width:38px;height:38px; border-radius:50%; background:rgba(255,255,255,.07); display:grid; place-items:center; padding:0; }
.footer__social a:hover { background:var(--gold-500); color:var(--navy-900); transform:translateY(-2px); }
.footer__social svg { width:16px;height:16px; }
.footer__bottom { border-top:1px solid rgba(255,255,255,.1); padding:1.6rem 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:#8ea0c0; }
.footer__disclaimer { background: var(--navy-900); }
.footer__disclaimer .container { padding-bottom:2rem; }
.footer__disclaimer p { color:#7185a8; font-size:.78rem; max-width:none; border-top:1px solid rgba(255,255,255,.06); padding-top:1.4rem; }

/* ---------- 19. FLOATING ACTIONS ---------- */
.fab-stack { position: fixed; right: 18px; bottom: 18px; z-index: 120; display:flex; flex-direction:column; gap:.7rem; }
.fab { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; box-shadow:var(--sh-lg); color:#fff; transition: transform .3s; position:relative; }
.fab:hover { transform: scale(1.08) translateY(-2px); }
.fab--wa { background:#25D366; } .fab--call { background: var(--navy-700); }
.fab svg { width:24px;height:24px; }
.fab__ping { position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation: ping 2s infinite; }
@keyframes ping { 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* sticky mobile CTA */
.sticky-cta { position: fixed; left:0; right:0; bottom:0; z-index:115; background:#fff; border-top:1px solid var(--line); box-shadow:0 -10px 30px rgba(11,27,51,.1); padding:.7rem var(--gutter); display:none; gap:.6rem; }
.sticky-cta .btn { flex:1; padding:.85rem; font-size:.92rem; }
@media(max-width:640px){ .sticky-cta { display:flex; } .fab-stack { bottom: 78px; } body { padding-bottom: 0; } }

/* ---------- 20. ANIMATION UTILITIES ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change: transform, opacity; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; } .reveal.d4 { transition-delay:.32s; }
.reveal-x { opacity:0; transform: translateX(-40px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-x.in { opacity:1; transform:none; }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }
.parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal,.reveal-x { opacity:1 !important; transform:none !important; }
}

/* =====================================================================
   21. ENHANCED UX LAYER — preloader, cursor, page transition, progress,
       ripple, countdown, lead modal, announcement bar
   ===================================================================== */

/* ---- Scroll progress bar ---- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 300; background: var(--grad-gold); box-shadow: 0 0 12px rgba(201,162,75,.6); transition: width .1s linear; }

/* ---- Preloader ---- */
.preloader { position: fixed; inset: 0; z-index: 1000; background: var(--grad-hero); display: grid; place-items: center; transition: opacity .6s var(--ease), visibility .6s; }
.preloader.done { opacity: 0; visibility: hidden; }
.preloader__inner { text-align: center; }
.preloader__logo { height: 60px; margin: 0 auto 1.4rem; filter: brightness(0) invert(1); animation: pl-float 2s ease-in-out infinite; }
.preloader__bar { width: 180px; height: 3px; background: rgba(255,255,255,.18); border-radius: 3px; overflow: hidden; margin: 0 auto; }
.preloader__bar span { display: block; height: 100%; width: 40%; background: var(--grad-gold); border-radius: 3px; animation: pl-load 1.1s ease-in-out infinite; }
.preloader__txt { margin-top: 1rem; color: var(--navy-100); font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; }
@keyframes pl-float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
@keyframes pl-load { 0%{ transform: translateX(-120%);} 100%{ transform: translateX(360%);} }

/* ---- Page transition overlay (wipe) ---- */
.page-wipe { position: fixed; inset: 0; z-index: 900; background: var(--grad-hero); transform: scaleY(0); transform-origin: bottom; pointer-events: none; }
.page-wipe.in { animation: wipe-in .55s var(--ease-out) forwards; }
.page-wipe.out { transform: scaleY(1); transform-origin: top; animation: wipe-out .6s var(--ease-out) forwards; }
@keyframes wipe-in { from{ transform: scaleY(0); transform-origin: bottom;} to{ transform: scaleY(1); transform-origin: bottom;} }
@keyframes wipe-out { from{ transform: scaleY(1); transform-origin: top;} to{ transform: scaleY(0); transform-origin: top;} }
.page-wipe__logo { position: absolute; inset: 0; margin: auto; height: 56px; filter: brightness(0) invert(1); opacity: 0; }
.page-wipe.in .page-wipe__logo { animation: wipe-logo .55s ease forwards; }
@keyframes wipe-logo { 0%{opacity:0;transform:scale(.8);} 60%{opacity:1;transform:scale(1);} 100%{opacity:1;} }

/* ---- Custom cursor (desktop pointer-fine only) ---- */
@media (pointer:fine){
  .has-cursor, .has-cursor * { cursor: none !important; }
  .cursor-dot { position: fixed; top:0; left:0; width:8px; height:8px; border-radius:50%; background: var(--gold-500); z-index: 9999; pointer-events:none; transform: translate(-50%,-50%); transition: width .2s, height .2s, background .2s; }
  .cursor-ring { position: fixed; top:0; left:0; width:38px; height:38px; border:1.5px solid rgba(14,42,94,.45); border-radius:50%; z-index:9998; pointer-events:none; transform: translate(-50%,-50%); transition: width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s, background .25s; }
  .cursor-ring.hover { width:64px; height:64px; border-color: var(--gold-500); background: rgba(201,162,75,.08); }
  .cursor-dot.hover { width:0; height:0; }
}

/* ---- Button ripple ---- */
.btn { overflow: hidden; }
.ripple { position:absolute; border-radius:50%; background: rgba(255,255,255,.5); transform: scale(0); animation: ripple .6s ease-out; pointer-events:none; }
.btn--gold .ripple, .btn--ghost .ripple { background: rgba(255,255,255,.55); }
@keyframes ripple { to{ transform: scale(3.2); opacity:0; } }

/* ---- Announcement bar + countdown ---- */
.announce { position: relative; z-index: 90; background: var(--navy-900); color:#fff; border-bottom:1px solid rgba(255,255,255,.08); }
.announce .container { display:flex; align-items:center; justify-content:center; gap:1rem; min-height:46px; flex-wrap:wrap; text-align:center; }
.announce p { font-size:.9rem; font-weight:500; color:#e8eefb; }
.announce b { color: var(--gold-400); }
.countdown { display:inline-flex; gap:.35rem; font-family:var(--font-display); font-weight:800; }
.countdown span { background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); border-radius:7px; padding:.18rem .45rem; font-size:.82rem; min-width:34px; text-align:center; font-variant-numeric: tabular-nums; }
.announce__close { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#9fb0d0; font-size:1.3rem; width:32px;height:32px; }
.announce__close:hover { color:#fff; }
@media(max-width:640px){ .announce__close{ display:none; } .announce p{ font-size:.8rem; } }

/* ---- Lead modal ---- */
.modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.modal.open { opacity: 1; visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(6,16,38,.62); backdrop-filter: blur(6px); }
.modal__card { position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-lg); transform: translateY(26px) scale(.97); opacity: 0; transition: transform .45s var(--ease-out), opacity .45s; }
.modal.open .modal__card { transform: none; opacity: 1; }
.modal__head { position: relative; padding: 1.6rem 1.8rem 1.2rem; background: var(--grad-hero); color:#fff; border-radius: var(--r-xl) var(--r-xl) 0 0; overflow:hidden; }
.modal__head .orb { opacity:.5; }
.modal__head .eyebrow { color: var(--gold-400); }
.modal__head h3 { color:#fff; font-size:1.35rem; margin:.4rem 0 .3rem; position:relative; }
.modal__head p { color: var(--navy-100); font-size:.9rem; position:relative; }
.modal__close { position:absolute; right:14px; top:14px; z-index:3; width:36px;height:36px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:1.3rem; line-height:1; display:grid;place-items:center; transition:background .2s, transform .2s; }
.modal__close:hover { background:rgba(255,255,255,.28); transform:rotate(90deg); }
.modal__body { padding: 1.6rem 1.8rem 1.9rem; }
.modal__trust { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.78rem; color:var(--muted); }
.modal__trust span { display:inline-flex; align-items:center; gap:.35rem; }
.modal__trust svg { width:14px;height:14px; color:var(--success); }
.modal__pay { display:none; text-align:center; padding:1.4rem 0 .4rem; }
.modal__pay.show { display:block; animation: fadeUp .5s var(--ease-out); }
.modal__pay .tick { width:64px;height:64px;border-radius:50%;background:rgba(22,163,74,.12);color:var(--success);display:grid;place-items:center;margin:0 auto 1rem; }
.modal__pay .tick svg { width:32px;height:32px; }
.modal__pay h3 { font-size:1.3rem; margin-bottom:.5rem; }
.modal__pay p { color:var(--muted); margin-bottom:1.3rem; }
.modal__form.hide { display:none; }

/* scroll-down hint */
.scroll-hint { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.4rem; color:rgba(255,255,255,.7); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; z-index:3; }
.scroll-hint .mouse { width:24px; height:38px; border:2px solid rgba(255,255,255,.5); border-radius:14px; position:relative; }
.scroll-hint .mouse::before { content:""; position:absolute; left:50%; top:7px; transform:translateX(-50%); width:4px; height:7px; background:var(--gold-400); border-radius:2px; animation: scrollwheel 1.6s var(--ease-out) infinite; }
@keyframes scrollwheel { 0%{opacity:0;transform:translate(-50%,0);} 40%{opacity:1;} 80%{opacity:0;transform:translate(-50%,12px);} 100%{opacity:0;} }

/* reveal scale variant for hover cards already covered; add tilt */
.tilt { transition: transform .3s var(--ease-out); transform-style: preserve-3d; }

/* =====================================================================
   22. REVISION OVERRIDES (client feedback round) — load-order: last wins
   ===================================================================== */
:root {
  --section-y: clamp(3rem, 5.2vw, 5.2rem);   /* tighter vertical rhythm */
  --gutter: clamp(1rem, 2.4vw, 1.8rem);      /* less gutter */
}

/* --- Static buttons: keep professional hover, remove movement (SS6) --- */
.btn:hover { transform: none !important; }
.btn:active { transform: none !important; }
.btn--gold:hover { background: var(--gold-400); box-shadow: var(--sh-gold); }
.btn--ghost:hover { background: var(--canvas); box-shadow: inset 0 0 0 1.5px var(--navy-500); }
.magnetic { will-change: auto; }
.magnetic:hover { transform: none !important; }

/* --- Default cursor everywhere (custom cursor removed in JS) --- */
.has-cursor, .has-cursor * { cursor: auto !important; }
.cursor-dot, .cursor-ring { display: none !important; }

/* --- Header logo: larger & clearer (SS7) --- */
.brand img { height: 58px; }
@media (max-width: 600px){ .brand img { height: 46px; } }

/* --- Footer logo forced white (SS14) --- */
.footer__brand img { filter: brightness(0) invert(1); opacity: .95; }

/* --- Featured / press logos: bigger, clearer, grayscale→color (SS11,22) --- */
.logos { gap: clamp(2rem,5vw,4rem); }
.logos img { height: 46px; opacity: .75; }
.logos img:hover { opacity: 1; }
@media (max-width: 600px){ .logos img { height: 34px; } }
.logo-marquee__track img { height: 44px; opacity:.65; }
/* hiring partner names → grayscale chips that color on hover */
.partner { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: #9aa7c2; white-space: nowrap; transition: color .3s, transform .3s; }
.partner:hover { color: var(--navy-700); }

/* --- Premium 3D certificate display, no white background patch (SS17) --- */
.cert3d { perspective: 1400px; }
.cert3d img { border-radius: 14px; box-shadow: var(--sh-lg); transform: rotateY(-14deg) rotateX(4deg); transition: transform .6s var(--ease-out); border: 1px solid var(--line); background: transparent; }
.cert3d:hover img { transform: rotateY(0) rotateX(0); }
.cert-row { display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; perspective: 1600px; }
.cert-row img { width: 220px; border-radius: 12px; box-shadow: var(--sh-lg); transition: transform .5s var(--ease-out); }
.cert-row img:nth-child(1){ transform: rotateY(16deg) translateZ(-20px); }
.cert-row img:nth-child(3){ transform: rotateY(-16deg) translateZ(-20px); }
.cert-row img:hover { transform: rotateY(0) translateZ(20px) scale(1.04); z-index:2; }

/* --- Testimonials: realistic varied star ratings + circular avatar img (SS12) --- */
.tcard__stars { display:inline-flex; align-items:center; gap:1px; }
.tcard__stars svg { width:16px; height:16px; }
.tcard__rating { font-weight:700; color:var(--ink-soft); font-size:.82rem; margin-left:.4rem; }
.tcard__avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.tcard__avatar { overflow:hidden; }

/* --- "More Courses" centered button row --- */
.more-row { display:flex; justify-content:center; margin-top:2.2rem; }

/* --- AI Admission Assistant widget (SS25,26) --- */
.fab--ai { background: var(--grad-gold); color: var(--navy-900); }
.fab--ai svg { width:26px; height:26px; }
.assistant { position: fixed; right: 18px; bottom: 84px; z-index: 130; width: min(370px, calc(100vw - 36px)); background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; transform: translateY(20px) scale(.96); opacity:0; visibility:hidden; transition: .35s var(--ease-out); }
.assistant.open { transform:none; opacity:1; visibility:visible; }
.assistant__head { background: var(--grad-hero); color:#fff; padding: 1rem 1.1rem; display:flex; align-items:center; gap:.7rem; }
.assistant__head .av { width:40px;height:40px;border-radius:50%;background:var(--grad-gold);display:grid;place-items:center;color:var(--navy-900); flex:none; }
.assistant__head b { font-family:var(--font-display); font-size:1rem; display:block; }
.assistant__head span { font-size:.74rem; color:var(--navy-100); display:flex; align-items:center; gap:.35rem; }
.assistant__head .dotlive { width:7px;height:7px;border-radius:50%;background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.25); }
.assistant__close { margin-left:auto; color:#fff; font-size:1.3rem; width:30px;height:30px; }
.assistant__body { height: 320px; overflow-y:auto; padding:1rem; background:var(--canvas); display:flex; flex-direction:column; gap:.7rem; }
.amsg { max-width:85%; padding:.65rem .85rem; border-radius:14px; font-size:.9rem; line-height:1.5; }
.amsg.bot { background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; align-self:flex-start; }
.amsg.me { background:var(--navy-700); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
.achips { display:flex; flex-wrap:wrap; gap:.4rem; }
.achip { font-size:.82rem; font-weight:600; color:var(--navy-700); background:#fff; border:1px solid var(--line-strong); padding:.45rem .7rem; border-radius:var(--r-pill); cursor:pointer; transition:background .2s,color .2s; }
.achip:hover { background:var(--navy-700); color:#fff; }
.assistant__foot { display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--line); background:#fff; }
.assistant__foot input { flex:1; border:1.5px solid var(--line-strong); border-radius:var(--r-pill); padding:.6rem .9rem; font:inherit; font-size:.9rem; }
.assistant__foot button { width:42px;height:42px;border-radius:50%;background:var(--navy-700);color:#fff;display:grid;place-items:center; flex:none; }
.assistant__voice { font-size:.72rem; color:var(--muted); text-align:center; padding:.4rem; background:#fff; }

/* --- Country-code + phone group --- */
.phone-group { display:grid; grid-template-columns: 110px 1fr; gap:.5rem; }

/* --- Mobile polish (80% mobile audience) --- */
@media (max-width: 640px){
  .hero h1 { font-size: clamp(2.2rem,8vw,3rem); }
  .section-head p { font-size: 1rem; }
  .cta-band { padding: 2rem 1.2rem; }
  .fab { width:50px; height:50px; }
  .prog-card__actions { flex-direction: column; }
  .hero__trust { gap: 1rem; }
  .assistant { right: 12px; bottom: 78px; }
  .menu .dropdown[style] { grid-template-columns: 1fr !important; min-width: 260px !important; }
}

/* =====================================================================
   23. PREMIUM HERO (animated) + ICON / CURRICULUM / LOGO UPGRADES
   ===================================================================== */
/* Animated aurora hero background */
.hero { position: relative; background: var(--grad-hero); background-size: 180% 180%; animation: heroShift 22s ease-in-out infinite; isolation: isolate; }
@keyframes heroShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; 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: 64px 64px; mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 75%); }
.hero__aurora { position:absolute; inset:-20% -10% auto -10%; height:120%; z-index:-1; pointer-events:none; filter: blur(48px); opacity:.6;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(201,162,75,.55), transparent 60%),
    radial-gradient(45% 55% at 80% 20%, rgba(30,71,148,.65), transparent 60%),
    radial-gradient(40% 50% at 60% 80%, rgba(20,56,122,.6), transparent 60%);
  animation: aurora 18s ease-in-out infinite alternate; }
@keyframes aurora { 0%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(-3%,2%,0) scale(1.08);} 100%{ transform: translate3d(3%,-2%,0) scale(1.04);} }
/* floating particles */
.hero__spark { position:absolute; width:6px; height:6px; border-radius:50%; background: var(--gold-400); opacity:.5; box-shadow:0 0 12px 2px rgba(201,162,75,.5); z-index:-1; animation: floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%,100%{ transform: translateY(0); opacity:.35;} 50%{ transform: translateY(-22px); opacity:.8;} }
.hero__card { animation: cardFloat 6s ease-in-out infinite; }
@keyframes cardFloat { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
.hero__badge { backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: reduce){ .hero,.hero__aurora,.hero__spark,.hero__card{ animation:none !important; } }

/* Premium icon chips with subtle motion */
.feature__ic { background: linear-gradient(135deg, var(--navy-100), #fff); box-shadow: inset 0 0 0 1px var(--line), var(--sh-xs); transition: transform .45s var(--ease-out), background .3s, color .3s; }
.feature:hover .feature__ic { transform: translateY(-4px) rotate(-5deg) scale(1.08); background: var(--grad-brand); color:#fff; }
.bg-brand .feature:hover .feature__ic { background: var(--grad-gold); color: var(--navy-900); }
.hero__pill .ic { transition: transform .4s var(--ease-out); }
.hero__pill:hover .ic { transform: scale(1.12) rotate(-6deg); }

/* Numbered curriculum modules (scoped to .curriculum) */
.accordion.curriculum { counter-reset: mod; }
.accordion.curriculum .acc__q { padding-left: 1rem; }
.accordion.curriculum .acc__q::before { counter-increment: mod; content: counter(mod,decimal-leading-zero); display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px; background: var(--grad-brand); color:#fff; font-family:var(--font-display); font-weight:800; font-size:.82rem; margin-right:.85rem; }
.accordion.curriculum .acc.open { border-color: var(--navy-300); }
.accordion.curriculum .acc.open .acc__q::before { background: var(--grad-gold); color: var(--navy-900); }

/* Real corporate logos — grayscale by default, colour on hover */
.logo-marquee__track img { height: 40px; width:auto; object-fit:contain; opacity:.7; filter: grayscale(1); transition: filter .3s, opacity .3s, transform .3s; }
.logo-marquee__track img:hover { filter: grayscale(0); opacity:1; transform: translateY(-3px); }

/* tighter, cleaner section rhythm + container */
.section.tight { padding-block: clamp(2rem,3.6vw,3rem); }
.section-head { margin-bottom: clamp(1.6rem,3vw,2.6rem); }


/* =====================================================================
   24. FIND COURSES MEGA MENU (categories + hover fly-out panels)
   ===================================================================== */
.menu > li.has-mega { position: static; }
.megamenu {
  position: absolute; top: calc(100% + 8px); left: var(--gutter); right: var(--gutter);
  width: auto; max-width: 940px; margin-inline: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); display: grid; grid-template-columns: 248px 1fr; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .26s var(--ease-out), transform .26s var(--ease-out), visibility .26s; z-index: 120;
}
.menu > li.has-mega:hover .megamenu { opacity: 1; visibility: visible; transform: translateY(0); }
.megamenu__cats { background: var(--canvas); padding: .7rem; display: flex; flex-direction: column; gap: .25rem; border-right: 1px solid var(--line); }
.megamenu__cat { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .85rem .9rem; border-radius: var(--r-sm); font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink-soft); cursor: pointer; transition: background .2s, color .2s; }
.megamenu__cat svg { width: 16px; height: 16px; opacity: .6; transition: transform .2s; }
.megamenu__cat:hover, .megamenu__cat.active { background: #fff; color: var(--navy-700); box-shadow: var(--sh-xs); }
.megamenu__cat.active svg { transform: translateX(3px); opacity: 1; color: var(--gold-600); }
.megamenu__panels { padding: 1rem; min-height: 270px; }
.megamenu__panel { display: none; grid-template-columns: 1fr 1fr; gap: .3rem; animation: fadeUp .3s var(--ease-out); }
.megamenu__panel.active { display: grid; }
.megamenu__panel.single { grid-template-columns: 1fr; max-width: 460px; }
.mm-prog { display: block; padding: .7rem .8rem; border-radius: var(--r-md); border: 1px solid transparent; transition: background .2s, border-color .2s, transform .2s; }
.mm-prog:hover { background: var(--canvas); border-color: var(--line); transform: translateY(-1px); }
.mm-prog b { display: flex; align-items: center; gap: .4rem; color: var(--navy-800); font-family: var(--font-display); font-size: .94rem; }
.mm-prog .tag { font-family: var(--font-body); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9a6f1e; background: var(--gold-200); padding: .12rem .4rem; border-radius: var(--r-pill); }
.mm-prog span { display: block; color: var(--muted); font-size: .8rem; line-height: 1.4; margin-top: .25rem; }
.megamenu__foot { grid-column: 1/-1; margin-top: .5rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.megamenu__foot a { color: var(--navy-700); font-weight: 700; font-size: .9rem; }
@media (max-width: 1180px){ .megamenu { max-width: 760px; grid-template-columns: 220px 1fr; } .megamenu__panel { grid-template-columns: 1fr; } }

/* =====================================================================
   25. TOP BAR CONTACT ROW (email · phone · address) + social right
   ===================================================================== */
.topbar__contact { display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.topbar__contact .t-item { display:inline-flex; align-items:center; gap:.45rem; color:#cdd8ee; font-size:.83rem; line-height:1; white-space:nowrap; }
.topbar__contact .t-item:hover { color:#fff; }
.topbar__contact .t-item svg { width:15px; height:15px; color:var(--gold-400); flex:none; }
@media (max-width: 980px){ .topbar__contact .t-addr { display:none; } }
@media (max-width: 560px){ .topbar__contact .t-phone { display:none; } .topbar__contact { gap:1rem; } }