/* =====================================================================
   OpenMM-Arena — Premium Academic Design System v4
   Enhanced Gradients · Refined Micro-Interactions · Glass Morphism
   ===================================================================== */

/* ── Design Tokens ── */
:root {
    /* Primary blues – richer, deeper */
    --blue-50:  #eef4ff; --blue-100: #d9e6ff; --blue-200: #bcd3ff;
    --blue-300: #8ab4ff; --blue-400: #5a93ff; --blue-500: #3574f0;
    --blue-600: #1d5ede; --blue-700: #154cb8; --blue-800: #123d96;
    --blue-900: #0f3078; --blue-950: #091e52;

    --white: #ffffff;

    /* Grays – blue-tinted for sophistication */
    --gray-50:  #f8f9fc; --gray-100: #f0f2f7; --gray-200: #e1e5ee;
    --gray-300: #c9cfdc; --gray-400: #8d95a8; --gray-500: #636b7f;
    --gray-600: #4a5167; --gray-700: #363c50; --gray-800: #232838;
    --gray-900: #131621;

    /* Accent spectrum */
    --emerald-50: #ecfdf5; --emerald-500: #10b981; --emerald-600: #059669;
    --violet-50: #f3f0ff; --violet-500: #8b5cf6; --violet-600: #7c3aed;
    --amber-50: #fefce8; --amber-500: #f59e0b; --amber-600: #d97706;
    --rose-50: #fff1f2; --rose-500: #f43f5e; --rose-600: #e11d48;
    --cyan-50: #ecfeff; --cyan-500: #06b6d4; --cyan-600: #0891b2;
    --indigo-50: #eef2ff; --indigo-500: #6366f1; --indigo-600: #4f46e5;

    /* Typography — refined scale */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-serif: 'Georgia', 'Times New Roman', serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Shadows — layered for hyper-realism (Linear/Vercel inspired) */
    --shadow-xs:  0 1px 2px rgba(15,23,42,.04);
    --shadow-sm:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md:  0 4px 8px -2px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
    --shadow-lg:  0 12px 28px -6px rgba(15,23,42,.1), 0 4px 10px -4px rgba(15,23,42,.05);
    --shadow-xl:  0 24px 50px -12px rgba(15,23,42,.12), 0 8px 18px -8px rgba(15,23,42,.05);
    --shadow-2xl: 0 32px 64px -16px rgba(15,23,42,.14), 0 12px 28px -8px rgba(15,23,42,.07);
    --shadow-glow: 0 0 60px -12px rgba(29,94,222,.22);
    --shadow-blue: 0 4px 16px -3px rgba(29,94,222,.25);
    --shadow-card-hover: 0 24px 48px -12px rgba(15,23,42,.12), 0 8px 20px -6px rgba(29,94,222,.1);
    --shadow-card-glow: 0 0 0 1px rgba(29,94,222,.1), 0 20px 40px -8px rgba(29,94,222,.12), 0 0 80px -20px rgba(29,94,222,.15);

    /* Radii — more generous, modern feel */
    --r-xs: 6px; --r-sm: 8px; --r-md: 14px; --r-lg: 18px;
    --r-xl: 24px; --r-2xl: 32px; --r-full: 9999px;

    /* Transitions — refined easing */
    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --ease-smooth: cubic-bezier(.4,0,.2,1);
    --ease-expo: cubic-bezier(.19,1,.22,1);
    --ease-back: cubic-bezier(.175,.885,.32,1.275);

    /* Spacing */
    --nav-height: 64px;
    --sidebar-width: 272px;
    --sidebar-collapsed-width: 56px;

    /* Glow colors */
    --glow-blue: rgba(29,94,222,.15);
    --glow-violet: rgba(139,92,246,.12);
    --glow-cyan: rgba(6,182,212,.1);
}

/* ── SVG Icon System ── */
.icon-svg, .link-icon svg, .domain-card-icon svg, .logo-icon svg {
    flex-shrink: 0; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    font-optical-sizing: auto;
}
body {
    font-family: var(--font-sans); color: var(--gray-800);
    background: linear-gradient(180deg, #f6f9ff 0%, var(--white) 200px);
    line-height: 1.72; overflow-x: hidden;
    position: relative;
}
/* Subtle grain/noise texture overlay — Linear inspired */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: .018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
    mix-blend-mode: overlay;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-600); text-decoration: none; transition: color .2s var(--ease-out); }
a:hover { color: var(--blue-800); }
strong { font-weight: 650; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Smooth page entrance animation */
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.page-main { animation: pageEnter .6s var(--ease-expo) both; }

/* ================================================================
   NAVIGATION — Premium glass navbar
   ================================================================ */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(248,250,255,.55);
    backdrop-filter: blur(32px) saturate(2);
    -webkit-backdrop-filter: blur(32px) saturate(2);
    border-bottom: 1px solid transparent;
    transition: all .5s var(--ease-expo);
}
.navbar.scrolled {
    background: rgba(248,250,255,.92);
    border-bottom-color: rgba(29,94,222,.06);
    box-shadow: 0 1px 2px rgba(29,94,222,.03), 0 4px 24px rgba(29,94,222,.05), 0 0 0 1px rgba(29,94,222,.02);
}
.nav-container {
    max-width: 1240px; margin: 0 auto; padding: 0 28px;
    display: flex; align-items: center; justify-content: space-between; height: var(--nav-height);
}
.nav-logo {
    display: flex; align-items: center; gap: 8px;
    font-weight: 800; font-size: 1.02rem; color: var(--blue-900);
    text-decoration: none; letter-spacing: -.02em;
    transition: transform .2s var(--ease-out);
    flex-shrink: 0;
}
.nav-logo:hover { transform: scale(1.02); color: var(--blue-900); filter: drop-shadow(0 0 8px rgba(29,94,222,.15)); }
.logo-icon { display: flex; align-items: center; color: var(--blue-600); }
.logo-icon svg { width: 22px; height: 22px; }
.logo-icon img { width: 32px; height: 32px; object-fit: contain; }
.nav-links { display: flex; list-style: none; gap: 1px; align-items: center; flex-wrap: nowrap; }
.nav-links a {
    display: block; padding: 6px 11px; font-size: .82rem; font-weight: 520;
    color: var(--gray-500); border-radius: var(--r-sm);
    transition: all .25s var(--ease-out); text-decoration: none; letter-spacing: .005em;
    position: relative; white-space: nowrap;
}
.nav-links a:hover { color: var(--blue-700); background: rgba(29,94,222,.05); }
.nav-links a.nav-active {
    color: var(--blue-700); background: rgba(29,94,222,.06); font-weight: 620;
}
.nav-links a.nav-active::after {
    content: ''; position: absolute; bottom: -1px; left: 20%; right: 20%;
    height: 2px; background: linear-gradient(90deg, var(--blue-400), var(--blue-600)); border-radius: 2px;
    box-shadow: 0 2px 8px rgba(29,94,222,.3);
}
.nav-github {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700)) !important;
    color: var(--white) !important; font-weight: 620 !important;
    border-radius: var(--r-sm) !important;
    box-shadow: var(--shadow-blue);
    transition: all .25s var(--ease-out) !important;
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
}
.nav-github svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.nav-github:hover { filter: brightness(1.1); color: var(--white) !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(29,94,222,.3) !important; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--gray-700); border-radius: 2px; transition: all .3s; }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ================================================================
   HERO — Landing page with enhanced gradient mesh
   ================================================================ */
.hero {
    position: relative; min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding: 110px 32px 70px;
    background: linear-gradient(172deg, #edf3ff 0%, #f4f8ff 20%, var(--white) 50%, var(--gray-50) 80%, #f0f5ff 100%);
    overflow: hidden;
}
/* Refined grid pattern — more subtle, larger grid */
.hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(29,94,222,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,94,222,.03) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, black 10%, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, black 10%, transparent 65%);
}
/* Animated gradient mesh overlay — richer, more depth */
.hero::after {
    content: ''; position: absolute; inset: -10%; pointer-events: none; opacity: .15;
    background:
        radial-gradient(ellipse 55% 45% at 15% 25%, var(--blue-300), transparent 70%),
        radial-gradient(ellipse 40% 55% at 85% 55%, var(--violet-500), transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 85%, var(--cyan-500), transparent 70%),
        radial-gradient(ellipse 30% 30% at 70% 20%, var(--indigo-500), transparent 70%);
    animation: meshShift 25s ease-in-out infinite alternate;
}
@keyframes meshShift {
    0% { transform: scale(1) translate(0,0) rotate(0deg); }
    33% { transform: scale(1.06) translate(-3%, 2%) rotate(.5deg); }
    66% { transform: scale(.98) translate(2%, -3%) rotate(-.3deg); }
    100% { transform: scale(1.03) translate(1%, 1%) rotate(.2deg); }
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .22; will-change: transform; }
.hero-orb-1 { width: 800px; height: 800px; background: radial-gradient(circle, rgba(90,147,255,.4), transparent 65%); top: -300px; right: -200px; animation: drift 28s infinite ease-in-out; }
.hero-orb-2 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(139,92,246,.25), transparent 65%); bottom: -200px; left: -160px; animation: drift 35s infinite ease-in-out reverse; }
.hero-orb-3 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(6,182,212,.2), transparent 65%); top: 35%; left: 55%; animation: drift 22s infinite ease-in-out; }
@keyframes drift {
    0%,100% { transform: translate(0,0) scale(1); }
    25% { transform: translate(50px,-35px) scale(1.08); }
    50% { transform: translate(-20px,45px) scale(.94); }
    75% { transform: translate(-40px,-20px) scale(1.04); }
}
.hero-content { position: relative; z-index: 2; max-width: 800px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 22px; margin-bottom: 32px;
    background: rgba(29,94,222,.06); border: 1px solid rgba(29,94,222,.12);
    color: var(--blue-700); font-size: .72rem; font-weight: 680;
    letter-spacing: .07em; text-transform: uppercase;
    border-radius: var(--r-full);
    backdrop-filter: blur(8px);
    transition: all .3s var(--ease-out);
}
.hero-badge:hover { background: rgba(29,94,222,.1); border-color: rgba(29,94,222,.2); }
.hero-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald-500); animation: pulse 2s infinite; box-shadow: 0 0 8px rgba(16,185,129,.4); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }
.hero-title {
    font-size: 4.5rem; font-weight: 900; color: var(--blue-950);
    line-height: 1.04; letter-spacing: -.045em; margin-bottom: 22px;
    text-shadow: 0 2px 30px rgba(29,94,222,.06);
    position: relative;
}
/* Subtle shimmer sweep on hero title */
.hero-title::after {
    content: '';
    position: absolute;
    inset: -4px -8px;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: shimmerSlide 6s ease-in-out infinite;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 80%);
    border-radius: 8px;
}
.hero-icon { display: inline-block; margin-right: 4px; }
.accent {
    background: linear-gradient(135deg, var(--blue-500), var(--violet-500), var(--cyan-500), #818cf8, var(--blue-400));
    background-size: 400% 400%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientText 6s ease infinite;
    filter: drop-shadow(0 2px 12px rgba(29,94,222,.15));
    position: relative;
}
@keyframes gradientText {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
}
.hero-subtitle {
    font-size: 1.25rem; color: var(--gray-500); font-weight: 400;
    margin-bottom: 24px; letter-spacing: -.01em;
}
.hero-description {
    font-size: 1.02rem; color: var(--gray-600); max-width: 660px;
    margin: 0 auto 40px; line-height: 1.9;
}
.hero-description strong { color: var(--blue-700); font-weight: 620; }
.hero-stats {
    display: flex; justify-content: center; gap: 16px;
    margin-bottom: 44px; padding: 0;
    position: relative;
    flex-wrap: wrap;
}
.stat {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: relative;
    padding: 20px 28px;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(29,94,222,.06);
    border-radius: var(--r-lg);
    transition: all .4s var(--ease-expo);
    min-width: 130px;
}
.stat:hover {
    transform: translateY(-4px);
    border-color: rgba(29,94,222,.15);
    box-shadow: 0 12px 32px -8px rgba(29,94,222,.12), 0 0 0 1px rgba(29,94,222,.05);
    background: rgba(255,255,255,.8);
}
.stat::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--blue-400), transparent);
    opacity: 0;
    transition: opacity .4s;
    border-radius: 2px;
}
.stat:hover::before { opacity: 1; }
.stat-number {
    font-size: 2.2rem; font-weight: 870; color: var(--blue-700);
    font-variant-numeric: tabular-nums; letter-spacing: -.045em;
    background: linear-gradient(180deg, var(--blue-600), var(--blue-800));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}
.stat-label {
    font-size: .64rem; color: var(--gray-400); font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    white-space: nowrap;
}
.hero-actions { display: flex; justify-content: center; gap: 16px; margin-bottom: 40px; }
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 30px; font-size: .9rem; font-weight: 620;
    border-radius: var(--r-md); transition: all .3s var(--ease-out);
    text-decoration: none; cursor: pointer; border: none; letter-spacing: .01em;
    position: relative; overflow: hidden;
    transform: translateZ(0); /* GPU acceleration */
}
/* Shimmer sweep effect */
.btn::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transition: left .6s var(--ease-out);
}
.btn:hover::before { left: 100%; }
.btn::after {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.18), transparent);
    transition: opacity .3s;
}
.btn:hover::after { opacity: 1; }
.btn-primary {
    background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-700) 50%, #4338ca 100%);
    background-size: 200% 200%;
    color: var(--white);
    box-shadow: 0 2px 12px rgba(29,94,222,.3), 0 0 0 1px rgba(29,94,222,.1), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover {
    background-position: 100% 100%;
    color: var(--white); transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 28px rgba(29,94,222,.4), 0 0 0 1px rgba(29,94,222,.15), 0 0 60px -10px rgba(29,94,222,.2);
}
.btn-primary:active { transform: translateY(0) scale(.99); box-shadow: 0 2px 8px rgba(29,94,222,.25); }
.btn-secondary {
    background: rgba(255,255,255,.9); color: var(--blue-700);
    border: 1.5px solid rgba(29,94,222,.12);
    box-shadow: var(--shadow-xs), 0 0 0 1px rgba(29,94,222,.04);
    backdrop-filter: blur(12px);
}
.btn-secondary:hover {
    background: rgba(238,244,255,.9); border-color: rgba(29,94,222,.2);
    color: var(--blue-800); transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(29,94,222,.08);
}
.btn-secondary:active { transform: translateY(0); }
.hero-sources { font-size: .78rem; color: var(--gray-400); line-height: 1.7; }
.hero-sources a { color: var(--blue-500); font-weight: 540; transition: all .2s; }
.hero-sources a:hover { text-decoration: underline; color: var(--blue-700); }
.hero-scroll {
    position: absolute; bottom: 32px; display: flex; flex-direction: column;
    align-items: center; gap: 8px; color: var(--gray-400);
    font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 560; animation: bounce 2.5s infinite ease-in-out;
    z-index: 2;
    opacity: .6;
    transition: opacity .3s;
}
.hero-scroll:hover { opacity: 1; }
.hero-scroll svg { transition: transform .3s var(--ease-spring); }
.hero-scroll:hover svg { transform: translateY(3px); }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ================================================================
   PAGE HERO — Subpages with gradient mesh
   ================================================================ */
.page-hero {
    position: relative; padding: 132px 0 68px;
    background: linear-gradient(172deg, #edf3ff 0%, #f2f7ff 40%, var(--white) 100%);
    overflow: hidden; text-align: center;
}
.page-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(29,94,222,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,94,222,.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, black 30%, transparent 90%);
    -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 90%);
}
.page-hero::after {
    content: ''; position: absolute; inset: -5%; pointer-events: none; opacity: .1;
    background:
        radial-gradient(ellipse 45% 35% at 10% 35%, var(--blue-300), transparent 70%),
        radial-gradient(ellipse 35% 45% at 90% 55%, var(--violet-500), transparent 70%),
        radial-gradient(ellipse 30% 25% at 50% 80%, var(--cyan-500), transparent 70%);
    animation: meshShift 25s ease-in-out infinite alternate;
}
.page-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.page-hero-content { position: relative; z-index: 1; max-width: 740px; margin: 0 auto; }
.breadcrumb {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .8rem; font-weight: 540; color: var(--blue-500);
    margin-bottom: 22px; text-decoration: none; transition: all .2s;
    padding: 4px 16px; border-radius: var(--r-full);
    background: rgba(29,94,222,.04); border: 1px solid rgba(29,94,222,.08);
}
.breadcrumb:hover { color: var(--blue-700); background: rgba(29,94,222,.08); }
.page-hero .section-tag { display: block; margin-bottom: 18px; }
.page-hero-title {
    font-size: 2.9rem; font-weight: 870; color: var(--blue-950);
    line-height: 1.1; letter-spacing: -.038em; margin-bottom: 20px;
    text-shadow: 0 2px 24px rgba(29,94,222,.05);
}
.page-hero-desc {
    font-size: 1.04rem; color: var(--gray-500); line-height: 1.85;
    font-style: italic; max-width: 620px; margin: 0 auto;
}

/* ================================================================
   DOMAIN EXPLORER — Landing grid with enhanced cards
   ================================================================ */
.domain-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    max-width: 1100px; margin: 0 auto;
}
.domain-card {
    position: relative; background: linear-gradient(170deg, rgba(248,250,255,.97), var(--white));
    border: 1px solid rgba(29,94,222,.06);
    border-radius: var(--r-xl); padding: 36px 32px 30px;
    text-decoration: none; transition: all .5s var(--ease-expo);
    display: flex; flex-direction: column; overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(29,94,222,.03), 0 0 0 1px rgba(29,94,222,.02);
    --card-glow-color: rgba(29,94,222,.12);
}
/* Accent top line with gradient — animated width on hover */
.domain-card::before {
    content: ''; position: absolute; top: 0; left: 50%; right: 50%; height: 3px;
    background: var(--card-accent, linear-gradient(90deg, var(--blue-400), var(--blue-600)));
    opacity: .4; transition: all .6s var(--ease-expo);
    border-radius: 0 0 3px 3px;
}
/* Gradient glow on hover — radial from top */
.domain-card::after {
    content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 180px;
    background: var(--card-accent, linear-gradient(90deg, var(--blue-400), var(--blue-600)));
    opacity: 0; transition: opacity .6s var(--ease-out);
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    pointer-events: none;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.domain-card:hover {
    border-color: rgba(29,94,222,.12);
    box-shadow: 0 0 0 1px var(--card-glow-color),
                0 24px 50px -12px rgba(15,23,42,.1),
                0 0 60px -20px var(--card-glow-color);
    transform: translateY(-8px) scale(1.015);
}
.domain-card:hover::before { opacity: 1; left: 0; right: 0; height: 3px; }
.domain-card:hover::after { opacity: .07; }
.domain-card-icon {
    width: 50px; height: 50px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(29,94,222,.08), rgba(29,94,222,.02));
    color: var(--blue-600); margin-bottom: 18px;
    transition: all .5s var(--ease-spring);
    position: relative;
}
.domain-card-icon svg { width: 24px; height: 24px; }
.domain-card:hover .domain-card-icon {
    transform: scale(1.12) translateY(-3px) rotate(-3deg);
    background: linear-gradient(135deg, rgba(29,94,222,.14), rgba(29,94,222,.06));
    box-shadow: 0 8px 20px rgba(29,94,222,.12);
}
.domain-card h3 {
    font-size: 1.14rem; font-weight: 740; color: var(--blue-900);
    margin-bottom: 10px; letter-spacing: -.02em;
    transition: color .3s;
}
.domain-card:hover h3 { color: var(--blue-800); }
.domain-card p { font-size: .86rem; color: var(--gray-500); line-height: 1.72; flex: 1; margin-bottom: 20px; }
.domain-card-footer { display: flex; align-items: center; justify-content: space-between; }
.domain-card-count {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 16px; background: rgba(29,94,222,.04); border: 1px solid rgba(29,94,222,.08);
    color: var(--blue-600); font-size: .72rem; font-weight: 660;
    border-radius: var(--r-full); transition: all .35s var(--ease-out);
}
.domain-card:hover .domain-card-count {
    background: rgba(29,94,222,.08); border-color: rgba(29,94,222,.15);
}
.domain-card-arrow {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    font-size: .8rem; color: var(--blue-400); font-weight: 600;
    border-radius: 50%; background: rgba(29,94,222,.04);
    transition: all .5s var(--ease-expo);
    border: 1px solid transparent;
}
.domain-card:hover .domain-card-arrow {
    transform: translateX(5px) scale(1.05); color: var(--white);
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    box-shadow: 0 4px 16px rgba(29,94,222,.3), 0 0 0 4px rgba(29,94,222,.08);
    border-color: rgba(29,94,222,.1);
}

/* Card accent colors with matching glow */
.domain-card[data-accent="t2i"]      { --card-accent: linear-gradient(90deg, #5a93ff, #3574f0); --card-glow-color: rgba(53,116,240,.15); }
.domain-card[data-accent="t2v"]      { --card-accent: linear-gradient(90deg, #d97706, #f59e0b); --card-glow-color: rgba(245,158,11,.12); }
.domain-card[data-accent="i2v"]      { --card-accent: linear-gradient(90deg, #0891b2, #06b6d4); --card-glow-color: rgba(6,182,212,.12); }
.domain-card[data-accent="unified"]  { --card-accent: linear-gradient(90deg, #7c3aed, #a855f7); --card-glow-color: rgba(139,92,246,.12); }
.domain-card[data-accent="world"]    { --card-accent: linear-gradient(90deg, #059669, #10b981); --card-glow-color: rgba(16,185,129,.12); }
.domain-card[data-accent="cross"]    { --card-accent: linear-gradient(90deg, #d97706, #f59e0b); --card-glow-color: rgba(245,158,11,.12); }
.domain-card[data-accent="bench"]    { --card-accent: linear-gradient(90deg, #e11d48, #f43f5e); --card-glow-color: rgba(244,63,94,.12); }
.domain-card[data-accent="arena"]    { --card-accent: linear-gradient(90deg, #eab308, #f59e0b); --card-glow-color: rgba(234,179,8,.12); }
.domain-card[data-accent="data"]     { --card-accent: linear-gradient(90deg, #0891b2, #06b6d4); --card-glow-color: rgba(6,182,212,.12); }
.domain-card[data-accent="safety"]   { --card-accent: linear-gradient(90deg, #e11d48, #f43f5e); --card-glow-color: rgba(244,63,94,.12); }
.domain-card[data-accent="theory"]   { --card-accent: linear-gradient(90deg, #0891b2, #06b6d4); --card-glow-color: rgba(6,182,212,.12); }
.domain-card[data-accent="embodied"] { --card-accent: linear-gradient(90deg, #d97706, #f59e0b); --card-glow-color: rgba(245,158,11,.12); }
.domain-card[data-accent="sim"]      { --card-accent: linear-gradient(90deg, #059669, #10b981); --card-glow-color: rgba(16,185,129,.12); }
.domain-card[data-accent="eval"]     { --card-accent: linear-gradient(90deg, #e11d48, #f43f5e); --card-glow-color: rgba(244,63,94,.12); }
.domain-card[data-accent="3d"]       { --card-accent: linear-gradient(90deg, #e65100, #ff6d00); --card-glow-color: rgba(255,109,0,.12); }
.domain-card[data-accent="4d"]       { --card-accent: linear-gradient(90deg, #6d28d9, #a78bfa); --card-glow-color: rgba(109,40,217,.12); }

/* Per-domain icon color overrides */
.domain-card[data-accent="t2i"] .domain-card-icon      { color: #3574f0; background: linear-gradient(135deg, rgba(53,116,240,.1), rgba(53,116,240,.03)); }
.domain-card[data-accent="t2v"] .domain-card-icon      { color: #d97706; background: linear-gradient(135deg, rgba(217,119,6,.1), rgba(217,119,6,.03)); }
.domain-card[data-accent="i2v"] .domain-card-icon      { color: #0891b2; background: linear-gradient(135deg, rgba(8,145,178,.1), rgba(8,145,178,.03)); }
.domain-card[data-accent="3d"] .domain-card-icon       { color: #e65100; background: linear-gradient(135deg, rgba(230,81,0,.1), rgba(230,81,0,.03)); }
.domain-card[data-accent="4d"] .domain-card-icon       { color: #6d28d9; background: linear-gradient(135deg, rgba(109,40,217,.1), rgba(109,40,217,.03)); }
.domain-card[data-accent="unified"] .domain-card-icon  { color: #7c3aed; background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(124,58,237,.03)); }
.domain-card[data-accent="world"] .domain-card-icon    { color: #059669; background: linear-gradient(135deg, rgba(5,150,105,.1), rgba(5,150,105,.03)); }

/* Sub-page card grid (category landing pages) */
.subpage-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px;
    max-width: 1100px; margin: 0 auto;
}
/* Enhanced sub-page domain cards */
.subpage-grid .domain-card {
    background: linear-gradient(170deg, rgba(248,250,255,.98), var(--white) 60%);
    border: 1px solid rgba(29,94,222,.06);
    box-shadow: 0 2px 12px rgba(29,94,222,.03);
}
.subpage-grid .domain-card:hover {
    box-shadow: 0 20px 44px -8px rgba(29,94,222,.12), 0 6px 14px -4px rgba(29,94,222,.05);
}
.subpage-grid .domain-card h3 {
    font-size: 1.08rem;
    line-height: 1.35;
}
.subpage-grid .domain-card p {
    font-size: .84rem;
    line-height: 1.72;
}

/* ================================================================
   SPOTLIGHT — Arena preview with premium cards
   ================================================================ */
.spotlight-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #eef3ff 0%, #f6f9ff 40%, #f8faff 70%, var(--white) 100%);
    position: relative;
}
.spotlight-section::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(29,94,222,.05), transparent 70%),
        radial-gradient(ellipse 40% 30% at 20% 80%, rgba(139,92,246,.03), transparent 70%);
}
.spotlight-header { text-align: center; margin-bottom: 52px; position: relative; }
.spotlight-header h2 { font-size: 2.1rem; font-weight: 840; color: var(--blue-950); letter-spacing: -.03em; margin-bottom: 12px; }
.spotlight-header p { font-size: .95rem; color: var(--gray-500); max-width: 580px; margin: 0 auto; line-height: 1.7; }
.spotlight-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; max-width: 1100px; margin: 0 auto; position: relative; }
.spotlight-card {
    background: linear-gradient(170deg, rgba(248,250,255,.98), var(--white));
    border: 1px solid rgba(29,94,222,.06);
    border-radius: var(--r-lg); padding: 30px 24px; text-align: center;
    transition: all .4s var(--ease-expo); position: relative; overflow: hidden;
    box-shadow: 0 1px 3px rgba(29,94,222,.03);
}
.spotlight-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px;
    background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
    opacity: 0; transition: opacity .4s;
}
.spotlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px -8px rgba(29,94,222,.12), 0 0 0 1px rgba(29,94,222,.06);
}
.spotlight-card:hover::before { opacity: 1; }
/* Champion card (rank 1) — gold glow */
.spotlight-card:first-child {
    background: linear-gradient(170deg, #fffdf5, #fffbeb, var(--white));
    border-color: rgba(251,191,36,.2);
}
.spotlight-card:first-child::before { opacity: .6; background: linear-gradient(90deg, #f59e0b, #eab308, #f59e0b); }
.spotlight-card:first-child:hover {
    box-shadow: 0 16px 40px -8px rgba(234,179,8,.2), 0 0 0 1px rgba(251,191,36,.15), 0 0 40px -10px rgba(251,191,36,.1);
}
/* Silver card (rank 2) */
.spotlight-card:nth-child(2) {
    background: linear-gradient(170deg, #f8f9fc, #f0f2f7, var(--white));
    border-color: rgba(148,163,184,.2);
}
.spotlight-card:nth-child(2)::before { opacity: .4; background: linear-gradient(90deg, #94a3b8, #cbd5e1, #94a3b8); }
/* Bronze card (rank 3) */
.spotlight-card:nth-child(3) {
    background: linear-gradient(170deg, #fff7ed, #ffedd5, var(--white));
    border-color: rgba(249,115,22,.15);
}
.spotlight-card:nth-child(3)::before { opacity: .4; background: linear-gradient(90deg, #f97316, #fb923c, #f97316); }
.spotlight-rank {
    width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: .92rem; font-weight: 800; font-family: var(--font-mono);
    background: linear-gradient(135deg, var(--blue-100), var(--blue-50));
    color: var(--blue-700); border: 1.5px solid var(--blue-200);
    transition: all .4s var(--ease-spring);
    position: relative;
}
.spotlight-card:hover .spotlight-rank { transform: scale(1.1); }
.spotlight-rank.rank-1 {
    background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; border-color: #fbbf24;
    box-shadow: 0 4px 16px rgba(251,191,36,.25);
    animation: goldGlow 3s ease-in-out infinite;
}
@keyframes goldGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(251,191,36,.25); }
    50% { box-shadow: 0 4px 24px rgba(251,191,36,.4); }
}
.spotlight-rank.rank-2 { background: linear-gradient(135deg, #f0f2f7, #e1e5ee); color: #4a5167; border-color: #c9cfdc; box-shadow: 0 2px 8px rgba(148,163,184,.15); }
.spotlight-rank.rank-3 { background: linear-gradient(135deg, #fed7aa, #fdba74); color: #9a3412; border-color: #f97316; box-shadow: 0 2px 8px rgba(249,115,22,.15); }
.spotlight-model { font-size: .92rem; font-weight: 720; color: var(--blue-900); margin-bottom: 5px; line-height: 1.3; }
.spotlight-org { font-size: .75rem; color: var(--gray-500); margin-bottom: 12px; }
.spotlight-elo {
    display: inline-flex; padding: 6px 18px;
    background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
    color: var(--blue-700); font-size: .86rem; font-weight: 720;
    font-family: var(--font-mono); border-radius: var(--r-full);
    letter-spacing: -.01em;
    border: 1px solid var(--blue-100);
    transition: all .3s var(--ease-out);
}
.spotlight-card:hover .spotlight-elo {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(29,94,222,.1);
}
/* Champion Elo — gold */
.spotlight-card:first-child .spotlight-elo {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border-color: #fbbf24;
}

/* ================================================================
   STATS BANNER — Landing with animated borders
   ================================================================ */
.stats-banner {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    max-width: 960px; margin: 0 auto; padding: 56px 0;
}
.stats-banner-item {
    text-align: center; padding: 30px 22px;
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, rgba(238,244,255,.6), rgba(248,250,255,.85));
    border: 1px solid rgba(29,94,222,.05);
    transition: all .4s var(--ease-expo);
    position: relative;
    box-shadow: 0 1px 3px rgba(29,94,222,.02);
    overflow: hidden;
}
.stats-banner-item::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; right: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-400), var(--violet-500));
    opacity: 0;
    transition: all .5s var(--ease-expo);
    border-radius: 0 0 2px 2px;
}
.stats-banner-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(29,94,222,.08), 0 0 0 1px rgba(29,94,222,.06);
    border-color: rgba(29,94,222,.1);
}
.stats-banner-item:hover::before { opacity: 1; left: 0; right: 0; }
.stats-banner-number {
    font-size: 2.6rem; font-weight: 870; font-variant-numeric: tabular-nums; letter-spacing: -.045em;
    background: linear-gradient(180deg, var(--blue-600), var(--blue-800));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stats-banner-label { font-size: .76rem; color: var(--gray-400); font-weight: 560; margin-top: 8px; letter-spacing: .03em; }

/* ================================================================
   SECTIONS — Shared section system
   ================================================================ */
.section { padding: 100px 0; }
.section-alt { background: linear-gradient(180deg, #f2f7ff, var(--gray-50)); }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.section-tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 22px; margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(29,94,222,.05), rgba(29,94,222,.02));
    border: 1px solid rgba(29,94,222,.08);
    color: var(--blue-600); font-size: .66rem; font-weight: 720;
    letter-spacing: .1em; text-transform: uppercase;
    border-radius: var(--r-full);
    transition: all .35s var(--ease-out);
    backdrop-filter: blur(12px);
    animation: subtleBreathe 4s ease-in-out infinite;
}
.section-tag svg { width: 12px; height: 12px; flex-shrink: 0; }
.section-number { display: block; font-size: .66rem; font-weight: 720; color: var(--blue-400); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.section-title {
    font-size: 2.3rem; font-weight: 850; color: var(--blue-950);
    margin-bottom: 18px; letter-spacing: -.035em; line-height: 1.15;
    position: relative;
}
.section-header .section-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-400), var(--violet-500));
    border-radius: 3px;
    margin: 16px auto 0;
    opacity: .5;
}
.section-desc { font-size: 1rem; color: var(--gray-500); line-height: 1.8; font-style: italic; }
.subsection-title {
    font-size: 1.1rem; font-weight: 720; color: var(--blue-800);
    margin: 56px 0 24px; padding: 18px 26px;
    background: linear-gradient(90deg, rgba(29,94,222,.04), rgba(29,94,222,.01) 60%, transparent 100%);
    border-left: 3px solid var(--blue-400);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    letter-spacing: -.01em;
    transition: all .4s var(--ease-expo);
    position: relative;
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
.subsection-title:hover {
    border-left-color: var(--blue-500);
    background: linear-gradient(90deg, rgba(29,94,222,.07), rgba(29,94,222,.02) 60%, transparent 100%);
    transform: translateX(3px);
    border-left-width: 4px;
}
.section-intro {
    max-width: 860px; margin: 0 auto 48px; padding: 30px 38px;
    background: linear-gradient(135deg, rgba(238,244,255,.45), rgba(248,250,255,.65));
    border: 1px solid rgba(29,94,222,.05);
    border-left: 3.5px solid var(--blue-400);
    border-radius: var(--r-lg);
    font-size: .93rem; color: var(--gray-700); line-height: 1.88;
    transition: all .4s var(--ease-expo);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.section-intro:hover {
    border-left-color: var(--blue-500);
    box-shadow: 0 8px 32px rgba(29,94,222,.06);
    background: linear-gradient(135deg, rgba(238,244,255,.65), rgba(248,250,255,.85));
    transform: translateX(2px);
}
.section-intro em { color: var(--blue-700); font-style: normal; font-weight: 620; }
.section-intro a { font-weight: 560; }

/* ================================================================
   TAXONOMY GRID
   ================================================================ */
.taxonomy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.taxonomy-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--r-lg); padding: 28px 26px;
    text-decoration: none; transition: all .35s var(--ease-out);
    display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.taxonomy-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue-400), var(--blue-600)); opacity: .3; transition: opacity .3s; }
.taxonomy-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow-card-hover); transform: translateY(-5px); }
.taxonomy-card:hover::before { opacity: 1; }
.card-icon {
    width: 42px; height: 42px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(29,94,222,.07), rgba(29,94,222,.03));
    color: var(--blue-500); margin-bottom: 14px;
    transition: all .3s var(--ease-spring);
}
.card-icon svg { width: 22px; height: 22px; }
.taxonomy-card:hover .card-icon { transform: scale(1.06); background: linear-gradient(135deg, rgba(29,94,222,.1), rgba(29,94,222,.05)); }
.taxonomy-card h3 { font-size: 1.04rem; font-weight: 720; color: var(--blue-900); margin-bottom: 8px; letter-spacing: -.01em; }
.taxonomy-card p { font-size: .85rem; color: var(--gray-500); line-height: 1.65; flex: 1; }
.card-count { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; padding: 4px 14px; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-600); font-size: .7rem; font-weight: 660; border-radius: var(--r-full); }

/* ================================================================
   TABLES — Premium academic tables with enhanced styling
   ================================================================ */
.table-wrapper {
    overflow-x: auto; margin-bottom: 28px;
    border-radius: var(--r-xl);
    border: 1px solid rgba(29,94,222,.06);
    background: var(--white);
    box-shadow: 0 2px 16px rgba(29,94,222,.03), 0 1px 3px rgba(29,94,222,.02), 0 0 0 1px rgba(29,94,222,.01);
    transition: box-shadow .5s var(--ease-expo), border-color .5s var(--ease-expo);
}
.table-wrapper:hover {
    box-shadow: 0 12px 40px -8px rgba(29,94,222,.1), 0 4px 12px rgba(29,94,222,.04), 0 0 0 1px rgba(29,94,222,.04);
    border-color: rgba(29,94,222,.1);
}
.data-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.data-table thead {
    background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-700) 40%, #4338ca 100%);
    position: sticky; top: 0; z-index: 5;
}
.data-table th {
    padding: 14px 22px; text-align: left;
    font-weight: 660; font-size: .68rem; letter-spacing: .09em;
    text-transform: uppercase; color: rgba(255,255,255,.92); white-space: nowrap;
    position: relative; cursor: default;
    transition: background .25s;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { background: rgba(255,255,255,.08); }
.data-table th.sortable::after {
    content: '\u21C5'; margin-left: 6px; opacity: .4; font-size: .65rem;
}
.data-table th.sort-asc::after { content: '\2191'; opacity: .9; }
.data-table th.sort-desc::after { content: '\2193'; opacity: .9; }
.data-table th:first-child { border-radius: var(--r-lg) 0 0 0; }
.data-table th:last-child  { border-radius: 0 var(--r-lg) 0 0; }
.data-table td {
    padding: 14px 22px; border-bottom: 1px solid rgba(29,94,222,.04);
    color: var(--gray-600); vertical-align: top;
    transition: all .2s var(--ease-out);
    line-height: 1.6;
}
.data-table td:first-child {
    font-weight: 620; color: var(--gray-800);
    position: relative;
}
/* Subtle left accent on hover for first cell */
.data-table tbody tr:hover td:first-child::before {
    content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; background: linear-gradient(180deg, var(--blue-400), var(--blue-600));
    border-radius: 0 2px 2px 0;
    animation: fadeSlideIn .25s var(--ease-out);
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: scaleY(.5); }
    to { opacity: 1; transform: scaleY(1); }
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: all .25s var(--ease-out); position: relative; }
.data-table tbody tr:nth-child(even) { background: rgba(238,244,255,.3); }
.data-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(29,94,222,.04), rgba(29,94,222,.02), transparent);
}
.data-table tbody tr:hover td:first-child { color: var(--blue-700); }
.data-table tbody tr:hover td { color: var(--gray-700); }
.data-table.compact td { padding: 10px 22px; font-size: .84rem; }
/* Paper title column — refined typography */
.data-table td:nth-child(2) { font-size: .84rem; color: var(--gray-500); line-height: 1.55; }
.data-table tbody tr:hover td:nth-child(2) { color: var(--gray-600); }

/* New row badge for recently added papers */
.new-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 10px; margin-left: 8px;
    background: linear-gradient(135deg, var(--emerald-500), #34d399);
    color: white; font-size: .56rem; font-weight: 720;
    border-radius: var(--r-full); letter-spacing: .06em;
    text-transform: uppercase; line-height: 1.5;
    box-shadow: 0 2px 8px rgba(16,185,129,.25);
    animation: newPulse 3s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes newPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(16,185,129,.25); }
    50% { box-shadow: 0 2px 12px rgba(16,185,129,.4); }
}

/* Year badge for tables */
.year-badge {
    display: inline-flex; padding: 3px 12px;
    font-size: .7rem; font-weight: 680;
    border-radius: var(--r-full);
    font-family: var(--font-mono);
    letter-spacing: .02em;
    transition: all .2s var(--ease-out);
}
.year-badge.y2026 { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; border: 1px solid #fbbf24; box-shadow: 0 1px 4px rgba(251,191,36,.2); }
.year-badge.y2025 { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; border: 1px solid #60a5fa; box-shadow: 0 1px 4px rgba(96,165,250,.15); }
.year-badge.y2024 { background: var(--gray-100); color: var(--gray-600); border: 1px solid var(--gray-200); }
.year-badge.y2023 { background: rgba(243,244,246,.6); color: var(--gray-500); border: 1px solid rgba(229,231,235,.8); }

/* ================================================================
   BADGES
   ================================================================ */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 11px; font-size: .65rem; font-weight: 720;
    letter-spacing: .04em; text-transform: uppercase;
    border-radius: var(--r-full); border: 1px solid transparent;
    transition: all .2s var(--ease-out);
}
.badge-t2i     { background: var(--blue-50);    color: var(--blue-700);    border-color: var(--blue-100); }
.badge-world   { background: var(--emerald-50); color: var(--emerald-600); border-color: #bbf7d0; }
.badge-unified { background: var(--violet-50);  color: var(--violet-600);  border-color: #ddd6fe; }
.badge-cross   { background: var(--amber-50);   color: var(--amber-600);   border-color: #fed7aa; }
.badge-eval    { background: var(--rose-50);     color: var(--rose-600);    border-color: #fecdd3; }

/* ================================================================
   CROSS-MODAL GRID
   ================================================================ */
.crossmodal-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.crossmodal-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--r-lg); padding: 28px 26px;
    transition: all .35s var(--ease-out); overflow: hidden; position: relative;
}
.crossmodal-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--amber-500), var(--amber-600));
    opacity: .3; transition: opacity .3s;
}
.crossmodal-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.crossmodal-card:hover::before { opacity: 1; }
.crossmodal-card h3 {
    font-size: 1rem; font-weight: 720; color: var(--blue-800);
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-200); letter-spacing: -.01em;
    display: flex; align-items: center; gap: 8px;
}
.crossmodal-card h3 .arrow { color: var(--blue-400); font-size: 1.1rem; }
.paper-list { list-style: none; }
.paper-list li {
    padding: 8px 0; font-size: .85rem; color: var(--gray-600);
    border-bottom: 1px solid var(--gray-100); line-height: 1.55;
    display: flex; align-items: baseline; gap: 10px;
    transition: all .2s;
}
.paper-list li:last-child { border-bottom: none; }
.paper-list li:hover { color: var(--gray-800); }
.paper-list li::before { content: ''; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-400); margin-top: 7px; }
.paper-list li strong { color: var(--blue-800); font-weight: 620; }

/* ================================================================
   METRICS GRID
   ================================================================ */
.metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 32px; }
.metric-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--r-md); padding: 22px 18px; text-align: center;
    transition: all .3s var(--ease-out); position: relative; overflow: hidden;
}
.metric-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
    opacity: 0; transition: opacity .25s;
}
.metric-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.metric-card:hover::after { opacity: 1; }
.metric-name { display: block; font-size: .96rem; font-weight: 720; color: var(--blue-700); font-family: var(--font-mono); margin-bottom: 4px; }
.metric-desc { font-size: .73rem; color: var(--gray-500); line-height: 1.45; }

/* ================================================================
   THEORY GRID
   ================================================================ */
.theory-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.theory-card {
    background: linear-gradient(145deg, var(--blue-50), var(--white));
    border: 1px solid var(--blue-100);
    border-radius: var(--r-lg); padding: 30px 28px;
    transition: all .35s var(--ease-out);
}
.theory-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--blue-200); }
.theory-card h4 { font-size: 1rem; font-weight: 720; color: var(--blue-800); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.theory-card h4 .theory-icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--blue-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue-600); }
.theory-card h4 .theory-icon svg { width: 16px; height: 16px; }
.theory-card p { font-size: .88rem; color: var(--gray-600); line-height: 1.75; }
.theory-card .theory-cite { display: block; margin-top: 12px; font-size: .78rem; color: var(--blue-500); font-style: italic; }

/* ================================================================
   SEARCH BAR — Enhanced with glass effect
   ================================================================ */
.search-container { max-width: 600px; margin: -16px auto 48px; position: relative; }
.search-input {
    width: 100%; padding: 15px 22px 15px 50px;
    border: 1.5px solid rgba(29,94,222,.08);
    border-radius: var(--r-xl); font-size: .92rem;
    font-family: var(--font-sans); color: var(--gray-800);
    background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm), 0 0 0 1px rgba(29,94,222,.02);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all .35s var(--ease-out); outline: none;
}
.search-input::placeholder { color: var(--gray-400); font-weight: 420; }
.search-input:focus {
    border-color: var(--blue-400);
    box-shadow: var(--shadow-md), 0 0 0 4px rgba(29,94,222,.06), 0 0 32px -8px rgba(29,94,222,.08);
    background: var(--white);
}
.search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 1rem; pointer-events: none; transition: color .2s; }
.search-input:focus ~ .search-icon { color: var(--blue-500); }
.search-kbd {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    padding: 3px 10px; background: var(--gray-100); border: 1px solid var(--gray-200);
    border-radius: var(--r-xs); font-size: .68rem; font-family: var(--font-mono);
    color: var(--gray-500); pointer-events: none;
    transition: all .2s;
}
.search-input:focus ~ .search-kbd { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-500); }
.search-results-count { text-align: center; margin-top: 10px; font-size: .78rem; color: var(--gray-500); display: none; }
.search-results-count.active { display: block; }
.data-table tbody tr.search-hidden { display: none; }
.paper-list li.search-hidden { display: none; }
mark.search-highlight { background: rgba(29,94,222,.12); color: var(--blue-800); border-radius: 3px; padding: 1px 3px; }

/* ================================================================
   ARENA LEADERBOARD ENHANCEMENTS
   ================================================================ */
#arena-table .data-table tbody tr:nth-child(-n+3) { background: linear-gradient(90deg, rgba(234,179,8,.06), transparent 60%); }
#arena-table .data-table tbody tr:nth-child(1) td:first-child::before { content: '🥇 '; }
#arena-table .data-table tbody tr:nth-child(2) td:first-child::before { content: '🥈 '; }
#arena-table .data-table tbody tr:nth-child(3) td:first-child::before { content: '🥉 '; }

/* ================================================================
   SIDEBAR LAYOUT SYSTEM — Collapsible on Desktop & Mobile
   ================================================================ */
.page-layout { display: flex; min-height: 100vh; padding-top: var(--nav-height); }
.sidebar {
    position: fixed; top: var(--nav-height); left: 0; bottom: 0;
    width: var(--sidebar-width); z-index: 50;
    background: linear-gradient(180deg, rgba(248,250,255,.98) 0%, rgba(255,255,255,.98) 100%);
    backdrop-filter: blur(32px) saturate(1.8);
    -webkit-backdrop-filter: blur(32px) saturate(1.8);
    border-right: 1px solid rgba(29,94,222,.06);
    overflow-y: auto; overflow-x: hidden;
    transition: width .4s var(--ease-expo), transform .4s var(--ease-expo);
    display: flex; flex-direction: column;
    box-shadow: 4px 0 32px rgba(29,94,222,.03);
}
/* Desktop collapsed state: narrow icon-only strip */
.sidebar.desktop-collapsed {
    width: var(--sidebar-collapsed-width);
}
.sidebar.desktop-collapsed .sidebar-link span:not(.link-icon),
.sidebar.desktop-collapsed .sidebar-link .link-count,
.sidebar.desktop-collapsed .sidebar-section-label,
.sidebar.desktop-collapsed .sidebar-divider,
.sidebar.desktop-collapsed .sidebar-toc,
.sidebar.desktop-collapsed .sidebar-toc-title,
.sidebar.desktop-collapsed .sidebar-header > a span:not(:first-child),
.sidebar.desktop-collapsed .sidebar-title .sidebar-subtitle,
.sidebar.desktop-collapsed .sidebar-title h3 span:not(:first-child) {
    opacity: 0; width: 0; overflow: hidden; white-space: nowrap;
    transition: opacity .2s, width .2s;
}
.sidebar.desktop-collapsed .sidebar-link {
    padding: 10px 0; margin: 1px 4px; justify-content: center;
    border-left: none; min-height: 36px;
}
.sidebar.desktop-collapsed .sidebar-link.active::after { display: none; }
.sidebar.desktop-collapsed .sidebar-link .link-icon {
    width: auto; font-size: 1.1rem; margin: 0;
}
/* Hide local section links entirely when collapsed (they have no icon) */
.sidebar.desktop-collapsed .sidebar-nav .sidebar-link:not(:has(.link-icon)) {
    height: 0; padding: 0; margin: 0; overflow: hidden; min-height: 0;
}
.sidebar.desktop-collapsed .sidebar-header {
    padding: 14px 8px; justify-content: center;
}
.sidebar.desktop-collapsed .sidebar-header > a {
    justify-content: center; font-size: 1.2rem; gap: 0;
}
.sidebar.desktop-collapsed .sidebar-collapse-btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%) rotate(180deg);
}
.sidebar.desktop-collapsed .sidebar-nav { padding: 8px 0; }

/* Mobile collapsed = off-screen */
.sidebar.collapsed { transform: translateX(calc(var(--sidebar-width) * -1)); }

/* Sidebar header */
.sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 16px 14px; border-bottom: 1px solid rgba(29,94,222,.08);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(238,244,255,.6), rgba(248,250,255,.3));
    gap: 8px;
}
.sidebar-back {
    font-size: .82rem; font-weight: 640; color: var(--blue-700);
    text-decoration: none; display: flex; align-items: center; gap: 7px;
    transition: all .22s var(--ease-out);
    padding: 4px 10px 4px 6px; border-radius: var(--r-sm);
    white-space: nowrap; overflow: hidden;
}
.sidebar-back:hover { color: var(--blue-800); background: rgba(29,94,222,.05); transform: translateX(-2px); }
/* Branded home link variant (index page) */
.sidebar-brand-link {
    font-weight: 780 !important; color: var(--blue-900) !important;
    gap: 8px !important; padding: 4px 10px 4px 8px !important;
}
.sidebar-brand-link:hover { transform: scale(1.02) !important; background: none !important; }
.sidebar-brand-link svg { color: var(--blue-600); }
body.dark .sidebar-brand-link { color: #e2e8f0 !important; }
body.dark .sidebar-brand-link svg { color: #5a93ff; }
.sidebar-close {
    width: 26px; height: 26px; border-radius: var(--r-sm);
    background: none; border: 1px solid var(--blue-100);
    color: var(--gray-400); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s; line-height: 1;
}
.sidebar-close svg { width: 14px; height: 14px; }
.sidebar-close:hover { background: var(--blue-50); color: var(--blue-600); border-color: var(--blue-200); }

/* Sidebar collapse/expand toggle (desktop) */
.sidebar-collapse-btn {
    width: 26px; height: 26px; border-radius: var(--r-sm);
    background: none; border: 1px solid var(--blue-100);
    color: var(--gray-400); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .25s var(--ease-out); line-height: 1;
    flex-shrink: 0;
}
.sidebar-collapse-btn svg { width: 14px; height: 14px; }
.sidebar-collapse-btn:hover { background: var(--blue-50); color: var(--blue-600); border-color: var(--blue-200); }
.sidebar.desktop-collapsed .sidebar-collapse-btn { transform: rotate(180deg); }

/* Sidebar nav items */
.sidebar-nav { list-style: none; padding: 6px 0; flex-shrink: 0; }
.sidebar-link {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 14px; margin: 2px 8px; font-size: .82rem; font-weight: 520;
    color: var(--gray-500); text-decoration: none;
    border-radius: var(--r-sm); border-left: 2.5px solid transparent;
    transition: all .22s var(--ease-out); line-height: 1.4;
    position: relative;
}
.sidebar-link:hover {
    color: var(--blue-700);
    background: linear-gradient(90deg, rgba(29,94,222,.06), rgba(29,94,222,.02));
    border-left-color: var(--blue-300);
    transform: translateX(2px);
}
.sidebar-link.active {
    color: var(--blue-700); font-weight: 650;
    background: linear-gradient(90deg, rgba(29,94,222,.09), rgba(29,94,222,.02));
    border-left-color: var(--blue-500);
}
/* Active indicator pill */
.sidebar-link.active::after {
    content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--blue-500);
}
.sidebar-divider {
    height: 1px; margin: 10px 16px;
    background: linear-gradient(90deg, var(--blue-100) 0%, rgba(29,94,222,.04) 100%);
}

/* TOC */
.sidebar-toc-title {
    padding: 16px 20px 8px; font-size: .6rem; font-weight: 740;
    color: var(--blue-400); text-transform: uppercase; letter-spacing: .12em;
    display: flex; align-items: center; gap: 8px;
}
.sidebar-toc-title::before {
    content: ''; width: 16px; height: 1px;
    background: linear-gradient(90deg, var(--blue-300), transparent);
    flex-shrink: 0;
}
.sidebar-toc { flex: 1; overflow-y: auto; padding-bottom: 24px; }
.sidebar-toc-list {
    list-style: none; padding: 0; margin: 0 12px 0 20px;
    position: relative;
}
/* Continuous vertical progress track */
.sidebar-toc-list::before {
    content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
    width: 2px; background: var(--gray-100); border-radius: 2px;
}
.sidebar-toc-link {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px 6px 16px; font-size: .76rem;
    color: var(--gray-400); text-decoration: none;
    margin: 1px 0; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    transition: all .2s var(--ease-out); line-height: 1.45;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    position: relative;
}
/* Active dot indicator on the track */
.sidebar-toc-link::before {
    content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gray-200);
    transition: all .25s var(--ease-spring);
    z-index: 1;
}
.sidebar-toc-link:hover {
    color: var(--blue-600); background: rgba(29,94,222,.03);
}
.sidebar-toc-link:hover::before {
    background: var(--blue-300); transform: translateY(-50%) scale(1.2);
}
.sidebar-toc-link.active {
    color: var(--blue-700); font-weight: 620;
    background: linear-gradient(90deg, rgba(29,94,222,.06), rgba(29,94,222,.02));
}
.sidebar-toc-link.active::before {
    background: var(--blue-500); transform: translateY(-50%) scale(1.3);
    box-shadow: 0 0 0 3px rgba(53,116,240,.15);
}

/* Sidebar toggle button (mobile/tablet) */
.sidebar-toggle {
    position: fixed; top: calc(var(--nav-height) + 12px); left: 12px; z-index: 55;
    width: 36px; height: 36px; border-radius: var(--r-sm);
    background: rgba(255,255,255,.92); border: 1px solid var(--blue-100);
    color: var(--blue-400); cursor: pointer;
    display: none; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm); transition: all .2s;
    backdrop-filter: blur(8px); line-height: 1;
}
.sidebar-toggle svg { width: 18px; height: 18px; }
.sidebar-toggle:hover { background: var(--blue-50); border-color: var(--blue-300); color: var(--blue-600); }
.sidebar-toggle.visible { display: flex; }

/* Sidebar backdrop (mobile) */
.sidebar-backdrop {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(9,30,82,.15); opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    backdrop-filter: blur(3px);
}
.sidebar-backdrop.visible { opacity: 1; pointer-events: all; }

/* Main content area */
.page-main {
    flex: 1; min-width: 0; margin-left: var(--sidebar-width);
    transition: margin-left .35s var(--ease-out);
}
.sidebar.desktop-collapsed ~ .page-main { margin-left: var(--sidebar-collapsed-width); }
.sidebar.collapsed ~ .page-main { margin-left: 0; }
.page-main .section-intro { max-width: 100%; }
.page-main .search-container { max-width: 100%; }

/* Main content padding for better blue-white feel */
.page-main > .section { padding-left: 16px; padding-right: 16px; }
.page-main > .section .container { max-width: 100%; padding: 0 24px; }

/* Sub-page hero (smaller) */
.subpage-hero { padding: 88px 0 40px; }
.subpage-hero .page-hero-title { font-size: 2.1rem; }
.subpage-hero .page-hero-desc { font-size: 1rem; }

/* ================================================================
   ARXIV ICON LINKS — Enhanced with tooltip
   ================================================================ */
.paper-arxiv-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    border-radius: 6px;
    border: 1px solid rgba(179,27,27,.12);
    background: linear-gradient(180deg, #ffffff, #fef7f7);
    vertical-align: text-bottom;
    transition: all .25s var(--ease-out);
    position: relative;
    opacity: .65;
}
.paper-arxiv-link svg {
    width: 13px;
    height: 13px;
    color: #b31b1b;
}
.data-table tbody tr:hover .paper-arxiv-link {
    opacity: 1;
}
.paper-arxiv-link:hover {
    border-color: #f3b0b0;
    background: #fff0f0;
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 4px 12px rgba(179, 27, 27, 0.2);
    opacity: 1;
}

/* ================================================================
   PAPER COUNT BADGE
   ================================================================ */
.paper-count-badge {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: auto; padding: 3px 12px;
    background: linear-gradient(135deg, rgba(29,94,222,.08), rgba(29,94,222,.04));
    border: 1px solid rgba(29,94,222,.1);
    color: var(--blue-600);
    font-size: .64rem; font-weight: 700;
    border-radius: var(--r-full); vertical-align: middle;
    transition: all .25s var(--ease-out);
    font-family: var(--font-mono);
    letter-spacing: .02em;
}
.subsection-title:hover .paper-count-badge {
    background: linear-gradient(135deg, rgba(29,94,222,.12), rgba(29,94,222,.06));
    border-color: rgba(29,94,222,.18);
    color: var(--blue-700);
}

/* ================================================================
   FOOTER — Light blue-white premium
   ================================================================ */
.footer {
    background: linear-gradient(180deg, #f0f5ff 0%, #eaf0fc 30%, #f2f7ff 60%, #f6f9ff 100%);
    color: var(--gray-600); padding: 80px 0 36px;
    position: relative; overflow: hidden;
    border-top: 1px solid rgba(29,94,222,.04);
}
.footer::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(29,94,222,.015) 1px, transparent 0);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 50%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 50%);
}
.footer::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 5%, var(--blue-300) 25%, var(--violet-500) 40%, var(--cyan-500) 60%, var(--blue-300) 75%, transparent 95%);
    opacity: .3;
}
.footer-content { position: relative; display: grid; grid-template-columns: 2.4fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 44px; }
.footer-brand h3 { font-size: 1.2rem; color: var(--blue-900); margin-bottom: 12px; font-weight: 780; display: flex; align-items: center; gap: 8px; }
.footer-brand h3 svg { width: 20px; height: 20px; color: var(--blue-500); }
.footer-brand h3 img { width: 28px; height: 28px; object-fit: contain; }
.footer-brand p { font-size: .86rem; color: var(--gray-500); line-height: 1.75; }
.footer-links h4 { font-size: .7rem; font-weight: 720; color: var(--blue-800); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a {
    color: var(--gray-500); font-size: .84rem; transition: all .25s var(--ease-out);
    display: inline-block; position: relative;
}
.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 0; height: 1px;
    background: var(--blue-400);
    transition: width .3s var(--ease-out);
}
.footer-links a:hover { color: var(--blue-700); transform: translateX(2px); }
.footer-links a:hover::after { width: 100%; }
.footer-bottom { position: relative; border-top: 1px solid rgba(29,94,222,.06); padding-top: 28px; text-align: center; }
.footer-bottom p { font-size: .78rem; color: var(--gray-400); letter-spacing: .01em; }
.last-updated { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--gray-400); margin-top: 14px; }
.last-updated::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-400); animation: pulse 2s infinite; }

/* ================================================================
   PROGRESS BAR — Enhanced shimmer
   ================================================================ */
.progress-bar {
    position: fixed; top: 0; left: 0; height: 2.5px; z-index: 1100;
    background: linear-gradient(90deg, var(--blue-400), var(--blue-500), var(--violet-500), var(--cyan-500), var(--blue-400));
    background-size: 400% 100%;
    animation: shimmer 4s linear infinite;
    width: 0%; transition: width .08s linear; will-change: width;
    box-shadow: 0 0 12px rgba(29,94,222,.35), 0 0 4px rgba(29,94,222,.2);
}
.progress-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4));
    border-radius: 0 2px 2px 0;
}
@keyframes shimmer { 0% { background-position: 400% 0; } 100% { background-position: -400% 0; } }

/* ================================================================
   DARK MODE TOGGLE — Enhanced
   ================================================================ */
.dark-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--r-sm);
    background: none; border: 1px solid rgba(29,94,222,.1);
    cursor: pointer; color: var(--blue-500); margin-left: 4px;
    transition: all .3s var(--ease-out);
}
.dark-toggle svg { width: 18px; height: 18px; transition: transform .4s var(--ease-spring); }
.dark-toggle:hover {
    background: rgba(29,94,222,.05); border-color: rgba(29,94,222,.2);
    transform: scale(1.05);
}
.dark-toggle:hover svg { transform: rotate(20deg); }
.dark-toggle .icon-moon { display: none; }
body.dark .dark-toggle .icon-sun { display: none; }
body.dark .dark-toggle .icon-moon { display: inline; }

/* ================================================================
   BACK TO TOP — Enhanced with ring animation
   ================================================================ */
.back-to-top {
    position: fixed; bottom: 32px; right: 32px;
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
    color: var(--white); border: none; cursor: pointer;
    opacity: 0; transform: translateY(16px) scale(.9);
    transition: all .4s var(--ease-expo);
    box-shadow: 0 4px 16px rgba(29,94,222,.3), 0 0 0 1px rgba(29,94,222,.1);
    z-index: 999; display: flex; align-items: center; justify-content: center;
}
.back-to-top svg { width: 20px; height: 20px; transition: transform .3s var(--ease-spring); }
.back-to-top.visible { opacity: 1; transform: translateY(0) scale(1); }
.back-to-top:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 32px rgba(29,94,222,.4), 0 0 0 1px rgba(29,94,222,.15);
}
.back-to-top:hover svg { transform: translateY(-2px); }
.back-to-top:active { transform: translateY(0) scale(.95); }

/* ================================================================
   DARK MODE — Refined color scheme
   ================================================================ */
body.dark {
    --white: #0c1222; --gray-50: #111827; --gray-100: #172033;
    --gray-200: #1e2a42; --gray-300: #2a3a58; --gray-400: #4a5c7a;
    --gray-500: #6b7fa0; --gray-600: #94a3be; --gray-700: #bac5d8;
    --gray-800: #dce3f0; --gray-900: #f0f3f8;
    --blue-50: #0a1328; --blue-100: #0f1d3a; --blue-200: #172e5c;
    --blue-950: #e5ecf4;
}
body.dark { background: linear-gradient(180deg, #0a1228 0%, #0c1222 200px); color: #dce3f0; }
body.dark::before { opacity: .025; mix-blend-mode: soft-light; }
body.dark .navbar { background: rgba(12,18,34,.7); }
body.dark .navbar.scrolled {
    background: rgba(12,18,34,.92);
    border-bottom-color: rgba(23,46,92,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 4px 20px rgba(0,0,0,.2), 0 0 0 1px rgba(23,46,92,.2);
}
body.dark .hero, body.dark .page-hero { background: linear-gradient(172deg, #0a1228 0%, #0d162c 30%, #0c1222 60%, #111827 100%); }
body.dark .hero::before, body.dark .page-hero::before {
    background-image:
        linear-gradient(rgba(90,147,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90,147,255,.03) 1px, transparent 1px);
    background-size: 64px 64px;
}
body.dark .hero::after, body.dark .page-hero::after {
    opacity: .12;
    background:
        radial-gradient(ellipse 55% 45% at 15% 25%, rgba(90,147,255,.25), transparent 70%),
        radial-gradient(ellipse 40% 55% at 85% 55%, rgba(139,92,246,.2), transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 85%, rgba(6,182,212,.15), transparent 70%),
        radial-gradient(ellipse 30% 30% at 70% 20%, rgba(99,102,241,.15), transparent 70%);
}
body.dark .data-table thead { background: linear-gradient(135deg, #13244a 0%, #0f1d3a 40%, #16103c 100%); }
body.dark .data-table td { border-bottom-color: rgba(23,46,92,.15); }
body.dark .data-table tbody tr:nth-child(even) { background: rgba(10,18,40,.25); }
body.dark .data-table tbody tr:hover { background: linear-gradient(90deg, rgba(90,147,255,.07), rgba(90,147,255,.02), transparent); }
body.dark .data-table tbody tr:hover td:first-child { color: #5a93ff; }
body.dark .data-table tbody tr:hover td:first-child::before { background: linear-gradient(180deg, #5a93ff, #3574f0); }
body.dark .data-table tbody tr:hover td { color: #94a3be; }
body.dark .table-wrapper { border-color: rgba(30,42,66,.6); background: #111827; box-shadow: 0 2px 16px rgba(0,0,0,.15); }
body.dark .paper-arxiv-link { border-color: rgba(179,60,60,.2); background: linear-gradient(180deg, #1a1520, #18121a); }
body.dark .paper-arxiv-link:hover { border-color: #b65f5f; background: #25131a; }
body.dark .paper-count-badge { background: linear-gradient(135deg, rgba(90,147,255,.1), rgba(90,147,255,.04)); border-color: rgba(90,147,255,.15); color: #5a93ff; }
body.dark .taxonomy-card, body.dark .crossmodal-card, body.dark .metric-card,
body.dark .domain-card, body.dark .spotlight-card {
    background: linear-gradient(170deg, rgba(17,24,39,.95), #111827);
    border-color: rgba(30,42,66,.5);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
body.dark .taxonomy-card::before, body.dark .crossmodal-card::before { opacity: .2; }
body.dark .domain-card::before { opacity: .3; }
body.dark .domain-card::after { opacity: 0; }
body.dark .domain-card:hover::after { opacity: .04; }
body.dark .theory-card { background: linear-gradient(145deg, #0c1530, #121929); border-color: #1a3366; }
body.dark .search-input { background: #121929; border-color: #222c45; color: #e2e8f0; }
body.dark .search-input:focus { box-shadow: var(--shadow-md), 0 0 0 4px rgba(90,147,255,.08); }
body.dark .dark-toggle { border-color: #304060; color: #7d8da8; }
body.dark .footer {
    background: linear-gradient(180deg, #0a1228, #080f1e, #070c1a);
    border-top-color: rgba(23,46,92,.2);
    color: #6b7fa0;
}
body.dark .footer::before {
    background-image:
        linear-gradient(rgba(90,147,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90,147,255,.015) 1px, transparent 1px);
    background-size: 40px 40px;
}
body.dark .footer::after { background: linear-gradient(90deg, transparent 5%, rgba(90,147,255,.15) 30%, rgba(139,92,246,.12) 50%, rgba(90,147,255,.15) 70%, transparent 95%); }
body.dark .footer-brand h3 { color: #e2e8f0; }
body.dark .footer-brand h3 svg { color: #5a93ff; }
body.dark .footer-brand p { color: #7d8da8; }
body.dark .footer-links h4 { color: rgba(255,255,255,.8); }
body.dark .footer-links a { color: #516080; }
body.dark .footer-links a:hover { color: #8ab4ff; }
body.dark .footer-bottom { border-top-color: #1a3366; }
body.dark .footer-bottom p { color: #516080; }
body.dark .last-updated { color: #516080; }
body.dark .last-updated::before { background: #5a93ff; }
body.dark .back-to-top { background: linear-gradient(135deg, #1a3366, #152852); }
body.dark .section-intro { background: #0c1530; border-left-color: #1a3366; }
body.dark .subsection-title { background: linear-gradient(90deg, rgba(12,21,48,.6), rgba(12,21,48,.15) 60%, transparent); border-left-color: #1a3366; color: #c8d2e2; }
body.dark .subsection-title:hover { border-left-color: #5a93ff; background: linear-gradient(90deg, rgba(12,21,48,.8), rgba(12,21,48,.2) 60%, transparent); }
body.dark #arena-table .data-table tbody tr:nth-child(-n+3) { background: linear-gradient(90deg, rgba(234,179,8,.06), transparent 60%); }
body.dark .spotlight-elo { background: linear-gradient(135deg, #11203e, #1a3366); border-color: #1a3366; }
body.dark .sidebar {
    background: rgba(12,18,34,.97);
    border-right-color: rgba(23,46,92,.3);
    box-shadow: 4px 0 32px rgba(0,0,0,.2);
}
body.dark .sidebar-header {
    border-bottom-color: rgba(23,46,92,.3);
    background: linear-gradient(180deg, rgba(10,18,40,.5), rgba(12,18,34,.2));
}
body.dark .sidebar-close { border-color: #304060; color: #516080; }
body.dark .sidebar-close:hover { background: #182035; color: #7d8da8; }
body.dark .sidebar-collapse-btn { border-color: #304060; color: #516080; }
body.dark .sidebar-collapse-btn:hover { background: #182035; color: #5a93ff; border-color: #5a93ff; }
body.dark .sidebar-link:hover { background: rgba(90,147,255,.06); border-left-color: #1a3366; }
body.dark .sidebar-link.active { background: rgba(90,147,255,.08); color: #5a93ff; border-left-color: #5a93ff; }
body.dark .sidebar-divider { background: linear-gradient(90deg, #1a3366, transparent); }
body.dark .sidebar-toc-title { color: #5a93ff; }
body.dark .sidebar-toc-title::before { background: linear-gradient(90deg, #5a93ff, transparent); }
body.dark .sidebar-toc-list::before { background: #222c45; }
body.dark .sidebar-toc-link::before { background: #304060; }
body.dark .sidebar-toc-link:hover { color: #5a93ff; background: rgba(90,147,255,.04); }
body.dark .sidebar-toc-link:hover::before { background: #5a93ff; }
body.dark .sidebar-toc-link.active { color: #5a93ff; background: rgba(90,147,255,.06); }
body.dark .sidebar-toc-link.active::before { background: #5a93ff; box-shadow: 0 0 0 3px rgba(90,147,255,.15); }
body.dark .sidebar-toggle { background: rgba(14,21,37,.9); border-color: #304060; color: #7d8da8; }
body.dark .sidebar-toggle:hover { background: #0c1530; color: #5a93ff; }
body.dark .sidebar-backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
/* dark mode paper-arxiv-link handled above in table dark overrides */
body.dark .stats-banner-item { background: linear-gradient(145deg, #0c1530, rgba(12,21,48,.4)); border-color: #1a3366; }
body.dark .domain-card-icon { background: linear-gradient(135deg, rgba(90,147,255,.1), rgba(90,147,255,.04)); color: #5a93ff; }
body.dark .domain-card:hover .domain-card-icon { background: linear-gradient(135deg, rgba(90,147,255,.15), rgba(90,147,255,.06)); }
body.dark .sidebar-link .link-icon { color: #516080; }
body.dark .sidebar-link:hover .link-icon { color: #5a93ff; }
body.dark .sidebar-link.active .link-icon { color: #5a93ff; }
body.dark .spotlight-rank { background: linear-gradient(135deg, #11203e, #0c1530); color: #5a93ff; border-color: #1a3366; }
body.dark .spotlight-rank.rank-1 { background: linear-gradient(135deg, #422006, #78350f); color: #fbbf24; border-color: #92400e; }
body.dark .spotlight-rank.rank-2 { background: linear-gradient(135deg, #1e293b, #334155); color: #94a3b8; border-color: #475569; }
body.dark .spotlight-rank.rank-3 { background: linear-gradient(135deg, #7c2d12, #9a3412); color: #fdba74; border-color: #c2410c; }
body.dark .domain-card-arrow { background: #11203e; }
body.dark .domain-card:hover .domain-card-arrow { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); }
body.dark .domain-card:hover {
    border-color: rgba(90,147,255,.15);
    box-shadow: 0 0 0 1px rgba(90,147,255,.08), 0 20px 40px -8px rgba(0,0,0,.3), 0 0 60px -20px rgba(90,147,255,.12);
}
body.dark .subpage-grid .domain-card { background: linear-gradient(170deg, rgba(17,24,39,.95), #111827); }
body.dark .spotlight-section { background: linear-gradient(180deg, #111827, #0c1222); }
body.dark .spotlight-section::before { opacity: .3; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(10,19,40,.8), transparent 70%); }
body.dark .btn-secondary { background: rgba(17,24,39,.85); border-color: rgba(42,58,88,.6); color: #8ab4ff; }
body.dark .btn-secondary:hover { background: #0a1328; border-color: rgba(90,147,255,.4); box-shadow: 0 0 20px rgba(90,147,255,.08); }
body.dark .breadcrumb { background: rgba(12,21,48,.5); border-color: rgba(26,51,102,.5); }
body.dark .new-badge { background: linear-gradient(135deg, #059669, #10b981); }
body.dark .year-badge.y2026 { background: linear-gradient(135deg, #422006, #78350f); color: #fbbf24; border-color: #92400e; box-shadow: 0 1px 4px rgba(251,191,36,.15); }
body.dark .year-badge.y2025 { background: linear-gradient(135deg, #0c1530, #11203e); color: #5a93ff; border-color: #1a3366; box-shadow: 0 1px 4px rgba(90,147,255,.1); }
body.dark .year-badge.y2024 { background: #182035; color: #7d8da8; border-color: #222c45; }
body.dark .year-badge.y2023 { background: rgba(24,32,53,.6); color: #516080; border-color: rgba(34,44,69,.6); }
body.dark .hero-badge { background: rgba(90,147,255,.08); border-color: rgba(90,147,255,.15); }

/* Dark mode: Featured Research */
body.dark .featured-research-section { background: linear-gradient(180deg, #0e1525, #121929); }
body.dark .featured-card { background: #121929; border-color: #222c45; }
body.dark .featured-card:hover { border-color: #1a3366; box-shadow: 0 16px 40px -8px rgba(0,0,0,.3); }
body.dark .featured-card-year { background: linear-gradient(135deg, #152852, #11203e); }
body.dark .featured-card h3 { color: #e2e8f0; }
body.dark .featured-card p { color: #7d8da8; }

/* Dark mode: News section */
body.dark .news-section { background: linear-gradient(180deg, #0e1525 0%, #121929 50%, #0e1525 100%); }
body.dark .news-card { background: #121929; border-color: #222c45; }
body.dark .news-card-featured { background: linear-gradient(170deg, #0c1530, #121929); border-color: #1a3366; }
body.dark .news-card-featured::before { opacity: .3; }
body.dark .news-card:hover { border-color: #1a3366; box-shadow: 0 16px 40px -8px rgba(0,0,0,.3); }
body.dark .news-card h3 { color: #e2e8f0; }
body.dark .news-card p { color: #7d8da8; }
body.dark .news-date { color: #516080; }
body.dark .news-link { color: #5a93ff; }
body.dark .news-link:hover { color: #8ab4ff; }
body.dark .news-type-paper { background: #0c1530; color: #5a93ff; border-color: #1a3366; }
body.dark .news-type-update { background: rgba(139,92,246,.1); color: #a78bfa; border-color: rgba(139,92,246,.2); }
body.dark .news-type-new { background: rgba(16,185,129,.1); color: #34d399; border-color: rgba(16,185,129,.2); }
body.dark .news-type-resource { background: rgba(245,158,11,.1); color: #fbbf24; border-color: rgba(245,158,11,.2); }

/* Dark mode: Features section */
body.dark .features-section { background: linear-gradient(180deg, #0e1525 0%, #0c1530 40%, #0c1530 60%, #0e1525 100%); }
body.dark .features-section::before { background-image: radial-gradient(circle at 1px 1px, rgba(90,147,255,.02) 1px, transparent 0); }
body.dark .feature-card { background: rgba(18,25,41,.8); border-color: #222c45; }
body.dark .feature-card:hover { border-color: #1a3366; box-shadow: 0 16px 40px -8px rgba(0,0,0,.3); }
body.dark .feature-card::after { background: linear-gradient(180deg, rgba(90,147,255,.03), transparent); }
body.dark .feature-icon { background: linear-gradient(135deg, rgba(90,147,255,.1), rgba(90,147,255,.04)); color: #5a93ff; }
body.dark .feature-card:hover .feature-icon { background: linear-gradient(135deg, rgba(90,147,255,.15), rgba(90,147,255,.06)); box-shadow: 0 4px 12px rgba(90,147,255,.1); }
body.dark .feature-card h3 { color: #e2e8f0; }
body.dark .feature-card p { color: #7d8da8; }

/* Dark mode: CTA section */
body.dark .cta-section { background: linear-gradient(170deg, #0c1530 0%, #0f1a2e 30%, #0c1530 70%, #0e1525 100%); }
body.dark .cta-section::before { background-image: radial-gradient(circle at 1px 1px, rgba(90,147,255,.03) 1px, transparent 0); }
body.dark .cta-content { background: rgba(18,25,41,.6); border-color: #1a3366; }
body.dark .cta-glow { background: radial-gradient(circle, rgba(90,147,255,.06), transparent 70%); }
body.dark .cta-text h2 { color: #e2e8f0; }
body.dark .cta-text p { color: #7d8da8; }
body.dark .cta-stat { background: linear-gradient(135deg, #0c1530, rgba(12,21,48,.4)); border-color: #1a3366; }
body.dark .cta-stat:hover { border-color: rgba(90,147,255,.2); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
body.dark .cta-stat-icon { background: linear-gradient(135deg, rgba(90,147,255,.1), rgba(90,147,255,.04)); color: #5a93ff; }
body.dark .cta-stat-number { color: #5a93ff; }
body.dark .cta-stat-label { color: #516080; }

/* ================================================================
   NEWS SECTION — ScalingOpt-inspired Latest News Cards
   ================================================================ */
.news-section {
    background: linear-gradient(180deg, var(--white) 0%, #f6f9ff 50%, var(--white) 100%);
}
.news-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
.news-card {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(29,94,222,.05);
    border-radius: var(--r-xl);
    padding: 30px 28px;
    transition: all .45s var(--ease-expo);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(29,94,222,.02);
}
.news-card::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; right: 50%;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-400), var(--violet-500));
    opacity: 0;
    transition: all .5s var(--ease-expo);
    border-radius: 0 0 3px 3px;
}
.news-card:hover {
    border-color: rgba(29,94,222,.12);
    box-shadow: 0 20px 50px -12px rgba(29,94,222,.12), 0 0 0 1px rgba(29,94,222,.05);
    transform: translateY(-6px);
}
.news-card:hover::before { opacity: 1; left: 0; right: 0; }
.news-card-featured {
    grid-row: 1 / 3;
    background: linear-gradient(170deg, rgba(238,244,255,.6), var(--white));
    border-color: rgba(29,94,222,.1);
    position: relative;
}
.news-card-featured::before { opacity: .5; left: 0; right: 0; }
/* Featured card left accent border */
.news-card-featured::after {
    content: '';
    position: absolute;
    top: 20%; bottom: 20%; left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--blue-400), var(--violet-500));
    border-radius: 0 3px 3px 0;
    opacity: .4;
    transition: opacity .4s, top .4s var(--ease-expo), bottom .4s var(--ease-expo);
}
.news-card-featured:hover::after {
    opacity: 1;
    top: 8%;
    bottom: 8%;
}
.news-card-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.news-type {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: .62rem;
    font-weight: 720;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: var(--r-full);
    border: 1px solid transparent;
}
.news-type-paper { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.news-type-update { background: var(--violet-50); color: var(--violet-600); border-color: #ddd6fe; }
.news-type-new { background: var(--emerald-50); color: var(--emerald-600); border-color: #bbf7d0; }
.news-type-resource { background: var(--amber-50); color: var(--amber-600); border-color: #fed7aa; }
.news-date {
    font-size: .68rem;
    font-weight: 580;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
}
.news-card h3 {
    font-size: 1rem;
    font-weight: 720;
    color: var(--blue-900);
    margin-bottom: 10px;
    letter-spacing: -.01em;
    line-height: 1.4;
}
.news-card-featured h3 { font-size: 1.15rem; }
.news-card p {
    font-size: .84rem;
    color: var(--gray-500);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 16px;
}
.news-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 620;
    color: var(--blue-600);
    transition: all .3s var(--ease-out);
    padding: 4px 0;
    position: relative;
}
.news-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
    transition: width .3s var(--ease-out);
    border-radius: 1px;
}
.news-link:hover {
    color: var(--blue-800);
    gap: 10px;
}
.news-link:hover::after { width: calc(100% - 20px); }

/* ================================================================
   FEATURED RESEARCH — Breakthrough Papers Grid
   ================================================================ */
.featured-research-section {
    background: linear-gradient(180deg, var(--white) 0%, #f8faff 100%);
}
.featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
.featured-card {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(29,94,222,.05);
    border-radius: var(--r-xl);
    overflow: hidden;
    transition: all .45s var(--ease-expo);
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(29,94,222,.02);
}
.featured-card::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; right: 50%;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-400), var(--violet-500), var(--cyan-500));
    opacity: 0;
    transition: all .5s var(--ease-expo);
    z-index: 2;
}
.featured-card:hover {
    border-color: rgba(29,94,222,.1);
    box-shadow: 0 20px 48px -12px rgba(29,94,222,.12), 0 0 0 1px rgba(29,94,222,.04);
    transform: translateY(-6px);
}
.featured-card:hover::before { opacity: 1; left: 0; right: 0; }
.featured-card-year {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700), #4338ca);
    background-size: 200% 100%;
    color: var(--white);
    font-size: .72rem;
    font-weight: 720;
    font-family: var(--font-mono);
    letter-spacing: .06em;
    transition: background-position .5s var(--ease-out);
    position: relative;
}
.featured-card-year::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    background-size: 200% 100%;
    animation: shimmerSlide 4s ease-in-out infinite;
}
.featured-card:hover .featured-card-year { background-position: 100% 0; }
.featured-card-body {
    padding: 22px 24px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.featured-card-pillar {
    width: fit-content;
    margin-bottom: 12px;
}
.featured-card h3 {
    font-size: 1.1rem;
    font-weight: 760;
    color: var(--blue-900);
    margin-bottom: 8px;
    letter-spacing: -.01em;
}
.featured-card p {
    font-size: .84rem;
    color: var(--gray-500);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 14px;
}

/* ================================================================
   FEATURES SECTION — Why Choose OpenMM-Arena
   ================================================================ */
.features-section {
    background: linear-gradient(180deg, var(--white) 0%, #f4f8ff 40%, #f0f4ff 60%, var(--white) 100%);
    position: relative;
}
.features-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(29,94,222,.02) 1px, transparent 0);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}
.feature-card {
    position: relative;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(29,94,222,.05);
    border-radius: var(--r-xl);
    padding: 38px 32px 34px;
    transition: all .45s var(--ease-expo);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(29,94,222,.02);
    counter-increment: feature-counter;
}
.feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; right: 50%;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-400), var(--violet-500));
    opacity: 0;
    transition: all .5s var(--ease-expo);
    border-radius: 0 0 3px 3px;
}
.feature-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(29,94,222,.03), transparent);
    opacity: 0;
    transition: opacity .4s var(--ease-out);
    pointer-events: none;
}
.feature-card:hover {
    border-color: rgba(29,94,222,.1);
    box-shadow: 0 20px 48px -12px rgba(29,94,222,.1), 0 0 0 1px rgba(29,94,222,.05);
    transform: translateY(-7px);
}
.feature-card:hover::before { opacity: 1; left: 0; right: 0; }
.feature-card:hover::after { opacity: 1; }
.features-grid { counter-reset: feature-counter; }
.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(29,94,222,.08), rgba(29,94,222,.03));
    color: var(--blue-600);
    margin-bottom: 20px;
    transition: all .4s var(--ease-spring);
    position: relative;
}
.feature-icon svg { width: 26px; height: 26px; }
/* Feature number indicator */
.feature-icon::after {
    content: counter(feature-counter, decimal-leading-zero);
    position: absolute;
    top: -6px; right: -6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: white;
    font-size: .52rem;
    font-weight: 800;
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.6);
    transition: all .4s var(--ease-spring);
    box-shadow: 0 2px 8px rgba(29,94,222,.3);
    letter-spacing: 0;
}
.feature-card:hover .feature-icon::after {
    opacity: 1;
    transform: scale(1);
}
.feature-card:hover .feature-icon {
    transform: scale(1.1) translateY(-2px);
    background: linear-gradient(135deg, rgba(29,94,222,.12), rgba(29,94,222,.06));
    box-shadow: 0 4px 12px rgba(29,94,222,.12);
}
.feature-card h3 {
    font-size: 1.06rem;
    font-weight: 740;
    color: var(--blue-900);
    margin-bottom: 10px;
    letter-spacing: -.01em;
}
.feature-card p {
    font-size: .85rem;
    color: var(--gray-500);
    line-height: 1.72;
}

/* ================================================================
   CTA SECTION — Community Call-to-Action
   ================================================================ */
.cta-section {
    padding: 100px 0;
    background: linear-gradient(170deg, #edf3ff 0%, #e8f0ff 25%, #f4f8ff 60%, var(--white) 100%);
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(29,94,222,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,94,222,.02) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 10%, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 10%, transparent 65%);
}
.cta-content {
    position: relative;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 56px;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(29,94,222,.08);
    border-radius: var(--r-2xl);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(29,94,222,.04), 0 0 0 1px rgba(29,94,222,.02);
    transition: all .5s var(--ease-expo);
}
.cta-content:hover {
    border-color: rgba(29,94,222,.14);
    box-shadow: 0 24px 64px -16px rgba(29,94,222,.1), 0 0 0 1px rgba(29,94,222,.06);
}
.cta-glow {
    position: absolute;
    top: -80px; right: -80px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(29,94,222,.08), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: drift 20s infinite ease-in-out;
}
.cta-text .section-tag { margin-bottom: 18px; }
.cta-text h2 {
    font-size: 2rem;
    font-weight: 840;
    color: var(--blue-950);
    margin-bottom: 16px;
    letter-spacing: -.03em;
    line-height: 1.2;
}
.cta-text p {
    font-size: .95rem;
    color: var(--gray-500);
    line-height: 1.8;
    margin-bottom: 28px;
}
.cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.cta-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cta-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(238,244,255,.6), rgba(248,250,255,.8));
    border: 1px solid rgba(29,94,222,.06);
    border-radius: var(--r-lg);
    transition: all .4s var(--ease-expo);
    position: relative;
    overflow: hidden;
}
.cta-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--blue-400), var(--violet-500));
    opacity: 0;
    transition: opacity .3s;
    border-radius: 0 3px 3px 0;
}
.cta-stat:hover {
    transform: translateX(4px);
    border-color: rgba(29,94,222,.12);
    box-shadow: 0 4px 16px rgba(29,94,222,.06);
}
.cta-stat:hover::before { opacity: 1; }
.cta-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(29,94,222,.08), rgba(29,94,222,.03));
    color: var(--blue-600);
    flex-shrink: 0;
}
.cta-stat-icon svg { width: 22px; height: 22px; }
.cta-stat-number {
    font-size: 1.5rem;
    font-weight: 850;
    color: var(--blue-700);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
    line-height: 1;
}
.cta-stat-label {
    font-size: .72rem;
    color: var(--gray-500);
    font-weight: 540;
    margin-top: 2px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1260px) {
    .nav-links a { padding: 6px 8px; font-size: .78rem; }
    .nav-container { padding: 0 20px; }
    .nav-github { padding: 6px 10px !important; font-size: .78rem !important; }
}
@media (max-width: 1100px) {
    .nav-links a { padding: 5px 6px; font-size: .74rem; }
    .nav-container { padding: 0 16px; }
    .nav-logo { font-size: .95rem; gap: 6px; }
    .logo-icon img { width: 28px; height: 28px; }
    .nav-github { padding: 5px 8px !important; font-size: .74rem !important; }
    .dark-toggle { width: 32px; height: 32px; }
    .dark-toggle svg { width: 16px; height: 16px; }
}
@media (max-width: 1024px) {
    .domain-grid { grid-template-columns: repeat(2, 1fr); }
    .spotlight-grid { grid-template-columns: repeat(3, 1fr); }
    .metrics-grid { grid-template-columns: repeat(3,1fr); }
    .stats-banner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .footer-content { grid-template-columns: 1fr 1fr; }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .news-card-featured { grid-row: auto; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-content { grid-template-columns: 1fr; gap: 36px; padding: 40px 36px; }
    .cta-stats { flex-direction: row; gap: 14px; }
    /* Sidebar overlay on tablet/mobile */
    .sidebar { transform: translateX(calc(var(--sidebar-width) * -1)); box-shadow: var(--shadow-xl); width: var(--sidebar-width) !important; }
    .sidebar.open { transform: translateX(0); }
    .sidebar.collapsed { transform: translateX(calc(var(--sidebar-width) * -1)); }
    .sidebar.desktop-collapsed { width: var(--sidebar-width) !important; }
    .page-main { margin-left: 0 !important; }
    .sidebar-toggle.visible { display: flex; }
}
@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .nav-links {
        position: fixed; top: var(--nav-height); left: 0; right: 0;
        background: rgba(255,255,255,.97); backdrop-filter: blur(28px) saturate(1.8);
        -webkit-backdrop-filter: blur(28px) saturate(1.8);
        flex-direction: column; padding: 16px 24px;
        border-bottom: 1px solid rgba(29,94,222,.06); box-shadow: var(--shadow-xl);
        transform: translateY(-110%); opacity: 0;
        transition: all .4s var(--ease-expo); pointer-events: none;
    }
    .nav-links.active { transform: translateY(0); opacity: 1; pointer-events: all; }
    body.dark .nav-links { background: rgba(12,18,34,.97); }
    .hero-title, .page-layout .hero .hero-title { font-size: 2.6rem; }
    .page-hero-title { font-size: 2rem; }
    .hero-stats { gap: 10px; flex-wrap: wrap; justify-content: center; }
    .stat { padding: 14px 18px; min-width: 100px; }
    .stat-number { font-size: 1.5rem; -webkit-text-fill-color: var(--blue-700); background: none; }
    .hero-actions { flex-direction: column; align-items: center; gap: 12px; }
    .btn { width: 100%; justify-content: center; }
    .domain-grid, .crossmodal-grid, .theory-grid { grid-template-columns: 1fr; }
    .spotlight-grid { grid-template-columns: repeat(2, 1fr); }
    .metrics-grid { grid-template-columns: repeat(2,1fr); }
    .stats-banner { grid-template-columns: 1fr 1fr; }
    .footer-content { grid-template-columns: 1fr; gap: 32px; }
    .news-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .featured-grid { grid-template-columns: 1fr; }
    .cta-stats { flex-direction: column; }
    .cta-content { padding: 32px 24px; }
    .arena-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
    .arena-tabs::-webkit-scrollbar { display: none; }
    .arena-tab { white-space: nowrap; flex-shrink: 0; padding: 8px 14px; font-size: .78rem; }
    .arena-frame-container iframe { height: 500px !important; }
    .section { padding: 64px 0; }
    .section-title { font-size: 1.7rem; }
    .section-intro { padding: 22px 24px; font-size: .88rem; }
    .container { padding: 0 20px; }
    .subpage-hero .page-hero-title { font-size: 1.7rem; }
    .subpage-hero { padding: 80px 0 30px; }
    .page-layout .hero { min-height: auto; padding-top: 40px; padding-bottom: 40px; }
    .page-layout > main > .page-hero:not(.subpage-hero) { padding: 80px 0 36px; }
    /* Reduce motion on mobile for performance */
    .hero-orb { animation-duration: 40s; filter: blur(140px); }
    .domain-card:hover, .feature-card:hover, .news-card:hover, .featured-card:hover { transform: translateY(-4px); }
    .domain-card:hover::before, .feature-card:hover::before, .news-card:hover::before { left: 0; right: 0; }
    .feature-icon::after { display: none; }
}
@media (max-width: 480px) {
    .hero-title { font-size: 2.1rem; }
    .hero-subtitle { font-size: 1rem; }
    .spotlight-grid { grid-template-columns: 1fr; }
    .stats-banner { grid-template-columns: 1fr; }
    .page-hero-title { font-size: 1.7rem; }
}
/* Desktop sidebar behavior (>1024px) */
@media (min-width: 1025px) {
    .sidebar {
        transform: translateX(0) !important;
    }
    .sidebar-toggle.visible {
        display: none !important;
    }
    .sidebar-close {
        display: none;
    }
    .sidebar-collapse-btn {
        display: flex;
    }
}
@media (max-width: 1024px) {
    .sidebar-collapse-btn { display: none !important; }
}

/* ================================================================
   GLOBAL SIDEBAR — Index & Hub Page Enhancements
   ================================================================ */

/* Sidebar branded title (for index page) */
.sidebar-title {
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--gray-100);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(238,244,255,.4), transparent);
}
.sidebar-title h3 {
    font-size: .95rem;
    font-weight: 780;
    color: var(--blue-900);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -.015em;
}
.sidebar-title .sidebar-subtitle {
    font-size: .68rem;
    color: var(--gray-400);
    margin-top: 6px;
    font-weight: 520;
    letter-spacing: .03em;
}

/* Sidebar link icon */
.sidebar-link .link-icon {
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--blue-400);
    transition: color .2s;
}
.sidebar-link .link-icon svg { width: 18px; height: 18px; }
.sidebar-link:hover .link-icon { color: var(--blue-600); }
.sidebar-link.active .link-icon { color: var(--blue-600); }

/* Sidebar section label */
.sidebar-section-label {
    padding: 18px 20px 8px;
    font-size: .58rem;
    font-weight: 740;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: .12em;
    display: flex; align-items: center; gap: 8px;
}
.sidebar-section-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--gray-200), transparent);
    margin-right: 16px;
}
.sidebar-header + .sidebar-section-label,
.sidebar-title + .sidebar-section-label {
    padding-top: 14px;
}

/* Sidebar count badge */
.sidebar-link .link-count {
    font-size: .56rem;
    font-weight: 660;
    margin-left: auto;
    flex-shrink: 0;
    background: var(--blue-50);
    padding: 2px 8px;
    border-radius: var(--r-full);
    border: 1px solid var(--blue-100);
    color: var(--blue-500);
    line-height: 1.4;
    transition: all .2s;
}
.sidebar-link:hover .link-count {
    background: var(--blue-100);
    border-color: var(--blue-200);
    color: var(--blue-700);
}

/* Hero inside page-layout for hub pages */
.page-layout > main > .page-hero:not(.subpage-hero) {
    padding: 88px 0 52px;
}
/* Hero inside page-layout for index page */
.page-layout .hero {
    min-height: calc(100vh - var(--nav-height));
    padding-top: 56px;
    padding-bottom: 50px;
}
.page-layout .hero .hero-title {
    font-size: 3.5rem;
}
.page-layout .hero .hero-description {
    max-width: 580px;
}

/* Hub page subpage-grid within page-main */
.page-main .subpage-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* Spotlight grid within page-main */
.page-main .spotlight-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
/* Domain grid within page-main */
.page-main .domain-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Dark mode for new sidebar elements */
body.dark .sidebar-title { background: linear-gradient(180deg, rgba(12,21,48,.4), transparent); }
body.dark .sidebar-title h3 { color: #e2e8f0; }
body.dark .sidebar-title .sidebar-subtitle { color: #516080; }
body.dark .sidebar-section-label { color: #516080; }
body.dark .sidebar-section-label::after { background: linear-gradient(90deg, #222c45, transparent); }
body.dark .sidebar-link.active::after { background: #5a93ff; }
body.dark .sidebar-link .link-count { background: #0c1530; border-color: #1a3366; color: #5a93ff; }
body.dark .sidebar-link:hover .link-count { background: #11203e; border-color: #1a3366; }

/* ================================================================
   COPY CITATION BUTTON
   ================================================================ */
.copy-cite-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-left: 4px;
    border-radius: 4px; border: 1px solid var(--gray-200);
    background: var(--white); color: var(--gray-400);
    font-size: .65rem; cursor: pointer;
    transition: all .2s var(--ease-out);
    vertical-align: text-bottom;
}
.copy-cite-btn:hover { border-color: var(--blue-300); color: var(--blue-500); background: var(--blue-50); }
.copy-cite-btn.copied { border-color: var(--emerald-500); color: var(--emerald-500); background: var(--emerald-50); }
body.dark .copy-cite-btn { border-color: #304060; background: #121929; color: #516080; }
body.dark .copy-cite-btn:hover { border-color: #5a93ff; color: #5a93ff; background: #0c1530; }

/* ================================================================
   TABLE FILTER TABS
   ================================================================ */
.table-filters {
    display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap;
}
.table-filter-btn {
    padding: 5px 14px; font-size: .72rem; font-weight: 620;
    border: 1px solid var(--gray-200); border-radius: var(--r-full);
    background: var(--white); color: var(--gray-500);
    cursor: pointer; transition: all .2s var(--ease-out);
}
.table-filter-btn:hover { border-color: var(--blue-300); color: var(--blue-600); background: var(--blue-50); }
.table-filter-btn.active { border-color: var(--blue-400); color: var(--white); background: linear-gradient(135deg, var(--blue-600), var(--blue-700)); box-shadow: 0 2px 8px rgba(29,94,222,.2); }
.table-filter-btn.filter-2026 { border-color: #fbbf24; color: #92400e; background: linear-gradient(135deg, #fef3c7, #fde68a); }
.table-filter-btn.filter-2026.active { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; border-color: #d97706; }
.table-filter-btn.filter-2025 { border-color: #60a5fa; color: #1e40af; background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.table-filter-btn.filter-2025.active { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); color: white; border-color: var(--blue-500); }
body.dark .table-filter-btn { border-color: #304060; background: #121929; color: #7d8da8; }
body.dark .table-filter-btn:hover { border-color: #5a93ff; color: #5a93ff; background: #0c1530; }
body.dark .table-filter-btn.active { border-color: #5a93ff; background: #1a3366; color: #e2e8f0; }
body.dark .table-filter-btn.filter-2026 { border-color: #92400e; color: #fbbf24; background: #422006; }
body.dark .table-filter-btn.filter-2026.active { background: linear-gradient(135deg, #b45309, #d97706); color: white; border-color: #d97706; }
body.dark .table-filter-btn.filter-2025 { border-color: #1a3366; color: #5a93ff; background: #0c1530; }
body.dark .table-filter-btn.filter-2025.active { background: linear-gradient(135deg, #1a3366, #2563eb); color: white; }

/* ================================================================
   ARENA TABS & FRAMES — Live embedded arena switching
   ================================================================ */
.arena-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    padding: 4px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-lg);
    width: fit-content;
}
.arena-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: .88rem;
    font-weight: 640;
    font-family: var(--font-sans);
    color: var(--gray-500);
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all .25s var(--ease-out);
}
.arena-tab svg { flex-shrink: 0; }
.arena-tab:hover {
    color: var(--blue-600);
    background: rgba(29,94,222,.04);
}
.arena-tab.active {
    color: var(--blue-700);
    background: var(--white);
    border-color: rgba(29,94,222,.1);
    box-shadow: var(--shadow-sm);
    font-weight: 700;
}
.arena-frame-container {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid rgba(29,94,222,.08);
    background: var(--white);
    box-shadow: var(--shadow-lg);
}
.arena-frame {
    display: none;
}
.arena-frame.active {
    display: block;
}

/* Elo score styling */
.elo { font-family: var(--font-mono); font-weight: 700; color: var(--blue-700); }
.elo-ci { font-size: .7rem; color: var(--gray-400); margin-left: 1px; }
.prelim-badge { display: inline-block; font-size: .52rem; padding: 1px 5px; background: var(--amber-50); color: var(--amber-600); border-radius: var(--r-full); font-weight: 650; margin-left: 4px; vertical-align: middle; letter-spacing: .04em; text-transform: uppercase; border: 1px solid rgba(245,158,11,.15); }
.arena-source { text-align: center; margin-top: 14px; padding: 10px; font-size: .75rem; color: var(--gray-400); }
.arena-source a { color: var(--blue-500); font-weight: 600; }
.lb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.lb-meta { font-size: .76rem; color: var(--gray-400); font-family: var(--font-mono); font-weight: 500; }
.arena-tab-sep { width: 1px; height: 24px; background: var(--gray-200); align-self: center; flex-shrink: 0; margin: 0 4px; }
.arena-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; background: rgba(29,94,222,.08); color: var(--blue-600); font-size: .6rem; font-weight: 700; border-radius: var(--r-full); margin-left: 6px; font-family: var(--font-mono); }

/* Dark mode: Arena components */
body.dark .arena-tabs { background: #121929; border-color: #222c45; }
body.dark .arena-tab { color: #7d8da8; }
body.dark .arena-tab:hover { color: #5a93ff; background: rgba(90,147,255,.06); }
body.dark .arena-tab.active { color: #5a93ff; background: #0e1525; border-color: #1a3366; }
body.dark .arena-frame-container { border-color: #222c45; background: #121929; }
body.dark .elo { color: #5a93ff; }
body.dark .elo-ci { color: #516080; }
body.dark .prelim-badge { background: rgba(245,158,11,.1); color: #fbbf24; border-color: rgba(245,158,11,.2); }
body.dark .arena-source { color: #516080; }
body.dark .arena-source a { color: #5a93ff; }
body.dark .lb-meta { color: #516080; }
body.dark .arena-tab-sep { background: #222c45; }
body.dark .arena-tab-count { background: rgba(90,147,255,.1); color: #5a93ff; }

/* ================================================================
   ANIMATED GRADIENT BORDER SYSTEM — Linear/Vercel Signature Effect
   ================================================================ */
@keyframes borderRotate { 0% { --border-angle: 0deg; } 100% { --border-angle: 360deg; } }
@keyframes shimmerSlide { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 20px rgba(29,94,222,.08); } 50% { box-shadow: 0 0 40px rgba(29,94,222,.16); } }
@keyframes subtleBreathe { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes rainbowBorder {
    0% { border-color: rgba(53,116,240,.2); }
    25% { border-color: rgba(139,92,246,.2); }
    50% { border-color: rgba(6,182,212,.2); }
    75% { border-color: rgba(16,185,129,.2); }
    100% { border-color: rgba(53,116,240,.2); }
}

/* Gradient Section Divider */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(29,94,222,.08) 20%, rgba(139,92,246,.12) 50%, rgba(6,182,212,.08) 80%, transparent 95%);
    margin: 0;
    border: none;
    position: relative;
}
.section-divider::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-400), var(--violet-500));
    opacity: .25;
    filter: blur(3px);
}
body.dark .section-divider {
    background: linear-gradient(90deg, transparent 5%, rgba(90,147,255,.1) 20%, rgba(139,92,246,.08) 50%, rgba(6,182,212,.1) 80%, transparent 95%);
}

/* ── Polish ── */
::selection { background: rgba(29,94,222,.12); color: var(--blue-900); }
body.dark ::selection { background: rgba(90,147,255,.2); color: #e5ecf4; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(29,94,222,.15);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(29,94,222,.25); background-clip: padding-box; }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(29,94,222,.1); border-radius: 2px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(29,94,222,.2); }

/* Fade-in on scroll — smoother with expo easing */
.fade-in { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-smooth), transform .8s var(--ease-expo); }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Slide-in from left */
.slide-in-left { opacity: 0; transform: translateX(-28px); transition: opacity .8s var(--ease-smooth), transform .8s var(--ease-expo); }
.slide-in-left.visible { opacity: 1; transform: translateX(0); }

/* Scale-in */
.scale-in { opacity: 0; transform: scale(.94); transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-expo); }
.scale-in.visible { opacity: 1; transform: scale(1); }

/* Smooth text rendering for headings */
h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; }

/* ── Focus States — Accessibility ── */
:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}
body.dark :focus-visible { outline-color: #5a93ff; }

/* ── Cursor Glow Effect — Applied via JS ── */
.card-glow-container {
    --mouse-x: 50%;
    --mouse-y: 50%;
}
.card-glow-container .domain-card::after,
.card-glow-container .feature-card::after,
.card-glow-container .news-card::after {
    background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y),
        rgba(29,94,222,.06), transparent 60%);
    opacity: 0;
    transition: opacity .4s var(--ease-out);
}
.card-glow-container .domain-card:hover::after,
.card-glow-container .feature-card:hover::after,
.card-glow-container .news-card:hover::after {
    opacity: 1;
}
body.dark .card-glow-container .domain-card:hover::after,
body.dark .card-glow-container .feature-card:hover::after,
body.dark .card-glow-container .news-card:hover::after {
    background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y),
        rgba(90,147,255,.08), transparent 60%);
}

/* ================================================================
   RESPONSIVE TABLE SCROLL INDICATOR
   ================================================================ */
.table-wrapper { position: relative; }
.table-wrapper::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 48px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9));
    pointer-events: none; opacity: 0; transition: opacity .3s;
    border-radius: 0 var(--r-xl) var(--r-xl) 0;
}
.table-wrapper.has-scroll::after { opacity: 1; }
body.dark .table-wrapper::after { background: linear-gradient(90deg, transparent, rgba(18,25,41,.9)); }

/* ================================================================
   PAPER TABLE — Additional Visual Enhancements
   ================================================================ */
/* Model name strong tag — refined typography */
.data-table td:first-child strong {
    color: var(--blue-900);
    font-weight: 680;
    letter-spacing: -.01em;
}
.data-table tbody tr:hover td:first-child strong {
    color: var(--blue-700);
}
body.dark .data-table td:first-child strong { color: #e2e8f0; }
body.dark .data-table tbody tr:hover td:first-child strong { color: #8ab4ff; }

/* Venue & Year columns — subtle refinements */
.data-table td:nth-child(3) {
    font-size: .82rem;
    font-weight: 540;
    color: var(--gray-500);
    white-space: nowrap;
}
.data-table td:nth-child(4) {
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 580;
    color: var(--gray-500);
    white-space: nowrap;
    letter-spacing: .02em;
}

/* ================================================================
   TOOLTIP — Global utility
   ================================================================ */
[data-tooltip] { position: relative; }
[data-tooltip]::before {
    content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none;
    padding: 4px 10px; background: var(--gray-800); color: var(--white);
    font-size: .68rem; font-weight: 500; white-space: nowrap;
    border-radius: var(--r-xs); box-shadow: var(--shadow-md);
    transition: all .2s var(--ease-out); z-index: 100;
}
[data-tooltip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }
body.dark [data-tooltip]::before { background: #2a3a58; color: #dce3f0; box-shadow: 0 4px 12px rgba(0,0,0,.3); }

/* ================================================================
   ACCESSIBILITY — Reduced motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .hero-orb { animation: none !important; }
    .fade-in { opacity: 1; transform: none; }
    .slide-in-left { opacity: 1; transform: none; }
    .scale-in { opacity: 1; transform: none; }
    .page-main { animation: none; }
}

/* ================================================================
   PRINT STYLES
   ================================================================ */
@media print {
    .navbar, .sidebar, .sidebar-toggle, .sidebar-backdrop,
    .back-to-top, .progress-bar, .dark-toggle, .nav-toggle { display: none !important; }
    .page-main { margin-left: 0 !important; }
    .hero { min-height: auto; padding: 40px 20px; }
    body { background: white; color: #333; }
}

/* ================================================================
   DARK MODE — Additional refinements for stat gradients
   ================================================================ */
body.dark .stat-number {
    background: linear-gradient(180deg, #5a93ff, #8ab4ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
body.dark .stat {
    background: rgba(17,24,39,.6);
    border-color: rgba(30,42,66,.6);
    backdrop-filter: blur(20px);
}
body.dark .stat:hover {
    border-color: rgba(90,147,255,.2);
    box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(90,147,255,.08);
    background: rgba(17,24,39,.8);
}
body.dark .stat::before {
    background: linear-gradient(90deg, transparent, rgba(90,147,255,.4), transparent);
}
body.dark .hero-title::after {
    background: linear-gradient(105deg, transparent 40%, rgba(90,147,255,.15) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: shimmerSlide 6s ease-in-out infinite;
}
body.dark .stats-banner-number {
    background: linear-gradient(180deg, #5a93ff, #8ab4ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
body.dark .stats-banner-item {
    background: linear-gradient(150deg, rgba(10,19,40,.6), rgba(17,24,39,.4));
    border-color: rgba(23,46,92,.3);
}
body.dark .stats-banner-item:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,.2), 0 0 0 1px rgba(90,147,255,.08);
    border-color: rgba(90,147,255,.12);
}
/* Dark mode: Spotlight champion card */
body.dark .spotlight-card:first-child {
    background: linear-gradient(170deg, #1c1608, #151009, #111827);
    border-color: rgba(234,179,8,.15);
}
body.dark .spotlight-card:first-child:hover {
    box-shadow: 0 16px 40px -8px rgba(0,0,0,.3), 0 0 40px -10px rgba(234,179,8,.1);
}
body.dark .spotlight-card:first-child .spotlight-elo {
    background: linear-gradient(135deg, #422006, #78350f);
    color: #fbbf24;
    border-color: #92400e;
}
body.dark .spotlight-rank.rank-1 {
    animation: none;
    box-shadow: 0 4px 16px rgba(251,191,36,.15);
}
/* Dark mode: Feature numbered indicators */
body.dark .feature-icon::after {
    background: linear-gradient(135deg, #1a3366, #5a93ff);
}
/* Dark mode: News featured left accent */
body.dark .news-card-featured::after {
    background: linear-gradient(180deg, #5a93ff, #7c3aed);
    opacity: .3;
}
body.dark .news-card-featured:hover::after { opacity: .6; }
/* Dark mode: Featured card year shimmer */
body.dark .featured-card-year { background: linear-gradient(135deg, #152852, #11203e, #16103c); }
body.dark .featured-card-year::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent); }

body.dark .cta-section {
    background: linear-gradient(170deg, #0a1228 0%, #0d162c 25%, #0a1228 60%, #0c1222 100%);
}
body.dark .features-section {
    background: linear-gradient(180deg, #0c1222 0%, #0a1228 35%, #0a1228 65%, #0c1222 100%);
}
body.dark .featured-research-section {
    background: linear-gradient(180deg, #0c1222 0%, #111827 100%);
}
body.dark .news-section {
    background: linear-gradient(180deg, #0c1222 0%, #111827 50%, #0c1222 100%);
}

/* ================================================================
   PREMIUM ANIMATION SYSTEM v5 — Advanced Visual Enhancements
   Aurora Effects · 3D Tilt · Particle Canvas · Magnetic Interactions
   ================================================================ */

/* ── New Keyframe Animations ── */
@keyframes auroraShift {
    0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; filter: hue-rotate(15deg); }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
}

@keyframes morphBlob {
    0%, 100% { border-radius: 42% 58% 62% 38% / 45% 55% 45% 55%; }
    25% { border-radius: 58% 42% 38% 62% / 55% 45% 55% 45%; }
    50% { border-radius: 38% 62% 58% 42% / 45% 55% 45% 55%; }
    75% { border-radius: 62% 38% 42% 58% / 55% 45% 55% 45%; }
}

@keyframes textRevealUp {
    from { opacity: 0; transform: translateY(40px) rotateX(-8deg); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0) rotateX(0deg); filter: blur(0); }
}

@keyframes textRevealFade {
    from { opacity: 0; transform: translateY(20px); letter-spacing: .05em; }
    to { opacity: 1; transform: translateY(0); letter-spacing: inherit; }
}

@keyframes cardShine {
    0% { left: -100%; opacity: 0; }
    50% { opacity: 1; }
    100% { left: 200%; opacity: 0; }
}

@keyframes borderGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(29,94,222,.0), inset 0 0 20px rgba(29,94,222,.0); }
    50% { box-shadow: 0 0 30px rgba(29,94,222,.06), inset 0 0 30px rgba(29,94,222,.02); }
}

@keyframes floatRotate {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(1deg); }
    50% { transform: translateY(-3px) rotate(0deg); }
    75% { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes scaleBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.015); }
}

@keyframes slideInFromRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes revealClip {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

@keyframes rippleOut {
    0% { transform: scale(0); opacity: .5; }
    100% { transform: scale(4); opacity: 0; }
}

@keyframes navSlideDown {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes orbFloat {
    0% { transform: translate(0, 0) scale(1); opacity: .2; }
    25% { transform: translate(30px, -25px) scale(1.05); opacity: .25; }
    50% { transform: translate(-15px, 20px) scale(.95); opacity: .18; }
    75% { transform: translate(-25px, -10px) scale(1.02); opacity: .22; }
    100% { transform: translate(0, 0) scale(1); opacity: .2; }
}

/* ── Hero Aurora Effect ── */
.hero-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.hero-aurora-beam {
    position: absolute;
    width: 60%;
    height: 300px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(29,94,222,.05) 20%,
        rgba(139,92,246,.08) 40%,
        rgba(6,182,212,.06) 60%,
        rgba(99,102,241,.04) 80%,
        transparent
    );
    filter: blur(60px);
    animation: auroraBeamMove 15s ease-in-out infinite alternate;
    transform-origin: center;
}
.hero-aurora-beam:nth-child(1) { top: 5%; left: -10%; animation-delay: 0s; }
.hero-aurora-beam:nth-child(2) { top: 20%; right: -15%; animation-delay: -5s; animation-duration: 18s; }
.hero-aurora-beam:nth-child(3) { bottom: 15%; left: 20%; animation-delay: -10s; animation-duration: 22s; width: 40%; }

@keyframes auroraBeamMove {
    0% { transform: translateX(-10%) rotate(-3deg) scaleX(1); }
    33% { transform: translateX(5%) rotate(2deg) scaleX(1.15); }
    66% { transform: translateX(-5%) rotate(-1deg) scaleX(.9); }
    100% { transform: translateX(10%) rotate(3deg) scaleX(1.1); }
}

body.dark .hero-aurora-beam {
    background: linear-gradient(
        180deg,
        transparent,
        rgba(90,147,255,.06) 20%,
        rgba(139,92,246,.08) 40%,
        rgba(6,182,212,.05) 60%,
        rgba(99,102,241,.04) 80%,
        transparent
    );
    filter: blur(80px);
    opacity: .8;
}

/* ── Hero Particle Canvas ── */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.hero-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(29,94,222,.35), transparent);
    border-radius: 50%;
    animation: particleFloat var(--duration, 15s) var(--delay, 0s) infinite ease-in-out;
}
@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
    10% { opacity: var(--max-opacity, .6); }
    50% { transform: translate(var(--dx, 30px), var(--dy, -80px)) scale(var(--scale, 1.2)); opacity: var(--max-opacity, .6); }
    90% { opacity: var(--max-opacity, .6); }
}

body.dark .hero-particle {
    background: radial-gradient(circle, rgba(90,147,255,.4), transparent);
}

/* ── Enhanced Hero Title Animation ── */
.hero-title {
    animation: textRevealUp .9s var(--ease-expo) both;
    perspective: 800px;
}
.hero-description {
    animation: textRevealFade .8s var(--ease-expo) .2s both;
}
.hero-stats {
    animation: textRevealFade .8s var(--ease-expo) .35s both;
}
.hero-actions {
    animation: textRevealFade .8s var(--ease-expo) .5s both;
}
.hero-scroll {
    animation: textRevealFade .8s var(--ease-expo) .65s both;
}

/* ── Enhanced Navbar Animation ── */
.navbar {
    animation: navSlideDown .6s var(--ease-expo) both;
}

/* ── 3D Card Tilt System ── */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 800px;
    will-change: transform;
}
.tilt-card > * {
    transform: translateZ(0);
}

/* ── Card Shine Sweep Effect ── */
.domain-card .card-shine,
.feature-card .card-shine,
.news-card .card-shine,
.spotlight-card .card-shine,
.featured-card .card-shine {
    position: absolute;
    top: 0; left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,.03) 35%,
        rgba(255,255,255,.08) 50%,
        rgba(255,255,255,.03) 65%,
        transparent 80%
    );
    pointer-events: none;
    z-index: 5;
    transition: none;
}

/* ── Magnetic Button Hover ── */
.btn {
    will-change: transform;
    transition: all .35s var(--ease-spring);
}
.btn.magnetic-active {
    transition: transform .15s var(--ease-out);
}

/* ── Ripple Effect on Buttons ── */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    animation: rippleOut .6s var(--ease-out) forwards;
    pointer-events: none;
    z-index: 10;
}

/* ── Enhanced Domain Card Hover — Animated Border ── */
.domain-card {
    --border-angle: 0deg;
    transition: all .5s var(--ease-expo), box-shadow .5s var(--ease-expo);
}
.domain-card:hover {
    animation: borderGlow 3s ease-in-out infinite;
}

/* ── Spotlight Card — Animated Gradient Border ── */
.spotlight-card:first-child {
    position: relative;
}
.spotlight-card:first-child::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
        var(--border-angle, 0deg),
        rgba(251,191,36,.3),
        rgba(245,158,11,.1),
        rgba(234,179,8,.3),
        rgba(251,191,36,.1)
    );
    z-index: -1;
    animation: borderRotate 4s linear infinite;
    opacity: 0;
    transition: opacity .5s;
}
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.spotlight-card:first-child:hover::after {
    opacity: 1;
}

/* ── Enhanced Stat Cards — Floating Animation ── */
.stat {
    animation: scaleBreath 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 1.2s);
}
.stat:nth-child(1) { --i: 0; }
.stat:nth-child(2) { --i: 1; }
.stat:nth-child(3) { --i: 2; }
.stat:nth-child(4) { --i: 3; }
.stat:nth-child(5) { --i: 4; }

/* ── Enhanced Section Header — Gradient Underline Reveal ── */
.section-header .section-title::after {
    animation: revealClip .8s var(--ease-expo) both;
    animation-play-state: paused;
}
.section-header.visible .section-title::after {
    animation-play-state: running;
}

/* ── Scroll-triggered Fade Variants ── */
.fade-in-up {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .9s var(--ease-smooth), transform .9s var(--ease-expo);
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-scale {
    opacity: 0;
    transform: scale(.92) translateY(20px);
    transition: opacity .8s var(--ease-smooth), transform .8s var(--ease-expo);
}
.fade-in-scale.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.fade-in-blur {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(16px);
    transition: opacity .7s var(--ease-smooth), filter .7s var(--ease-smooth), transform .7s var(--ease-expo);
}
.fade-in-blur.visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* ── Enhanced News Card — Morphing Border Radius on Hover ── */
.news-card {
    transition: all .45s var(--ease-expo), border-radius .6s var(--ease-spring);
}
.news-card:hover {
    border-radius: var(--r-2xl);
}

/* ── Featured Card — Parallax Depth on Hover ── */
.featured-card {
    transform-style: preserve-3d;
    perspective: 600px;
}
.featured-card-year {
    transform: translateZ(0);
}
.featured-card:hover .featured-card-year {
    background-position: 100% 0;
}
.featured-card:hover .featured-card-body {
    transform: translateZ(12px);
    transition: transform .4s var(--ease-spring);
}

/* ── Enhanced Feature Card — Staggered Entry ── */
.feature-card:nth-child(1) { transition-delay: 0ms; }
.feature-card:nth-child(2) { transition-delay: 60ms; }
.feature-card:nth-child(3) { transition-delay: 120ms; }
.feature-card:nth-child(4) { transition-delay: 180ms; }
.feature-card:nth-child(5) { transition-delay: 240ms; }
.feature-card:nth-child(6) { transition-delay: 300ms; }

/* ── CTA Section — Enhanced Floating Glow ── */
.cta-glow {
    animation: orbFloat 20s infinite ease-in-out, morphBlob 15s infinite ease-in-out;
}
.cta-content {
    transition: all .5s var(--ease-expo), border-color .5s;
}

/* ── Enhanced Footer — Gradient Line Animation ── */
.footer::after {
    animation: shimmer 8s linear infinite;
    background-size: 400% 100%;
}

/* ── Stats Banner — Enhanced Counter Glow ── */
.stats-banner-number {
    position: relative;
}
.stats-banner-item:hover .stats-banner-number {
    filter: drop-shadow(0 0 12px rgba(29,94,222,.15));
    transition: filter .4s;
}
body.dark .stats-banner-item:hover .stats-banner-number {
    filter: drop-shadow(0 0 12px rgba(90,147,255,.2));
}

/* ── Smooth Section Divider — Animated Dot ── */
.section-divider::after {
    animation: pulse 3s ease-in-out infinite, floatY 4s ease-in-out infinite;
}

/* ── Enhanced Progress Bar — Glowing Trail ── */
.progress-bar {
    position: relative;
}
.progress-bar::before {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.8);
    box-shadow: 0 0 12px 4px rgba(29,94,222,.5), 0 0 24px 8px rgba(139,92,246,.3);
    opacity: 0;
    transition: opacity .3s;
}
.progress-bar[style*="width"]:not([style*="width: 0"]):not([style*="width:0"]) .progress-bar::before {
    opacity: 1;
}

/* ── Enhanced Back to Top — Pulse Ring ── */
.back-to-top::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(29,94,222,.2);
    opacity: 0;
    animation: none;
    transition: opacity .3s, transform .3s;
}
.back-to-top.visible::before {
    animation: glowPulse 2.5s ease-in-out infinite;
    opacity: .6;
}
.back-to-top:hover::before {
    opacity: 0;
}

/* ── Enhanced Sidebar — Smooth Hover Wash ── */
.sidebar-nav .sidebar-link {
    position: relative;
}
.sidebar-nav .sidebar-link .link-icon {
    transition: color .22s var(--ease-out), transform .35s var(--ease-spring);
}
.sidebar-nav .sidebar-link:hover .link-icon {
    transform: scale(1.12) translateX(1px);
}

/* ── Enhanced Dark Toggle — Rotation Animation ── */
.dark-toggle:active svg {
    transform: rotate(360deg) scale(.85);
    transition: transform .5s var(--ease-spring);
}

/* ── Text Gradient Shimmer for Accent ── */
.accent {
    position: relative;
}
.accent::after {
    content: '';
    position: absolute;
    inset: -2px -4px;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,.25) 48%,
        rgba(255,255,255,.35) 50%,
        rgba(255,255,255,.25) 52%,
        transparent 70%
    );
    background-size: 250% 100%;
    animation: shimmerSlide 5s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
    border-radius: 4px;
}

/* ── Enhanced Search Input — Focus Glow Ring ── */
.search-input:focus {
    box-shadow: var(--shadow-md),
        0 0 0 4px rgba(29,94,222,.06),
        0 0 32px -8px rgba(29,94,222,.08),
        0 0 0 1px rgba(29,94,222,.15);
    animation: borderGlow 3s ease-in-out infinite;
}

/* ── Smooth Table Row Entrance ── */
.data-table tbody tr {
    animation: fadeSlideIn .4s var(--ease-expo) both;
}
.data-table tbody tr:nth-child(1) { animation-delay: .02s; }
.data-table tbody tr:nth-child(2) { animation-delay: .04s; }
.data-table tbody tr:nth-child(3) { animation-delay: .06s; }
.data-table tbody tr:nth-child(4) { animation-delay: .08s; }
.data-table tbody tr:nth-child(5) { animation-delay: .1s; }

/* ── Enhanced Tooltip Animation ── */
[data-tooltip]::before {
    transition: all .25s var(--ease-spring);
    transform: translateX(-50%) translateY(6px) scale(.95);
}
[data-tooltip]:hover::before {
    transform: translateX(-50%) translateY(0) scale(1);
}

/* ── Scroll Indicator Enhancement ── */
.hero-scroll {
    position: relative;
}
.hero-scroll::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 30px;
    border: 2px solid rgba(29,94,222,.15);
    border-radius: 10px;
    opacity: .6;
}
.hero-scroll::after {
    content: '';
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 6px;
    background: rgba(29,94,222,.3);
    border-radius: 2px;
    animation: scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: .8; }
    50% { transform: translateX(-50%) translateY(8px); opacity: .2; }
}

body.dark .hero-scroll::before {
    border-color: rgba(90,147,255,.15);
}
body.dark .hero-scroll::after {
    background: rgba(90,147,255,.3);
}

/* ── Enhanced Domain Card Accent Lines — Glow Effect ── */
.domain-card[data-accent="t2i"]:hover { box-shadow: 0 0 0 1px rgba(53,116,240,.15), 0 24px 50px -12px rgba(15,23,42,.1), 0 0 80px -20px rgba(53,116,240,.15); }
.domain-card[data-accent="t2v"]:hover { box-shadow: 0 0 0 1px rgba(245,158,11,.12), 0 24px 50px -12px rgba(15,23,42,.1), 0 0 80px -20px rgba(245,158,11,.12); }
.domain-card[data-accent="i2v"]:hover { box-shadow: 0 0 0 1px rgba(6,182,212,.12), 0 24px 50px -12px rgba(15,23,42,.1), 0 0 80px -20px rgba(6,182,212,.12); }
.domain-card[data-accent="3d"]:hover { box-shadow: 0 0 0 1px rgba(255,109,0,.12), 0 24px 50px -12px rgba(15,23,42,.1), 0 0 80px -20px rgba(255,109,0,.12); }
.domain-card[data-accent="4d"]:hover { box-shadow: 0 0 0 1px rgba(109,40,217,.12), 0 24px 50px -12px rgba(15,23,42,.1), 0 0 80px -20px rgba(109,40,217,.12); }
.domain-card[data-accent="unified"]:hover { box-shadow: 0 0 0 1px rgba(139,92,246,.12), 0 24px 50px -12px rgba(15,23,42,.1), 0 0 80px -20px rgba(139,92,246,.12); }
.domain-card[data-accent="world"]:hover { box-shadow: 0 0 0 1px rgba(16,185,129,.12), 0 24px 50px -12px rgba(15,23,42,.1), 0 0 80px -20px rgba(16,185,129,.12); }

/* ── Domain Card Icon — Morph on Hover ── */
.domain-card:hover .domain-card-icon {
    animation: morphBlob 4s ease-in-out infinite;
}

/* ── Enhanced Spotlight Rank — Entrance Animation ── */
.spotlight-card {
    animation: textRevealFade .7s var(--ease-expo) both;
}
.spotlight-card:nth-child(1) { animation-delay: .1s; }
.spotlight-card:nth-child(2) { animation-delay: .18s; }
.spotlight-card:nth-child(3) { animation-delay: .26s; }
.spotlight-card:nth-child(4) { animation-delay: .34s; }
.spotlight-card:nth-child(5) { animation-delay: .42s; }

/* ── Smooth Page Transition Overlay ── */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}
.page-transition-overlay.active {
    animation: pageTransition .5s var(--ease-expo) forwards;
}
@keyframes pageTransition {
    0% { transform: scaleX(0); }
    50% { transform: scaleX(1); }
    100% { transform: scaleX(0); transform-origin: right; }
}

/* ── Loading Shimmer for Dynamic Content ── */
.shimmer-loading {
    background: linear-gradient(
        90deg,
        rgba(29,94,222,.03) 0%,
        rgba(29,94,222,.08) 50%,
        rgba(29,94,222,.03) 100%
    );
    background-size: 200% 100%;
    animation: shimmerSlide 2s ease-in-out infinite;
}

/* ── Enhanced Section Tag — Floating Dot ── */
.section-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-400), var(--violet-500));
    animation: pulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(29,94,222,.3);
}

/* ── Enhanced Year Badge — Subtle Glow ── */
.year-badge.y2026 {
    animation: subtleBreathe 3s ease-in-out infinite;
    position: relative;
}
.year-badge.y2026::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(251,191,36,.2), rgba(245,158,11,.1));
    z-index: -1;
    filter: blur(4px);
    opacity: .5;
}

/* ── New Badge Sparkle ── */
.new-badge {
    position: relative;
    overflow: hidden;
}
.new-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255,255,255,.2) 50%,
        transparent 70%
    );
    animation: cardShine 3s ease-in-out infinite;
}

/* (Dark mode aurora handled above, near .hero-aurora-beam definition) */

/* ── Performance — GPU Acceleration ── */
.hero-orb,
.hero-aurora-beam,
.hero-particle,
.domain-card,
.feature-card,
.news-card,
.spotlight-card,
.featured-card,
.stat,
.btn,
.cta-glow,
.back-to-top {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ── Enhanced Responsive — Reduced Motion for Mobile ── */
@media (max-width: 768px) {
    .hero-aurora-beam { animation-duration: 30s; filter: blur(80px); }
    .hero-particle { display: none; }
    .hero-title { animation-duration: .6s; }
    .hero-description { animation-delay: .1s; }
    .hero-stats { animation-delay: .15s; }
    .hero-actions { animation-delay: .2s; }
    .stat { animation: none; }
    .domain-card:hover .domain-card-icon { animation: none; }
    .spotlight-card { animation: none; }
    .hero-scroll::before,
    .hero-scroll::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-aurora-beam,
    .hero-particle,
    .tilt-card,
    .card-shine,
    .btn-ripple { display: none !important; animation: none !important; }
    .stat { animation: none !important; }
    .domain-card:hover .domain-card-icon { animation: none !important; }
}

/* ════════════════════════════════════════════════
   FOOTER SHARE BAR — Social sharing & GitHub Star
   ════════════════════════════════════════════════ */
.footer-share-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 28px;
    margin-bottom: 36px;
    background: linear-gradient(135deg, rgba(29,94,222,.08), rgba(139,92,246,.06));
    border: 1px solid rgba(29,94,222,.15);
    border-radius: 14px;
    flex-wrap: wrap;
}
.share-bar-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    font-weight: 560;
    color: var(--blue-700, #1d4ed8);
}
.share-bar-text svg { flex-shrink: 0; color: #f59e0b; }
.share-bar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
    white-space: nowrap;
}
.share-btn-github {
    background: #24292f;
    color: #fff;
}
.share-btn-github:hover { background: #1b1f23; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.share-btn-twitter {
    background: #0f1419;
    color: #fff;
}
.share-btn-twitter:hover { background: #000; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.share-btn-reddit {
    background: #ff4500;
    color: #fff;
}
.share-btn-reddit:hover { background: #e03d00; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,69,0,.25); }
.share-btn-linkedin {
    background: #0077b5;
    color: #fff;
}
.share-btn-linkedin:hover { background: #006699; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,119,181,.25); }

body.dark .footer-share-bar {
    background: linear-gradient(135deg, rgba(29,94,222,.12), rgba(139,92,246,.08));
    border-color: rgba(59,130,246,.2);
}
body.dark .share-bar-text { color: #93c5fd; }

@media (max-width: 768px) {
    .footer-share-bar {
        flex-direction: column;
        text-align: center;
        padding: 16px 20px;
    }
    .share-bar-text { justify-content: center; font-size: .82rem; }
    .share-bar-actions { justify-content: center; }
    .share-btn { padding: 7px 12px; font-size: .75rem; }
}

/* ================================================================
   BLOG — Magazine-style card grid
   ================================================================ */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-top: 20px;
}
.blog-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: all .35s var(--ease-out);
    box-shadow: var(--shadow-sm);
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(29,94,222,.15);
}
.blog-card-accent {
    height: 6px;
    width: 100%;
}
.blog-card-body {
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.blog-card-org {
    font-size: .76rem;
    font-weight: 650;
    color: var(--blue-600);
    letter-spacing: .02em;
    text-transform: uppercase;
}
.blog-card-date {
    font-size: .74rem;
    font-weight: 500;
    color: var(--gray-400);
    font-family: var(--font-mono);
    letter-spacing: .01em;
}
.blog-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.4;
    letter-spacing: -.01em;
}
.blog-card-excerpt {
    font-size: .84rem;
    color: var(--gray-500);
    line-height: 1.65;
    flex-grow: 1;
}
.blog-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
}
.blog-card-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--r-full);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.blog-tag-t2i { background: rgba(59,130,246,.1); color: #2563eb; }
.blog-tag-t2v { background: rgba(16,185,129,.1); color: #059669; }
.blog-tag-i2v { background: rgba(168,85,247,.1); color: #7c3aed; }
.blog-tag-3d { background: rgba(6,182,212,.1); color: #0891b2; }
.blog-tag-4d { background: rgba(245,158,11,.1); color: #b45309; }
.blog-tag-unified { background: rgba(139,92,246,.1); color: #6d28d9; }
.blog-tag-world { background: rgba(244,63,94,.1); color: #be123c; }
.blog-card-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    font-weight: 620;
    color: var(--blue-600);
    text-decoration: none;
    transition: all .2s var(--ease-out);
    white-space: nowrap;
}
.blog-card-link:hover { color: var(--blue-800); gap: 6px; }
.blog-card-link svg { flex-shrink: 0; stroke: currentColor; fill: none; }

/* Blog dark mode */
body.dark .blog-card {
    background: var(--gray-800);
    border-color: rgba(255,255,255,.06);
}
body.dark .blog-card:hover {
    border-color: rgba(59,130,246,.25);
    box-shadow: 0 20px 40px -8px rgba(0,0,0,.4), 0 0 60px -20px rgba(29,94,222,.15);
}
body.dark .blog-card-title { color: #f1f5f9; }
body.dark .blog-card-excerpt { color: #94a3b8; }
body.dark .blog-card-org { color: #60a5fa; }
body.dark .blog-card-date { color: #64748b; }
body.dark .blog-card-footer { border-top-color: rgba(255,255,255,.06); }
body.dark .blog-card-link { color: #60a5fa; }
body.dark .blog-tag-t2i { background: rgba(59,130,246,.15); color: #93c5fd; }
body.dark .blog-tag-t2v { background: rgba(16,185,129,.15); color: #6ee7b7; }
body.dark .blog-tag-i2v { background: rgba(168,85,247,.15); color: #c4b5fd; }
body.dark .blog-tag-3d { background: rgba(6,182,212,.15); color: #67e8f9; }
body.dark .blog-tag-4d { background: rgba(245,158,11,.15); color: #fcd34d; }
body.dark .blog-tag-unified { background: rgba(139,92,246,.15); color: #c4b5fd; }
body.dark .blog-tag-world { background: rgba(244,63,94,.15); color: #fda4af; }

@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; gap: 16px; }
    .blog-card-body { padding: 16px 18px 14px; }
    .blog-card-title { font-size: .95rem; }
}