/* ============================================================================
   ILAHOK Academy — public frontend stylesheet (Module 5).

   Self-contained, dependency-free CSS (no Bootstrap/CDN) to honour the
   performance-first + shared-hosting rules (Sections 40-42): one small file,
   no build step, CSP-safe, works offline. Provides a responsive grid, cards,
   navigation, hero, forms, glassmorphism accents, smooth animations, and full
   light/dark theming. Brand colours are injected as CSS variables from the
   admin Theme Manager (Section 17); everything else derives from them.
   ============================================================================ */

/* --- Design tokens ------------------------------------------------------- */
:root {
    /* --brand / --brand-dark / --accent / --radius are injected inline from
       settings; these are fallbacks if that block is ever missing. */
    --brand:        #4f46e5;
    --brand-dark:   #4338ca;
    --accent:       #06b6d4;
    --radius:       14px;

    --ink:          #0f172a;
    --body:         #334155;
    --muted:        #64748b;
    --bg:           #ffffff;
    --bg-soft:      #f8fafc;
    --bg-mute:      #f1f5f9;
    --card:         #ffffff;
    --border:       #e2e8f0;
    --ok:           #16a34a;
    --danger:       #dc2626;
    --shadow-sm:    0 1px 2px rgba(15,23,42,.06);
    --shadow:       0 6px 24px rgba(15,23,42,.08);
    --shadow-lg:    0 20px 45px rgba(15,23,42,.14);
    --header-h:     82px;
    --maxw:         1180px;
}

html[data-theme="dark"] {
    --ink:      #f1f5f9;
    --body:     #cbd5e1;
    --muted:    #94a3b8;
    --bg:       #0b1120;
    --bg-soft:  #0f172a;
    --bg-mute:  #131c31;
    --card:     #131c31;
    --border:   #24304a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:   0 6px 24px rgba(0,0,0,.45);
    --shadow-lg: 0 20px 45px rgba(0,0,0,.55);
}

/* Respect OS preference on first load when no explicit choice was stored. */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --ink:#f1f5f9; --body:#cbd5e1; --muted:#94a3b8; --bg:#0b1120;
        --bg-soft:#0f172a; --bg-mute:#131c31; --card:#131c31; --border:#24304a;
    }
}

* { box-sizing: border-box; }

/* overflow-x: clip is a safety net against any element that overflows the
   viewport width (which shows as a blank band on the right in desktop-mode /
   tablet). Unlike overflow:hidden it does NOT create a scroll container, so
   position: sticky on the header still works. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
    margin: 0;
    font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color: var(--body);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --- Ambient animated background ---------------------------------------- */
/* A subtle brand-tinted gradient fixed behind all content that slowly and
   smoothly drifts. Derives entirely from theme variables, so it adapts to the
   admin brand colours and to light/dark automatically. Kept low-opacity so
   text and cards stay legible; honours prefers-reduced-motion below. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 60% at 18% 18%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
        radial-gradient(55% 55% at 85% 12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
        radial-gradient(65% 65% at 50% 100%, color-mix(in srgb, var(--brand-dark) 12%, transparent), transparent 62%);
    background-size: 200% 200%;
    animation: bgShift 26s ease-in-out infinite;
    transition: background .4s ease; /* smooth swap on theme change */
}
@keyframes bgShift {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0 0 .5em; font-family: var(--font-heading, inherit); }
h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p  { margin: 0 0 1rem; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.sr-only, .skip-link {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
    position: fixed; top: 8px; left: 8px; width: auto; height: auto;
    padding: 10px 16px; background: var(--brand); color: #fff;
    border-radius: 8px; z-index: 200; clip: auto;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 820px; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--brand); color: #fff; border: 1px solid transparent;
    padding: 11px 20px; border-radius: 10px; font-weight: 600; font-size: 15px;
    cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
    line-height: 1.1;
}
.btn:hover { background: var(--brand-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 14px 26px; font-size: 16px; border-radius: 12px; }
.btn--sm { padding: 8px 14px; font-size: 14px; }
.btn--block { display: flex; width: 100%; }
.btn--ghost {
    background: transparent; color: var(--ink); border-color: var(--border);
}
.btn--ghost:hover { background: var(--bg-mute); color: var(--ink); box-shadow: none; }

/* --- Header / nav -------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); }
.brand-mark {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff;
    font-size: 13px; font-weight: 800; letter-spacing: .02em;
}
.brand-name { font-size: 16px; }

.main-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.nav-li { position: relative; }
.nav-link {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 9px 12px; border-radius: 8px; color: var(--body); font-weight: 600; font-size: 15px;
}
.nav-link:hover, .nav-link.is-active { color: var(--ink); background: var(--bg-mute); }
.caret { font-size: 10px; opacity: .7; }

.mega {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 540px;
    /* Solid, opaque panel (kept opaque even under the glass theme). */
    background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: var(--shadow-lg); padding: 16px; opacity: 0; visibility: hidden;
    transform: translateY(6px); transition: .18s ease; z-index: 70;
}
body[data-theme-style="glass"] .mega { background: var(--card); backdrop-filter: none; }
.nav-li.has-mega:hover .mega, .nav-li.has-mega:focus-within .mega {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Each category rendered as a beautiful card button. A rotating per-card accent
   (--mi) plus a real line-icon keep neighbouring cards from reading as clones. */
.mega-link {
    --mi: var(--brand);
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 12px;
    background: var(--bg-soft); border: 1px solid var(--border);
    color: var(--ink); font-weight: 600;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
/* Soft wash of the card's own accent, revealed on hover for depth. */
.mega-link::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mi) 10%, transparent), transparent 60%);
    opacity: 0; transition: opacity .16s ease;
}
.mega-link:nth-child(6n+1) { --mi: #4f46e5; }
.mega-link:nth-child(6n+2) { --mi: #06b6d4; }
.mega-link:nth-child(6n+3) { --mi: #ec4899; }
.mega-link:nth-child(6n+4) { --mi: #f59e0b; }
.mega-link:nth-child(6n+5) { --mi: #10b981; }
.mega-link:nth-child(6n+6) { --mi: #8b5cf6; }
.mega-ico {
    flex: none; width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--mi), color-mix(in srgb, var(--mi) 60%, #000));
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mi) 38%, transparent);
    transition: transform .16s ease;
}
.mega-ico svg { width: 22px; height: 22px; }
.mega-text { flex: 1; position: relative; }
.mega-arrow { position: relative; opacity: 0; transform: translateX(-4px); color: var(--mi); font-weight: 700; transition: .16s ease; }
.mega-link:hover {
    background: var(--card); border-color: color-mix(in srgb, var(--mi) 55%, var(--border));
    transform: translateY(-2px); box-shadow: var(--shadow);
}
.mega-link:hover::before { opacity: 1; }
.mega-link:hover .mega-ico { transform: scale(1.06) rotate(-3deg); }
.mega-link:hover .mega-arrow { opacity: 1; transform: translateX(0); }
.mega-all {
    display: block; text-align: center; margin-top: 12px;
    padding: 12px 14px; border-radius: 12px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 30%, transparent);
    transition: filter .16s ease, transform .16s ease;
}
.mega-all:hover { filter: brightness(1.06); transform: translateY(-1px); color: #fff; }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-search { display: flex; align-items: center; background: var(--bg-mute); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.nav-search input { border: 0; background: transparent; padding: 8px 12px; font-size: 14px; color: var(--ink); width: 150px; }
.nav-search input:focus { outline: none; }
.nav-search button { border: 0; background: transparent; padding: 8px 12px; cursor: pointer; color: var(--muted); font-size: 15px; }
.theme-toggle {
    border: 1px solid var(--border); background: var(--card); color: var(--ink);
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 16px;
}
.theme-toggle:hover { background: var(--bg-mute); }

.nav-toggle, .nav-burger { display: none; }
.nav-burger { flex-direction: column; gap: 5px; width: 42px; height: 40px; border-radius: 9px; align-items: center; justify-content: center; cursor: pointer; margin-left: auto; }
.nav-burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: none;
    padding: clamp(48px, 7vw, 96px) 0; }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
/* Grid items default to min-width:auto, which refuses to shrink below their
   content and lets the hero (media/copy) push wider than the viewport on very
   narrow phones. min-width:0 lets the tracks shrink to fit. */
.hero-inner > * { min-width: 0; }
.eyebrow { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
/* Colourful hero heading — gradient text built from the admin theme palette,
   so it follows any brand-colour change and adapts to dark mode. */
.hero-copy h1 {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--brand); /* fallback if background-clip is unsupported */
    background: linear-gradient(96deg,
        var(--brand-dark) 0%,
        var(--brand) 30%,
        var(--accent) 70%,
        var(--brand) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-copy .lead { font-size: 1.15rem; color: var(--body); max-width: 44ch; }
.lead { font-size: 1.1rem; color: var(--body); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.hero-search { display: flex; gap: 8px; max-width: 460px; margin-top: 8px; }
.hero-search input { flex: 1; min-width: 0; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-size: 15px; }
.hero-search input:focus { outline: 2px solid var(--brand); border-color: var(--brand); }

/* Hero image (right column). Framed dark showcase card with a brand glow. */
.hero-media { position: relative; order: 1; }
.hero-img {
    display: block; width: 100%; height: auto;
    /* Transparent art (black background keyed out) — floats on the page with a
       soft brand glow tracing the silhouette instead of a hard card. */
    filter: drop-shadow(0 16px 34px color-mix(in srgb, var(--brand) 32%, transparent));
}

.hero-art { position: relative; min-height: 260px; }
.glass-card {
    position: absolute; background: color-mix(in srgb, var(--card) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    backdrop-filter: blur(10px); border-radius: 16px; padding: 16px 20px;
    font-weight: 700; color: var(--ink); box-shadow: var(--shadow);
    animation: float 6s ease-in-out infinite;
}
.gc-1 { top: 6%;  left: 6%; }
.gc-2 { top: 44%; right: 4%; animation-delay: -2s; }
.gc-3 { bottom: 6%; left: 22%; animation-delay: -4s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* --- Sections ------------------------------------------------------------ */
.section { padding: clamp(26px, 4vw, 48px) 0; }
.section--muted { background: var(--bg-soft); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-link { font-weight: 600; white-space: nowrap; }

.page-hero { padding: clamp(20px, 3vw, 32px) 0 clamp(12px, 2vw, 18px); background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--brand); }
.page-hero-lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--muted); max-width: 68ch; margin-top: 10px; }

/* Page Builder (Section 16): a page with a banner image renders a photo hero. */
.page-hero--banner {
    /* Brand-gradient fallback so the white text is always readable even when no
       banner image is set (e.g. the About hero). A Page-Builder page with a
       banner sets an inline background-image that overrides this. */
    background-image: linear-gradient(135deg, var(--brand), var(--brand-dark));
    background-color: var(--brand-dark);
    background-size: cover; background-position: center; border-bottom: 0;
    padding: clamp(34px, 6vw, 72px) 0 clamp(24px, 4vw, 44px); color: #fff;
}
.page-hero--banner h1 { color: #fff; }
.page-hero--banner .crumbs, .page-hero--banner .crumbs a,
.page-hero--banner .page-hero-lead, .page-hero--banner .muted { color: rgba(255,255,255,.85); }
.page-hero--banner .crumbs a:hover { color: #fff; }

/* --- Grids --------------------------------------------------------------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.course-grid--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.course-grid--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.instructor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.blog-grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.cat-grid--lg { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* Testimonials: a single-row, swipeable rail on every screen size. Cards are
   medium-sized so ~4-5 peek into view at once and the rest scroll horizontally
   (drag / trackpad / scrollbar), instead of wrapping into a tall 2-row grid. */
.quote-grid {
    display: flex; gap: 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 4px 2px 14px;
    scrollbar-width: thin; -ms-overflow-style: none;
}
.quote-grid > * { flex: 0 0 auto; width: 260px; scroll-snap-align: start; }

/* Phone: homepage card rails (featured / popular / latest / internships /
   instructors) become swipeable, snap-scrolling sliders so the page isn't one
   tall stack the user has to scroll past. Scoped to the bare .course-grid —
   the full listing pages (.course-grid--3/--4) and laptop/tablet are untouched. */
@media (max-width: 640px) {
    .course-grid:not(.course-grid--3):not(.course-grid--4),
    .quote-grid,
    .blog-grid:not(.blog-grid--3) {
        display: flex; grid-template-columns: none;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
        gap: 14px; margin: 0 -20px; padding: 4px 20px 10px;
        /* Align the leading card with the section heading (which is inset 16px by
           its accent tick) instead of hugging the page gutter, so it doesn't read
           as touching the screen edge. scroll-padding keeps it aligned on swipe-back. */
        scroll-padding-left: 16px;
        scrollbar-width: none; -ms-overflow-style: none;   /* Firefox / old Edge */
    }
    .course-grid:not(.course-grid--3):not(.course-grid--4) > *:first-child,
    .quote-grid > *:first-child,
    .blog-grid:not(.blog-grid--3) > *:first-child { margin-left: 16px; }
    .course-grid:not(.course-grid--3):not(.course-grid--4)::-webkit-scrollbar,
    .quote-grid::-webkit-scrollbar,
    .blog-grid:not(.blog-grid--3)::-webkit-scrollbar { display: none; }   /* Chrome / Safari */
    .course-grid:not(.course-grid--3):not(.course-grid--4) > *,
    .quote-grid > *,
    .blog-grid:not(.blog-grid--3) > * {
        flex: 0 0 auto; width: 80vw; max-width: 300px; scroll-snap-align: start;
    }
    .blog-grid:not(.blog-grid--3) > * { width: 84vw; max-width: 330px; }
    /* Slider cards must stay visible: the reveal observer only fires on vertical
       entry, so cards sitting off-screen horizontally would otherwise stay hidden. */
    .course-grid:not(.course-grid--3):not(.course-grid--4) > .reveal,
    .quote-grid > .reveal,
    .blog-grid:not(.blog-grid--3) > .reveal {
        opacity: 1; transform: none;
    }
}

/* --- Feature cards (Why Choose Us) --------------------------------------- */
/* Same responsive rule as every other grid (auto-fit + minmax) so the cards
   reflow to 3 / 2 / 1 columns identically on laptop, tablet and phone. */
.section-sub { color: var(--muted); max-width: 62ch; margin: 12px auto 0; font-size: clamp(15px, 1.6vw, 17px); }
.eyebrow--pill {
    background: color-mix(in srgb, var(--brand) 10%, var(--card)); color: var(--brand);
    padding: 5px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
}

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
/* How-it-works: keep the four steps on one row, reflowing to 2×2 then a single column on narrow screens. */
.feature-grid--steps { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .feature-grid--steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
    /* Phone: icon/number badge + title share one line, description full-width
       below — no wasted left indent, so each card stays tight with less height.
       Covers both "Why choose us" (.feature-grid) and "How it works"
       (.feature-grid--steps, which also carries .feature-grid). */
    .feature-grid { grid-template-columns: 1fr; gap: 10px; }
    .feature-grid .feature-card:not(.value-card) {
        display: flex; flex-wrap: wrap; align-items: center;
        column-gap: 12px; row-gap: 6px; padding: 14px 16px;
    }
    .feature-grid .feature-card:not(.value-card) .feature-icon {
        width: 34px; height: 34px; margin: 0; border-radius: 9px; font-size: 15px;
    }
    .feature-grid .feature-card:not(.value-card) .feature-title { flex: 1; min-width: 0; margin: 0; font-size: 1rem; }
    .feature-grid .feature-card:not(.value-card) .feature-desc { flex-basis: 100%; margin: 0; font-size: .9rem; }
}
.feature-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 26px 24px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.feature-icon {
    width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
    font-size: 22px; margin-bottom: 16px; color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
.feature-icon.is-blue   { background: linear-gradient(135deg, #4f46e5, #4338ca); }
.feature-icon.is-violet { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.feature-icon.is-amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.feature-icon.is-green  { background: linear-gradient(135deg, #16a34a, #15803d); }
.feature-icon.is-cyan   { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.feature-icon.is-pink   { background: linear-gradient(135deg, #ec4899, #db2777); }
.feature-title { font-size: 1.08rem; margin: 0 0 8px; }
.feature-desc  { color: var(--body); margin: 0; font-size: .95rem; }

/* Core values: three balanced, centre-aligned cards with a coloured top accent.
   Fixes the old 4-column `--steps` grid that left the 3rd column empty. */
.feature-grid--values { grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) {
    .feature-grid--values { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
.value-card { position: relative; text-align: center; padding: 36px 28px 30px; overflow: hidden; }
.value-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, transparent, var(--c, var(--brand)), transparent);
    opacity: .85;
}
.value-card .feature-icon {
    margin: 6px auto 20px; width: 60px; height: 60px; border-radius: 16px; font-size: 27px;
    box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--c, var(--brand)) 70%, transparent);
}
.value-card .feature-title { font-size: 1.18rem; margin-bottom: 10px; }
.value-card .feature-desc  { max-width: 32ch; margin-inline: auto; }
.value-card:hover::before { opacity: 1; }
@media (max-width: 560px) {
    /* Phone: drop the tall centred design and reuse the compact row layout —
       icon + title on one line, description full-width below — so each value
       card matches the plain "Why choose us" cards and stays short.
       Placed AFTER the base rules above so it wins (media queries add no specificity). */
    .value-card {
        display: flex; flex-wrap: wrap; align-items: center; text-align: left;
        column-gap: 12px; row-gap: 6px; padding: 14px 16px;
    }
    .value-card .feature-icon {
        margin: 0; width: 34px; height: 34px; border-radius: 9px; font-size: 15px;
        box-shadow: none; flex: 0 0 auto;
    }
    .value-card .feature-title { flex: 1; min-width: 0; margin: 0; font-size: 1rem; }
    .value-card .feature-desc { flex-basis: 100%; max-width: none; margin: 0; font-size: .9rem; text-align: left; }
    .value-card::before { display: none; }
}

/* --- Course card --------------------------------------------------------- */
.course-card {
    position: relative;
    display: flex; flex-direction: column; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* Whole-card clickable: the title link is stretched to cover the entire card
   (accessible single link to the detail page). Nested links that go elsewhere
   (category, Apply) sit above the overlay so they keep working. */
.course-card .course-title a::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
}
.course-card .course-cat,
.course-card .course-foot .btn { position: relative; z-index: 2; }
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.course-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--bg-mute), var(--border)); overflow: hidden; }
.course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: var(--muted); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, var(--card)), color-mix(in srgb, var(--accent) 16%, var(--card))); }
.ribbon { position: absolute; top: 10px; left: 10px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: .03em; }
.course-body { padding: 14px 16px 6px; flex: 1; }
.course-cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.course-title { margin: 6px 0; font-size: 1.02rem; line-height: 1.35; }
.course-title a { color: var(--ink); }
.course-title a:hover { color: var(--brand); }
.course-sub { font-size: .88rem; color: var(--muted); margin: 0 0 10px; }
.course-meta { display: flex; align-items: center; gap: 10px; font-size: .82rem; flex-wrap: wrap; }
.level-tag { text-transform: capitalize; }
.course-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--border); margin-top: 8px; }
.stars { color: #f59e0b; letter-spacing: 1px; font-size: .9rem; }
.price { font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.price--free { color: var(--ok); }
.price--old { color: var(--muted); text-decoration: line-through; font-weight: 500; font-size: .9rem; }
.enrolled { font-size: .8rem; }

/* --- Category tiles ------------------------------------------------------ */
/* A rotating per-tile accent (--ct) + a filled gradient icon badge stop
   neighbouring tiles from reading as flat, identical clones on desktop. */
.cat-tile {
    --ct: var(--brand);
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 6px; padding: 20px 18px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.cat-tile:nth-child(6n+1) { --ct: #4f46e5; }
.cat-tile:nth-child(6n+2) { --ct: #06b6d4; }
.cat-tile:nth-child(6n+3) { --ct: #ec4899; }
.cat-tile:nth-child(6n+4) { --ct: #f59e0b; }
.cat-tile:nth-child(6n+5) { --ct: #10b981; }
.cat-tile:nth-child(6n+6) { --ct: #8b5cf6; }
/* Corner glow of the tile's own accent, revealed on hover for depth. */
.cat-tile::after {
    content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 120px;
    background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ct) 22%, transparent), transparent 70%);
    opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.cat-tile:hover {
    transform: translateY(-4px); box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--ct) 45%, var(--border));
}
.cat-tile:hover::after { opacity: 1; }
.cat-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; margin-bottom: 8px;
    background: linear-gradient(135deg, var(--ct), color-mix(in srgb, var(--ct) 60%, #000));
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ct) 34%, transparent);
    transition: transform .16s ease;
}
.cat-icon svg { width: 26px; height: 26px; }
.cat-tile:hover .cat-icon { transform: scale(1.06) rotate(-3deg); }
.cat-name { font-weight: 700; color: var(--ink); position: relative; }
.cat-desc { font-size: .85rem; position: relative; }
.cat-count {
    position: relative; font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: color-mix(in srgb, var(--ct) 70%, var(--muted));
}

/* --- Category slider (homepage): swipe on touch, arrows on desktop ------- */
.cat-slider { position: relative; }
.cat-track {
    display: flex; gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 12px 2px;                 /* room for the hover-lift */
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* old Edge/IE */
}
.cat-track::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.cat-track > .cat-tile { flex: 0 0 auto; width: 210px; scroll-snap-align: start; }
/* Slider tiles must stay visible even though the reveal observer tags them
   (they can sit outside the viewport horizontally). Higher specificity wins. */
.cat-track > .cat-tile.reveal { opacity: 1; transform: none; }

.cat-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 40px; height: 40px; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--border); box-shadow: var(--shadow);
    font-size: 22px; line-height: 1; cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.cat-nav:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.cat-nav--prev { left: -8px; }
.cat-nav--next { right: -8px; }
.cat-nav[disabled] { opacity: 0; pointer-events: none; }   /* fade out at the ends */

@media (max-width: 640px) {
    .cat-track > .cat-tile { width: 44vw; }
    .cat-nav { display: none; }         /* phones: swipe instead of arrows */
}

/* --- Auto-scroll marquee: single-row continuous strip (homepage showcases) - */
.marquee {
    overflow: hidden;
    /* fade the edges so cards glide in/out instead of clipping hard */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.marquee-track {
    display: flex;
    align-items: stretch;
    gap: 22px;
    width: max-content;
    padding: 12px 24px;              /* room for the card hover-lift + edge breathing space */
    animation: marquee-scroll 40s linear infinite;
}
/* pause so a card can actually be read + clicked through to its full page */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
/* each duplicated set is wrapped in a group; display:contents keeps cards as flex items */
.marquee-group { display: contents; }
.marquee-track > .marquee-group > * { flex: 0 0 auto; box-sizing: border-box; }
/* fixed per-card widths → ~4–6 cards on a laptop */
.marquee .cat-tile        { width: 220px; }
.marquee .course-card     { width: 300px; }
.marquee .instructor-tile { width: 240px; }
.marquee .blog-card       { width: 340px; }
/* Strip glides left→right; the second (duplicated) group makes the loop seamless. */
@keyframes marquee-scroll {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
@media (max-width: 900px) {
    .marquee .cat-tile        { width: 200px; }
    .marquee .course-card     { width: 270px; }
    .marquee .blog-card       { width: 300px; }
}
@media (max-width: 640px) {           /* ~1.5–3 cards on a phone */
    .marquee-track { gap: 16px; }
    .marquee .cat-tile        { width: 42vw; }
    .marquee .course-card     { width: 74vw; }
    .marquee .instructor-tile { width: 54vw; }
    .marquee .blog-card       { width: 80vw; }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; transform: none; }
    /* no motion → drop the duplicate group and let the row scroll manually */
    .marquee { overflow-x: auto; }
    .marquee-group[aria-hidden="true"] { display: none; }
}

/* --- Stats band ---------------------------------------------------------- */
.stats-band { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; padding: 20px 0; }
/* Single line, evenly sized — grows to fit however many cards there are. */
.stats-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; text-align: center; }
.stat-ico { display: block; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1; margin-bottom: 4px; }
.stat-num { display: block; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800; }
.stat-label { opacity: .85; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }

/* --- Testimonials -------------------------------------------------------- */
.quote { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.quote blockquote { margin: 10px 0 14px; font-size: .92rem; line-height: 1.5; color: var(--body); }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.avatar--lg { width: 64px; height: 64px; font-size: 20px; }
/* Colour variants for image-less monogram avatars (e.g. instructor cards). */
.avatar.is-blue   { background: linear-gradient(135deg, #4f46e5, #4338ca); }
.avatar.is-violet { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.avatar.is-amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.avatar.is-green  { background: linear-gradient(135deg, #16a34a, #15803d); }
.avatar.is-cyan   { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.avatar.is-pink   { background: linear-gradient(135deg, #ec4899, #db2777); }
.quote figcaption strong { display: block; color: var(--ink); }
.quote figcaption .muted { font-size: .82rem; }

/* --- Accordion (FAQ + curriculum) --------------------------------------- */
.accordion { display: flex; flex-direction: column; gap: 12px; }
.acc-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.acc-item summary { cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after { content: "+"; font-size: 1.3rem; color: var(--muted); transition: transform .2s; }
.acc-item[open] summary::after { content: "−"; }
.acc-body { padding: 0 20px 18px; color: var(--body); }

/* --- FAQ accordion (scoped to [data-accordion]; curriculum keeps its look) - */
.accordion[data-accordion] { gap: 14px; }
.accordion[data-accordion] .acc-item {
    border-radius: 14px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.accordion[data-accordion] .acc-item:hover {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}
/* The open panel is lifted and brand-tinted so the active question stands out. */
.accordion[data-accordion] .acc-item[open] {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
    box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
    background: color-mix(in srgb, var(--brand) 4%, var(--card));
}
.accordion[data-accordion] .acc-item summary {
    padding: 18px 20px; font-weight: 700; font-size: 1.02rem;
    transition: color .15s ease;
}
/* Hide the shared ::after marker here — this accordion uses its own icon span. */
.accordion[data-accordion] .acc-item summary::after { content: none; }
.accordion[data-accordion] .acc-item summary:hover,
.accordion[data-accordion] .acc-item[open] summary { color: var(--brand); }
.accordion[data-accordion] .acc-item summary:focus-visible {
    outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 12px;
}
.accordion[data-accordion] .acc-q { flex: 1; }

/* Circular +/− toggle: two bars that animate to a "−" and rotate when open. */
.accordion[data-accordion] .acc-icon {
    flex: 0 0 auto; position: relative;
    width: 28px; height: 28px; border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    transition: background .2s ease, transform .25s ease;
}
.accordion[data-accordion] .acc-icon::before,
.accordion[data-accordion] .acc-icon::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 12px; height: 2px; border-radius: 2px; background: var(--brand);
    transform: translate(-50%, -50%); transition: transform .25s ease, opacity .2s ease;
}
.accordion[data-accordion] .acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion[data-accordion] .acc-item[open] .acc-icon { background: var(--brand); transform: rotate(180deg); }
.accordion[data-accordion] .acc-item[open] .acc-icon::before,
.accordion[data-accordion] .acc-item[open] .acc-icon::after { background: #fff; }
.accordion[data-accordion] .acc-item[open] .acc-icon::after { opacity: 0; }

.accordion[data-accordion] .acc-body { padding: 0 20px 20px; line-height: 1.7; }
@media (prefers-reduced-motion: no-preference) {
    .accordion[data-accordion] .acc-item[open] .acc-body { animation: acc-reveal .28s ease both; }
}
@keyframes acc-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Course detail ------------------------------------------------------- */
.course-hero { background: var(--bg-soft); border-bottom: 1px solid var(--border); padding: clamp(32px,4vw,52px) 0; }
.course-hero-inner { display: grid; grid-template-columns: 1.5fr .9fr; gap: 36px; align-items: start; }
.course-hero-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; color: var(--muted); font-size: .92rem; align-items: center; }
.course-hero-meta strong { color: var(--ink); }

/* Hero "What you'll get" brief — fixed height, scrolls in any direction so a
   long, admin-written message never blows out the layout (Internship Module). */
.hero-brief {
    margin-top: 22px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    max-height: clamp(200px, 32vh, 320px);   /* fixed viewport-relative height */
    overflow: auto;                          /* scroll up/down AND left/right   */
    overscroll-behavior: contain;
}
.hero-brief:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hero-brief-title { margin: 0 0 8px; font-size: 1.05rem; }
.hero-brief-body { font-size: .95rem; }
.hero-brief-body :first-child { margin-top: 0; }
.hero-brief-body :last-child { margin-bottom: 0; }
/* Slim, themed scrollbars for the box (WebKit + Firefox). */
.hero-brief { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.hero-brief::-webkit-scrollbar { width: 9px; height: 9px; }
.hero-brief::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9px; }
.hero-brief::-webkit-scrollbar-track { background: transparent; }
.buy-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; position: sticky; top: calc(var(--header-h) + 16px); }
.buy-thumb { aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; position: relative; margin-bottom: 14px; background: var(--bg-mute); }
.buy-thumb img { width: 100%; height: 100%; object-fit: cover; }
.buy-price { font-size: 1.6rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.buy-duration { font-size: .9rem; font-weight: 600; color: var(--muted); margin: 0 0 12px; }
.buy-note { font-size: .82rem; margin-top: 10px; }
.buy-facts { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }

/* Internship enrollment plan-picker + pay form */
.enroll-form { margin: 14px 0 8px; padding: 18px; }
.plan-picker { border: 0; margin: 0 0 16px; padding: 0; }
.plan-picker-legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.plan-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.plan-option:hover { border-color: var(--brand); }
.plan-option:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.plan-option input { accent-color: var(--brand); width: 18px; height: 18px; }
.plan-option-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.plan-option-label { font-weight: 700; color: var(--ink); }
.plan-option-price { font-weight: 800; color: var(--ink); white-space: nowrap; }
.enroll-total-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; margin: 4px 0 12px; border-top: 1px solid var(--border); }
.enroll-total-row .price { font-size: 1.5rem; }
.pay-secure-note { text-align: center; margin-top: 10px; }

/* Two-column detail: readable main column + a sticky right rail holding the
   "Tools you'll use" card and the instructor. Collapses to one column below. */
.course-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.course-detail-main { min-width: 0; max-width: 780px; }
.course-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: calc(var(--header-h) + 16px); }
.side-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; }
.side-card h2 { margin: 0 0 14px; font-size: 1.05rem; }
.side-card.instructor .instructor-card { margin-top: 0; }

/* Colourful, equal-size tool cards laid out two-per-row. Palette cycles via
   nth-child so each course's stack reads as distinct, friendly tags. */
.tool-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tool-chip {
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 12px 10px; min-height: 46px; border-radius: 12px;
    font-weight: 700; font-size: .88rem; line-height: 1.2; color: #fff;
    background: linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 62%, #000 10%));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tc) 34%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
    --tc: var(--brand);
}
.tool-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px color-mix(in srgb, var(--tc) 44%, transparent); }
.tool-chip:nth-child(6n+1) { --tc: #6366f1; }
.tool-chip:nth-child(6n+2) { --tc: #06b6d4; }
.tool-chip:nth-child(6n+3) { --tc: #10b981; }
.tool-chip:nth-child(6n+4) { --tc: #f59e0b; }
.tool-chip:nth-child(6n+5) { --tc: #ec4899; }
.tool-chip:nth-child(6n+6) { --tc: #8b5cf6; }
@media (prefers-reduced-motion: reduce) { .tool-chip:hover { transform: none; } }

.prose { color: var(--body); }
.prose h2 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }

/* --- Legal / policy pages (Privacy, Terms, Refund) ----------------------- */
/* Tighter vertical rhythm than default content pages, and each list item is a
   colourful numbered card so long policies scan quickly. Numbering is via a CSS
   counter so admins keep authoring a plain <ul> in the rich-text editor. */
.page-hero--legal { padding: clamp(24px, 3.5vw, 40px) 0 clamp(14px, 2vw, 20px); }
.section--legal { padding: clamp(22px, 3vw, 36px) 0 clamp(30px, 4vw, 48px); }

.prose--legal > p:first-child { font-size: 1.02rem; color: var(--muted); margin-top: 0; }
.prose--legal h2 {
    margin-top: 1.8em; font-size: 1.15rem; color: var(--ink);
    display: flex; align-items: center; gap: 10px;
}
.prose--legal h2::before {
    content: ""; width: 6px; height: 22px; border-radius: 3px; flex: none;
    background: linear-gradient(180deg, var(--brand), var(--accent));
}

.prose--legal ul {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: grid; gap: 12px; counter-reset: legal;
}
.prose--legal ul > li {
    counter-increment: legal; position: relative;
    padding: 15px 18px 15px 62px;
    background: var(--card); color: var(--body);
    border: 1px solid var(--border);
    border-left: 4px solid var(--li-accent, var(--brand));
    border-radius: 14px; box-shadow: var(--shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease;
}
.prose--legal ul > li:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.prose--legal ul > li::before {
    content: counter(legal); position: absolute; left: 14px; top: 13px;
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    font-weight: 800; font-size: .92rem; color: #fff;
    background: linear-gradient(135deg, var(--li-accent, var(--brand)), color-mix(in srgb, var(--li-accent, var(--brand)) 55%, #000 8%));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--li-accent, var(--brand)) 40%, transparent);
}
/* Cycle a friendly palette across the cards so they read as distinct steps. */
.prose--legal ul > li:nth-child(6n+1) { --li-accent: #6366f1; }
.prose--legal ul > li:nth-child(6n+2) { --li-accent: #06b6d4; }
.prose--legal ul > li:nth-child(6n+3) { --li-accent: #10b981; }
.prose--legal ul > li:nth-child(6n+4) { --li-accent: #f59e0b; }
.prose--legal ul > li:nth-child(6n+5) { --li-accent: #ec4899; }
.prose--legal ul > li:nth-child(6n+6) { --li-accent: #8b5cf6; }
@media (prefers-reduced-motion: reduce) {
    .prose--legal ul > li:hover { transform: none; }
}
.curriculum { margin: 16px 0 8px; }
.lesson-list { list-style: none; margin: 0; padding: 0 20px 14px; }
.lesson { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--border); font-size: .94rem; }
.lesson-type { color: var(--muted); width: 18px; text-align: center; }
.lesson-title { flex: 1; color: var(--ink); }
.lesson-dur { font-size: .82rem; white-space: nowrap; }
.chip { display: inline-block; background: var(--bg-mute); color: var(--muted); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.chip--preview { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.instructor-card { display: flex; gap: 16px; align-items: start; margin-top: 12px; }

/* --- Catalogue + filters ------------------------------------------------- */
.catalog { display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 16px); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
/* Mobile-only collapse toggle: hidden on desktop, the filter form is always shown. */
.filters-toggle { display: none; }
.filter-block { padding: 12px 0; border-bottom: 1px solid var(--border); }
.filter-block:last-child { border-bottom: 0; }
.filter-block h4 { margin: 0 0 10px; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.filter-block select { width: 100%; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-size: 14px; }
/* Filter search box — styled to match the sidebar (raw browser default looks off).
   Leading magnifier icon is an inline SVG so it needs no external asset. */
.filter-block input[type="search"] {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px 10px 36px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg-soft);
    color: var(--ink); font-size: 14px; line-height: 1.2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 12px 50%;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.filter-block input[type="search"]::placeholder { color: var(--muted); }
.filter-block input[type="search"]:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.filter-block input[type="search"]:focus {
    outline: none; background-color: var(--card);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.filter-block input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.radio { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .92rem; cursor: pointer; }
.filter-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.filter-cats a { color: var(--body); font-size: .92rem; }
.filter-cats a:hover { color: var(--brand); }
.result-count { margin: 0 0 18px; }

/* --- Blog ---------------------------------------------------------------- */
.blog-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-thumb { display: block; aspect-ratio: 16/9; position: relative; background: var(--bg-mute); overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-body { padding: 16px 18px; }
.blog-meta { display: flex; align-items: center; gap: 10px; font-size: .8rem; margin-bottom: 8px; }
.blog-body h3 { margin: 0 0 8px; font-size: 1.08rem; }
.blog-body h3 a { color: var(--ink); }
.blog-body h3 a:hover { color: var(--brand); }
.post-hero { background: var(--bg-soft); border-bottom: 1px solid var(--border); padding: clamp(30px,4vw,48px) 0; }
.post-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .9rem; margin-top: 10px; }
.post-cover { width: 100%; border-radius: var(--radius); margin: 26px 0 6px; box-shadow: var(--shadow); }
.post-body { font-size: 1.05rem; padding: 26px 0; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 20px; }

/* --- Contact ------------------------------------------------------------- */
/* Generic surface card (frontend) — contact + apply forms, glass theme. */
.card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: clamp(20px, 3vw, 30px);
}

/* --- Contact page -------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: start; }
.contact-info h3 { margin: 0 0 6px; font-size: 1.15rem; }
.contact-info-sub { font-size: .9rem; line-height: 1.5; margin: 0 0 22px; }

.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-item { display: flex; align-items: center; gap: 14px; }
/* Reuse the gradient feature-icon tile inline (no bottom margin, smaller). */
.contact-item .feature-icon { width: 42px; height: 42px; border-radius: 11px; font-size: 18px; margin: 0; flex: 0 0 auto; }
.contact-item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.contact-item-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.contact-item-body a, .contact-item-body > span:last-child { color: var(--ink); font-weight: 600; word-break: break-word; }
.contact-item-body a:hover { color: var(--brand); }

/* Follow-us block sits below a subtle divider inside the info card. */
.contact-info .social-heading { margin: 22px 0 12px; padding-top: 20px; border-top: 1px solid var(--border); font-size: .95rem; }

/* Form card */
.contact-form-head { margin-bottom: 20px; }
.contact-form-head h3 { margin: 0 0 4px; font-size: 1.15rem; }
.contact-form-head p { font-size: .9rem; margin: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form .field:last-of-type { margin-bottom: 20px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .7; }

/* Social icon buttons (Contact page). Icons are monochrome SVGs recoloured to
   the brand via CSS mask, so they adapt to light/dark automatically. */
.social-heading { margin: 22px 0 10px; font-size: 1rem; }
.social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.social-link {
    width: 42px; height: 42px; border-radius: 11px;
    display: grid; place-items: center;
    background: var(--card); border: 1px solid var(--border);
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.social-link:hover {
    transform: translateY(-2px);
    background: var(--brand); border-color: var(--brand);
    box-shadow: var(--shadow);
}
.social-icon {
    display: block; width: 20px; height: 20px;
    background: var(--brand);
    -webkit-mask: var(--icon) center / contain no-repeat;
            mask: var(--icon) center / contain no-repeat;
    transition: background .15s ease;
}
.social-link:hover .social-icon { background: #fff; }

/* --- AI Tools ------------------------------------------------------------ */
.page-hero--ai { --tool-accent: var(--brand); }
.page-hero--ai .eyebrow { margin-bottom: 12px; }

.ai-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.ai-card {
    position: relative; display: flex; flex-direction: column;
    --tool-accent: var(--brand);
    padding: 24px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ai-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tool-accent) 45%, var(--border));
    box-shadow: var(--shadow);
}
.ai-card-icon {
    display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 14px;
    font-size: 1.5rem; line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--tool-accent), color-mix(in srgb, var(--tool-accent) 65%, #000));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--tool-accent) 35%, transparent);
}
.ai-card-icon--lg { width: 68px; height: 68px; font-size: 2rem; border-radius: 18px; }
.ai-card-badge {
    position: absolute; top: 16px; right: 16px;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px;
    color: color-mix(in srgb, var(--tool-accent) 78%, var(--ink));
    background: color-mix(in srgb, var(--tool-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tool-accent) 30%, transparent);
}
.ai-card-badge--static { position: static; display: inline-block; margin-bottom: 10px; }
.ai-card-title { margin: 18px 0 6px; font-size: 1.15rem; }
.ai-card-text { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.ai-card-cta {
    margin-top: 16px; font-weight: 700; font-size: .9rem; color: var(--tool-accent);
    display: inline-flex; align-items: center; gap: 6px;
}
.ai-card:hover .ai-card-cta span { transform: translateX(3px); }
.ai-card-cta span { transition: transform .16s ease; }

/* Detail page */
.ai-detail-head { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.ai-detail-head h1 { margin: 6px 0 .3em; }
.ai-detail-image { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 20px; }
.ai-detail-placeholder {
    position: relative; display: grid; place-items: center;
    aspect-ratio: 16 / 10; border-radius: var(--radius); margin-bottom: 20px;
    background:
        radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--tool-accent) 26%, transparent), transparent 60%),
        linear-gradient(135deg, color-mix(in srgb, var(--tool-accent) 16%, var(--bg-soft)), var(--bg-soft));
    border: 1px solid color-mix(in srgb, var(--tool-accent) 22%, var(--border));
    overflow: hidden;
}
.ai-detail-glyph { font-size: 4.5rem; line-height: 1; filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--tool-accent) 35%, transparent)); }
.ai-detail-tag {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px;
    color: color-mix(in srgb, var(--tool-accent) 80%, var(--ink));
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--tool-accent) 30%, transparent);
}
.ai-enquire { position: sticky; top: calc(var(--header-h) + 16px); }
.ai-cta { text-align: center; }
.ai-cta h2 { margin-bottom: .4em; }
.ai-cta p { margin: 0 auto 1.4rem; max-width: 52ch; }

@media (max-width: 720px) {
    .ai-enquire { position: static; }
    .ai-detail-head { flex-direction: column; align-items: flex-start; }
}

.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field input, .field textarea, .inline-search input {
    width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px;
    font-size: 15px; font-family: inherit; background: var(--card); color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.inline-search { display: flex; gap: 8px; max-width: 420px; margin-top: 14px; }
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.alert--ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.alert--error { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.tick-list { list-style: none; padding: 0; }
.tick-list li { padding: 6px 0 6px 28px; position: relative; }
.tick-list li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }

/* --- Pagination ---------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 34px; }
.page-link { min-width: 40px; text-align: center; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--body); font-weight: 600; background: var(--card); }
.page-link:hover { border-color: var(--brand); color: var(--brand); }
.page-link.is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.page-link.is-disabled { opacity: .45; pointer-events: none; }
.page-gap { padding: 9px 4px; color: var(--muted); }

/* --- Empty states -------------------------------------------------------- */
.empty { text-align: center; padding: 60px 20px; }
.empty-icon { font-size: 3rem; margin: 0 0 8px; }

/* --- Top instructors ----------------------------------------------------- */
.instructor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.instructor-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 20px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.instructor-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.instructor-tile .avatar--lg, .ins-avatar { margin: 0 auto 12px; }
.ins-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.instructor-tile h3 { margin: 0 0 4px; font-size: 1.05rem; }
.ins-meta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }

/* --- Colourful card accents ---------------------------------------------- *
   Purely cosmetic polish for the "blank" cards (feature / instructor / quote).
   Uses only latest, dependency-free CSS (:has + color-mix + custom props): each
   card reads the accent colour of the icon/avatar it already contains and tints
   itself to match, with a matching hover glow. NOTHING about size, spacing,
   layout, markup or behaviour changes — background, border and shadow only.
   Adapts to light/dark automatically (built on --card) and degrades to a plain
   brand tint on any browser without :has(). ------------------------------- */
.feature-card, .instructor-tile, .quote {
    --c: var(--brand);
    background: linear-gradient(158deg, color-mix(in srgb, var(--c) 12%, var(--card)), var(--card) 58%);
    border: 1px solid color-mix(in srgb, var(--c) 24%, var(--border));
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.feature-card:hover, .instructor-tile:hover, .quote:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--c) 52%, var(--border));
    box-shadow: 0 14px 32px color-mix(in srgb, var(--c) 20%, transparent), var(--shadow);
}
/* Per-card accent, taken from the coloured icon/avatar the card already holds. */
.feature-card:has(.is-blue),   .instructor-tile:has(.is-blue)   { --c: #4f46e5; }
.feature-card:has(.is-violet), .instructor-tile:has(.is-violet) { --c: #7c3aed; }
.feature-card:has(.is-amber),  .instructor-tile:has(.is-amber)  { --c: #f59e0b; }
.feature-card:has(.is-green),  .instructor-tile:has(.is-green)  { --c: #16a34a; }
.feature-card:has(.is-cyan),   .instructor-tile:has(.is-cyan)   { --c: #06b6d4; }
.feature-card:has(.is-pink),   .instructor-tile:has(.is-pink)   { --c: #ec4899; }
/* Testimonials carry no icon → rotate a friendly palette by position. */
.quote:nth-child(6n+1) { --c: #4f46e5; }
.quote:nth-child(6n+2) { --c: #7c3aed; }
.quote:nth-child(6n+3) { --c: #f59e0b; }
.quote:nth-child(6n+4) { --c: #16a34a; }
.quote:nth-child(6n+5) { --c: #06b6d4; }
.quote:nth-child(6n+6) { --c: #ec4899; }

/* --- Partners ------------------------------------------------------------ */
.section-head--center { flex-direction: column; justify-content: center; text-align: center; }
.section-head--center .muted { margin: .35rem auto 0; max-width: 46ch; }

/* 3-row auto-scrolling logo slider. Each track holds its cards twice so the
   -50% translate loops seamlessly; rows alternate direction. Edge-faded via a
   mask; pauses on hover; freezes for prefers-reduced-motion. */
.partner-slider {
    margin-top: 2rem;
    display: flex; flex-direction: column; gap: 14px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partner-track {
    display: flex; flex-wrap: nowrap; width: max-content; gap: 14px;
    animation: partner-marquee 46s linear infinite;
    will-change: transform;
}
.partner-track--rtl { animation-direction: reverse; }
.partner-slider:hover .partner-track { animation-play-state: paused; }
@keyframes partner-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.partner-card {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.partner-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
    box-shadow: var(--shadow);
}
.partner-mark {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    font-size: .82rem; font-weight: 800; letter-spacing: .02em;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
}
/* Cards carrying a real logo get a light chip so the original-colour brand
   marks (and dark monochrome ones) stay legible on any card background. */
.partner-mark--logo {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}
/* Real brand logo shown in its original colours (no recolouring). */
.partner-logo {
    display: block; width: 74%; height: 74%;
    object-fit: contain;
}
.partner-name {
    font-weight: 700; font-size: .96rem; line-height: 1.2;
    color: var(--ink); letter-spacing: -.01em; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .partner-track { animation: none; }
    .partner-slider { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}
@media (max-width: 560px) {
    .partner-mark { width: 34px; height: 34px; }
    .partner-name { font-size: .9rem; }
}

/* --- Newsletter band ----------------------------------------------------- */
.newsletter-band { background:
    radial-gradient(600px 260px at 0% 100%, color-mix(in srgb, var(--brand) 14%, transparent), transparent), var(--bg-soft); }
.newsletter-inner { text-align: center; }
.newsletter--lg { max-width: 520px; margin: 18px auto 0; }
.newsletter--lg input { flex: 1; padding: 13px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 15px; }

/* --- CTA band ------------------------------------------------------------ */
.cta-band { padding: 56px 0; background:
    radial-gradient(700px 300px at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent), var(--bg-soft); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 32px 36px; box-shadow: var(--shadow); }
.cta-inner h2 { margin: 0 0 4px; }
.cta-inner p { margin: 0; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--border); margin-top: 20px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; gap: 30px; padding: 52px 20px 36px; }
/* min-width:0 lets each grid column shrink below its content's intrinsic size
   so a long link/email or the newsletter field can never force the track (and
   thus the page) wider than the viewport — the cause of the uneven side-space
   on phones. overflow-wrap breaks long unbreakable tokens (emails/URLs). */
.footer-col { min-width: 0; }
.footer-col h4 { font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col a, .contact-list li { overflow-wrap: anywhere; }
.footer-col a { color: var(--body); font-size: .93rem; }
.footer-col a:hover { color: var(--brand); }
.footer-about p { font-size: .92rem; margin: 12px 0; max-width: 34ch; }
.brand--footer { margin-bottom: 6px; }
.socials { display: flex; gap: 8px; margin-top: 6px; }
.socials a { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--border); color: var(--body); font-weight: 700; }
.socials a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.footer-newsletter-title { margin-top: 22px; }
.newsletter-note { font-size: .9rem; color: var(--body); margin: 6px 0 0; }
/* flex-wrap + min-width:0 so the email field can shrink (and the button drop
   below it on very narrow phones) instead of overflowing the viewport. A text
   input has an intrinsic ~180px min-width that otherwise refuses to shrink. */
.newsletter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.newsletter input { flex: 1 1 160px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--ink); font-size: 14px; }
.footer-bar { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg-soft) 55%, var(--card)); }
.footer-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; flex-wrap: wrap; }
.footer-bar p { margin: 0; font-size: .85rem; color: var(--muted); }
/* Legal links render as subtle pill chips that light up in the brand colour on
   hover. The template's "|" separators are hidden — the chip spacing carries the
   grouping instead. */
.footer-legal { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .82rem; }
.footer-legal span { display: none; }
.footer-legal a {
    color: var(--muted); text-decoration: none;
    padding: 6px 13px; border-radius: 999px; line-height: 1;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: color-mix(in srgb, var(--card) 55%, transparent);
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    border-color: color-mix(in srgb, var(--brand) 32%, transparent);
    box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--brand) 45%, transparent);
    text-decoration: none; transform: translateY(-1px); outline: none;
}

/* --- Back to top --------------------------------------------------------- */
.to-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--card); color: var(--ink); font-size: 18px; cursor: pointer;
    box-shadow: var(--shadow); z-index: 50; opacity: 0; transform: translateY(10px); transition: .2s; }
.to-top.is-visible { opacity: 1; transform: translateY(0); }

/* --- Reveal-on-scroll animation ----------------------------------------- */
.course-card, .cat-tile, .quote, .blog-card, .stat { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
    .reveal.is-in { opacity: 1; transform: none; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
    .hero-inner { grid-template-columns: 1fr; }
    /* On phones the art leads as a banner above the copy. */
    .hero-media { order: -1; max-width: 460px; margin: 0 auto 8px; width: 100%; }
    .hero-art { display: none; }
    .course-hero-inner { grid-template-columns: 1fr; }
    .buy-card { position: static; }
    .course-detail { grid-template-columns: 1fr; }
    .course-side { position: static; }
    .catalog { grid-template-columns: 1fr; }
    .filters { position: static; }
    /* Phones/tablets: the sidebar stacks on top and is very tall, pushing the
       results off-screen. When JS is available, collapse it behind a "Filters"
       toggle so the cards lead. Without JS the toggle can't work, so the panel
       stays as a normal always-visible card (the .js guard below skips it). */
    .js .filters { padding: 0; border: 0; background: transparent; box-shadow: none; }
    .js .filters-toggle {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        width: 100%; padding: 12px 16px; font: inherit; font-weight: 600; cursor: pointer;
        color: var(--ink); background: var(--card); border: 1px solid var(--border);
        border-radius: var(--radius); box-shadow: var(--shadow-sm);
    }
    .js .filters-toggle svg { transition: transform .2s ease; flex: none; }
    .js .filters-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
    /* Form body hidden until the toggle is opened. */
    .js .filters > form { display: none; margin-top: 10px; padding: 4px 16px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
    .js .filters.is-open > form { display: block; }
    .contact-grid { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; gap: 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 26px; }
}

/* Phone: front-page hero (.hero only). The container already gives equal 20px
   side padding; here we tidy the vertical rhythm, let the copy use the full
   width, and force the two CTA buttons to equal width side-by-side so they
   don't wrap into a lopsided "Browse courses" / "Join Internships" pair. */
@media (max-width: 560px) {
    .hero { padding: 28px 0 36px; }
    .hero-inner { gap: 22px; }
    /* Justify the multi-line hero paragraph so its right edge lines up with the
       heading / buttons / search gutter instead of sitting ragged (the only
       block that read as "not aligned" on a phone). text-align-last keeps the
       short final line left so it doesn't stretch into big word gaps. */
    .hero-copy .lead { max-width: none; text-align: justify; text-align-last: left; }
    .hero-cta { flex-wrap: nowrap; gap: 12px; margin: 20px 0; }
    .hero-cta .btn--lg { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 15px; white-space: nowrap; }
    .hero-search { max-width: none; }
}

/* Very narrow phones (≤380px, or larger via display-zoom / big system font):
   two nowrap CTA buttons side-by-side can't shrink to fit, so stack them full
   width instead of overflowing the viewport. */
@media (max-width: 380px) {
    .hero-cta { flex-wrap: wrap; }
    .hero-cta .btn--lg { flex: 1 1 100%; white-space: normal; }
}

/* Genuinely narrow screens (real phones, iPad portrait): the six-link nav can't
   fit, so collapse it into the hamburger. Desktop-mode-on-phone (~980px) and
   iPad landscape stay ABOVE this and keep the full laptop-style nav — see the
   901–1080px "fit the nav" block below. */
@media (max-width: 900px) {
    :root { --header-h: 64px; }
    .brand-logo { height: 44px; max-width: 56vw; }
    .nav-burger { display: flex; }
    .main-nav {
        position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch;
        gap: 0; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
        padding: 10px 16px 18px; margin: 0; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
        /* visibility:hidden while closed removes the off-screen links from the tab
           order so keyboard/screen-reader focus can't disappear into them; it is
           deferred until the slide-out finishes so the animation still plays. */
        transform: translateY(-120%); visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }
    .nav-toggle:checked ~ .main-nav {
        transform: translateY(0); visibility: visible;
        transition: transform .25s ease, visibility 0s;
    }
    .nav-list { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
    .nav-link { padding: 12px; }
    /* Phone: show only top-level header links — hide the mega dropdown options. */
    .mega { display: none; }
    .nav-li.has-mega .caret { display: none; }
    .nav-actions { flex-wrap: wrap; padding-top: 8px; }
    .nav-search { flex: 1; } .nav-search input { width: 100%; }
}

/* Desktop-mode-on-phone (~980px) and iPad landscape (1024px): keep the FULL
   laptop-style nav — the page should look like a laptop here, NOT collapse to
   the burger — but tighten the row (smaller gaps, padding and search box) so all
   six links + search + login fit within the viewport instead of overflowing and
   leaving a blank band on the right. Only this 901–1080px band is affected;
   real laptops/desktops (≥1081px) keep their original roomier spacing. */
@media (min-width: 901px) and (max-width: 1080px) {
    .header-inner { gap: 12px; }
    .main-nav { gap: 10px; }
    .nav-list { gap: 2px; }
    .nav-link { padding: 8px 9px; font-size: 14px; }
    .nav-search input { width: 108px; }
    .nav-search input, .nav-search button { padding-top: 7px; padding-bottom: 7px; }
    .nav-actions { gap: 8px; }
}

@media (max-width: 480px) {
    /* Phone footer: turn the long single stack into neat card-sections in a
       2-up grid so it reads as ordered blocks and takes far less height.
       (Phone-only — desktop grid above is untouched.) */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 30px 14px 26px; }
    .footer-col {
        background: var(--card); border: 1px solid var(--border);
        border-radius: 16px; padding: 16px 15px; margin: 0;
    }
    .footer-col h4 { margin-bottom: 11px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
    .footer-col ul { gap: 11px; }
    .footer-col a { font-size: .92rem; }
    /* About + Contact span the full width; link columns sit side-by-side. */
    .footer-about, .footer-contact { grid-column: 1 / -1; }
    .footer-about { text-align: center; }
    .footer-about .brand--footer { display: inline-flex; }
    .footer-about p { max-width: none; margin: 12px auto 14px; }
    .socials { justify-content: center; }
    .contact-list { gap: 12px; }
    .footer-newsletter-title { margin-top: 16px; }
    /* Tighter, tidier bottom bar. */
    .footer-bar-inner { justify-content: center; text-align: center; gap: 6px; }

    /* Phone: tighter 2-up stats as neat translucent tiles instead of loose,
       sparse text floating on the band. */
    .stats-grid { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat {
        background: rgba(255, 255, 255, .09);
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 14px; padding: 16px 10px;
    }
    .stat-ico { font-size: 1.5rem; margin-bottom: 6px; }
    .stat-num { font-size: 1.4rem; }
    .stat-label { font-size: .68rem; }
    /* Phone: instructors as a compact 2-up tile grid (matches the stats look). */
    .instructor-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .instructor-tile { padding: 16px 12px; }
    .instructor-tile .avatar--lg { width: 54px; height: 54px; font-size: 18px; }
    .instructor-tile .ins-avatar { width: 54px; height: 54px; }
    .instructor-tile .avatar--lg, .instructor-tile .ins-avatar { margin-bottom: 10px; }
    .instructor-tile h3 { font-size: 1rem; }
    .instructor-tile p { display: none; }          /* drop the bio so tiles stay tidy */
    .ins-meta { gap: 4px 8px; margin-top: 8px; font-size: .68rem; }
    .cta-inner { flex-direction: column; align-items: flex-start; }
    /* Phone: keep both CTA buttons on one line as equal-width pills instead of
       letting them wrap and stack. */
    .cta-actions { width: 100%; flex-wrap: nowrap; gap: 10px; }
    .cta-actions .btn--lg {
        flex: 1 1 0; min-width: 0; padding-left: 14px; padding-right: 14px;
        text-align: center; justify-content: center; white-space: nowrap;
        font-size: .92rem;
    }
}

/* ============================================================================
   Theme & Appearance Manager (Section 17) — admin-driven variants.
   Everything below is toggled by settings written from /admin/theme, applied
   via CSS variables (colours/fonts/radius) and data-attributes on <html>/<body>
   (button style, header/footer layout, theme style, loader). No code edit
   needed to change any of these — the admin form drives them.
   ============================================================================ */

/* --- Branding: logo (with light/dark swap) ------------------------------- */
/* Fixed-size, non-editable brand logo (Section 48: consistent UI). */
.brand-logo { width: auto; height: 58px; max-width: min(260px, 60vw); object-fit: contain; border-radius: 8px; display: block; }
.brand-logo--dark { display: none; }
html[data-theme="dark"] .brand-logo--light { display: none; }
html[data-theme="dark"] .brand-logo--dark  { display: block; }

/* --- Button styles ------------------------------------------------------- */
body[data-button-style="outline"] .btn:not(.btn--ghost) {
    background: transparent; color: var(--brand); border-color: var(--brand);
}
body[data-button-style="outline"] .btn:not(.btn--ghost):hover {
    background: var(--brand); color: #fff;
}
body[data-button-style="pill"] .btn { border-radius: 999px; }
body[data-button-style="soft"] .btn:not(.btn--ghost) {
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    color: var(--brand); border-color: transparent;
}
body[data-button-style="soft"] .btn:not(.btn--ghost):hover {
    background: color-mix(in srgb, var(--brand) 26%, transparent); color: var(--brand);
}

/* --- Header layouts ------------------------------------------------------ */
body[data-header-layout="centered"] .header-inner { justify-content: center; gap: 28px; }
body[data-header-layout="compact"] { --header-h: 54px; }
body[data-header-layout="compact"] .brand-mark { width: 28px; height: 28px; }

/* --- Footer layouts ------------------------------------------------------ */
body[data-footer-layout="simple"] .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 16px; }
body[data-footer-layout="simple"] .footer-col:not(.footer-about) { display: none; }
body[data-footer-layout="simple"] .socials { justify-content: center; }

/* --- Theme styles -------------------------------------------------------- */
body[data-theme-style="flat"] { --shadow-sm: none; --shadow: none; --shadow-lg: none; }
body[data-theme-style="flat"] .site-header { backdrop-filter: none; }
body[data-theme-style="rounded"] { --radius: 22px; }
body[data-theme-style="glass"] .card,
body[data-theme-style="glass"] .buy-card,
body[data-theme-style="glass"] .quote {
    background: color-mix(in srgb, var(--card) 78%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
}

/* --- Page loader (opt-in; pure-CSS auto-hide, no JS) --------------------- */
.page-loader {
    position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
    background: var(--bg); animation: loaderHide .7s ease .35s forwards;
}
@keyframes loaderHide { to { opacity: 0; visibility: hidden; } }

.page-loader[data-loader="spinner"] span {
    width: 42px; height: 42px; border-radius: 50%;
    border: 4px solid var(--bg-mute); border-top-color: var(--brand);
    animation: loaderSpin .7s linear infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }

.page-loader[data-loader="bar"] { background: transparent; place-items: start stretch; pointer-events: none; }
.page-loader[data-loader="bar"] span {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--brand);
    animation: loaderBar .7s ease forwards;
}
@keyframes loaderBar { to { width: 100%; } }

.page-loader[data-loader="dots"] span {
    width: 11px; height: 11px; border-radius: 50%; background: var(--brand);
    box-shadow: 20px 0 var(--brand), -20px 0 var(--brand);
    animation: loaderDots 1s ease-in-out infinite;
}
@keyframes loaderDots { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .page-loader, .page-loader span { animation-duration: .01ms; }
}

/* --- Impact stat cards (internships page) -------------------------------- */
.impact {
    padding: clamp(48px, 6vw, 80px) 0;
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 45%),
        radial-gradient(circle at 85% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 45%),
        var(--bg-soft);
}
.impact-grid {
    margin-top: 40px;
    display: grid;
    /* Render every stat on a single line on desktop; --cols is set inline
       from the number of stats. Falls back to a sensible 5 if unset. */
    grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
    gap: 16px;
}
.impact-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 26px 14px 22px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Coloured accent bar across the top of each card. */
.impact-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
.impact-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
}
.impact-icon {
    width: 46px; height: 46px; margin-bottom: 6px;
    display: grid; place-items: center;
    font-size: 22px; border-radius: 14px; color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 35%, transparent);
}
.impact-num {
    font-size: clamp(1.7rem, 2.4vw, 2.4rem); font-weight: 800; line-height: 1;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--ink), var(--brand));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.impact-label {
    color: var(--muted); font-size: .74rem; font-weight: 600; line-height: 1.3;
    text-transform: uppercase; letter-spacing: .04em;
}
/* Per-card tone: accent bar + icon share the same gradient (matches feature icons). */
.impact-card.is-blue::before,   .impact-card.is-blue   .impact-icon { background: linear-gradient(135deg, #4f46e5, #4338ca); }
.impact-card.is-violet::before, .impact-card.is-violet .impact-icon { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.impact-card.is-amber::before,  .impact-card.is-amber  .impact-icon { background: linear-gradient(135deg, #f59e0b, #d97706); }
.impact-card.is-green::before,  .impact-card.is-green  .impact-icon { background: linear-gradient(135deg, #16a34a, #15803d); }
.impact-card.is-cyan::before,   .impact-card.is-cyan   .impact-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.impact-card.is-pink::before,   .impact-card.is-pink   .impact-icon { background: linear-gradient(135deg, #ec4899, #db2777); }

/* Keep the single-line row from getting too cramped on narrower viewports:
   step down to 3 columns on tablet, then 2 on phones. */
@media (max-width: 1024px) {
    .impact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .impact-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .impact-icon { width: 42px; height: 42px; font-size: 20px; }
}

/* --- About page --------------------------------------------------------- */
/* Two-column story block: narrative on the left, mission/vision cards right.
   Collapses to a single column on tablet so the cards sit under the copy. */
.about-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.about-split .lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink); font-weight: 500; }
.about-cards { display: grid; gap: 18px; }
/* Mission / vision cards reuse the feature-card look with a leading gradient icon. */
.mv-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 24px; display: flex; gap: 16px; align-items: flex-start;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.mv-card h3 { margin: 0 0 6px; font-size: 1.1rem; }
.mv-card p { margin: 0; color: var(--body); font-size: .95rem; }
@media (max-width: 860px) { .about-split { grid-template-columns: 1fr; gap: 28px; } }

/* Logo strip — CSP-safe monogram tiles (no external images) for the tools and
   technologies learners master. Wraps and centres on every viewport. */
/* Auto-scrolling two-row marquee (same behaviour on desktop and mobile). The
   fading edges are a mask; each track holds its chips twice so the -50% shift
   loops seamlessly. Pauses on hover/focus and stops for reduced-motion users. */
.logo-marquee {
    margin-top: 34px; display: flex; flex-direction: column; gap: 16px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-track { display: flex; width: max-content; flex: none; }
.logo-track .logo-chip { margin-right: 14px; flex: none; }
.logo-track--ltr { animation: logo-marq 46s linear infinite; }
.logo-track--rtl { animation: logo-marq 56s linear infinite reverse; }
.logo-marquee:hover .logo-track, .logo-track:focus-within { animation-play-state: paused; }
@keyframes logo-marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .logo-track { animation: none; }
    .logo-marquee { overflow-x: auto; }
}
.logo-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 20px; border-radius: 14px;
    background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    font-weight: 700; color: var(--ink); font-size: .95rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.logo-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.logo-mark {
    width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    color: #fff; font-size: 13px; font-weight: 800;
    background: linear-gradient(135deg, var(--brand), var(--accent));
}
.logo-mark.is-blue   { background: linear-gradient(135deg, #4f46e5, #4338ca); }
.logo-mark.is-violet { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.logo-mark.is-amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.logo-mark.is-green  { background: linear-gradient(135deg, #16a34a, #15803d); }
.logo-mark.is-cyan   { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.logo-mark.is-pink   { background: linear-gradient(135deg, #ec4899, #db2777); }

/* ============================================================================
   Desktop / laptop beautification layer (v2)
   Purpose: elevate the public frontend on laptop, tablet-landscape and desktop
   without altering behaviour or the student-auth (login/register/verify) screens.
   Scope guard: NOTHING here targets `.stu-auth*` or the base `.btn` fill, so the
   login form stays pixel-identical — only shared chrome + content is refined.
   ============================================================================ */

:root {
    --shadow-brand:      0 18px 40px -18px color-mix(in srgb, var(--brand) 45%, transparent);
    --shadow-brand-soft: 0 10px 24px -14px color-mix(in srgb, var(--brand) 38%, transparent);
    --ring-brand:        0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent);
}

/* --- Footer polish (all pages) ------------------------------------------- */
/* Hairline brand accent along the top of the footer + refined social chips. */
.site-footer { position: relative; }
.site-footer::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 55%, transparent), color-mix(in srgb, var(--accent) 55%, transparent), transparent);
    opacity: .7;
}
.socials { gap: 10px; }
.socials a {
    width: 40px; height: 40px; border-radius: 11px;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.socials a:hover { transform: translateY(-2px); box-shadow: var(--shadow-brand-soft); }
.socials .social-icon { width: 18px; height: 18px; }
.newsletter input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring-brand); }
.footer-col h4 { position: relative; }

/* --- Footer: desktop / laptop layout & polish (≥961px) ------------------- */
/* Desktop-only. The phone footer (≤480px, the 2-up card grid above) reads
   well and is intentionally left untouched. The old ≥961px grid declared five
   tracks but the default footer renders four columns, leaving an empty track
   and an off-balance, floaty layout — a flexible row fixes that and keeps even
   proportions no matter how many link columns the footer menu has. */
@media (min-width: 961px) {
    .footer-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 40px 56px;
        padding: 64px 24px 44px;
    }
    .footer-about   { flex: 1.6 1 300px; max-width: 360px; }
    .footer-contact { flex: 1.4 1 280px; }
    .footer-col:not(.footer-about):not(.footer-contact) { flex: 1 1 150px; }

    /* Headings: a touch tighter, with a short brand underline for structure. */
    .footer-col h4 { font-size: .82rem; letter-spacing: .08em; margin-bottom: 18px; padding-bottom: 12px; }
    .footer-col h4::after {
        content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; border-radius: 2px;
        background: linear-gradient(90deg, var(--brand), var(--accent));
    }
    .footer-newsletter-title { margin-top: 26px; }

    /* Link columns: roomier rows with a subtle hover slide. */
    .footer-col ul:not(.contact-list) { gap: 12px; }
    .footer-col ul:not(.contact-list) a { display: inline-block; transition: color .15s ease, transform .15s ease; }
    .footer-col ul:not(.contact-list) a:hover { transform: translateX(3px); }

    /* About blurb: easier to read. */
    .footer-about p { font-size: .95rem; line-height: 1.65; color: var(--body); margin: 16px 0 18px; }

    /* Contact rows aligned with their leading icon. */
    .contact-list { gap: 13px; }
    .contact-list li { display: flex; align-items: center; gap: 10px; font-size: .93rem; color: var(--body); }
    .contact-list a { color: var(--body); }
    .contact-list a:hover { color: var(--brand); }

    /* Newsletter: tidy, contained field + button. */
    .newsletter-note { margin-top: 8px; }
    .newsletter { margin-top: 14px; max-width: 340px; }
    .newsletter input { padding: 12px 14px; border-radius: 10px; }
    .newsletter .btn--sm { border-radius: 10px; padding-inline: 18px; white-space: nowrap; }
}

/* --- Inner-page hero: subtle brand wash instead of a flat panel ---------- */
.page-hero:not(.page-hero--banner) {
    position: relative; overflow: hidden;
    background:
        radial-gradient(620px 220px at 0% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
        radial-gradient(560px 240px at 100% 120%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%),
        var(--bg-soft);
}
/* Inner-page headers are kept compact on laptop/desktop — trimmed vertical
   padding so the band hugs the breadcrumb + title instead of floating in a
   tall empty strip. (Home hero is a separate .hero and is untouched.) */
@media (min-width: 1024px) {
    .page-hero:not(.page-hero--banner) { padding-top: 16px; padding-bottom: 14px; }
    .page-hero .crumbs { margin-bottom: 8px; }
    .page-hero-lead { margin-top: 6px; }
    /* Course / internship detail header (uses .course-hero). */
    .course-hero { padding-top: 22px; padding-bottom: 26px; }
    /* Pull the first content block up closer to the header band so inner pages
       don't open with a big empty gap. Home (.hero) is unaffected. */
    .page-hero + .section, .course-hero + .section { padding-top: clamp(24px, 3vw, 34px); }
}

/* --- Section rhythm + heading accent (desktop) --------------------------- */
@media (min-width: 1024px) {
    .section { padding: clamp(40px, 5vw, 68px) 0; }
    .section-head { margin-bottom: 34px; }
}
/* A slim gradient tick beside left-aligned section titles so they feel designed. */
.section-head h2 { position: relative; padding-left: 16px; }
.section-head h2::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 1.05em; border-radius: 999px;
    background: linear-gradient(180deg, var(--brand), var(--accent));
}
.section-link { transition: transform .16s ease, color .16s ease; }
.section-head:hover .section-link { transform: translateX(3px); }

/* --- Card system: warmer, brand-tinted hover elevation ------------------- */
/* Applies to every card grid on the site. Resting look is unchanged; only the
   hover shadow gains a brand tint and the lift is a touch more generous on
   large screens, so browsing feels more premium. */
.course-card:hover,
.feature-card:hover,
.cat-tile:hover,
.ai-card:hover,
.blog-card:hover,
.internship-card:hover {
    box-shadow: var(--shadow-brand);
}
@media (min-width: 1024px) {
    .course-card, .feature-card, .cat-tile, .ai-card, .blog-card, .internship-card {
        transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
    }
    .course-card:hover, .ai-card:hover, .blog-card:hover, .internship-card:hover { transform: translateY(-6px); }
    .feature-card:hover { transform: translateY(-6px); }
}
/* Course thumb monogram fallback: gentle brand sheen so empty thumbs read as
   intentional cards rather than grey blanks. */
.thumb-fallback {
    background:
        radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--brand) 22%, var(--card)), transparent 60%),
        linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--card)), color-mix(in srgb, var(--accent) 16%, var(--card)));
    letter-spacing: .04em;
}

/* --- Homepage category slider: keep tiles clear of the arrows ------------ */
/* Fix: the first tile used to sit under the left "‹" nav arrow. Give the track
   snap/scroll padding so the leading and trailing tiles clear both arrows. */
.cat-track { padding-left: 6px; padding-right: 6px; }
/* Arrow clearance only where arrows exist (desktop). On phones the arrows are
   hidden, so no leading/trailing margin — tiles stay flush with the heading. */
@media (min-width: 641px) {
    .cat-track { scroll-padding-inline: 44px; }
    .cat-track > .cat-tile:first-child { margin-left: 40px; }
    .cat-track > .cat-tile:last-child { margin-right: 40px; }
}
.cat-name { overflow-wrap: anywhere; }
.cat-nav { backdrop-filter: saturate(140%) blur(6px); }
.cat-nav:hover { box-shadow: var(--shadow-brand-soft); }

/* --- Generic form controls (contact / apply): refined focus ------------- */
/* Scoped to the frontend .field surface — NOT the student-auth .stu-af fields. */
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--brand); box-shadow: var(--ring-brand);
}
.hero-search input:focus { outline: none; box-shadow: var(--ring-brand); }

/* --- Buttons: crisper hover shadow on primary CTAs (login unaffected) ---- */
/* Only enriches the hover shadow tint; the base fill/size is untouched, and the
   login "Sign in" button already shares .btn:hover so its look is unchanged. */
.btn:not(.btn--ghost):hover { box-shadow: var(--shadow-brand-soft); }

/* --- Wide-desktop containers: let content breathe on large monitors ------ */
@media (min-width: 1440px) {
    :root { --maxw: 1240px; }
}

/* ============================================================================
   About page — presentation upgrade
   Scoped to `.about-page` so no other page changes, except one shared fix:
   centered section headings carried a floating vertical tick on the far left
   (the accent designed for LEFT-aligned heads). It is converted below into a
   centered underline accent, which reads correctly on every centered section.
   ============================================================================ */

/* Shared fix: centered section head accent → centered underline (all pages). */
.section-head--center h2 { padding-left: 0; padding-bottom: 10px; }
.section-head--center h2::before {
    left: 50%; right: auto; top: auto; bottom: 0; transform: translateX(-50%);
    width: 52px; height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

/* --- Hero: gradient-highlight the brand name + a touch more presence ------ */
.brand-grad {
    background: linear-gradient(120deg, var(--brand), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-hero--about { padding-bottom: clamp(18px, 3vw, 30px); }
.page-hero--about .eyebrow { color: var(--brand); }

/* Per-tile tone token, derived from the gradient-icon class already on the
   card. Lets the mission/vision cards, impact tiles and tech chips each glow in
   their own colour on hover — cohesive with the feature-card system. */
.about-page :is(.mv-card, .impact-card, .logo-chip):has(.is-blue)   { --c: #4f46e5; }
.about-page :is(.mv-card, .impact-card, .logo-chip):has(.is-violet) { --c: #7c3aed; }
.about-page :is(.mv-card, .impact-card, .logo-chip):has(.is-amber)  { --c: #f59e0b; }
.about-page :is(.mv-card, .impact-card, .logo-chip):has(.is-green)  { --c: #16a34a; }
.about-page :is(.mv-card, .impact-card, .logo-chip):has(.is-cyan)   { --c: #06b6d4; }
.about-page :is(.mv-card, .impact-card, .logo-chip):has(.is-pink)   { --c: #ec4899; }

/* --- Story block: gradient underline under the narrative heading --------- */
.about-page .prose h2 {
    display: inline-block; padding-bottom: 10px;
    background: linear-gradient(90deg, var(--brand), var(--accent)) left bottom / 56px 3px no-repeat;
}

/* --- Mission / vision cards: tinted left rail + tone-matched hover -------- */
.about-page .mv-card {
    position: relative; overflow: hidden;
    border-left: 3px solid color-mix(in srgb, var(--c, var(--brand)) 55%, transparent);
}
.about-page .mv-card:hover {
    border-color: color-mix(in srgb, var(--c, var(--brand)) 40%, var(--border));
    border-left-color: var(--c, var(--brand));
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--c, var(--brand)) 45%, transparent);
}

/* --- Impact tiles: tone-matched number, accent bar + a soft glow on hover - */
.about-page .impact-num {
    background: linear-gradient(135deg, var(--ink), var(--c, var(--brand)));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-page .impact-card::after {
    content: ""; position: absolute; inset: auto 0 -30% 0; height: 70%;
    background: radial-gradient(60% 100% at 50% 100%,
        color-mix(in srgb, var(--c, var(--brand)) 18%, transparent), transparent 70%);
    opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.about-page .impact-card:hover::after { opacity: 1; }
.about-page .impact-card:hover {
    border-color: color-mix(in srgb, var(--c, var(--brand)) 45%, var(--border));
    box-shadow: 0 20px 45px -20px color-mix(in srgb, var(--c, var(--brand)) 50%, transparent);
}

/* --- Tech chips: colour-matched ring + lift on hover --------------------- */
.about-page .logo-chip:hover {
    border-color: color-mix(in srgb, var(--c, var(--brand)) 55%, var(--border));
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--c, var(--brand)) 55%, transparent);
}

/* --- Scroll-reveal cascade: cards ease in with a light stagger ----------- */
@media (prefers-reduced-motion: no-preference) {
    .about-page .feature-grid > .reveal,
    .about-page .impact-grid > .reveal { transition-delay: calc(var(--i, 0) * 60ms); }
}

/* =========================================================================
   Internship detail — scoped polish (does NOT affect the course page, which
   uses the same base .course-hero / .buy-card / .course-detail classes).
   ========================================================================= */

/* Hero: a soft brand→accent glow behind the copy so the header feels richer. */
.course-hero--internship { position: relative; overflow: hidden; }
.course-hero--internship::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(60% 90% at 12% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
        radial-gradient(55% 80% at 100% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%);
}
.course-hero--internship .course-hero-inner { position: relative; z-index: 1; }

/* Meta row: turn the plain "1–6 Months / Online / Certificate" text into
   subtle bordered pills so the key facts read as tags. */
.course-hero--internship .course-hero-meta { gap: 10px; }
.course-hero--internship .course-hero-meta > span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--card) 70%, transparent);
    border: 1px solid var(--border); color: var(--ink);
    font-weight: 600; line-height: 1.2;
}

/* Buy card: lift the price with a brand→accent gradient and give the whole
   card a gentle hover so it feels interactive. */
.course-hero--internship .buy-price .price {
    background: linear-gradient(90deg, var(--brand), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.course-hero--internship .buy-price .price--free {
    background: none; -webkit-text-fill-color: currentColor; color: var(--ok);
}
.course-hero--internship .buy-card { transition: box-shadow .2s ease, transform .2s ease; }
.course-hero--internship .buy-card:hover { box-shadow: var(--shadow-lg, 0 24px 50px -24px rgba(0,0,0,.45)); }

/* Detail side cards: a thin brand accent strip along the top edge + a matching
   heading colour so "Skills you'll gain" / "Eligibility" feel designed. */
.internship-detail .side-card { position: relative; overflow: hidden; }
.internship-detail .side-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}
.internship-detail .side-card h2 {
    background: linear-gradient(90deg, var(--brand), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* "About this internship" heading gets the same brand emphasis. */
.internship-detail .course-detail-main .prose h2:first-child { color: var(--brand); }

/* --- Show/hide password toggle (enhanced by /assets/js/password-toggle.js) ---
   Works for the student auth screens (.stu-af) and any other password field. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input[type] { padding-right: 46px; }
.pw-toggle {
    position: absolute; top: 0; right: 0; height: 100%; width: 44px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; margin: 0; border: 0; background: none;
    color: var(--ink, currentColor); opacity: .55; cursor: pointer;
    border-radius: 0 12px 12px 0;
}
.pw-toggle:hover { opacity: .9; }
.pw-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; opacity: 1; }
.pw-toggle svg { width: 20px; height: 20px; display: block; pointer-events: none; }
.pw-toggle .pw-eye-off { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye-off { display: block; }