/* ============================================================
   KALANCH GLOBAL EDUCATION — Core Stylesheet
   Design language derived from brand mark: deep navy, gold, sky-blue
   ============================================================ */

/* ---------- Font imports ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---------- Design tokens ---------- */
:root{
  /* brand core */
  --navy-950:#050d1f;
  --navy-900:#0a1730;
  --navy-800:#0f2143;
  --navy-700:#152c56;
  --navy-600:#1d3b70;
  --gold-600:#b6862c;
  --gold-500:#d1a53d;
  --gold-400:#e3c471;
  --gold-300:#eed99a;
  --sky-600:#1c74c9;
  --sky-500:#2e8de0;
  --sky-400:#5aa8ea;

  --ink:#0c1626;
  --ink-soft:#42495a;
  --muted:#6b7280;
  --line:#e6e8ee;
  --line-soft:#eef0f4;
  --paper:#ffffff;
  --paper-soft:#f7f8fb;
  --paper-tint:#f3f5fa;

  --success:#1e8e5a;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;

  --shadow-sm:0 1px 2px rgba(10,23,48,.06), 0 1px 1px rgba(10,23,48,.04);
  --shadow-md:0 8px 24px -8px rgba(10,23,48,.16);
  --shadow-lg:0 20px 48px -16px rgba(10,23,48,.24);
  --shadow-gold:0 10px 30px -10px rgba(209,165,61,.45);

  --container:1240px;
  --container-narrow:820px;

  --ease:cubic-bezier(.22,.88,.25,1);
  --speed-fast:.2s;
  --speed:.45s;
  --speed-slow:.8s;

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:rgba(255,255,255,.85);
  background:var(--navy-950);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.15;letter-spacing:-.01em}
svg{display:block}

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

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 28px}
.section{padding:110px 0}
.section-tight{padding:70px 0}
@media (max-width:900px){
  .section{padding:72px 0}
  .section-tight{padding:52px 0}
  .wrap,.wrap-narrow{padding:0 20px}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:.06em;
  color:var(--gold-400);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";width:15px;height:15px;flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e3c471'%3E%3Cpath d='M12 2l1.8 5.6L19 9l-5.2 1.4L12 16l-1.8-5.6L5 9l5.2-1.4L12 2Z'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;background-position:center;
}

.section-head{max-width:680px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-title{font-size:clamp(28px,3.6vw,42px);color:#fff}
.section-sub{margin-top:16px;color:rgba(255,255,255,.6);font-size:17px;line-height:1.7}

.tag{
  display:inline-flex;align-items:center;padding:6px 14px;border-radius:100px;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  background:var(--navy-900);color:var(--gold-300);
}
.tag.light{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}
.tag.sky{background:rgba(46,141,224,.1);color:var(--sky-600)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:4px;
  font-weight:600;font-size:14.5px;letter-spacing:.01em;
  transition:transform var(--speed-fast) var(--ease), box-shadow var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-gold{background:linear-gradient(135deg,var(--gold-400),var(--gold-600));color:var(--navy-950);box-shadow:var(--shadow-gold);position:relative;overflow:hidden}
.btn-gold::before{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .65s var(--ease);
}
.btn-gold:hover::before{left:130%}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(209,165,61,.55)}
.btn-navy{background:var(--navy-900);color:#fff}
.btn-navy:hover{background:var(--navy-800);transform:translateY(-2px)}
.btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-outline-dark{background:transparent;border:1.5px solid var(--line);color:var(--navy-900)}
.btn-outline-dark:hover{border-color:var(--navy-900);background:var(--navy-900);color:#fff}
.btn-whatsapp{background:#1ea952;color:#fff}
.btn-whatsapp:hover{background:#178c44;transform:translateY(-2px)}
.btn-sm{padding:10px 20px;font-size:13px}
.btn-block{width:100%}
.btn-text{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14.5px;color:var(--gold-400);position:relative}
.btn-text svg{width:15px;height:15px;transition:transform var(--speed-fast) var(--ease)}
.btn-text:hover svg{transform:translateX(4px)}
.btn-text.gold{color:var(--gold-600)}

/* ---------- Header ---------- */
#site-header{position:fixed;top:0;left:0;right:0;z-index:1000}
.topbar{
  background:var(--navy-950);color:rgba(255,255,255,.75);
  font-size:12.5px;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:9px;padding-bottom:9px}
.topbar-links{display:flex;gap:22px}
.topbar-links a{display:inline-flex;align-items:center;gap:6px;transition:color var(--speed-fast)}
.topbar-links a:hover{color:var(--gold-400)}
.topbar-links svg{width:13px;height:13px}
.topbar-note{letter-spacing:.03em;color:rgba(255,255,255,.5)}
@media (max-width:760px){.topbar{display:none}}

.navbar{
  background:rgba(10,23,48,.72);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 1px 0 0 rgba(255,255,255,.05) inset;
  transition:background var(--speed) var(--ease), padding var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
body.scrolled .navbar{background:rgba(6,15,32,.92);box-shadow:0 8px 32px rgba(0,0,0,.3), 0 1px 0 0 rgba(255,255,255,.04) inset}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;transition:height var(--speed) var(--ease)}
body.scrolled .navbar .wrap{height:68px}

.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:62px;height:62px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:10px;border:2px solid var(--gold-400);overflow:hidden;transition:width var(--speed) var(--ease),height var(--speed) var(--ease)}
body.scrolled .navbar .brand-mark{width:50px;height:50px}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand-word{display:flex;flex-direction:column;line-height:1.05}
.brand-word b{font-family:var(--font-display);color:#fff;font-size:20px;font-weight:600;letter-spacing:.01em}
.brand-word span{font-size:10.5px;letter-spacing:.16em;color:rgba(227,196,113,.9);text-transform:uppercase;margin-top:3px}

.nav-main{display:flex;align-items:center;gap:4px}
.nav-main>li{position:relative}
.nav-main>li>a,.nav-main>li>button{
  display:flex;align-items:center;gap:5px;
  padding:10px 18px;font-size:14px;font-weight:500;color:rgba(255,255,255,.82);
  white-space:nowrap;
  border-radius:6px;transition:color var(--speed-fast),background var(--speed-fast);
}
.nav-main>li>a:hover,.nav-main>li>button:hover,.nav-main>li.active>a,.nav-main>li.active>button{color:#fff;background:rgba(255,255,255,.09)}
.nav-main>li.active>a,.nav-main>li.active>button{color:var(--gold-400);border:1px solid var(--gold-400);box-shadow:0 0 10px rgba(227,196,113,.15)}
.nav-main>li>button svg{width:11px;height:11px;transition:transform var(--speed-fast)}
.nav-main>li:hover>button svg,.nav-main>li.open>button svg{transform:rotate(180deg)}

.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:240px;
  background:rgba(10,23,48,.88);
  backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;box-shadow:0 20px 48px -16px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
  padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--speed-fast) var(--ease),transform var(--speed-fast) var(--ease),visibility var(--speed-fast);
}
.nav-main>li:hover .dropdown,.nav-main>li.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:8px;color:rgba(255,255,255,.85);border:1px solid transparent;transition:background var(--speed-fast) var(--ease),border-color var(--speed-fast) var(--ease),transform var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease)}
.dropdown a:hover{background:rgba(227,196,113,.08);border-color:var(--gold-400);transform:translateY(-2px);box-shadow:0 0 12px rgba(227,196,113,.2),inset 0 0 8px rgba(227,196,113,.06)}
.dropdown a b{font-size:14px;font-weight:600;color:#fff;transition:color var(--speed-fast) var(--ease)}
.dropdown a:hover b{color:var(--gold-400)}
.dropdown a small{font-size:12px;color:rgba(255,255,255,.5)}

.nav-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:26px;padding:6px}
.nav-toggle span{height:2px;width:100%;background:#fff;border-radius:2px;transition:transform var(--speed-fast) var(--ease),opacity var(--speed-fast) var(--ease)}

@media (max-width:1100px){
  .nav-main{display:none}
  .nav-toggle{display:flex}
  .nav-cta .btn-outline{display:none}
}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:1100;
  background:var(--navy-950);
  transform:translateX(100%);
  transition:transform var(--speed) var(--ease);
  overflow-y:auto;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-close{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.mobile-close svg{width:16px;height:16px;stroke:#fff}
.mobile-list{padding:14px 12px 40px}
.mobile-list>li{border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-list>li>a,.mobile-list>li>button{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:17px 12px;font-size:16.5px;font-weight:500;color:#fff;
}
.mobile-list svg{width:13px;height:13px;transition:transform var(--speed-fast)}
.mobile-list li.open>button svg{transform:rotate(180deg)}
.mobile-sub{max-height:0;overflow:hidden;transition:max-height var(--speed) var(--ease)}
.mobile-list li.open .mobile-sub{max-height:200px}
.mobile-sub a{display:block;padding:12px 12px 12px 24px;color:rgba(255,255,255,.65);font-size:15px}
.mobile-menu-foot{padding:20px 24px 40px;display:flex;flex-direction:column;gap:12px}

/* ---------- Floating WhatsApp ---------- */
.fab-whatsapp{
  position:fixed;bottom:24px;right:24px;z-index:900;
  width:58px;height:58px;border-radius:50%;
  background:#1ea952;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px -6px rgba(30,169,82,.55);
  transition:transform var(--speed-fast) var(--ease);
}
.fab-whatsapp:hover{transform:scale(1.08)}
.fab-whatsapp svg{width:28px;height:28px}
.fab-whatsapp::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#1ea952;opacity:.55;animation:pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.9);opacity:0}}

/* ---------- Hero (generic) ---------- */
.hero{
  position:relative;color:#fff;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(46,141,224,.35), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(209,165,61,.22), transparent 55%),
    linear-gradient(160deg,var(--navy-950),var(--navy-900) 55%,var(--navy-800));
  background-size:140% 140%,140% 140%,100% 100%;
  animation:hero-drift 22s ease-in-out infinite alternate;
  padding:190px 0 130px;overflow:hidden;
}
@keyframes hero-drift{
  0%{background-position:15% -10%,100% 0%,0 0}
  100%{background-position:22% 4%,88% 10%,0 0}
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:26px 26px;mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 70%);
  pointer-events:none;
}
.hero-orb{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  filter:blur(2px);opacity:.55;
}
.hero-orb.o1{width:8px;height:8px;background:var(--gold-400);top:22%;left:6%;animation:orb-float 7s ease-in-out infinite}
.hero-orb.o2{width:5px;height:5px;background:var(--sky-400);top:64%;left:14%;animation:orb-float 9s ease-in-out infinite 1.2s}
.hero-orb.o3{width:6px;height:6px;background:var(--gold-300);top:40%;left:92%;animation:orb-float 8s ease-in-out infinite .6s}
.hero-orb.o4{width:4px;height:4px;background:var(--sky-400);top:78%;left:80%;animation:orb-float 10s ease-in-out infinite 2s}
@keyframes orb-float{
  0%,100%{transform:translateY(0) translateX(0);opacity:.35}
  50%{transform:translateY(-22px) translateX(10px);opacity:.8}
}
/* Hero grid: sits inside the same centered .wrap as every other section
   (not full-bleed), but the wrap itself is a bit wider here so the photo
   column gets noticeably more room than the text column needs. */
.hero .wrap{max-width:1400px}
.hero-grid{
  display:grid;grid-template-columns:minmax(280px,460px) 1fr;gap:40px;align-items:center;
  position:relative;z-index:2;
}
.hero-copy{min-width:0;padding-right:20px}
.hero-visual{min-width:0}
.hero h1{font-size:clamp(30px,4.4vw,56px);line-height:1.1;color:#fff}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--gold-300),var(--gold-500));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{margin-top:24px;font-size:18.5px;color:rgba(255,255,255,.72);max-width:520px;line-height:1.7}
.hero-cta{display:flex;gap:10px;margin-top:38px;flex-wrap:wrap}
.hero-cta .btn{padding:12px 18px;font-size:13.5px;gap:8px}
.hero-cta .btn svg{width:15px;height:15px}
.hero-badges{display:flex;gap:22px;margin-top:48px;flex-wrap:wrap}
.hero-badge{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(255,255,255,.72)}
.hero-badge svg{width:18px;height:18px;color:var(--gold-400);transition:transform var(--speed) var(--ease)}
.hero-badge:hover svg{transform:scale(1.15) rotate(-6deg)}
.hero-visual{position:relative}
.hero-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:34px;backdrop-filter:blur(10px);
  box-shadow:var(--shadow-lg);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg);
  will-change:transform;
}
.hero-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.hero-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px;transition:background var(--speed-fast),border-color var(--speed-fast)}
.hero-stat:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
.hero-stat b{display:block;font-family:var(--font-display);font-size:26px;color:var(--gold-400)}
.hero-stat span{font-size:12.5px;color:rgba(255,255,255,.6)}

.tag svg{width:12px;height:12px;margin-right:6px;vertical-align:-1px;color:var(--gold-400)}
.tag.sky svg{color:var(--sky-600)}

/* Hero pill (home only): gold outline instead of the plain whitish border other .tag.light uses elsewhere */
.hero-copy .tag.light{background:rgba(10,23,48,.55);border-color:rgba(227,196,113,.55);white-space:nowrap;border-radius:10px}

/* Badge icons (home hero) */
.hero-badge-icon{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--speed) var(--ease);
}
.hero-badge-icon svg{width:16px;height:16px;color:var(--gold-400)}
.hero-badge:hover .hero-badge-icon{border-color:var(--gold-400)}
.hero-badge:hover .hero-badge-icon svg{transform:scale(1.15) rotate(-6deg)}

/* Button leading + trailing icons (arrow already gets the hover nudge via .btn-text pattern; here it's a direct child svg) */
.hero-cta .btn svg:last-child{transition:transform var(--speed-fast) var(--ease)}
.hero-cta .btn:hover svg:last-child{transform:translateX(4px)}

/* Photo panel + flight path decoration (home hero visual)
   aspect-ratio matches the source photo (1536x1024 = 1.5) exactly, so the
   full image always shows with no cropping, at whatever width the flexible
   grid column gives it. */
.hero-photo{
  position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1.5;
  box-shadow:var(--shadow-lg);
}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-flightpath{position:absolute;top:0;left:0;width:58%;height:100%;pointer-events:none}

/* Floating "Why Study" card, overlapping only the photo's bottom-right corner */
.hero-float-card{
  position:absolute;right:-14px;bottom:-22px;width:58%;min-width:270px;max-width:340px;z-index:3;
  padding:22px;background:rgba(7,16,34,.55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-color:rgba(255,255,255,.18);box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-float-card-head{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:15px}
.hero-float-card-head svg{width:15px;height:15px;color:var(--gold-400);flex-shrink:0}
.hero-float-card .hero-stat-row{gap:12px}
.hero-float-card .hero-stat.has-icon{padding:13px;gap:10px}
.hero-float-card .hero-stat-icon{width:30px;height:30px;border-radius:8px}
.hero-float-card .hero-stat-icon svg{width:15px;height:15px}
.hero-float-card .hero-stat b{font-size:20px}
.hero-float-card .hero-stat span{font-size:11px;line-height:1.35}
@media (max-width:980px){
  .hero-float-card{position:static;margin-top:24px;width:100%;max-width:none}
}

/* Stat rows with a leading icon (home hero card only — other pages keep the plain centered .hero-stat) */
.hero-stat.has-icon{display:flex;align-items:center;gap:12px;text-align:left;padding:14px}
.hero-stat-icon{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
}
.hero-stat-icon svg{width:17px;height:17px;color:var(--gold-400)}
.hero-stat-text{display:flex;flex-direction:column}

/* Trust bar (home hero only) — sits in normal flow below the grid, no overlap with the badge row above it */
.hero-trust-bar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:56px;position:relative;z-index:2;
  background:rgba(9,20,42,.94);border:1px solid rgba(255,255,255,.1);
  border-radius:18px;padding:14px 24px;box-shadow:var(--shadow-md);
  max-width:fit-content;margin-left:auto;margin-right:auto;
}
.hero-avatar-stack{display:flex}
.hero-avatar{
  width:34px;height:34px;border-radius:50%;margin-left:-10px;
  background:linear-gradient(135deg,var(--gold-500),var(--sky-600));
  border:2px solid var(--navy-950);color:#fff;font-family:var(--font-display);font-weight:600;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.hero-avatar:first-child{margin-left:0}
.hero-trust-text{font-size:13.5px;color:rgba(255,255,255,.8);line-height:1.4}
.hero-flags{display:flex;align-items:center;gap:8px}
.hero-flag-chip{
  width:26px;height:18px;border-radius:4px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.hero-flags-more{
  width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,.6);flex-shrink:0;
}
@media (max-width:700px){
  .hero-trust-bar{max-width:100%;justify-content:center;border-radius:18px;padding:16px 20px}
}

@media (max-width:980px){
  .hero{padding:150px 0 90px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-copy{padding-right:0}
}

/* ---------- Page header (inner pages) ---------- */
.page-header{
  position:relative;color:#fff;padding:168px 0 90px;
  background:linear-gradient(160deg,var(--navy-950),var(--navy-800));
  overflow:hidden;
}
.page-header::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:24px 24px;mask-image:radial-gradient(ellipse 700px 400px at 20% 0%,#000,transparent 70%);
}
.page-header .wrap{position:relative;z-index:2}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.55);margin-bottom:20px}
.breadcrumb a:hover{color:#fff}
.breadcrumb svg{width:10px;height:10px}
.page-header h1{font-size:clamp(32px,4.4vw,50px);max-width:720px}
.page-header p{margin-top:18px;color:rgba(255,255,255,.68);max-width:600px;font-size:17px}

/* ---------- Cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}

.feature-card{
  position:relative;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding:36px 30px;
  overflow:hidden;
  transition:transform var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),border-color var(--speed-fast) var(--ease);
}
.feature-card::before{
  content:"";position:absolute;top:-40px;right:-40px;
  width:120px;height:120px;
  background:radial-gradient(circle,rgba(227,196,113,.3) 0%,transparent 70%);
  opacity:0;transition:opacity var(--speed-fast) var(--ease);pointer-events:none;
}
.feature-card::after{
  content:"";position:absolute;inset:0;
  border-radius:var(--radius-lg);
  border:1.5px solid var(--gold-400);
  box-shadow:0 0 12px rgba(227,196,113,.25), 0 0 28px rgba(227,196,113,.1), inset 0 0 12px rgba(227,196,113,.08);
  opacity:0;transition:opacity var(--speed-fast) var(--ease);pointer-events:none;
}
.feature-card:hover{transform:translateY(-8px);box-shadow:0 12px 36px -8px rgba(10,23,48,.15);border-color:transparent}
.feature-card:hover::before{opacity:1}
.feature-card:hover::after{opacity:1}
.feature-card:hover .feature-icon{
  transform:rotate(-6deg) scale(1.1);
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600));
  box-shadow:0 0 28px -2px rgba(227,196,113,.6);
}
.feature-card:hover .feature-icon svg{color:#fff}
.feature-icon{
  width:52px;height:52px;border-radius:12px;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-900));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  transition:transform var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),background var(--speed-fast) var(--ease);
}
.feature-icon svg{width:24px;height:24px;color:var(--gold-400)}
.feature-card h3{font-size:19px;color:#fff;margin-bottom:10px}
.feature-card p{color:rgba(255,255,255,.65);font-size:14.8px;line-height:1.7}
.feature-num{font-family:var(--font-display);font-size:13px;color:var(--gold-600);font-weight:600;margin-bottom:14px;display:block}

/* Destination cards */
.dest-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:26px}
.dest-grid-single{grid-template-columns:1fr;max-width:860px;margin-inline:auto}
.dest-grid-single .dest-card{padding:56px 52px}
.dest-grid-single .dest-card h3{font-size:40px;margin-bottom:14px}
.dest-grid-single .dest-card p{font-size:17px;max-width:600px;line-height:1.7}
@media (max-width:900px){.dest-grid{grid-template-columns:1fr}.dest-grid-single .dest-card{padding:32px 26px}}
.dest-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;color:#fff;
  min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;padding:38px;
  box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.08);
  transition:transform var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),border-color var(--speed-fast) var(--ease);
}
.dest-card.malaysia{background:linear-gradient(155deg,#0a1730 10%,#12356b 60%,#1c74c9 130%)}
.dest-card::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:22px 22px;opacity:.5;
  transition:transform var(--speed-fast) var(--ease);
}
.dest-card-icon{
  position:absolute;top:28px;right:28px;width:96px;height:96px;
  color:rgba(255,255,255,.1);pointer-events:none;
  transition:transform var(--speed-fast) var(--ease),color var(--speed-fast) var(--ease);
}
.dest-card:hover{transform:translateY(-8px) scale(1.008);box-shadow:var(--shadow-lg);border-color:rgba(227,196,113,.3)}
.dest-card:hover::before{transform:scale(1.15) rotate(2deg)}
.dest-card:hover .dest-card-icon{transform:scale(1.08) rotate(4deg);color:rgba(255,255,255,.16)}
.dest-card .tag{margin-bottom:16px;width:fit-content;border-radius:10px}
.dest-card h3{font-size:30px;color:#fff;margin-bottom:10px;transition:transform var(--speed-fast) var(--ease)}
.dest-card:hover h3{transform:translateX(4px)}
.dest-card p{color:rgba(255,255,255,.72);font-size:14.5px;max-width:400px;margin-bottom:22px}
.dest-card .btn{width:fit-content}
.dest-card .btn svg:last-child{transition:transform var(--speed-fast) var(--ease)}
.dest-card .btn:hover svg:last-child{transform:translateX(4px)}

/* Quick Enquiry Bar */
#quickEnquiry{padding-bottom:0}
.enquiry-bar{
  position:relative;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  padding:28px 32px 36px;
  box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);
}
.enquiry-bar-head{
  display:flex;align-items:center;gap:10px;
  color:var(--gold-400);font-size:16px;font-weight:600;margin-bottom:20px;
}
.enquiry-bar-head svg{width:20px;height:20px}
.enquiry-bar-fields{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
}
.eq-field{flex:1;min-width:140px}
.eq-field-sm{flex:0.5;min-width:90px}
.eq-field label{
  display:block;font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:rgba(255,255,255,.45);margin-bottom:6px;
}
.eq-req{color:var(--gold-400);font-weight:700}
.eq-field input,
.eq-field select{
  width:100%;padding:12px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;color:#fff;font-size:14px;font-family:inherit;
  transition:border-color var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease);
  -webkit-appearance:none;appearance:none;
}
.eq-select-wrap{position:relative}
.eq-select-wrap select{padding-right:38px;cursor:pointer}
.eq-select-wrap::after{
  content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c471' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform var(--speed-fast) var(--ease);
}
.eq-select-wrap:focus-within::after{transform:translateY(-50%) rotate(180deg)}
.eq-field input::placeholder{color:rgba(255,255,255,.3)}
.eq-field input:focus,
.eq-field select:focus{
  outline:none;border-color:var(--gold-400);
  box-shadow:0 0 0 3px rgba(227,196,113,.15);
}
.eq-field select option{background:var(--navy-950);color:#fff}
.eq-select-wrap select{color:rgba(255,255,255,.4)}
.eq-select-wrap select.has-value{color:#fff}
.eq-custom{position:relative}
.eq-custom-btn{
  width:100%;padding:12px 38px 12px 14px;text-align:left;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;color:rgba(255,255,255,.4);font-size:14px;font-family:inherit;
  cursor:pointer;transition:border-color var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease);
}
.eq-custom-btn.has-value{color:#fff}
.eq-custom.open .eq-custom-btn,.eq-custom-btn:focus{outline:none;border-color:var(--gold-400);box-shadow:0 0 0 3px rgba(227,196,113,.15)}
.eq-custom .eq-select-wrap::after{top:50%;right:14px}
.eq-custom-list{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;
  background:rgba(10,23,48,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(227,196,113,.25);border-radius:10px;
  padding:5px;max-height:180px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--speed-fast) var(--ease),transform var(--speed-fast) var(--ease),visibility var(--speed-fast);
  box-shadow:0 12px 36px rgba(0,0,0,.4);
  scrollbar-width:thin;scrollbar-color:rgba(227,196,113,.3) transparent;
}
.eq-custom-list::-webkit-scrollbar{width:5px}
.eq-custom-list::-webkit-scrollbar-track{background:transparent;border-radius:10px}
.eq-custom-list::-webkit-scrollbar-thumb{background:rgba(227,196,113,.3);border-radius:10px}
.eq-custom-list::-webkit-scrollbar-thumb:hover{background:rgba(227,196,113,.5)}
.eq-custom.open .eq-custom-list{opacity:1;visibility:visible;transform:translateY(0)}
.eq-custom.open .eq-select-wrap::after{transform:translateY(-50%) rotate(180deg)}
.eq-custom-opt{
  padding:8px 12px;border-radius:6px;font-size:12.5px;
  color:rgba(255,255,255,.75);cursor:pointer;
  transition:background var(--speed-fast) var(--ease),color var(--speed-fast) var(--ease);
}
.eq-custom-opt:hover{background:rgba(227,196,113,.12);color:var(--gold-400)}
.eq-custom-opt.selected{color:var(--gold-400);font-weight:600}
.eq-submit{
  flex-shrink:0;padding:12px 28px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
  border-radius:10px;font-size:14px;font-weight:600;
}
.eq-submit svg{width:16px;height:16px;transition:transform var(--speed-fast) var(--ease)}
.eq-submit:hover svg{transform:translateX(4px)}
@media(max-width:768px){
  .enquiry-bar{padding:22px 18px}
  .enquiry-bar-fields{flex-direction:column}
  .eq-field{min-width:100%}
  .eq-submit{width:100%;justify-content:center}
}

/* University cards */
.uni-card{
  position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);
  overflow:hidden;transition:transform var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),border-color var(--speed-fast) var(--ease);
}
.uni-card::before{
  content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;
  background:radial-gradient(circle,rgba(227,196,113,.3) 0%,transparent 70%);
  opacity:0;transition:opacity var(--speed-fast) var(--ease);pointer-events:none;z-index:1;
}
.uni-card::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius-lg);
  border:1.5px solid var(--gold-400);
  box-shadow:0 0 12px rgba(227,196,113,.25),0 0 28px rgba(227,196,113,.1),inset 0 0 12px rgba(227,196,113,.08);
  opacity:0;transition:opacity var(--speed-fast) var(--ease);pointer-events:none;z-index:1;
}
.uni-card:hover{transform:translateY(-8px);box-shadow:0 12px 36px -8px rgba(10,23,48,.15);border-color:transparent}
.uni-card:hover::before{opacity:1}
.uni-card:hover::after{opacity:1}
.uni-card-top{padding:28px 26px 20px;display:flex;align-items:center;gap:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.uni-badge{
  width:54px;height:54px;border-radius:12px;background:var(--navy-900);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--font-display);font-weight:600;color:var(--gold-400);font-size:16px;
}
/* ---------- University directory (universities.html) ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dir-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:18px;
}
.pill-count{
  display:inline-block;margin-left:8px;min-width:22px;padding:1px 7px;border-radius:100px;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);font-size:12px;font-weight:600;text-align:center;
}
.pill.active .pill-count{background:rgba(227,196,113,.2);color:var(--gold-300)}
.dir-search{position:relative;flex:0 1 320px}
.dir-search svg{position:absolute;left:14px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:rgba(255,255,255,.4);pointer-events:none}
.dir-search input{
  width:100%;padding:11px 16px 11px 40px;border-radius:100px;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.15);
  color:#fff;font-size:14px;transition:border-color var(--speed-fast) var(--ease);
}
.dir-search input::placeholder{color:rgba(255,255,255,.4)}
.dir-search input:focus{outline:none;border-color:var(--gold-400)}
.dir-count{font-size:14px;color:rgba(255,255,255,.5);margin-bottom:28px}
.dir-count b{color:#fff;font-weight:600}

.campus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:24px}

.campus-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.025) 100%);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);
  padding:12px;
  transition:border-color var(--speed-fast) var(--ease),background-color var(--speed-fast) var(--ease);
}
.campus-card:hover,.campus-card:focus-within{border-color:rgba(227,196,113,.55)}
.campus-card{transition:transform var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),border-color var(--speed-fast) var(--ease)}
@media (hover:hover){
  .campus-card:hover{
    transform:translateY(-6px) scale(1.03);z-index:2;
    box-shadow:0 24px 48px -20px rgba(0,0,0,.7),0 0 0 1px rgba(227,196,113,.25),0 12px 36px -18px rgba(227,196,113,.35);
  }
}
@media (prefers-reduced-motion: reduce){.campus-card:hover{transform:none}}
.campus-plate{
  aspect-ratio:2 / 1;background:#fff;border-radius:10px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:18px 26px;
}
.campus-plate img{
  width:100%;height:100%;object-fit:contain;
  transform:scale(var(--logo-scale,1));
}
.campus-body{padding:20px 10px 0;flex:1;display:flex;flex-direction:column}
.campus-name{
  font-family:var(--font-display);font-size:20px;font-weight:500;line-height:1.25;color:#fff;
}
.campus-link{color:inherit}
.campus-link::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);z-index:1}
.campus-link:focus-visible{outline:none}
.campus-card:has(.campus-link:focus-visible){outline:2px solid var(--gold-400);outline-offset:3px}
.campus-loc{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13.5px;color:rgba(255,255,255,.55)}
.campus-loc svg{width:13px;height:13px;flex-shrink:0}

.level-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:auto;padding-top:20px}
.level-bar li{display:flex;flex-direction:column;gap:7px;font-size:10.5px;letter-spacing:-.005em;white-space:nowrap;color:rgba(255,255,255,.3)}
.level-bar li::before{content:"";height:4px;border-radius:2px;background:rgba(255,255,255,.1)}
.level-bar li.on{color:rgba(255,255,255,.8)}
.level-bar li.on::before{background:var(--gold-400)}

.campus-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:20px 10px 0;padding:14px 0 6px;border-top:1px solid rgba(255,255,255,.08);
  font-size:14px;
}
.campus-cta{display:flex;align-items:center;gap:8px;color:var(--gold-400);font-weight:600}
.campus-cta svg{width:15px;height:15px;transition:transform var(--speed-fast) var(--ease)}
.campus-card:hover .campus-cta svg{transform:translateX(3px)}
.campus-pdf{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.7);font-size:12.5px;font-weight:500;
  transition:border-color var(--speed-fast) var(--ease),color var(--speed-fast) var(--ease);
}
.campus-pdf svg{width:13px;height:13px}
.campus-pdf:hover,.campus-pdf:focus-visible{border-color:var(--gold-400);color:var(--gold-300);outline:none}

.dir-empty{
  grid-column:1 / -1;padding:56px 28px;text-align:center;
  border:1px dashed rgba(255,255,255,.16);border-radius:var(--radius-lg);
}
.dir-empty h3{font-size:24px;color:#fff;margin-bottom:10px}
.dir-empty p{color:rgba(255,255,255,.6);max-width:46ch;margin:0 auto 24px}

@media (max-width:640px){
  .dir-search{flex:1 1 100%}
  .campus-name{font-size:18px}
}

/* ---------- Fee profile page ---------- */
/* Profile identity: logo panel beside the university name */
.profile-id{display:flex;align-items:center;gap:36px;margin-top:24px}
.profile-logo{
  flex-shrink:0;width:260px;aspect-ratio:2 / 1;
  background:#fff;border-radius:14px;padding:18px 24px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 40px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
}
.profile-logo img{width:100%;height:100%;object-fit:contain;transform:scale(var(--logo-scale,1))}
.profile-id-text{min-width:0}
.profile-id-text p{margin-top:12px}
@media (max-width:760px){
  .profile-id{flex-direction:column;align-items:flex-start;gap:24px;margin-top:20px}
  .profile-logo{width:200px}
}
.fee-header-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:32px;
}
.fee-note{
  color:rgba(255,255,255,.5);font-size:13.5px;line-height:1.6;
  border-left:3px solid var(--gold-400);padding-left:16px;
  margin-bottom:0;flex:1;min-width:240px;
}
.fee-download-row{
  display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;
  padding-top:2px;
}
.fee-download-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:var(--radius-sm);
  border:1px solid var(--gold-400);color:var(--gold-400);
  font-size:13.5px;font-weight:600;
  background:transparent;cursor:pointer;white-space:nowrap;
  text-decoration:none;
  transition:background var(--speed-fast) var(--ease),color var(--speed-fast) var(--ease);
}
.fee-download-btn:hover{
  background:var(--gold-400);color:var(--navy-950);
}
.fee-download-btn svg{width:15px;height:15px}
.fee-tabs{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:28px;
}
.fee-tab{
  padding:10px 20px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.65);font-size:14px;font-weight:500;
  cursor:pointer;transition:all var(--speed-fast) var(--ease);
}
.fee-tab:hover{
  background:rgba(255,255,255,.1);color:#fff;
}
.fee-tab.active{
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  color:var(--navy-950);border-color:transparent;font-weight:600;
}
.fee-tab:focus-visible{
  outline:2px solid var(--gold-400);outline-offset:2px;
}
.fee-panel{
  animation:feeFadeIn .3s var(--ease);
}
@keyframes feeFadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.fee-table-wrap{
  overflow-x:auto;border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:20px;
}
.fee-table{
  width:100%;border-collapse:collapse;
  font-size:14px;font-variant-numeric:tabular-nums;
}
.fee-table thead{
  background:rgba(255,255,255,.06);
}
.fee-table th{
  text-align:left;padding:14px 16px;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gold-400);white-space:nowrap;
}
.fee-table td{
  padding:14px 16px;color:rgba(255,255,255,.75);
  border-top:1px solid rgba(255,255,255,.06);
}
.fee-table tbody tr:hover{
  background:rgba(255,255,255,.03);
}
.fee-table .fee-total{
  color:#fff;font-weight:600;
}
.fee-group{
  margin-bottom:28px;
}
.fee-group-title{
  color:#fff;font-size:15px;font-weight:600;
  margin-bottom:12px;padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

@media(max-width:600px){
  .fee-tabs{gap:6px}
  .fee-tab{padding:8px 14px;font-size:13px}
  .fee-table th,.fee-table td{padding:10px 12px;font-size:13px}
}

.uni-card-top h4{font-size:17px;color:#fff;margin-bottom:4px}
.uni-card-top .uni-loc{display:flex;align-items:center;gap:5px;font-size:12.8px;color:rgba(255,255,255,.5)}
.uni-card-top .uni-loc svg{width:12px;height:12px}
.uni-card-body{padding:20px 26px 26px}
.uni-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.uni-tags span{font-size:11.5px;padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.65);font-weight:500}
.uni-card-body .btn-text{font-size:14px}

/* Program cards */
.prog-card{
  position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);
  padding:28px;overflow:hidden;transition:transform var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),border-color var(--speed-fast) var(--ease);
}
.prog-card::before{
  content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;
  background:radial-gradient(circle,rgba(227,196,113,.3) 0%,transparent 70%);
  opacity:0;transition:opacity var(--speed-fast) var(--ease);pointer-events:none;
}
.prog-card::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius-lg);
  border:1.5px solid var(--gold-400);
  box-shadow:0 0 12px rgba(227,196,113,.25),0 0 28px rgba(227,196,113,.1),inset 0 0 12px rgba(227,196,113,.08);
  opacity:0;transition:opacity var(--speed-fast) var(--ease);pointer-events:none;
}
.prog-card:hover{transform:translateY(-8px);box-shadow:0 12px 36px -8px rgba(10,23,48,.15);border-color:transparent}
.prog-card:hover::before{opacity:1}
.prog-card:hover::after{opacity:1}
.prog-card h4{font-size:17px;color:#fff;margin-bottom:10px}
.prog-card p{font-size:13.8px;color:rgba(255,255,255,.6);margin-bottom:16px}
.prog-count{font-size:12.5px;color:var(--gold-400);font-weight:600;margin-bottom:14px;display:block}

/* Timeline / journey */
.timeline{position:relative;max-width:800px;margin:0 auto}
/* Connector is drawn per-item (dot bottom -> next item's dot top), not as
   one line spanning the whole timeline — that made it overshoot past the
   last dot into the last item's own text block. :not(:last-child) means
   the line simply never gets drawn below the final step. Pseudo-elements
   paint before an item's real children, so .tl-dot naturally sits above
   it with no z-index gymnastics needed. */
.tl-item:not(:last-child)::before{
  content:"";position:absolute;left:29px;top:60px;bottom:0;width:2px;
  background:rgba(255,255,255,.1);
}
.tl-item:not(:last-child)::after{
  content:"";position:absolute;left:29px;top:60px;width:2px;height:0;
  background:linear-gradient(var(--gold-500),var(--sky-500));
  box-shadow:0 0 12px rgba(227,196,113,.45);
  transition:height .7s var(--ease) .15s;
}
.tl-item.in:not(:last-child)::after{height:calc(100% - 60px)}
.tl-item{position:relative;display:flex;gap:26px;padding-bottom:46px;opacity:0;transform:translateX(-14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.tl-item.in{opacity:1;transform:translateX(0)}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  width:60px;height:60px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-900));color:var(--gold-400);
  display:flex;align-items:center;justify-content:center;
  border:4px solid var(--navy-950);box-shadow:0 0 0 1px rgba(255,255,255,.12);position:relative;z-index:2;
  transition:transform var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),background var(--speed-fast) var(--ease);
}
.tl-dot svg{width:23px;height:23px}
.tl-item:hover .tl-dot{
  transform:scale(1.1);
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600));
  box-shadow:0 0 0 1px rgba(227,196,113,.45),0 0 26px -4px rgba(227,196,113,.65);
}
.tl-item:hover .tl-dot svg{color:#fff}
.tl-item.in .tl-dot{animation:tl-pop .5s var(--ease) .1s backwards}
@keyframes tl-pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.tl-content{padding-top:8px}
.tl-step{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-400);margin-bottom:5px}
.tl-content h4{font-size:18px;color:#fff;margin-bottom:6px}
.tl-content p{color:rgba(255,255,255,.6);font-size:14.5px}

/* Steps small (process) */
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:900px){.steps-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps-row{grid-template-columns:1fr}}

/* FAQ accordion */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(255,255,255,.08)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:24px 4px;font-size:16.5px;font-weight:600;color:#fff;text-align:left;
}
.faq-q svg{width:16px;height:16px;flex-shrink:0;transition:transform var(--speed) var(--ease);color:var(--gold-400)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--speed) var(--ease)}
.faq-a p{padding:0 4px 24px;color:rgba(255,255,255,.6);font-size:15px;line-height:1.75;max-width:660px}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field label{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.8)}
.field label .req{color:#e74c3c}
.field input,.field select,.field textarea{
  padding:14px 16px;border:1.5px solid rgba(255,255,255,.12);border-radius:8px;
  background:rgba(255,255,255,.06);color:#fff;font-size:14.5px;transition:border-color var(--speed-fast),box-shadow var(--speed-fast);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-400);box-shadow:0 0 0 4px rgba(227,196,113,.1);
}
.field textarea{resize:vertical;min-height:110px}
.field.file{border:1.5px dashed rgba(255,255,255,.12);border-radius:10px;padding:22px;text-align:center;cursor:pointer;transition:border-color var(--speed-fast),background var(--speed-fast)}
.field.file:hover{border-color:var(--gold-400);background:rgba(255,255,255,.04)}
.error-msg{font-size:12.5px;color:#c0392b;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c0392b}
.field.invalid .error-msg{display:block}

.form-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:44px;box-shadow:0 8px 32px -8px rgba(0,0,0,.4)}
@media (max-width:640px){.form-card{padding:26px}}

.success-panel{text-align:center;padding:70px 20px}
.success-icon{
  width:80px;height:80px;border-radius:50%;background:rgba(30,142,90,.1);
  display:flex;align-items:center;justify-content:center;margin:0 auto 26px;
}
.success-icon svg{width:36px;height:36px;color:var(--success)}

/* CTA band */
.cta-band{
  background:linear-gradient(150deg,var(--navy-950),var(--navy-800));
  color:#fff;border-radius:24px;padding:64px;position:relative;overflow:hidden;
  display:flex;justify-content:space-between;align-items:center;gap:40px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow-lg);
  transition:transform var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),border-color var(--speed-fast) var(--ease);
}
.cta-band:hover{
  transform:translateY(-4px);
  border-color:rgba(227,196,113,.3);
  box-shadow:0 26px 60px -16px rgba(0,0,0,.55), 0 0 50px -10px rgba(227,196,113,.18);
}
.cta-band::after{
  /* Animating background-position on a multi-stop radial-gradient repaints
     every frame and can look blocky/hard-edged in some browsers — animate
     `transform` on an oversized layer instead, which the GPU composites
     smoothly with no repaint. */
  content:"";position:absolute;top:-25%;left:-25%;width:150%;height:150%;
  background:
    radial-gradient(500px 300px at 70% 15%,rgba(209,165,61,.25),transparent 70%),
    radial-gradient(420px 260px at 20% 85%,rgba(46,141,224,.16),transparent 70%);
  animation:cta-glow 9s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes cta-glow{
  0%{transform:translate(0,0)}
  100%{transform:translate(-70px,40px)}
}
.cta-band-icon{
  position:absolute;left:-18px;bottom:-18px;width:150px;height:150px;
  color:rgba(255,255,255,.05);pointer-events:none;z-index:1;
  transition:transform var(--speed-fast) var(--ease),color var(--speed-fast) var(--ease);
}
.cta-band:hover .cta-band-icon{transform:scale(1.06) rotate(-4deg);color:rgba(255,255,255,.08)}
.cta-band>*{position:relative;z-index:2}
.cta-band h3{font-size:28px;color:#fff;margin-bottom:10px}
.cta-band p{color:rgba(255,255,255,.68);font-size:15px}
.cta-band .btn-row{display:flex;gap:14px;flex-shrink:0;flex-wrap:wrap}
@media (max-width:780px){.cta-band{flex-direction:column;text-align:center;padding:44px 28px}}

/* ---------- Dark Theme (Global) ---------- */
.section,.section-tight{background:var(--navy-950) !important}
.section:nth-of-type(even){background:linear-gradient(180deg,var(--navy-900),var(--navy-950)) !important}
.section{position:relative;overflow:hidden}
.section::after{content:"";position:absolute;top:0;left:50%;width:min(800px,100vw);height:400px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(227,196,113,.03) 0%,transparent 70%);pointer-events:none;z-index:0}
.section-head p{color:rgba(255,255,255,.6)}

/* Glass surface upgrades */
.feature-card{
  background:linear-gradient(145deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 100%);
  border-color:rgba(255,255,255,.1);
  border-top-color:rgba(255,255,255,.18);
  box-shadow:0 4px 20px -4px rgba(0,0,0,.4), 0 1px 0 0 rgba(255,255,255,.06) inset;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),border-color var(--speed-fast) var(--ease),background var(--speed-fast) var(--ease);
}
.feature-card:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.05) 100%);
  border-color:transparent;
  transform:translateY(-10px) scale(1.025);
  box-shadow:0 22px 54px -12px rgba(0,0,0,.55), 0 0 44px rgba(227,196,113,.24), 0 0 84px rgba(227,196,113,.1);
}
.feature-icon{
  background:linear-gradient(135deg,var(--navy-800),var(--navy-900));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 8px rgba(0,0,0,.3) inset;
}
.grid-3{gap:32px}

.tl-dot{border-color:var(--navy-950);box-shadow:0 0 0 1px rgba(255,255,255,.12)}

.uni-card{
  background:linear-gradient(145deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%);
  border-color:rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 16px -4px rgba(0,0,0,.35), 0 1px 0 0 rgba(255,255,255,.05) inset;
}
.uni-tags span{border:1px solid rgba(255,255,255,.06)}

.prog-card{
  background:linear-gradient(145deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%);
  border-color:rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 16px -4px rgba(0,0,0,.35), 0 1px 0 0 rgba(255,255,255,.05) inset;
}

.form-card{
  background:linear-gradient(145deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 100%);
  border-color:rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 32px -8px rgba(0,0,0,.4), 0 1px 0 0 rgba(255,255,255,.06) inset;
}
.field label{color:rgba(255,255,255,.8)}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.2) inset;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold-400);box-shadow:0 0 0 4px rgba(227,196,113,.1), 0 2px 6px rgba(0,0,0,.2) inset;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35)}
.field.file{border-color:rgba(255,255,255,.12)}
.field.file:hover{border-color:var(--gold-400);background:rgba(255,255,255,.04)}

.program-detail-panel{
  background:linear-gradient(160deg,var(--navy-900),var(--navy-950));
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.85);
}

/* Footer */
footer{background:linear-gradient(180deg,var(--navy-900),var(--navy-950));color:rgba(255,255,255,.6);padding-top:80px;border-top:1px solid rgba(255,255,255,.06)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.08)}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-brand p{margin:18px 0 22px;font-size:13.8px;line-height:1.75;max-width:280px}
.foot-social{display:flex;gap:10px}
.foot-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:background var(--speed-fast)}
.foot-social a:hover{background:var(--gold-500)}
.foot-social svg{width:15px;height:15px}
.foot-col h5{color:#fff;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:20px;font-weight:600}
.foot-col li{margin-bottom:12px}
.foot-col a{font-size:14px;transition:color var(--speed-fast)}
.foot-col a:hover{color:var(--gold-400)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:26px 0;font-size:12.8px;flex-wrap:wrap;gap:12px}
.foot-bottom a{transition:color var(--speed-fast)}
.foot-bottom a:hover{color:#fff}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger>*{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-stagger.in>*{opacity:1;transform:translateY(0) scale(1)}
.reveal-stagger.in>*:nth-child(1){transition-delay:.05s}
.reveal-stagger.in>*:nth-child(2){transition-delay:.14s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.23s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.32s}
.reveal-stagger.in>*:nth-child(5){transition-delay:.41s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.5s}

/* Utility */
.text-center{text-align:center}
.mt-0{margin-top:0}
.divider{height:1px;background:rgba(255,255,255,.08);margin:60px 0}
.pill-row{display:flex;flex-wrap:wrap;gap:10px}
.pill{padding:9px 18px;border-radius:100px;border:1.5px solid rgba(255,255,255,.15);font-size:13.5px;font-weight:500;color:rgba(255,255,255,.65);transition:all var(--speed-fast)}
.pill:hover,.pill.active{border-color:var(--gold-400);background:rgba(227,196,113,.12);color:var(--gold-300)}
.empty-state{text-align:center;padding:70px 20px;border:1.5px dashed rgba(255,255,255,.12);border-radius:var(--radius-lg);color:rgba(255,255,255,.5)}
.empty-state svg{width:40px;height:40px;color:rgba(255,255,255,.2);margin:0 auto 16px}
.badge-soon{display:inline-block;padding:4px 10px;border-radius:100px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);font-size:11px;font-weight:600}
.placeholder-note{font-size:12.5px;color:rgba(255,255,255,.5);background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.1);border-radius:8px;padding:10px 14px;margin-top:8px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px}}

.stat-strip{display:flex;gap:0;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);overflow:hidden;background:rgba(255,255,255,.04)}
.stat-strip>div{flex:1;padding:28px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.stat-strip>div:last-child{border-right:none}
.stat-strip b{display:block;font-family:var(--font-display);font-size:26px;color:var(--gold-400)}
.stat-strip span{font-size:12.5px;color:rgba(255,255,255,.55)}
@media (max-width:700px){.stat-strip{flex-wrap:wrap}.stat-strip>div{flex:1 1 50%;border-bottom:1px solid rgba(255,255,255,.08)}}

.list-check{display:flex;flex-direction:column;gap:14px}
.list-check li{display:flex;align-items:flex-start;gap:12px;font-size:14.8px;color:rgba(255,255,255,.7)}
.list-check svg{width:18px;height:18px;color:var(--gold-400);flex-shrink:0;margin-top:2px}

.sticky-side{position:sticky;top:110px}

/* Program detail overlay */
#programOverlay{
  position:fixed;inset:0;z-index:1200;background:rgba(5,13,31,.6);
  opacity:0;visibility:hidden;transition:opacity var(--speed) var(--ease),visibility var(--speed);
  display:flex;align-items:flex-start;justify-content:center;padding:70px 20px;overflow-y:auto;
}
#programOverlay.open{opacity:1;visibility:visible}
.program-detail-panel{
  background:linear-gradient(160deg,var(--navy-900),var(--navy-950));border:1px solid rgba(255,255,255,.1);
  border-radius:20px;max-width:960px;width:100%;padding:44px;color:rgba(255,255,255,.85);
  transform:translateY(30px);transition:transform var(--speed) var(--ease);box-shadow:0 24px 64px -16px rgba(0,0,0,.6);
}
#programOverlay.open .program-detail-panel{transform:translateY(0)}
.program-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
@media (max-width:640px){.program-detail-panel{padding:26px}}

/* ---------- Focus visibility (keyboard navigation) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.pill:focus-visible,.faq-q:focus-visible,.field.file:focus-visible{
  outline:2px solid var(--gold-400);outline-offset:3px;border-radius:4px;
}
.nav-main a:focus-visible,.nav-main button:focus-visible{outline-offset:-2px}

/* ============================================================
   Button interaction system
   One shared feel for every button: lift + scale on hover, press on
   click, and a clear resting border on unfilled buttons that turns
   gold on hover. Links, nav items and accordion rows are excluded.
   ============================================================ */
:root{
  --btn-lift:translateY(-2px) scale(1.04);
  --btn-lift-wide:translateY(-2px) scale(1.02);
  --btn-press:scale(.97);
  --btn-border-rest:rgba(255,255,255,.28);
  --btn-border-hover:var(--gold-400);
}

/* Filled buttons get an invisible border so they match outline buttons in height */
.btn{border:1.5px solid transparent}

.btn,.fee-download-btn,.campus-pdf,.pill,.fee-tab,.fab-whatsapp{
  transition:transform var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),
             background var(--speed-fast) var(--ease),color var(--speed-fast) var(--ease),
             border-color var(--speed-fast) var(--ease);
  will-change:transform;
}

/* Unfilled buttons: visible resting border */
.btn-outline{border-color:var(--btn-border-rest)}
.btn-outline-dark{border-color:rgba(10,23,48,.22)}
.pill{border-color:rgba(255,255,255,.22)}
.fee-tab{border-color:rgba(255,255,255,.18)}
.campus-pdf{border-color:rgba(255,255,255,.22)}
.btn.fee-download-btn{border:1.5px solid var(--gold-400);color:var(--gold-400);padding:10px 20px}

@media (hover:hover){
  .btn:hover,.fee-download-btn:hover,.campus-pdf:hover,.pill:hover,.fee-tab:hover{transform:var(--btn-lift)}
  .btn-block:hover{transform:var(--btn-lift-wide)}
  .fab-whatsapp:hover{transform:scale(1.1)}

  .btn-outline:hover{border-color:var(--btn-border-hover);color:var(--gold-300);background:rgba(227,196,113,.08);box-shadow:0 10px 26px -12px rgba(227,196,113,.45)}
  .btn-outline-dark:hover{border-color:var(--navy-900)}
  .btn-navy:hover,.btn-whatsapp:hover{box-shadow:0 12px 28px -12px rgba(0,0,0,.55)}
  .pill:hover,.fee-tab:hover:not(.active){border-color:var(--btn-border-hover)}
  .btn.fee-download-btn:hover{background:var(--gold-400);color:var(--navy-950);border-color:var(--gold-400);box-shadow:0 10px 26px -12px rgba(227,196,113,.5)}
}

/* Pressed state (all input types) */
.btn:active,.fee-download-btn:active,.campus-pdf:active,.pill:active,.fee-tab:active{transform:var(--btn-press);transition-duration:.08s}
.fab-whatsapp:active{transform:scale(.95)}

@media (prefers-reduced-motion: reduce){
  .btn:hover,.btn:active,.fee-download-btn:hover,.fee-download-btn:active,
  .campus-pdf:hover,.campus-pdf:active,.pill:hover,.pill:active,
  .fee-tab:hover,.fee-tab:active,.fab-whatsapp:hover,.fab-whatsapp:active{transform:none}
}

/* ---------- Navbar links: same interaction feel as buttons ---------- */
@media (min-width:1181px){.brand{flex-shrink:0}}
.nav-main{gap:8px;margin:0 32px}
.nav-main>li>a,.nav-main>li>button{
  padding:9px 14px;border:1px solid transparent;
  transition:transform var(--speed-fast) var(--ease),color var(--speed-fast) var(--ease),
             background var(--speed-fast) var(--ease),border-color var(--speed-fast) var(--ease),
             box-shadow var(--speed-fast) var(--ease);
}
@media (hover:hover){
  .nav-main>li>a:hover,.nav-main>li>button:hover{
    transform:translateY(-1px) scale(1.05);
    border-color:rgba(227,196,113,.45);
    background:rgba(227,196,113,.07);
    box-shadow:0 8px 20px -12px rgba(227,196,113,.45);
  }
  .nav-main>li.active>a:hover,.nav-main>li.active>button:hover{border-color:var(--gold-400)}
}
.nav-main>li>a:active,.nav-main>li>button:active{transform:scale(.97);transition-duration:.08s}
@media (max-width:1365px){
  .nav-main{gap:4px;margin:0 28px}
  .nav-main>li>a,.nav-main>li>button{padding:9px 12px}
}
/* Below this the full link row can't keep comfortable spacing, so use the mobile menu */
@media (max-width:1180px){
  .nav-main{display:none}
  .nav-toggle{display:flex}
  .nav-cta .btn-outline{display:none}
}
@media (prefers-reduced-motion: reduce){
  .nav-main>li>a:hover,.nav-main>li>button:hover,.nav-main>li>a:active,.nav-main>li>button:active{transform:none}
}

/* ============================================================
   Section spacing standard
   Every section contributes half the rhythm on each side, so the
   space between the content of any two neighbouring sections is
   always --space-section, regardless of .section / .section-tight.
   Sections that touch a band with its own background (hero, page
   header, footer) take the full rhythm on that side.
   ============================================================ */
:root{
  --space-section:72px;   /* between neighbouring sections */
  --space-band:56px;      /* inside page header / hero, above and below content */
  --space-head:40px;      /* section heading to its content */
  --header-offset:123px;  /* fixed topbar + navbar height */
}
@media (max-width:900px){:root{--space-section:48px;--space-band:40px;--space-head:32px}}
@media (max-width:760px){:root{--header-offset:85px}} /* topbar hidden */

.page-header{padding:calc(var(--header-offset) + var(--space-band)) 0 var(--space-band)}
.hero{padding:calc(var(--header-offset) + var(--space-band)) 0 var(--space-band)}
.section-head{margin-bottom:var(--space-head)}
footer{padding-top:var(--space-band)}
.foot-grid{padding-bottom:var(--space-head)}

.section,.section-tight,#quickEnquiry{padding:calc(var(--space-section) / 2) 0}

.hero + .section,.hero + .section-tight,.hero + #quickEnquiry,
.page-header + .section,.page-header + .section-tight{padding-top:var(--space-section)}

.section:has(+ #site-footer),.section-tight:has(+ #site-footer),
#uniProfile > .section:last-child,#uniProfile > .section-tight:last-child{padding-bottom:var(--space-section)}

/* No trailing margins at the end of a section's content */
.section-head:has(+ :empty:last-child){margin-bottom:0}
.fee-panel > :last-child,.fee-panel > .fee-group:last-child > .fee-table-wrap:last-child{margin-bottom:0}

/* ============================================================
   Mobile responsiveness fixes
   ============================================================ */

/* Grid/flex children may shrink below their content width (long emails, URLs) */
.split > *{min-width:0}

/* CTA icon: a gold chat badge leading the heading */
.cta-band > .cta-band-icon{
  position:relative;left:auto;bottom:auto;flex-shrink:0;
  width:64px;height:64px;padding:13px;margin-right:-14px;border-radius:16px;
  color:var(--gold-400);background:rgba(227,196,113,.1);
  border:1px solid rgba(227,196,113,.35);
  box-shadow:0 12px 30px -14px rgba(227,196,113,.45);
}
.cta-band:hover .cta-band-icon{transform:rotate(-6deg) scale(1.06);color:var(--gold-300)}
.cta-band:has(> .cta-band-icon) > div:not(.btn-row){flex:1}
@media (max-width:780px){
  .cta-band > .cta-band-icon{margin:0 0 -16px;width:56px;height:56px;padding:11px}
}

/* Header: keep brand on two lines and everything on one row */
@media (max-width:480px){
  .navbar .wrap{gap:10px}
  .brand{gap:9px;min-width:0}
  .brand-mark,body.scrolled .navbar .brand-mark{width:44px;height:44px;border-radius:8px}
  .brand-word b{font-size:17px}
  .brand-word span{font-size:9px;letter-spacing:.12em;white-space:nowrap}
}
/* Whenever the menu button shows, Free Assessment lives in the menu instead */
@media (max-width:1180px){
  .nav-cta .btn-gold{display:none}
}

/* Hero badge wraps instead of running off narrow screens */
@media (max-width:640px){
  .hero-copy .tag.light{white-space:normal;max-width:100%;line-height:1.45;padding:8px 14px;align-items:flex-start}
  .hero-copy .tag.light svg{flex-shrink:0;margin-top:3px}
}

/* Contact info strip: one item per row so long values fit */
@media (max-width:700px){
  .stat-strip > div{flex:1 1 100%;padding:20px}
  .stat-strip b{font-size:20px;overflow-wrap:anywhere}
}

/* Fee page: download buttons share the row, then wrap */
@media (max-width:640px){
  .fee-download-row{flex-shrink:1;width:100%}
  .fee-download-row .fee-download-btn{flex:1 1 auto;justify-content:center}
}

/* Fee tables become stacked rows on phones */
@media (max-width:640px){
  .fee-table thead{display:none}
  .fee-table,.fee-table tbody,.fee-table tr,.fee-table td{display:block;width:100%}
  .fee-table tr{padding:14px 16px;border-top:1px solid rgba(255,255,255,.06)}
  .fee-table tbody tr:first-child{border-top:0}
  .fee-table td{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:3px 0;border:0;text-align:right;font-size:13.5px;
  }
  .fee-table td::before{
    content:attr(data-label);flex-shrink:0;text-align:left;
    font-size:12px;color:rgba(255,255,255,.45);
  }
  .fee-table td:first-child{display:block;text-align:left;color:#fff;font-weight:500;font-size:14.5px;margin-bottom:6px}
  .fee-table td:first-child::before{content:none}
  .fee-table td:empty{display:none}
  .fee-table tbody tr:hover{background:transparent}
}

/* ---------- Destination card (home): compact layout, stronger hover ---------- */
.dest-grid-single .dest-card{
  min-height:0;padding:40px 44px;padding-right:200px;justify-content:center;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.dest-grid-single .dest-card h3{font-size:40px;margin-bottom:10px}
.dest-grid-single .dest-card p{font-size:16.5px;max-width:520px;margin-bottom:24px}
.dest-grid-single .dest-card .tag{margin-bottom:14px}
.dest-grid-single .dest-card-icon{
  top:50%;right:48px;width:128px;height:128px;transform:translateY(-50%);
  color:rgba(227,196,113,.22);
  transition:transform .35s var(--ease),color .35s var(--ease);
}
@media (hover:hover){
  .dest-grid-single .dest-card:hover{
    transform:translateY(-10px) scale(1.025);
    border-color:rgba(227,196,113,.6);
    box-shadow:0 30px 60px -24px rgba(0,0,0,.75),0 0 0 1px rgba(227,196,113,.2),0 18px 50px -20px rgba(227,196,113,.35);
  }
  .dest-grid-single .dest-card:hover .dest-card-icon{transform:translateY(-58%) scale(1.12) rotate(-6deg);color:rgba(227,196,113,.45)}
  .dest-grid-single .dest-card:hover::before{transform:scale(1.08)}
}
@media (max-width:900px){
  .dest-grid-single .dest-card{padding:32px 26px}
  .dest-grid-single .dest-card h3{font-size:32px}
  .dest-grid-single .dest-card-icon{top:24px;right:20px;width:72px;height:72px;transform:none}
  .dest-grid-single .dest-card:hover .dest-card-icon{transform:scale(1.1) rotate(-6deg)}
}
@media (prefers-reduced-motion: reduce){
  .dest-grid-single .dest-card:hover{transform:none}
}

/* ---------- Malaysia page header: copy + photo with floating glass card (mirrors home hero) ---------- */
.page-header-split .wrap{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;
}
.page-header-split .page-header-copy{min-width:0}
.glance-visual{position:relative}
.glance-card .hero-stat-row{margin-top:16px}
.page-header .glance-note{margin-top:14px;max-width:none;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.55)}
/* Photo edges fade into the header instead of showing a box */
.glance-visual .hero-photo{border-radius:0;box-shadow:none;overflow:visible}
.glance-visual .hero-photo img{
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);
}
@media (min-width:981px){
  .glance-visual{margin:0 0 72px 0}
  /* Card overlaps the photo's bottom-right corner, like the home hero */
  .glance-visual .glance-card{width:330px;min-width:0;max-width:none;left:auto;right:0;bottom:-72px}
}
@media (min-width:1360px){
  .glance-visual .glance-card{right:-56px}
}
@media (max-width:980px){
  .page-header-split .wrap{grid-template-columns:1fr;gap:36px}
}

/* Why Malaysia: checklist in its own panel beside the intro */
.why-list .list-check{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);padding:32px;gap:18px;
}

/* ---------- FAQ accordion: visible hover + open state ---------- */
.faq-item{
  position:relative;border-radius:12px;border:1px solid transparent;border-bottom-color:rgba(255,255,255,.08);
  transition:background var(--speed-fast) var(--ease),border-color var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease);
}
.faq-item + .faq-item{margin-top:6px}
.faq-q{padding:22px 20px;transition:color var(--speed-fast) var(--ease)}
.faq-a p{padding:0 20px 22px}
.faq-q svg{
  width:30px;height:30px;padding:7px;border-radius:50%;
  border:1px solid rgba(227,196,113,.35);
  transition:transform var(--speed) var(--ease),background var(--speed-fast) var(--ease),color var(--speed-fast) var(--ease),border-color var(--speed-fast) var(--ease);
}
.faq-item:hover,.faq-item:has(.faq-q:focus-visible){
  background:rgba(227,196,113,.06);border-color:rgba(227,196,113,.28);
  box-shadow:0 10px 30px -18px rgba(227,196,113,.35);
}
.faq-item:hover .faq-q,.faq-q:focus-visible{color:var(--gold-300)}
.faq-item:hover .faq-q svg,.faq-q:focus-visible svg{background:var(--gold-400);border-color:var(--gold-400);color:var(--navy-950)}
.faq-q:focus-visible{outline-offset:-2px}
@media (max-width:640px){
  .faq-q{padding:18px 16px;gap:12px}
  .faq-a p{padding:0 16px 18px}
}

/* ---------- Fee tables: visible hover on the table and the row ---------- */
.fee-table-wrap{transition:border-color var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease)}
.fee-table tbody tr{transition:background var(--speed-fast) var(--ease)}
.fee-table td{transition:color var(--speed-fast) var(--ease)}
@media (hover:hover){
  .fee-table-wrap:hover{
    border-color:rgba(227,196,113,.35);
    box-shadow:0 14px 36px -22px rgba(227,196,113,.4);
  }
  .fee-table tbody tr:hover{background:rgba(227,196,113,.15)}
  .fee-table tbody tr:hover td{color:#fff}
  .fee-table tbody tr:hover .fee-total{color:var(--gold-300)}
}

/* ============================================================
   Forms (contact + application): glass card, glass fields,
   hover state matches focus, gentle lift on each block
   ============================================================ */
.form-card{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(29,59,112,.28) 0%,rgba(10,23,48,.42) 55%,rgba(5,13,31,.5) 100%);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
/* gold hairline along the top edge */
.form-card::before{
  content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(227,196,113,.7),transparent);pointer-events:none;
}
/* soft gold glow in the corner, behind the content */
.form-card::after{
  content:"";position:absolute;top:-120px;right:-120px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(227,196,113,.16),transparent 70%);pointer-events:none;
}
.form-card > *{position:relative;z-index:1}

.field input,.field select,.field textarea{
  background:rgba(255,255,255,.035);border:1.5px solid rgba(255,255,255,.14);border-radius:10px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
  transition:border-color var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),background var(--speed-fast) var(--ease);
}
/* Hover looks the same as focus */
.field input:hover,.field select:hover,.field textarea:hover,
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-400);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 4px rgba(227,196,113,.12),inset 0 1px 2px rgba(0,0,0,.25);
}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c0392b}

/* Contact info strip: phone + hours side by side, email full width */
#contactInfoStrip{flex-wrap:wrap}
#contactInfoStrip > div{flex:1 1 50%;padding:22px;border-bottom:1px solid rgba(255,255,255,.08);transition:background var(--speed-fast) var(--ease),transform var(--speed-fast) var(--ease)}
#contactInfoStrip > div:nth-child(2){order:3;flex-basis:100%;border-right:none;border-bottom:none}
#contactInfoStrip > div:nth-child(3){border-right:none}
#contactInfoStrip b{font-size:clamp(18px,2vw,22px);overflow-wrap:anywhere}

/* Map placeholder matches the dark glass look */
.map-placeholder{
  margin-top:24px;height:240px;border-radius:var(--radius-lg);padding:24px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:13.5px;color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.035);border:1px dashed rgba(255,255,255,.16);
  transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}

.stat-strip,.placeholder-note,.partner-box{transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}

@media (hover:hover){
  .form-card:hover{transform:translateY(-6px) scale(1.012);border-color:rgba(227,196,113,.35);box-shadow:0 34px 70px -30px rgba(0,0,0,.8),0 14px 40px -22px rgba(227,196,113,.35),inset 0 1px 0 rgba(255,255,255,.08)}
  #contactInfoStrip > div:hover{background:rgba(227,196,113,.07)}
  .stat-strip:hover{transform:translateY(-4px) scale(1.02);border-color:rgba(227,196,113,.35)}
  .placeholder-note:hover{transform:translateY(-3px) scale(1.02)}
  .map-placeholder:hover{transform:translateY(-4px) scale(1.02);border-color:rgba(227,196,113,.4);background:rgba(227,196,113,.05)}
  .partner-box:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 30px 60px -28px rgba(0,0,0,.8),0 0 0 1px rgba(227,196,113,.3)}
}
@media (prefers-reduced-motion: reduce){
  .form-card:hover,.stat-strip:hover,.placeholder-note:hover,.map-placeholder:hover,.partner-box:hover{transform:none}
}

/* Why Malaysia checklist panel: hover lift like other cards */
.why-list .list-check{transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.why-list .list-check li{transition:color var(--speed-fast) var(--ease)}
@media (hover:hover){
  .why-list .list-check:hover{
    transform:translateY(-6px) scale(1.02);
    border-color:rgba(227,196,113,.4);background:rgba(227,196,113,.05);
    box-shadow:0 26px 56px -28px rgba(0,0,0,.75),0 12px 36px -20px rgba(227,196,113,.35);
  }
  .why-list .list-check li:hover{color:#fff}
}
@media (prefers-reduced-motion: reduce){.why-list .list-check:hover{transform:none}}

/* About page identity card: hover lift like other cards */
.about-card .brand-mark{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.about-card h3{transition:color var(--speed-fast) var(--ease)}
@media (hover:hover){
  .hero-card.about-card:hover{
    transform:translateY(-6px) scale(1.02);
    border-color:rgba(227,196,113,.4);
    box-shadow:0 26px 56px -28px rgba(0,0,0,.75),0 12px 36px -20px rgba(227,196,113,.35);
  }
  .about-card:hover .brand-mark{transform:rotate(-4deg) scale(1.06);box-shadow:0 8px 24px -8px rgba(227,196,113,.5)}
  .about-card:hover h3{color:var(--gold-300)!important}
}
@media (prefers-reduced-motion: reduce){.hero-card.about-card:hover,.about-card:hover .brand-mark{transform:none}}

/* ---------- Quick Enquiry bar (home): hover on the bar and on each field ---------- */
.enquiry-bar{transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.eq-field label{transition:color var(--speed-fast) var(--ease)}
.eq-field input,.eq-field select,.eq-custom-btn{transition:border-color var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),background var(--speed-fast) var(--ease)}
/* Field hover looks the same as focus */
.eq-field input:hover,.eq-field select:hover,.eq-custom-btn:hover{
  border-color:var(--gold-400);background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(227,196,113,.15);
}
.eq-field:hover label,.eq-field:focus-within label{color:var(--gold-300)}
@media (hover:hover){
  .enquiry-bar:hover{
    transform:translateY(-4px) scale(1.01);
    border-color:rgba(227,196,113,.35);
    box-shadow:0 26px 56px -28px rgba(0,0,0,.75),0 12px 36px -20px rgba(227,196,113,.3),inset 0 1px 0 rgba(255,255,255,.06);
  }
}
@media (prefers-reduced-motion: reduce){.enquiry-bar:hover{transform:none}}

/* Directory search: hover looks the same as focus, like other inputs */
.dir-search svg{transition:color var(--speed-fast) var(--ease)}
.dir-search input{transition:border-color var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease),background var(--speed-fast) var(--ease)}
.dir-search input:hover,.dir-search input:focus{
  outline:none;border-color:var(--gold-400);background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(227,196,113,.12);
}
.dir-search:hover svg,.dir-search:focus-within svg{color:var(--gold-400)}

/* Directory cards: clearer gold border + shadow on hover, matching other cards */
@media (hover:hover){
  .campus-card:hover{
    border-color:rgba(227,196,113,.7);
    background:linear-gradient(180deg,rgba(227,196,113,.07) 0%,rgba(255,255,255,.025) 100%);
    box-shadow:0 40px 80px -20px rgba(0,0,0,.95),0 0 0 1px rgba(227,196,113,.45),0 24px 70px -12px rgba(227,196,113,.6),0 0 40px rgba(227,196,113,.18);
  }
}
.campus-card:focus-within{border-color:rgba(227,196,113,.7);box-shadow:0 0 0 1px rgba(227,196,113,.35),0 18px 48px -18px rgba(227,196,113,.45)}