/* ==========================================================
   Vivekanandha College of Education — DEMO "Aurora" theme
   Premium glassmorphism · gradient mesh · vibrant accents
   (same class contract as the classic theme)
   ========================================================== */

:root {
    --brand1:  #ff6a3d;   /* coral-saffron */
    --brand2:  #ff2e74;   /* pink */
    --brand3:  #7c3aed;   /* violet */
    --brand4:  #2dd4bf;   /* teal */
    --plum:    #160f2e;   /* deep background for dark areas */
    --plum-2:  #241841;

    --ink:     #1b1530;
    --muted:   #6b6682;
    --line:    rgba(27,21,48,.09);
    --bg:      #f5f6fc;
    --bg-soft: #eef0fa;
    --bg-tint: #fff3ec;

    --grad-primary: linear-gradient(135deg, #ff6a3d 0%, #ff2e74 55%, #7c3aed 110%);
    --grad-warm:    linear-gradient(135deg, #ff8a2a, #ff5e62);
    --grad-cool:    linear-gradient(135deg, #7c3aed, #2dd4bf);
    --grad-text:    linear-gradient(120deg, #ff5e3a, #ff2e74 45%, #7c3aed);

    --glass:     rgba(255,255,255,.62);
    --glass-2:   rgba(255,255,255,.78);
    --glass-brd: rgba(255,255,255,.75);

    --radius:    20px;
    --radius-sm: 14px;
    --shadow:     0 14px 40px rgba(35,18,70,.10);
    --shadow-lg:  0 28px 70px rgba(35,18,70,.18);
    --glow:       0 18px 50px rgba(124,58,237,.28);
    --glow-warm:  0 18px 50px rgba(255,94,98,.30);
    --maxw: 1200px;
    --t: .3s cubic-bezier(.4,.14,.3,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }

body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--ink); background: var(--bg); line-height: 1.7; position: relative;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* Ambient animated gradient-mesh background */
body::before {
    content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(38% 38% at 15% 18%, rgba(255,106,61,.20), transparent 60%),
        radial-gradient(34% 42% at 85% 12%, rgba(124,58,237,.20), transparent 60%),
        radial-gradient(40% 40% at 82% 88%, rgba(45,212,191,.16), transparent 60%),
        radial-gradient(44% 44% at 8% 92%, rgba(255,46,116,.16), transparent 60%);
    animation: meshDrift 22s ease-in-out infinite alternate;
}
@keyframes meshDrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(var(--maxw), 92%); margin-inline: auto; }

h1, h2, h3, h4 { font-family: 'Sora', sans-serif; font-weight: 700; line-height: 1.18; color: var(--ink); letter-spacing: -.02em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

.grad-text, .section-head h2 span {
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Top bar ---------- */
.topbar { background: linear-gradient(90deg, var(--plum), var(--plum-2)); color: #cfc6ee; font-size: .95rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; flex-wrap: wrap; }
.topbar-contact { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.topbar-contact a { color: #d9d2f5; transition: color var(--t); }
.topbar-contact a:hover { color: var(--brand4); }
.topbar .ic { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent;
    font-size: 1.1em; margin-right: .3rem; }
/* Live clock. Tabular figures stop the row twitching as the seconds change.
   The glyph keeps its own colour — .topbar .ic gradient-clips its icons, which
   flattens a colour emoji into a solid blob. */
.topbar-clock { display: flex; align-items: center; gap: .4rem; white-space: nowrap; color: #d9d2f5;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.clock-ic { font-size: .95em; line-height: 1; }

.topbar-social { display: flex; align-items: center; gap: .55rem; }
.topbar-social .social-link { display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; color: #d9d2f5;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    transition: color var(--t), background var(--t), border-color var(--t), transform var(--t); }
.topbar-social .social-link:hover { color: #fff; transform: translateY(-1px); border-color: transparent; }
.topbar-social .social-facebook:hover  { background: #1877f2; }
.topbar-social .social-instagram:hover { background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888); }
.topbar-social .social-whatsapp:hover  { background: #25d366; }

/* ---------- Header / glass nav ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.72);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.6); box-shadow: 0 6px 30px rgba(35,18,70,.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0;
    transition: padding var(--t); }

.brand { display: flex; align-items: center; gap: .75rem; flex: 0 1 auto; min-width: 0; }
.brand-img { height: 50px; width: auto; display: block; filter: drop-shadow(0 6px 14px rgba(124,58,237,.25)); }
.brand-logo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-weight: 800;
    color: #fff; background: var(--grad-primary); box-shadow: var(--glow-warm); }

/* Emblem in a gradient ring */
/* Header brand: the bare crest, no gradient ring or white disc. The artwork
   carries its own blue rim, and losing the circular frame lets the seal show
   whole — ribbon included — instead of shrunk to fit inside a circle. */
.brand-emblem { flex: 0 0 auto; display: block; height: 82px;
    transition: transform .45s cubic-bezier(.2,.8,.3,1); }
/* The crest sits inside ~1280px of transparent margin, so trim to the artwork
   itself; browsers without object-view-box just show it un-zoomed. */
.brand-emblem img { height: 100%; width: auto; display: block; object-fit: contain;
    object-view-box: inset(17.5% 22.5% 17.5% 22%);
    filter: drop-shadow(0 6px 15px rgba(35,18,70,.3)); }
.brand:hover .brand-emblem { transform: scale(1.06); }

/* Wordmark beside the crest. Sized against the 82px seal, not the old 58px
   ring, so the two read as one lockup. */
.brand-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.brand-text strong { font-family: 'Sora', sans-serif; font-size: 1.08rem; font-weight: 800; letter-spacing: .04em;
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { font-size: .6rem; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.brand-city { white-space: nowrap; }
.brand-estd { margin-top: .3rem; align-self: flex-start; font-size: .6rem; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--brand3); background: rgba(124,58,237,.10);
    border: 1px solid rgba(124,58,237,.18); padding: .1rem .45rem; border-radius: 20px; }

.brand-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brand1); display: inline-block;
    flex: 0 0 auto; vertical-align: middle; margin: 0 .2rem .12rem; }
/* Header shrinks once the page is scrolled */
.site-header.stuck { background: rgba(255,255,255,.88); box-shadow: 0 8px 34px rgba(35,18,70,.14); }
.site-header.stuck .header-inner { padding: .32rem 0; }
.site-header.stuck .brand-emblem { height: 64px; }
.site-header.stuck .brand-estd { display: none; }

.main-nav ul { list-style: none; display: flex; align-items: center; gap: .1rem; }
.main-nav > ul > li { display: flex; align-items: center; }
.main-nav > ul > li > a { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
    padding: .55rem .62rem; font-size: .85rem; font-weight: 600; line-height: 1; color: var(--ink);
    border-radius: 11px; transition: color var(--t), background var(--t); position: relative; }
.main-nav > ul > li > a:hover, .main-nav > ul > li > a.active { color: var(--brand2); background: rgba(124,58,237,.08); }
.caret { font-style: normal; font-size: .7rem; opacity: .7; }

.has-dropdown { position: relative; }
.dropdown { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--glass-2);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--glass-brd);
    border-radius: 16px; box-shadow: var(--shadow-lg); padding: .5rem; list-style: none;
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--t); z-index: 50; }
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(8px); }
.dropdown li a { display: block; padding: .58rem .85rem; font-size: .85rem; border-radius: 10px; transition: all var(--t); }
.dropdown li a:hover { background: var(--grad-primary); color: #fff; transform: translateX(3px); }

.btn-apply { display: inline-block; margin-left: .5rem; padding: .62rem 1.25rem; border-radius: 30px;
    background: var(--grad-primary); background-size: 180% 180%; color: #fff !important; font-weight: 700; font-size: .85rem;
    box-shadow: var(--glow-warm); transition: transform var(--t), box-shadow var(--t), background-position .6s; }
.btn-apply:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 16px 40px rgba(255,46,116,.5); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 26px; height: 3px; background: var(--ink); border-radius: 3px; transition: var(--t); }
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.7rem; border-radius: 30px;
    font-weight: 700; font-size: .92rem; cursor: pointer; border: 2px solid transparent; transition: all var(--t);
    position: relative; overflow: hidden; font-family: inherit; }
.btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform: translateX(-120%); transition: transform .6s; }
.btn:hover::before { transform: translateX(120%); }
.btn-primary { background: var(--grad-primary); background-size: 180% 180%; color: #fff; box-shadow: var(--glow-warm); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(255,46,116,.5); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: #fff; color: var(--brand3); border-color: #fff; transform: translateY(-3px); }
.btn-outline { background: transparent; color: var(--brand3); border-color: var(--brand2); }
.btn-outline:hover { background: var(--grad-primary); color: #fff; transform: translateY(-3px); box-shadow: var(--glow); border-color: transparent; }
.btn-light { background: #fff; color: var(--brand2); }
.btn-light:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ---------- Hero ---------- */
/* --hero-h is refined by main.js so the hero + quick strip + ticker land
   exactly on one screen; the clamp below is the no-JS fallback. */
.hero { position: relative; min-height: var(--hero-h, clamp(440px, 60svh, 640px)); overflow: hidden; background: var(--plum);
    display: flex; align-items: center; padding: clamp(40px, 5vh, 72px) 0 clamp(80px, 8vh, 96px); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease, transform 7s ease;
    background-size: cover; background-position: center; transform: scale(1.1); }
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-slide::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, rgba(22,15,46,.95) 0%, rgba(36,24,65,.82) 45%, rgba(124,58,237,.55) 100%); }
.hero-s1 { background-image: url('../images/bg/hero-1.jpg'); }
.hero-s2 { background-image: url('../images/bg/hero-2.jpg'); }
.hero-s3 { background-image: url('../images/bg/hero-3.jpg'); }
.hero-s4 { background-image: url('../images/bg/hero-4.jpg'); }
/* floating orbs */
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); z-index: 2; opacity: .55; }
.hero::before { width: 360px; height: 360px; background: var(--grad-warm); top: -80px; right: 6%; animation: orb 11s ease-in-out infinite alternate; }
.hero::after { width: 300px; height: 300px; background: var(--grad-cool); bottom: -90px; left: -40px; animation: orb 13s ease-in-out infinite alternate-reverse; }
@keyframes orb { from { transform: translateY(0) scale(1); } to { transform: translateY(40px) scale(1.15); } }

.hero-content { position: relative; z-index: 3; width: 100%; }
.hero-inner { max-width: 780px; color: #fff; margin: 0 auto; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem; border-radius: 30px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px);
    font-size: .85rem; font-weight: 600; color: #fff; margin-bottom: .5rem; }

/* The course and its session are the offer, so they read at headline scale
   rather than as a chip. Two shadows: a tight one for legibility against the
   slider photo, a wide soft one to lift the whole line off it. */
.hero-session { display: block; font-family: 'Anton', 'Sora', sans-serif; font-weight: 400;
    font-size: clamp(2.8rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: .02em;
    color: #fff; margin-bottom: .55rem;
    text-shadow: 0 2px 4px rgba(10,6,30,.95), 0 3px 16px rgba(10,6,30,.9), 0 0 42px rgba(10,6,30,.7);
    /* A slow halo pulse round the whole line — the "look here" cue for the
       one line on the page that carries a deadline. */
    animation: sessionGlow 2.4s ease-in-out infinite; }
@keyframes sessionGlow {
    0%, 100% { text-shadow: 0 2px 4px rgba(10,6,30,.95), 0 3px 16px rgba(10,6,30,.9), 0 0 42px rgba(10,6,30,.7); }
    50%      { text-shadow: 0 2px 4px rgba(10,6,30,.95), 0 3px 16px rgba(10,6,30,.9),
                            0 0 30px rgba(255,207,110,.7), 0 0 66px rgba(255,79,154,.45); }
}
/* Each part of the line carries its own colour and walks the same ramp on a
   stagger, so the hues chase one another across "B.Ed. 2026-2028". Solid
   `color` rather than a gradient clipped to the text: the line sits on a
   photographic slider, and a clipped fill washes out against it. Every stop is
   a light tint so no phase of the cycle drops out against a dark slide. */
.hero-session b { font-weight: 400; animation: sessionHue 6s linear infinite; }
/* Course on top, the offer beneath it at a smaller size — one reads as the
   name, the other as the deadline. */
.hero-session .hs-line { display: block; }
/* Anton ships in a single weight, so the extra heft on the course name comes
   from a stroke in its own colour rather than a heavier face. */
.hero-session .hs-line b { -webkit-text-stroke: .03em currentColor; }

/* The course name rides a ribbon in the site's own gradient — the same warm
   ramp as the Apply Now button — with chevron-notched ends. The ramp is twice
   the banner's width and slides, so the badge itself cycles through the palette
   while the lettering stays a flat white that never has to fight it.
   clip-path also clips box-shadow, so the drop comes from a filter, which
   follows the notched silhouette instead of the rectangle. */
.hero-session .hs-line-1 {
    display: inline-block; margin-bottom: .16em; padding: .06em 1.5em .12em;
    background-image: linear-gradient(100deg, #ff6a3d 0%, #ff2e74 18%, #b02ee0 34%,
                                              #7c3aed 50%, #b02ee0 66%, #ff2e74 82%, #ff6a3d 100%);
    background-size: 220% 100%;
    clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
    filter: drop-shadow(0 .09em .16em rgba(10,6,30,.65));
    animation: ribbonHue 9s linear infinite; }
@keyframes ribbonHue {
    from { background-position: 0 0; }
    to   { background-position: 220% 0; }
}
/* On the ribbon the letters are printed, not lit: flat white with a short dark
   emboss down-right and a tight inner shadow, so they sit in the banner rather
   than floating over it. No hue cycling here — the ribbon does that. */
.hero-session .hs-line-1 b {
    color: #fff; animation: none;
    -webkit-text-stroke: .015em rgba(255,255,255,.85);
    text-shadow: .016em .016em 0 rgba(120,26,60,.55),
                 .032em .032em 0 rgba(90,20,52,.45),
                 .05em .06em .08em rgba(60,10,40,.5); }

/* Plain text under the ribbon — no box, so the banner stays the only thing on
   the slide asking to be looked at. */
.hero-session .hs-line-2 { font-size: .40em; letter-spacing: .05em; margin-top: .04em; }
.hero-session .hs-line-2 b { -webkit-text-stroke: 0; }
.hero-session b:nth-of-type(1) { animation-delay: 0s; }
.hero-session b:nth-of-type(2) { animation-delay: -1.2s; }
.hero-session b:nth-of-type(3) { animation-delay: -2.4s; }
.hero-session b:nth-of-type(4) { animation-delay: -3.6s; }
/* nth-of-type restarts inside each line, so the second line is nudged along the
   ramp by hand — otherwise both lines would open on the same colour. */
.hero-session .hs-line-2 b:nth-of-type(1) { animation-delay: -1.2s; }
.hero-session .hs-line-2 b:nth-of-type(2) { animation-delay: -2.4s; }
.hero-session .hs-line-2 b:nth-of-type(3) { animation-delay: -3.6s; }
.hero-session .hs-line-2 b:nth-of-type(4) { animation-delay: -4.8s; }
@keyframes sessionHue {
    0%   { color: #ffd166; }
    20%  { color: #ffab6b; }
    40%  { color: #ff8fb8; }
    60%  { color: #e0b3ff; }
    80%  { color: #7ff0e4; }
    100% { color: #ffd166; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-session, .hero-session b, .hero-session .hs-line-1 { animation: none; }
    /* Still multi-coloured, just no longer moving. */
    .hero-session b:nth-of-type(1) { color: #ffd166; }
    .hero-session b:nth-of-type(2) { color: #ff8fb8; }
    .hero-session b:nth-of-type(3) { color: #e0b3ff; }
    .hero-session b:nth-of-type(4) { color: #7ff0e4; }
    .hero-session .hs-line-2 b:nth-of-type(1) { color: #ff8fb8; }
    .hero-session .hs-line-2 b:nth-of-type(2) { color: #e0b3ff; }
    .hero-session .hs-line-2 b:nth-of-type(3) { color: #7ff0e4; }
    .hero-session .hs-line-2 b:nth-of-type(4) { color: #cdf07a; }
}
.hero-badge.blink { background: linear-gradient(120deg,#ff7a59,#ff4f9a); border-color: transparent;
    box-shadow: 0 0 18px rgba(255,79,154,.6); animation: badgeBlink 1.4s ease-in-out infinite; }
@keyframes badgeBlink { 0%,100% { opacity: 1; box-shadow: 0 0 18px rgba(255,79,154,.6); }
    50% { opacity: .78; box-shadow: 0 0 26px rgba(255,122,89,.85); } }
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; }
.hero-quote { color: #ffd9a8; font-style: italic; font-size: 1rem; margin-bottom: .7rem; display: block; }
.hero-inner h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.2rem); font-weight: 800; margin-bottom: .8rem; letter-spacing: -.03em; line-height: 1.12; }
.hero-inner h1 span { background: linear-gradient(120deg, #ffcf6e, #ff7a59, #ff4f9a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-inner p { color: #ddd6f3; font-size: 1.05rem; margin-bottom: 1.5rem; max-width: 620px; margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.hero-stats { display: flex; gap: 2rem; margin-top: 2.3rem; flex-wrap: wrap; justify-content: center; }
.hero-stats div { color: #fff; }
.hero-stats b { display: block; font-family: 'Sora'; font-size: 1.7rem; line-height: 1;
    background: linear-gradient(120deg,#ffd06e,#ff6a8b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stats small { color: #c7bff0; font-size: .8rem; }

/* ---------- Hero side rails: 3D emblem + credential links ---------- */
.hero-grid { display: grid; grid-template-columns: 1fr; align-items: center; gap: 1.8rem; }

/* The emblem is decorative depth: a spinning name ring lifted off a glow
   plate, with the seal floating above both. No rotateX/rotateY here — any
   tilt foreshortens the ring into an ellipse; depth comes from translateZ. */
.hero-emblem { perspective: 1000px; text-align: center; }
.emblem-float { animation: emblemFloat 7s ease-in-out infinite; transform-style: preserve-3d; }
.emblem-3d { position: relative; width: min(340px, 100%); aspect-ratio: 1; margin: 0 auto;
    transform-style: preserve-3d; }
@keyframes emblemFloat { 0%, 100% { transform: translateY(-9px); } 50% { transform: translateY(9px); } }

/* glow plate, pushed behind everything — bright enough to carry the crest
   over a busy hero photo */
.emblem-3d::before { content: ""; position: absolute; inset: 8%; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255,207,110,.78), rgba(124,58,237,.5) 56%, transparent 74%);
    filter: blur(18px); transform: translateZ(-40px); }

/* The crest carries its own name ring and wordmark, so it stands alone here
   and fills the whole plate. The white drop-shadow traces its silhouette —
   a halo that lifts it off the photo without parking it on a plate. */
.emblem-mark { position: absolute; inset: 0; transform: translateZ(58px);
    background: url('../images/clg_logo.png') no-repeat center / contain;
    filter: drop-shadow(0 18px 28px rgba(10,6,30,.7)) drop-shadow(0 0 16px rgba(255,255,255,.45))
            saturate(1.08) contrast(1.05); }

/* Wordmark under the crest. Solid white beats the warm gradient here — the
   hero photo behind it shifts too much for clipped text to stay readable. */
/* Negative margin eats the transparent strip the crest artwork carries below
   the ribbon, so the wordmark sits under the seal, not under the file. */
.emblem-name { margin-top: -10%; line-height: 1.15; }
.emblem-name strong { display: block; font-family: 'Sora', sans-serif; font-weight: 800;
    font-size: clamp(1.55rem, 1.8vw, 2rem); letter-spacing: .02em; color: #fff;
    text-shadow: 0 3px 16px rgba(10,6,30,.9), 0 0 36px rgba(255,138,76,.5); }
.emblem-name span { display: block; margin-top: .35rem; font-size: .82rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase; color: #ffd9a8;
    text-shadow: 0 2px 12px rgba(10,6,30,.85); }

.hero-creds { display: flex; flex-direction: column; gap: .85rem; }
.cred-card { display: flex; align-items: center; gap: .75rem; padding: .8rem .95rem; border-radius: 16px;
    background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(10px);
    color: #fff; box-shadow: 0 12px 30px rgba(10,6,30,.28);
    transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t); }
.cred-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.5); box-shadow: 0 18px 40px rgba(10,6,30,.42); }
.cred-ic { flex: 0 0 auto; font-size: 1.15rem; line-height: 1; }
.cred-txt { display: flex; flex-direction: column; min-width: 0; }
.cred-txt small { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #c7bff0; }
.cred-txt b { font-family: 'Sora', sans-serif; font-size: .95rem; font-weight: 700; }
.cred-go { margin-left: auto; opacity: .7; font-size: .9rem; }
.cred-card:hover .cred-go { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .emblem-float { animation: none; }
}

/* Three columns from 1200px: the emblem takes a column that scales with the
   viewport rather than a fixed 340px, so it appears at laptop widths instead of
   only past 1500px. Past 1500px it gets its full-size column back. Below 1200px
   the emblem and credential rail both sit under the buttons. */
@media (min-width: 1200px) {
    .hero-content .container { width: min(1480px, 94%); }
    .hero-grid { grid-template-columns: clamp(190px, 17vw, 300px) minmax(0, 1fr) minmax(232px, 268px); gap: 2.2rem; }
    .hero-emblem { display: block; }
    .hero-inner { max-width: 720px; }
}
@media (min-width: 1500px) {
    .hero-grid { grid-template-columns: 340px minmax(0, 1fr) minmax(232px, 268px); }
}
@media (max-width: 1199px) {
    .hero-emblem { display: none; }
    .hero-creds { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .cred-card { flex: 0 1 262px; }
}

.hero-dots { position: absolute; bottom: 24px; left: 0; right: 0; z-index: 4; display: flex; gap: .5rem; justify-content: center; }
.hero-dots button { width: 28px; height: 5px; border: 0; border-radius: 5px; background: rgba(255,255,255,.35); cursor: pointer; transition: var(--t); }
.hero-dots button.active { background: var(--grad-warm); width: 46px; }

/* ---------- Quick strip ---------- */
.quick-strip { position: relative; margin-top: -42px; z-index: 5; }
.quick-strip .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.quick-item { display: flex; align-items: center; gap: .9rem; padding: 1.3rem 1.2rem; border-radius: var(--radius);
    background: var(--glass-2); backdrop-filter: blur(16px); border: 1px solid var(--glass-brd); box-shadow: var(--shadow);
    transition: transform var(--t), box-shadow var(--t); }
.quick-item:hover { transform: translateY(-6px); box-shadow: var(--glow); }
.quick-item .qi-ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center;
    font-size: 1.4rem; background: var(--grad-primary); color: #fff; box-shadow: var(--glow-warm); }
.quick-item b { display: block; font-family: 'Sora'; font-size: 1.3rem; line-height: 1.1; color: var(--ink); }
.quick-item small { color: var(--muted); font-size: .8rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(3.6rem, 7vw, 6.5rem) 0; position: relative; }
.section.tint { background: linear-gradient(180deg, rgba(238,240,250,.7), rgba(255,243,236,.6)); }
.section.dark { background: linear-gradient(135deg, var(--plum), var(--plum-2)); color: #fff; overflow: hidden; }
.section.dark::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
    background: var(--grad-cool); filter: blur(90px); opacity: .35; top: -120px; right: -60px; }
.section-head { text-align: center; max-width: 740px; margin: 0 auto 3.2rem; position: relative; }
.section-head.left { text-align: left; margin-inline: 0; }
.eyebrow { display: inline-block; font-weight: 700; font-size: .78rem; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: .7rem;
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-head h2 { position: relative; }
.section-head h2::after { content: ""; display: block; width: 70px; height: 5px; border-radius: 5px;
    background: var(--grad-primary); margin: 1rem auto 0; box-shadow: var(--glow-warm); }
.section-head.left h2::after { margin-inline: 0; }
.section .lead { color: var(--muted); font-size: 1.04rem; }
.dark .section-head h2, .dark h2, .dark h3 { color: #fff; }
.dark .eyebrow { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- About preview ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-media { position: relative; }
.about-img { border-radius: var(--radius); aspect-ratio: 4/3; background: var(--grad-cool); box-shadow: var(--shadow-lg); display: grid; place-items: center; color: #fff; }
.about-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.about-media::before { content: ""; position: absolute; inset: -14px; border-radius: calc(var(--radius) + 10px);
    background: var(--grad-primary); opacity: .14; z-index: -1; filter: blur(8px); }
.rounded-photo { width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow); object-fit: cover; }
.about-badge { position: absolute; right: -16px; bottom: -16px; background: var(--grad-primary); color: #fff;
    border-radius: 18px; padding: 1.1rem 1.3rem; box-shadow: var(--glow-warm); text-align: center; }
.about-badge b { display: block; font-family: 'Sora'; font-size: 2rem; line-height: 1; }
.about-badge small { font-size: .78rem; }
.about-text h2 { margin-bottom: 1rem; }
.about-text p { color: var(--muted); margin-bottom: 1rem; }
.about-points { list-style: none; margin: 1.2rem 0 1.8rem; display: grid; gap: .7rem; }
.about-points li { padding-left: 2rem; position: relative; }
.about-points li::before { content: "✓"; position: absolute; left: 0; top: .1rem; color: #fff; background: var(--grad-primary);
    width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: .72rem; box-shadow: var(--glow-warm); }
/* Points that have a list PDF behind them read as links, not plain text. */
.about-points a { color: inherit; text-decoration: underline; text-decoration-color: rgba(124,58,237,.45);
    text-underline-offset: 3px; transition: color var(--t), text-decoration-color var(--t); }
.about-points a:hover { color: var(--brand3); text-decoration-color: currentColor; }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 1.7rem; }
.cards.c2 { grid-template-columns: repeat(2, 1fr); }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.cards.c4 { grid-template-columns: repeat(4, 1fr); }

.card { background: var(--glass-2); backdrop-filter: blur(14px); border: 1px solid var(--glass-brd); border-radius: var(--radius);
    padding: 2rem 1.9rem; box-shadow: var(--shadow); transition: transform var(--t), box-shadow var(--t); position: relative; overflow: hidden; }
.card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad-primary); opacity: 0; transition: opacity var(--t); }
.card:hover { transform: translateY(-10px); box-shadow: var(--glow); }
.card:hover::after { opacity: 1; }
.card .card-ic { width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 1.2rem;
    background: linear-gradient(135deg, rgba(255,106,61,.16), rgba(124,58,237,.16)); color: var(--brand2);
    transition: transform var(--t); }
.card:hover .card-ic { transform: scale(1.1) rotate(-6deg); }
.card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .93rem; }
.card .card-link { display: inline-block; margin-top: 1rem; font-weight: 700; font-size: .85rem;
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.feature::after { opacity: 1; }
a.card { color: inherit; }

/* ---------- Vision / mission ---------- */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.7rem; }
.vm-card { background: var(--glass-2); backdrop-filter: blur(14px); border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow);
    border: 1px solid var(--glass-brd); position: relative; overflow: hidden; }
.vm-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--grad-warm); }
.vm-card.mission::before { background: var(--grad-cool); }
.vm-card h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }

/* ---------- Message blocks ---------- */
.message-block { display: grid; grid-template-columns: 290px 1fr; gap: 2.5rem; align-items: start; background: var(--glass-2);
    backdrop-filter: blur(14px); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.4rem; border: 1px solid var(--glass-brd); }
.message-photo { background: var(--grad-cool); border-radius: var(--radius); aspect-ratio: 3/4; display: grid; place-items: center;
    color: rgba(255,255,255,.6); font-size: .85rem; overflow: hidden; box-shadow: var(--shadow); position: relative; }
.message-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -60px 60px rgba(22,15,46,.4); }
.message-photo img { width: 100%; height: 100%; object-fit: cover; }
.message-body p { color: var(--muted); margin-bottom: 1rem; font-size: 1.02rem; }
.message-sign { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 2px dashed var(--line); }
.message-sign b { font-size: 1.08rem; }
.message-sign span { display: block; font-size: .88rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }

/* ---------- Page hero (inner) ---------- */
/* Every inner page leads with its content, so the banner is a strip rather
   than a hero — it names the page and gets out of the way. */
.page-hero { position: relative; overflow: hidden; color: #fff; padding: .95rem 0 .9rem;
    background: linear-gradient(115deg, rgba(22,15,46,.94), rgba(124,58,237,.6)), url('../images/bg/page-hero.jpg');
    background-size: cover; background-position: center; }
.page-hero::before { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%;
    background: var(--grad-warm); filter: blur(80px); opacity: .34; top: -105px; right: 4%; animation: orb 12s ease-in-out infinite alternate; }
.page-hero h1 { color: #fff; font-size: clamp(1.2rem, 2vw, 1.5rem); position: relative; }
.page-hero p { color: #ddd6f3; font-size: .8rem; margin-top: .18rem; max-width: 560px; position: relative; }

.breadcrumb { margin-top: .35rem; font-size: .78rem; color: #c7bff0; position: relative; }
.breadcrumb a { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.breadcrumb span { margin: 0 .35rem; }

/* ---------- Prose / blocks ---------- */
.prose { max-width: 900px; }
.prose p { margin-bottom: 1.1rem; }
.prose h3 { margin: 2rem 0 .8rem; }
.prose ul { margin: 0 0 1.2rem 1.2rem; }
.prose ul li { margin-bottom: .5rem; }

.block { background: var(--glass-2); backdrop-filter: blur(14px); border: 1px solid var(--glass-brd); border-radius: var(--radius);
    padding: 2.1rem; box-shadow: var(--shadow); margin-bottom: 1.7rem; }
.block > h3 { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; padding-bottom: .85rem; border-bottom: 2px solid var(--line); }
.block .num { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; font-size: .9rem;
    color: #fff; background: var(--grad-primary); box-shadow: var(--glow-warm); }

.photo-ph { background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(45,212,191,.1)); border: 1px dashed rgba(124,58,237,.35);
    border-radius: var(--radius-sm); aspect-ratio: 16/9; display: grid; place-items: center; color: var(--brand3); font-size: .85rem; margin: 1rem 0; }
.photo-ph.sm { aspect-ratio: 4/3; }

/* Fee payment QR. The bank standee is a square code on white, so it sits on a
   white card of its own rather than on the tinted section behind it. */
.mini-list { list-style: none; display: grid; gap: .45rem; margin: 1rem 0 1.2rem; }
.mini-list li { position: relative; padding-left: 1.35rem; font-size: .86rem; color: var(--muted); line-height: 1.45; }
.mini-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-size: .72rem; font-weight: 800;
    color: var(--brand3); }
.mini-list strong, .mini-list em { color: var(--ink); font-style: normal; font-weight: 700; }

.fee-line { display: inline-flex; align-items: baseline; gap: .5rem; margin-bottom: .7rem !important;
    padding: .45rem .9rem; border-radius: 30px; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--brand3); background: rgba(124,58,237,.1);
    border: 1px solid rgba(124,58,237,.2); }
.fee-line strong { font-family: 'Sora', sans-serif; font-size: 1.05rem; letter-spacing: 0; color: var(--brand1); }

.pay-qr { max-width: 260px; margin: 1.1rem 0 0; }
.pay-qr img { display: block; width: 100%; height: auto; background: #fff; padding: .7rem;
    border-radius: var(--radius-sm); border: 1px solid var(--glass-brd); box-shadow: var(--shadow); }
.pay-qr .photo-ph { margin: 0; }
.pay-upi { display: flex; flex-direction: column; gap: .15rem; margin: .7rem 0 0; }
.pay-upi span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pay-upi strong { font-size: .82rem; font-weight: 700; color: var(--brand3); word-break: break-all; }

/* ---------- Statutory / academic document links ----------
   One row per document. Files that have not been supplied yet render as a
   muted "Under Process" chip from the same markup, so nothing links nowhere. */
.doc-list { display: grid; gap: .5rem; margin-top: 1.1rem; }
.doc-link { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 12px;
    background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.16);
    color: var(--ink); font-size: .85rem; font-weight: 600; text-align: left;
    transition: background var(--t), border-color var(--t), transform var(--t); }
a.doc-link:hover { background: rgba(124,58,237,.13); border-color: rgba(124,58,237,.4); transform: translateX(3px); }
.doc-ic { flex: 0 0 auto; font-size: 1rem; line-height: 1; }
.doc-name { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.doc-tag { flex: 0 0 auto; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brand3); background: rgba(124,58,237,.12); padding: .18rem .5rem; border-radius: 20px; white-space: nowrap; }
.doc-link.is-pending { background: rgba(120,113,145,.07); border-color: rgba(120,113,145,.2); color: var(--muted); }
.doc-link.is-pending .doc-tag { color: #b4791f; background: rgba(214,158,46,.16); }
.doc-link.is-nil .doc-tag { color: var(--muted); background: rgba(120,113,145,.18); }
.doc-link.is-nil .doc-ic { display: none; }
.doc-link.is-external .doc-tag { color: var(--brand4); background: rgba(45,212,191,.14); text-transform: none; letter-spacing: 0; }

/* ---------- Forms (alumni registration, staff login) ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.4rem; }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
/* Author display beats the UA's [hidden] rule, so hiding needs saying twice. */
.field[hidden] { display: none; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field label span { color: var(--brand1); }
.field input, .field select { width: 100%; padding: .7rem .85rem; border-radius: 12px; font: inherit; font-size: .92rem;
    color: var(--ink); background: rgba(255,255,255,.85); border: 1px solid rgba(124,58,237,.22);
    transition: border-color var(--t), box-shadow var(--t); }
.field input:focus, .field select:focus { outline: none; border-color: var(--brand3);
    box-shadow: 0 0 0 3px rgba(124,58,237,.16); }
.field small { font-size: .74rem; color: var(--muted); }
.field-err { font-size: .76rem; font-style: normal; font-weight: 700; color: #d6336c; }
.form-alert { padding: .8rem 1rem; border-radius: 12px; font-size: .88rem; font-weight: 600;
    color: #a01243; background: rgba(214,51,108,.1); border: 1px solid rgba(214,51,108,.28); }

.radio-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill span { display: inline-block; padding: .6rem 1.1rem; border-radius: 30px; font-size: .9rem; font-weight: 700;
    background: rgba(124,58,237,.07); border: 1px solid rgba(124,58,237,.22); cursor: pointer;
    transition: all var(--t); }
.radio-pill input:checked + span { background: var(--grad-primary); border-color: transparent; color: #fff;
    box-shadow: var(--glow-warm); }
.radio-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(124,58,237,.3); }

/* Honeypot: off-screen for people, irresistible to bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-done { padding-block: 2.4rem; }
.form-done-ic { font-size: 3rem; line-height: 1; margin-bottom: .6rem; }

/* ---------- Applicant portal ---------- */
.tab-row { display: flex; gap: .4rem; padding: .3rem; border-radius: 30px; background: rgba(124,58,237,.07);
    border: 1px solid rgba(124,58,237,.16); }
.tab { flex: 1 1 0; text-align: center; padding: .6rem .8rem; border-radius: 30px; font-size: .88rem;
    font-weight: 700; color: var(--muted); transition: all var(--t); }
.tab.active { background: var(--grad-primary); color: #fff; box-shadow: var(--glow-warm); }

/* The portal sits close under its strip banner. */
.section-tight { padding: clamp(1.1rem, 2vw, 1.6rem) 0 clamp(2.4rem, 5vw, 3.6rem); }

/* One-time code step. */
.otp-head { text-align: center; margin-bottom: 1.3rem; }
.otp-head .otp-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    font-size: 1.2rem; color: #fff; background: var(--grad-primary); box-shadow: var(--glow-warm); margin-bottom: .7rem; }
.otp-head h3 { margin-bottom: .35rem; }
.otp-head p { font-size: .88rem; color: var(--muted); }
.otp-head strong { color: var(--ink); }

.otp-input { text-align: center; font-family: 'Sora', sans-serif; font-size: 1.6rem !important;
    font-weight: 800; letter-spacing: .5em; text-indent: .5em; padding-block: .75rem !important; }
.otp-input::placeholder { color: rgba(124,58,237,.22); letter-spacing: .5em; }

/* The code step shown inside a form the visitor has already filled in. */
.otp-inline { padding: 1.1rem 1.2rem; border-radius: var(--radius-sm);
    background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.22); }
.otp-inline-head { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .9rem;
    font-size: .86rem; color: var(--muted); line-height: 1.5; }
.otp-inline-head strong { color: var(--ink); }
.otp-ic.sm { width: 26px; height: 26px; flex: 0 0 auto; font-size: .78rem; margin: 0; }
/* Locked fields read as a summary, not as something still to fill in. */
.form-grid input[readonly], .form-grid select:disabled { background: rgba(124,58,237,.04); color: var(--muted); cursor: default; }
.radio-pill input:disabled + span { opacity: .75; cursor: default; }

.otp-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem;
    margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.linkish { background: none; border: none; padding: 0; cursor: pointer; font: inherit;
    font-size: .8rem; font-weight: 700; color: var(--brand3); transition: opacity var(--t); }
.linkish:hover { opacity: .75; }
.linkish:disabled { color: var(--muted); cursor: default; opacity: .7; }

.steps-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 2rem; }
.steps-strip div { display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 30px;
    background: var(--glass-2); border: 1px solid var(--glass-brd); font-size: .82rem; font-weight: 600; color: var(--muted); }
.steps-strip span { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
    font-size: .7rem; font-weight: 800; color: #fff; background: var(--grad-primary); }

.app-head { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; align-items: flex-start;
    padding: 1.4rem 1.5rem; margin-bottom: 1.2rem; border-radius: var(--radius);
    background: var(--glass-2); border: 1px solid var(--glass-brd); box-shadow: var(--shadow); }
.app-head h3 { font-size: 1.35rem; margin: .1rem 0 .3rem; }
.app-head p { font-size: .88rem; color: var(--muted); }
.app-status { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.app-status small { font-size: .76rem; color: var(--muted); }
.signout-link { font-size: .78rem; font-weight: 700; color: var(--brand3); }

.status-chip { display: inline-block; padding: .3rem .8rem; border-radius: 20px; font-size: .74rem;
    font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.status-chip.pending { color: #b4791f; background: rgba(214,158,46,.16); }
.status-chip.ready   { color: var(--brand3); background: rgba(124,58,237,.14); }
.status-chip.done    { color: #0f9d70; background: rgba(15,157,112,.14); }
.cell-status.pending { color: #b4791f; }
.cell-status.ready   { color: var(--brand3); }
.cell-status.done    { color: #0f9d70; }

.progress-bar { width: 190px; height: 7px; border-radius: 7px; background: rgba(124,58,237,.14); overflow: hidden; }
.progress-bar span { display: block; height: 100%; border-radius: 7px; background: var(--grad-primary);
    transition: width .5s cubic-bezier(.2,.8,.3,1); }

.missing-box { padding: 1rem 1.2rem; border-radius: var(--radius-sm); margin-bottom: 1.2rem;
    background: rgba(214,158,46,.09); border: 1px solid rgba(214,158,46,.3); font-size: .88rem; }
.missing-box ul { margin: .5rem 0 0 1.1rem; display: grid; gap: .25rem; color: var(--muted); }
.form-note { padding: .8rem 1rem; border-radius: 12px; font-size: .88rem; font-weight: 600; margin-bottom: 1rem;
    color: #0b7a58; background: rgba(15,157,112,.1); border: 1px solid rgba(15,157,112,.28); }

/* Both cards share a row height. Content flows from the top — pinning the last
   element to the bottom instead opened a gap in the middle of the shorter card. */
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; }
.app-grid > .block { display: flex; flex-direction: column; }

.doc-upload-list { display: grid; gap: .7rem; margin-top: 1.2rem; }
.doc-upload { padding: .85rem 1rem; border-radius: 14px; background: rgba(124,58,237,.05);
    border: 1px solid rgba(124,58,237,.16); }
.doc-upload.is-done { background: rgba(15,157,112,.06); border-color: rgba(15,157,112,.26); }
.doc-upload.is-optional { background: rgba(120,113,145,.05); border-color: rgba(120,113,145,.18); }
.doc-upload-head { display: flex; gap: .6rem; align-items: flex-start; }
.doc-upload-ic { flex: 0 0 auto; }
.doc-upload-name { font-size: .9rem; font-weight: 700; color: var(--ink); }
.doc-upload-name em { font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); margin-left: .4rem; }
.doc-upload-name small { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); margin-top: .1rem; }
.doc-have { font-size: .78rem; color: var(--muted); margin: .5rem 0 0 1.7rem; }
.doc-have a { color: var(--brand3); font-weight: 700; }
.doc-upload-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0 0 1.7rem; }
.doc-upload-row input[type=file] { flex: 1 1 220px; min-width: 0; font-size: .8rem; color: var(--muted); }
.doc-upload-row .btn { padding: .45rem .9rem; font-size: .8rem; }

.final-block { margin-top: 1.4rem; }
.final-block .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.final-hint { display: block; margin-top: .6rem; font-size: .8rem; color: #b4791f; font-weight: 700; }
.final-done { font-weight: 700; color: #0b7a58; }
.row-link { font-weight: 700; color: var(--brand3); white-space: nowrap; }

@media (max-width: 820px) {
    .app-grid { grid-template-columns: 1fr; }
    .app-status { text-align: left; align-items: flex-start; }
}

/* ---------- Submissions list ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 1.2rem;
    padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--glass-2);
    border: 1px solid var(--glass-brd); box-shadow: var(--shadow); }
.filter-bar .field { flex: 0 1 180px; }
.filter-actions, .filter-exports { display: flex; gap: .6rem; flex-wrap: wrap; }
.filter-exports { margin-left: auto; }
.filter-bar .btn { padding: .62rem 1rem; font-size: .85rem; }
.filter-count { font-size: .88rem; color: var(--muted); margin-bottom: 1rem; }
.empty-note { padding: 2.4rem 1rem; text-align: center; color: var(--muted); font-size: .95rem;
    border: 1px dashed rgba(124,58,237,.3); border-radius: var(--radius); }
.cell-status { font-weight: 700; }
.cell-status.working  { color: #0f9d70; }
.cell-status.studying { color: var(--brand3); }
.cell-dash { color: rgba(120,113,145,.5); }

@media (max-width: 620px) {
    .form-grid { grid-template-columns: 1fr; }
    .filter-exports { margin-left: 0; }
}

.gallery-follow { text-align: center; color: var(--muted); font-size: .9rem; margin: -.4rem 0 1.6rem; }
.gallery-follow a { color: var(--brand3); font-weight: 700; }
.gallery-follow a:hover { color: var(--brand1); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: 1.2rem 0; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--glass-brd); }
table.data { width: 100%; border-collapse: collapse; background: rgba(255,255,255,.8); min-width: 520px; }
table.data th, table.data td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .92rem; }
table.data thead th { background: linear-gradient(135deg, var(--plum), var(--plum-2)); color: #fff; font-weight: 600; }
table.data tbody tr:nth-child(even) { background: rgba(238,240,250,.5); }
table.data tbody tr:hover { background: rgba(255,106,61,.08); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.stat { background: rgba(255,255,255,.08); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius); padding: 1.8rem; text-align: center; transition: transform var(--t); }
.stat:hover { transform: translateY(-6px); }
.stat b { display: block; font-family: 'Sora'; font-size: 2.4rem; line-height: 1;
    background: linear-gradient(120deg,#ffd06e,#ff6a8b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat small { color: #c7bff0; font-size: .85rem; }

/* ---------- Outcomes (Results That Speak) ---------- */
.lead-quote { text-align: center; font-family: 'Sora'; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-style: italic;
    font-weight: 600; margin: -.8rem 0 2rem;
    background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-sub { text-align: center; color: #c7bff0; margin: -.6rem 0 2rem; font-size: 1.02rem; font-style: italic; }
.outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.outcome { background: rgba(255,255,255,.08); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius); padding: 1.9rem 1.5rem; text-align: center; transition: transform var(--t); }
.outcome:hover { transform: translateY(-6px); }
.outcome .o-ic { display: block; font-size: 1.9rem; line-height: 1; margin-bottom: .8rem; }
.outcome h3 { font-family: 'Sora'; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; margin: 0;
    background: linear-gradient(120deg,#ffd06e,#ff6a8b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.outcome .o-quote { display: block; color: #fff; font-weight: 600; font-size: .95rem; margin: .6rem 0 .5rem; }
.outcome p { color: #c7bff0; font-size: .87rem; margin: 0; }

/* ---------- CTA ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--grad-primary); background-size: 200% 200%; color: #fff;
    border-radius: 28px; padding: clamp(2.2rem, 5vw, 3.6rem); text-align: center; box-shadow: var(--glow-warm); animation: ctaShift 8s ease infinite; }
@keyframes ctaShift { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 100%; } }
.cta-band::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.18); filter: blur(40px); top: -120px; left: -60px; }
.cta-band h2 { color: #fff; margin-bottom: .7rem; position: relative; }
.cta-band p { color: #fff; opacity: .94; max-width: 620px; margin: 0 auto 1.7rem; position: relative; }
.cta-band .hero-actions { position: relative; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; }
.contact-info { display: grid; gap: 1.1rem; }
.contact-info .ci { display: flex; gap: 1rem; align-items: flex-start; background: var(--glass-2); backdrop-filter: blur(14px);
    border: 1px solid var(--glass-brd); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); transition: transform var(--t); }
.contact-info .ci:hover { transform: translateX(6px); }
.contact-info .ci .ci-ic { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center;
    background: var(--grad-primary); color: #fff; font-size: 1.2rem; box-shadow: var(--glow-warm); }
.contact-info .ci h4 { margin-bottom: .2rem; }
.contact-info .ci p, .contact-info .ci a { color: var(--muted); font-size: .92rem; }
.contact-form { background: var(--glass-2); backdrop-filter: blur(14px); border: 1px solid var(--glass-brd); border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.field input, .field textarea, .field select { width: 100%; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: 12px;
    font-family: inherit; font-size: .92rem; background: rgba(255,255,255,.7); transition: border var(--t), box-shadow var(--t); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand2); box-shadow: 0 0 0 4px rgba(255,46,116,.14); }
.map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-top: 2rem; border: 1px solid var(--glass-brd); }
.map-embed iframe { width: 100%; height: 320px; border: 0; display: block; }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.gallery-grid .g-item { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 16px; cursor: pointer;
    box-shadow: var(--shadow); border: 1px solid var(--glass-brd); background: var(--bg-soft); }
.gallery-grid .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-grid .g-item:hover img { transform: scale(1.12); }
.gallery-grid .g-item::after { content: "🔍"; position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(255,46,116,.55), rgba(124,58,237,.55)); color: #fff; opacity: 0; transition: opacity var(--t); font-size: 1.4rem; }
.gallery-grid .g-item:hover::after { opacity: 1; }

.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(12,8,28,.94); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 4vh 4vw; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 14px; box-shadow: var(--shadow-lg); }
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next { position: absolute; background: rgba(255,255,255,.14); color: #fff; border: 0;
    cursor: pointer; width: 52px; height: 52px; border-radius: 50%; font-size: 1.4rem; transition: background var(--t); }
.lightbox .lb-close:hover, .lightbox .lb-prev:hover, .lightbox .lb-next:hover { background: var(--grad-primary); }
.lightbox .lb-close { top: 20px; right: 20px; }
.lightbox .lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(160deg, var(--plum), var(--plum-2)); color: #c5bce6; padding-top: 4rem; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: var(--grad-cool); filter: blur(110px); opacity: .25; top: -160px; left: -80px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2rem; padding-bottom: 2.6rem; position: relative; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 1.1rem; position: relative; padding-bottom: .6rem; }
.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; border-radius: 3px; background: var(--grad-warm); }
.footer-about p { color: #a99fd0; font-size: .9rem; margin-bottom: .8rem; }
.footer-affil { font-size: .82rem !important; background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 700; }
.footer-brand { margin-bottom: 1.2rem; display: flex; align-items: center; gap: .85rem; }
/* The footer keeps the gradient ring the header dropped — against the dark
   panel the white disc is what separates the dark-blue crest from the ground. */
.footer-brand .brand-emblem { width: 62px; height: 62px; border-radius: 50%; padding: 3px;
    background: conic-gradient(from 150deg, #ff6a3d, #ff2e74 30%, #7c3aed 58%, #2dd4bf 80%, #ff6a3d);
    box-shadow: 0 10px 26px rgba(124,58,237,.30); }
.footer-brand .brand-emblem img { width: 100%; height: 100%; border-radius: 50%; background: #fff;
    padding: 2px; object-view-box: inset(8.7% 9.1% 8.7% 8.4%); filter: none; }
.footer-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.footer-brand-text strong { font-family: 'Sora', sans-serif; font-size: 1.2rem; font-weight: 800; letter-spacing: .04em; color: #fff; }
.footer-brand-text > span { display: flex; align-items: center; gap: .4rem; font-size: .64rem; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase; color: #a99fd0; }
.footer-brand-text .brand-dot { background: var(--brand4); }
.footer-logo-img { height: 56px; width: auto; background: #fff; padding: 8px 12px; border-radius: 12px; display: block; box-shadow: var(--shadow); }
.footer-links, .footer-contact { list-style: none; display: grid; gap: .6rem; }
.footer-links a { color: #a99fd0; font-size: .9rem; transition: all var(--t); }
.footer-links a:hover { color: var(--brand4); padding-left: 6px; }
.footer-contact li { display: flex; gap: .6rem; font-size: .88rem; color: #a99fd0; align-items: flex-start; }
.footer-contact a { color: #a99fd0; }
.footer-contact a:hover { color: var(--brand4); }
.footer-contact .ic { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---------- Footer last-updated stamp ---------- */
.footer-updated { color: #8c84b3; font-size: .78rem; opacity: .85; }

/* ---------- Home-page announcement popup ---------- */
.popup-scrim { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
    padding: 4vh 4vw; background: rgba(12,8,28,.72); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .3s ease; }
.popup-scrim.show { opacity: 1; }
/* [hidden] must beat the class rule above, or the closed scrim stays a
   full-screen invisible layer that swallows every click on the page. */
.popup-scrim[hidden] { display: none; }
.popup-card { position: relative; max-width: min(560px, 92vw); max-height: 92vh;
    border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg);
    transform: translateY(18px) scale(.97); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.popup-scrim.show .popup-card { transform: none; }
.popup-card img { display: block; width: 100%; height: auto; max-height: 92vh; object-fit: contain; }
.popup-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0;
    border-radius: 50%; cursor: pointer; font-size: 1.4rem; line-height: 1; color: #fff;
    background: rgba(12,8,28,.6); backdrop-filter: blur(6px); transition: var(--t); }
.popup-close:hover { background: var(--saffron); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
    .popup-scrim, .popup-card, .popup-close { transition: none; }
}

.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); position: relative; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 1.3rem 0; flex-wrap: wrap; gap: .5rem 1.4rem; }
.footer-bottom p { color: #8c84b3; font-size: .82rem; }
/* Third-party visitor counter — the widget ships a bare odometer image, so it
   gets a label and a fixed height to sit on the copyright line. */
.footer-counter { display: inline-flex; align-items: center; gap: .5rem; color: #8c84b3;
    font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    transition: color var(--t); }
.footer-counter:hover { color: var(--brand4); }
.footer-counter img { height: 22px; width: auto; display: block; border-radius: 4px; }

/* ---------- WhatsApp float ---------- */
/* Sits above the back-to-top button in the same corner, so the two never
   overlap whether or not the page has been scrolled. */
.wa-float { position: fixed; right: 22px; bottom: 84px; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; background: #25d366; z-index: 91;
    box-shadow: 0 10px 26px rgba(37,211,102,.42); transition: transform var(--t), box-shadow var(--t); }
.wa-float:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 14px 30px rgba(37,211,102,.55); }
.wa-float:focus-visible { outline: 3px solid rgba(37,211,102,.45); outline-offset: 3px; }
/* A quiet pulse so it reads as a live channel, stilled for anyone who asked
   for less motion. */
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(37,211,102,.6); animation: waPulse 2.4s ease-out infinite; }
@keyframes waPulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(1.45); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; } }
@media (max-width: 560px) { .wa-float { right: 16px; bottom: 76px; width: 48px; height: 48px; } }

/* ---------- Back to top + scroll progress ---------- */
.back-to-top { position: fixed; right: 22px; bottom: 22px; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--grad-primary); color: #fff; font-size: 1.2rem; box-shadow: var(--glow-warm); opacity: 0; visibility: hidden;
    transform: translateY(14px) scale(.8); transition: all var(--t); z-index: 90; }
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { transform: translateY(-4px) scale(1.05); }
.scroll-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0; z-index: 300; background: var(--grad-primary); box-shadow: var(--glow-warm); transition: width .1s linear; }

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

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .cards.c4 { grid-template-columns: repeat(2, 1fr); }
    .stats, .outcomes { grid-template-columns: repeat(2, 1fr); }
    .quick-strip .container { grid-template-columns: repeat(2, 1fr); }
    .message-block { grid-template-columns: 1fr; }
    .message-photo { max-width: 250px; }
}
@media (max-width: 1024px) {
    .nav-toggle { display: flex; }
    .main-nav { position: fixed; top: 0; right: 0; bottom: auto; left: auto; height: 100vh; height: 100dvh;
        width: min(340px, 86%); background: var(--glass-2); backdrop-filter: blur(22px);
        box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--t); padding: 1.5rem 1rem; overflow-y: auto; z-index: 200; }
    .main-nav.open { transform: translateX(0); }
    .main-nav ul { flex-direction: column; align-items: stretch; gap: .15rem; }
    .main-nav > ul > li { display: block; }
    .main-nav > ul > li > a { display: flex; justify-content: space-between; padding: .85rem .7rem; font-size: .95rem; }
    .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 .4rem 1rem; display: none; }
    .has-dropdown.open .dropdown { display: block; }
    .nav-cta { margin-top: .6rem; }
    .btn-apply { display: block; text-align: center; margin: 0; }
}
@media (max-width: 820px) {
    .about-grid, .vm-grid, .contact-grid { grid-template-columns: 1fr; }
    .cards.c2, .cards.c3 { grid-template-columns: 1fr; }
    .about-badge { right: 12px; }
    .form-row { grid-template-columns: 1fr; }
    .quick-strip { margin-top: 1.5rem; }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .cards.c4, .stats, .quick-strip .container, .gallery-grid { grid-template-columns: 1fr 1fr; }
    .outcomes { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { justify-content: center; }
}

.nav-scrim { position: fixed; inset: 0; background: rgba(12,8,28,.55); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: var(--t); z-index: 99; }
.nav-scrim.show { opacity: 1; visibility: visible; }

/* ==========================================================
   2026 refresh — hero polish, ticker, spotlight, testimonials
   ========================================================== */

/* ---------- Hero entrance + extras ---------- */
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-inner > * { animation: heroUp .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-inner > *:nth-child(1) { animation-delay: .05s; }
.hero-inner > *:nth-child(2) { animation-delay: .15s; }
.hero-inner > *:nth-child(3) { animation-delay: .25s; }
.hero-inner > *:nth-child(4) { animation-delay: .35s; }
.hero-inner > *:nth-child(5) { animation-delay: .45s; }
.hero-inner > *:nth-child(6) { animation-delay: .55s; }
.hero-inner > *:nth-child(7) { animation-delay: .65s; }

.hero-stats div { position: relative; padding: 0 1.1rem; }
.hero-stats div + div::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(255,255,255,.22); }

/* carousel dots sit clear of the overlapping quick strip */
.hero-dots { bottom: 62px; }

/* ---------- Announcements ticker ---------- */
.ticker-band { position: relative; margin-top: 2.6rem; overflow: hidden;
    background: linear-gradient(90deg, var(--plum), var(--plum-2) 55%, #2b1553); }
.ticker-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,106,61,.22), transparent 28%, transparent 72%, rgba(124,58,237,.3)); }
.ticker-wrap { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; position: relative; z-index: 1; }
.ticker-tag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; background: var(--grad-primary); color: #fff;
    font-size: .7rem; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
    padding: .36rem .85rem; border-radius: 30px; box-shadow: var(--glow-warm); }
.ticker-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: badgeBlink 1.4s ease-in-out infinite; }
.ticker-viewport { flex: 1 1 auto; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ticker-track { display: flex; width: max-content; animation: tickerMove 36s linear infinite; }
.ticker-band:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; }
.ticker-item { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding: 0 1.9rem;
    font-size: .86rem; color: #d9d2f5; position: relative; }
.ticker-item i { font-style: normal; }
.ticker-item::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.3); }
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-more { flex: 0 0 auto; font-size: .78rem; font-weight: 700; white-space: nowrap;
    background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Programme spotlight ---------- */
.spotlight { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: center;
    background: var(--glass-2); backdrop-filter: blur(16px); border: 1px solid var(--glass-brd); border-radius: 30px;
    padding: clamp(1.6rem, 3.4vw, 3rem); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.spotlight::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
    background: var(--grad-primary); filter: blur(120px); opacity: .18; top: -170px; left: -130px; }
.sp-body { position: relative; }
.sp-body h2 { margin: .2rem 0 .9rem; }
.sp-body > p { color: var(--muted); margin-bottom: 1.5rem; }
.sp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.6rem; }
.sp-fact { background: rgba(255,255,255,.72); border: 1px solid var(--glass-brd); border-radius: 16px;
    padding: .85rem .6rem; text-align: center; transition: transform var(--t), box-shadow var(--t); }
.sp-fact:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.sp-fact b { display: block; font-family: 'Sora', sans-serif; font-size: 1.12rem; line-height: 1.2;
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-fact small { color: var(--muted); font-size: .71rem; }
.sp-list { list-style: none; display: grid; gap: .65rem; margin-bottom: 1.7rem; }
.sp-list li { position: relative; padding-left: 1.75rem; font-size: .94rem; }
.sp-list li::before { content: "➜"; position: absolute; left: 0; top: 0; font-weight: 800;
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-media { position: relative; }
.sp-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-lg); }
.sp-float { position: absolute; left: -18px; bottom: 28px; background: var(--grad-primary); color: #fff;
    border-radius: 20px; padding: 1rem 1.2rem; text-align: center; box-shadow: var(--glow-warm); animation: floatY 4.5s ease-in-out infinite; }
.sp-float b { display: block; font-family: 'Sora', sans-serif; font-size: 1.9rem; line-height: 1; }
.sp-float small { display: block; font-size: .72rem; line-height: 1.25; margin-top: .2rem; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

/* ---------- Testimonials ---------- */
.quote-card { background: var(--glass-2); backdrop-filter: blur(14px); border: 1px solid var(--glass-brd);
    border-radius: var(--radius); padding: 2rem 1.9rem 1.6rem; box-shadow: var(--shadow); position: relative; overflow: hidden;
    transition: transform var(--t), box-shadow var(--t); }
.quote-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad-primary); }
.quote-card:hover { transform: translateY(-9px); box-shadow: var(--glow); }
.qc-mark { position: absolute; top: .4rem; right: 1.3rem; font-family: 'Sora', sans-serif; font-size: 5rem; line-height: 1; opacity: .22;
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote-card blockquote { position: relative; color: var(--muted); font-size: .95rem; margin-bottom: 1.3rem; }
.quote-card figcaption { display: flex; align-items: center; gap: .85rem; border-top: 2px dashed var(--line); padding-top: 1rem; }
.qc-avatar { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
    font-family: 'Sora', sans-serif; font-weight: 800; font-size: .92rem; color: #fff;
    background: var(--grad-primary); box-shadow: var(--glow-warm); }
.qc-who { display: flex; flex-direction: column; line-height: 1.35; }
.qc-who b { font-size: .95rem; }
.qc-who small { color: var(--muted); font-size: .78rem; }

/* ---------- Refresh responsive ---------- */
/* On wide screens the top bar + nav get their own, slightly wider band
   so the full brand lockup and the whole menu fit on one line. */
@media (min-width: 1600px) {
    .topbar-inner, .header-inner { width: min(1400px, 94%); margin-inline: auto; }
}
@media (min-width: 1025px) and (max-width: 1599px) {
    .brand-emblem { height: 66px; }
    /* The Estd. pill is what the nav can't afford here — the sub-line stays,
       shrunk, because it names the college. */
    .brand-estd { display: none; }
    .brand-text strong { font-size: .96rem; }
    .brand-sub { font-size: .53rem; letter-spacing: .8px; }
    .main-nav > ul > li > a { padding: .5rem .4rem; font-size: .78rem; }
    .btn-apply { padding: .52rem .9rem; font-size: .78rem; }
}
/* Under ~1200px the ten nav items plus Apply Now outgrow the row, and the
   brand — which can't shrink past its nowrap text — used to overlap them.
   Trim both to keep the header on one line. */
@media (min-width: 1025px) and (max-width: 1199px) {
    .brand-emblem { height: 62px; }
    /* Even the name alone can't fit beside the full menu here — the brand is
       the crest only, as it is on phones. */
    .brand-text { display: none; }
    .main-nav > ul > li > a { padding: .5rem .3rem; font-size: .74rem; }
    .btn-apply { padding: .5rem .8rem; font-size: .74rem; }
}
@media (max-width: 1024px) {
}
@media (max-width: 900px) {
    .spotlight { grid-template-columns: 1fr; }
    .sp-media img { aspect-ratio: 16/10; }
    .sp-float { left: auto; right: 16px; bottom: 16px; }
}
@media (max-width: 820px) {
    .hero-dots { bottom: 22px; }   /* quick strip no longer overlaps the hero here */
    .sp-facts { grid-template-columns: repeat(2, 1fr); }
    .ticker-more { display: none; }
    .hero-stats div { padding: 0 .7rem; }
}
@media (max-width: 620px) {
    /* The topbar wraps to three rows here, so it keeps the smaller type and the
       clock drops its date — the time alone still fits beside the icons. */
    .topbar { font-size: .82rem; }
    .clk-date, .clk-sep { display: none; }
    .topbar-social .social-link { width: 30px; height: 30px; }
    .brand-emblem { height: 58px; }
    .brand-text strong { font-size: 1rem; letter-spacing: .02em; }
    .brand-sub { font-size: .6rem; letter-spacing: .9px; }
    .brand-city, .brand-estd { display: none; }
    .ticker-tag { font-size: .64rem; padding: .3rem .65rem; }
    .footer-brand .brand-emblem { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-inner > *, .ticker-track, .sp-float, .hero-badge.blink { animation: none !important; }
    .hero-inner > * { opacity: 1; transform: none; }
}

/* ===== HOME PHOTO GALLERY ===== */
.home-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.hg-item { display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 4/3; box-shadow: 0 8px 24px rgba(20,12,45,.12); }
.hg-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hg-item:hover img { transform: scale(1.08); }
@media (max-width: 900px) { .home-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .home-gallery { grid-template-columns: repeat(2, 1fr); gap: .6rem; } }