[hidden]{display:none!important}
/* ============================================================
   WinSYS Public Site — premium design system
   Deep navy · electric blue · brass gold · warm orange
   Rajdhani display · Inter body
   Inspired by the polished mockup designs (winsys-1 series).
   Colors come from CSS variables set by includes/site.php.
   ============================================================ */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.fs1 { font-size: 14px; } html.fs2 { font-size: 16px; }
html.fs3 { font-size: 18px; } html.fs4 { font-size: 21px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Inter', system-ui, sans-serif; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-family: 'Space Grotesk', sans-serif; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; } h4 { font-size: 1rem; color: var(--gold); }
.mono { font-family: 'JetBrains Mono', monospace; font-size: .82em; letter-spacing: .02em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.center { text-align: center; }

/* colorblind-friendly + high-contrast palettes (override accents only) */
body.cb-deutan  { --gold:#E8C547; --blue:#56B4E9; }
body.cb-protan  { --gold:#F0E442; --blue:#0072B2; }
body.cb-tritan  { --gold:#E69F00; --blue:#CC79A7; }
body.cb-contrast{ --bg:#000; --text:#fff; --gold:#FFD700; --blue:#4DA3FF; }

/* ---------- scroll progress + announce ---------- */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 90; background: transparent; }
.scroll-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--blue)); transition: width .1s linear; }
.announce { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 28%, var(--bg)), color-mix(in srgb, var(--blue) 22%, var(--bg))); padding: 8px 0; font-size: .9rem; text-align: center; border-bottom: 1px solid rgba(var(--overlay-rgb),.08); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 80; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--overlay-rgb),.07); }
.header-inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; font-family: 'Space Grotesk'; font-weight: 700; font-size: 1.2rem; color: var(--on-gold); background: linear-gradient(135deg, var(--gold), #B8932C); box-shadow: 0 2px 12px color-mix(in srgb, var(--gold) 40%, transparent); }
.brand-text { font-family: 'Space Grotesk'; font-weight: 700; font-size: 1.1rem; line-height: 1.05; display: flex; flex-direction: column; }
.brand-text small { font-weight: 500; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.brand-logo-chip { display: flex; align-items: center; background: #fff; border-radius: 10px; padding: 6px 12px; box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.brand-logo { height: 34px; width: auto; display: block; }
.footer-brand .brand-logo-chip { padding: 8px 14px; }
.footer-brand .brand-logo { height: 40px; }
.main-nav { display: flex; gap: 4px; margin-left: auto; }
.main-nav > a, .nav-drop > a { color: var(--text); padding: 10px 14px; border-radius: 8px; font-size: .95rem; font-weight: 500; }
.main-nav > a:hover, .nav-drop > a:hover { background: rgba(var(--overlay-rgb),.06); text-decoration: none; }
.nav-drop { position: relative; }
.drop-panel { position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--bg2); border: 1px solid rgba(var(--overlay-rgb),.1); border-radius: 12px; padding: 8px; display: none; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.nav-drop:hover .drop-panel, .nav-drop:focus-within .drop-panel { display: block; }
.drop-panel a { display: block; padding: 9px 12px; color: var(--text); border-radius: 8px; font-size: .9rem; }
.drop-panel a:hover { background: rgba(var(--overlay-rgb),.07); color: var(--gold); text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.portal-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: .9rem; color: var(--on-gold); background: linear-gradient(135deg, var(--gold), #B8932C); box-shadow: 0 2px 14px color-mix(in srgb, var(--gold) 35%, transparent); }
.portal-btn:hover { text-decoration: none; transform: translateY(-1px); }
.portal-logo { font-size: .8rem; }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; transition: .2s; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; object-fit: cover; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: .28; }
#meshCanvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero-inner { padding: 90px 20px; max-width: 820px; }
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.hero-sub { font-size: 1.12rem; color: color-mix(in srgb, var(--text) 78%, transparent); max-width: 560px; }
.terminal { font-family: 'JetBrains Mono', monospace; color: var(--gold); font-size: .95rem; margin: 22px 0 28px; min-height: 1.5em; }
.caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-search { display: flex; gap: 8px; max-width: 460px; margin: 0 0 20px; }
.hero-search input { flex: 1; padding: 13px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.3); color: #fff; font: inherit; font-size: 15px; }
.hero-search input::placeholder { color: rgba(255,255,255,.55); }
.hero-search button { width: 48px; border-radius: 10px; border: 0; cursor: pointer; background: var(--gold); color: var(--on-gold, #0B1220); font-size: 1.1rem; }
@media (max-width: 560px) { .hero-search { max-width: 100%; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 12px; font-weight: 600; font-size: .98rem; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-gold { background: linear-gradient(135deg, var(--gold), #B8932C); color: var(--on-gold); box-shadow: 0 4px 22px color-mix(in srgb, var(--gold) 35%, transparent); }
.btn-line { border: 1px solid rgba(var(--overlay-rgb),.25); color: var(--text); background: rgba(var(--overlay-rgb),.03); }
.btn-line:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm { padding: 9px 18px; font-size: .88rem; }
.btn-block { width: 100%; }

/* ---------- sections ---------- */
.section { padding: 76px 0; }
.section-alt { background: color-mix(in srgb, var(--bg) 80%, #1A2333); }
.sec-head { margin-bottom: 36px; }
.row-between { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head { padding: 70px 0 36px; background: radial-gradient(900px 300px at 20% 0%, color-mix(in srgb, var(--blue) 16%, transparent), transparent); }
.empty-note { color: color-mix(in srgb, var(--text) 60%, transparent); }

/* ---------- stats ---------- */
.stats { border-block: 1px solid rgba(var(--overlay-rgb),.07); background: color-mix(in srgb, var(--bg) 85%, #131C2E); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 8px; padding: 30px 20px; }
.stat { text-align: center; }
.stat strong { display: block; font-family: 'Space Grotesk'; font-size: 2rem; color: var(--gold); }
.stat span { font-size: .85rem; color: color-mix(in srgb, var(--text) 70%, transparent); }

/* ---------- course cards ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 22px; }
.course-card { display: flex; flex-direction: column; border-radius: 16px; background: rgba(var(--overlay-rgb),.035); border: 1px solid rgba(var(--overlay-rgb),.08); color: var(--text); transition: transform .18s, border-color .18s, box-shadow .18s; position: relative; overflow: hidden; }
.course-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--gold), var(--blue)); opacity: 0; transition: opacity .18s; z-index: 2; }
.course-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gold) 50%, transparent); text-decoration: none; box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.course-card:hover::before { opacity: 1; }
/* brochure / banner thumbnail */
.course-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg2); }
.course-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.course-card:hover .course-thumb img { transform: scale(1.05); }
.course-thumb.is-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; background: linear-gradient(150deg, var(--bg2), var(--bg3)); }
.course-thumb.is-ph .thumb-ic { font-size: 38px; opacity: .9; }
.course-thumb.is-ph .thumb-name { font-size: .82rem; font-weight: 600; color: color-mix(in srgb, var(--text) 78%, transparent); line-height: 1.3; }
.thumb-badge { position: absolute; top: 10px; left: 10px; background: rgba(8,13,26,.82); color: var(--gold); font-size: .68rem; padding: 3px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: .4px; backdrop-filter: blur(4px); border: 1px solid rgba(200,150,12,.4); z-index: 1; }
.course-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.course-body h4 { margin: 0; font-size: 1.04rem; line-height: 1.3; }
.course-cat { color: var(--blue); text-transform: uppercase; }
.course-card p { color: color-mix(in srgb, var(--text) 72%, transparent); font-size: .92rem; margin: 0; flex: 1; }
.course-meta { display: flex; gap: 16px; font-size: .85rem; color: color-mix(in srgb, var(--text) 80%, transparent); flex-wrap: wrap; }
.course-go { color: var(--gold); font-weight: 600; font-size: .9rem; }

/* ---------- why / offers / alumni ---------- */
.why-grid, .alumni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 20px; }
.why-card, .alumni-card, .offer-card { padding: 24px; border-radius: 14px; background: rgba(var(--overlay-rgb),.035); border: 1px solid rgba(var(--overlay-rgb),.08); }
.why-card h3 { color: var(--gold); }
.why-card p, .alumni-card p { font-size: .92rem; color: color-mix(in srgb, var(--text) 75%, transparent); margin: 0; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 20px; }
.offer-card { display: flex; gap: 16px; align-items: start; border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.offer-card img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }
.offer-until { color: var(--gold); }
.alumni-card img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; margin-bottom: 12px; border: 2px solid var(--gold); }
.alumni-role { color: var(--blue); }

/* ---------- events / news rows ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.row-card { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 12px; color: var(--text); border: 1px solid transparent; }
.row-card:hover { background: rgba(var(--overlay-rgb),.04); border-color: rgba(var(--overlay-rgb),.1); text-decoration: none; }
.row-card h3 { font-size: 1rem; margin: 0 0 2px; }
.row-card p { margin: 0; font-size: .85rem; color: color-mix(in srgb, var(--text) 65%, transparent); }
.row-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
.date-chip { flex: none; width: 58px; text-align: center; padding: 8px 4px; border-radius: 10px; background: color-mix(in srgb, var(--blue) 22%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent); }
.date-chip strong { display: block; font-size: 1.25rem; color: var(--text); }
.date-chip span { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--blue); }
.date-chip.dim { opacity: .55; }

/* ---------- events page ---------- */
.event-list { display: flex; flex-direction: column; gap: 18px; }
.event-card { display: flex; gap: 18px; padding: 20px; border-radius: 14px; background: rgba(var(--overlay-rgb),.035); border: 1px solid rgba(var(--overlay-rgb),.08); align-items: start; }
.event-img { width: 130px; height: 100px; object-fit: cover; border-radius: 10px; flex: none; }
.event-info { flex: 1; } .event-info p { margin: 4px 0; font-size: .92rem; }
.event-reg { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.event-reg input { flex: 1 1 140px; }

/* ---------- testimonials ---------- */
.testi-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 80vw); gap: 18px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
.testi-card { margin: 0; padding: 24px; border-radius: 14px; background: rgba(var(--overlay-rgb),.035); border: 1px solid rgba(var(--overlay-rgb),.08); scroll-snap-align: start; }
.stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 10px; }
.testi-card blockquote { margin: 0 0 14px; font-size: .95rem; color: color-mix(in srgb, var(--text) 85%, transparent); }
.testi-card figcaption { font-weight: 600; font-size: .9rem; }
.via { color: color-mix(in srgb, var(--text) 50%, transparent); }

/* ---------- clients marquee ---------- */
.clients { padding: 44px 0; border-block: 1px solid rgba(var(--overlay-rgb),.06); }
.client-marquee { overflow: hidden; margin-top: 22px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.client-track { display: flex; gap: 56px; align-items: center; width: max-content; animation: marquee 30s linear infinite; }
.client-track img { height: 40px; width: auto; opacity: .7; filter: grayscale(1) brightness(1.6); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- gallery ---------- */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; }
.gal-grid img { width: 100%; height: 170px; object-fit: cover; border-radius: 12px; cursor: zoom-in; transition: transform .18s; }
.gal-grid img:hover { transform: scale(1.03); }
.gal-vid { aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; grid-column: span 2; }
.gal-vid iframe, .gal-vid video { width: 100%; height: 100%; border: 0; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 4vh 4vw; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.lightbox button { position: absolute; top: 18px; right: 22px; font-size: 2rem; background: none; border: 0; color: #fff; cursor: pointer; }

/* ---------- branches ---------- */
.branch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 20px; }
.branch-card { padding: 22px; border-radius: 14px; background: rgba(var(--overlay-rgb),.035); border: 1px solid rgba(var(--overlay-rgb),.08); }
.branch-card h3 { color: var(--gold); }
.branch-tel { color: var(--blue); font-weight: 500; }
.branch-map { margin-top: 14px; border-radius: 10px; overflow: hidden; aspect-ratio: 16/10; }
.branch-map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- course detail ---------- */
.course-head { background: radial-gradient(900px 320px at 15% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent); }
.course-fact-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.fact { padding: 12px 20px; border-radius: 12px; background: rgba(var(--overlay-rgb),.05); border: 1px solid rgba(var(--overlay-rgb),.1); }
.fact span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: color-mix(in srgb, var(--text) 55%, transparent); }
.fact strong { font-family: 'Space Grotesk'; color: var(--gold); }
.course-body { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: start; }
.course-hero-img { border-radius: 14px; margin-bottom: 24px; }
.course-desc h2 { margin-top: 36px; font-size: 1.4rem; }
.tt-table { border: 1px solid rgba(var(--overlay-rgb),.1); border-radius: 12px; overflow: hidden; font-size: .9rem; }
.tt-row { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr .8fr .9fr; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(var(--overlay-rgb),.07); }
.tt-row:first-child { border-top: 0; }
.tt-head { background: rgba(var(--overlay-rgb),.05); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.dl-list { display: flex; flex-direction: column; gap: 8px; }
.dl-item { padding: 12px 16px; border-radius: 10px; background: rgba(var(--overlay-rgb),.04); border: 1px solid rgba(var(--overlay-rgb),.1); color: var(--text); font-weight: 500; }
.dl-item:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }

/* ---------- forms ---------- */
input, select, textarea { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(var(--overlay-rgb),.15); background: rgba(var(--overlay-rgb),.05); color: var(--text); font: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
select option { background: var(--bg2); color: var(--text); }
.apply-card { position: sticky; top: 92px; padding: 26px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 70%, #15203A); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); box-shadow: 0 16px 50px rgba(0,0,0,.4); }
.apply-card h2 { font-size: 1.3rem; }
.apply-card p { font-size: .9rem; color: color-mix(in srgb, var(--text) 70%, transparent); }
.apply-card label { display: block; font-size: .82rem; font-weight: 600; margin: 14px 0 0; }
.apply-card label input, .apply-card label select, .apply-card label textarea { margin-top: 6px; font-weight: 400; }
.apply-card .btn { margin-top: 20px; }
.form-note { font-size: .85rem; min-height: 1.2em; margin: 10px 0 0; }
.form-note.ok { color: #34D399; } .form-note.err { color: #F87171; }

/* ---------- footer ---------- */
.site-footer { margin-top: 40px; border-top: 1px solid rgba(var(--overlay-rgb),.08); background: color-mix(in srgb, var(--bg) 82%, #060A12); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 36px; padding: 56px 20px 36px; }
.footer-grid a { display: block; color: color-mix(in srgb, var(--text) 70%, transparent); padding: 4px 0; font-size: .92rem; }
.footer-grid a:hover { color: var(--gold); text-decoration: none; }
.footer-tag { font-size: .9rem; color: color-mix(in srgb, var(--text) 65%, transparent); }
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(var(--overlay-rgb),.15); font-weight: 700; }
.footer-social a:hover { border-color: var(--gold); color: var(--gold); }
.footer-branch { font-size: .88rem; color: color-mix(in srgb, var(--text) 70%, transparent); }
.footer-base { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 20px; border-top: 1px solid rgba(var(--overlay-rgb),.07); font-size: .85rem; color: color-mix(in srgb, var(--text) 55%, transparent); }
.news-form { display: flex; gap: 8px; }
.news-form input { width: 260px; }
.news-form button { padding: 10px 18px; border-radius: 10px; border: 0; cursor: pointer; font-weight: 600; background: linear-gradient(135deg, var(--gold), #B8932C); color: var(--on-gold); }

/* ---------- floating widgets ---------- */
.back-top { position: fixed; left: 22px; bottom: 82px; z-index: 60; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(var(--overlay-rgb),.2); background: color-mix(in srgb, var(--bg) 80%, #1A2333); color: var(--text); font-size: 1.1rem; cursor: pointer; }
/* Accessibility button — glassy transparent so the font-resize is easy to spot */
.a11y-btn { position: fixed; left: 22px; bottom: 22px; z-index: 60; height: 48px; padding: 0 16px 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 26px; border: 1px solid rgba(var(--overlay-rgb),.28); background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 1.15rem; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.28); }
.a11y-btn::after { content: "Aa"; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .02em; opacity: .95; }
.a11y-btn:hover { border-color: var(--gold); }
.a11y-panel { position: fixed; left: 22px; bottom: 80px; z-index: 61; width: 270px; padding: 18px; border-radius: 14px; background: color-mix(in srgb, var(--bg2) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(var(--overlay-rgb),.16); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.a11y-panel h5 { margin: 0 0 12px; font-family: 'Space Grotesk'; color: var(--gold); }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; font-size: .88rem; }
.a11y-seg { display: flex; border: 1px solid rgba(var(--overlay-rgb),.18); border-radius: 9px; overflow: hidden; }
.a11y-seg button { border: 0; background: none; color: var(--text); padding: 6px 10px; cursor: pointer; }
.a11y-seg button:nth-child(1){font-size:.7rem}.a11y-seg button:nth-child(2){font-size:.85rem}
.a11y-seg button:nth-child(3){font-size:1rem}.a11y-seg button:nth-child(4){font-size:1.2rem}
.a11y-seg button.on { background: var(--gold); color: var(--on-gold); }
.a11y-panel select { font-size: .85rem; padding: 7px 10px; width: 150px; }

/* Voice + Chat live together on the right, clearly separated */
.aria-btn { position: fixed; right: 22px; bottom: 92px; z-index: 65; width: 54px; height: 54px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--blue) 60%, transparent); background: color-mix(in srgb, var(--blue) 30%, var(--bg)); font-size: 1.3rem; cursor: pointer; box-shadow: 0 6px 22px color-mix(in srgb, var(--blue) 35%, transparent); }
.aria-panel { position: fixed; right: 22px; bottom: 156px; z-index: 71; width: min(330px, calc(100vw - 44px)); border-radius: 16px; background: var(--bg2); border: 1px solid rgba(var(--overlay-rgb),.12); box-shadow: 0 18px 50px rgba(0,0,0,.5); overflow: hidden; }
.aria-head { display: flex; align-items: center; gap: 6px; padding: 14px 16px; border-bottom: 1px solid rgba(var(--overlay-rgb),.08); }
.aria-head strong { color: var(--blue); } .aria-head span { font-size: .8rem; color: color-mix(in srgb, var(--text) 55%, transparent); flex: 1; }
.aria-head button, .chat-head button { background: none; border: 0; color: var(--text); font-size: 1.3rem; cursor: pointer; }
.aria-log { padding: 14px 16px; max-height: 220px; overflow-y: auto; font-size: .88rem; display: flex; flex-direction: column; gap: 8px; }
.aria-log .you { color: var(--gold); } .aria-log .aria { color: var(--text); }
.aria-mic { width: calc(100% - 32px); margin: 0 16px 16px; padding: 12px; border-radius: 12px; border: 0; cursor: pointer; font-weight: 600; background: color-mix(in srgb, var(--blue) 80%, #000); color: #fff; }
.aria-mic.listening { background: #DC2626; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(220,38,38,.15); } }

.chat-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 70; display: flex; flex-direction: column; align-items: end; gap: 10px; }
.chat-fab { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.5rem; background: linear-gradient(135deg, var(--gold), #B8932C); color: var(--on-gold); box-shadow: 0 6px 26px color-mix(in srgb, var(--gold) 45%, transparent); }
.chat-channels { display: flex; flex-direction: column; gap: 8px; }
.chan { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 12px; border: 1px solid rgba(var(--overlay-rgb),.14); background: var(--bg2); color: var(--text); font-weight: 600; font-size: .9rem; cursor: pointer; }
.chan:hover { text-decoration: none; border-color: var(--gold); }
.chan span { width: 22px; text-align: center; }

.chan-wa span { color: #25D366; } .chan-fb span { color: #0084FF; } .chan-ig span { color: #E1306C; } .chan-web span { color: var(--gold); }

.chat-box { position: fixed; right: 22px; bottom: 88px; z-index: 75; width: min(370px, calc(100vw - 24px)); height: min(540px, calc(100vh - 100px)); border-radius: 18px; background: var(--bg2); border: 1px solid rgba(var(--overlay-rgb),.12); box-shadow: 0 22px 60px rgba(0,0,0,.55); display: flex; flex-direction: column; overflow: hidden; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 25%, var(--bg)), color-mix(in srgb, var(--blue) 25%, var(--bg))); }
.chat-status { display: block; font-size: .75rem; color: #34D399; }
.chat-consent { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.chat-consent p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text); }
.chat-consent a { color: var(--gold); }
.chat-consent button { align-self: flex-start; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.msg.visitor { align-self: end; background: color-mix(in srgb, var(--blue) 70%, #000); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot, .msg.staff { align-self: start; background: rgba(var(--overlay-rgb),.07); border-bottom-left-radius: 4px; }
.msg.staff::before { content: attr(data-agent); display: block; font-size: .7rem; color: var(--gold); margin-bottom: 2px; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(var(--overlay-rgb),.08); }
.chat-form button { width: 44px; border-radius: 10px; border: 0; cursor: pointer; background: var(--gold); color: var(--on-gold); font-size: 1rem; }

/* ---------- filters / chips ---------- */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chip { padding: 8px 18px; border-radius: 100px; border: 1px solid rgba(var(--overlay-rgb),.18); background: none; color: var(--text); font-size: .88rem; cursor: pointer; }
.chip:hover { border-color: var(--gold); text-decoration: none; }
.chip.on { background: var(--gold); color: var(--on-gold); border-color: var(--gold); font-weight: 600; }

/* ---------- posts / articles ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 22px; }
.post-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 14px; background: rgba(var(--overlay-rgb),.035); border: 1px solid rgba(var(--overlay-rgb),.08); color: var(--text); }
.post-card:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); text-decoration: none; }
.post-card img { height: 160px; object-fit: cover; border-radius: 10px; margin: -6px -6px 4px; }
.post-date { color: var(--blue); }
.post-card p { margin: 0; font-size: .9rem; color: color-mix(in srgb, var(--text) 70%, transparent); }
.article-wrap { max-width: 760px; }
.article-img { border-radius: 14px; margin-bottom: 28px; }
.article-body { font-size: 1.04rem; margin-bottom: 32px; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .two-col, .course-body { grid-template-columns: 1fr; }
  .apply-card { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Mobile hamburger nav rules live in the @media(max-width:860px) block
     below (single source of truth) — this used to also be set here at a
     different breakpoint (960px) than the burger's own show/hide rule
     (861px), which meant between 861-960px wide the burger was hidden
     AND the nav was hidden, with no way to open it. Below 860px both
     blocks agree; above 861px the normal horizontal nav shows instead. */
  .drop-panel { position: static; display: block; box-shadow: none; border: 0; background: none; padding-left: 16px; }
  .tt-row { grid-template-columns: 1fr 1fr; }
  .tt-head { display: none; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .news-form input { width: 100%; }
  .footer-base { flex-direction: column; align-items: stretch; }
  .event-card { flex-wrap: wrap; }
  .hero-inner { padding: 64px 20px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .client-track { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ============ v1.15.0 — Hero carousel, reviews, lazy-loaded media ============ */
.hero-carousel{position:absolute;inset:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.hero-slide.on{opacity:1}
.hero-dots{position:absolute;left:0;right:0;bottom:18px;display:flex;gap:14px;justify-content:center;z-index:5}
/* Visible dot stays 9px, but padding + background-clip:content-box gives a
   real ~29px touch target — the old 9px-with-no-padding button was far too
   small to tap reliably on a phone. */
.hero-dot{width:9px;height:9px;padding:10px;background-clip:content-box;border-radius:50%;border:0;background-color:rgba(var(--overlay-rgb),.4);cursor:pointer;transition:background-color .2s,transform .2s}
.hero-dot.on{background-color:var(--gold);transform:scale(1.3)}
.hero-dot:hover{background-color:rgba(var(--overlay-rgb),.7)}

/* Reviews — Google / Facebook badges */
.testi-card{background:rgba(var(--overlay-rgb),.04);border:1px solid rgba(var(--overlay-rgb),.08);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;min-width:280px;max-width:340px;flex:0 0 auto}
.testi-head{display:flex;align-items:center;gap:12px}
.testi-photo{width:46px;height:46px;border-radius:50%;object-fit:cover;background:rgba(212,175,55,.15)}
.testi-photo-init{display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:700;font-size:1.05rem;border:1px solid rgba(212,175,55,.4)}
.testi-name{font-weight:600;font-size:.95rem}
.stars{color:var(--gold);font-size:.95rem;letter-spacing:1px}
.stars-dim{color:rgba(var(--overlay-rgb),.18)}
.testi-card blockquote{margin:0;font-size:.92rem;line-height:1.55;color:var(--text);opacity:.9}
.testi-card figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.78rem;margin-top:auto}
.via-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:color-mix(in srgb, var(--c) 15%, transparent);color:var(--c);font-weight:600;font-size:.72rem;text-decoration:none;border:1px solid color-mix(in srgb, var(--c) 30%, transparent)}
.via-badge:hover{background:color-mix(in srgb, var(--c) 25%, transparent)}
.testi-track{display:flex;gap:14px;overflow-x:auto;padding:4px 4px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.testi-track .testi-card{scroll-snap-align:start}
.testi-card.has-video{max-width:320px}
.testi-video{position:relative;width:100%;aspect-ratio:9/16;max-height:400px;border-radius:10px;overflow:hidden;background:#000}
.testi-video iframe,.testi-video video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.testi-track::-webkit-scrollbar{height:6px}
.testi-track::-webkit-scrollbar-thumb{background:rgba(212,175,55,.4);border-radius:3px}

/* Mobile polish */
@media(max-width:640px){
  .testi-card{min-width:78vw;max-width:78vw}
  .hero-inner h1{font-size:1.7rem}
  .hero-sub{font-size:.95rem}
}

/* ============ v1.16.0 — Mobile-first polish (Phase F) ============ */

/* iOS-friendly tap targets and smooth scrolling */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}
a,button{min-height:32px}
input,select,textarea,button{font-size:16px} /* prevents iOS zoom on focus */
img,video{max-width:100%;height:auto;display:block} /* never overflow */

/* Header / nav — mobile hamburger and stacked layout */
@media(max-width:860px){
  .site-header .header-inner{flex-wrap:wrap;gap:10px}
  .main-nav{order:3;width:100%;display:none;flex-direction:column;gap:0;background:rgba(0,0,0,.25);border-radius:10px;padding:8px 0;margin-top:8px}
  .main-nav.open{display:flex}
  .main-nav a{padding:11px 14px;border-radius:8px;width:100%;display:block;color:var(--text)}
  .main-nav a:hover{background:rgba(var(--overlay-rgb),.05)}
  .main-nav .nav-drop{width:100%}
  .main-nav .drop-panel{position:static;display:none;background:rgba(0,0,0,.15);box-shadow:none;padding:4px 0 4px 14px;border-radius:0}
  .main-nav .nav-drop.open .drop-panel{display:block}
  .burger{display:inline-flex !important}
}
@media(min-width:861px){ .burger{display:none !important} }

/* Hero on mobile */
@media(max-width:640px){
  .hero{min-height:78vh;padding:0 16px}
  .hero-inner h1{font-size:1.7rem;line-height:1.2}
  .hero-sub{font-size:.95rem}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta .btn{width:100%;text-align:center}
  .terminal{display:none}
}

/* Stats grid */
@media(max-width:720px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat strong{font-size:1.5rem}
}
@media(max-width:380px){ .stats-grid{grid-template-columns:1fr} }

/* Courses page card sizing */
@media(max-width:640px){
  .course-grid{grid-template-columns:1fr;gap:12px}
  .course-card{padding:14px}
  .course-card h4{font-size:1rem}
  .domain-title{font-size:1.2rem}
  .filter-row{gap:6px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .filter-row .chip{flex:0 0 auto;white-space:nowrap}
}

/* Course detail page */
@media(max-width:760px){
  .course-detail-grid{grid-template-columns:1fr;gap:16px}
  .course-side{order:-1}
  .course-side .fact{font-size:.9rem}
}

/* Forms (contact, apply, etc.) */
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr !important}
  input,select,textarea{width:100%;box-sizing:border-box}
}

/* Footer */
@media(max-width:640px){
  .site-footer .wrap{grid-template-columns:1fr;gap:18px}
  .foot-col h4{font-size:.95rem}
}

/* Sections vertical spacing on small screens */
@media(max-width:640px){
  .section{padding:30px 0}
  .section .wrap{padding:0 16px}
  .page-head{padding:24px 0 12px}
}

/* Reveal-on-scroll: ensure mobile users see content even without IntersectionObserver */
.reveal{opacity:1 !important;transform:none !important}

/* Skip animations for users who prefer no motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* Print-friendly */
@media print{
  .site-header,.site-footer,.hero-dots,#themeFab,#themePanel{display:none !important}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
}

/* ============================================================
   v1.19.0 — Design system refresh (matches uploaded mockups)
   Inter body · Rajdhani display · Orbitron utility
   Deep navy + signature blue · warm orange · brass gold
   ============================================================ */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-feature-settings: 'cv11','ss01','ss03'; }
h1, h2, h3, h4 { font-family: 'Rajdhani', system-ui, sans-serif; letter-spacing: -0.02em; }
.mono, code, kbd { font-family: 'Orbitron', 'JetBrains Mono', monospace; letter-spacing: 0.04em; }

/* Card surfaces with the new layered depth */
.card, .panel, .testi-card, .stat, .course-card, .gal-item, .gal-vid {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.course-card:hover, .testi-card:hover, .stat:hover {
  border-color: rgba(232,93,4,.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,102,204,.18);
}

/* Refined buttons */
.btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 22px;
  border-radius: 10px;
  transition: all .2s ease;
}
.btn-gold { background: linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%); color: #fff; border: none; box-shadow: 0 4px 14px rgba(232,93,4,.25); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,93,4,.35); }
.btn-line { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-line:hover { border-color: var(--accent); color: var(--accent); }

/* Header — subtle blue tint with backdrop blur */
.site-header { background: rgba(10,14,26,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }

/* Footer */
.site-footer { background: var(--bg2); border-top: 1px solid var(--border); }

/* Tags / chips with the new colours */
.tag, .chip { font-weight: 500; }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip-count { background: rgba(232,93,4,.18); color: var(--accent); }

/* Hero eyebrow and gold accent text */
.eyebrow { color: var(--accent); letter-spacing: 0.18em; font-weight: 600; }
.via-badge.via-google { --c: var(--blue); }
.via-badge.via-facebook { --c: #1877F2; }

/* Stat numbers with monospace */
.stat strong { font-family: 'Orbitron', sans-serif; color: var(--gold); }

/* Course detail page side facts */
.course-side .fact span { color: var(--text2); }
.course-side .fact strong { color: var(--gold); }

/* Section headings */
.sec-head h2 { color: var(--text); }
.sec-head .eyebrow { color: var(--accent); }

/* Domain titles on the courses page */
.domain-title { border-bottom-color: var(--accent); color: var(--text); }
.subject-title { color: var(--gold); }

/* Scroll progress */
.scroll-progress span { background: linear-gradient(90deg, var(--accent), var(--gold), var(--blue)); }

/* Forms */
input, select, textarea {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(232,93,4,.15) !important;
  outline: none !important;
}

/* Sidebar (LMS, partner portal etc) */
#lms-sidebar, .sidebar {
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
}
.nav-item.active, .lms-tab.active { border-left: 3px solid var(--accent); background: rgba(232,93,4,.08); color: var(--accent); }

/* ============================================================
   v1.19.0 — Premium polish layer (from winsys-1 mockup design)
   Applies Rajdhani to display headings + tightens cards & CTAs.
   ============================================================ */
:root{
  --shadow-lg: 0 24px 80px rgba(0,0,0,.45);
  --shadow-md: 0 12px 32px rgba(0,0,0,.32);
  --shadow-sm: 0 4px 12px rgba(0,0,0,.22);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --glass: rgba(13,21,37,.7);
}

/* ============================================================
   Light mode — toggled via the header sun/moon button, saved in
   localStorage as 'winsys_mode'. Everything else on the site is
   already driven by these same CSS variables, so overriding them
   here re-themes the whole public site safely. Brand colours
   (gold/blue/accent) stay the same in both modes.
   ============================================================ */
:root[data-theme="light"]{
  --bg: #f4f6fb; --bg2: #ffffff; --bg3: #eef1f6;
  --text: #1b2333; --text2: #5b6478; --muted: #5b6478;
  --border: rgba(0,102,204,.16); --line: rgba(0,102,204,.16);
  --overlay-rgb: 15,23,42;
  --glass: rgba(255,255,255,.75);
  --shadow-lg: 0 24px 60px rgba(15,23,42,.12);
  --shadow-md: 0 12px 28px rgba(15,23,42,.10);
  --shadow-sm: 0 4px 12px rgba(15,23,42,.08);
  --on-bg: #0B1220;
}

h1, h2, h3, .hero-inner h1, .domain-title, .sec-head h2 {
  font-family: 'Rajdhani', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); }

.eyebrow {
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold); font-size: 0.8rem; margin-bottom: 8px;
}

/* Polished buttons with subtle gradient + inner highlight */
.btn {
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-weight: 600; letter-spacing: 0.4px;
  border-radius: var(--radius-sm);
  padding: 11px 22px; font-size: 0.95rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold), #a07800);
  color: #0B1220; border: 0;
  box-shadow: 0 6px 22px rgba(200,150,12,.32);
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(200,150,12,.45); }
.btn-line {
  background: transparent; color: var(--gold);
  border: 1.5px solid var(--gold);
}
.btn-line:hover { background: rgba(200,150,12,.1); }

/* Cards & panels: deeper shadow, sharper border */
.card, .stat, .course-card, .testi-card, .panel, .psec, .pstat {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.course-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(200,150,12,.35); }
.course-cat { color: var(--blue); background: rgba(0,102,204,.12); border-color: rgba(0,102,204,.3); }

/* Header — frosted glass effect like the mockups */
.site-header {
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .logo-text, .brand-text { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.5px; }

/* Subject chips: gold ring on hover */
.chip {
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  letter-spacing: 0.3px;
  transition: border-color .15s ease, background .15s ease;
}
.chip:hover { border-color: rgba(200,150,12,.5); }
.chip.on { background: rgba(200,150,12,.18); color: var(--gold); border-color: var(--gold); }

/* Section spacing rhythm — slightly tighter */
.section { padding: 64px 0; }
@media (max-width: 720px) { .section { padding: 40px 0; } }

/* Hero subtle vignette + crisper headline */
.hero { box-shadow: inset 0 -120px 200px -100px rgba(0,0,0,.7); }
.hero-inner h1 { text-shadow: 0 4px 24px rgba(0,0,0,.6); }

/* Testimonial card: more refined */
.testi-card { border-radius: var(--radius-md); }

/* Tables (admin-style on public, e.g. comparison tables) */
.tbl th { font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: 0.6px; }

/* ===== Career Pathway Builder (Pillar 19) ===== */
.pathway-block{margin-top:30px;padding:26px;background:linear-gradient(135deg,rgba(0,102,204,.08),rgba(200,150,12,.06));border:1px solid rgba(var(--overlay-rgb),.1);border-radius:18px}
.pathway-block h2{margin:0 0 4px}
.pathway-sub{color:var(--muted,#9fb0c4);font-size:.95rem;margin:0 0 20px}
.pathway-ladder{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 auto;max-width:440px}
.pw-step{display:flex;align-items:center;gap:14px;width:100%;background:rgba(var(--overlay-rgb),.04);border:1px solid rgba(var(--overlay-rgb),.12);border-radius:12px;padding:13px 18px}
.pw-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--gold,#C8960C);color:#0B1A33;font-weight:800;display:grid;place-items:center;font-size:.95rem}
.pw-label{font-weight:600;font-size:.98rem}
.pw-arrow{color:var(--gold,#C8960C);font-size:1.2rem;font-weight:700;line-height:1}
.pathway-jobs-h{margin:24px 0 12px;font-size:1.1rem}
.pathway-jobs{display:flex;flex-wrap:wrap;gap:9px}
.pw-job{background:rgba(200,150,12,.14);border:1px solid rgba(200,150,12,.35);color:var(--gold,#e8c266);padding:7px 14px;border-radius:99px;font-size:.86rem;font-weight:600}
.pathway-countries{margin-top:18px;font-size:.92rem;color:var(--muted,#9fb0c4)}
.pathway-note{margin-top:10px;font-size:.9rem;color:var(--muted,#9fb0c4);font-style:italic}

/* ===== Language switcher (i18n) — dropdown ===== */
.lang-switch{display:inline-flex;align-items:center;background:rgba(var(--overlay-rgb),.06);border:1px solid rgba(var(--overlay-rgb),.12);border-radius:99px;padding:0;margin-right:6px}
.lang-select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--text);font:inherit;font-size:.78rem;font-weight:600;padding:6px 26px 6px 12px;border-radius:99px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%239fb0c4'/></svg>");background-repeat:no-repeat;background-position:right 10px center}
.lang-select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang-select option{background:var(--bg2);color:var(--text)}
@media(max-width:900px){.lang-switch{margin:0}}

/* ===== Dark / light mode toggle ===== */
.mode-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--overlay-rgb),.14);background:transparent;color:var(--text);font-size:15px;cursor:pointer;margin-right:8px;transition:.15s;line-height:1}
.mode-toggle:hover{background:rgba(var(--overlay-rgb),.08)}
.mode-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ============================================================
   RTL (Arabic) support — applies when <html dir="rtl">
   ============================================================ */
[dir="rtl"]{text-align:right}
[dir="rtl"] body{direction:rtl}
[dir="rtl"] .nav-links,[dir="rtl"] .top-nav,[dir="rtl"] .footer-cols,[dir="rtl"] .hero-cta,
[dir="rtl"] .btn-row,[dir="rtl"] .course-meta,[dir="rtl"] .lang-switch{flex-direction:row-reverse}
[dir="rtl"] .section,[dir="rtl"] .wrap,[dir="rtl"] .card{text-align:right}
[dir="rtl"] ul,[dir="rtl"] ol{padding-right:1.4em;padding-left:0}
[dir="rtl"] .btn .arrow,[dir="rtl"] .chev{transform:scaleX(-1)}
[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select{text-align:right;direction:rtl}
[dir="rtl"] .form-row label{text-align:right}
/* Arabic web font for better rendering */
[dir="rtl"] body,[lang="ar"] body{font-family:'Segoe UI','Tahoma','Arial',sans-serif}

/* Footer policy links */
.footer-policies{display:flex;flex-wrap:wrap;gap:6px 18px;padding:16px 0 4px;border-top:1px solid rgba(var(--overlay-rgb),.08);margin-top:8px}
.footer-policies a{font-size:12.5px;color:rgba(var(--overlay-rgb),.6);text-decoration:none}
.footer-policies a:hover{color:var(--gold)}
@media (max-width:640px){ .footer-policies{gap:6px 12px} .footer-policies a{font-size:12px} }

/* Enquiry consent checkbox */
.consent-check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--muted,#64748b);cursor:pointer;margin:4px 0 2px}
.consent-check input{margin-top:2px;flex:none}
.consent-check a{color:var(--gold);text-decoration:underline}

/* ===== Redesigned grouped navigation (mega-menu) ===== */
.main-nav > a, .nav-drop > a { white-space: nowrap; }
.nav-drop > a.has-sub::after { content: "▾"; font-size: .7em; margin-left: 5px; opacity: .7; }
/* Two-column mega panel for Courses */
.drop-mega { display: none; grid-template-columns: 1fr 1fr; gap: 6px 18px; min-width: 520px; }
.nav-drop:hover .drop-mega, .nav-drop:focus-within .drop-mega { display: grid; }
.mega-col { display: flex; flex-direction: column; }
.mega-head { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); font-weight: 700; padding: 8px 12px 4px; }
.mega-tools { border-left: 1px solid rgba(var(--overlay-rgb),.08); }

/* Mobile: grouped nav becomes clean accordion-style sections */
@media (max-width: 900px) {
  .main-nav { gap: 2px; max-height: calc(100vh - 68px); overflow-y: auto; }
  .nav-drop { position: static; }
  .drop-panel, .drop-mega { position: static; display: none; grid-template-columns: 1fr;
    min-width: 0; box-shadow: none; border: 0; border-left: 2px solid rgba(200,150,12,.3);
    border-radius: 0; margin: 2px 0 8px 12px; padding: 2px 0; background: transparent; }
  .nav-drop.open > .drop-panel, .nav-drop.open > .drop-mega { display: block; }
  .nav-drop:hover .drop-panel, .nav-drop:hover .drop-mega,
  .nav-drop:focus-within .drop-panel, .nav-drop:focus-within .drop-mega { display: none; }
  .nav-drop.open:hover > .drop-panel, .nav-drop.open:hover > .drop-mega { display: block; }
  .nav-drop > a.has-sub { font-weight: 700; }
  .nav-drop > a.has-sub::after { content: "▾"; display: inline; float: right; opacity: .6; }
  .nav-drop.open > a.has-sub::after { content: "▴"; }
  .mega-tools { border-left: 2px solid rgba(200,150,12,.3); }
  .mega-head { padding-top: 6px; }
}

/* Mobile: keep floating widgets compact and non-overlapping.
   Each also needs to clear the sticky Apply bar (--mob-bar-h,
   defined further down alongside that bar) — same fix as the
   561-720px tier, just added to these tighter positions instead. */
@media (max-width: 560px) {
  .a11y-btn { bottom: calc(18px + var(--mob-bar-h)); left: 14px; height: 44px; padding: 0 13px 0 11px; }
  .back-top { left: 14px; bottom: calc(72px + var(--mob-bar-h)); width: 40px; height: 40px; }
  .aria-btn { right: 16px; bottom: calc(84px + var(--mob-bar-h)); width: 48px; height: 48px; }
  .chat-launcher { right: 16px; bottom: calc(16px + var(--mob-bar-h)); }
  .chat-fab { width: 52px; height: 52px; }
  .chat-box { right: 12px; left: 12px; bottom: calc(80px + var(--mob-bar-h)); width: auto; }
  .a11y-panel { left: 14px; bottom: calc(70px + var(--mob-bar-h)); width: calc(100vw - 28px); max-width: 300px; }
}

/* Mega-menu category links (taxonomy-driven) */
.mega-cat { font-weight: 600; }
.mega-sub { padding-left: 22px !important; font-size: .82rem; opacity: .82; }
.mega-sub::before { content: "└ "; opacity: .5; }

/* Certificate verification QR */
.vc-qr{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(0,0,0,.08)}
.vc-qr img{border:1px solid rgba(0,0,0,.08);border-radius:8px;background:#fff;padding:4px}
.vc-qr span{font-size:11.5px;color:var(--muted,#64748b)}

/* ============================================================
   Mobile safety pass (v1.122) — defensive global rules
   ============================================================ */
/* Long unbreakable strings (URLs, emails) never force horizontal scroll */
body { overflow-wrap: break-word; }
.verify-table td, .card td { overflow-wrap: anywhere; }

/* No single oversized element (a stray wide row, an admin-entered long
   string, an image) can ever push the whole page sideways — components
   that scroll on purpose (tables, .testi-track, .filter-row) set their
   own overflow-x:auto and keep working; this only clamps the page itself. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Any bare table scrolls horizontally instead of breaking layout on small screens */
@media (max-width: 720px) {
  .cmp-table, .compare-table, .finder-compare { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { max-width: 100%; }
}

/* Course-finder comparison table: let it scroll on phones */
#finderResults table, .finder-results table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

/* Tighten hero + section padding on very small screens so nothing gets cut off */
@media (max-width: 480px) {
  .wrap, .container { padding-left: 16px; padding-right: 16px; }
  .page-head h1, .hero h1 { font-size: clamp(24px, 7vw, 34px); }
  .hero-sub, .lead { font-size: 14px; }
  .btn { padding: 10px 16px; }
  /* stacked button rows */
  .btn-row, .cta-row { flex-wrap: wrap; }
  /* Header gets crowded on the smallest phones (mode toggle + language +
     Student Portal button + burger, all next to the brand) — drop the
     portal button down to its icon only so everything fits on one line. */
  .header-actions { gap: 6px; }
  .portal-btn { padding: 9px 11px; }
  .portal-btn-txt { display: none; }
}

/* Modals never exceed the viewport on phones */
@media (max-width: 560px) {
  .modal-box { max-width: 94vw !important; max-height: 90vh; overflow-y: auto; }
}

/* Tap targets: minimum comfortable size for links/buttons in nav & footer */
@media (max-width: 720px) {
  .site-footer a { display: inline-block; padding: 4px 0; }
}

/* ============================================================
   Sticky Apply / Enquire CTA (v1.126)
   Desktop: vertical side-tab on the right edge.
   Mobile: fixed 3-button action bar at the bottom.
   ============================================================ */
.apply-tab{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:60; background:var(--gold,#C8960C); color:#0B1220;
  writing-mode:vertical-rl; text-orientation:mixed;
  padding:16px 9px; border-radius:10px 0 0 10px; font-weight:700;
  font-size:13px; letter-spacing:.04em; text-decoration:none;
  box-shadow:-4px 4px 18px rgba(0,0,0,.28); transition:padding .15s ease, background .15s ease;
}
.apply-tab:hover{ padding-right:14px; background:#e0aa1f; }
.apply-tab-txt{ display:block; }

/* mobile bottom action bar — hidden on desktop */
.apply-bar{ display:none; }
@media (max-width: 720px){
  .apply-tab{ display:none; }               /* hide side-tab on phones */
  .apply-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:rgba(11,26,51,.97); backdrop-filter:blur(6px);
    border-top:1px solid rgba(var(--overlay-rgb),.1); padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    gap:7px;
  }
  .apply-bar-btn{
    flex:1; text-align:center; text-decoration:none; font-weight:600; font-size:13px;
    padding:11px 6px; border-radius:10px; color:#E8EAF0;
    background:rgba(var(--overlay-rgb),.08); border:1px solid rgba(var(--overlay-rgb),.1);
  }
  .apply-bar-btn.primary{ background:var(--gold,#C8960C); color:#0B1220; border-color:var(--gold,#C8960C); }

  /* ----------------------------------------------------------
     Every other bottom-anchored floating widget (accessibility
     button, colour picker, voice assistant, chat launcher, back-
     to-top) must clear this bar on phones, or the bar sits on
     top of them. --mob-bar-h is the bar's own height (button row
     + padding + the iPhone home-indicator safe area); each widget
     keeps its normal spacing, just shifted up by that amount.
     Previously this only tried to lift `.chat-fab` (the icon
     *inside* the fixed launcher, not the fixed element itself —
     so it had no effect at all) and didn't cover the other four.
     Widgets that get their OWN tighter positions below 560px are
     lifted down there instead (same amount), so the two rules
     never fight over which one wins. ---------------------------------------------------------- */
  :root{ --mob-bar-h: calc(60px + env(safe-area-inset-bottom)); }
  #themeFab{ bottom: calc(22px + var(--mob-bar-h)) !important; }
  #themePanel{ bottom: calc(80px + var(--mob-bar-h)) !important; }
  .aria-panel{ bottom: calc(156px + var(--mob-bar-h)) !important; }

  .site-footer{ padding-bottom:70px; }
}

/* 561-720px: same lift, using each widget's normal (desktop) position —
   below 560px these are resized/repositioned, so they're lifted there instead. */
@media (max-width: 720px) and (min-width: 561px){
  .chat-launcher{ bottom: calc(22px + var(--mob-bar-h)) !important; }
  .chat-box{ bottom: calc(88px + var(--mob-bar-h)) !important; }
  .a11y-btn{ bottom: calc(22px + var(--mob-bar-h)) !important; }
  .a11y-panel{ bottom: calc(80px + var(--mob-bar-h)) !important; }
  .aria-btn{ bottom: calc(92px + var(--mob-bar-h)) !important; }
  .back-top{ bottom: calc(82px + var(--mob-bar-h)) !important; }
}

/* ============================================================
   Quick 2-field enquiry band (contact page top) (v1.126)
   ============================================================ */
.quick-enq-wrap{ padding:22px 0 4px; }
.quick-enq{
  background:linear-gradient(135deg, rgba(200,150,12,.10), rgba(0,102,204,.06));
  border:1px solid var(--line,#1e2c44); border-radius:16px; padding:20px 24px;
}
.quick-enq-txt h2{ margin:0 0 4px; font-size:1.2rem; }
.quick-enq-txt p{ margin:0 0 14px; color:var(--muted,#64748b); font-size:13.5px; }
.quick-enq-form{ display:flex; gap:10px; flex-wrap:wrap; }
.quick-enq-form input{
  flex:1; min-width:180px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line,#1e2c44); background:var(--bg,#0d1525); color:var(--text,#e8eaf0);
  font:inherit; font-size:14px;
}
.quick-enq-form .btn{ white-space:nowrap; }
.quick-enq-note{ margin:10px 0 0; font-size:13px; min-height:18px; }
.quick-enq-note.ok{ color:#10b981; } .quick-enq-note.err{ color:#f87171; }
@media (max-width:600px){
  .quick-enq-form input{ min-width:100%; }
  .quick-enq-form .btn{ width:100%; }
}

/* ============================================================
   Program-specific career outcomes (course page) (v1.127)
   ============================================================ */
.outcomes-block{
  background:linear-gradient(135deg, rgba(16,185,129,.08), rgba(200,150,12,.05));
  border:1px solid var(--line,#1e2c44); border-radius:16px; padding:20px 22px; margin:22px 0;
}
.outcomes-block h2{ margin:0 0 14px; font-size:1.25rem; }
.outcomes-grid{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.outcome-stat{
  flex:1; min-width:150px; background:var(--bg,#0d1525); border:1px solid var(--line,#1e2c44);
  border-radius:12px; padding:14px 16px; text-align:center;
}
.outcome-stat strong{ display:block; font-size:1.9rem; color:var(--gold,#C8960C); font-family:'Rajdhani',sans-serif; line-height:1; }
.outcome-stat span{ display:block; margin-top:6px; font-size:12px; color:var(--muted,#64748b); }
.outcome-lbl{ display:block; font-size:12px; color:var(--muted,#64748b); margin-bottom:7px; font-weight:600; }
.employer-chips{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:6px; }
.employer-chip{
  font-size:12.5px; padding:5px 12px; border-radius:99px;
  background:rgba(var(--overlay-rgb),.06); border:1px solid var(--line,#1e2c44); color:var(--text,#e8eaf0);
}
.outcome-quote{
  margin:14px 0 0; padding:12px 16px; border-left:3px solid var(--gold,#C8960C);
  background:rgba(var(--overlay-rgb),.03); border-radius:0 10px 10px 0;
}
.outcome-quote p{ margin:0 0 6px; font-style:italic; font-size:14px; }
.outcome-quote cite{ font-size:12.5px; color:var(--muted,#64748b); font-style:normal; }
@media (max-width:600px){ .outcome-stat{ min-width:100%; } }

/* ============================================================
   Student Ambassadors — "Ask a student" (course page) (v1.127)
   ============================================================ */
.amb-block{ background:rgba(var(--overlay-rgb),.02); border:1px solid var(--line,#1e2c44); border-radius:16px; padding:20px 22px; margin:22px 0; }
.amb-block h2{ margin:0 0 4px; font-size:1.25rem; }
.amb-sub{ margin:0 0 16px; color:var(--muted,#64748b); font-size:13.5px; }
.amb-people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.amb-card{ display:flex; gap:12px; background:var(--bg,#0d1525); border:1px solid var(--line,#1e2c44); border-radius:12px; padding:12px 14px; }
.amb-avatar{ flex:none; width:52px; height:52px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--gold,#C8960C),#8a6a08); display:flex; align-items:center; justify-content:center; }
.amb-avatar img{ width:100%; height:100%; object-fit:cover; }
.amb-avatar span{ font-size:22px; font-weight:700; color:#0B1220; font-family:'Rajdhani',sans-serif; }
.amb-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.amb-info strong{ font-size:14px; }
.amb-meta{ font-size:11.5px; color:var(--gold,#C8960C); }
.amb-blurb{ font-size:12px; color:var(--muted,#64748b); margin:2px 0 6px; }
.amb-ask-btn{ align-self:flex-start; }
.amb-modal{ position:fixed; inset:0; background:rgba(5,9,18,.8); display:flex; align-items:center; justify-content:center; z-index:130; padding:18px; }
.amb-modal[hidden]{ display:none; }
.amb-modal-box{ position:relative; background:var(--bg2,#0d1525); border:1px solid var(--line,#1e2c44); border-radius:16px; padding:24px; width:100%; max-width:420px; }
.amb-modal-box h3{ margin:0 0 4px; }
.amb-modal-sub{ margin:0 0 14px; font-size:12.5px; color:var(--muted,#64748b); }
.amb-modal-box label{ display:block; font-size:13px; margin-bottom:10px; }
.amb-modal-box input, .amb-modal-box textarea{ width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--line,#1e2c44); background:var(--bg,#0d1525); color:var(--text,#e8eaf0); font:inherit; margin-top:4px; }
.amb-close{ position:absolute; top:12px; right:14px; background:none; border:0; color:var(--muted,#64748b); font-size:26px; cursor:pointer; line-height:1; }
.amb-note{ margin:10px 0 0; font-size:13px; min-height:16px; }
.amb-note.ok{ color:#10b981; } .amb-note.err{ color:#f87171; }
@media (max-width:600px){ .amb-people{ grid-template-columns:1fr; } }

/* ============================================================
   Virtual Campus Tour (v1.128)
   ============================================================ */
.vt-switch{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.vt-chip{ text-decoration:none; font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:99px;
  background:var(--bg2,#0d1525); border:1px solid var(--line,#1e2c44); color:var(--text,#e8eaf0); }
.vt-chip.on{ background:var(--gold,#C8960C); color:#0B1220; border-color:var(--gold,#C8960C); }
.vt-title{ margin:0 0 4px; }
.vt-desc{ margin:0 0 16px; font-size:14px; }
.vt-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#05070d;
  border:1px solid var(--line,#1e2c44); border-radius:16px; overflow:hidden; }
.vt-frame iframe, .vt-frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vt-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.vt-photo{ margin:0; border:1px solid var(--line,#1e2c44); border-radius:12px; overflow:hidden; background:var(--bg2,#0d1525); }
.vt-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.vt-photo figcaption{ padding:9px 13px; font-size:12.5px; color:var(--muted,#64748b); }
.vt-cta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:22px;
  padding-top:18px; border-top:1px solid var(--line,#1e2c44); }
.vt-cta p{ margin:0; font-weight:600; }
.vt-empty{ text-align:center; padding:40px 20px; color:var(--muted,#64748b); }
.vt-empty a{ color:var(--gold,#C8960C); }
@media (max-width:600px){ .vt-gallery{ grid-template-columns:1fr; } }

/* ============================================================
   Application Status Tracker (v1.130)
   ============================================================ */
.trk-form{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.trk-form input{flex:1;min-width:220px;padding:12px 14px;border-radius:10px;border:1px solid var(--line,#1e2c44);background:var(--card,#0d1525);color:var(--text,#e8eaf0);font:inherit;font-size:14px}
.trk-msg{padding:14px 18px;border-radius:12px;font-size:13.5px;margin-bottom:16px}
.trk-msg.err{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.3);color:#fca5a5}
.trk-msg a{color:#fca5a5}
.trk-card{background:var(--card,#0d1525);border:1px solid var(--line,#1e2c44);border-radius:16px;padding:24px}
.trk-ref{font-size:12px;color:var(--muted,#64748b);margin-bottom:4px}
.trk-name{font-size:18px;font-weight:700;font-family:'Rajdhani',sans-serif}
.trk-course{font-weight:400;color:var(--gold,#C8960C)}
.trk-date{font-size:12px;color:var(--muted,#64748b);margin-bottom:20px}
.trk-steps{display:flex;align-items:center;margin-bottom:22px;overflow-x:auto}
.trk-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;min-width:80px}
.trk-dot{width:34px;height:34px;border-radius:50%;border:2px solid var(--line,#1e2c44);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--muted,#64748b);background:var(--bg,#090e1a)}
.trk-step.done .trk-dot{background:var(--gold,#C8960C);border-color:var(--gold,#C8960C);color:#0B1220}
.trk-step.active .trk-dot{border-color:var(--gold,#C8960C);color:var(--gold,#C8960C);box-shadow:0 0 0 4px rgba(200,150,12,.15)}
.trk-slbl{font-size:11px;color:var(--muted,#64748b);text-align:center;max-width:80px}
.trk-step.done .trk-slbl,.trk-step.active .trk-slbl{color:var(--text,#e8eaf0)}
.trk-line{flex:1;height:2px;background:var(--line,#1e2c44);min-width:20px}
.trk-line.done{background:var(--gold,#C8960C)}
.trk-status-box{display:flex;gap:14px;align-items:flex-start;background:rgba(200,150,12,.07);border:1px solid rgba(200,150,12,.2);border-radius:12px;padding:16px;margin-bottom:14px}
.trk-icon{font-size:26px;flex:none}
.trk-status-box strong{display:block;margin-bottom:4px}
.trk-status-box p{margin:0;font-size:13.5px;color:var(--muted,#64748b)}
.trk-updated{font-size:11.5px;color:var(--muted,#64748b);margin-bottom:10px}
.trk-help{font-size:13px;color:var(--muted,#64748b)}
.trk-help a{color:var(--gold,#C8960C)}

/* ============================================================
   International Students Page (v1.130)
   ============================================================ */
.intl-hero{background:linear-gradient(135deg,rgba(0,76,153,.15) 0%,rgba(11,26,51,0) 70%)}
.intl-hero-flags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.intl-flag-chip{text-decoration:none;font-size:13px;padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--text,#e8eaf0)}
.intl-flag-chip:hover{background:rgba(200,150,12,.15);border-color:var(--gold,#C8960C)}
.intl-why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:24px}
.intl-why-card{background:var(--card,#0d1525);border:1px solid var(--line,#1e2c44);border-radius:16px;padding:20px}
.iw-icon{font-size:28px;margin-bottom:10px}
.intl-why-card h3{margin:0 0 8px;font-size:15px}
.intl-why-card p{margin:0;font-size:13px;color:var(--muted,#64748b)}
.intl-market{background:var(--card,#0d1525);border:1px solid var(--line,#1e2c44);border-radius:18px;padding:24px;margin-bottom:16px;scroll-margin-top:80px}
.intl-market-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:12px}
.intl-flag{font-size:36px;flex:none}
.intl-market-head h3{margin:0 0 4px;font-size:1.15rem}
.intl-region{font-size:12px;color:var(--gold,#C8960C);font-weight:600}
.intl-body{font-size:14px;color:var(--muted,#64748b);margin:0 0 14px;line-height:1.6}
.intl-facts{margin:0 0 18px;padding-left:18px;display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
.intl-facts li{font-size:13px;color:var(--text,#e8eaf0)}
.intl-cta-section{background:linear-gradient(135deg,rgba(200,150,12,.06),rgba(0,76,153,.06))}
@media(max-width:600px){.intl-facts{grid-template-columns:1fr}.intl-why-grid{grid-template-columns:1fr}}

/* ============================================================
   v1.173.0 — cross-device polish (phones & tablets)
   ============================================================ */
html{ -webkit-text-size-adjust:100%; }
*{ -webkit-tap-highlight-color: transparent; }
@media (max-width: 760px){
  /* iOS zooms the page when a focused control is under 16px — prevent it */
  input, select, textarea{ font-size:16px !important; }
  /* comfortable touch targets (Apple/Google guideline ≈44px) */
  .btn, button, .pbtn{ min-height:44px; }
  .btn-sm{ min-height:38px; }
  /* wide tables scroll sideways instead of breaking the layout */
  .table-wrap, .panel{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.table{ min-width:560px; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}