/* ============================================================
   VidyaHub Landing Pages — Design System + Components
   Loaded only on public/landing pages via LandingLayout
   ============================================================ */
/* ============================================================
   VidyaHub — School Management Platform
   Design system (shared across all pages)
   ============================================================ */
:root {
    /* Colors */
    --indigo: #3730a3;
    --indigo-dark: #1e1b4b;
    --indigo-mid: #4f46e5;
    --indigo-soft: #eef2ff;
    --coral: #ea580c;
    --coral-soft: #fff1ea;
    --teal: #0d9488;
    --teal-soft: #ccfbf1;
    --amber: #d97706;
    --amber-soft: #fef3c7;
    --rose: #e11d48;
    --emerald: #059669;
    --ink: #0b1020;
    --ink-2: #2c3147;
    --muted: #6b7280;
    --line: rgba(11,16,32,.08);
    --line-strong: rgba(11,16,32,.14);
    --paper: #ffffff;
    --bg: #faf7f2; /* warm cream */
    --bg-2: #f3eee5;
    --bg-cool: #f1f4fa;
    --shadow-sm: 0 2px 4px rgba(11,16,32,.04);
    --shadow: 0 24px 64px -28px rgba(30,27,75,.35);
    --shadow-lg: 0 40px 100px -32px rgba(30,27,75,.45);
    --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
    --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0;
    /* Kill any phantom horizontal scrollbar from decorative bleed elements.
       'clip' (not 'hidden') does NOT create a scroll container, so the sticky
       nav keeps working. */
    overflow-x: clip;
    max-width: 100%;
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01","cv11";
}

img {
    display: block;
    max-width: 100%
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit
}

input, select, textarea {
    font-family: inherit
}

h1, h2, h3, h4, h5 {
    margin: 0;
    letter-spacing: -.02em;
    line-height: 1.05;
    font-weight: 600
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.02
}

.container {
    max-width: 100%; /* full-width landing: span the viewport, only side padding */
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 48px)
}

    .container.narrow {
        max-width: 1080px
    }

    .container.tight {
        max-width: 840px
    }

.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--indigo);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

    .eyebrow::before {
        content: "";
        width: 18px;
        height: 1px;
        background: var(--indigo)
    }

    .eyebrow.on-dark {
        color: #fbbf24
    }

        .eyebrow.on-dark::before {
            background: #fbbf24
        }

    .eyebrow.coral {
        color: var(--coral)
    }

        .eyebrow.coral::before {
            background: var(--coral)
        }

    .eyebrow.teal {
        color: var(--teal)
    }

        .eyebrow.teal::before {
            background: var(--teal)
        }

    .eyebrow.amber {
        color: var(--amber)
    }

        .eyebrow.amber::before {
            background: var(--amber)
        }

/* ===================== TOP BAR ===================== */
.topbar {
    background: var(--indigo-dark);
    color: #fff;
    font-size: 13px
}

    .topbar .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        gap: 24px;
        flex-wrap: wrap
    }

    .topbar .left {
        display: flex;
        gap: 24px;
        align-items: center;
        flex-wrap: wrap
    }

        .topbar .left .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #fbbf24;
            display: inline-block;
            margin-right: 8px
        }

    .topbar a {
        color: #cbd5ff;
        transition: .2s
    }

        .topbar a:hover {
            color: #fff
        }

    .topbar .right {
        display: flex;
        gap: 18px;
        align-items: center
    }

    .topbar .divider {
        width: 1px;
        height: 14px;
        background: rgba(255,255,255,.16)
    }

/* ===================== NAV ===================== */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250,247,242,.92);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--line);
}

    .nav .row {
        display: flex;
        flex-wrap: nowrap; /* override Bootstrap .row's flex-wrap:wrap so the brand/menu/cta stay on one line */
        align-items: center;
        justify-content: flex-start; /* brand + menu grouped at the left, not spread across */
        padding: 14px 0;
        gap: 28px
    }

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--serif);
    font-size: 22px;
    position: relative;
}

    .brand-mark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .brand-mark .glyph {
        position: relative;
        z-index: 1;
        line-height: 1
    }

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1
}

    .brand-text .name {
        font-family: var(--serif);
        font-size: 22px;
        font-weight: 500;
        color: var(--indigo-dark);
        letter-spacing: -.01em
    }

        .brand-text .name em {
            font-style: italic;
            color: var(--coral)
        }

    .brand-text .tag {
        font-family: var(--mono);
        font-size: 9.5px;
        letter-spacing: .16em;
        color: var(--muted);
        text-transform: uppercase;
        margin-top: 3px
    }

.menu {
    display: flex;
    gap: 2px;
    align-items: center
}

    .menu > .item {
        position: relative
    }

        .menu > .item > a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 9px 14px;
            border-radius: 999px;
            font-size: 14px;
            font-weight: 500;
            color: var(--ink-2);
            transition: .2s;
        }

            .menu > .item > a:hover, .menu > .item > a.active {
                background: var(--indigo-soft);
                color: var(--indigo-dark)
            }

            .menu > .item > a .chev {
                width: 7px;
                height: 7px;
                border-right: 1.5px solid currentColor;
                border-bottom: 1.5px solid currentColor;
                transform: rotate(45deg) translate(-1px,-1px);
                opacity: .55
            }

    .menu .drop {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 14px;
        min-width: 300px;
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: .18s;
        display: grid;
        gap: 2px;
    }

    .menu .item:hover .drop {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }

    .menu .drop a {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 14px;
        color: var(--ink)
    }

        .menu .drop a:hover {
            background: var(--indigo-soft);
            color: var(--indigo-dark)
        }

        .menu .drop a span {
            font-size: 12px;
            color: var(--muted);
            font-weight: 400
        }

.nav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; /* push Sign In / Register (or Dashboard + profile) to the right edge */
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border-radius: 11px;
    font-weight: 600;
    font-size: 14px;
    transition: .2s;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}

    .btn > * {
        pointer-events: none
    }

a:not([href]) {
    cursor: pointer
}

a.btn, a.dl, a.ad, a.act, a.gal, a.news-item, a.school-card, a.role-card {
    cursor: pointer
}

.btn-primary {
    background: var(--indigo);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(55,48,163,.6)
}

    .btn-primary:hover {
        background: var(--indigo-dark);
        transform: translateY(-1px)
    }

.btn-ghost {
    border-color: var(--line-strong);
    color: var(--ink)
}

    .btn-ghost:hover {
        border-color: var(--indigo);
        color: var(--indigo);
        background: var(--indigo-soft)
    }

.btn-coral {
    background: var(--coral);
    color: #fff
}

    .btn-coral:hover {
        background: #c2410c
    }

.btn-amber {
    background: #fbbf24;
    color: var(--indigo-dark)
}

    .btn-amber:hover {
        background: #f59e0b
    }

.btn-white {
    background: #fff;
    color: var(--indigo-dark)
}

    .btn-white:hover {
        background: #f3f4f6
    }

.btn-lg {
    padding: 14px 26px;
    font-size: 15px;
    border-radius: 13px
}

.btn .arr {
    width: 13px;
    height: 13px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 2px
}

.hamburger {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    border: 1px solid var(--line-strong);
    align-items: center;
    justify-content: center;
    background: #fff
}

    .hamburger span {
        width: 18px;
        height: 1.5px;
        background: var(--ink);
        position: relative;
        display: block
    }

        .hamburger span::before, .hamburger span::after {
            content: "";
            position: absolute;
            left: 0;
            width: 18px;
            height: 1.5px;
            background: var(--ink)
        }

        .hamburger span::before {
            top: -6px
        }

        .hamburger span::after {
            top: 6px
        }

/* Collapse the desktop nav into the hamburger / mobile menu on narrow screens so
   the single-line nav (forced by flex-wrap:nowrap) never overflows the viewport
   and produces a horizontal scrollbar. */
@media (max-width: 1200px) {
    .nav .menu { display: none; }
    .nav-cta > a { display: none; } /* hide Sign In / Register / Dashboard / profile chip */
    .hamburger { display: inline-flex; }
}

.mob-menu {
    position: fixed;
    inset: 0;
    background: rgba(11,16,32,.55);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: .25s;
    backdrop-filter: blur(8px)
}

    .mob-menu.open {
        opacity: 1;
        visibility: visible
    }

    .mob-menu .panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(360px,86vw);
        background: #fff;
        padding: 80px 28px 28px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        transform: translateX(100%);
        transition: .3s
    }

    .mob-menu.open .panel {
        transform: translateX(0)
    }

    .mob-menu .panel a {
        padding: 14px 0;
        font-size: 17px;
        font-family: var(--serif);
        font-weight: 500;
        color: var(--indigo-dark);
        border-bottom: 1px solid var(--line)
    }

.mob-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 24px
}

/* ===================== HERO ===================== */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    padding: 80px 0 0
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 85% 30%, rgba(234,88,12,.08), transparent 50%), radial-gradient(circle at 15% 80%, rgba(55,48,163,.1), transparent 50%);
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(to right, rgba(11,16,32,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(11,16,32,.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.hero .container {
    position: relative;
    z-index: 1
}

.hero-slides {
    position: relative;
    min-height: 580px
}

.hero-slide {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
    opacity: 0;
    position: absolute;
    inset: 0;
    transition: opacity .9s ease;
    pointer-events: none;
}

    .hero-slide.is-active {
        opacity: 1;
        position: relative;
        pointer-events: auto;
        z-index: 2
    }

.hero-text .badge-row {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    box-shadow: var(--shadow-sm);
}

    .hero-badge .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--emerald);
        box-shadow: 0 0 0 3px rgba(5,150,105,.18)
    }

.hero-text h1 {
    font-size: clamp(40px,5.6vw,80px);
    color: var(--indigo-dark);
    margin: 0 0 24px;
    font-weight: 400
}

    .hero-text h1 em {
        font-style: italic;
        color: var(--coral)
    }

    .hero-text h1 .accent {
        color: var(--indigo)
    }

.hero-text p {
    font-size: 18px;
    color: var(--ink-2);
    max-width: 520px;
    margin: 0 0 32px
}

.hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.hero-visual {
    position: relative
}

.hero-float {
    position: absolute;
    width: 56px;
    height: 56px;
    color: var(--indigo);
    opacity: .55;
    z-index: 1;
    pointer-events: none;
    animation: hero-float-bob 5.5s ease-in-out infinite;
}

.hero-float-1 {
    top: -22px;
    right: 32px;
    animation-delay: 0s;
}

.hero-float-2 {
    bottom: -18px;
    left: -20px;
    color: var(--coral);
    opacity: .5;
    width: 44px;
    height: 44px;
    animation-delay: 1.4s;
}

@keyframes hero-float-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(4deg); }
}

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

.hero-card {
    background: #fff;
    border-radius: 24px;
    padding: 0;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    overflow: hidden;
}

    .hero-card .browser-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
        background: var(--bg);
    }

        .hero-card .browser-bar .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #cbd5e1
        }

            .hero-card .browser-bar .dot:nth-child(1) {
                background: #ef4444
            }

            .hero-card .browser-bar .dot:nth-child(2) {
                background: #fbbf24
            }

            .hero-card .browser-bar .dot:nth-child(3) {
                background: #10b981
            }

        .hero-card .browser-bar .url {
            margin-left: 14px;
            flex: 1;
            font-family: var(--mono);
            font-size: 11px;
            color: var(--muted);
            background: #fff;
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid var(--line);
        }

.dashboard {
    padding: 24px;
    min-height: 420px
}

    .dashboard .topline {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 20px
    }

        .dashboard .topline h4 {
            font-family: var(--sans);
            font-size: 18px;
            color: var(--ink);
            font-weight: 600
        }

        .dashboard .topline .stamp {
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .14em;
            color: var(--muted);
            text-transform: uppercase
        }

    .dashboard .kpis {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 12px;
        margin-bottom: 20px
    }

.kpi {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px
}

    .kpi .label {
        font-size: 11px;
        color: var(--muted);
        font-family: var(--mono);
        text-transform: uppercase;
        letter-spacing: .1em;
        margin-bottom: 8px
    }

    .kpi .value {
        font-family: var(--serif);
        font-size: 30px;
        color: var(--indigo);
        line-height: 1;
        font-weight: 500
    }

    .kpi .delta {
        font-size: 11px;
        color: var(--emerald);
        margin-top: 6px;
        font-weight: 600
    }

    .kpi.coral .value {
        color: var(--coral)
    }

    .kpi.teal .value {
        color: var(--teal)
    }

.dashboard .chart {
    background: var(--bg);
    border-radius: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    height: 140px;
    position: relative;
    overflow: hidden;
}

.dashboard .chart-label {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 12px
}

.dashboard .chart svg {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    height: 80px
}

.dashboard .activity {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px
}

.activity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--ink-2)
}

    .activity-row .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--indigo)
    }

    .activity-row .ts {
        margin-left: auto;
        font-family: var(--mono);
        color: var(--muted);
        font-size: 10px
    }

.hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 48px;
    padding-bottom: 80px
}

.dots {
    display: flex;
    gap: 8px;
    align-items: center
}

    .dots button {
        width: 30px;
        height: 3px;
        border-radius: 3px;
        background: rgba(11,16,32,.18);
        transition: .25s
    }

        .dots button.on {
            background: var(--indigo);
            width: 48px
        }

.arrows {
    display: flex;
    gap: 8px
}

    .arrows button {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .2s
    }

        .arrows button:hover {
            background: var(--indigo);
            color: #fff;
            border-color: var(--indigo)
        }

    .arrows .ic {
        width: 9px;
        height: 9px;
        border-right: 1.5px solid currentColor;
        border-top: 1.5px solid currentColor
    }

    .arrows .prev .ic {
        transform: rotate(-135deg)
    }

    .arrows .next .ic {
        transform: rotate(45deg)
    }

/* ===================== LOGO STRIP ===================== */
.logos {
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 32px 0
}

.logos-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap
}

    .logos-row .label {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: .16em;
        text-transform: uppercase
    }

    .logos-row .marks {
        display: flex;
        gap: 48px;
        align-items: center;
        flex-wrap: wrap
    }

    .logos-row .mark {
        font-family: var(--serif);
        font-size: 18px;
        color: var(--ink-2);
        opacity: .6;
        font-style: italic
    }

/* ===================== SECTION ===================== */
section {
    padding: 120px 0;
    position: relative
}

.section-head {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    margin-bottom: 72px;
    align-items: end
}

    .section-head h2 {
        font-size: clamp(36px,4.4vw,62px);
        color: var(--indigo-dark)
    }

        .section-head h2 em {
            font-style: italic;
            color: var(--coral);
            font-weight: 400
        }

        .section-head h2 .accent {
            color: var(--indigo)
        }

    .section-head .lede {
        font-size: 18px;
        color: var(--ink-2);
        max-width: 560px
    }

        .section-head .lede p {
            margin: 0
        }

/* ===================== PAGE HERO ===================== */
.page-hero {
    background: linear-gradient(180deg,var(--indigo-dark) 0%,var(--indigo) 100%);
    color: #fff;
    padding: 100px 0 100px;
    position: relative;
    overflow: hidden;
}

    .page-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 80% 20%, rgba(251,191,36,.16), transparent 50%), radial-gradient(circle at 10% 90%, rgba(234,88,12,.18), transparent 50%);
    }

    .page-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
        background-size: 64px 64px;
        mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    }

    .page-hero .container {
        position: relative;
        z-index: 1
    }

.crumbs {
    display: flex;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fbbf24;
    margin-bottom: 24px
}

    .crumbs a {
        opacity: .75;
        transition: .2s
    }

        .crumbs a:hover {
            opacity: 1
        }

    .crumbs .sep {
        opacity: .4
    }

.page-hero h1 {
    font-size: clamp(44px,5.8vw,86px);
    color: #fff;
    max-width: 980px;
    font-weight: 400
}

    .page-hero h1 em {
        font-style: italic;
        color: #fbbf24
    }

    .page-hero h1 .accent {
        color: #fb923c
    }

.page-hero .sub {
    font-size: 18px;
    color: rgba(255,255,255,.74);
    max-width: 640px;
    margin-top: 24px
}

/* ===================== FEATURES ===================== */
.features {
    background: var(--paper)
}

.feat-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    background: #fff
}

.feat {
    padding: 36px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    transition: .2s
}

    .feat:hover {
        background: var(--bg)
    }

    .feat:nth-child(3n) {
        border-right: 0
    }

    .feat:nth-last-child(-n+3) {
        border-bottom: 0
    }

.feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--indigo-soft);
    color: var(--indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 20px;
}

.feat:nth-child(2) .feat-icon {
    background: var(--coral-soft);
    color: var(--coral)
}

.feat:nth-child(3) .feat-icon {
    background: var(--teal-soft);
    color: var(--teal)
}

.feat:nth-child(4) .feat-icon {
    background: var(--amber-soft);
    color: var(--amber)
}

.feat:nth-child(5) .feat-icon {
    background: var(--indigo-soft);
    color: var(--indigo)
}

.feat:nth-child(6) .feat-icon {
    background: var(--coral-soft);
    color: var(--coral)
}

.feat:nth-child(7) .feat-icon {
    background: var(--teal-soft);
    color: var(--teal)
}

.feat:nth-child(8) .feat-icon {
    background: var(--amber-soft);
    color: var(--amber)
}

.feat:nth-child(9) .feat-icon {
    background: var(--indigo-soft);
    color: var(--indigo)
}

.feat h3 {
    font-family: var(--sans);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
    letter-spacing: -.005em
}

.feat p {
    font-size: 14px;
    color: var(--ink-2);
    margin: 0;
    line-height: 1.6
}

.feat .tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 14px;
    display: inline-block
}

/* ===================== SCHOOL LIST ===================== */
.schools-list {
    background: var(--bg-2)
}

.search-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
    background: #fff;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    align-items: center;
}

    .search-bar input {
        flex: 1;
        border: 0;
        background: transparent;
        outline: none;
        padding: 12px 16px;
        font-size: 15px;
        color: var(--ink);
    }

    .search-bar select {
        border: 0;
        background: var(--bg);
        outline: none;
        padding: 12px 14px;
        font-size: 14px;
        color: var(--ink);
        border-radius: 10px;
        cursor: pointer;
    }

.school-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.school-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    transition: .25s;
    display: flex;
    flex-direction: column;
    position: relative;
}

    .school-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow);
        border-color: var(--indigo)
    }

.school-cover {
    height: 120px;
    position: relative;
    overflow: hidden;
    border-radius: 18px 18px 0 0
}

.school-card .verified {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    color: var(--teal);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    backdrop-filter: blur(4px);
}

.school-card .seal {
    position: absolute;
    top: 78px;
    left: 22px;
    z-index: 2;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg,var(--indigo),var(--indigo-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
    border: 4px solid #fff;
    box-shadow: 0 6px 18px -6px rgba(55,48,163,.5);
}

.school-card .head {
    padding: 36px 22px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

    .school-card .head h3 {
        font-family: var(--sans);
        font-size: 18px;
        font-weight: 600;
        color: var(--ink);
        margin: 0;
        line-height: 1.25
    }

    .school-card .head .loc {
        font-size: 12px;
        color: var(--muted);
        font-family: var(--mono);
        letter-spacing: .04em;
        display: flex;
        align-items: center;
        gap: 6px
    }

.school-card .body {
    padding: 0 22px 18px;
    flex: 1
}

    .school-card .body p {
        font-size: 13px;
        color: var(--ink-2);
        margin: 0;
        line-height: 1.5
    }

.school-card .meta {
    display: flex;
    gap: 14px;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--muted);
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .08em
}

    .school-card .meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px
    }

/* school cover patterns (placeholders) */
.cover-1 {
    background: linear-gradient(135deg,#3730a3 0%,#1e1b4b 100%)
}

.cover-2 {
    background: linear-gradient(135deg,#ea580c 0%,#9a3412 100%)
}

.cover-3 {
    background: linear-gradient(135deg,#0d9488 0%,#134e4a 100%)
}

.cover-4 {
    background: linear-gradient(135deg,#d97706 0%,#7c2d12 100%)
}

.cover-5 {
    background: linear-gradient(135deg,#4f46e5 0%,#3730a3 100%)
}

.cover-6 {
    background: linear-gradient(135deg,#e11d48 0%,#9f1239 100%)
}

.cover-7 {
    background: linear-gradient(135deg,#0891b2 0%,#155e75 100%)
}

.cover-8 {
    background: linear-gradient(135deg,#7c3aed 0%,#4c1d95 100%)
}

.cover-9 {
    background: linear-gradient(135deg,#059669 0%,#064e3b 100%)
}

.school-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 24px 24px;
}

.school-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(0,0,0,.18) 100%);
}

.school-cover .crest-bg {
    position: absolute;
    right: 20px;
    bottom: 14px;
    font-family: var(--serif);
    font-size: 64px;
    font-style: italic;
    font-weight: 500;
    color: rgba(255,255,255,.18);
    line-height: 1;
    letter-spacing: -.02em;
}

/* ===================== ADS ===================== */
.ads {
    background: var(--paper)
}

.ad-grid {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 18px
}

.ad {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    transition: .2s;
    position: relative;
}

    .ad:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow)
    }

    .ad .ad-cover {
        aspect-ratio: 16/9;
        position: relative;
        overflow: hidden
    }

        .ad .ad-cover::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg,transparent 40%,rgba(11,16,32,.7));
            z-index: 1;
        }

        .ad .ad-cover .label {
            position: absolute;
            left: 14px;
            top: 14px;
            z-index: 2;
            background: #fff;
            color: var(--indigo-dark);
            font-family: var(--mono);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .14em;
            text-transform: uppercase;
            padding: 5px 10px;
            border-radius: 6px;
        }

        .ad .ad-cover .school {
            position: absolute;
            left: 18px;
            bottom: 14px;
            z-index: 2;
            color: #fff;
            font-size: 13px;
            font-weight: 500;
        }

            .ad .ad-cover .school small {
                display: block;
                font-family: var(--mono);
                font-size: 10px;
                letter-spacing: .1em;
                opacity: .7;
                margin-top: 2px
            }

.ad-body {
    padding: 22px;
    flex: 1;
    display: flex;
    flex-direction: column
}

    .ad-body h3 {
        font-family: var(--sans);
        font-size: 18px;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 8px;
        line-height: 1.3
    }

    .ad-body p {
        font-size: 13px;
        color: var(--ink-2);
        margin: 0 0 14px;
        flex: 1;
        line-height: 1.55
    }

    .ad-body .cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 14px;
        border-top: 1px solid var(--line)
    }

        .ad-body .cta .price {
            font-family: var(--serif);
            font-size: 20px;
            color: var(--coral);
            font-weight: 500
        }

            .ad-body .cta .price small {
                font-family: var(--mono);
                font-size: 10px;
                color: var(--muted);
                font-weight: 400;
                letter-spacing: .06em;
                display: block;
                margin-top: -2px
            }

        .ad-body .cta a {
            font-size: 12px;
            font-weight: 600;
            color: var(--indigo);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

.ad.featured {
    grid-column: span 6;
    grid-row: span 2
}

.ad.large {
    grid-column: span 6
}

.ad.standard {
    grid-column: span 4
}

.ad.small {
    grid-column: span 3
}

/* ===================== NEWS ===================== */
.news {
    background: var(--bg-2)
}

.news-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px
}

.news-feature {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}

    .news-feature .cover {
        height: 300px;
        position: relative
    }

    .news-feature .body {
        padding: 32px
    }

        .news-feature .body .cat {
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--coral);
            margin-bottom: 10px;
            font-weight: 600
        }

        .news-feature .body h3 {
            font-family: var(--serif);
            font-size: 34px;
            color: var(--ink);
            margin-bottom: 14px;
            line-height: 1.1;
            font-weight: 500
        }

        .news-feature .body p {
            color: var(--ink-2);
            margin: 0 0 18px
        }

    .news-feature .meta {
        display: flex;
        gap: 12px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: .06em
    }

.news-list {
    display: flex;
    flex-direction: column;
    gap: 0
}

.news-item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    transition: .2s;
    align-items: center
}

    .news-item:first-child {
        border-top: 1px solid var(--line)
    }

    .news-item:hover {
        padding-left: 6px
    }

    .news-item .date {
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

.build-cover {
    background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ic-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--teal-soft);
    color: var(--teal);
    font-weight: 700;
}

/* ===================== VACANCIES ===================== */
.vacancies {
    background: var(--paper)
}

.vacancy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px
}

.vacancy-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: .2s;
}

    .vacancy-card:hover {
        border-color: var(--amber);
        box-shadow: var(--shadow-sm);
    }

    .vacancy-card svg {
        color: var(--amber);
        margin-bottom: 6px;
    }

    .vacancy-card h4 {
        font-family: var(--sans);
        font-size: 17px;
        font-weight: 600;
        color: var(--ink);
        margin: 0;
    }

.vacancy-school {
    font-size: 12px;
    color: var(--muted);
    font-family: var(--mono);
    letter-spacing: .04em;
}

.vacancy-card p {
    color: var(--ink-2);
    font-size: 14px;
    margin: 6px 0;
}

.vacancy-deadline {
    font-size: 12px;
    color: var(--coral);
    font-weight: 600;
    margin-bottom: 8px;
}

        .news-item .date .d {
            font-family: var(--serif);
            font-size: 36px;
            color: var(--indigo);
            line-height: 1;
            font-weight: 500
        }

        .news-item .date .m {
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted);
            margin-top: 4px
        }

    .news-item .content .cat {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--coral);
        margin-bottom: 5px;
        font-weight: 600
    }

    .news-item .content h4 {
        font-family: var(--sans);
        font-size: 16px;
        font-weight: 600;
        color: var(--ink);
        line-height: 1.3;
        margin-bottom: 4px
    }

    .news-item .content p {
        font-size: 13px;
        color: var(--ink-2);
        margin: 0;
        max-width: 480px
    }

    .news-item .arr {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .2s
    }

    .news-item:hover .arr {
        background: var(--indigo);
        color: #fff;
        border-color: var(--indigo)
    }

    .news-item .arr .ic {
        width: 8px;
        height: 8px;
        border-right: 1.5px solid currentColor;
        border-top: 1.5px solid currentColor;
        transform: rotate(45deg)
    }

/* ===================== GALLERY ===================== */
.gallery {
    background: var(--paper)
}

.gal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap
}

    .gal-tabs button {
        padding: 9px 16px;
        border-radius: 10px;
        border: 1px solid var(--line-strong);
        font-size: 13px;
        color: var(--ink-2);
        transition: .2s;
        font-weight: 500;
        background: #fff;
    }

        .gal-tabs button.on {
            background: var(--indigo);
            color: #fff;
            border-color: var(--indigo)
        }

.gal-grid {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-auto-rows: 120px;
    gap: 14px
}

.gal {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--line);
    transition: .2s
}

    .gal:hover {
        transform: scale(1.01);
        box-shadow: var(--shadow)
    }

    .gal .cap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 12px 14px;
        background: linear-gradient(180deg,transparent,rgba(11,16,32,.85));
        color: #fff;
        font-size: 12px;
        opacity: 0;
        transition: .2s;
        z-index: 2
    }

    .gal:hover .cap {
        opacity: 1
    }

    .gal .school-tag {
        position: absolute;
        top: 10px;
        left: 10px;
        background: rgba(255,255,255,.95);
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--indigo-dark);
        padding: 4px 8px;
        border-radius: 6px;
        font-weight: 600;
        z-index: 2
    }

    .gal.s1 {
        grid-column: span 5;
        grid-row: span 3
    }

    .gal.s2 {
        grid-column: span 4;
        grid-row: span 2
    }

    .gal.s3 {
        grid-column: span 3;
        grid-row: span 2
    }

    .gal.s4 {
        grid-column: span 4;
        grid-row: span 3
    }

    .gal.s5 {
        grid-column: span 4;
        grid-row: span 2
    }

    .gal.s6 {
        grid-column: span 4;
        grid-row: span 2
    }

    .gal.s7 {
        grid-column: span 3;
        grid-row: span 2
    }

    .gal.s8 {
        grid-column: span 5;
        grid-row: span 3
    }

/* placeholder gradients */
.ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.5);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase
}

    .ph::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
        background-size: 32px 32px;
    }

.ph-1 {
    background: linear-gradient(135deg,#3730a3,#1e1b4b)
}

.ph-2 {
    background: linear-gradient(135deg,#ea580c,#9a3412)
}

.ph-3 {
    background: linear-gradient(135deg,#0d9488,#134e4a)
}

.ph-4 {
    background: linear-gradient(135deg,#d97706,#92400e)
}

.ph-5 {
    background: linear-gradient(135deg,#4f46e5,#3730a3)
}

.ph-6 {
    background: linear-gradient(135deg,#e11d48,#9f1239)
}

.ph-7 {
    background: linear-gradient(135deg,#0891b2,#155e75)
}

.ph-8 {
    background: linear-gradient(135deg,#7c3aed,#4c1d95)
}

.ph-9 {
    background: linear-gradient(135deg,#059669,#064e3b)
}

/* ===================== STATS ===================== */
.stats-band {
    background: var(--indigo-dark);
    color: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden
}

    .stats-band::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 50%,rgba(234,88,12,.18),transparent 50%)
    }

    .stats-band::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 80% 50%,rgba(251,191,36,.14),transparent 50%)
    }

    .stats-band .container {
        position: relative;
        z-index: 1
    }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0
}

.stat-cell {
    padding: 24px 32px;
    border-right: 1px solid rgba(255,255,255,.14)
}

    .stat-cell:last-child {
        border-right: 0
    }

    .stat-cell .n {
        font-family: var(--serif);
        font-size: 64px;
        color: #fff;
        line-height: 1;
        font-weight: 400
    }

        .stat-cell .n em {
            font-style: normal;
            color: #fbbf24
        }

    .stat-cell .l {
        margin-top: 10px;
        font-size: 14px;
        color: rgba(255,255,255,.7)
    }

/* ===================== CTA ===================== */
.cta-band {
    background: var(--indigo);
    color: #fff;
    border-radius: 32px;
    padding: 80px;
    margin: 80px auto;
    max-width: 1240px;
    text-align: center;
    position: relative;
    overflow: hidden
}

    .cta-band::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 80% 20%,rgba(251,191,36,.25),transparent 50%)
    }

    .cta-band::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 10% 80%,rgba(234,88,12,.25),transparent 50%)
    }

    .cta-band > * {
        position: relative;
        z-index: 1
    }

    .cta-band h2 {
        font-size: clamp(36px,4.5vw,60px);
        color: #fff;
        margin: 14px 0 18px;
        font-family: var(--serif);
        font-weight: 400
    }

        .cta-band h2 em {
            color: #fbbf24;
            font-style: italic
        }

    .cta-band p {
        font-size: 18px;
        color: rgba(255,255,255,.85);
        max-width: 600px;
        margin: 0 auto 32px
    }

    .cta-band .actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap
    }

/* ===================== FORMS ===================== */
.form-page {
    background: var(--bg);
    padding: 60px 0 100px
}

.form-shell {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}

.form-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 48px;
    box-shadow: var(--shadow);
}

.form-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}

    .form-progress .step {
        flex: 1;
        height: 4px;
        border-radius: 2px;
        background: var(--line);
        position: relative;
    }

        .form-progress .step.done {
            background: var(--indigo)
        }

        .form-progress .step.current {
            background: var(--coral)
        }

.form-step-title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px
}

.form-card h2 {
    font-family: var(--serif);
    font-size: 38px;
    color: var(--indigo-dark);
    margin-bottom: 12px;
    line-height: 1.05;
    font-weight: 400
}

    .form-card h2 em {
        font-style: italic;
        color: var(--coral)
    }

.form-card .sub {
    color: var(--ink-2);
    margin-bottom: 36px;
    font-size: 15px;
    max-width: 520px
}

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

    .form-row.three {
        grid-template-columns: repeat(3,1fr)
    }

.field {
    display: flex;
    flex-direction: column;
    gap: 8px
}

    .field label {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--ink-2);
        font-weight: 600
    }

        .field label .req {
            color: var(--coral)
        }

    .field input, .field select, .field textarea {
        font-family: var(--sans);
        font-size: 15px;
        color: var(--ink);
        background: var(--bg);
        border: 1px solid var(--line);
        padding: 13px 16px;
        border-radius: 11px;
        transition: .2s;
        outline: none;
        width: 100%;
    }

    .field textarea {
        resize: vertical;
        min-height: 120px
    }

        .field input:focus, .field select:focus, .field textarea:focus {
            border-color: var(--indigo);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(55,48,163,.08)
        }

    .field .hint {
        font-size: 12px;
        color: var(--muted);
        margin-top: 2px
    }

    .field.check {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px
    }

        .field.check input {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            margin-top: 2px;
            accent-color: var(--indigo)
        }

        .field.check label {
            font-family: var(--sans);
            font-size: 14px;
            color: var(--ink-2);
            text-transform: none;
            letter-spacing: normal;
            font-weight: 400;
            line-height: 1.5
        }

            .field.check label a {
                color: var(--indigo);
                font-weight: 600
            }

.section-divider {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--indigo);
    margin: 32px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--line-strong);
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .section-divider .count {
        color: var(--muted);
        font-weight: 400
    }

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    gap: 12px;
    flex-wrap: wrap
}

.form-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    height: fit-content
}

.side-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px
}

    .side-card h3 {
        font-family: var(--serif);
        font-size: 24px;
        color: var(--indigo-dark);
        margin-bottom: 10px;
        font-weight: 500
    }

    .side-card p {
        font-size: 14px;
        color: var(--ink-2);
        margin: 0
    }

    .side-card ul {
        list-style: none;
        padding: 0;
        margin: 14px 0 0;
        display: flex;
        flex-direction: column;
        gap: 10px
    }

        .side-card ul li {
            font-size: 13px;
            color: var(--ink-2);
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding-left: 0
        }

            .side-card ul li::before {
                content: "✓";
                color: var(--emerald);
                font-weight: 700;
                flex-shrink: 0
            }

    .side-card.dark {
        background: var(--indigo-dark);
        color: #fff;
        border: 0
    }

        .side-card.dark h3 {
            color: #fff
        }

        .side-card.dark p {
            color: rgba(255,255,255,.74)
        }

        .side-card.dark ul li {
            color: rgba(255,255,255,.74)
        }

            .side-card.dark ul li::before {
                color: #fbbf24
            }

/* ===================== LOGIN PORTAL ===================== */
.login-shell {
    min-height: 100vh;
    background: var(--bg);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.login-side {
    background: linear-gradient(180deg,var(--indigo-dark) 0%,var(--indigo) 100%);
    color: #fff;
    padding: 48px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .login-side::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 80% 20%,rgba(251,191,36,.16),transparent 50%)
    }

    .login-side::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 10% 90%,rgba(234,88,12,.2),transparent 50%)
    }

    .login-side > * {
        position: relative;
        z-index: 1
    }

    .login-side .brand .name {
        color: #fff
    }

    .login-side .brand .tag {
        color: rgba(255,255,255,.6)
    }

    .login-side .pitch h2 {
        font-family: var(--serif);
        font-size: clamp(36px,3.6vw,52px);
        color: #fff;
        font-weight: 400;
        margin-bottom: 18px;
        line-height: 1.1
    }

        .login-side .pitch h2 em {
            font-style: italic;
            color: #fbbf24
        }

    .login-side .pitch p {
        color: rgba(255,255,255,.74);
        font-size: 16px;
        max-width: 440px
    }

    .login-side .testimonial {
        padding: 24px;
        border-radius: 18px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.1);
        margin-top: 40px
    }

        .login-side .testimonial .quote {
            font-family: var(--serif);
            font-size: 20px;
            color: #fff;
            font-style: italic;
            font-weight: 400;
            line-height: 1.4;
            margin-bottom: 18px
        }

        .login-side .testimonial .who {
            display: flex;
            align-items: center;
            gap: 14px
        }

        .login-side .testimonial .av {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: linear-gradient(135deg,#fbbf24,#ea580c);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--serif);
            font-size: 18px;
            font-weight: 500
        }

        .login-side .testimonial .who .n {
            font-size: 14px;
            font-weight: 600;
            color: #fff
        }

        .login-side .testimonial .who .r {
            font-size: 12px;
            color: rgba(255,255,255,.6);
            font-family: var(--mono);
            letter-spacing: .06em
        }

.login-illustration {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.login-illo-svg {
    width: 100%;
    max-width: 300px;
}

.illo-cap {
    transform-origin: 130px 40px;
    animation: illo-cap-bob 4.5s ease-in-out infinite;
}

.illo-book {
    animation: illo-book-rise .8s cubic-bezier(.2,.8,.2,1) both;
}

.illo-spark {
    animation: illo-sparkle 2.6s ease-in-out infinite;
}

.illo-spark-2 {
    animation-delay: 1.1s;
}

@keyframes illo-cap-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-2deg); }
}

@keyframes illo-book-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes illo-sparkle {
    0%, 100% { opacity: .3; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .illo-cap, .illo-book, .illo-spark { animation: none; }
}

.login-main {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 560px;
    margin: 0 auto;
    width: 100%
}

.login-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--indigo);
    margin-bottom: 12px
}

.login-main h1 {
    font-family: var(--serif);
    font-size: 42px;
    color: var(--indigo-dark);
    margin-bottom: 8px;
    line-height: 1.05;
    font-weight: 400
}

    .login-main h1 em {
        font-style: italic;
        color: var(--coral)
    }

.login-main .login-sub {
    color: var(--ink-2);
    margin-bottom: 32px
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px
}

    .login-form .submit {
        width: 100%;
        padding: 14px;
        font-size: 15px;
        font-weight: 600;
        background: var(--indigo);
        color: #fff;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: .2s;
    }

        .login-form .submit:hover {
            background: var(--indigo-dark)
        }

.login-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase
}

    .login-divider::before, .login-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--line)
    }

.login-help {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ink-2);
    flex-wrap: wrap;
    gap: 8px
}

    .login-help a {
        color: var(--indigo);
        font-weight: 600
    }

/* Blazor form controls inherit field styles */
.login-form input, .login-form select {
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 13px 16px;
    border-radius: 11px;
    transition: .2s;
    outline: none;
    width: 100%;
}

    .login-form input:focus, .login-form select:focus {
        border-color: var(--indigo);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(55,48,163,.08)
    }

/* ===================== FOOTER ===================== */
footer {
    background: var(--indigo-dark);
    color: #fff;
    padding: 80px 0 32px;
    position: relative;
    overflow: hidden
}

    footer::before {
        content: "";
        position: absolute;
        top: -160px;
        right: -100px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(234,88,12,.12),transparent 70%)
    }

    footer::after {
        content: "";
        position: absolute;
        bottom: -200px;
        left: -100px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(251,191,36,.08),transparent 70%)
    }

    footer .container {
        position: relative;
        z-index: 1
    }

.foot-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,.12)
}

.foot-brand {
    max-width: 360px
}

    .foot-brand p {
        font-size: 14px;
        color: rgba(255,255,255,.66);
        margin: 20px 0 24px
    }

    .foot-brand .brand .name {
        color: #fff
    }

    .foot-brand .brand .tag {
        color: #fbbf24
    }

.foot-col h5 {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #fbbf24;
    margin: 0 0 18px;
    font-weight: 600
}

.foot-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.foot-col a, .foot-col li {
    font-size: 14px;
    color: rgba(255,255,255,.7);
    transition: .2s
}

    .foot-col a:hover {
        color: #fff
    }

.foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    font-size: 13px;
    color: rgba(255,255,255,.5);
    flex-wrap: wrap;
    gap: 16px
}

.socials {
    display: flex;
    gap: 8px
}

    .socials a {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,.14);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .2s;
        font-size: 12px;
        font-weight: 600
    }

        .socials a:hover {
            background: #fbbf24;
            color: var(--indigo-dark);
            border-color: #fbbf24
        }