/* ============================================================================
   DCCPS · Design System  —  3 themes (light / dark / hacker)
   Single source of truth. Every component reads CSS custom-property tokens,
   so switching [data-theme] re-skins the entire site instantly.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS  —  shared
   ------------------------------------------------------------------------- */
:root {
    --font-display: 'Sora', 'Hind Siliguri', system-ui, sans-serif;
    --font-body:    'Inter', 'Hind Siliguri', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 26px;
    --r-xl: 36px;
    --r-pill: 999px;

    --maxw: 1320px;
    --nav-h: 76px;

    --ease:        cubic-bezier(.22, .61, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.3, .5, 1);

    --t-fast: .18s;
    --t-mid:  .35s;
    --t-slow: .6s;

    /* resolved lazily against each theme's --brand-rgb */
    --card-hover-border: rgba(var(--brand-rgb), .5);
}

/* ---- DARK (default) ---- */
:root,
[data-theme="dark"] {
    --bg:        #0A0E1A;
    --bg-2:      #06090F;
    --surface:   #111A2E;
    --surface-2: #18233C;
    --surface-3: #21304F;
    --border:    rgba(255, 255, 255, .075);
    --border-2:  rgba(255, 255, 255, .15);
    --text:      #E9EEF8;
    --text-dim:  #9AA7BE;
    --text-faint:#5E6A81;

    --brand:    #3B82F6;
    --brand-2:  #22D3EE;
    --brand-3:  #A78BFA;
    --accent:   #2DD4A7;
    --warn:     #FBBF24;
    --danger:   #F43F5E;
    --brand-rgb: 59, 130, 246;
    --accent-rgb: 45, 212, 167;

    --grad:      linear-gradient(120deg, #3B82F6, #22D3EE 52%, #A78BFA);
    --grad-warm: linear-gradient(120deg, #A78BFA, #F472B6);

    --shadow-sm:    0 2px 10px rgba(0, 0, 0, .45);
    --shadow:       0 22px 55px -16px rgba(0, 0, 0, .7);
    --shadow-lg:    0 44px 95px -26px rgba(0, 0, 0, .82);
    --shadow-brand: 0 26px 60px -20px rgba(var(--brand-rgb), .6);

    --glow-1: rgba(59, 130, 246, .34);
    --glow-2: rgba(167, 139, 250, .3);
    --glow-3: rgba(34, 211, 238, .24);
    --grid-line: rgba(130, 150, 210, .2);

    --code-bg:  #0C1322;
    --code-kw:  #C792EA;
    --code-fn:  #82AAFF;
    --code-str: #2DD4A7;
    --code-num: #F78C6C;
    --code-com: #54648A;
    --code-tag: #F472B6;

    color-scheme: dark;
}

/* ---- LIGHT ---- */
[data-theme="light"] {
    --bg:        #F4F6FB;
    --bg-2:      #FFFFFF;
    --surface:   #FFFFFF;
    --surface-2: #F0F3FA;
    --surface-3: #E6EBF6;
    --border:    rgba(15, 23, 42, .09);
    --border-2:  rgba(15, 23, 42, .17);
    --text:      #0E1726;
    --text-dim:  #4C586B;
    --text-faint:#8C95A6;

    --brand:    #2563EB;
    --brand-2:  #0891B2;
    --brand-3:  #7C3AED;
    --accent:   #0E9F6E;
    --warn:     #D97706;
    --danger:   #E11D48;
    --brand-rgb: 37, 99, 235;
    --accent-rgb: 14, 159, 110;

    --grad:      linear-gradient(120deg, #2563EB, #0891B2 52%, #7C3AED);
    --grad-warm: linear-gradient(120deg, #7C3AED, #DB2777);

    --shadow-sm:    0 2px 10px rgba(15, 23, 42, .07);
    --shadow:       0 22px 50px -18px rgba(15, 23, 42, .18);
    --shadow-lg:    0 44px 90px -30px rgba(15, 23, 42, .26);
    --shadow-brand: 0 26px 55px -20px rgba(var(--brand-rgb), .4);

    --glow-1: rgba(37, 99, 235, .2);
    --glow-2: rgba(124, 58, 237, .18);
    --glow-3: rgba(8, 145, 178, .15);
    --grid-line: rgba(37, 99, 235, .14);

    --code-bg:  #0C1322;
    --code-kw:  #C792EA;
    --code-fn:  #82AAFF;
    --code-str: #2DD4A7;
    --code-num: #F78C6C;
    --code-com: #54648A;
    --code-tag: #F472B6;

    color-scheme: light;
}

/* ---- HACKER ---- */
[data-theme="hacker"] {
    --bg:        #000000;
    --bg-2:      #000000;
    --surface:   #04130A;
    --surface-2: #07210F;
    --surface-3: #0A2E15;
    --border:    rgba(0, 255, 65, .22);
    --border-2:  rgba(0, 255, 65, .5);
    --text:      #4DFF7A;
    --text-dim:  #1FB84A;
    --text-faint:#0C7A2C;

    --brand:    #00FF41;
    --brand-2:  #39FF14;
    --brand-3:  #00FFC8;
    --accent:   #00FF41;
    --warn:     #E8FF2A;
    --danger:   #FF4646;
    --brand-rgb: 0, 255, 65;
    --accent-rgb: 0, 255, 65;

    --grad:      linear-gradient(120deg, #00FF41, #39FF14 52%, #00FFC8);
    --grad-warm: linear-gradient(120deg, #00FF41, #00FFC8);

    --shadow-sm:    0 2px 12px rgba(0, 255, 65, .2);
    --shadow:       0 20px 50px -16px rgba(0, 255, 65, .3);
    --shadow-lg:    0 40px 85px -26px rgba(0, 255, 65, .36);
    --shadow-brand: 0 24px 60px -18px rgba(0, 255, 65, .55);

    --glow-1: rgba(0, 255, 65, .22);
    --glow-2: rgba(0, 255, 200, .16);
    --glow-3: rgba(57, 255, 20, .2);
    --grid-line: rgba(0, 255, 65, .24);

    --code-bg:  #020A05;
    --code-kw:  #39FF14;
    --code-fn:  #00FFC8;
    --code-str: #B6FF6A;
    --code-num: #E8FF2A;
    --code-com: #0C7A2C;
    --code-tag: #00FF41;

    color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   2. BOOTSTRAP BRIDGE  —  make Bootstrap components inherit our tokens
   ------------------------------------------------------------------------- */
[data-theme] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--font-body);
    --bs-emphasis-color: var(--text);
    --bs-secondary-color: var(--text-dim);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface);
    --bs-border-color: var(--border);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color: var(--brand-2);
    --bs-heading-color: var(--text);
    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
}

[data-theme] .bg-light   { background-color: var(--surface-2) !important; }
[data-theme] .bg-white   { background-color: var(--surface) !important; }
[data-theme] .bg-body    { background-color: var(--bg) !important; }
[data-theme] .bg-primary { background: var(--brand) !important; }
[data-theme] .text-primary   { color: var(--brand) !important; }
[data-theme] .text-muted,
[data-theme] .text-secondary { color: var(--text-dim) !important; }
[data-theme] .text-dark,
[data-theme] .text-black,
[data-theme] .text-reset     { color: var(--text) !important; }
[data-theme] .border         { border-color: var(--border) !important; }

/* ---------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

/* No CSS scroll-behavior:smooth — Lenis owns smooth scrolling; in-page jumps
   use lenis.scrollTo(). Keeping both would double-smooth and feel jerky. */
html { overflow-x: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

body.dccps-body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
    line-height: 1.7;
}

#app { position: relative; z-index: 1; }
/* Sticky-footer fix: <main> must keep its full content height (never shrink),
   otherwise tall content overflows it and slides under the footer. */
#app > main { flex: 1 0 auto; min-width: 0; }
.dccps-footer { flex-shrink: 0; }

::selection { background: rgba(var(--brand-rgb), .32); color: var(--text); }

a { color: var(--brand); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--brand-2); }

img { max-width: 100%; }

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.1;
    color: var(--text);
}

.container { max-width: var(--maxw); }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: var(--r-pill);
    border: 3px solid var(--bg-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* Focus visibility (a11y) */
a:focus-visible, button:focus-visible,
.btn:focus-visible, .form-control:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

/* ---------------------------------------------------------------------------
   4. AMBIENT FX LAYER  (matrix / scanlines / noise / vignette)
   ------------------------------------------------------------------------- */
.fx-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.fx-matrix {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .8s var(--ease);
}
.fx-scanlines,
.fx-noise,
.fx-vignette { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }

.fx-vignette {
    opacity: 1;
    background: radial-gradient(ellipse at 50% 0%, transparent 55%, var(--bg-2) 140%);
}
[data-theme="light"] .fx-vignette { opacity: .5; }

.fx-noise {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}
[data-theme="dark"] .fx-noise { opacity: .035; }

/* hacker-only effects */
[data-theme="hacker"] .fx-matrix { opacity: .5; }
[data-theme="hacker"] .fx-scanlines {
    opacity: 1;
    background: repeating-linear-gradient(
        0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px,
        rgba(0, 255, 65, .04) 3px, rgba(0, 0, 0, .14) 4px);
    animation: scan 8s linear infinite;
}
@keyframes scan { to { background-position: 0 200px; } }

/* ---------------------------------------------------------------------------
   5. SCROLL PROGRESS + BACK TO TOP
   ------------------------------------------------------------------------- */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 2000;
    background: transparent;
    pointer-events: none;
}
.scroll-progress span {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--grad);
    box-shadow: 0 0 14px rgba(var(--brand-rgb), .8);
}

.back-to-top {
    position: fixed;
    right: 22px; bottom: 94px;   /* ABOVE the chatbot launcher (60px @ bottom:22) — they used to overlap */
    z-index: 1040;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-2);
    background: var(--surface);
    color: var(--text);
    font-size: 1.15rem;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(20px) scale(.8);
    pointer-events: none;
    transition: all var(--t-mid) var(--ease-spring);
}
.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
    transform: translateY(-3px) scale(1.05);
}

/* ---------------------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: var(--r-pill);
    padding: .68rem 1.5rem;
    letter-spacing: -.01em;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease),
                background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-lg { padding: .92rem 2rem; font-size: 1.02rem; }
.btn-sm { padding: .42rem 1rem; font-size: .82rem; }

.btn-primary,
.btn-glow {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    background: var(--grad);
    background-size: 180% 180%;
    border: 0;
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.btn-primary:hover,
.btn-glow:hover {
    color: #fff;
    background-position: 100% 0;
    transform: translateY(-3px);
    box-shadow: 0 30px 70px -18px rgba(var(--brand-rgb), .75);
}
[data-theme="hacker"] .btn-primary,
[data-theme="hacker"] .btn-glow { color: #00140A; }
[data-theme="hacker"] .btn-primary:hover,
[data-theme="hacker"] .btn-glow:hover { color: #00140A; }

.btn-outline-primary,
.btn-ghost {
    --bs-btn-color: var(--text);
    --bs-btn-border-color: var(--border-2);
    --bs-btn-hover-bg: transparent;
    background: rgba(var(--brand-rgb), .04);
    border: 1px solid var(--border-2);
    color: var(--text);
    backdrop-filter: blur(8px);
}
.btn-outline-primary:hover,
.btn-ghost:hover {
    background: rgba(var(--brand-rgb), .12);
    border-color: var(--brand);
    color: var(--text);
    transform: translateY(-3px);
}

.btn-light {
    background: var(--surface);
    border: 1px solid var(--border-2);
    color: var(--text);
}
.btn-light:hover { background: var(--surface-2); color: var(--text); transform: translateY(-3px); }
.btn-outline-light {
    border: 1px solid var(--border-2);
    color: var(--text);
    background: transparent;
}
.btn-outline-light:hover { background: var(--surface-2); color: var(--text); border-color: var(--brand); }

.btn-link { color: var(--brand); font-weight: 600; }

/* ---------------------------------------------------------------------------
   7. NAVBAR
   ------------------------------------------------------------------------- */
.dccps-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid transparent;
    transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.dccps-nav.scrolled {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    border-bottom-color: var(--border);
    box-shadow: 0 12px 40px -28px rgba(0, 0, 0, .9);
}
.dccps-nav .nav-inner {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.18rem;
    letter-spacing: -.03em;
    color: var(--text);
    white-space: nowrap;
}
.nav-brand:hover { color: var(--text); }
.nav-brand img {
    height: 38px; width: 38px;
    filter: drop-shadow(0 4px 12px rgba(var(--brand-rgb), .45));
    transition: transform var(--t-mid) var(--ease-spring);
}
.nav-brand:hover img { transform: rotate(-12deg) scale(1.08); }
.nav-brand .brand-sub {
    display: block;
    font-family: var(--font-mono);
    font-size: .56rem;
    font-weight: 500;
    letter-spacing: .26em;
    color: var(--brand);
    text-transform: uppercase;
}

.nav-links { display: flex; align-items: center; gap: .15rem; }
.nav-links .nav-link,
.dccps-nav .dropdown-toggle {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .92rem;
    color: var(--text-dim);
    padding: .5rem .85rem;
    border-radius: var(--r-sm);
    position: relative;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-links .nav-link:hover,
.dccps-nav .dropdown-toggle:hover,
.nav-links .nav-link.active {
    color: var(--text);
    background: rgba(var(--brand-rgb), .08);
}
.nav-links .nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 2px;
    width: 16px; height: 2px;
    transform: translateX(-50%);
    background: var(--grad);
    border-radius: 2px;
}

.dccps-nav .dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    padding: .4rem;
    margin-top: .6rem;
}
.dccps-nav .dropdown-item {
    color: var(--text-dim);
    border-radius: var(--r-xs);
    font-weight: 500;
    font-size: .9rem;
    padding: .55rem .8rem;
}
.dccps-nav .dropdown-item:hover {
    background: rgba(var(--brand-rgb), .1);
    color: var(--text);
}

/* 3-way theme switch */
.theme-switch {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
}
.theme-opt {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 0; background: transparent;
    color: var(--text-faint);
    border-radius: var(--r-pill);
    font-size: .9rem;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}
.theme-opt:hover { color: var(--text); }
.theme-opt.active {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--brand-rgb), .5);
}
[data-theme="hacker"] .theme-opt.active { color: #00140A; }

.nav-toggler {
    width: 44px; height: 44px;
    display: none;
    place-items: center;
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    color: var(--text);
    border-radius: var(--r-sm);
    font-size: 1.3rem;
}

/* mobile panel hidden on desktop; the 991px breakpoint re-enables it */
.nav-mobile { display: none; }

/* user avatar in nav */
.nav-avatar {
    width: 30px; height: 30px;
    border-radius: var(--r-pill);
    object-fit: cover;
    border: 2px solid var(--border-2);
}

/* ---------------------------------------------------------------------------
   8. SECTION SCAFFOLD
   ------------------------------------------------------------------------- */
.section { padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0; position: relative; }
.section--tight { padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0; }
.section--alt { background: var(--bg-2); }
.section--surface { background: var(--surface); }

.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 1rem;
}
.eyebrow::before {
    content: "";
    width: 26px; height: 2px;
    background: var(--grad);
    border-radius: 2px;
}
.eyebrow.center::after {
    content: "";
    width: 26px; height: 2px;
    background: var(--grad);
    border-radius: 2px;
}

.section-title {
    font-size: clamp(1.95rem, 1.1rem + 3.4vw, 3.35rem);
    margin-bottom: 1rem;
}
.section-lead {
    color: var(--text-dim);
    font-size: 1.06rem;
    max-width: 60ch;
}
.section-head.center .section-lead { margin-inline: auto; }

.grad-text {
    background: var(--grad);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.grad-text--warm {
    background: var(--grad-warm);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------------------
   9. HERO
   ------------------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Was calc(100vh - nav): that forced a full-screen hero, so the centered
       content left a big empty band above the heading and pushed the actions /
       next section (roadmap) below the fold. A bounded height keeps the hero
       generous but lets the content sit higher and the roadmap peek in. */
    min-height: clamp(440px, 70vh, 700px);
    padding: clamp(1.6rem, 1rem + 2.6vw, 3.2rem) 0;
}
.hero > .container { width: 100%; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(var(--grid-line) 1.1px, transparent 1.2px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 26%, #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
    mask-image: radial-gradient(ellipse 78% 68% at 50% 26%, #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
}
.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .85;
}
.hero-glow.g1 { width: 480px; height: 480px; background: var(--glow-1); top: -160px; left: -120px; }
.hero-glow.g2 { width: 440px; height: 440px; background: var(--glow-2); bottom: -200px; right: -110px; }
.hero-glow.g3 { width: 340px; height: 340px; background: var(--glow-3); top: 38%; left: 46%; }
.hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
}

.hero-title {
    font-size: clamp(2.3rem, 1rem + 4.5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 1.1rem;
    letter-spacing: -.035em;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .word { display: inline-block; }

.hero-rotator {
    display: inline-flex;
    position: relative;
    vertical-align: bottom;
}
.hero-rotator .rot {
    background: var(--grad);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradMove 6s linear infinite;
}
@keyframes gradMove { to { background-position: 220% center; } }

.hero-sub {
    color: var(--text-dim);
    font-size: 1.1rem;
    max-width: 33rem;
    margin-bottom: 1.8rem;
}
.hero-sub .quote {
    color: var(--text);
    font-style: italic;
    font-weight: 500;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.4rem; }

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .7rem;
}
.hero-chip {
    padding: .9rem .8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.hero-chip:hover { transform: translateY(-4px); border-color: var(--card-hover-border); }
.hero-chip .num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text);
}
.hero-chip .lbl {
    font-size: .72rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: .3rem;
}

/* ---- Hero code window (the centerpiece) ---- */
.code-window {
    position: relative;
    background: var(--code-bg);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
/* super hover — brand glow bloom + brighter chrome */
.code-window:hover {
    border-color: rgba(var(--brand-rgb), .6);
    box-shadow: var(--shadow-lg),
                0 0 0 1px rgba(var(--brand-rgb), .4),
                0 26px 70px -22px rgba(var(--brand-rgb), .62);
}
.code-window::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(var(--brand-rgb), .6), transparent 40%, transparent 60%, rgba(var(--brand-rgb), .35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .7;
    transition: opacity var(--t-mid) var(--ease);
    z-index: 5;
}
.code-window:hover::before { opacity: 1; }
.cw-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid var(--border);
}
.cw-traffic { display: flex; align-items: center; gap: .5rem; }
.cw-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    display: grid; place-items: center;
}
.cw-dot.r { background: #FF5F57; }
.cw-dot.y { background: #FEBC2E; }
.cw-dot.g { background: #28C840; }
/* macOS-style symbols revealed on hover */
.cw-dot i {
    font-size: 7px;
    font-weight: 700;
    color: rgba(0, 0, 0, .62);
    line-height: 1;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}
.code-window:hover .cw-dot i { opacity: 1; }
.cw-title {
    margin-left: .6rem;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--code-com);
}
.cw-title b { color: #9FB2D4; font-weight: 500; }
.cw-badge {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .66rem;
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), .4);
    border-radius: var(--r-pill);
    padding: .12rem .55rem;
}
.cw-body {
    display: flex;
    font-family: var(--font-mono);
    font-size: .8rem;
    line-height: 1.7;
}
.cw-gutter {
    padding: 1rem .55rem 1rem .9rem;
    color: var(--code-com);
    text-align: right;
    user-select: none;
    border-right: 1px solid var(--border);
    background: rgba(0, 0, 0, .2);
}
.cw-code {
    padding: 1rem 1.1rem;
    margin: 0;
    color: #B9C7E0;
    white-space: pre-wrap;
    word-break: break-word;
    flex: 1;
    overflow: visible;
}
.cw-code .kw  { color: var(--code-kw); }
.cw-code .fn  { color: var(--code-fn); }
.cw-code .str { color: var(--code-str); }
.cw-code .num { color: var(--code-num); }
.cw-code .com { color: var(--code-com); font-style: italic; }
.cw-code .tag { color: var(--code-tag); }
.cw-caret {
    display: inline-block;
    width: 8px;
    height: 1.05em;
    vertical-align: text-bottom;
    background: var(--brand-2);
    box-shadow: 0 0 8px var(--brand-2);
    animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.cw-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, .25);
    font-family: var(--font-mono);
    font-size: .7rem;
    color: var(--code-com);
}
.cw-status .ok { color: var(--accent); }
.cw-status .spark { margin-left: auto; color: var(--brand-2); }

.code-stack { position: relative; }

/* ---------------------------------------------------------------------------
   10. TECH MARQUEE
   ------------------------------------------------------------------------- */
.marquee {
    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);
}
/* CSS-driven marquee — runs on every device with zero JavaScript, so the
   "languages & skills" strip keeps moving even where GSAP is slow or absent
   (notably mobile). Each row holds two identical .marquee-set halves and the
   keyframe shifts exactly -50%, giving a seamless loop. */
.marquee-row {
    display: flex;
    width: max-content;
    animation: marquee-scroll 38s linear infinite;
}
.marquee-row.rev { margin-top: 1rem; animation-direction: reverse; }
.marquee-set { display: flex; gap: 1rem; padding-right: 1rem; }
.marquee:hover .marquee-row { animation-play-state: paused; }
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.tech-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.3rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: .9rem;
    color: var(--text-dim);
    white-space: nowrap;
}
.tech-chip i { color: var(--brand); font-size: 1.1rem; }

/* ---------------------------------------------------------------------------
   11. CARDS  (generic + variants)
   ------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
}
.card-header { background: var(--surface-2); border-bottom-color: var(--border); }

.u-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease);
}
/* Fill the column ONLY when a single card sits alone (equal-height grids).
   Stacked cards must keep auto height or they overflow under the footer. */
.u-card:only-child { height: 100%; }
.u-card.h-100 { height: 100%; }
.u-card:hover {
    transform: translateY(-6px);
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow);
}

/* feature bento */
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}
.bento-card {
    grid-column: span 2;
    position: relative;
    overflow: hidden;
    padding: 1.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease);
}
.bento-card:hover {
    transform: translateY(-6px);
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow);
}
.bento-card.span-3 { grid-column: span 3; }
.bento-card.span-6 { grid-column: span 6; }
.bento-card .glow-orb {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .4;
    top: -80px; right: -60px;
    background: var(--brand);
    pointer-events: none;
    transition: opacity var(--t-mid) var(--ease);
}
.bento-card:hover .glow-orb { opacity: .7; }

.feature-ico {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}
.ico-blue   { background: linear-gradient(135deg, #3B82F6, #22D3EE); }
.ico-violet { background: linear-gradient(135deg, #8B5CF6, #EC4899); }
.ico-green  { background: linear-gradient(135deg, #10B981, #2DD4A7); }
.ico-amber  { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.ico-cyan   { background: linear-gradient(135deg, #06B6D4, #3B82F6); }
.ico-pink   { background: linear-gradient(135deg, #EC4899, #8B5CF6); }
[data-theme="hacker"] .feature-ico { background: var(--surface-3) !important; color: var(--brand); border: 1px solid var(--border-2); }

.feature-title { font-size: 1.18rem; font-weight: 700; margin-bottom: .45rem; }
.feature-desc { color: var(--text-dim); font-size: .94rem; margin: 0; }

/* pillar cards */
.pillar {
    position: relative;
    padding: 1.9rem 1.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    height: 100%;
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease);
}
.pillar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--t-mid) var(--ease);
}
.pillar:hover { transform: translateY(-8px); border-color: var(--card-hover-border); box-shadow: var(--shadow); }
.pillar:hover::after { transform: scaleX(1); }
.pillar .idx {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--text-faint);
    margin-bottom: .9rem;
}

/* stat band */
.stat-band {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.stat-block {
    background: var(--surface);
    padding: 2rem 1rem;
    text-align: center;
}
.stat-block .num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 1.4rem + 1.6vw, 2.9rem);
    line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-block .lbl {
    color: var(--text-dim);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: .55rem;
}

/* roadmap */
.roadmap { position: relative; display: grid; gap: 1.1rem; }
.road-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.3rem;
    padding: 1.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.road-step:hover { transform: translateX(8px); border-color: var(--card-hover-border); }
.road-badge {
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    color: #fff;
    background: var(--grad);
}
[data-theme="hacker"] .road-badge { color: #00140A; }
.road-step .lvl {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
}
.road-step h4 { font-size: 1.2rem; margin: .2rem 0 .4rem; }
.road-step p { color: var(--text-dim); margin: 0 0 .7rem; font-size: .94rem; }
.road-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.road-tag {
    font-family: var(--font-mono);
    font-size: .73rem;
    padding: .2rem .6rem;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
}

/* ===== semester / curriculum cards (homepage preview) ===== */
.sem-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 992px) {
    .sem-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

.sem-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .95rem;
    padding: 1.3rem 1.3rem 1.1rem;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease);
}
/* faint oversized ghost numeral — sits above the card surface, below content */
.sem-card > * { position: relative; z-index: 1; }
.sem-card::after {
    content: attr(data-num);
    position: absolute;
    right: -.4rem; bottom: -2.3rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 8rem;
    line-height: 1;
    color: var(--brand);
    opacity: .06;
    pointer-events: none;
    transition: opacity var(--t-mid) var(--ease);
}
.sem-card:hover {
    transform: translateY(-6px);
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow);
}
.sem-card:hover::after { opacity: .12; }

.sem-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}
.sem-card-num {
    width: 52px; height: 52px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 14px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.55rem;
    color: #fff;
    background: var(--grad);
    box-shadow: 0 10px 22px -8px rgba(0, 102, 255, .55);
}
[data-theme="hacker"] .sem-card-num { color: #00140A; box-shadow: none; }
.sem-card-year {
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: .32rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
}
.sem-card-head { display: flex; flex-direction: column; gap: .15rem; }
.sem-card-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.18rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.sem-card-credits { font-size: .76rem; color: var(--text-dim); }
.sem-card-credits .bi { color: var(--brand); }

.sem-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .34rem;
}
.subj-pill {
    display: inline-flex;
    padding: .24rem .56rem;
    font-family: var(--font-mono);
    font-size: .71rem;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
}
.subj-pill-more {
    font-weight: 600;
    color: var(--brand);
    background: var(--surface-2);
    background: color-mix(in srgb, var(--brand) 13%, var(--surface-2));
    border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}

.sem-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: .85rem;
    border-top: 1px solid var(--border);
}
.sem-card-count { font-weight: 600; font-size: .82rem; color: var(--brand); }
.sem-card-go {
    width: 30px; height: 30px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--brand);
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease),
                transform var(--t-mid) var(--ease);
}
.sem-card:hover .sem-card-go {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
    transform: translateX(3px);
}
[data-theme="hacker"] .sem-card:hover .sem-card-go { color: #00140A; }

/* committee / member — panels */
.committee-panel { margin-bottom: 2.4rem; }
.committee-panel-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-md);
    margin-bottom: 1.3rem;
}
.committee-panel-head .pb-ico {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    font-size: 1.25rem; color: #fff;
}
.committee-panel-head .pb-ico.faculty { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.committee-panel-head .pb-ico.exec    { background: var(--grad); }
[data-theme="hacker"] .committee-panel-head .pb-ico { color: #00140A; }
.committee-panel-head.faculty { border-left-color: #F59E0B; }
.committee-panel-head .pb-title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.committee-panel-head .pb-sub { color: var(--text-dim); font-size: .84rem; }

/* committee / member card — round-avatar, premium, theme-aware */
.committee-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.7rem 1rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    height: 100%;
    color: var(--text);
    transition: transform var(--t-mid) var(--ease-spring),
                border-color var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease);
}
.committee-card:hover {
    transform: translateY(-10px);
    border-color: rgba(var(--brand-rgb), .5);
    box-shadow: var(--shadow);
    color: var(--text);
}
.committee-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* top accent line that draws in on hover */
.committee-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    transform: scaleX(0);
    transition: transform var(--t-mid) var(--ease);
}
.committee-card:hover::before { transform: scaleX(1); }

/* soft radial glow that blooms in on hover */
.cc-glow {
    position: absolute;
    top: -45%; left: 50%;
    width: 160%; height: 160%;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(var(--brand-rgb), .24), transparent 72%);
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease);
    pointer-events: none;
}
.committee-card:hover .cc-glow { opacity: 1; }

/* round avatar with spinning conic ring */
.cc-avatar {
    position: relative;
    width: 108px; height: 108px;
    margin-bottom: 1rem;
    flex: 0 0 auto;
}
.cc-avatar img {
    position: relative; z-index: 2;
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover; object-position: top center;
    border: 3px solid var(--surface);
    background: var(--surface-2);
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .55);
    transition: transform var(--t-mid) var(--ease-spring);
}
.committee-card:hover .cc-avatar img { transform: scale(1.07); }
.cc-ring {
    position: absolute; inset: -5px; z-index: 1;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--brand), var(--brand-2), var(--brand-3), var(--brand));
    opacity: .28;
    animation: cc-spin 9s linear infinite;
    transition: opacity var(--t-mid) var(--ease);
}
.committee-card:hover .cc-ring { opacity: 1; }
@keyframes cc-spin { to { transform: rotate(360deg); } }

.cc-role {
    display: inline-block;
    margin-bottom: .4rem;
    padding: .2rem .62rem;
    font-family: var(--font-mono);
    font-size: .58rem; font-weight: 600;
    letter-spacing: .055em; text-transform: uppercase;
    border-radius: var(--r-pill);
    background: rgba(var(--brand-rgb), .12);
    color: var(--brand);
}
.cc-name {
    font-family: var(--font-display);
    font-weight: 700; font-size: .98rem;
    line-height: 1.3; margin: 0;
    color: var(--text);
}
.cc-meta {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--text-faint);
    margin-top: .2rem;
}
/* Tenure chip — the year(s)/period a former leader served (Alumni → Former Leaders). */
.cc-tenure {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .5rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .72rem; font-weight: 600;
    letter-spacing: .01em;
    color: var(--brand);
    background: rgba(8, 145, 178, .1);
    border: 1px solid rgba(8, 145, 178, .22);
}
.cc-tenure i { font-size: .8rem; line-height: 1; }
.cc-view {
    display: inline-flex; align-items: center; gap: .32rem;
    margin-top: .85rem;
    font-size: .73rem; font-weight: 600;
    color: var(--brand);
    opacity: 0;
    transform: translateY(7px);
    transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.cc-view i { font-size: .95rem; }
.committee-card:hover .cc-view,
.committee-card:focus-visible .cc-view { opacity: 1; transform: translateY(0); }

/* faculty variant — amber accent */
.committee-card.is-faculty { border-color: rgba(245, 158, 11, .32); }
.committee-card.is-faculty:hover { border-color: rgba(245, 158, 11, .6); }
.committee-card.is-faculty::before { background: linear-gradient(90deg, #F59E0B, #EF4444); }
.committee-card.is-faculty .cc-glow { background: radial-gradient(closest-side, rgba(245, 158, 11, .24), transparent 72%); }
.committee-card.is-faculty .cc-ring { background: conic-gradient(from 0deg, #F59E0B, #FBBF24, #EF4444, #F59E0B); }
.committee-card.is-faculty .cc-role { background: rgba(245, 158, 11, .15); color: #E0930C; }
.committee-card.is-faculty .cc-view { color: #E0930C; }

/* event card */
.event-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    height: 100%;
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease);
}
.event-card:hover { transform: translateY(-6px); border-color: var(--card-hover-border); box-shadow: var(--shadow); }
.event-card .cover { height: 188px; width: 100%; object-fit: cover; }
.event-card .ec-body { padding: 1.1rem 1.15rem 1.25rem; }
.date-chip {
    flex: 0 0 auto;
    width: 58px;
    text-align: center;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    font-family: var(--font-display);
}
.date-chip .m {
    display: block;
    background: var(--brand);
    color: #fff;
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .14rem 0;
}
[data-theme="hacker"] .date-chip .m { color: #00140A; }
.date-chip .d { display: block; font-size: 1.32rem; font-weight: 800; padding: .1rem 0; color: var(--text); }

/* timeline / news */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
    content: "";
    position: absolute;
    top: 6px; bottom: 6px; left: 7px;
    width: 2px;
    background: var(--grad);
    border-radius: 2px;
}
.tl-item { position: relative; padding-bottom: 1.5rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
    content: "";
    position: absolute;
    left: -29px; top: 6px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--bg);
    border: 3px solid var(--brand);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .14);
}
.tl-card {
    padding: 1.15rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.tl-card:hover { transform: translateX(6px); border-color: var(--card-hover-border); }
.tl-date {
    font-family: var(--font-mono);
    font-size: .73rem;
    color: var(--brand);
    letter-spacing: .04em;
}

/* gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .8rem;
}
.gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
}
.gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}
.gallery-item::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .6));
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease);
}
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item:hover::after { opacity: 1; }

/* testimonial */
.testimonial {
    position: relative;
    padding: 1.8rem 1.6rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    height: 100%;
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.testimonial:hover { transform: translateY(-6px); border-color: var(--card-hover-border); }
.testimonial .quote-mark {
    font-family: Georgia, serif;
    font-size: 4rem;
    line-height: .4;
    color: var(--brand);
    opacity: .28;
}
.testimonial p { color: var(--text); margin: .8rem 0 1.1rem; }
.testimonial .who { display: flex; align-items: center; gap: .7rem; }
.testimonial .who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.stars { color: var(--warn); font-size: .82rem; }

/* CTA banner */
.cta-banner {
    position: relative;
    overflow: hidden;
    padding: clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
    border-radius: var(--r-xl);
    background:
        radial-gradient(700px 320px at 12% 0%, rgba(var(--brand-rgb), .5), transparent 60%),
        radial-gradient(620px 320px at 92% 100%, var(--glow-2), transparent 60%),
        var(--surface);
    border: 1px solid var(--border-2);
}
.cta-banner.dark-cta {
    background:
        radial-gradient(700px 360px at 10% -10%, rgba(var(--brand-rgb), .55), transparent 62%),
        radial-gradient(640px 360px at 95% 110%, var(--glow-2), transparent 62%),
        var(--bg-2);
}

/* quiz cta */
.quiz-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    border-radius: var(--r-xl);
    border: 1px solid var(--border-2);
    background:
        radial-gradient(600px 300px at 85% 10%, var(--glow-3), transparent 60%),
        var(--surface);
}

/* ---------------------------------------------------------------------------
   12. IMAGE COLLAGE
   ------------------------------------------------------------------------- */
.collage {
    display: grid;
    grid-template-columns: 1.22fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: .9rem;
    aspect-ratio: 3 / 2.6;
}
.collage figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.collage figure:nth-child(1) { grid-row: 1 / 3; }
.collage img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}
.collage figure:hover img { transform: scale(1.05); }

.media-frame {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------------------
   13. ALERTS / BADGES
   ------------------------------------------------------------------------- */
.dccps-alert {
    display: flex;
    align-items: center;
    gap: .7rem;
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    padding: .85rem 1.1rem;
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
}
.dccps-alert i { font-size: 1.15rem; }
.dccps-alert--ok  { border-color: rgba(var(--accent-rgb), .5); }
.dccps-alert--ok i  { color: var(--accent); }
.dccps-alert--err { border-color: rgba(244, 63, 94, .5); }
.dccps-alert--err i { color: var(--danger); }

.badge { font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .26rem .7rem;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: .73rem;
    font-weight: 500;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
}
.chip-brand { background: rgba(var(--brand-rgb), .12); border-color: rgba(var(--brand-rgb), .3); color: var(--brand); }
.chip-accent { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .3); color: var(--accent); }
.chip-warn { background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .34); color: var(--warn); }
.chip-danger { background: rgba(244, 63, 94, .14); border-color: rgba(244, 63, 94, .34); color: var(--danger); }

/* ---------------------------------------------------------------------------
   14. ACCORDION (FAQ)
   ------------------------------------------------------------------------- */
.accordion { --bs-accordion-bg: transparent; }
.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md) !important;
    margin-bottom: .7rem;
    overflow: hidden;
}
.faq-item .accordion-button {
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    padding: 1.05rem 1.2rem;
    box-shadow: none;
}
.faq-item .accordion-button:not(.collapsed) {
    background: var(--surface-2);
    color: var(--brand);
}
.faq-item .accordion-button:focus { box-shadow: none; }
.faq-item .accordion-button::after {
    --bs-accordion-btn-icon: none;
    content: "\F4FE";
    font-family: "bootstrap-icons";
    background: none;
    width: auto; height: auto;
    color: var(--brand);
    transition: transform var(--t-mid) var(--ease);
}
.faq-item .accordion-body { color: var(--text-dim); padding: 0 1.2rem 1.15rem; }

/* ---------------------------------------------------------------------------
   15. FORMS
   ------------------------------------------------------------------------- */
.form-label { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: .9rem; }
.form-control, .form-select {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    border-radius: var(--r-sm);
    padding: .7rem .95rem;
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus, .form-select:focus {
    background: var(--surface-2);
    border-color: var(--brand);
    color: var(--text);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .16);
}
.form-control:disabled { background: var(--surface); opacity: .6; }
.input-group-text { background: var(--surface); border-color: var(--border-2); color: var(--text-dim); }
.form-check-input { background-color: var(--surface-2); border-color: var(--border-2); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.auth-shell {
    min-height: calc(100vh - var(--nav-h));
    display: grid;
    place-items: center;
    padding: 3rem 1rem;
    position: relative;
}
.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.4rem;
}
.auth-card .auth-logo {
    width: 56px; height: 56px;
    margin-bottom: 1rem;
    filter: drop-shadow(0 6px 16px rgba(var(--brand-rgb), .5));
}

/* password show / hide toggle — wrapper injected by site.js around every
   password input so the eye button never disturbs Bootstrap validation */
.pw-wrap { position: relative; }
.pw-wrap > .form-control { padding-right: 2.7rem; }
.pw-toggle {
    position: absolute; top: 0; right: 0;
    width: 2.7rem; height: 100%;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; padding: 0;
    color: var(--text-faint); cursor: pointer;
    transition: color var(--t-fast) var(--ease);
}
.pw-toggle:hover { color: var(--brand); }
.pw-wrap:has(.is-invalid) ~ .invalid-feedback { display: block; }

/* registration profile + cover photo picker */
.reg-media { position: relative; margin-bottom: 3rem; }
.reg-cover {
    display: block; position: relative;
    height: 142px;
    border-radius: var(--r-md);
    overflow: hidden; cursor: pointer;
    background: var(--grad);
    border: 1px solid var(--border-2);
}
.reg-cover-fx { position: absolute; inset: 0; opacity: .55; }
.reg-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reg-cover-hint {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    color: #fff; font-size: .82rem; font-weight: 600;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
    transition: opacity var(--t-mid) var(--ease);
}
.reg-cover.has-img .reg-cover-hint { opacity: 0; }
.reg-cover-edit {
    position: absolute; top: .55rem; right: .55rem;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(8, 11, 20, .6); color: #fff;
    font-size: .72rem; backdrop-filter: blur(6px);
    opacity: 0; transition: opacity var(--t-mid) var(--ease);
}
.reg-cover:hover .reg-cover-edit,
.reg-cover.has-img .reg-cover-edit { opacity: 1; }
.reg-avatar {
    position: absolute; left: 1.4rem; bottom: -34px;
    width: 92px; height: 92px;
    border-radius: 22px;
    overflow: hidden; cursor: pointer;
    background: var(--surface-2);
    border: 4px solid var(--surface);
    box-shadow: var(--shadow);
    transition: transform var(--t-fast) var(--ease);
}
.reg-avatar:hover { transform: translateY(-2px); }
.reg-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.reg-avatar-hint {
    position: absolute; inset: 0; z-index: 1;
    display: grid; place-items: center;
    color: var(--brand); font-size: 1.2rem;
    background: rgba(var(--brand-rgb), .14);
    transition: all var(--t-mid) var(--ease);
}
.reg-avatar.has-img .reg-avatar-hint {
    inset: auto; right: 3px; bottom: 3px;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-size: .64rem;
    background: var(--brand); color: #fff;
    border: 2px solid var(--surface);
}
.reg-media-note {
    font-size: .76rem; color: var(--text-faint);
    margin: 0 0 1.1rem;
    display: flex; align-items: flex-start; gap: .35rem;
}
.reg-media-note i { color: var(--brand); margin-top: .12rem; }

/* ---------------------------------------------------------------------------
   16. TABLES (dashboards)
   ------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    color: var(--text);
}
.table > thead th {
    font-family: var(--font-display);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-faint);
    border-color: var(--border);
}
.table > tbody td { border-color: var(--border); vertical-align: middle; }

/* ---------------------------------------------------------------------------
   17. MODAL
   ------------------------------------------------------------------------- */
.modal-content {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    color: var(--text);
}
/* committee member modal — premium round-avatar card */
.modal-committee .modal-dialog { max-width: 416px; }
.modal-committee .modal-content {
    overflow: hidden auto; padding: 0; position: relative;
    max-height: calc(100vh - 2.5rem);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}
.mc-close {
    position: absolute; top: .8rem; right: .8rem; z-index: 6;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 1px solid var(--border-2); border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-dim); font-size: .9rem;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mc-close:hover { background: var(--danger); border-color: var(--danger); color: #fff; transform: rotate(90deg); }

/* hero block — centered round avatar */
.mc-hero {
    position: relative;
    padding: 2.3rem 1.4rem 1.4rem;
    text-align: center;
    overflow: hidden;
}
.mc-hero-fx {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(72% 78% at 50% -12%, rgba(var(--brand-rgb), .28), transparent 70%),
        radial-gradient(60% 70% at 102% 0%, rgba(var(--accent-rgb), .16), transparent 70%);
}
.mc-hero-fx::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(var(--grid-line) 1px, transparent 1.3px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 0%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse 62% 60% at 50% 0%, #000, transparent 78%);
}
.mc-avatar {
    position: relative; z-index: 1;
    width: 118px; height: 118px;
    margin: 0 auto .95rem;
}
.mc-avatar img {
    position: relative; z-index: 2;
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover; object-position: top center;
    border: 4px solid var(--surface);
    background: var(--surface-2);
    box-shadow: 0 14px 32px -10px rgba(0, 0, 0, .6);
}
.mc-avatar-ring {
    position: absolute; inset: -5px; z-index: 1;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--brand), var(--brand-2), var(--brand-3), var(--brand));
    opacity: .9;
    animation: cc-spin 9s linear infinite;
}
.modal-content.is-faculty .mc-avatar-ring {
    background: conic-gradient(from 0deg, #F59E0B, #FBBF24, #EF4444, #F59E0B);
}
.mc-role {
    position: relative; z-index: 1;
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 600; font-size: .62rem;
    letter-spacing: .055em; text-transform: uppercase;
    background: var(--brand); color: #fff;
    padding: .26rem .72rem; border-radius: var(--r-pill);
    margin-bottom: .55rem;
}
[data-theme="hacker"] .mc-role { color: #00140A; }
.mc-role.faculty { background: linear-gradient(135deg, #F59E0B, #EF4444); color: #fff; }
.mc-hero h3 {
    position: relative; z-index: 1;
    color: var(--text); font-weight: 800;
    margin: 0; font-size: 1.32rem; line-height: 1.2;
}
.mc-hero small {
    position: relative; z-index: 1;
    display: block; margin-top: .28rem;
    color: var(--text-dim); font-family: var(--font-mono); font-size: .73rem;
}
.mc-body { padding: 0 1.3rem 1.35rem; }
.mc-bio {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: .8rem 1rem .8rem 2.25rem;
    color: var(--text-dim);
    font-size: .88rem; line-height: 1.6;
    margin-bottom: .9rem;
}
.mc-bio > i { position: absolute; left: .8rem; top: .75rem; color: var(--brand); font-size: 1.05rem; }
.mc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .9rem; }
.mc-fact {
    display: flex; align-items: center; gap: .55rem;
    padding: .6rem .7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.mc-fact > i {
    width: 30px; height: 30px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: var(--r-xs);
    background: rgba(var(--brand-rgb), .12);
    color: var(--brand); font-size: .9rem;
}
.mc-fact .k { font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.mc-fact .v { font-weight: 600; font-size: .78rem; line-height: 1.3; }
.mc-contact {
    display: flex; align-items: center; gap: .55rem;
    padding: .65rem .85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-size: .82rem; word-break: break-all;
    margin-bottom: .9rem;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mc-contact i { color: var(--brand); }
.mc-contact:hover { color: var(--brand); border-color: var(--card-hover-border); }
.mc-actions { display: flex; align-items: center; gap: .5rem; }
.mc-soc {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    color: #fff; font-size: 1rem;
    transition: transform var(--t-fast) var(--ease);
}
.mc-soc:hover { transform: translateY(-3px); color: #fff; }
.mc-soc.fb { background: #1877F2; }
.mc-soc.li { background: #0A66C2; }
.mc-soc.mail { background: var(--accent); }
[data-theme="hacker"] .mc-soc.mail { color: #00140A; }

/* modal backdrop — soft, blurred navy instead of a harsh black sheet */
.modal-backdrop {
    background: #060912;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.modal-backdrop.show { opacity: .74; }
[data-theme="light"] .modal-backdrop { background: #0c1322; }
[data-theme="light"] .modal-backdrop.show { opacity: .52; }
.modal { z-index: 1090; }
.modal-backdrop { z-index: 1080; }

/* ---------------------------------------------------------------------------
   18. FOOTER
   ------------------------------------------------------------------------- */
.dccps-footer {
    position: relative;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    padding: clamp(2.6rem, 2rem + 2vw, 4rem) 0 1.6rem;
    margin-top: auto;
}
.dccps-footer::before {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--grad);
    opacity: .7;
}
.footer-brand { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.footer-brand img { height: 44px; width: 44px; }
.footer-brand .ft-name { font-family: var(--font-display); font-weight: 800; color: var(--text); }
.footer-brand .ft-sub { font-size: .78rem; color: var(--text-faint); }
.dccps-footer h6 {
    font-family: var(--font-mono);
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 1rem;
}
.dccps-footer .foot-link {
    display: block;
    color: var(--text-dim);
    padding: .3rem 0;
    font-size: .92rem;
    transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.dccps-footer .foot-link:hover { color: var(--brand); padding-left: 6px; }
.foot-social {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 1.05rem;
    transition: all var(--t-fast) var(--ease);
}
.foot-social:hover { color: #fff; background: var(--brand); border-color: var(--brand); transform: translateY(-3px); }
[data-theme="hacker"] .foot-social:hover { color: #00140A; }
.footer-bottom {
    margin-top: 2.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.2rem;
    justify-content: space-between;
    align-items: center;
    color: var(--text-faint);
    font-size: .84rem;
}
.footer-bottom .fb-copy { order: 1; }
.footer-bottom .visit-counter { order: 2; }
.footer-bottom .dev-credit { order: 3; }

/* ── Premium "Developed by Javed IT Solution" credit ─────────────────────── */
.dev-credit {
    --jit-grad: linear-gradient(100deg, #0066FF 0%, #00E5FF 42%, #7B2FFF 100%);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .85rem .42rem .6rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    line-height: 1;
    isolation: isolate;
    transition: transform var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}
.dev-credit__by {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.dev-credit__brand {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .9rem;
}
.dev-credit__name,
.dev-credit__icon {
    background: var(--jit-grad);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.dev-credit__icon { font-size: 1.02rem; }
/* gradient ring that fades in on hover */
.dev-credit__spark {
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: var(--jit-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}
.dev-credit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px -10px rgba(0, 102, 255, .55);
}
.dev-credit:hover .dev-credit__spark { opacity: 1; }
.dev-credit:hover .dev-credit__name,
.dev-credit:hover .dev-credit__icon { animation: jitShimmer 1.5s linear infinite; }
@keyframes jitShimmer { to { background-position: 220% center; } }
@media (prefers-reduced-motion: reduce) {
    .dev-credit, .dev-credit:hover { transition: none; transform: none; }
    .dev-credit:hover .dev-credit__name,
    .dev-credit:hover .dev-credit__icon { animation: none; }
}

/* live visit counters — site total + this-page total */
.visit-counter {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    white-space: nowrap;
}
.visit-counter strong { color: var(--brand); font-weight: 600; }
.visit-counter .bi-eye-fill { color: var(--brand); }
.visit-counter .vc-dot { opacity: .45; margin: 0 .15rem; }

/* ---------------------------------------------------------------------------
   19. PAGE HEADER (inner pages)
   ------------------------------------------------------------------------- */
.page-hero {
    position: relative;
    overflow: hidden;
    /* Compact hero — the page's real content (list/cards) must sit in the first
       viewport, not be pushed below a tall empty header. */
    padding: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem) 0 clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
    border-bottom: 1px solid var(--border);
}
.page-hero .hero-grid { opacity: .6; }
.page-hero-inner { position: relative; z-index: 1; }
/* No big gap between the hero and the first content section — the hero's bottom
   padding already gives the breathing room (kills the double-padding gap). */
.page-hero + .section,
.page-hero + section { padding-top: clamp(1.1rem, .85rem + 1vw, 1.75rem); }
.breadcrumb-row {
    display: flex; gap: .4rem; align-items: center;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--text-faint);
    margin-bottom: 1rem;
}
.breadcrumb-row a { color: var(--text-dim); }
.breadcrumb-row a:hover { color: var(--brand); }

/* prose */
.prose { color: var(--text-dim); font-size: 1.04rem; line-height: 1.8; }
.prose h2, .prose h3, .prose h4 { color: var(--text); margin: 1.8rem 0 .8rem; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--r-md); border: 1px solid var(--border); margin: 1.2rem 0; }
.prose code {
    font-family: var(--font-mono);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    padding: .1rem .4rem;
    font-size: .9em;
    color: var(--brand-2);
}
.prose pre {
    background: var(--code-bg);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    padding: 1.1rem;
    overflow-x: auto;
}
.prose blockquote {
    border-left: 3px solid var(--brand);
    padding-left: 1.1rem;
    color: var(--text);
    font-style: italic;
}

/* ---- blog post body — rendered from the in-house DCCPS editor ---------- */
.post-body { color: var(--text); font-size: 1.07rem; line-height: 1.85; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.15rem; }
.post-body h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--text); margin: 2.3rem 0 .9rem; }
.post-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; color: var(--text); margin: 2rem 0 .7rem; }
.post-body h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--text); margin: 1.6rem 0 .5rem; }
.post-body ul, .post-body ol { margin: 0 0 1.2rem; padding-left: 1.6rem; }
.post-body li { margin-bottom: .5rem; }
.post-body li::marker { color: var(--brand); font-weight: 700; }
.post-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.post-body strong { color: var(--text); font-weight: 700; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.post-body figure { margin: 1.7rem 0; }
.post-body figure img { border: 1px solid var(--border); }
.post-body figcaption { text-align: center; font-size: .85rem; color: var(--text-faint); margin-top: .55rem; }
.post-body code {
    font-family: var(--font-mono); font-size: .88em;
    background: rgba(var(--brand-rgb), .1); color: var(--brand);
    padding: .12em .42em; border-radius: 5px;
}
.post-body pre, .post-body pre.dccps-code {
    background: var(--code-bg); color: #E9EEF8;
    border: 1px solid var(--border-2); border-radius: var(--r-md);
    padding: 1.15rem 1.3rem; margin: 1.5rem 0;
    overflow-x: auto; font-family: var(--font-mono); font-size: .9rem; line-height: 1.7;
    white-space: pre-wrap; word-break: break-word;
}
.post-body pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.post-body blockquote {
    margin: 1.5rem 0; padding: .95rem 1.35rem;
    border-left: 4px solid var(--brand); background: var(--surface-2);
    border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--text-dim); font-style: italic;
}
.post-body hr { border: 0; height: 2px; background: var(--border-2); margin: 2.2rem 0; border-radius: 2px; }

/* editor-authored extras inside lesson content */
.lesson-prose h2 { font-family: var(--font-display); color: var(--text); font-size: 1.34rem; font-weight: 800; margin: 2rem 0 .8rem; }
.lesson-prose figure, .post-body .dccps-ed-figure { text-align: center; }
.lesson-prose pre.dccps-code { background: var(--code-bg); }

/* empty state */
.empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    border: 1px dashed var(--border-2);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.empty-state i { font-size: 2.6rem; color: var(--text-faint); }

/* profile */
.profile-banner {
    height: clamp(150px, 20vw, 230px);
    border-radius: var(--r-lg);
    background: var(--grad);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-2);
}
.profile-banner img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar {
    width: 128px; height: 128px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--bg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------------------
   public profile page — world-class
   ------------------------------------------------------------------------- */
.pf-page { padding-bottom: 3.4rem; }
.pf-cover {
    position: relative;
    height: clamp(190px, 26vw, 320px);
    overflow: hidden;
    background: var(--grad);
}
.pf-cover > img { width: 100%; height: 100%; object-fit: cover; }
.pf-cover-fx { position: absolute; inset: 0; }
.pf-cover-fade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 38%, var(--bg));
}
.pf-shell { margin-top: -3.6rem; position: relative; z-index: 2; }
.pf-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.1rem;
    margin-bottom: 1.5rem;
}
.pf-avatar-wrap { position: relative; flex: 0 0 auto; }
.pf-avatar {
    width: 132px; height: 132px;
    border-radius: 26px;
    object-fit: cover;
    border: 4px solid var(--bg);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.pf-verified {
    position: absolute; right: -9px; bottom: -9px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--accent); color: #04130D;
    border: 3px solid var(--bg);
    font-size: 1.05rem;
}
.pf-head-main { flex: 1 1 260px; padding-bottom: .25rem; }
.pf-name {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    line-height: 1.15; margin: 0;
}
.pf-handle {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    color: var(--text-dim); font-size: .85rem; margin-top: .3rem;
}
.pf-handle .mono { font-family: var(--font-mono); color: var(--brand); }
.pf-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); display: inline-block; }
.pf-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.pf-socials { display: flex; gap: .5rem; flex: 0 0 auto; padding-bottom: .3rem; }
.pf-soc {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-dim); font-size: 1.1rem;
    transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pf-soc:hover { transform: translateY(-3px); color: var(--brand); border-color: var(--card-hover-border); }
.pf-soc-linkedin:hover { color: #0A66C2; }
.pf-soc-facebook:hover { color: #1877F2; }
.pf-stats { margin-bottom: .3rem; }
.pf-stat-ico { width: 42px !important; height: 42px !important; font-size: 1.1rem !important; margin-bottom: .5rem; }
.pf-body { margin-top: .5rem; }
.pf-divider { height: 1px; background: var(--border); margin: 1rem 0; }
.pf-label {
    font-family: var(--font-mono); font-size: .64rem;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-faint); margin-bottom: .55rem;
}
.pf-detail {
    display: flex; align-items: center; gap: .7rem;
    padding: .62rem 0;
    border-bottom: 1px solid var(--border);
}
.pf-detail:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-detail > i {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: var(--r-xs);
    background: rgba(var(--brand-rgb), .12);
    color: var(--brand); font-size: .95rem;
}
.pf-detail .k { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-family: var(--font-mono); }
.pf-detail .v { display: block; font-weight: 600; font-size: .86rem; }
.pf-list { margin: 0; padding-left: 1.1rem; }
.pf-list li { color: var(--text-dim); margin-bottom: .42rem; line-height: 1.5; }
.pf-list li::marker { color: var(--brand); }
.pf-project {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem .8rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    height: 100%;
}
.pf-project > i { color: var(--brand); font-size: 1.05rem; flex: 0 0 auto; }
.pf-project span { font-size: .84rem; font-weight: 500; }
.pf-post {
    display: block; height: 100%;
    padding: .85rem .9rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pf-post:hover { border-color: var(--card-hover-border); transform: translateY(-3px); }
.pf-post-meta { font-family: var(--font-mono); font-size: .64rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.pf-post-title { font-family: var(--font-display); font-weight: 700; font-size: .9rem; margin: .25rem 0; color: var(--text); }
.pf-post-ex { font-size: .79rem; color: var(--text-dim); margin: 0; line-height: 1.5; }
.pf-cert {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem .75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    height: 100%;
}
.pf-cert-ico {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: var(--r-xs);
    background: rgba(245, 158, 11, .14); color: #E0930C;
    font-size: 1.05rem;
}
.pf-cert-main { flex: 1 1 auto; min-width: 0; }
.pf-cert-title { font-weight: 600; font-size: .83rem; line-height: 1.3; }
.pf-cert-code { font-family: var(--font-mono); font-size: .64rem; color: var(--text-faint); }
@media (max-width: 575px) {
    .pf-shell { margin-top: -2.6rem; }
    .pf-head { gap: .85rem; }
    .pf-avatar { width: 104px; height: 104px; border-radius: 20px; }
    .pf-socials { width: 100%; }
}

/* segmented tab links */
.list-tabs { display: inline-flex; gap: .4rem; flex-wrap: wrap; }

/* article / event detail sticky info card */
.info-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.4rem;
}
.info-card .info-k {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* academics / syllabus */
.sem-block { margin-bottom: 2.8rem; }
.sem-head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--border);
}
.sem-head .sn {
    flex: 0 0 auto;
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: #fff;
    background: var(--grad);
}
[data-theme="hacker"] .sem-head .sn { color: #00140A; }

.course-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .95rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    height: 100%;
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease);
}
.course-row:hover { transform: translateY(-4px); border-color: var(--card-hover-border); box-shadow: var(--shadow); }
.course-code {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: .73rem;
    color: var(--brand);
    background: rgba(var(--brand-rgb), .1);
    border: 1px solid rgba(var(--brand-rgb), .25);
    border-radius: var(--r-xs);
    padding: .36rem .5rem;
    white-space: nowrap;
}
.course-row .c-body { min-width: 0; flex: 1; }
.course-row .c-title { font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.3; }
.course-row .c-arrow { color: var(--text-faint); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.course-row:hover .c-arrow { color: var(--brand); transform: translateX(3px); }

/* free certificate course card */
.free-course {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1.1rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    height: 100%;
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease);
}
.free-course:hover { transform: translateY(-5px); border-color: rgba(var(--accent-rgb), .55); box-shadow: var(--shadow); }
.free-course .fc-ico {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: rgba(var(--accent-rgb), .12);
    color: var(--accent);
    font-size: 1.15rem;
}
.free-course .fc-platform {
    font-family: var(--font-mono);
    font-size: .71rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.free-course .fc-name { font-family: var(--font-display); font-weight: 600; font-size: .96rem; line-height: 1.35; margin: .1rem 0 .4rem; }
.free-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-mono);
    font-size: .67rem;
    font-weight: 600;
    color: var(--accent);
    background: rgba(var(--accent-rgb), .12);
    border: 1px solid rgba(var(--accent-rgb), .3);
    border-radius: var(--r-pill);
    padding: .16rem .5rem;
}

/* platform logo badge */
.plat-logo {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: -.02em;
    line-height: 1;
    color: #fff;
}
.plat-logo i { font-size: 1.3rem; color: #fff; }
.plat-logo.cs50   { background: #AB1A18; }
.plat-logo.kaggle { background: #20BEFF; color: #fff; font-size: 1.5rem; }
.plat-logo.fcc    { background: #0A0A23; border: 1px solid #2A2A4A; }
.book-item {
    display: flex;
    gap: .65rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
    font-size: .94rem;
}
.book-item:last-child { border-bottom: 0; }
.book-item i { color: var(--brand); }

/* pagination */
.pagination { --bs-pagination-bg: var(--surface); gap: .3rem; }
.page-link {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: var(--r-sm) !important;
}
.page-link:hover { background: var(--surface-2); color: var(--text); }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-theme="hacker"] .page-item.active .page-link { color: #00140A; }
.page-item.disabled .page-link { background: var(--surface); color: var(--text-faint); }

/* sidebar (dashboard) */
.dash-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.1rem;
}
/* Desktop: pin the sidebar, but let it scroll on its own when the menu is
   taller than the viewport (admins have ~20 items). Without this the lower
   menu items stay unreachable until the entire right-hand panel has been
   scrolled. data-lenis-prevent on the element (see partials/sidebar) stops
   the smooth-scroll engine from swallowing wheel events over the sidebar. */
@media (min-width: 992px) {
    .dash-sidebar {
        position: sticky;
        top: 96px;
        max-height: calc(100vh - 112px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
    }
    .dash-sidebar::-webkit-scrollbar { width: 7px; }
    .dash-sidebar::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px;
    }
}
.dash-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--text-dim);
    border-radius: var(--r-sm);
    padding: .58rem .8rem;
    font-weight: 500;
    font-size: .9rem;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dash-sidebar .nav-link:hover { background: var(--surface-2); color: var(--text); }
.dash-sidebar .nav-link.active { background: rgba(var(--brand-rgb), .14); color: var(--brand); }
.dash-sidebar .side-group {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: .9rem .8rem .35rem;
}
.dash-sidebar hr { border-color: var(--border); margin: .6rem 0; }

/* dashboard stat tile + list groups */
.stat-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.3rem 1.4rem;
    height: 100%;
    transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.stat-tile:hover { border-color: var(--card-hover-border); transform: translateY(-4px); }
.stat-tile .k {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.stat-tile .v {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.3rem;
    line-height: 1.1;
    margin: .2rem 0;
}
.list-group { --bs-list-group-bg: transparent; }
.list-group-item {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}
.list-group-flush > .list-group-item { padding-left: 0; padding-right: 0; }
.dash-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.dash-panel .dash-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .95rem 1.15rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    font-family: var(--font-display);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   20. SCROLL REVEAL HOOKS  (IntersectionObserver-driven; CSS does the motion)
   ------------------------------------------------------------------------- */
[data-reveal], [data-stagger] {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-stagger] { transform: translateY(30px) scale(.975); }
[data-reveal].in, [data-stagger].in { opacity: 1; transform: none; }
/* No-JS / failsafe: if site.js never marked the page ready, show everything */
html:not(.js-ready) [data-reveal],
html:not(.js-ready) [data-stagger] { opacity: 1; transform: none; }
/* Slow-network safety net: on 2G/3G/Save-Data the GSAP/ScrollTrigger/Lenis
   vendor is skipped entirely (saves ~125 KB), so scroll-reveal never runs —
   show every reveal element immediately instead of leaving it at opacity:0. */
html[data-perf="lite"] [data-reveal],
html[data-perf="lite"] [data-stagger] { opacity: 1 !important; transform: none !important; }

/* ---------------------------------------------------------------------------
   HERO ENTRANCE ARMING — prevents the "double load" flash
   .hero-armed is set on <html> in <head> BEFORE paint, but ONLY when the late
   GSAP hero entrance will actually run (not lite, not reduced-motion). It hides
   the exact bits the GSAP timeline re-animates, so they don't show first and
   re-enter a second later. scroll-animations.js removes .hero-armed right
   before it plays the timeline; the failsafe @media + timeout below guarantees
   content is never stuck hidden.
   ------------------------------------------------------------------------- */
html.hero-armed [data-hero-title] .word,
html.hero-armed [data-hero-sub],
html.hero-armed [data-hero-actions] > *,
html.hero-armed [data-hero-chip],
html.hero-armed [data-hero-visual] {
    opacity: 0;
    visibility: hidden;
}
/* CSS-only failsafe: if scroll-animations.js never runs (script failed to
   load, JS error, GSAP missing), reveal everything after 1.5s so the hero is
   never permanently hidden. The keyframe both forces visibility AND removes
   itself, so it can't fight the GSAP timeline once that takes over. */
@keyframes hero-failsafe-show { to { opacity: 1; visibility: visible; } }
html.hero-armed [data-hero-title] .word,
html.hero-armed [data-hero-sub],
html.hero-armed [data-hero-actions] > *,
html.hero-armed [data-hero-chip],
html.hero-armed [data-hero-visual] {
    animation: hero-failsafe-show 0.01s linear 1.5s forwards;
}
/* reduced-motion never arms in JS, but belt-and-suspenders: never hide. */
@media (prefers-reduced-motion: reduce) {
    html.hero-armed [data-hero-title] .word,
    html.hero-armed [data-hero-sub],
    html.hero-armed [data-hero-actions] > *,
    html.hero-armed [data-hero-chip],
    html.hero-armed [data-hero-visual] {
        opacity: 1 !important; visibility: visible !important; animation: none !important;
    }
}

/* Reusable below-the-fold optimization utility: skip layout/paint of heavy
   off-screen sections until scrolled near. Defined only — NOT applied to any
   element here (applying it is deferred to avoid breaking layout). */
.cv-auto { content-visibility: auto; contain-intrinsic-size: 0 600px; }

/* hacker-mode global text glow */
[data-theme="hacker"] body { font-family: var(--font-mono); }
[data-theme="hacker"] h1, [data-theme="hacker"] h2,
[data-theme="hacker"] h3, [data-theme="hacker"] .hero-title,
[data-theme="hacker"] .section-title { text-shadow: 0 0 18px rgba(0, 255, 65, .45); }
[data-theme="hacker"] .grad-text,
[data-theme="hacker"] .hero-rotator .rot { filter: drop-shadow(0 0 12px rgba(0, 255, 65, .6)); }
[data-theme="hacker"] .btn-primary { box-shadow: 0 0 28px rgba(0, 255, 65, .45); }

/* ===== HACKER MODE — advanced FX: glitch, CRT, scan beam, HUD ===== */
.fx-beam { position: absolute; left: 0; right: 0; top: 0; height: 150px; opacity: 0; }
[data-theme="hacker"] .fx-beam {
    opacity: 1;
    background: linear-gradient(180deg, transparent, rgba(0, 255, 65, .07) 44%, rgba(0, 255, 65, .18) 50%, rgba(0, 255, 65, .07) 56%, transparent);
    animation: beam-sweep 7.5s linear infinite;
}
@keyframes beam-sweep { 0% { transform: translateY(-160px); } 100% { transform: translateY(100vh); } }

.fx-flicker { position: absolute; inset: 0; opacity: 0; background: rgba(0, 255, 65, .022); }
[data-theme="hacker"] .fx-flicker { opacity: 1; animation: crt-flicker 4.5s ease-in-out infinite; }
@keyframes crt-flicker { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

[data-theme="hacker"] .hero-title { animation: h-glitch 5.5s infinite; }
@keyframes h-glitch {
    0%, 90%, 100% { transform: none; }
    91%   { transform: translate(-2px, 1px); text-shadow: 2px 0 #ff2d6f, -2px 0 #00fff9, 0 0 18px rgba(0, 255, 65, .5); }
    92.5% { transform: translate(2px, -1px); text-shadow: -2px 0 #ff2d6f, 2px 0 #00fff9; }
    94%   { transform: translate(-1px, 0); text-shadow: 1px 0 #ff2d6f; }
    95.5% { transform: none; }
}

/* terminal HUD */
.hacker-hud { display: none; }
[data-theme="hacker"] .hacker-hud {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    position: fixed;
    left: 16px; bottom: 16px;
    z-index: 1035;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--brand);
    background: rgba(0, 10, 4, .9);
    border: 1px solid var(--border-2);
    border-radius: var(--r-pill);
    padding: .42rem .9rem;
    box-shadow: 0 0 24px rgba(0, 255, 65, .32);
    backdrop-filter: blur(6px);
}
.hud-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 9px var(--brand);
    animation: hud-pulse 1.5s ease-in-out infinite;
}
@keyframes hud-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.6); } }
.hud-sep { opacity: .45; }
.hud-blink { animation: caret 1.05s steps(2) infinite; }

/* hacker — extra glow on chrome */
[data-theme="hacker"] .fx-matrix { opacity: .6; }
[data-theme="hacker"] .u-card:hover,
[data-theme="hacker"] .pillar:hover,
[data-theme="hacker"] .bento-card:hover,
[data-theme="hacker"] .committee-card:hover,
[data-theme="hacker"] .sem-card:hover,
[data-theme="hacker"] .free-course:hover,
[data-theme="hacker"] .course-row:hover,
[data-theme="hacker"] .event-card:hover { box-shadow: 0 0 26px rgba(0, 255, 65, .22); }
[data-theme="hacker"] .code-window { box-shadow: 0 0 42px rgba(0, 255, 65, .26); }
[data-theme="hacker"] .nav-brand img,
[data-theme="hacker"] .footer-brand img { filter: drop-shadow(0 0 8px rgba(0, 255, 65, .6)); }
[data-theme="hacker"] .hero-eyebrow { box-shadow: inset 0 0 16px rgba(0, 255, 65, .08); }

/* ---------------------------------------------------------------------------
   21. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .hero-inner { grid-template-columns: 1fr; }
    .code-stack { order: -1; }
    .bento-card, .bento-card.span-3 { grid-column: span 6; }
    .nav-links, .nav-desktop-only { display: none; }
    .nav-toggler { display: grid; }
    .stat-band { grid-template-columns: repeat(2, 1fr); }
    .stat-band .stat-block:last-child { grid-column: 1 / -1; }

    .nav-mobile {
        position: fixed;
        inset: var(--nav-h) 0 auto 0;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        padding: 1rem;
        display: none;
        flex-direction: column;
        gap: .25rem;
        max-height: calc(100vh - var(--nav-h));
        overflow-y: auto;
        box-shadow: var(--shadow);
    }
    .nav-mobile.open { display: flex; }
    .nav-mobile .nav-link {
        padding: .8rem 1rem;
        color: var(--text);
        font-family: var(--font-display);
        font-weight: 600;
        border-radius: var(--r-sm);
    }
    .nav-mobile .nav-link:hover { background: var(--surface-2); }
    .nav-mobile .mob-group-label {
        font-family: var(--font-mono);
        font-size: .7rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--text-faint);
        padding: .8rem 1rem .3rem;
    }
}
@media (max-width: 767px) {
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .stat-band { grid-template-columns: 1fr; }
    .stat-band .stat-block:last-child { grid-column: auto; }
    .collage { aspect-ratio: 3 / 3; }
    .footer-bottom { justify-content: center; text-align: center; }
}
@media (max-width: 575px) {
    .hero-stats { grid-template-columns: 1fr; }
}

/* ---- mobile polish ---- */
@media (max-width: 767px) {
    .committee-panel-head { flex-wrap: wrap; gap: .7rem .9rem; }
    .committee-panel-head .pb-ico { width: 42px; height: 42px; font-size: 1.1rem; }
    .sem-head { flex-wrap: wrap; }
    .sem-head .sn { width: 50px; height: 50px; font-size: 1.3rem; }
    .cw-body { font-size: .74rem; min-height: 220px; }
    .cw-gutter { padding-left: .6rem; padding-right: .4rem; }
    .code-window { max-width: 480px; margin-inline: auto; }
    .back-to-top { right: 14px; bottom: 86px; width: 44px; height: 44px; }
    [data-theme="hacker"] .hacker-hud {
        font-size: .58rem; padding: .34rem .68rem; gap: .35rem;
        left: 10px; bottom: 10px;
    }
    [data-theme="hacker"] .fx-matrix { opacity: .4; }
    [data-theme="hacker"] .fx-flicker { animation-duration: 7s; }
    .profile-avatar { width: 96px; height: 96px; }
    .mc-photo-info h3 { font-size: 1.12rem; }
    .stat-band { border-radius: var(--r-md); }
}
@media (max-width: 380px) {
    .mc-facts { grid-template-columns: 1fr; }
    .hero-eyebrow { font-size: .72rem; }
}

/* ---------------------------------------------------------------------------
   22. REDUCED MOTION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal], [data-stagger] { opacity: 1 !important; transform: none !important; }
    /* Keep the matrix rain in hacker theme (it's the opted-in signature effect);
       hide it only in the calmer light/dark themes under reduced-motion. */
    html:not([data-theme="hacker"]) .fx-matrix { display: none; }
    .marquee-row { animation: none !important; }
}

/* ===========================================================================
   LEARNING SYSTEM  (Phase 2)
   ========================================================================= */
.track-blue   { --tc: #3B82F6; --tc-rgb: 59,130,246; }
.track-green  { --tc: #10B981; --tc-rgb: 16,185,129; }
.track-violet { --tc: #8B5CF6; --tc-rgb: 139,92,246; }
.track-amber  { --tc: #F59E0B; --tc-rgb: 245,158,11; }
.track-cyan   { --tc: #06B6D4; --tc-rgb: 6,182,212; }

/* how-it-works steps */
.learn-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.7rem; }
.learn-step {
    display: flex; align-items: center; gap: .7rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: .7rem 1rem;
}
.learn-step .ls-num {
    width: 30px; height: 30px; flex: 0 0 auto;
    display: grid; place-items: center; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: .85rem;
}
.learn-step strong { display: block; font-size: .88rem; }
.learn-step small { color: var(--text-faint); font-size: .73rem; }
.learn-step-arrow { color: var(--text-faint); }
@media (max-width: 640px) { .learn-step-arrow { display: none; } .learn-step { flex: 1 1 100%; } }

/* track card */
.track-card {
    display: block; height: 100%; position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 1.3rem;
    text-decoration: none; color: var(--text);
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.track-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tc);
}
.track-card:hover { transform: translateY(-6px); border-color: rgba(var(--tc-rgb), .5); box-shadow: var(--shadow); }
.track-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.track-top .feature-ico { width: 48px; height: 48px; font-size: 1.3rem; }
.track-level {
    font-family: var(--font-mono); font-size: .6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--tc); background: rgba(var(--tc-rgb), .13);
    padding: .26rem .6rem; border-radius: var(--r-pill);
}
.track-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 .35rem; }
.track-summary { color: var(--text-dim); font-size: .85rem; line-height: 1.5; margin: 0 0 .9rem; }
.track-meta {
    display: flex; flex-wrap: wrap; gap: .75rem;
    font-family: var(--font-mono); font-size: .7rem; color: var(--text-faint);
    padding-top: .8rem; border-top: 1px solid var(--border);
}
.track-meta i { color: var(--tc); }
.track-progress { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: .9rem; }
.track-progress-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--tc, var(--brand)), var(--brand-2)); }
.track-progress-label { font-family: var(--font-mono); font-size: .67rem; color: var(--text-faint); margin-top: .35rem; }
.track-cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font-weight: 600; font-size: .83rem; color: var(--tc); }
.track-cta i { transition: transform var(--t-fast) var(--ease); }
.track-card:hover .track-cta i { transform: translateX(3px); }

/* track detail hero */
.track-hero { position: relative; padding: 2.4rem 0 2rem; border-bottom: 1px solid var(--border); overflow: hidden; }
.track-hero-inner { position: relative; z-index: 1; }
.track-hero-row { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: .6rem; }
.track-hero-ico { width: 64px !important; height: 64px !important; font-size: 1.8rem !important; flex: 0 0 auto; }
.track-hero-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.track-hero-meta {
    display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 1.2rem;
    font-family: var(--font-mono); font-size: .78rem; color: var(--text-dim);
}
.track-hero-meta i { color: var(--brand); margin-right: .3rem; }

/* curriculum lesson list */
.lesson-list { display: flex; flex-direction: column; gap: .55rem; }
.lesson-item {
    display: flex; align-items: center; gap: .9rem;
    padding: .8rem .9rem; border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--border);
    text-decoration: none; color: var(--text);
    transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lesson-item:hover { border-color: var(--card-hover-border); transform: translateX(4px); }
.lesson-num {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--surface-3, var(--surface)); border: 1px solid var(--border-2);
    font-family: var(--font-mono); font-weight: 700; font-size: .85rem; color: var(--text-dim);
}
.lesson-num i { display: none; }
.lesson-item.is-done .lesson-num { background: var(--accent); border-color: var(--accent); color: #04130D; font-size: 0; }
.lesson-item.is-done .lesson-num i { display: block; font-size: 1rem; }
.lesson-info { flex: 1 1 auto; min-width: 0; }
.lesson-name { display: block; font-weight: 600; font-size: .92rem; }
.lesson-time { font-family: var(--font-mono); font-size: .68rem; color: var(--text-faint); }
.lesson-time i { margin-right: .2rem; }
.lesson-go { color: var(--text-faint); }
.lesson-item:hover .lesson-go { color: var(--brand); }

/* track detail sidebar */
.track-side { position: sticky; top: 90px; }
.track-side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.3rem; }
.ts-progress-num { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--brand); }
.ts-progress-num span { font-size: 1.1rem; color: var(--text-faint); }
.ts-progress-label { font-size: .8rem; color: var(--text-dim); margin-top: .2rem; }
.ts-exam-head { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: .6rem; }
.ts-exam-head i { color: var(--brand); }
.ts-exam-note { font-size: .82rem; color: var(--text-dim); margin: 0; }
.ts-exam-lock {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
    color: var(--text-faint); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--r-pill);
    padding: .3rem .7rem; margin-bottom: .5rem;
}
.ts-cert {
    display: flex; align-items: center; gap: .7rem;
    background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .3);
    border-radius: var(--r-md); padding: .8rem;
}
.ts-cert > i { font-size: 1.7rem; color: var(--accent); }
.ts-cert strong { display: block; font-size: .9rem; }
.ts-cert small { color: var(--text-dim); font-size: .76rem; }

/* lesson viewer */
.lesson-section { padding-top: 1.6rem; }
.lesson-side { position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem; }
.lesson-side-track { display: flex; gap: .65rem; align-items: center; text-decoration: none; color: var(--text); }
.lesson-side-track .feature-ico { width: 40px; height: 40px; font-size: 1.05rem; }
.lesson-side-track small { display: block; font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.lesson-side-track strong { font-size: .9rem; line-height: 1.2; }
.lesson-side-progress { font-family: var(--font-mono); font-size: .66rem; color: var(--text-faint); margin-top: .35rem; }
.lesson-side-list { display: flex; flex-direction: column; gap: .2rem; margin-top: .9rem; }
.lesson-side-item {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .55rem; border-radius: var(--r-sm);
    text-decoration: none; color: var(--text-dim); font-size: .82rem;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lesson-side-item:hover { background: var(--surface-2); color: var(--text); }
.lesson-side-item.is-current { background: rgba(var(--brand-rgb), .12); color: var(--brand); font-weight: 600; }
.lsi-dot {
    width: 22px; height: 22px; flex: 0 0 auto;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--surface-2); border: 1px solid var(--border-2);
    font-family: var(--font-mono); font-size: .68rem; color: var(--text-faint);
}
.lsi-dot i { display: none; }
.lesson-side-item.is-done .lsi-dot { background: var(--accent); border-color: var(--accent); color: #04130D; font-size: 0; }
.lesson-side-item.is-done .lsi-dot i { display: block; font-size: .72rem; }
.lsi-name { flex: 1 1 auto; line-height: 1.3; }

.lesson-article { padding: 1.8rem 2rem 2rem; }
.lesson-article-head { border-bottom: 1px solid var(--border); padding-bottom: 1.1rem; margin-bottom: 1.4rem; }
.lesson-kicker { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); }
.lesson-h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; margin: .35rem 0 .5rem; line-height: 1.2; }
.lesson-byline { font-family: var(--font-mono); font-size: .74rem; color: var(--text-faint); display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.lesson-done-tag { color: var(--accent); }
.lesson-done-tag i { margin-right: .2rem; }

/* lesson rich content */
.lesson-prose { color: var(--text-dim); font-size: .95rem; line-height: 1.75; }
.lesson-prose h3 { font-family: var(--font-display); color: var(--text); font-size: 1.18rem; font-weight: 700; margin: 1.8rem 0 .7rem; }
.lesson-prose h4 { font-family: var(--font-display); color: var(--text); font-size: 1rem; font-weight: 600; margin: 1.4rem 0 .5rem; }
.lesson-prose p { margin: 0 0 1rem; }
.lesson-prose ul, .lesson-prose ol { margin: 0 0 1.1rem 1.3rem; }
.lesson-prose li { margin-bottom: .4rem; }
.lesson-prose li::marker { color: var(--brand); }
.lesson-prose strong { color: var(--text); }
.lesson-prose code {
    font-family: var(--font-mono); font-size: .84em;
    background: rgba(var(--brand-rgb), .13); color: var(--brand);
    padding: .1rem .36rem; border-radius: 5px;
}
.lesson-prose pre {
    background: #0c1322; border: 1px solid var(--border-2);
    border-radius: var(--r-md); padding: 1rem 1.1rem;
    overflow-x: auto; margin: 0 0 1.2rem;
}
.lesson-prose pre code { background: none; color: #d6e2f5; padding: 0; font-size: .82rem; line-height: 1.7; }
.lesson-prose blockquote {
    border-left: 3px solid var(--brand); background: var(--surface-2);
    padding: .8rem 1rem; margin: 0 0 1.2rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-dim);
}
.lesson-actions { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.lesson-complete-form { margin: 0; }
.lesson-login-hint { font-size: .78rem; color: var(--text-faint); }
.lesson-nav { display: flex; gap: .5rem; margin-left: auto; }
@media (max-width: 575px) { .lesson-article { padding: 1.3rem; } .lesson-nav { margin-left: 0; width: 100%; } }

/* quiz / exam — answer options */
.quiz-option {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .72rem .9rem; margin-bottom: .5rem;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-sm); cursor: pointer;
    font-size: .92rem; color: var(--text);
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.quiz-option:last-of-type { margin-bottom: 0; }
.quiz-option:hover { border-color: var(--card-hover-border); }
.quiz-option .form-check-input { margin-top: .2rem; flex: 0 0 auto; }
.quiz-option.is-correct { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.quiz-option.is-wrong { border-color: var(--danger); background: rgba(244, 63, 94, .12); }
.question-card .feedback { color: var(--text-dim); }
.question-card .feedback:empty { display: none; }

/* certificate verification page */
.verify-card { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--brand); border-radius: var(--r-lg); padding: 1.9rem; }
.verify-card.is-genuine { border-top-color: var(--accent); }
.verify-card.is-warn { border-top-color: #F59E0B; }
.verify-card.is-invalid { border-top-color: var(--danger); }
.verify-head { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.3rem; }
.verify-seal { width: 66px; height: 66px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 2rem; color: #fff; }
.verify-seal.genuine { background: linear-gradient(135deg, var(--accent), #10B981); }
.verify-seal.warn { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.verify-seal.invalid { background: linear-gradient(135deg, #EF4444, #B91C1C); }
.verify-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin: .4rem 0 .25rem; }
.verify-note { color: var(--text-dim); font-size: .9rem; }
.verify-row { display: flex; justify-content: space-between; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid var(--border); }
.verify-row:last-child { border-bottom: 0; }
.vk { color: var(--text-faint); font-size: .8rem; font-family: var(--font-mono); }
.vv { font-weight: 600; font-size: .9rem; text-align: right; }
.mono { font-family: var(--font-mono); }
.verify-qr { width: 156px; height: 156px; border-radius: var(--r-md); border: 1px solid var(--border); background: #fff; padding: 7px; }
.verify-qr-cap { font-size: .71rem; color: var(--text-faint); margin-top: .45rem; font-family: var(--font-mono); }
.verify-trust {
    display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center;
    margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px dashed var(--border);
    font-size: .82rem; color: var(--text-dim);
}
.verify-trust i { color: var(--accent); margin-right: .3rem; }
.verify-search { display: flex; gap: .6rem; }
.verify-search .form-control { flex: 1 1 auto; }

/* ===========================================================================
   EVENTS & RESOURCES  (Phase 3)
   ========================================================================= */

/* --- events list cards --- */
.evt-card {
    display: block; height: 100%; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); text-decoration: none; color: var(--text);
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.evt-card:hover { transform: translateY(-6px); border-color: var(--card-hover-border); box-shadow: var(--shadow); }
.evt-card-cover { position: relative; height: 168px; overflow: hidden; }
.evt-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.evt-card:hover .evt-card-cover img { transform: scale(1.05); }
.evt-card-cover-fallback {
    width: 100%; height: 100%; display: grid; place-items: center;
    background: linear-gradient(150deg, #243352, #0d1430);
    color: rgba(255,255,255,.5); font-size: 2.8rem;
}
.evt-date-badge {
    position: absolute; top: .7rem; left: .7rem;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: var(--r-sm); padding: .35rem .6rem; text-align: center;
    box-shadow: var(--shadow-sm);
}
.evt-date-badge .d { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; line-height: 1; color: var(--brand); }
.evt-date-badge .m { display: block; font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.evt-status { position: absolute; top: .7rem; right: .7rem; }
.evt-card-body { padding: 1rem 1.1rem 1.1rem; }
.evt-card-type { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.evt-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; margin: .3rem 0 .55rem; }
.evt-card-meta { display: flex; flex-wrap: wrap; gap: .8rem; font-family: var(--font-mono); font-size: .72rem; color: var(--text-faint); }
.evt-card-meta i { color: var(--brand); }
.evt-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .85rem; padding-top: .8rem; border-top: 1px solid var(--border);
}
.evt-going-pill {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
    color: var(--accent); background: rgba(var(--accent-rgb), .12);
    padding: .26rem .6rem; border-radius: var(--r-pill);
}
.evt-card-cta { font-size: .8rem; font-weight: 600; color: var(--brand); }
.evt-card:hover .evt-card-cta i { transform: translateX(3px); }
.evt-card-cta i { transition: transform var(--t-fast) var(--ease); display: inline-block; }

/* --- event detail sidebar + registration --- */
.evt-cover { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-2); }
.evt-cover img { width: 100%; display: block; }
.evt-side { position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.evt-facts { padding: 1.2rem 1.2rem .4rem; }
.evt-fact { display: flex; gap: .7rem; align-items: flex-start; padding-bottom: 1rem; }
.evt-fact > i {
    width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center;
    border-radius: var(--r-xs); background: rgba(var(--brand-rgb), .12); color: var(--brand); font-size: 1rem;
}
.evt-fact .ek { display: block; font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.evt-fact .ev { display: block; font-weight: 600; font-size: .88rem; line-height: 1.4; margin-top: .15rem; }
.evt-capacity { padding: 0 1.2rem 1rem; }
.evt-capacity-bar { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.evt-capacity-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.evt-reg { padding: 1.2rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.evt-reg-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 0; }
.evt-reg-sub { font-size: .8rem; color: var(--text-dim); margin: .2rem 0 .9rem; }
.evt-reg-form .form-control { background: var(--surface); }
.evt-reg-as { font-size: .82rem; color: var(--text-dim); margin-bottom: .6rem; }
.evt-reg-as strong { color: var(--text); }
.evt-reg-done {
    display: flex; align-items: center; gap: .5rem;
    background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3);
    color: var(--text); border-radius: var(--r-md); padding: .7rem .85rem; margin-bottom: .8rem; font-size: .88rem;
}
.evt-reg-done i { color: var(--accent); font-size: 1.2rem; }
.evt-reg-closed {
    display: flex; align-items: center; gap: .5rem;
    color: var(--text-dim); font-size: .85rem;
    background: var(--surface); border: 1px dashed var(--border-2);
    border-radius: var(--r-md); padding: .8rem .9rem;
}
.evt-reg-closed i { color: var(--text-faint); }

/* --- event ticket / confirmation --- */
.ticket-page { position: relative; overflow: hidden; padding: 3rem 0 4rem; min-height: 80vh; }
.ticket-shell { position: relative; z-index: 2; max-width: 720px; }
.ticket-hero { text-align: center; margin-bottom: 1.8rem; }
.ticket-check {
    width: 76px; height: 76px; margin: 0 auto 1rem;
    display: grid; place-items: center; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #10B981);
    color: #fff; font-size: 2.4rem;
    box-shadow: 0 12px 34px -8px rgba(var(--accent-rgb), .7);
    animation: ticket-pop .5s var(--ease) both;
}
@keyframes ticket-pop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.ticket-h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.3rem); margin: 0; }
.ticket-lead { color: var(--text-dim); margin-top: .4rem; }
.ticket {
    display: flex; background: var(--surface);
    border: 1px solid var(--border-2); border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--shadow);
}
.ticket-main { flex: 1 1 auto; padding: 1.5rem 1.7rem; min-width: 0; }
.ticket-kicker { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.ticket-title { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1.25; margin: .4rem 0 .3rem; }
.ticket-type { font-family: var(--font-mono); font-size: .76rem; color: var(--text-faint); margin-bottom: 1rem; }
.ticket-rows { display: flex; flex-direction: column; gap: .55rem; }
.ticket-row { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--border); padding-bottom: .55rem; }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row .tk { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.ticket-row .tv { font-weight: 600; font-size: .88rem; text-align: right; }
.ticket-stub {
    flex: 0 0 200px; position: relative;
    background: var(--surface-2);
    padding: 1.5rem 1.2rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-left: 2px dashed var(--border-2);
}
.ticket-stub::before, .ticket-stub::after {
    content: ""; position: absolute; left: -11px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--bg);
    border: 1px solid var(--border-2);
}
.ticket-stub::before { top: -11px; }
.ticket-stub::after { bottom: -11px; }
.ticket-qr { width: 124px; height: 124px; border-radius: var(--r-sm); background: #fff; padding: 6px; }
.ticket-code-k { font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-top: .7rem; }
.ticket-code { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: var(--brand); margin-top: .15rem; }
.ticket-scan { font-size: .7rem; color: var(--text-faint); margin-top: .5rem; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.6rem; }
.ticket-note { text-align: center; font-size: .8rem; color: var(--text-faint); margin-top: 1rem; }
@media (max-width: 560px) {
    .ticket { flex-direction: column; }
    .ticket-stub { flex-basis: auto; border-left: 0; border-top: 2px dashed var(--border-2); }
    .ticket-stub::before { top: -11px; left: -11px; }
    .ticket-stub::after { top: -11px; bottom: auto; left: auto; right: -11px; }
}

/* confetti */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.confetti span {
    position: absolute; top: -14px; width: 9px; height: 9px; border-radius: 2px;
    opacity: .85; animation: confetti-fall linear infinite;
}
@keyframes confetti-fall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
    10% { opacity: .9; }
    100% { transform: translateY(105vh) rotate(540deg); opacity: .9; }
}
.confetti span:nth-child(4n+1) { background: var(--brand); }
.confetti span:nth-child(4n+2) { background: var(--accent); }
.confetti span:nth-child(4n+3) { background: var(--brand-3); }
.confetti span:nth-child(4n)   { background: #F59E0B; }
.confetti span:nth-child(1){left:6%;animation-duration:4.2s;animation-delay:.1s}
.confetti span:nth-child(2){left:14%;animation-duration:5.1s;animation-delay:.7s}
.confetti span:nth-child(3){left:22%;animation-duration:3.8s;animation-delay:1.4s}
.confetti span:nth-child(4){left:30%;animation-duration:4.9s;animation-delay:.4s}
.confetti span:nth-child(5){left:38%;animation-duration:4.3s;animation-delay:2.1s}
.confetti span:nth-child(6){left:46%;animation-duration:5.4s;animation-delay:1s}
.confetti span:nth-child(7){left:54%;animation-duration:3.9s;animation-delay:.2s}
.confetti span:nth-child(8){left:62%;animation-duration:4.7s;animation-delay:1.7s}
.confetti span:nth-child(9){left:70%;animation-duration:5.2s;animation-delay:.9s}
.confetti span:nth-child(10){left:78%;animation-duration:4.1s;animation-delay:2.4s}
.confetti span:nth-child(11){left:86%;animation-duration:4.6s;animation-delay:.5s}
.confetti span:nth-child(12){left:94%;animation-duration:5s;animation-delay:1.3s}
.confetti span:nth-child(13){left:10%;animation-duration:4.4s;animation-delay:2.8s}
.confetti span:nth-child(14){left:42%;animation-duration:5.3s;animation-delay:3.1s}
.confetti span:nth-child(15){left:66%;animation-duration:4s;animation-delay:2.6s}
.confetti span:nth-child(16){left:90%;animation-duration:4.8s;animation-delay:3.4s}

/* --- resources --- */
.res-nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.res-nav-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: .4rem .9rem;
    font-size: .82rem; font-weight: 600; color: var(--text-dim); text-decoration: none;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.res-nav-chip:hover { border-color: var(--card-hover-border); color: var(--brand); }
.res-nav-chip span {
    font-family: var(--font-mono); font-size: .68rem;
    background: rgba(var(--brand-rgb), .14); color: var(--brand);
    border-radius: var(--r-pill); padding: .05rem .4rem;
}
.res-group-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.res-group-head .feature-ico { width: 46px; height: 46px; font-size: 1.2rem; }
.res-group-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0; }
.res-group-count { font-family: var(--font-mono); font-size: .72rem; color: var(--text-faint); }
.res-card {
    display: flex; gap: .85rem; height: 100%;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 1.1rem;
    text-decoration: none; color: var(--text);
    transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.res-card:hover { transform: translateY(-4px); border-color: var(--card-hover-border); box-shadow: var(--shadow); }
.res-card-ico {
    width: 46px; height: 46px; flex: 0 0 auto;
    display: grid; place-items: center; border-radius: var(--r-sm);
    background: rgba(var(--brand-rgb), .12); color: var(--brand); font-size: 1.3rem;
}
.res-card-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.res-card-title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; margin: 0 0 .25rem; }
.res-card-desc { font-size: .82rem; color: var(--text-dim); line-height: 1.5; margin: 0 0 .7rem; }
.res-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: .5rem; }
.res-card-host { font-family: var(--font-mono); font-size: .68rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-card-open { font-size: .76rem; font-weight: 600; color: var(--brand); flex: 0 0 auto; }

/* ============================================================================
   EVENT DETAIL PAGE  —  immersive, detailed layout
   ========================================================================== */
.ev-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(360px, 52vh, 540px);
    margin-top: calc(-1 * var(--nav-h));
    padding-top: var(--nav-h);
    overflow: hidden;
    background: linear-gradient(135deg, #0d1b3e, #15224a 55%, #241a52);
}
.ev-hero-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.ev-hero-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,12,28,.35) 0%, rgba(8,12,28,.72) 62%, rgba(8,12,28,.94) 100%);
}
.ev-hero .hero-bg { position: absolute; inset: 0; }
.ev-hero-inner { position: relative; z-index: 2; padding: 2.4rem 0 2.6rem; }
.ev-hero-inner .breadcrumb-row a,
.ev-hero-inner .breadcrumb-row span { color: rgba(255,255,255,.8); }
.ev-hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.12;
    color: #fff;
    max-width: 22ch;
    margin: 0 0 .7rem;
    text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.ev-hero-lead {
    color: rgba(255,255,255,.86);
    font-size: 1.06rem;
    max-width: 60ch;
    margin: 0 0 1.1rem;
}
.ev-quickfacts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ev-quickfacts span {
    display: inline-flex; align-items: center; gap: 7px;
    color: #fff; font-size: .9rem; font-weight: 600;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: 7px 14px; border-radius: var(--r-pill);
    backdrop-filter: blur(6px);
}
.ev-quickfacts i { color: var(--brand-2); }

.ev-body { padding-top: 2.4rem; }

.ev-section { padding: 1.7rem 1.8rem; margin-bottom: 1.2rem; }
.ev-h2 {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.4rem;
    color: var(--text); margin: 0 0 1.1rem;
}
.ev-h2 i { color: var(--brand); font-size: 1.15rem; }

/* highlights */
.ev-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ev-highlight {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 15px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: .94rem; color: var(--text);
}
.ev-highlight-ico {
    flex: none; width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--grad); color: #fff;
    font-size: .8rem;
}

/* agenda timeline */
.ev-timeline { position: relative; padding-left: 6px; }
.ev-tl-item { position: relative; display: flex; gap: 16px; padding-bottom: 1.4rem; }
.ev-tl-item:last-child { padding-bottom: 0; }
.ev-tl-marker { position: relative; flex: none; width: 18px; display: flex; justify-content: center; }
.ev-tl-marker::before {
    content: ''; position: absolute; top: 16px; bottom: -6px; left: 50%;
    width: 2px; transform: translateX(-50%);
    background: linear-gradient(var(--brand), var(--border));
}
.ev-tl-item:last-child .ev-tl-marker::before { display: none; }
.ev-tl-dot {
    width: 16px; height: 16px; margin-top: 3px;
    border-radius: 50%;
    background: var(--surface);
    border: 4px solid var(--brand);
    z-index: 1;
}
.ev-tl-body {
    flex: 1 1 auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 16px;
}
.ev-tl-time {
    display: inline-block;
    font-family: var(--font-mono); font-size: .76rem; font-weight: 600;
    color: var(--brand);
    background: rgba(var(--brand-rgb), .1);
    padding: 2px 9px; border-radius: var(--r-pill);
    margin-bottom: 5px;
}
.ev-tl-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--text); margin: 0; }
.ev-tl-desc { color: var(--text-dim); font-size: .9rem; margin: .35rem 0 0; }

/* share */
.ev-share {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.ev-share-label { font-weight: 600; color: var(--text); }
.ev-share-links { display: flex; gap: 8px; }
.ev-share-btn {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-2);
    color: var(--text-dim); font-size: 1.05rem;
    transition: all var(--t-fast);
}
.ev-share-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-2px); }

/* sticky aside */
.ev-aside { position: sticky; top: 90px; }
.ev-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow-sm);
}
.ev-reg-card { border-top: 3px solid transparent; border-image: var(--grad) 1; }
.ev-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); margin: 0 0 1rem; }

.ev-reg-top { display: flex; align-items: center; gap: 14px; padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.ev-reg-date {
    flex: none; width: 62px; text-align: center;
    border-radius: var(--r-md);
    background: var(--grad); color: #fff;
    padding: 8px 0;
}
.ev-reg-date .d { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.ev-reg-date .m { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.ev-reg-when { font-family: var(--font-display); font-weight: 700; color: var(--text); }
.ev-reg-time { font-size: .86rem; color: var(--text-dim); }

.ev-capacity { margin-bottom: 1rem; }
.ev-capacity-row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--text-dim); margin-bottom: 5px; }
.ev-capacity-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.ev-capacity-bar span { display: block; height: 100%; background: var(--grad); border-radius: var(--r-pill); }

.ev-reg-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); margin: 0 0 .2rem; }
.ev-reg-sub { font-size: .85rem; color: var(--text-dim); margin: 0 0 .9rem; }
.ev-reg-as { font-size: .85rem; color: var(--text-dim); margin-bottom: .6rem; }
.ev-reg-done {
    display: flex; align-items: center; gap: 8px;
    background: rgba(var(--accent-rgb), .14);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), .3);
    border-radius: var(--r-md);
    padding: 11px 14px; font-weight: 600; margin-bottom: .8rem;
}
.ev-reg-closed {
    display: flex; align-items: flex-start; gap: 8px;
    background: var(--surface-2); border: 1px dashed var(--border-2);
    border-radius: var(--r-md); padding: 12px 14px;
    color: var(--text-dim); font-size: .9rem;
}
.ev-reg-form .form-control { font-size: .9rem; }

.ev-meta-list { display: flex; flex-direction: column; gap: 14px; }
.ev-meta { display: flex; gap: 12px; }
.ev-meta i {
    flex: none; width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--brand);
    font-size: .95rem;
}
.ev-meta .k { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.ev-meta .v { display: block; font-size: .92rem; color: var(--text); font-weight: 600; }

.ev-related { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--border); }

@media (max-width: 991px) {
    .ev-aside { position: static; }
    .ev-highlights { grid-template-columns: 1fr; }
}

/* ============================================================================
   DCCPS · UI 2026 — appended upgrade layer
   Adds CSS for components whose markup shipped without styling (navbar search,
   mobile slide-in menu, command palette, Voices, Partners) and refines the
   badge / icon / responsive system. All tokens are theme-aware (light/dark/
   hacker). Appended last, so these rules intentionally win over earlier ones.
   ========================================================================== */

/* ---- scroll locks (mobile menu / command palette open) -------------------- */
html.nav-lock, html.cmdk-lock { overflow: hidden; }
html.nav-lock body, html.cmdk-lock body { overflow: hidden; }

/* ===========================================================================
   NAVBAR — search pill, hamburger, scrim
   ========================================================================= */
.nav-right { gap: .55rem; }

/* Compact icon-only nav buttons (Playground, future quick actions).
   Same height & visual language as the search pill — but always 42×42 px,
   so they never widen the right cluster on tablet/desktop. */
.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-dim);
    text-decoration: none;
    font-size: 1rem;
    transition: border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}
.nav-icon-btn:hover {
    color: var(--brand);
    border-color: var(--card-hover-border);
    background: rgba(var(--brand-rgb), .07);
}
.nav-icon-btn.is-active {
    color: var(--brand);
    border-color: rgba(var(--brand-rgb), .35);
    background: rgba(var(--brand-rgb), .08);
}

.nav-search {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 42px;
    padding: 0 .6rem 0 .9rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--text-dim);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: .86rem;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}
.nav-search:hover {
    color: var(--text);
    border-color: var(--card-hover-border);
    background: rgba(var(--brand-rgb), .07);
}
.nav-search > i { font-size: 1rem; color: var(--text-faint); transition: color var(--t-fast) var(--ease); }
.nav-search:hover > i { color: var(--brand); }
.nav-search-txt { line-height: 1; }
.nav-search-kbd {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-faint);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .16rem .4rem;
    line-height: 1;
}

/* animated hamburger — three bars morph into an X */
.nav-toggler { transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.nav-toggler .ham { position: relative; display: block; width: 21px; height: 15px; }
.nav-toggler .ham b {
    position: absolute; left: 0; display: block;
    width: 100%; height: 2.2px; border-radius: 2px;
    background: currentColor;
    transition: transform .3s var(--ease), opacity .2s var(--ease), width .3s var(--ease);
}
.nav-toggler .ham b:nth-child(1) { top: 0; }
.nav-toggler .ham b:nth-child(2) { top: 6.4px; }
.nav-toggler .ham b:nth-child(3) { top: 12.8px; width: 66%; }
.nav-toggler:hover .ham b:nth-child(3) { width: 100%; }
.nav-toggler.is-open { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-theme="hacker"] .nav-toggler.is-open { color: #00140A; }
.nav-toggler.is-open .ham b:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
.nav-toggler.is-open .ham b:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.nav-toggler.is-open .ham b:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); width: 100%; }

/* dark scrim behind the slide-in menu */
.nav-scrim {
    position: fixed; inset: 0;
    z-index: 1024;
    background: rgba(6, 9, 18, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.nav-scrim.show { opacity: 1; visibility: visible; }

/* ===========================================================================
   MOBILE SLIDE-IN MENU  (overrides the older top-dropdown rules)
   ========================================================================= */
.nav-mobile {
    position: fixed;
    top: var(--nav-h); right: 0; bottom: 0; left: auto;
    width: min(88vw, 372px);
    z-index: 1026;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.1rem 1.05rem 1.6rem;
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -34px 0 70px -38px rgba(0, 0, 0, .75);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(106%);
    visibility: hidden;
    transition: transform .36s var(--ease), visibility .36s var(--ease);
}
.nav-mobile.open { transform: none; visibility: visible; }

/* account header */
.nm-user {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .8rem; margin-bottom: .55rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
}
.nm-user:hover { border-color: var(--card-hover-border); }
.nm-user-av img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-2); }
.nm-user-meta { flex: 1 1 auto; min-width: 0; }
.nm-user-meta strong { display: block; font-size: .92rem; line-height: 1.2; }
.nm-user-meta small { display: flex; align-items: center; gap: .35rem; color: var(--text-faint); font-size: .73rem; }
.nm-online { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); flex: 0 0 auto; }
.nm-user > .bi-chevron-right { color: var(--text-faint); }

.nm-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .55rem; }
.nm-quick a {
    display: flex; flex-direction: column; align-items: center; gap: .32rem;
    padding: .65rem .2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-size: .62rem; font-weight: 600; text-align: center;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nm-quick a i { font-size: 1.05rem; color: var(--brand); }
.nm-quick a:hover { border-color: var(--card-hover-border); color: var(--text); }
.nm-quick .nm-quick-out i { color: var(--danger); }

.nm-auth { display: grid; gap: .5rem; margin-bottom: .65rem; }
.nm-auth .btn { width: 100%; }

.nm-search {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: .75rem .85rem; margin-bottom: .2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-faint);
    font-size: .84rem; cursor: pointer;
    transition: border-color var(--t-fast) var(--ease);
}
.nm-search:hover { border-color: var(--card-hover-border); }
.nm-search > i { color: var(--brand); font-size: 1rem; }
.nm-search span { flex: 1 1 auto; text-align: left; }
.nm-search kbd {
    font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
    color: var(--text-faint); background: var(--surface);
    border: 1px solid var(--border); border-radius: 5px; padding: .1rem .38rem;
}

.nm-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-bottom: .2rem; }
.nm-theme-opt {
    display: flex; flex-direction: column; align-items: center; gap: .28rem;
    padding: .6rem .2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-size: .66rem; font-weight: 600; cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}
.nm-theme-opt i { font-size: 1.05rem; }
.nm-theme-opt:hover { color: var(--text); border-color: var(--card-hover-border); }
.nm-theme-opt.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(var(--brand-rgb), .45); }
[data-theme="hacker"] .nm-theme-opt.active { color: #00140A; }

.nm-label {
    font-family: var(--font-mono);
    font-size: .63rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-faint);
    padding: .85rem .35rem .3rem;
}
.nm-links { display: flex; flex-direction: column; gap: .12rem; }
.nm-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .72rem .7rem;
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-family: var(--font-display); font-weight: 600; font-size: .92rem;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nm-link > i:first-child { width: 20px; text-align: center; font-size: 1.05rem; color: var(--text-faint); transition: color var(--t-fast) var(--ease); }
.nm-link span { flex: 1 1 auto; }
.nm-link .nm-go { font-size: .8rem; color: var(--text-faint); opacity: .45; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.nm-link:hover, .nm-link.active { background: rgba(var(--brand-rgb), .09); color: var(--text); }
.nm-link:hover > i:first-child, .nm-link.active > i:first-child { color: var(--brand); }
.nm-link.active { box-shadow: inset 2px 0 0 var(--brand); }
.nm-link:hover .nm-go, .nm-link.active .nm-go { opacity: 1; transform: translateX(2px); color: var(--brand); }

.nm-foot {
    margin-top: auto;
    padding-top: 1.1rem;
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--text-faint);
}
.nm-foot-mark {
    font-weight: 700; color: var(--brand);
    background: rgba(var(--brand-rgb), .12);
    border-radius: var(--r-xs);
    padding: .1rem .4rem;
}

/* desktop never shows the mobile chrome */
@media (min-width: 992px) {
    .nav-mobile, .nav-scrim { display: none; }
}
/* mobile: hide the desktop theme switch + collapse search to an icon */
@media (max-width: 991px) {
    .dccps-nav .nav-right .theme-switch { display: none; }
    .nav-search { width: 42px; padding: 0; justify-content: center; }
    .nav-search-txt, .nav-search-kbd { display: none; }
}

/* ===========================================================================
   COMMAND PALETTE  (#cmdk)
   ========================================================================= */
.cmdk {
    position: fixed; inset: 0;
    z-index: 13500;
    display: flex; align-items: flex-start; justify-content: center;
    padding: clamp(2.5rem, 9vh, 7rem) 1rem 2rem;
    opacity: 0; visibility: hidden;
    transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.cmdk.open { opacity: 1; visibility: visible; }
.cmdk-scrim {
    position: absolute; inset: 0;
    background: rgba(6, 9, 18, .62);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}
[data-theme="light"] .cmdk-scrim { background: rgba(12, 19, 34, .4); }
.cmdk-panel {
    position: relative;
    width: 100%; max-width: 600px;
    display: flex; flex-direction: column;
    max-height: min(72vh, 560px);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: translateY(-14px) scale(.97);
    opacity: .5;
    transition: transform .26s var(--ease-spring), opacity .26s var(--ease);
}
.cmdk.open .cmdk-panel { transform: none; opacity: 1; }
.cmdk-head {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
}
.cmdk-head-ico { color: var(--brand); font-size: 1.1rem; }
.cmdk-input {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: transparent;
    color: var(--text);
    font-family: var(--font-body); font-size: 1rem;
    outline: none;
}
.cmdk-input::placeholder { color: var(--text-faint); }
.cmdk-spin {
    width: 16px; height: 16px; flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid var(--border-2);
    border-top-color: var(--brand);
    opacity: 0;
}
.cmdk-spin.on { opacity: 1; animation: cmdk-spin .7s linear infinite; }
@keyframes cmdk-spin { to { transform: rotate(360deg); } }
.cmdk-esc {
    font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
    color: var(--text-faint);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px; padding: .26rem .5rem;
    cursor: pointer;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cmdk-esc:hover { color: var(--text); border-color: var(--card-hover-border); }
.cmdk-body { overflow-y: auto; padding: .45rem; overscroll-behavior: contain; }
.cmdk-label {
    font-family: var(--font-mono);
    font-size: .62rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-faint);
    padding: .7rem .65rem .3rem;
}
.cmdk-row {
    display: flex; align-items: center; gap: .7rem;
    padding: .58rem .65rem;
    border-radius: var(--r-sm);
    color: var(--text); text-decoration: none;
}
.cmdk-row.is-active { background: rgba(var(--brand-rgb), .1); }
.cmdk-ico {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--brand); font-size: .95rem;
}
.cmdk-row.is-active .cmdk-ico { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-theme="hacker"] .cmdk-row.is-active .cmdk-ico { color: #00140A; }
.cmdk-meta { flex: 1 1 auto; min-width: 0; }
.cmdk-meta strong { display: block; font-size: .89rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-meta small { display: block; font-size: .74rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-go { color: var(--text-faint); font-size: .82rem; opacity: 0; flex: 0 0 auto; }
.cmdk-row.is-active .cmdk-go { opacity: 1; color: var(--brand); }
.cmdk-empty { text-align: center; padding: 2.6rem 1rem; }
.cmdk-empty i { font-size: 2rem; color: var(--text-faint); }
.cmdk-empty p { margin: .7rem 0 .2rem; color: var(--text); }
.cmdk-empty span { font-size: .82rem; color: var(--text-faint); }
.cmdk-foot {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .35rem 1rem;
    padding: .6rem 1rem;
    border-top: 1px solid var(--border);
    font-size: .7rem; color: var(--text-faint);
}
.cmdk-foot kbd {
    font-family: var(--font-mono); font-size: .64rem;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 4px; padding: .04rem .3rem; margin: 0 .08rem;
    color: var(--text-dim);
}
.cmdk-foot-brand { margin-left: auto; color: var(--brand); font-weight: 600; }

/* ===========================================================================
   VOICES  (member / leadership quote cards)
   ========================================================================= */
.voice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}
.voice-card {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1.6rem 1.5rem 1.35rem;
    height: 100%;
    background:
        radial-gradient(420px 150px at 100% 0%, rgba(var(--brand-rgb), .07), transparent 70%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--text); text-decoration: none;
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease-spring),
                border-color var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease);
}
.voice-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--grad);
    transform: scaleY(0); transform-origin: 0 0;
    transition: transform var(--t-mid) var(--ease);
}
.voice-card:hover { transform: translateY(-7px); border-color: var(--card-hover-border); box-shadow: var(--shadow); }
.voice-card:hover::before { transform: scaleY(1); }
.voice-quote {
    font-size: 2.1rem; line-height: 1;
    color: var(--brand); opacity: .22;
    margin-bottom: .3rem;
}
.voice-text {
    flex: 1 1 auto;
    color: var(--text-dim);
    font-size: .93rem; line-height: 1.66;
    margin: 0 0 1.2rem;
}
.voice-who {
    display: flex; align-items: center; gap: .7rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.voice-avatar {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(from 140deg, var(--brand), var(--brand-2), var(--brand-3), var(--brand));
}
.voice-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid var(--surface); background: var(--surface-2); }
.voice-meta { flex: 1 1 auto; min-width: 0; }
.voice-meta strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.25; }
.voice-meta small { display: block; font-family: var(--font-mono); font-size: .69rem; color: var(--text-faint); margin-top: .12rem; }
.voice-go { flex: 0 0 auto; color: var(--text-faint); font-size: 1.25rem; transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.voice-card:hover .voice-go { color: var(--brand); transform: translate(2px, -2px); }

/* ===========================================================================
   PARTNERS  (logo + name + tier)
   ========================================================================= */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.05rem;
}
.partner-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: .8rem;
    padding: 1.7rem 1rem 1.25rem;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    text-decoration: none; color: var(--text); text-align: center;
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease-spring),
                border-color var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease);
}
.partner-card:hover { transform: translateY(-7px); border-color: var(--card-hover-border); box-shadow: var(--shadow); }
/* diagonal shine sweep on hover */
.partner-shine {
    position: absolute; top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .14), transparent);
    transition: left .6s var(--ease);
    pointer-events: none;
}
.partner-card:hover .partner-shine { left: 130%; }
.partner-badge {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.partner-logo { max-width: 80%; max-height: 70%; object-fit: contain; }
.partner-monogram {
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.5rem;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.partner-name { font-family: var(--font-display); font-weight: 700; font-size: .96rem; line-height: 1.25; }
.partner-tier {
    display: inline-flex; align-items: center; gap: .3rem;
    font-family: var(--font-mono); font-size: .63rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    padding: .2rem .6rem;
    border-radius: var(--r-pill);
}
.partner-tier i { font-size: .8rem; }
.partner-card.tier-platinum  .partner-tier { background: rgba(124, 138, 168, .16); color: #8b95ad; border: 1px solid rgba(124, 138, 168, .32); }
.partner-card.tier-gold      .partner-tier { background: rgba(245, 158, 11, .14);  color: #e0930c; border: 1px solid rgba(245, 158, 11, .32); }
.partner-card.tier-silver    .partner-tier { background: rgba(148, 163, 184, .16); color: #94a3b8; border: 1px solid rgba(148, 163, 184, .32); }
.partner-card.tier-community .partner-tier { background: rgba(var(--accent-rgb), .14); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .3); }
.partner-card.tier-platinum  { border-top: 2px solid rgba(124, 138, 168, .5); }
.partner-card.tier-gold      { border-top: 2px solid rgba(245, 158, 11, .55); }
.partner-card.tier-silver    { border-top: 2px solid rgba(148, 163, 184, .5); }
.partner-card.tier-community { border-top: 2px solid rgba(var(--accent-rgb), .5); }

/* ===========================================================================
   BADGE / EYEBROW / ICON REFINEMENT  (premium, theme-aware)
   ========================================================================= */
.eyebrow {
    gap: .5rem;
    padding: .42rem .9rem .42rem .65rem;
    font-size: .7rem;
    letter-spacing: .13em;
    background: rgba(var(--brand-rgb), .08);
    border: 1px solid rgba(var(--brand-rgb), .2);
    border-radius: var(--r-pill);
}
.eyebrow::before {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--grad);
    box-shadow: 0 0 8px rgba(var(--brand-rgb), .55);
}
.eyebrow.center::after { content: none; }
.eyebrow.accent  { color: var(--accent);  background: rgba(var(--accent-rgb), .1); border-color: rgba(var(--accent-rgb), .24); }
.eyebrow.accent::before  { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .55); }
.eyebrow.violet  { color: var(--brand-3); background: rgba(124, 58, 237, .1);  border-color: rgba(124, 58, 237, .24); }
.eyebrow.violet::before  { background: var(--brand-3); box-shadow: 0 0 8px rgba(124, 58, 237, .5); }
.eyebrow.warn    { color: var(--warn);    background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .26); }
.eyebrow.warn::before    { background: var(--warn); box-shadow: 0 0 8px rgba(245, 158, 11, .5); }

/* feature icon — add a glossy highlight + soft ring for depth */
.feature-ico { position: relative; isolation: isolate; }
.feature-ico::after {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 46%);
    pointer-events: none;
}
[data-theme="hacker"] .feature-ico::after { background: none; }
.feature-ico.ring { box-shadow: var(--shadow-sm), 0 0 0 6px rgba(var(--brand-rgb), .08); }

/* animated icon — gentle float; settles on card hover */
.ico-anim { animation: ico-float 4.5s var(--ease) infinite; }
@keyframes ico-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.pillar:hover .ico-anim, .bento-card:hover .ico-anim { animation-play-state: paused; transform: translateY(-2px) rotate(-6deg); transition: transform var(--t-mid) var(--ease-spring); }

/* gradient-ring icon variant — for varied section styling */
.feature-ico.ico-ghost {
    background: rgba(var(--brand-rgb), .1) !important;
    border: 1px solid rgba(var(--brand-rgb), .26);
    color: var(--brand) !important;
}
.feature-ico.ico-ghost::after { background: none; }

/* ---- soft / varied section backgrounds ---------------------------------- */
.section--dotted { position: relative; }
.section--dotted::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: radial-gradient(var(--grid-line) 1px, transparent 1.3px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 80%);
    opacity: .6; pointer-events: none;
}
.section--dotted > .container { position: relative; z-index: 1; }
.section-glow { position: relative; }
.section-glow::after {
    content: ""; position: absolute; z-index: 0;
    width: 460px; height: 460px; border-radius: 50%;
    background: var(--glow-1); filter: blur(110px);
    top: -160px; right: -120px; opacity: .7; pointer-events: none;
}
.section-glow > .container { position: relative; z-index: 1; }

/* "show more" link — used by the trimmed academic section */
.show-more-row { margin-top: 1.6rem; text-align: center; }
.show-more {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.4rem;
    font-family: var(--font-display); font-weight: 600; font-size: .92rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-pill);
    transition: all var(--t-fast) var(--ease);
}
.show-more:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.show-more .more-count {
    font-family: var(--font-mono); font-size: .72rem;
    background: rgba(var(--brand-rgb), .12); color: var(--brand);
    border-radius: var(--r-pill); padding: .1rem .5rem;
}

/* ===========================================================================
   RESPONSIVE — shorten + tidy the mobile home page (more grid, less stacking)
   ========================================================================= */
@media (max-width: 991px) {
    /* small bento cards go 2-up instead of all full-width */
    .bento-card { grid-column: span 3; }
    .bento-card.span-3 { grid-column: span 6; }
}
@media (max-width: 767px) {
    /* keep stats in a grid — never a tall single column */
    .stat-band { grid-template-columns: repeat(2, 1fr); }
    .stat-band .stat-block:last-child { grid-column: 1 / -1; }
    .stat-block { padding: 1.5rem .8rem; }
    /* trim section rhythm so the page is not endless on phones */
    .section { padding: 3rem 0; }
    .section--tight { padding: 2.2rem 0; }
    .section-head { margin-bottom: 2rem; }
    .voice-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    .partner-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    .voice-card { padding: 1.3rem 1.2rem 1.1rem; }
    .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; }
}
@media (max-width: 575px) {
    /* 2-up hero stat chips — not a 4-tall stack */
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .bento-card, .bento-card.span-3 { grid-column: span 6; }
    .hero-chip { padding: .8rem .7rem; }
    .hero-chip .num { font-size: 1.4rem; }
}
@media (max-width: 420px) {
    .voice-grid, .partner-grid { grid-template-columns: 1fr; }
}

/* ---- about feature points + stat-band icons (welcome page) --------------- */
.about-point {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .9rem .95rem; height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.about-point:hover { border-color: var(--card-hover-border); transform: translateY(-3px); }
.about-point-ico {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: rgba(var(--brand-rgb), .1);
    color: var(--brand); font-size: 1.05rem;
}
.stat-block { position: relative; }
.stat-ico {
    width: 42px; height: 42px; margin: 0 auto .65rem;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: rgba(var(--brand-rgb), .1);
    color: var(--brand); font-size: 1.1rem;
}

/* ============================================================
   DCCPS FIX PACK — frontend responsive corrections
   ============================================================ */

/* Kill the ~12px mobile horizontal overflow caused by Bootstrap's
   gx-5 (3rem) gutters on narrow screens — shrink the gutter below lg. */
@media (max-width: 991.98px) {
    .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ===========================================================================
   ===== DCCPS ADMIN MOBILE-RESPONSIVE =====
   Off-canvas dashboard sidebar drawer + mobile polish for the admin /
   moderator dashboard. Mirrors the public navbar slide-in pattern
   (.nav-mobile / .nav-scrim / .nav-toggler). ALL rules here are mobile-only;
   the >=992px desktop layout is untouched.
   New ids/classes: #dashSidebar, #dashScrim, #dashNavToggle, #dashSidebarClose,
   .dash-topbar, .dash-topbar-label, .dash-nav-toggle, .dash-scrim,
   .dash-sidebar-close.
   ========================================================================= */

/* Mobile topbar + close button are hidden on desktop; the sidebar stays the
   normal static column. */
.dash-topbar { display: none; }
.dash-sidebar-close { display: none; }

@media (max-width: 991.98px) {

    /* --- Mobile topbar (hamburger + label) -------------------------------- */
    .dash-topbar {
        display: flex;
        align-items: center;
        gap: .7rem;
        margin-bottom: 1.1rem;
    }
    .dash-topbar-label {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1rem;
        color: var(--text);
    }
    .dash-nav-toggle {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        color: var(--text);
        cursor: pointer;
        transition: background var(--t-fast) var(--ease),
                    border-color var(--t-fast) var(--ease),
                    color var(--t-fast) var(--ease);
    }
    .dash-nav-toggle:hover { border-color: var(--brand); }
    .dash-nav-toggle .ham { position: relative; display: block; width: 21px; height: 15px; }
    .dash-nav-toggle .ham b {
        position: absolute; left: 0;
        display: block; width: 100%; height: 2px;
        background: currentColor; border-radius: 2px;
        transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
    }
    .dash-nav-toggle .ham b:nth-child(1) { top: 0; }
    .dash-nav-toggle .ham b:nth-child(2) { top: 6.4px; }
    .dash-nav-toggle .ham b:nth-child(3) { top: 12.8px; }
    .dash-nav-toggle.is-open { background: var(--brand); border-color: var(--brand); color: #fff; }
    [data-theme="hacker"] .dash-nav-toggle.is-open { color: #00140A; }
    .dash-nav-toggle.is-open .ham b:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
    .dash-nav-toggle.is-open .ham b:nth-child(2) { opacity: 0; transform: translateX(-10px); }
    .dash-nav-toggle.is-open .ham b:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }

    /* --- Off-canvas sidebar drawer ---------------------------------------- */
    .dash-sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100dvh;
        width: min(86vw, 320px);
        z-index: 1045;
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
        border-left: 0;
        padding-top: 3.2rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 26px 0 60px -34px rgba(0, 0, 0, .7);
        transform: translateX(-100%);
        transition: transform .32s var(--ease);
    }
    .dash-sidebar.open { transform: none; }

    /* close (x) button pinned inside the drawer */
    .dash-sidebar-close {
        display: grid;
        place-items: center;
        position: absolute;
        top: .65rem; right: .65rem;
        width: 36px; height: 36px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        color: var(--text);
        font-size: .95rem;
        cursor: pointer;
        transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    }
    .dash-sidebar-close:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
    [data-theme="hacker"] .dash-sidebar-close:hover { color: #00140A; }

    /* --- Scrim ------------------------------------------------------------ */
    .dash-scrim {
        position: fixed; inset: 0;
        z-index: 1044;
        background: rgba(6, 9, 18, .5);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        opacity: 0; visibility: hidden;
        transition: opacity .3s var(--ease), visibility .3s var(--ease);
    }
    .dash-scrim.show { opacity: 1; visibility: visible; }

    /* --- (2) Stat tiles: keep numbers from overflowing on small phones --- */
    /* (full small-phone rule lives in the 575.98px block below) */

    /* --- (3) Data tables: smooth horizontal scroll + scroll hint ---------- */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
}

/* --- (2) Stat tiles on small phones (~360px) ----------------------------- */
@media (max-width: 575.98px) {
    .stat-tile { padding: .95rem 1rem; }
    .stat-tile .v { font-size: 1.6rem; }
}

/* --- (3) Data tables below the md breakpoint ----------------------------- */
@media (max-width: 767.98px) {
    /* Inset fade hint on both edges so it reads as horizontally scrollable. */
    .table-responsive {
        position: relative;
        background:
            linear-gradient(to right, var(--surface) 30%, rgba(var(--brand-rgb), 0)),
            linear-gradient(to left,  var(--surface) 30%, rgba(var(--brand-rgb), 0)) 100% 0,
            radial-gradient(farthest-side at 0 50%,   rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 36px 100%, 36px 100%, 16px 100%, 16px 100%;
        background-attachment: local, local, scroll, scroll;
    }
    /* Tighter cells so more columns fit on screen. */
    .table-responsive .table > :not(caption) > * > * {
        padding-top: .5rem;
        padding-bottom: .5rem;
        padding-left: .5rem;
        padding-right: .5rem;
        font-size: .82rem;
    }
    /* Long-text cells that carry an inline max-width should wrap, not get
       clipped — keeps the horizontal scroll short and readable. */
    .table-responsive .table td[style*="max-width"],
    .table-responsive .table th[style*="max-width"] {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}
/* ===== /DCCPS ADMIN MOBILE-RESPONSIVE ===== */

/* ════════════════════════════════════════════════════════════════
   DCCPS — PREMIUM UI v2 · crafted icon tiles + denser mobile grids
   Depth recipe per tile: a bright top inner-edge highlight, a soft
   inner bottom shade, and a colour-matched outer cast shadow — the
   look of a real Apple / Fluent app icon, not a flat coloured square.
   ════════════════════════════════════════════════════════════════ */

/* ---- 1 · Premium icon tiles -------------------------------------------- */
.feature-ico,
.committee-panel-head .pb-ico,
.sem-num,
.road-badge {
    position: relative;
    isolation: isolate;
    border-radius: 16px;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .55),
        inset 0 -15px 22px -15px rgba(0, 0, 0, .55),
        0 10px 22px -10px var(--ico-glow, rgba(37, 99, 235, .55)),
        0 2px 5px -2px rgba(2, 6, 23, .26);
}
.feature-ico { width: 56px; height: 56px; }

/* glossy crown — soft light bloom from top-left, sits behind the glyph */
.feature-ico::after,
.committee-panel-head .pb-ico::after,
.sem-num::after,
.road-badge::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    background: radial-gradient(118% 82% at 26% 14%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

/* crisp glyph / numeral */
.feature-ico > i,
.committee-panel-head .pb-ico > i { filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .28)); }
.sem-num, .road-badge { text-shadow: 0 1.5px 2px rgba(0, 0, 0, .28); }

/* per-accent gradient + matching coloured glow */
.ico-blue   { background: linear-gradient(150deg, #63A4FF, #2563EB 78%); --ico-glow: rgba(37, 99, 235, .60); }
.ico-violet { background: linear-gradient(150deg, #A98BFF, #7C3AED 78%); --ico-glow: rgba(124, 58, 237, .60); }
.ico-green  { background: linear-gradient(150deg, #38D9A0, #059669 78%); --ico-glow: rgba(5, 150, 105, .55); }
.ico-amber  { background: linear-gradient(150deg, #FBBF24, #EA6A0C 82%); --ico-glow: rgba(234, 106, 12, .55); }
.ico-cyan   { background: linear-gradient(150deg, #2BD4EE, #0891B2 82%); --ico-glow: rgba(8, 145, 178, .55); }
.ico-pink   { background: linear-gradient(150deg, #FB7CC0, #DB2777 82%); --ico-glow: rgba(219, 39, 119, .55); }

.sem-num,
.road-badge { background: linear-gradient(150deg, #6AA6FF, #4338CA 86%); --ico-glow: rgba(67, 56, 202, .50); }
.committee-panel-head .pb-ico.exec    { background: linear-gradient(150deg, #8A92FF, #6D28D9 84%); --ico-glow: rgba(109, 40, 217, .50); }
.committee-panel-head .pb-ico.faculty { background: linear-gradient(150deg, #FBBF24, #DC2626 84%); --ico-glow: rgba(220, 38, 38, .48); }

/* card hover deepens the coloured glow (shadow only — never a transform,
   so it cannot fight the existing icon float animation) */
.pillar:hover .feature-ico,
.bento-card:hover .feature-ico {
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .62),
        inset 0 -15px 22px -15px rgba(0, 0, 0, .55),
        0 16px 32px -10px var(--ico-glow, rgba(37, 99, 235, .72)),
        0 3px 8px -2px rgba(2, 6, 23, .30);
    transition: box-shadow var(--t-mid) var(--ease);
}

/* small tinted chips (about-points + stat icons) — refined glass */
.about-point-ico,
.stat-ico {
    border-radius: 13px;
    background: linear-gradient(160deg, rgba(var(--brand-rgb), .20), rgba(var(--brand-rgb), .07));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .50),
        inset 0 0 0 1px rgba(var(--brand-rgb), .18);
}

/* hacker theme keeps a dark surface — tone the white bloom right down */
[data-theme="hacker"] .feature-ico::after,
[data-theme="hacker"] .committee-panel-head .pb-ico::after,
[data-theme="hacker"] .sem-num::after,
[data-theme="hacker"] .road-badge::after { opacity: .22; }

/* ---- 2 · Denser mobile grids — a shorter, tighter phone layout --------- */

/* Why-join "bento" — one clean, uniform 2-up grid on every screen */
.bento { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.bento-card,
.bento-card.span-3,
.bento-card.span-6 { grid-column: auto; }

@media (max-width: 575.98px) {
    /* About feature-points stack icon-above-text so they fit 2-up */
    .about-point { flex-direction: column; gap: .55rem; padding: .95rem .85rem; }

    .bento { gap: .7rem; }
    .bento-card { padding: 1.15rem 1rem; }

    /* Pillar cards — tighten so long titles never break mid-word */
    .pillar { padding: 1.35rem 1.1rem; }
    .feature-title { font-size: 1.04rem; line-height: 1.25; overflow-wrap: break-word; }
    .feature-desc { font-size: .88rem; }

    /* Learning roadmap — 2-up grid; steps stack vertically, an odd
       last step spans the full row */
    .roadmap { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
    .road-step { grid-template-columns: 1fr; gap: .5rem; padding: 1.1rem 1rem; }
    .road-step:hover { transform: none; }
    .road-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .road-badge { width: 46px; height: 46px; font-size: 1.05rem; }

    /* Committee panel header — icon stays beside the title, never alone */
    .committee-panel-head { gap: .7rem; padding: .85rem .95rem; }
    .committee-panel-head .pb-ico { width: 42px; height: 42px; font-size: 1.05rem; }
    .committee-panel-head .pb-title { font-size: .97rem; }
    .committee-panel-head .me-auto { min-width: 0; }
}

/* ---- 3 · Navbar — keep the desktop bar solid at every width ------------ */
@media (min-width: 992px) and (max-width: 1160px) {
    .dccps-nav .nav-links { gap: .03rem; }
    .nav-links .nav-link,
    .dccps-nav .dropdown-toggle { padding-left: .52rem; padding-right: .52rem; }
    .nav-search .nav-search-txt,
    .nav-search .nav-search-kbd { display: none; }
}

/* ======================================================================
 * COMMUNITY DIRECTORY  ( /community — public.community )
 * Appended block — styles the "All Users" page only. Does not modify or
 * override any rule above. All selectors are prefixed `comm-`.
 * ====================================================================== */

/* ---- Newest-members strip (Messenger-style horizontal avatar row) ----- */
.comm-new {
    margin-bottom: 2.25rem;
    padding: 1.15rem 1.25rem 1.05rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.comm-new-head {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .9rem;
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-dim, var(--text));
}
.comm-new-head i { color: var(--brand); font-size: .95rem; }

/* the scrollable rail — never wraps, never overlaps */
.comm-new-track {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    padding-bottom: .35rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.comm-new-track::-webkit-scrollbar { height: 6px; }
.comm-new-track::-webkit-scrollbar-thumb {
    background: var(--border-2, var(--border));
    border-radius: 999px;
}

.comm-new-item {
    flex: 0 0 auto;
    width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    color: var(--text);
    transition: transform .25s ease;
}
a.comm-new-item:hover { transform: translateY(-3px); color: var(--text); }

/* thin gradient ring around a 60px circular avatar */
.comm-new-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(from 180deg, var(--brand), var(--brand-2), var(--brand-3), var(--brand));
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45);
}
.comm-new-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 2.5px solid var(--surface);
    background: var(--surface-2, var(--surface));
    display: block;
}
.comm-new-name {
    max-width: 100%;
    font-size: .74rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Member cards grid ------------------------------------------------ */
.comm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 1.5rem 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    color: var(--text);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
                border-color .3s ease,
                box-shadow .3s ease;
}
a.comm-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--brand-rgb), .5);
    box-shadow: var(--shadow, 0 24px 50px -22px rgba(0, 0, 0, .55));
    color: var(--text);
}
.comm-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* top accent line drawn in on hover */
.comm-card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    transform: scaleX(0);
    transition: transform .3s ease;
}
a.comm-card:hover::before { transform: scaleX(1); }

.comm-card-glow {
    position: absolute;
    top: -45%; left: 50%;
    width: 160%; height: 160%;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(var(--brand-rgb), .2), transparent 72%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
a.comm-card:hover .comm-card-glow { opacity: 1; }

.comm-avatar {
    position: relative;
    width: 92px;
    height: 92px;
    margin-bottom: .85rem;
    flex: 0 0 auto;
}
.comm-avatar img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 3px solid var(--surface);
    background: var(--surface-2, var(--surface));
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
a.comm-card:hover .comm-avatar img { transform: scale(1.06); }
.comm-avatar-ring {
    position: absolute;
    inset: -5px;
    z-index: 1;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--brand), var(--brand-2), var(--brand-3), var(--brand));
    opacity: .26;
    transition: opacity .3s ease;
}
a.comm-card:hover .comm-avatar-ring { opacity: 1; }

.comm-name {
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0 0 .4rem;
    color: var(--text);
}
.comm-role {
    display: inline-block;
    padding: .2rem .62rem;
    font-family: var(--font-mono, monospace);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .055em;
    text-transform: uppercase;
    border-radius: 999px;
    background: rgba(var(--brand-rgb), .12);
    color: var(--brand);
}
.comm-meta {
    margin-top: .4rem;
    font-family: var(--font-mono, monospace);
    font-size: .68rem;
    color: var(--text-faint, var(--text-dim));
}

/* profile-visit count pill */
.comm-views {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    margin-top: .85rem;
    padding: .26rem .6rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-dim, var(--text));
    background: var(--bg-2, rgba(var(--brand-rgb), .06));
    border: 1px solid var(--border);
    border-radius: 999px;
}
.comm-views i { color: var(--brand); font-size: .82rem; }
.comm-views-label { color: var(--text-faint, var(--text-dim)); font-weight: 500; }

/* staff variant — amber accent for admins / moderators */
.comm-card.is-staff { border-color: rgba(245, 158, 11, .3); }
a.comm-card.is-staff:hover { border-color: rgba(245, 158, 11, .6); }
.comm-card.is-staff::before { background: linear-gradient(90deg, #F59E0B, #EF4444); }
.comm-card.is-staff .comm-card-glow {
    background: radial-gradient(closest-side, rgba(245, 158, 11, .22), transparent 72%);
}
.comm-card.is-staff .comm-avatar-ring {
    background: conic-gradient(from 0deg, #F59E0B, #FBBF24, #EF4444, #F59E0B);
}
.comm-card.is-staff .comm-role {
    background: rgba(245, 158, 11, .15);
    color: #E0930C;
}
.comm-card.is-staff .comm-views i { color: #E0930C; }

/* pagination — centred */
.comm-pagination { display: flex; justify-content: center; }

/* ---- Small-screen tightening (down to 360px — nothing crushed) -------- */
@media (max-width: 575.98px) {
    .comm-new { padding: 1rem .9rem .9rem; }
    .comm-new-item { width: 68px; }
    .comm-new-ring { width: 58px; height: 58px; }
    .comm-card { padding: 1.25rem .75rem 1.05rem; }
    .comm-avatar { width: 80px; height: 80px; }
    .comm-name { font-size: .92rem; }
    .comm-views-label { display: none; }
}

/* ======================================================================
 * ACADEMICS 2026 — full-curriculum page redesign (premium + responsive)
 * Appended layer: prefixed `acad-`; overrides the older .sem-block rules.
 * ====================================================================== */

/* extra chip tone used by elective courses */
.chip-violet {
    background: rgba(124, 58, 237, .14);
    border-color: rgba(124, 58, 237, .34);
    color: var(--brand-3, #7C3AED);
}

/* ---- hero stat strip ---- */
.acad-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.6rem;
}
.acad-hero-stat {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .85rem .6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.acad-hero-stat .v {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.acad-hero-stat .k {
    font-family: var(--font-mono);
    font-size: .66rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-faint);
}

/* ---- sticky semester jump bar ---- */
.acad-jump-wrap {
    position: sticky;
    top: var(--nav-h);
    z-index: 25;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid var(--border);
}
.acad-jump {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.acad-jump::-webkit-scrollbar { display: none; }
.acad-jump-label {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-mono);
    font-size: .68rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-faint);
    padding-right: .35rem;
}
.acad-jump-label i { color: var(--brand); }
.acad-jump-pill {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    padding: .42rem .8rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    font-family: var(--font-display);
    font-weight: 600; font-size: .82rem;
    transition: color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
}
.acad-jump-pill:hover { color: var(--text); border-color: var(--card-hover-border); }
.acad-jump-pill.current {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 4px 14px -4px rgba(var(--brand-rgb), .6);
}
[data-theme="hacker"] .acad-jump-pill.current { color: #00140A; }
.acad-jump-rom { display: none; }

/* ---- year divider ---- */
.acad-body { padding-top: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); }
.acad-year {
    display: flex; align-items: center; gap: 1rem;
    margin: 2.6rem 0 1.8rem;
}
.acad-year:first-child { margin-top: 0; }
.acad-year-line { flex: 1 1 auto; height: 1px; background: var(--border); }
.acad-year-tag {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem 1rem;
    border-radius: var(--r-pill);
    background: rgba(var(--brand-rgb), .1);
    border: 1px solid rgba(var(--brand-rgb), .24);
    color: var(--brand);
    font-family: var(--font-display);
    font-weight: 700; font-size: .82rem;
    letter-spacing: .02em;
}

/* ---- semester block ---- */
.acad-sem {
    margin-bottom: 2.6rem;
    scroll-margin-top: calc(var(--nav-h) + 74px);
}
.acad-sem-head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 1.2rem;
    background:
        radial-gradient(520px 130px at 0% 0%, rgba(var(--brand-rgb), .12), transparent 70%),
        var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-lg);
}
.acad-sem-num {
    flex: 0 0 auto;
    width: 62px; height: 62px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--grad);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.7rem;
    box-shadow: 0 10px 24px -10px rgba(var(--brand-rgb), .7);
}
[data-theme="hacker"] .acad-sem-num { color: #00140A; }
.acad-sem-headmain { flex: 1 1 auto; min-width: 0; }
.acad-sem-eyebrow {
    font-family: var(--font-mono);
    font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-faint);
}
.acad-sem-name {
    margin: .12rem 0 .12rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.35rem, 1.1rem + 1.6vw, 1.9rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--text);
}
.acad-sem-name span {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.acad-sem-focus {
    font-size: .9rem;
    color: var(--text-dim);
    font-weight: 500;
}
.acad-sem-stats {
    flex: 0 0 auto;
    display: flex; flex-direction: column; gap: .4rem;
}
.acad-sem-stat {
    display: flex; align-items: baseline; gap: .3rem;
    padding: .3rem .7rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-faint);
    white-space: nowrap;
}
.acad-sem-stat b { font-size: .92rem; color: var(--brand); font-family: var(--font-display); }
.acad-sem-summary {
    margin: 1rem .2rem 1.2rem;
    color: var(--text-dim);
    font-size: .95rem;
    line-height: 1.6;
}

/* ---- course cards grid ---- */
.acad-courses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: .85rem;
}
.acad-course {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.1rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    text-decoration: none;
    transition: transform var(--t-mid) var(--ease),
                border-color var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease);
}
.acad-course:hover {
    transform: translateY(-5px);
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow);
    color: var(--text);
}
.acad-course-top {
    display: flex; align-items: center;
    justify-content: space-between; gap: .5rem;
}
.acad-course-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.32;
    margin: 0;
}
.acad-course-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .35rem .8rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-faint);
}
.acad-course-meta i { color: var(--brand); margin-right: .15rem; }
.acad-course-tag {
    margin-left: auto;
    padding: .12rem .5rem;
    border-radius: var(--r-xs);
    background: rgba(var(--brand-rgb), .1);
    color: var(--brand);
    font-weight: 600;
}
.acad-course-go {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-display);
    font-weight: 600; font-size: .82rem;
    color: var(--brand);
}
.acad-course-go i { transition: transform var(--t-fast) var(--ease); }
.acad-course:hover .acad-course-go i { transform: translateX(4px); }

/* ---- optional / elective bank ---- */
.acad-opt {
    margin-top: 1.4rem;
    padding: 1.25rem;
    border: 1px dashed var(--border-2, var(--border));
    border-radius: var(--r-lg);
    background: var(--bg-2);
}
.acad-opt-head {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .6rem .9rem;
    margin-bottom: 1rem;
}
.acad-opt-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .85rem;
    border-radius: var(--r-pill);
    background: rgba(124, 58, 237, .12);
    border: 1px solid rgba(124, 58, 237, .28);
    color: var(--brand-3, #7C3AED);
    font-family: var(--font-display);
    font-weight: 700; font-size: .8rem;
}
.acad-opt-note { font-size: .85rem; color: var(--text-dim); flex: 1 1 240px; }
.acad-opt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
    gap: .6rem;
}
.acad-opt-card {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .8rem .9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    text-decoration: none;
    transition: transform var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}
.acad-opt-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    color: var(--text);
}
.acad-opt-card .course-code { align-self: flex-start; }
.acad-opt-title {
    font-family: var(--font-display);
    font-weight: 600; font-size: .9rem;
    line-height: 1.3;
}
.acad-opt-meta {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--text-faint);
}

/* ---- academics responsive ---- */
@media (min-width: 992px) {
    .acad-jump-rom { display: none; }
    .acad-jump-txt { display: inline; }
}
@media (max-width: 720px) {
    .acad-jump-txt { display: none; }
    .acad-jump-rom {
        display: inline-grid; place-items: center;
        min-width: 1.4rem;
    }
    .acad-jump-pill { padding: .42rem .7rem; }
    .acad-sem-head {
        flex-wrap: wrap;
        gap: .7rem .9rem;
        padding: 1rem;
    }
    .acad-sem-num { width: 52px; height: 52px; font-size: 1.4rem; }
    .acad-sem-headmain { flex: 1 1 60%; }
    .acad-sem-stats {
        flex-direction: row;
        flex: 1 1 100%;
        gap: .45rem;
    }
    .acad-sem-stat { flex: 1 1 0; justify-content: center; }
    .acad-courses { grid-template-columns: 1fr; }
    .acad-opt-grid { grid-template-columns: repeat(2, 1fr); }
    .acad-opt { padding: 1rem; }
}
@media (max-width: 359px) {
    .acad-opt-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
 * NAVBAR 2026 — desktop layout fixes + full-screen mobile menu
 * Appended layer: wins over earlier .nav-* rules by source order.
 * ====================================================================== */

/* ---- desktop: a bar that genuinely fits — brand / links / right cluster
   each take their natural width and never crush or overlap one another. -- */
.dccps-nav .nav-inner { gap: clamp(.5rem, 1vw, 1rem); flex-wrap: nowrap; }
.nav-brand { flex: 0 0 auto; }
.nav-right { flex: 0 0 auto; gap: .4rem; }
.nav-links {
    flex: 0 1 auto;
    min-width: 0;
    margin-inline: auto;
    gap: .1rem;
}
.nav-links .nav-link,
.dccps-nav .dropdown-toggle {
    padding-left: .58rem;
    padding-right: .58rem;
    font-size: .9rem;
}
/* desktop search: a compact icon button — a consistent, space-efficient
   control that keeps the 7 nav links uncrowded. The ⌘K shortcut and hover
   tooltip still convey the keyboard hint. */
@media (min-width: 1280px) {
    .nav-search { width: 42px; padding: 0; justify-content: center; }
    .nav-search .nav-search-txt,
    .nav-search .nav-search-kbd { display: none; }
}

/* account button — avatar + name pill, name capped so it never overflows */
.nav-user-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 13.5rem;
    padding: .28rem .6rem .28rem .32rem;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .86rem;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-user-btn:hover { color: var(--text); border-color: var(--card-hover-border); background: rgba(var(--brand-rgb), .08); }
.nav-user-btn .nav-avatar { width: 28px; height: 28px; }
.nav-user-btn.dropdown-toggle::after { margin-left: .1rem; color: var(--text-faint); }
.nav-username {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-join-btn { align-items: center; gap: .4rem; white-space: nowrap; }

/* desktop-only display for the join button — never override the
   `.nav-desktop-only` mobile hide (≤ 991px keeps it display:none). */
@media (min-width: 992px) {
    .nav-join-btn { display: inline-flex; }
}

/* ---- desktop bar only when the 7 links genuinely fit (≥ 1280px) ------
   Below that the hamburger + full-screen menu take over, so the links can
   never overflow or climb onto the logo on a narrow laptop / tablet. */
@media (max-width: 1279.98px) {
    .dccps-nav .nav-links,
    .dccps-nav .nav-desktop-only { display: none !important; }
    .dccps-nav .nav-toggler { display: grid !important; }
    .dccps-nav .nav-right .theme-switch { display: none !important; }
    .nav-search { width: 42px; padding: 0; justify-content: center; }
    .nav-search .nav-search-txt,
    .nav-search .nav-search-kbd { display: none; }
}

/* ---- full-screen mobile menu (≤ 1279px) ------------------------------ */
@media (max-width: 1279.98px) {
    /* the panel covers the WHOLE viewport — no dependence on the sticky
       bar, so scrolling the page first can never leave an empty strip. */
    .nav-mobile {
        position: fixed;
        inset: 0;
        top: 0; right: 0; bottom: 0; left: 0;
        width: 100%;
        max-width: 100%;
        max-height: none;
        z-index: 3000;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        background: var(--bg);
        border: 0;
        box-shadow: none;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .34s var(--ease), visibility .34s var(--ease);
    }
    .nav-mobile.open { transform: none; visibility: visible; }
}
@media (min-width: 1280px) {
    .nav-mobile { display: none !important; }
}

/* panel header */
.nm-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--nav-h);
    padding: 0 1rem 0 1.1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.nm-brand {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.1rem;
    color: var(--text);
    min-width: 0;
}
.nm-brand img { width: 34px; height: 34px; flex: 0 0 auto; }
.nm-brand span { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.nm-brand small {
    font-family: var(--font-mono);
    font-size: .54rem; font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--brand);
}
.nm-close {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    color: var(--text);
    border-radius: var(--r-sm);
    font-size: 1.2rem;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nm-close:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
[data-theme="hacker"] .nm-close:hover { color: #00140A; }

/* scrollable body — owns its own scroll, contained */
.nm-scroll {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 1.05rem 1.4rem;
}

/* collapsible dropdown group (accordion) */
.nm-acc { display: flex; flex-direction: column; }
.nm-acc-btn {
    display: flex; align-items: center; gap: .75rem;
    width: 100%;
    padding: .72rem .7rem;
    border: 0; background: transparent;
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-family: var(--font-display);
    font-weight: 600; font-size: .92rem;
    cursor: pointer;
    text-align: left;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nm-acc-btn > i:first-child {
    width: 20px; text-align: center; font-size: 1.05rem;
    color: var(--text-faint);
    transition: color var(--t-fast) var(--ease);
}
.nm-acc-btn > span { flex: 1 1 auto; }
.nm-acc-caret {
    font-size: .85rem; color: var(--text-faint);
    transition: transform .3s var(--ease);
}
.nm-acc-btn:hover { background: rgba(var(--brand-rgb), .09); color: var(--text); }
.nm-acc-btn:hover > i:first-child { color: var(--brand); }
.nm-acc.open > .nm-acc-btn { color: var(--text); background: rgba(var(--brand-rgb), .07); }
.nm-acc.open > .nm-acc-btn > i:first-child { color: var(--brand); }
.nm-acc.open .nm-acc-caret { transform: rotate(180deg); }

/* auto-height accordion panel (grid-rows 0fr → 1fr) */
.nm-acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--ease);
}
.nm-acc.open .nm-acc-panel { grid-template-rows: 1fr; }
.nm-acc-inner { overflow: hidden; min-height: 0; }
.nm-acc-inner { padding-left: .35rem; }
.nm-sublink { font-size: .88rem; }
.nm-sublink > i:first-child { font-size: .92rem; }

/* footer pinned below the menu content */
.nm-foot { margin-top: auto; }

/* the old side-panel chrome no longer exists */
.nav-scrim { display: none !important; }

/* keep decorative fixed widgets from poking through the full-screen menu */
html.nav-lock .back-to-top,
html.nav-lock .scroll-progress,
html.nav-lock .hacker-hud {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ======================================================================
 * PARTNERS + COMMUNITY — mobile grid polish (appended layer)
 * ====================================================================== */

/* Partners: a real grid at every width — compact on phones, never a tall
   single column, and the logo / text never shrink to an unreadable size. */
@media (max-width: 991px) {
    .partner-grid { grid-template-columns: repeat(3, 1fr); gap: .8rem; }
}
@media (max-width: 575px) {
    .partner-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
    .partner-card { padding: 1.2rem .75rem 1rem; gap: .6rem; }
    .partner-badge { width: 56px; height: 56px; }
    .partner-name { font-size: .86rem; }
    .partner-tier { font-size: .58rem; padding: .18rem .5rem; }
}

/* Newest-members strip → clean responsive grid, no horizontal scrollbar */
.comm-new-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.1rem .5rem;
    overflow: visible;
    padding-bottom: 0;
}
.comm-new-item { width: auto; }
/* fix: the ring was display:grid, which made `height:100%` resolve against an
   auto-sized track — portrait avatars then overflowed. A block box with an
   explicit size keeps every avatar a perfect, cropped circle. */
.comm-new-ring {
    display: block;
    flex: 0 0 auto;
    aspect-ratio: 1;
    overflow: hidden;
}
.comm-new-ring img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
@media (max-width: 767px) {
    .comm-new-track { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 360px) {
    .comm-new-track { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════ FOUNDING COMMITTEE — compact strip (Alumni page) ═══════════════ */
.founders-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem;
    padding: .95rem 1.2rem; margin-bottom: 1.5rem;
    border-radius: var(--r-lg);
    background: linear-gradient(100deg, rgba(0,102,255,.07), rgba(123,47,255,.06));
    border: 1px solid var(--border);
}
.fst-head { display: flex; align-items: center; gap: .65rem; }
.fst-badge {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center;
    border-radius: 50%; font-size: 1.05rem; color: #3a2a00;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    box-shadow: 0 4px 12px -4px rgba(255,215,0,.6);
}
.fst-title { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1.15; }
.fst-sub { display: block; font-size: .74rem; color: var(--text-faint); }
.fst-people { display: flex; flex-wrap: wrap; gap: .6rem; margin-left: auto; }
.fst-person {
    display: flex; align-items: center; gap: .55rem;
    padding: .38rem .85rem .38rem .4rem; border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--border);
    text-decoration: none; color: inherit;
    transition: border-color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}
.fst-person:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0,102,255,.5); }
.fst-person img { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.fst-info { display: flex; flex-direction: column; min-width: 0; }
.fst-name { font-family: var(--font-display); font-weight: 700; font-size: .86rem; line-height: 1.2; }
.fst-role {
    font-family: var(--font-mono); font-size: .67rem; font-weight: 600;
    letter-spacing: .03em; text-transform: uppercase;
    background: linear-gradient(100deg, #0066FF, #7B2FFF);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fst-go { margin-left: .1rem; font-size: .8rem; color: var(--text-faint); transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.fst-person:hover .fst-go { color: var(--brand); transform: translateX(3px); }
@media (max-width: 560px) {
    .founders-strip { flex-direction: column; align-items: stretch; }
    .fst-people { margin-left: 0; }
    .fst-person { flex: 1 1 auto; }
}

/* Alumni grid header / divider */
.alumni-gridhead { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.3rem; }
.alumni-gridhead .ag-line { flex: 1; height: 1px; background: var(--border); }
.alumni-gridhead .ag-label {
    font-family: var(--font-mono); font-size: .75rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
    display: inline-flex; align-items: center; gap: .4rem;
}
.alumni-gridhead .ag-label i { color: var(--brand); }

/* ── Mobile menu: let the MATRIX RAIN glow through in HACKER theme ──────────
   The drawer is z-index:1026, above the z-index:0 .fx-layer, so its opaque
   background hid the rain while the menu was open (it only reappeared after
   closing). In hacker theme make the drawer glassy so the signature effect
   shows the instant it's selected; menu items keep their own solid bg, so
   the text stays fully readable. */
/* ════════════ NAVBAR LAYOUT POLISH (2026-fix) ════════════ */
/* Mobile / tablet (<1280): nav-links are hidden, so push the search+hamburger
   cluster to the RIGHT edge (it used to sit beside the brand, leaving a big
   empty gap on the right). */
.dccps-nav .nav-right { margin-inline-start: auto; }
/* Desktop (≥1280): a BALANCED bar — brand at the left edge, the links centered
   between brand and the right cluster (equal gaps on both sides), and the right
   cluster at the right edge. flex:0 0 auto keeps the links at natural width so
   the last one (Tutorials) never overlaps the Playground icon; the wider 1320px
   container gives them room. */
@media (min-width: 1280px) {
    .dccps-nav .nav-links { flex: 0 0 auto; margin-inline: auto; }
    .dccps-nav .nav-right { margin-inline-start: 0; }
}

/* ════════════ HACKER-THEME MOBILE MENU — matrix rain + readable text ════════════
   The full-screen menu hid the hacker rain (opaque bg); the earlier translucent
   attempt made text unreadable. Real fix: a dedicated matrix canvas INSIDE the
   menu, behind a solid-dark base + a light scrim, so the rain is clearly
   visible in the background while every menu item stays fully readable.
   The canvas renders only in hacker theme (see site.js navMenuMatrix). */
.nm-matrix { display: none; }
[data-theme="hacker"] .nm-matrix {
    display: block;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
    opacity: .9;
}
[data-theme="hacker"] .nav-mobile { background: #00060a; }
/* lift the real content above the rain canvas */
.nav-mobile > .nm-head,
.nav-mobile > .nm-scroll { position: relative; z-index: 1; }
[data-theme="hacker"] .nav-mobile > .nm-head  { background: #00120b; }
/* a translucent scrim over the body: rain stays visible in the gaps, while
   the darkening keeps link/labels readable. */
[data-theme="hacker"] .nav-mobile > .nm-scroll { background: rgba(0, 8, 4, .46); }
/* EVERY menu item gets a readable dark-green surface so its text never sits
   directly on the moving rain (fixes "some text is invisible"). */
[data-theme="hacker"] .nm-link,
[data-theme="hacker"] .nm-user,
[data-theme="hacker"] .nm-search,
[data-theme="hacker"] .nm-quick > a,
[data-theme="hacker"] .nm-acc-btn,
[data-theme="hacker"] .nm-theme-opt { background: rgba(0, 18, 9, .85); }
[data-theme="hacker"] .nm-sublink { background: rgba(0, 26, 13, .92); }
/* bright, readable green text on every label/link/button in the menu */
[data-theme="hacker"] .nm-link,
[data-theme="hacker"] .nm-link span,
[data-theme="hacker"] .nm-acc-btn,
[data-theme="hacker"] .nm-acc-btn span,
[data-theme="hacker"] .nm-theme-opt,
[data-theme="hacker"] .nm-theme-opt span,
[data-theme="hacker"] .nm-search,
[data-theme="hacker"] .nm-search span,
[data-theme="hacker"] .nm-quick > a,
[data-theme="hacker"] .nm-quick > a span,
[data-theme="hacker"] .nm-user strong,
[data-theme="hacker"] .nm-user small { color: #aaffc6 !important; }
[data-theme="hacker"] .nm-label,
[data-theme="hacker"] .nm-foot { color: #6dffa1 !important; text-shadow: 0 1px 4px #000; }
[data-theme="hacker"] .nm-link > i,
[data-theme="hacker"] .nm-acc-btn > i,
[data-theme="hacker"] .nm-theme-opt > i,
[data-theme="hacker"] .nm-quick > a > i { color: #4fe88a !important; }
/* Join button used to be dark-on-dark (black). Make it a bright green button
   with dark text; Member-login becomes a green-outlined ghost. */
[data-theme="hacker"] .nm-auth > .btn-primary {
    background: linear-gradient(180deg, #00d869, #00a24f) !important;
    color: #00140a !important; border: 0 !important;
}
[data-theme="hacker"] .nm-auth > .btn-ghost {
    background: rgba(0, 18, 9, .85) !important;
    color: #aaffc6 !important; border: 1px solid rgba(0, 255, 127, .35) !important;
}

/* ===== Alumni v2 ===== */
/* Grouped batch/session cohorts on /alumni — teal accent family
   (#0891b2 / #22d3ee / #10b981), compact clamp() rhythm, soft shadows.
   All classes are al2-prefixed; legacy .fst-* / .alumni-gridhead stay
   untouched (members.blade still uses them). */

/* tab counter pill inside the three branch buttons */
.list-tabs .al2-tabn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.6em; padding: .08em .5em; margin-left: .15rem;
    border-radius: 999px; font-size: .74em; font-weight: 700; line-height: 1.5;
    background: rgba(8, 145, 178, .14); color: #0891b2;
}
.list-tabs .btn-primary .al2-tabn { background: rgba(255, 255, 255, .22); color: #fff; }

/* jump chips — one per cohort, anchor-scrolls to its divider */
.al2-chips {
    display: flex; flex-wrap: wrap; gap: .45rem;
    margin-top: clamp(.7rem, 1.6vw, 1rem);
}
.al2-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .8rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600; line-height: 1.4;
    color: inherit; text-decoration: none;
    background: rgba(8, 145, 178, .08);
    border: 1px solid rgba(8, 145, 178, .32);
    transition: border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}
.al2-chip:hover {
    color: inherit; border-color: #22d3ee;
    background: rgba(34, 211, 238, .14);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -12px rgba(8, 145, 178, .65);
}
.al2-chipn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.5em; padding: .04em .42em;
    border-radius: 999px; font-size: .72em; font-weight: 700;
    background: linear-gradient(120deg, #0891b2, #10b981); color: #fff;
}

/* section rhythm — compact, no dead air between hero and the first cohort */
.al2-section { padding-block: clamp(1.6rem, 3.5vw, 2.6rem); }
.al2-lead { font-size: .92rem; margin: 0 0 clamp(.6rem, 1.4vw, .95rem); }

/* cohort divider — the premium group header */
.al2-cohort {
    margin-bottom: clamp(1.7rem, 4vw, 2.8rem);
    scroll-margin-top: 92px; /* anchor jumps land clear of the fixed navbar */
}
.al2-cohort:last-child { margin-bottom: 0; }
.al2-cohead {
    display: flex; align-items: center; gap: .7rem;
    margin: 0 0 clamp(.7rem, 1.5vw, 1rem);
}
.al2-coicon {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 12px; font-size: 1.05rem; color: #fff;
    background: linear-gradient(135deg, #0891b2, #22d3ee);
    box-shadow: 0 8px 18px -10px rgba(8, 145, 178, .7);
}
.al2-cotitle {
    margin: 0; font-family: var(--font-display);
    font-weight: 800; line-height: 1.15;
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
}
.al2-cocount {
    flex: 0 0 auto; white-space: nowrap;
    padding: .22em .8em; border-radius: 999px;
    font-size: .76rem; font-weight: 700; letter-spacing: .02em;
    color: #fff; background: linear-gradient(120deg, #0891b2, #10b981);
    box-shadow: 0 6px 14px -8px rgba(16, 185, 129, .7);
}
.al2-coline {
    flex: 1 1 auto; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(8, 145, 178, .55), rgba(34, 211, 238, .28), transparent);
}

/* phones — same structure, tighter */
@media (max-width: 575px) {
    .al2-chip { font-size: .74rem; padding: .26rem .65rem; }
    .al2-cohead { gap: .55rem; }
    .al2-coicon { width: 33px; height: 33px; border-radius: 10px; font-size: .9rem; }
    .al2-cocount { font-size: .68rem; padding: .2em .65em; }
}

/* ============================================================
   Profile · Coding-journey badges with pro hover popover
   ============================================================ */
.pf-badges-hint{font-size:11.5px;font-weight:500;color:var(--text-faint);margin-left:8px;display:inline-flex;align-items:center;gap:4px;}
.pf-badges-hint i{font-size:12px;}
.pf-badges{display:flex;flex-wrap:wrap;gap:9px;}
.pf-badge{position:relative;outline:none;}
.pf-badge .pfb-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  font-size:12.5px;font-weight:600;cursor:default;border:1px solid var(--surface-3);
  background:var(--surface-2);color:var(--text-dim);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.pf-badge .pfb-chip i{font-size:13px;}
.pf-badge.is-earned .pfb-chip{color:#04121a;border-color:transparent;
  background:linear-gradient(135deg,var(--brand-2),var(--accent));box-shadow:0 4px 14px -4px rgba(34,211,238,.5);}
.pf-badge.is-locked .pfb-chip{opacity:.62;filter:grayscale(.35);}
.pf-badge:hover .pfb-chip,.pf-badge:focus-visible .pfb-chip{transform:translateY(-2px);border-color:var(--brand-2);}
.pf-badge.is-earned:hover .pfb-chip{box-shadow:0 7px 20px -5px rgba(34,211,238,.65);}

/* popover */
.pf-badge .pfb-pop{position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%) translateY(6px) scale(.97);
  width:248px;max-width:78vw;background:var(--surface);border:1px solid var(--surface-3);border-radius:14px;
  padding:13px 14px;box-shadow:0 18px 44px -12px rgba(0,0,0,.7),0 0 0 1px rgba(34,211,238,.07);
  opacity:0;visibility:hidden;pointer-events:none;z-index:60;transition:opacity .18s ease,transform .18s ease,visibility .18s;
  display:flex;flex-direction:column;gap:8px;text-align:left;}
.pf-badge .pfb-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--surface);}
.pf-badge:hover .pfb-pop,.pf-badge:focus-visible .pfb-pop,.pf-badge:focus-within .pfb-pop{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);}
.pfb-pop-head{display:flex;align-items:center;gap:10px;}
.pfb-pop-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;
  color:#04121a;background:linear-gradient(135deg,var(--brand-2),var(--accent));}
.pf-badge.is-locked .pfb-pop-ic{color:var(--text-dim);background:var(--surface-2);border:1px solid var(--surface-3);}
.pfb-pop-tt{display:flex;flex-direction:column;gap:1px;min-width:0;}
.pfb-pop-tt b{font-size:13.5px;color:var(--text);line-height:1.2;}
.pfb-pop-status{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--text-faint);}
.pfb-pop-status.ok{color:var(--accent);}
.pfb-pop-status i{font-size:11px;}
.pfb-pop-how{font-size:12px;line-height:1.5;color:var(--text-dim);margin:0;}
.pfb-pop-bar{display:block;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
.pfb-pop-bar > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .4s ease;}
.pfb-pop-prog{font-size:11px;font-weight:600;color:var(--text-faint);align-self:flex-end;}