/* =============================================================
   Galaxy Explorer Competition — Modern Space Theme (redesign)
   Design system: tokens, base, layout, components
   ============================================================= */

/* Visually hidden but available to screen readers (headings, labels). */
.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;
}

/* Skip-to-content link — off-screen until focused, then pinned top-left. */
.skip-link {
    position: fixed; top: 8px; left: 8px; z-index: 1000; transform: translateY(-160%);
    background: var(--grad-brand, #3f6fe6); color: #fff; padding: 10px 18px; border-radius: 10px;
    font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.4);
    transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* Scroll-to-top button (bottom-left, appears after scrolling down) */
.to-top { position: fixed; left: 24px; bottom: 24px; z-index: 150;
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    color: #fff; border: 1px solid rgba(170, 150, 255, .5);
    background: linear-gradient(140deg, #6c6af0 0%, #8a5cf0 100%);
    box-shadow: 0 12px 30px rgba(80, 50, 180, .55), 0 0 22px rgba(140, 110, 255, .4);
    opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .28s, transform .28s, visibility .28s, box-shadow .2s; }
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(80, 50, 180, .65), 0 0 34px rgba(140, 110, 255, .6); }
@media (max-width: 600px) { .to-top { left: 16px; bottom: 16px; width: 48px; height: 48px; } }

/* Floating WhatsApp button — bottom-right, opposite the scroll-to-top on the left */
.wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 150;
    width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; background: #25D366; box-shadow: 0 10px 28px rgba(37, 211, 102, .45);
    transition: transform .2s, box-shadow .2s; }
.wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 34px rgba(37, 211, 102, .6); }
.wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) { .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

/* ---------- Self-hosted Poppins (no external font dependency) ---------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/poppins/poppins-400.woff2') format('woff2'), url('/fonts/poppins/poppins-400-ext.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/fonts/poppins/poppins-500.woff2') format('woff2'), url('/fonts/poppins/poppins-500-ext.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('/fonts/poppins/poppins-600.woff2') format('woff2'), url('/fonts/poppins/poppins-600-ext.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/fonts/poppins/poppins-700.woff2') format('woff2'), url('/fonts/poppins/poppins-700-ext.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
    src: url('/fonts/poppins/poppins-800.woff2') format('woff2'), url('/fonts/poppins/poppins-800-ext.woff2') format('woff2'); }

:root {
    /* Deep-space background scale */
    --bg-950: #04050e;
    --bg-900: #070a1c;
    --bg-850: #0b0f28;
    --bg-800: #111634;
    --bg-700: #1a2150;
    --surface: rgba(255, 255, 255, .045);
    --surface-2: rgba(255, 255, 255, .07);
    --border: rgba(140, 165, 255, .16);
    --border-strong: rgba(140, 165, 255, .32);

    /* Brand + accents */
    --brand: #5b8cff;
    --brand-600: #3f6fe6;
    --brand-glow: rgba(91, 140, 255, .55);
    --violet: #9b6cff;
    --teal: #3fd6c0;
    --gold: #ffcf6a;
    --pink: #ff7db0;

    /* Text */
    --text: #eef1ff;
    --text-soft: #c3cbf0;
    --muted: #8f9bd0;

    /* Gradients */
    /* Deep enough that white text on it clears WCAG AA (was #6a9bff -> 2.7:1).
       Used by every button and numbered badge, so contrast here pays off site-wide. */
    --grad-brand: linear-gradient(135deg, #3f6fe6 0%, #7d4fd8 100%);
    --grad-gold: linear-gradient(135deg, #ffd679 0%, #ff9d5c 100%);
    --grad-text: linear-gradient(120deg, #bcd4ff 0%, #ffffff 40%, #d9c6ff 100%);

    /* Shape + depth */
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 28px;
    --r-pill: 999px;
    --shadow-sm: 0 6px 20px rgba(0, 0, 0, .35);
    --shadow-md: 0 18px 50px rgba(3, 6, 25, .55);
    --shadow-glow: 0 0 0 1px var(--border), 0 20px 60px rgba(50, 80, 220, .18);

    --container: 1180px;
    --nav-h: 76px;

    --font-display: 'Poppins', system-ui, sans-serif;
    --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
/* overflow-x: clip, not hidden — hidden turns html/body into a scroll container and
   breaks position:sticky on the header. clip stops sideways scroll without that. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
html, body { max-width: 100%; }
h1, h2, h3, h4 { overflow-wrap: anywhere; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg-950);
    line-height: 1.65;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
/* height:auto so width/height attributes (added for CLS) scale by aspect ratio
   instead of forcing the literal pixel height. Elements that need a fixed size
   set it explicitly (.brand img, etc.) and override this. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea, optgroup { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0 0 .4em; letter-spacing: .5px; }
p { margin: 0 0 1rem; color: var(--text-soft); }
::selection { background: rgba(120, 150, 255, .35); }

/* Three.js animated space canvas — fixed behind all content */
#space-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; width: 100%; height: 100%; overflow: hidden; }
#space-bg canvas { display: block; width: 100% !important; height: 100% !important; }

/* Space backdrop applied to <body> behind everything */
body::before {
    content: "";
    position: fixed; inset: 0; z-index: -3;
    background:
        radial-gradient(1200px 700px at 80% -10%, rgba(94, 60, 180, .35), transparent 60%),
        radial-gradient(1000px 600px at 0% 10%, rgba(28, 68, 190, .30), transparent 55%),
        radial-gradient(900px 900px at 50% 120%, rgba(30, 40, 120, .35), transparent 60%),
        linear-gradient(180deg, var(--bg-950), var(--bg-900) 40%, var(--bg-950));
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(32px, 5vw, 64px) 0; position: relative; }
.section--tight { padding: clamp(22px, 3.5vw, 40px) 0; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-weight: 600; font-size: .78rem;
    /* lighter than --brand: small uppercase text needs real contrast on the glass */
    letter-spacing: .18em; text-transform: uppercase; color: #a9c2ff;
    background: rgba(91, 140, 255, .1); border: 1px solid var(--border-strong);
    padding: 7px 15px; border-radius: var(--r-pill);
}
/* Inline flag artwork, for where an emoji flag would degrade to bare letters on
   Windows. Sized like an emoji; the parent's flex gap handles the spacing. */
.eyebrow .flag-my { flex: 0 0 auto; height: 1.15em; width: auto; display: block;
    border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
/* Inline SVG icons (<x-icon>) — inherit currentColor and scale with their text.
   In eyebrows they sit at ~1.25em and pick up the eyebrow's light-blue tone. */
.gx-ico { flex: 0 0 auto; display: inline-block; vertical-align: -0.18em; }
.eyebrow .gx-ico { width: 1.25em; height: 1.25em; opacity: .95; }
.section-title { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
/* balance multi-line headings so a lone last word never strands on its own line
   (e.g. "…(IRAO) 2022"). Ignored gracefully by browsers without text-wrap support. */
.section-title, .page-hero h1, .hero-title, .gx-glass.prose h2, .gx-glass.prose h3 { text-wrap: balance; }
.section-title .grad,
.grad-text {
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--text-soft); max-width: 640px; }
.center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 600; font-size: 1rem;
    padding: 14px 26px; border-radius: var(--r-pill); border: 0; cursor: pointer;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s;
    line-height: 1; white-space: nowrap;
}
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: 0 10px 30px var(--brand-glow); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px var(--brand-glow); filter: brightness(1.08); }
.btn-gold { background: var(--grad-gold); color: #3a2400; box-shadow: 0 10px 30px rgba(255, 170, 80, .45); }
.btn-gold:hover { transform: translateY(-3px); filter: brightness(1.06); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); backdrop-filter: blur(8px); }
.btn-ghost:hover { transform: translateY(-3px); background: var(--surface-2); border-color: var(--brand); }
.btn-sm { padding: 10px 18px; font-size: .9rem; }
/* Nav CTA — punchier register button (Kancil cue): uppercase, bold, arrow that
   nudges on hover. Keeps the brand gradient. */
.btn-cta { position: relative; z-index: 0; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; gap: 8px; }
/* soft breathing glow behind the button to draw the eye to the primary CTA */
.btn-cta::before {
    content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
    background: var(--grad-brand); filter: blur(13px); opacity: .5;
    animation: ctaGlow 2.4s ease-in-out infinite;
}
@keyframes ctaGlow {
    0%, 100% { opacity: .3; transform: scale(.97); }
    50%      { opacity: .65; transform: scale(1.05); }
}
.btn-cta .cta-arrow { transition: transform .2s; }
.btn-cta:hover .cta-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .btn-cta .cta-arrow { transition: none; }
    .btn-cta::before { animation: none; }
}

/* (Removed the old light ".panel" and ".card"/".card__icon" blocks — dead after the
   galaxy-glass redesign; nothing in any view used them. Along with .facts / .cta-band
   selectors below, verified 0 usages.) */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* grid/flex children must be allowed to shrink below content width (prevents overflow) */
.grid > *, .hero-copy, .hero-visual, .split > *, .contact-grid > *, .footer-grid > * { min-width: 0; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100; height: var(--nav-h);
    display: flex; align-items: center;
    background: rgba(7, 10, 28, .55);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--border);
    transition: background .3s, box-shadow .3s;
}
/* thin gradient accent line along the very top edge (Kancil cue) */
.site-header::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-brand); z-index: 1;
}
.site-header.scrolled { background: rgba(6, 8, 22, .9); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; }
.brand img { width: 46px; height: 46px; filter: drop-shadow(0 4px 12px rgba(90,120,255,.4)); }
.brand img { flex-shrink: 0; }
/* Two-line brand lockup (legacy ".brand span" sizing removed — it out-specified
   these and forced COMPETITION back to the title size, which stacked the two lines
   tight enough to look overlapped). */
.brand-name { display: flex; flex-direction: column; gap: 2px; line-height: 1.12; }
.brand-title { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.brand-sub { font-size: .56rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-soft); }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links a {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 15px; border-radius: var(--r-pill);
    font-weight: 500; font-size: .95rem; color: var(--text-soft); transition: color .2s, background .2s;
}
.nav-links a { position: relative; }
.nav-links a:hover { color: #fff; background: var(--surface-2); }
/* active page: teal text + a teal underline bar (Kancil-style indicator), no pill.
   ::before because dropdown items already use ::after for the caret. */
.nav-links a.active { color: var(--teal); background: transparent; }
.nav-links a.active::before {
    content: ""; position: absolute; left: 15px; right: 15px; bottom: 3px; height: 2.5px;
    border-radius: 2px; background: var(--teal); box-shadow: 0 0 10px rgba(63, 214, 192, .6);
}
.has-dropdown > a::after { content: "▾"; font-size: .7em; opacity: .8; }
.dropdown {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 210px; list-style: none; margin: 0; padding: 8px;
    background: rgba(12, 16, 40, .96); border: 1px solid var(--border-strong); border-radius: var(--r-md);
    box-shadow: var(--shadow-md); backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .22s; z-index: 120;
}
/* :focus-within as well as :hover — without it the dropdown only ever opens for a
   mouse, so a keyboard user can't reach Syllabus / Reading Materials / Past Year
   Questions, which live only in this menu. */
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
/* nowrap so the panel sizes to its longest label. Without it the panel sticks at
   min-width (it's absolutely positioned inside a narrow li, so it never grows to
   fit) and a longer item like "MyAO Results 2025/2026" wraps to two lines while
   its neighbours sit on one. */
.dropdown a { display: block; padding: 10px 14px; border-radius: 10px; white-space: nowrap; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; background: var(--surface); border: 1px solid var(--border-strong); color: #fff; width: 46px; height: 46px; border-radius: 12px; cursor: pointer; font-size: 1.3rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: rgba(5, 7, 20, .6); backdrop-filter: blur(10px); padding: 64px 0 28px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-brand img { width: 72px; margin-bottom: 14px; }
/* footer column headings are h2 for a correct heading outline; styled compact to keep
   their original footer look (was .footer h4). */
.footer h2 { font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text); margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; }
.footer a { color: var(--muted); transition: color .2s; }
.footer a:hover { color: var(--brand); }
/* Footer contact rows — icon stays pinned beside its text (never orphaned on its own line) */
.f-contact { display: flex; align-items: flex-start; gap: 9px; }
.f-contact svg { flex: 0 0 auto; margin-top: 4px; color: var(--brand); }
.f-contact span { overflow-wrap: break-word; }
/* email is long — size it so it sits on one line; it may still wrap at the <wbr> if the column gets very narrow */
.f-email { font-size: .86rem; }
.f-email svg { margin-top: 3px; }

.socials { display: flex; gap: 12px; flex-wrap: wrap; }
.socials a {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; border: 0; transition: transform .25s, box-shadow .25s, filter .25s;
}
.socials a:hover { transform: translateY(-4px) scale(1.06); filter: brightness(1.12); }
/* Brand-filled circular social buttons — white icon on the brand colour */
.socials a.s-fb { background: #1877F2; box-shadow: 0 6px 18px rgba(24, 119, 242, .45); }
.socials a.s-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    box-shadow: 0 6px 18px rgba(214, 36, 159, .45); }
.socials a.s-tt { background: #010101; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
.socials a.s-yt { background: #FF0000; box-shadow: 0 6px 18px rgba(255, 0, 0, .42); }
.socials a.s-tg { background: #229ED9; box-shadow: 0 6px 18px rgba(34, 158, 217, .45); }
.footer-bottom { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; }

/* =============================================================
   GALAXY-GLASS SYSTEM (shared by every page)
   Frosted panels that sit over the starfield, an accent "nebula"
   card variant, and the floating space decorations.
   ============================================================= */
.gx-sec { position: relative; padding: clamp(30px, 4.5vw, 60px) 0; }
.gx-head { text-align: center; max-width: 720px; margin: 0 auto clamp(26px, 4vw, 44px); position: relative; z-index: 1; }
.gx-head .eyebrow { margin-bottom: 14px; }
.gx-head h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); color: #fff; }
.gx-head p { color: var(--text-soft); margin: 12px auto 0; }

.gx-glass { position: relative; border-radius: var(--r-lg); z-index: 1;
    background: linear-gradient(180deg, rgba(48,58,112,.95), rgba(28,36,74,.97));
    border: 1px solid rgba(160,185,255,.34);
    box-shadow: 0 28px 70px rgba(2,5,22,.6), 0 0 46px rgba(70,100,210,.14),
                inset 0 1px 0 rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gx-glass:hover { border-color: rgba(160,185,255,.55);
    box-shadow: 0 28px 70px rgba(2,5,22,.6), 0 0 60px rgba(90,120,230,.24), inset 0 1px 0 rgba(255,255,255,.14); }
.gx-glass h3, .gx-glass h4 { color: #fff; }
.gx-glass p { color: #dbe1f5; }
.gx-glass strong { color: #fff; }
.gx-glass a:not(.btn) { color: #a9c2ff; }
/* an eyebrow sitting directly inside a card needs breathing room above the title */
.gx-glass > .eyebrow { display: flex; width: fit-content; margin-bottom: 14px; }
.gx-glass > .section-title { margin-bottom: .5em; }
.gx-pad { padding: clamp(24px, 3.4vw, 44px); }

/* ---- Nebula card: accent bloom + star speckle + icon as light source ----
   Drive the accent per card with style="--a:#hex". */
.gx-neb { position: relative; overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.gx-neb::before { content: ""; position: absolute; top: -46%; right: -32%; width: 80%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, var(--a, var(--brand)), transparent 70%);
    opacity: .34; filter: blur(26px); z-index: 0; pointer-events: none;
    transition: opacity .4s ease, transform .4s ease; }
.gx-neb::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(1.6px 1.6px at 18% 24%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 67% 14%, rgba(255,255,255,.85), transparent),
        radial-gradient(1.1px 1.1px at 86% 58%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.4px 1.4px at 30% 80%, rgba(255,255,255,.75), transparent),
        radial-gradient(1px 1px at 54% 46%, rgba(255,255,255,.55), transparent),
        radial-gradient(1.2px 1.2px at 9% 62%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 78% 86%, rgba(255,255,255,.5), transparent); }
.gx-neb > * { position: relative; z-index: 1; }
.gx-neb:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.34);
    box-shadow: 0 34px 80px rgba(2,5,22,.65), 0 0 54px -12px var(--a, var(--brand)); }
.gx-neb:hover::before { opacity: .55; transform: scale(1.18); }
/* the icon glows in the card's accent — it reads as the light source */
.gx-neb .halo, .gx-neb .gx-icon {
    background: radial-gradient(circle at 50% 38%, var(--a, var(--brand)), rgba(18,24,54,.35) 74%);
    border-color: rgba(255,255,255,.3);
    box-shadow: 0 0 38px -6px var(--a, var(--brand)), inset 0 1px 0 rgba(255,255,255,.4); }
.gx-neb .gx-emoji { filter: drop-shadow(0 6px 16px var(--a, var(--brand))); }

/* .prose is written for the old light panels (dark ink). Inside a glass panel it must
   flip to light-on-dark, otherwise the copy is unreadable. */
.gx-glass.prose, .gx-glass .prose { color: #dbe1f5; }
.gx-glass.prose h2, .gx-glass .prose h2,
.gx-glass.prose h3, .gx-glass .prose h3,
.gx-glass.prose h4, .gx-glass .prose h4 { color: #fff; }
/* slightly smaller so long achievement titles fit one line on desktop
   (e.g. "…(IRAO) 2022"); still wraps gracefully on narrow screens. */
.gx-glass.prose h2, .gx-glass .prose h2 { font-size: clamp(1.25rem, 2.1vw, 1.4rem); line-height: 1.3; }
.gx-glass.prose p, .gx-glass .prose p,
.gx-glass.prose li, .gx-glass .prose li { color: #dbe1f5; }
.gx-glass.prose strong, .gx-glass .prose strong,
.gx-glass.prose b, .gx-glass .prose b { color: #fff; }
.gx-glass.prose a, .gx-glass .prose a { color: #a9c2ff; }
.gx-glass.prose th, .gx-glass .prose th { background: rgba(91,140,255,.18); color: #fff; }
.gx-glass.prose th, .gx-glass .prose th,
.gx-glass.prose td, .gx-glass .prose td { border-color: rgba(150,175,255,.22); }
.gx-glass.prose img, .gx-glass .prose img { box-shadow: 0 14px 34px rgba(0,0,0,.45); }

/* boxed icon used inside glass cards */
.gx-icon { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 1.6rem;
    background: linear-gradient(140deg, rgba(91,140,255,.30), rgba(155,108,255,.30));
    border: 1px solid rgba(150,175,255,.36); box-shadow: 0 0 24px rgba(120,150,255,.24); }
/* SVG icon (<x-gx-icon>) inside the boxed icon — white on the accent-tinted box */
.gx-icon svg { width: 26px; height: 26px; color: #fff; filter: drop-shadow(0 2px 6px var(--a, var(--brand))); }

/* centred icon-over-text card (objectives etc.) */
.gx-obj { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.gx-obj .gx-icon { margin-bottom: 14px; }

/* ---- floating space decorations (never block clicks) ---- */
.deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; line-height: 1;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.deco.f  { animation: decoFloat 7s ease-in-out infinite; }
.deco.f2 { animation: decoFloat 9.5s ease-in-out infinite; }
.deco.spin { animation: decoSpin 30s linear infinite; }
.deco.tw { animation: decoTw 3.4s ease-in-out infinite; }
@keyframes decoFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-22px) } }
@keyframes decoSpin { to { transform: rotate(360deg) } }
@keyframes decoTw { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .35; transform: scale(.72) } }
.section > .container { position: relative; z-index: 1; }
@media (max-width: 900px) { .deco.hide-sm { display: none; } }
@media (prefers-reduced-motion: reduce) { .deco, .gx-neb, .gx-neb::before { animation: none !important; transition: none !important; } }

/* Global reduced-motion safety net. Stops looping animations (hero float/glow,
   timeline pulse, spinners) and collapses transition/scroll motion, while letting
   one-shot state changes settle instantly. .reveal is forced visible so its
   opacity:0 start state can never strand content for these users. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    html { scroll-behavior: auto !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Inner page hero ---------- */
.page-hero { padding: clamp(28px, 4.5vw, 52px) 0 clamp(14px, 2.5vw, 26px); text-align: center; position: relative; }
.page-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
/* The h1's bottom margin exists to hold the lead off it. On a hero with no lead
   it is just dead air above the first panel, so drop it — :last-child means this
   un-applies by itself the moment a lead is added back. */
.page-hero h1:last-child { margin-bottom: 0; }
.page-hero .lead { margin: 12px auto 0; }
.page-hero .badge-mini { width: 88px; margin: 0 auto 18px; filter: drop-shadow(0 12px 30px rgba(60,90,220,.5)); }

/* ---------- Prose (rich text inside panels) ---------- */
.prose { color: #4a5578; font-size: 1.02rem; }
.prose h2 { color: #161d3d; font-size: 1.6rem; margin: 1.4em 0 .5em; }
.prose h3 { color: #1c244a; font-size: 1.25rem; margin: 1.2em 0 .4em; }
.prose p { color: #4a5578; margin: 0 0 1rem; }
.prose a { color: var(--brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; color: #4a5578; }
.prose strong, .prose b { color: #1c244a; }
.prose img { border-radius: var(--r-md); margin: 1em 0; box-shadow: 0 14px 34px rgba(20,30,80,.16); }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95rem; }
.prose th, .prose td { border: 1px solid #e4e9ff; padding: 10px 12px; text-align: left; }
.prose th { background: #eef2ff; color: #1c244a; }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 860px; margin: 0 auto; }
/* accordions sit inside a dark glass panel — keep them dark, or the light prose
   text inside .faq-answer becomes invisible on a white card. */
.faq-item { border: 1px solid rgba(150,175,255,.2); border-radius: var(--r-md); margin-bottom: 14px; overflow: hidden;
    background: rgba(12,17,42,.5); transition: box-shadow .25s, border-color .25s, background .25s; }
.faq-item:hover { border-color: rgba(160,185,255,.4); }
.faq-item[open] { border-color: rgba(160,185,255,.5); background: rgba(16,22,52,.65); box-shadow: 0 14px 34px rgba(0,0,0,.4); }
.faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; gap: 14px;
    font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.05rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .q-num { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--grad-brand); color: #fff; font-size: .85rem; }
.faq-item summary .chev { margin-left: auto; transition: transform .25s; color: #a9c2ff; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-answer { padding: 0 24px 22px 68px; }
.faq-answer > :first-child { margin-top: 0; }

/* ---------- Contact ---------- */
/* auto-fit, not repeat(3): locked at 3 columns these cards kept narrowing with the
   viewport until the email and the icon row had to wrap. 320px is the floor that
   keeps both on one line; below that the grid drops to 2 columns instead. */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.contact-card { text-align: center; }
/* gx-pad's 44px a side is tuned for full-width panels; on a ~330px card it ate a
   quarter of the width, which is what forced the wrapping in the first place. */
.contact-card.gx-pad { padding: 28px 18px; }
/* sized to sit on one line in the narrowest 3-column case. No nowrap on purpose:
   if the address is ever changed to a longer one, it breaks at the <wbr> before
   the @ rather than overflowing the card. */
.contact-card .c-mail { font-size: .9rem; font-weight: 600; }
.contact-card .socials { gap: 10px; justify-content: center; }
.contact-card .socials a { width: 40px; height: 40px; }
.contact-card .gx-icon { margin: 0 auto 16px; }
/* long values (address, email) must wrap inside the card rather than overflow it.
   break-word (not anywhere) so the email prefers its <wbr> at the "@". */
.contact-card p, .contact-card a { overflow-wrap: break-word; }
.map-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.map-embed iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- Results ---------- */
.result-hero { text-align: center; position: relative; overflow: hidden; }
/* keep the copy above the confetti layer */
.result-hero > *:not(.res-confetti) { position: relative; z-index: 1; }

/* Award medallion: the emoji sits in a struck-metal disc inside a gold ring that
   slowly catches the light. Ring and disc are pseudo-elements at negative z-index
   — the medallion's own stacking context keeps them behind its emoji but still in
   front of the card. */
.result-hero .medal-big { position: relative; z-index: 1; display: grid; place-items: center;
    width: 118px; height: 118px; margin: 0 auto 16px; font-size: 3rem; line-height: 1; }
.result-hero .medal-big::before { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: 50%;
    background: conic-gradient(from 0turn, transparent 0turn, var(--gold) .42turn, transparent .68turn);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
    animation: medal-spin 7s linear infinite; }
.result-hero .medal-big::after { content: ''; position: absolute; inset: 8px; z-index: -1; border-radius: 50%;
    background: linear-gradient(180deg, rgba(48, 58, 112, .98), rgba(22, 29, 64, .99));
    border: 1px solid rgba(160, 185, 255, .32);
    box-shadow: 0 0 34px rgba(255, 190, 90, .34), inset 0 6px 18px rgba(0, 0, 0, .42); }
@keyframes medal-spin { to { transform: rotate(1turn); } }

/* Confetti, confined to the medallion band at the top of the card.
   The fade MUST be an absolute length, not a percentage: these two cards differ
   ~3x in height, so a percentage that clears the copy on the short one lands in
   the middle of the paragraphs on the tall one. Fully transparent by 162px —
   the first heading starts at 179px on both cards, so this clears it. */
.res-confetti { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    -webkit-mask: linear-gradient(#000 0px, #000 68px, transparent 162px);
    mask: linear-gradient(#000 0px, #000 68px, transparent 162px); }
.res-confetti i { position: absolute; top: -18px; width: 7px; height: 13px; border-radius: 2px; opacity: .85;
    animation-name: confetti-fall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes confetti-fall { to { transform: translateY(210px) rotate(680deg); } }

@media (prefers-reduced-motion: reduce) {
    .result-hero .medal-big::before { animation: none; }
    .res-confetti { display: none; }
}
.btn-view { font-size: 1.15rem; padding: 18px 40px; }

/* ---------- PYQ list ---------- */
.pyq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.pyq-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-md);
    background: rgba(12,17,42,.5); border: 1px solid rgba(150,175,255,.2); color: #dbe1f5;
    transition: transform .25s, border-color .25s, box-shadow .25s; }
.pyq-item:hover { transform: translateY(-4px); border-color: rgba(160,185,255,.45); box-shadow: 0 16px 36px rgba(0,0,0,.45); }
/* deeper red so the white "PDF" clears AA */
.pyq-item .pyq-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(135deg,#d43f2a,#a82a1a); color: #fff; font-size: 1.1rem; font-weight: 700; }
.pyq-item b { display: block; color: #fff; font-size: .98rem; }
.pyq-item span { color: #aab4dd; font-size: .82rem; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .eyebrow { white-space: normal; letter-spacing: .12em; font-size: .72rem; text-align: left; }
    .section { padding: clamp(26px, 7vw, 44px) 0; }
    .container { padding: 0 18px; }
    .section-title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
    .lead { font-size: 1rem; }
    .page-hero .lead, .center .lead { max-width: 100%; }
}
/* Nav collapses to the burger at 1024px — with the two-line wordmark the six-item
   horizontal menu crowds (Contact Us wraps) below ~1024, so switch to the burger
   before that. Grid/footer collapse stays at 760px (below). */
@media (max-width: 1024px) {
    .nav-links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch;
        background: rgba(8,11,30,.98); border-bottom: 1px solid var(--border); padding: 14px; gap: 4px;
        /* visibility:hidden when closed removes the off-screen links from the tab order —
           transform alone leaves them focusable, so keyboard focus flew off-screen. */
        transform: translateY(-120%); visibility: hidden; transition: transform .35s, visibility .35s;
        max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
    .nav-links.open { transform: none; visibility: visible; }
    .nav-links a { padding: 14px; }
    /* scope the dropdown's own visibility:visible to the OPEN menu, or it would
       re-expose the 5 submenu links even while the menu is closed. */
    .nav-links.open .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; border: 0; padding: 0 0 0 14px; }
    .dropdown { position: static; opacity: 1; transform: none; box-shadow: none; background: transparent; border: 0; padding: 0 0 0 14px; }
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 760px) {
    .brand span { display: none; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    .nav-cta .btn:not(.nav-toggle) { display: none; }
}