/* ==========================================================================
   INSAN BUSINESS ACADEMY - WORLD-CLASS DESIGN SYSTEM
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');

:root {
            /* --- Light Theme Variables --- */
    --bg-base-light: #ffffff;
    --bg-surface-light: rgba(255, 255, 255, 0.85);
    --bg-elevated-light: rgba(255, 255, 255, 0.95);
    --bg-glass-light: rgba(255, 255, 255, 0.7);
    
    --text-primary-light: #020617; /* Very dark navy/slate */
    --text-secondary-light: #334155;
    --text-tertiary-light: #475569;
    --text-inverse-light: #ffffff;
    
    --border-subtle-light: rgba(255, 255, 255, 1);
    --border-strong-light: rgba(0, 180, 255, 0.2);

    /* 1. Brand Colors (Pure White in Dark Mode, Pure Dark Slate in Light Mode) */
    --color-primary: #ffffff;
    --color-primary-light: #ffffff;
    --color-primary-dark: #e2e8f0;
    
    --color-accent: #ffffff;
    --color-accent-hover: #f1f5f9;
    --color-accent-dim: rgba(255, 255, 255, 0.15);

    /* 2. Semantic Colors (Dark Blue / Navy Theme) */
    --bg-base: #011324;
    --bg-surface: #011e3b;
    --bg-elevated: #012b54;
    --bg-glass: rgba(1, 19, 36, 0.75);
    
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --text-tertiary: #ffffff;
    --text-inverse: #003399;
    
    --border-subtle: rgba(255, 255, 255, 0.2);
    --border-strong: rgba(255, 255, 255, 0.4);
    
    --status-success: #10b981;
    --status-error: #ef4444;
    --status-warning: #f59e0b;

    /* 3. Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Newsreader', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    
    /* Extreme Fluid Typography */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.625rem + 1.25vw, 2.75rem);
    --text-4xl: clamp(2.5rem, 2.0rem + 2.5vw, 4rem);
    --text-5xl: clamp(3.5rem, 2.5rem + 5vw, 6rem);
    --text-6xl: clamp(4rem, 3rem + 7vw, 8rem);

    /* 4. Spacing System */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-48: 12rem;

    /* 5. Advanced Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* 6. Deep Shadows with Neon Cyan Tint */
    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-glow: 0 0 30px rgba(255, 255, 255, 0.2);

    /* 7. Precision Easing */
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --duration-slow: 800ms;
    --duration-epic: 360ms;
}

/* ==========================================================================
   THEME SWITCHING (LIGHT & DARK)
   ========================================================================== */
html.dark {
    /* Identical to root to ensure the dark luxury aesthetic is permanent */
}

html.light-theme {
    --bg-base: var(--bg-base-light);
    --bg-surface: var(--bg-surface-light);
    --bg-elevated: var(--bg-elevated-light);
    --bg-glass: var(--bg-glass-light);
    
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --text-tertiary: var(--text-tertiary-light);
    --text-inverse: var(--text-inverse-light);
    
    --border-subtle: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.2);
    
    --color-primary: var(--text-primary-light);
    --color-primary-light: var(--text-secondary-light);
    --color-primary-dark: #cbd5e1;
}

/* ==========================================================================
   RESET & CORE
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
     /* Custom cursor */
    overflow-x: clip;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.5;
    transition: background-color var(--duration-normal) var(--ease-out),
                color var(--duration-normal) var(--ease-out);
    overflow-x: clip;
    text-rendering: optimizeLegibility;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* Global Animated Background Canvas */
#global-network-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    pointer-events: none;
    background: transparent;
}

/* ==========================================================================
   CUSTOM CURSOR (Awwwards Style)
   ========================================================================== */
.cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px;
    height: 8px;
    background-color: var(--text-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background-color 0.3s;
    mix-blend-mode: difference;
}

.cursor-outline {
    position: fixed;
    top: 0; left: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--text-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), border-color 0.3s;
    mix-blend-mode: difference;
}

/* Hover States for cursor */
.cursor-hover .cursor-dot { width: 0; height: 0; opacity: 0; }
.cursor-hover .cursor-outline {
    width: 60px;
    height: 60px;
    background-color: var(--text-primary);
    border-color: transparent;
    opacity: 0.1;
    mix-blend-mode: normal;
}

@media (pointer: coarse) {
    html { cursor: auto; }
    .cursor-dot, .cursor-outline { display: none; }
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.04em; /* Extreme tight tracking */
    color: var(--text-primary);
}

.font-serif {
    font-family: var(--font-sans);
    font-weight: 700;
    font-style: normal !important;
    letter-spacing: -0.02em;
}

h1 { font-size: var(--text-5xl); letter-spacing: -0.05em; }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }

p { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: var(--space-4); }
a { color: inherit; text-decoration: none; }

.text-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-accent {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Container */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* ==========================================================================
   BUTTONS (Magnetic/Premium)
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
     /* Let custom cursor handle it */
    border: 1px solid transparent;
    text-decoration: none;
    user-select: none;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
}

html.light-theme .nav-indicator {
    background: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    color: var(--text-primary);
    line-height: 1.5;
    transition: background-color var(--duration-normal) var(--ease-out),
                color var(--duration-normal) var(--ease-out);
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ==========================================================================
   CUSTOM CURSOR (Awwwards Style)
   ========================================================================== */
.cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px;
    height: 8px;
    background-color: var(--text-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background-color 0.3s;
    mix-blend-mode: difference;
}

.cursor-outline {
    position: fixed;
    top: 0; left: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--text-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), border-color 0.3s;
    mix-blend-mode: difference;
}

/* Hover States for cursor */
.cursor-hover .cursor-dot { width: 0; height: 0; opacity: 0; }
.cursor-hover .cursor-outline {
    width: 60px;
    height: 60px;
    background-color: var(--text-primary);
    border-color: transparent;
    opacity: 0.1;
    mix-blend-mode: normal;
}

@media (pointer: coarse) {
    html { cursor: auto; }
    .cursor-dot, .cursor-outline { display: none; }
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.04em; /* Extreme tight tracking */
    color: var(--text-primary);
}

.font-serif {
    font-family: var(--font-sans);
    font-weight: 700;
    font-style: normal !important;
    letter-spacing: -0.02em;
}

h1 { font-size: var(--text-5xl); letter-spacing: -0.05em; }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }

p { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: var(--space-4); }
a { color: inherit; text-decoration: none; }

.text-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-accent {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Container */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* ==========================================================================
   BUTTONS (Magnetic/Premium)
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
     /* Let custom cursor handle it */
    border: 1px solid transparent;
    text-decoration: none;
    user-select: none;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
    /* Magnetic button base transitions */
    transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--duration-fast);
    will-change: transform;
}

.btn:active {
    transform: scale(0.96);
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--duration-normal);
}

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

.theme-toggle:hover .theme-toggle-track {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.theme-toggle-circle {
    position: absolute;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    left: 2px;
    top: 2px;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), background 0.35s ease, border-color 0.35s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 3;
}

.theme-sun-icon, .theme-moon-icon {
    width: 13px;
    height: 13px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.theme-sun-icon {
    color: #fbbf24;
    opacity: 0.6;
}

.theme-moon-icon {
    color: #ffffff;
    opacity: 0.8;
}

/* ===================== LIGHT MODE TOGGLE ===================== */
html.light-theme .theme-toggle-track {
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(0, 0, 0, 0.1);
}

html.light-theme .theme-toggle:hover .theme-toggle-track {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
}

html.light-theme .theme-toggle-circle {
    transform: translateX(24px);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

html.light-theme .theme-sun-icon {
    color: #ffffff;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

html.light-theme .theme-moon-icon {
    color: rgba(255, 255, 255, 0.6);
    filter: none;
}

.lang-form {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 0 var(--space-3);
    height: 36px;
    border-radius: 9999px;
}

.lang-select {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    
    appearance: none;
    padding: 0 var(--space-2);
}

:root.light-theme {
    --bg-base: var(--bg-base-light);
    --bg-surface: var(--bg-surface-light);
    --bg-elevated: var(--bg-elevated-light);
    --bg-glass: var(--bg-glass-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --text-tertiary: var(--text-tertiary-light);
    --text-inverse: var(--text-inverse-light);
    --border-subtle: var(--border-subtle-light);
    --border-strong: var(--border-strong-light);
    
    --color-primary: #011324;
    --color-accent: #0055ff;
}

/* ==========================================================================
   SPOTLIGHT CARDS (Premium Glass Cards)
   ========================================================================== */
.cards-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.card {
    background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border-radius: 20px;
    padding: 1px;
    position: relative;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    transition: 
        transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), 
        box-shadow 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    overflow: hidden;
}

.card::before, .card::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Gradient border glow on hover */
.card::before {
    inset: 0;
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y),
        rgba(99, 102, 241, 0.3),
        transparent 40%
    );
    z-index: 1;
}

/* Inner soft glow */
.card::after {
    inset: 1px;
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        rgba(99, 102, 241, 0.08),
        transparent 40%
    );
    z-index: 2;
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(99, 102, 241, 0.2) inset;
}

.card:hover::before, .card:hover::after {
    opacity: 1;
}

/* Shimmer sweep animation on hover */
.card .card-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 100%
    );
    transform: skewX(-15deg);
    transition: none;
    z-index: 10;
    pointer-events: none;
}

.card:hover .card-content::before {
    animation: cardShimmer 0.8s ease forwards;
}

@keyframes cardShimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

.card-content {
    background: var(--bg-elevated);
    border-radius: 19px;
    padding: var(--space-8);
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Image masking with overlay gradient */
.image-mask {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-6);
    aspect-ratio: 16/9;
}

/* Gradient overlay on image */
.image-mask::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 40%,
        rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.card:hover .image-mask::after {
    opacity: 0.6;
}

.image-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

.card:hover .image-mask img {
    transform: scale(1.08);
}

/* ---- Light Mode Card Styles ---- */
html.light-theme .card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 1) !important;
    box-shadow: 0 20px 50px rgba(0, 160, 200, 0.08) !important;
    border-radius: 24px !important;
}

html.light-theme .card:hover {
    box-shadow: 0 30px 70px rgba(0, 160, 200, 0.12) !important;
    transform: translateY(-8px);
}

html.light-theme .card::before {
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.15),
        transparent 40%
    ) !important;
}

html.light-theme .card::after {
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        rgba(59, 130, 246, 0.05),
        transparent 40%
    ) !important;
}

html.light-theme .card .card-content::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    ) !important;
}

.map-overlay-container {
    transition: transform var(--duration-epic) var(--ease-out), box-shadow var(--duration-epic);
}

.map-overlay-container:hover {
    transform: translateX(-50%) translateY(-4px) !important;
    box-shadow: var(--shadow-xl) !important;
}

/* ==========================================================================
   ANIMATIONS & REVEALS
   ========================================================================== */
.reveal-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--duration-epic) var(--ease-out), transform var(--duration-epic) var(--ease-out);
    will-change: opacity, transform;
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-clip {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    transition: clip-path 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-clip.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.stagger-1 { transition-delay: 25ms; }
.stagger-2 { transition-delay: 50ms; }
.stagger-3 { transition-delay: 75ms; }
.stagger-4 { transition-delay: 100ms; }

/* Abstract Mesh BG */
.mesh-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--bg-base);
}

.mesh-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
    animation: float 20s infinite ease-in-out alternate;
}

html.dark .mesh-blob { opacity: 0.15; }

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(5%, 10%) scale(1.2); }
}

/* ==========================================================================
   LAYOUT SECTIONS
   ========================================================================== */
main {
    min-height: 100vh;
}

.section {
    padding: var(--space-32) 0;
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   EDITORIAL FOOTER
   ========================================================================== */
.footer {
    position: relative;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-32) 0 var(--space-8);
    overflow: hidden;
}

.footer-huge-text {
    font-size: 15vw;
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.8;
    color: var(--text-primary);
    opacity: 0.03;
    position: absolute;
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}

html.dark .footer-huge-text { opacity: 0.05; }

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-12);
    position: relative;
    z-index: 1;
    margin-bottom: var(--space-24);
}

.footer-col h4 {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-6);
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.footer-col ul a {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: color var(--duration-fast);
}

.footer-col ul a:hover {
    color: var(--text-primary);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-8);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1024px) {
    .navbar { width: calc(100% - var(--space-8)); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

@media (max-width: 768px) {
    .nav-links, .lang-form { display: none; }
    .mobile-menu-btn { display: flex; }
    .navbar { border-radius: var(--radius-md); top: var(--space-4); width: calc(100% - var(--space-4)); }
    
    .section { padding: var(--space-24) 0; }
    
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: var(--space-6); text-align: center; }
}

/* ==========================================================================
   FORM & INTERACTION STATES (UX Upgrades)
   ========================================================================== */
input, textarea, select {
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    transition: all var(--duration-fast) var(--ease-out);
    outline: none;
    width: 100%;
}

input:hover, textarea:hover, select:hover {
    border-color: var(--text-tertiary);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

html.dark input:focus, html.dark textarea:focus, html.dark select:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

input::placeholder, textarea::placeholder {
    color: var(--text-tertiary);
}

/* Empty States */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-16) var(--space-6);
    background: var(--bg-surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-base);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
    color: var(--text-tertiary);
}

.empty-state h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.empty-state p {
    max-width: 400px;
    margin: 0 auto var(--space-6) auto;
}


/* ==========================================================================
   HERO & PREMIUM UPGRADES
   ========================================================================== */
.hero-title {
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: var(--space-8);
}

.hero-title-insan {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 4px 40px rgba(255, 255, 255, 0.2);
}

.hero-title-academy {
    font-weight: 300;
    color: var(--text-secondary);
    display: inline-block;
}


.hero-welcome-text {
    font-size: var(--text-xl);
    color: #ffffff;
    margin-bottom: var(--space-6);
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    text-shadow: 0 0 15px rgba(255,255,255,0.3);
    transition: color 0.3s ease;
}

.hero-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.35rem);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Premium Buttons */
.btn-premium {
    padding: 1.25rem 2.5rem;
    font-size: 1.1rem;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    color: #011324;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15), 0 0 40px rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.btn-premium:hover {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 0 60px rgba(255, 255, 255, 0.15);
    transform: translateY(-4px) scale(1.02);
    background-color: #f1f5f9;
}

.btn-premium-outline {
    border: 1px solid var(--border-strong);
    background: var(--bg-glass);
    padding: 1.25rem 2.5rem;
    font-size: 1.1rem;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    color: var(--text-primary);
}

.btn-premium-outline:hover {
    background: #ffffff !important;
    color: #011324 !important;
    transform: translateY(-4px) scale(1.02);
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: shine 6s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

/* Light Mode specific gradients */
html.light-theme body {
    background: linear-gradient(-45deg, #f0f4f8, #dbeafe, #ffffff, #e0f2fe);
    background-size: 400% 400%;
    animation: lightGradientBG 15s ease infinite;
    background-attachment: fixed;
}

@keyframes lightGradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

html.light-theme .hero-title-insan {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 4px 40px rgba(255, 255, 255, 0.2);
}

html.light-theme .btn-premium-outline {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}

html.light-theme .btn-premium-outline:hover {
    background: #ffffff !important;
    color: #011324 !important;
    transform: translateY(-4px) scale(1.02);
}

/* Smooth Scrolling setup for lenis */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* Fix mesh background in light mode */
html.light-theme .mesh-blob {
    opacity: 0 !important;
}

/* Cursor Glow */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 209, 255, 0.12) 0%, rgba(0, 209, 255, 0) 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
    transition: opacity 0.3s ease;
    will-change: transform;
}
html.light-theme .cursor-glow {
    background: radial-gradient(circle, rgba(0, 209, 255, 0.1) 0%, rgba(0, 209, 255, 0) 60%);
    mix-blend-mode: normal;
}

/* Clean Light & Dark Theme Hero Title Styles */
html.light-theme .hero-welcome-text {
    font-size: var(--text-sm) !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    margin-bottom: var(--space-4) !important;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.25em !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    opacity: 0.85 !important;
}

html.light-theme .hero-title-insan {
    background: none !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

html.light-theme .hero-title-academy {
    background: none !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    text-shadow: none !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

html:not(.light-theme) .hero-welcome-text {
    font-size: var(--text-sm) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: var(--space-4) !important;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.25em !important;
    font-weight: 600 !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2) !important;
}

html:not(.light-theme) .hero-title-insan {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0px 4px 40px rgba(255, 255, 255, 0.2) !important;
    font-weight: 800 !important;
}

html:not(.light-theme) .hero-title-academy {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    font-style: italic !important;
    font-weight: 300 !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.15) !important;
}
html.light-theme .btn-primary.btn-premium {
    background-color: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2) !important;
}
html.light-theme .btn-primary.btn-premium:hover {
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.3) !important;
    background-color: #000000 !important;
}

/* Dark mode specific premium outline button */
html:not(.light-theme) .btn-premium-outline {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px);
}
html:not(.light-theme) .btn-premium-outline:hover {
    background: #ffffff !important;
    color: #011324 !important;
    border-color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-4px) scale(1.02);
}

/* Card discover button animation */
.card:hover .card-discover-btn {
    gap: var(--space-3);
}
.card:hover .card-discover-btn svg {
    transform: translateX(4px);
}

/* Card Price and Discover button - Light (Black) vs Dark (White) theme colors */
html.light-theme .card-content h3,
html.light-theme .card-price,
html.light-theme .card-discover-btn,
html.light-theme .card-discover-btn svg {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    stroke: #0f172a !important;
}

html:not(.light-theme) .card-price,
html:not(.light-theme) .card-discover-btn,
html:not(.light-theme) .card-discover-btn svg {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    stroke: #ffffff !important;
}

/* Force pure black color for metrics and section headings in light mode */
html.light-theme .reveal-up h2,
html.light-theme section h2,
html.light-theme section h3,
html.light-theme .metrics-section h2 {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Custom Glass Language Switcher */
.lang-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.custom-lang-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 5px 12px 5px 14px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.custom-lang-selector:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.custom-lang-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent !important;
    border: none !important;
    color: inherit;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    outline: none !important;
    padding-right: 18px;
    text-transform: uppercase;
}

.custom-lang-select option {
    background-color: #0f172a;
    color: #ffffff;
    font-weight: 600;
    padding: 10px;
}

html.light-theme .custom-lang-selector {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

html.light-theme .custom-lang-selector:hover {
    background: rgba(15, 23, 42, 0.12);
    border-color: rgba(15, 23, 42, 0.25);
}

html.light-theme .custom-lang-select option {
    background-color: #ffffff;
    color: #0f172a;
}

.custom-lang-arrow {
    position: absolute;
    right: 10px;
    pointer-events: none;
    display: flex;
    text-shadow: none !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

html:not(.light-theme) .hero-welcome-text {
    font-size: var(--text-sm) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: var(--space-4) !important;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.25em !important;
    font-weight: 600 !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2) !important;
}

html:not(.light-theme) .hero-title-insan {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0px 4px 40px rgba(255, 255, 255, 0.2) !important;
    font-weight: 800 !important;
}

html:not(.light-theme) .hero-title-academy {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    font-style: normal !important;
    font-weight: 700 !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.15) !important;
}
html.light-theme .btn-primary.btn-premium {
    background-color: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2) !important;
}
html.light-theme .btn-primary.btn-premium:hover {
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.3) !important;
    background-color: #000000 !important;
}

/* Dark mode specific premium outline button */
html:not(.light-theme) .btn-premium-outline {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px);
}
html:not(.light-theme) .btn-premium-outline:hover {
    background: #ffffff !important;
    color: #011324 !important;
    border-color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-4px) scale(1.02);
}

/* Card discover button animation */
.card:hover .card-discover-btn {
    gap: var(--space-3);
}
.card:hover .card-discover-btn svg {
    transform: translateX(4px);
}

/* Card Price and Discover button - Light (Black) vs Dark (White) theme colors */
html.light-theme .card-content h3,
html.light-theme .card-price,
html.light-theme .card-discover-btn,
html.light-theme .card-discover-btn svg {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    stroke: #0f172a !important;
}

html:not(.light-theme) .card-price,
html:not(.light-theme) .card-discover-btn,
html:not(.light-theme) .card-discover-btn svg {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    stroke: #ffffff !important;
}

/* Force pure black color for metrics and section headings in light mode */
html.light-theme .reveal-up h2,
html.light-theme section h2,
html.light-theme section h3,
html.light-theme .metrics-section h2 {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Custom Glass Language Switcher */
.lang-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.custom-lang-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 5px 12px 5px 14px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.custom-lang-selector:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.custom-lang-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent !important;
    border: none !important;
    color: inherit;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    outline: none !important;
    padding-right: 18px;
    text-transform: uppercase;
}

.custom-lang-select option {
    background-color: #0f172a;
    color: #ffffff;
    font-weight: 600;
    padding: 10px;
}

html.light-theme .custom-lang-selector {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

html.light-theme .custom-lang-selector:hover {
    background: rgba(15, 23, 42, 0.12);
    border-color: rgba(15, 23, 42, 0.25);
}

html.light-theme .custom-lang-select option {
    background-color: #ffffff;
    color: #0f172a;
}

.custom-lang-arrow {
    position: absolute;
    right: 10px;
    pointer-events: none;
    display: flex;
    align-items: center;
    opacity: 0.75;
    transition: transform 0.3s ease;
}

/* Hero Section Logo Styling */
.hero-logo-wrap {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 0.15em;
}

.hero-logo-img {
    height: clamp(2.8rem, 6.5vw, 5.2rem);
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
    filter: drop-shadow(0 0 25px rgba(0, 209, 255, 0.4));
    transition: filter 0.3s ease, transform 0.3s ease;
}

.hero-logo-wrap:hover .hero-logo-img {
    transform: scale(1.03);
}

html.light-theme .hero-logo-img {
    filter: drop-shadow(0 2px 10px rgba(15, 23, 42, 0.08)) !important;
}

/* Official Brand Logo Image Styles */
.brand-logo-wrap {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    z-index: 2;
}

.brand-logo-img {
    height: 28px;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 0 10px rgba(0, 209, 255, 0.35));
}

.brand-logo-wrap:hover .brand-logo-img {
    transform: scale(1.04);
}

/* Logo Theme Switching (html.dark vs html:not(.dark)) */
.logo-light-theme {
    display: none !important;
}
.logo-dark-theme {
    display: inline-block !important;
}

html:not(.dark) .logo-dark-theme {
    display: none !important;
}
html:not(.dark) .logo-light-theme {
    display: inline-block !important;
}

html:not(.dark) .brand-logo-img {
    filter: drop-shadow(0 1px 4px rgba(15, 23, 42, 0.1)) !important;
}

/* Global Rule: Completely disable italic styles across the entire website */
*, *::before, *::after, body, i, em, span, p, h1, h2, h3, h4, h5, h6, a, .font-serif, .hero-title-academy, .hero-welcome-text {
    font-style: normal !important;
}


/* ==========================================================================
   NAVIGATION (Premium Floating Glass Navbar)
   ========================================================================== */
.navbar {
    position: fixed !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 960px !important;
    z-index: 99999 !important;
    background: rgba(255, 255, 255, 0.05) !important; /* 95% transparent for extreme blur effect */
    backdrop-filter: blur(40px) saturate(200%) !important; /* Extremely high blur */
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border: 1.5px solid #ffffff !important; /* Pure solid white border 360 degrees */
    border-top: 1.5px solid #ffffff !important;
    border-bottom: 1.5px solid #ffffff !important;
    border-left: 1.5px solid #ffffff !important;
    border-right: 1.5px solid #ffffff !important;
    border-radius: 9999px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.2) !important;
    box-sizing: border-box !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.navbar:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #ffffff !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 255, 255, 0.3) !important;
    transform: translateX(-50%) translateY(-2px) scale(1.01) !important;
}
.navbar.scrolled {
    top: 10px !important;
    max-width: 920px !important;
    background: rgba(1, 15, 30, 0.4) !important; /* Keep it glassy but a bit darker when scrolled */
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border: 1.5px solid #ffffff !important;
    border-top: 1.5px solid #ffffff !important;
    border-bottom: 1.5px solid #ffffff !important;
    border-left: 1.5px solid #ffffff !important;
    border-right: 1.5px solid #ffffff !important;
    box-shadow: 0 14px 52px rgba(0, 0, 0, 0.65), 0 0 20px rgba(255, 255, 255, 0.2) !important;
}

.navbar-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 56px !important;
    padding: 0 24px !important;
    position: relative !important;
    white-space: nowrap !important;
}

.brand-logo-wrap {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    z-index: 2 !important;
}

.brand-logo-img {
    height: 26px !important;
    width: auto !important;
    display: block !important;
}

/* Theme-dependent logo visibility */
html:not(.light-theme) .logo-light-theme {
    display: none !important;
}
html:not(.light-theme) .logo-dark-theme {
    display: block !important;
}
html.light-theme .logo-dark-theme {
    display: none !important;
}
html.light-theme .logo-light-theme {
    display: block !important;
}

.nav-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    white-space: nowrap !important;
}

.nav-links li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-links a {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.70) !important;
    position: relative !important;
    padding: 6px 16px !important;
    border-radius: 9999px !important;
    transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
    background: transparent !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.nav-links a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.11) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset !important;
    transform: translateY(-1px) !important;
}

.nav-links a.active {
    color: #ffffff !important;
    font-weight: 700 !important;
    background: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset !important;
}

/* Light theme overrides */
html.light-theme .navbar {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}

html.light-theme .nav-links a {
    color: rgba(15, 23, 42, 0.75) !important;
}

html.light-theme .nav-links a:hover,
html.light-theme .nav-links a.active {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.08) !important;
}


/* Disable nav-indicator completely */
.nav-indicator {
    display: none !important;
}

/* Glassmorphic Theme Toggle Button matched to Navbar */
.theme-toggle {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
}

.theme-toggle-track {
    width: 52px !important;
    height: 28px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 6px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important;
}

.theme-toggle:hover .theme-toggle-track {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.theme-toggle-circle {
    position: absolute !important;
    width: 22px !important;
    height: 22px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    left: 3px !important;
    top: 2px !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    z-index: 3 !important;
}

html.light-theme .theme-toggle-circle {
    transform: translateX(24px) !important;
    background: #0f172a !important;
}

html.light-theme .theme-toggle-track {
    background: rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}

.theme-sun-icon, .theme-moon-icon {
    width: 14px !important;
    height: 14px !important;
    z-index: 1 !important;
    transition: color 0.3s ease !important;
}

.theme-sun-icon {
    color: #fbbf24 !important;
}

.theme-moon-icon {
    color: #cbd5e1 !important;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: var(--radius-md) !important;
    z-index: 2 !important;
    outline: none !important;
}

.mobile-menu-btn svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ===== GLOBAL RESPONSIVE UPDATES ===== */
@media (max-width: 992px) {
    :root {
        --space-12: 2rem;
        --space-16: 2.5rem;
        --space-24: 3rem;
        --space-32: 4rem;
        --space-48: 5rem;
        --text-5xl: clamp(2rem, 5vw, 3rem);
    }
    .container {
        padding: 0 var(--space-4);
    }
    .navbar {
        width: 100% !important;
        max-width: 100% !important;
        top: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
    }
    .navbar.scrolled {
        top: 0 !important;
        max-width: 100% !important;
    }
    .navbar-inner {
        padding: 0 16px !important;
    }
    /* Sidebar Mobile Menu */
    #nav-links {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; /* hidden by default */
        width: 280px !important;
        height: 100vh !important;
        background: var(--bg-body) !important;
        border-left: 1px solid var(--border-subtle) !important;
        padding: 80px 24px 30px !important;
        box-shadow: -10px 0 30px rgba(0,0,0,0.5) !important;
        z-index: 1000 !important;
        gap: 16px !important;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    #nav-links.mobile-active {
        right: 0 !important;
    }
    /* Mobile Overlay */
    .mobile-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(5px);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }
    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    #nav-links li {
        width: 100% !important;
    }
    #nav-links a {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 1.1rem !important;
        justify-content: flex-start !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 12px !important;
        transition: all 0.3s ease !important;
        color: var(--text-primary) !important;
    }
    #nav-links a:hover {
        background: var(--color-primary) !important;
        color: #fff !important;
        border-color: var(--color-primary) !important;
    }
    html.light-theme #nav-links {
        background: #ffffff !important;
        box-shadow: -10px 0 30px rgba(0,0,0,0.1) !important;
    }
    html.light-theme #nav-links a {
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
        color: #0f172a !important;
    }
    html.light-theme #nav-links a:hover {
        background: var(--color-primary) !important;
        color: #fff !important;
    }
    #mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-primary) !important;
        width: 44px !important;
        height: 44px !important;
        z-index: 1001 !important; /* above sidebar */
        position: relative !important;
    }
}
@media (max-width: 768px) {
    :root {
        --space-8: 1.5rem;
        --space-12: 1.5rem;
        --space-16: 2rem;
        --space-24: 2.5rem;
        --space-32: 3rem;
    }
    /* Mobile adjustments for buttons */
    .btn, .aurora-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    /* Adjusting Aurora text */
    .aurora-title-text {
        font-size: clamp(2.2rem, 7vw, 3rem) !important;
    }
    /* Footer stacking */
    .footer-ultra > .container > div {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

@media (max-width: 992px) {
    #about .container > div {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .parallax-element > div {
        padding: 15px 20px !important;
    }
}




/* Fix inline cyan colors in light mode */
html.light-theme [style*='#00d1ff'] {
    color: #0055ff !important;
}




/* ---- Light Mode Aurora Overrides ---- */
html.light-theme body {
    background: radial-gradient(circle at 10% 10%, #e0f7fa 0%, #ffffff 40%), radial-gradient(circle at 90% 90%, #e0f2fe 0%, #ffffff 40%) !important;
    background-attachment: fixed !important;
}
html.light-theme .aurora-hero-bg {
    background: transparent !important;
}
html.light-theme .aurora-hero-bg .orb-1 {
    background: radial-gradient(circle, rgba(0, 200, 200, 0.15) 0%, transparent 60%) !important;
}
html.light-theme .aurora-hero-bg .orb-2 {
    background: radial-gradient(circle, rgba(0, 150, 255, 0.12) 0%, transparent 60%) !important;
}
html.light-theme .aurora-hero-bg .orb-3 {
    background: radial-gradient(circle, rgba(100, 150, 255, 0.08) 0%, transparent 50%) !important;
}
html.light-theme .star-particles {
    background-image: none !important; /* Remove stars in light mode for cleaner look */
}
html.light-theme .mesh-blob {
    opacity: 0.15;
}

/* ==========================================================================
   PURE CRYSTAL CLEAR LIGHT MODE DESIGN SYSTEM (Microsoft Corporate Deep Blue & Pristine White)
   ========================================================================== */

/* 1. Page Background & Razor-Sharp Typography */
html.light-theme body {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* 2. Navbar - Pristine Floating Pill (Fixed Top Position, Zero Shift) */
html.light-theme .navbar {
    top: 16px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border-radius: 9999px !important;
}

html.light-theme .navbar.scrolled {
    top: 10px !important;
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .nav-links a {
    color: #334155 !important;
    font-weight: 600 !important;
}

html.light-theme .nav-links a:hover,
html.light-theme .nav-links a.active {
    color: #005a9e !important;
    background: #f8fafc !important;
}

/* 3. ZERO FOG / ZERO SMOKE / ZERO BLURRY ORBS */
html.light-theme section,
html.light-theme .section,
html.light-theme .hero-section-aurora,
html.light-theme .about-section,
html.light-theme .books-section,
html.light-theme .services-section,
html.light-theme .contact-section-premium {
    background: transparent !important;
    background-color: transparent !important;
}

html.light-theme .aurora-hero-bg {
    background: #ffffff !important;
}

html.light-theme .hero-overlay {
    background: transparent !important;
}

html.light-theme .aurora-orb,
html.light-theme .glass-orb,
html.light-theme .mesh-blob,
html.light-theme .star-particles,
html.light-theme .orb-1,
html.light-theme .orb-2,
html.light-theme .orb-3 {
    display: none !important;
    opacity: 0 !important;
}

/* 4. Crisp High-Contrast Titles & Text */
html.light-theme h1,
html.light-theme h2,
html.light-theme h3,
html.light-theme h4,
html.light-theme h5,
html.light-theme .section-title,
html.light-theme .contact-main-title,
html.light-theme .about-title,
html.light-theme .books-title,
html.light-theme .services-title {
    color: #0f172a !important;
}

html.light-theme p,
html.light-theme .section-subtitle,
html.light-theme .hero-subtitle,
html.light-theme .contact-subtitle,
html.light-theme .about-subtitle,
html.light-theme .books-subtitle,
html.light-theme .services-subtitle {
    color: #334155 !important;
}

html.light-theme .hero-subtitle strong,
html.light-theme .hero-subtitle b,
html.light-theme .about-desc strong {
    color: #005a9e !important;
}

/* Hero Title Light Mode */
html.light-theme .aurora-title-text,
html.light-theme .aurora-title-text * {
    color: #0f172a !important;
    background: none !important;
    -webkit-text-fill-color: #0f172a !important;
    text-shadow: none !important;
}

html.light-theme .aurora-title-text span[style*="color"],
html.light-theme .title-accent {
    color: #005a9e !important;
    -webkit-text-fill-color: #005a9e !important;
    background: none !important;
}

/* 5. Pure White Razor-Sharp Cards */
html.light-theme .book-card,
html.light-theme .service-card,
html.light-theme .stat-card,
html.light-theme .course-card,
html.light-theme .service-list-item,
html.light-theme .about-image-card,
html.light-theme .about-image-container,
html.light-theme .contact-info-card-premium,
html.light-theme .contact-form-card-premium,
html.light-theme .hero-subtitle-card,
html.light-theme .mission-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    border-radius: 20px !important;
    color: #0f172a !important;
}

html.light-theme .book-card:hover,
html.light-theme .service-card:hover,
html.light-theme .stat-card:hover,
html.light-theme .contact-info-card-premium:hover,
html.light-theme .contact-form-card-premium:hover {
    box-shadow: 0 12px 35px rgba(0, 90, 158, 0.12) !important;
    border-color: #005a9e !important;
    transform: translateY(-4px) !important;
}

/* 6. Quote Card Accent Tile */
html.light-theme .quote-card,
html.light-theme .about-quote-box {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #005a9e !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme .quote-card *,
html.light-theme .about-quote-box * {
    color: #1e293b !important;
}

/* 7. Badges & Stat Cards */
html.light-theme .insan-badge,
html.light-theme .academy-badge {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme .stat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

html.light-theme .stat-number,
html.light-theme .stat-card-number,
html.light-theme .stat-card h3,
html.light-theme .stat-card div[style*="font-size"] {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html.light-theme .stat-label,
html.light-theme .stat-card-label,
html.light-theme .stat-card p {
    color: #64748b !important;
    font-weight: 600 !important;
}

/* --- Book & Service Card Buttons & Cards --- */
.book-card-upgraded,
.service-card-upgraded {
    border: 1.5px solid #ffffff !important;
    border-top: 1.5px solid #ffffff !important;
    border-bottom: 1.5px solid #ffffff !important;
    border-left: 1.5px solid #ffffff !important;
    border-right: 1.5px solid #ffffff !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 255, 255, 0.12) !important;
}

.book-card-upgraded:hover,
.service-card-upgraded:hover {
    border: 1.5px solid #ffffff !important;
    border-top: 1.5px solid #ffffff !important;
    border-bottom: 1.5px solid #ffffff !important;
    border-left: 1.5px solid #ffffff !important;
    border-right: 1.5px solid #ffffff !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 255, 255, 0.3) !important;
}

.book-btn-details {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    backdrop-filter: blur(12px) !important;
}

.book-btn-details:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.book-btn-order {
    background: #ffffff !important;
    border: 1.5px solid #ffffff !important;
    color: #011324 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.25) !important;
}

.book-btn-order:hover {
    background: #f8fafc !important;
    border-color: #ffffff !important;
    color: #011324 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4) !important;
}

.service-btn-cta {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1.5px solid #ffffff !important;
    border-top: 1.5px solid #ffffff !important;
    border-bottom: 1.5px solid #ffffff !important;
    border-left: 1.5px solid #ffffff !important;
    border-right: 1.5px solid #ffffff !important;
    color: #ffffff !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15) !important;
}

.service-btn-cta:hover {
    background: #ffffff !important;
    border: 1.5px solid #ffffff !important;
    border-top: 1.5px solid #ffffff !important;
    border-bottom: 1.5px solid #ffffff !important;
    border-left: 1.5px solid #ffffff !important;
    border-right: 1.5px solid #ffffff !important;
    color: #011324 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.35) !important;
}

/* 8. Corporate Deep Blue & Dark Slate Buttons */
html.light-theme .primary-aurora,
html.light-theme .btn-primary,
html.light-theme .book-btn-order {
    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25) !important;
}

html.light-theme .primary-aurora:hover,
html.light-theme .btn-primary:hover,
html.light-theme .book-btn-order:hover {
    background: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

html.light-theme .secondary-aurora,
html.light-theme .btn-secondary,
html.light-theme .book-btn-details,
html.light-theme .contact-aurora {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

html.light-theme .secondary-aurora:hover,
html.light-theme .btn-secondary:hover,
html.light-theme .book-btn-details:hover,
html.light-theme .contact-aurora:hover {
    background: #f8fafc !important;
    border-color: #0f172a !important;
    color: #0f172a !important;
}

html.light-theme .contact-aurora .neon-icon {
    background: linear-gradient(135deg, #0f172a 0%, #000000 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.25) !important;
}

/* 9. Service Cards Light Mode */
html.light-theme .service-card h3,
html.light-theme .service-card-title {
    color: #0f172a !important;
}

html.light-theme .service-card p,
html.light-theme .service-card-desc {
    color: #475569 !important;
}

html.light-theme .service-card-icon,
html.light-theme .service-card div[style*="background"] {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #005a9e !important;
}

html.light-theme .service-card svg {
    color: #005a9e !important;
}

/* 10. Book Cards Light Mode */
html.light-theme .book-card h3,
html.light-theme .book-card-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html.light-theme .book-card span,
html.light-theme .book-card-author {
    color: #64748b !important;
}

html.light-theme .book-card div[style*="background: #ffffff"] {
    background: #ffffff !important;
}

/* ======================================================================
   11. FOOTER — FULL LIGHT MODE OVERRIDE
   ====================================================================== */
html.light-theme .footer-ultra {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

html.light-theme .footer-heading-ultra {
    color: #0f172a !important;
}

html.light-theme .footer-link-ultra {
    color: #475569 !important;
}

html.light-theme .footer-link-ultra:hover {
    color: #0078d4 !important;
}

/* ======================================================================
   12. SECTION-LEVEL DARK BACKGROUND & OVERLAY KILLER (Light Mode)
   All sections have inline dark gradients — force them white here.
   ====================================================================== */

/* --- About Section (#about) --- */
html.light-theme #about {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light-theme #about > div[style*="background-image"],
html.light-theme #about > div[style*="radial-gradient"],
html.light-theme #about > div[style*="filter: blur"] {
    display: none !important;
    opacity: 0 !important;
}

/* About Author Card */
html.light-theme #about .about-sticky > div {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

html.light-theme #about .about-sticky > div span {
    background: rgba(0, 120, 212, 0.08) !important;
    color: #0078d4 !important;
    border-color: rgba(0, 120, 212, 0.25) !important;
    backdrop-filter: none !important;
}

html.light-theme #about .about-sticky > div h3 {
    color: #0f172a !important;
}

html.light-theme #about .about-sticky > div p {
    color: #475569 !important;
}

html.light-theme #about .about-sticky > div > div[style*="border: 2px"] {
    border-color: #e2e8f0 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

/* About Right Side — Labels & Titles */
html.light-theme #about span[style*="color: #38bdf8"] {
    color: #0078d4 !important;
}

html.light-theme #about span[style*="color: #38bdf8"] span[style*="background: #38bdf8"] {
    background: #0078d4 !important;
    box-shadow: 0 0 12px rgba(0, 120, 212, 0.6) !important;
}

html.light-theme #about h2 {
    color: #0f172a !important;
    text-shadow: none !important;
}

html.light-theme #about > .container > .about-grid > div:last-child > p {
    color: #334155 !important;
}

/* Stat Cards in About */
html.light-theme .stat-card-luxury {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 2px solid #0078d4 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

html.light-theme .stat-card-luxury:hover {
    border-color: #0078d4 !important;
    border-top-color: #0078d4 !important;
    box-shadow: 0 12px 30px rgba(0, 120, 212, 0.12) !important;
}

html.light-theme .stat-card-luxury::before {
    background: linear-gradient(90deg, transparent, rgba(0, 120, 212, 0.06), transparent) !important;
}

html.light-theme .stat-card-luxury h3 {
    background: none !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
}

html.light-theme .stat-card-luxury p {
    color: #475569 !important;
}

/* About Quote Card */
html.light-theme #about div[style*="border-left: 4px solid #38bdf8"] {
    background: #f0f9ff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #0078d4 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme #about div[style*="border-left: 4px solid #38bdf8"] p {
    color: #1e293b !important;
}

html.light-theme #about div[style*="border-left: 4px solid #38bdf8"] span[style*="color: #38bdf8"] {
    color: #0078d4 !important;
}

/* About Author Bio Button */
html.light-theme #about .aurora-btn {
    background: linear-gradient(135deg, #0078d4 0%, #00b4d8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 120, 212, 0.25) !important;
}

/* --- Books Section (#books) --- */
html.light-theme #books {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light-theme #books > div[style*="background-image"],
html.light-theme #books > div[style*="radial-gradient"],
html.light-theme #books > div[style*="filter: blur"] {
    display: none !important;
    opacity: 0 !important;
}

/* Books Section Badge */
html.light-theme #books span[style*="backdrop-filter"] {
    background: rgba(0, 120, 212, 0.08) !important;
    border: 1px solid rgba(0, 120, 212, 0.25) !important;
    color: #0078d4 !important;
    backdrop-filter: none !important;
}

html.light-theme #books span[style*="backdrop-filter"] span[style*="background: #ffffff"] {
    background: #0078d4 !important;
    box-shadow: 0 0 10px rgba(0, 120, 212, 0.6) !important;
}

html.light-theme #books h2 {
    color: #0f172a !important;
}

html.light-theme #books > .container > div:first-child p {
    color: #475569 !important;
}

/* Book Cards */
html.light-theme .book-card-upgraded,
html.light-theme #books .card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .book-card-upgraded:hover,
html.light-theme #books .card:hover {
    box-shadow: 0 12px 35px rgba(0, 120, 212, 0.12) !important;
    border-color: #0078d4 !important;
}

/* Book Cover Container */
html.light-theme #books .card > div:first-child {
    background: #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html.light-theme #books .card > div:first-child > div[style*="background-image"] {
    opacity: 0.1 !important;
    mix-blend-mode: multiply !important;
}

html.light-theme #books .card > div:first-child > div[style*="linear-gradient"] {
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.1) 0%, rgba(241, 245, 249, 0.5) 100%) !important;
}

/* Book Card Text */
html.light-theme #books .card .card-content span {
    color: #64748b !important;
}

html.light-theme #books .card .card-content h3 {
    color: #0f172a !important;
}

/* Book Card Buttons */
html.light-theme #books .card .card-content a.btn:first-child {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    backdrop-filter: none !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.light-theme #books .card .card-content a.btn:first-child:hover {
    background: #0f172a !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.25) !important;
}

html.light-theme #books .card .card-content a.btn:last-child {
    background: #005a9e !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(0, 90, 158, 0.25) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.light-theme #books .card .card-content a.btn:last-child:hover {
    background: #004578 !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 28px rgba(0, 90, 158, 0.4) !important;
}

html.light-theme #books .card .card-content div[style*="border-top"] {
    border-top-color: #e2e8f0 !important;
}

/* --- Services/Consulting Section (#consulting) --- */
html.light-theme #consulting {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light-theme #consulting > div[style*="background-image"],
html.light-theme #consulting > div[style*="radial-gradient"],
html.light-theme #consulting > div[style*="filter: blur"] {
    display: none !important;
    opacity: 0 !important;
}

/* Services Section Badge */
html.light-theme #consulting span[style*="backdrop-filter"] {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme #consulting span[style*="backdrop-filter"] > span:first-child {
    background: #005a9e !important;
    box-shadow: 0 0 8px rgba(0, 90, 158, 0.5) !important;
}

html.light-theme #consulting span[style*="backdrop-filter"] > span:last-child {
    background: transparent !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

html.light-theme #consulting h2 {
    color: #0f172a !important;
}

html.light-theme #consulting > .container > div:first-child p {
    color: #475569 !important;
}

/* Service Cards */
html.light-theme #consulting .reveal-up[style*="background: rgba(255"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

html.light-theme #consulting .reveal-up[style*="background: rgba(255"]:hover {
    box-shadow: 0 12px 35px rgba(0, 90, 158, 0.12) !important;
    border-color: #005a9e !important;
}

/* Service Card Inner Glow Kill */
html.light-theme #consulting .reveal-up > div[style*="radial-gradient"] {
    display: none !important;
}

/* Service Card Icon Box */
html.light-theme #consulting div[style*="background: rgba(255, 255, 255, 0.08)"][style*="border-radius: 18px"] {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #005a9e !important;
    backdrop-filter: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme #consulting h3 {
    color: #0f172a !important;
}

html.light-theme #consulting div[style*="color: rgba(255, 255, 255, 0.75)"] {
    color: #475569 !important;
}

/* Service Card CTA Button */
html.light-theme #consulting a.btn,
html.light-theme #consulting a.btn[style*="background: rgba(255, 255, 255, 0.08)"],
html.light-theme .service-btn-cta {
    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.2) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.light-theme #consulting a.btn:hover,
html.light-theme #consulting a.btn[style*="background: rgba(255, 255, 255, 0.08)"]:hover,
html.light-theme .service-btn-cta:hover {
    background: #005a9e !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 28px rgba(0, 90, 158, 0.35) !important;
}

/* --- Mission/Legacy Section (#legacy) --- */
html.light-theme #legacy {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light-theme #legacy > div[style*="background-image"],
html.light-theme #legacy > div[style*="radial-gradient"],
html.light-theme #legacy > div[style*="filter: blur"] {
    display: none !important;
    opacity: 0 !important;
}

/* Mission Section Badge */
html.light-theme #legacy span[style*="backdrop-filter"] {
    background: rgba(0, 120, 212, 0.08) !important;
    border: 1px solid rgba(0, 120, 212, 0.25) !important;
    color: #0078d4 !important;
    backdrop-filter: none !important;
}

html.light-theme #legacy span[style*="backdrop-filter"] span[style*="background: #ffffff"] {
    background: #0078d4 !important;
    box-shadow: 0 0 10px rgba(0, 120, 212, 0.6) !important;
}

html.light-theme #legacy h2 {
    color: #0f172a !important;
}

/* Mission Quote Card */
html.light-theme #legacy div[style*="backdrop-filter: blur(20px)"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}

html.light-theme #legacy div[style*="backdrop-filter: blur(20px)"] h3 {
    color: #0f172a !important;
    text-shadow: none !important;
}

html.light-theme #legacy div[style*="backdrop-filter: blur(20px)"] p {
    color: #475569 !important;
}

html.light-theme #legacy div[style*="backdrop-filter: blur(20px)"] div[style*="opacity: 0.12"] {
    color: #0078d4 !important;
    opacity: 0.08 !important;
}

html.light-theme #legacy div[style*="backdrop-filter: blur(20px)"] div[style*="background: linear-gradient(90deg, transparent, #38bdf8"] {
    background: linear-gradient(90deg, transparent, #0078d4, transparent) !important;
    box-shadow: 0 0 12px rgba(0, 120, 212, 0.4) !important;
}

/* --- Contact Section (#contact) --- */
html.light-theme #contact {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light-theme #contact > div[style*="background-image"],
html.light-theme #contact > div[style*="radial-gradient"],
html.light-theme #contact > div[style*="filter: blur"] {
    display: none !important;
    opacity: 0 !important;
}

/* --- Footer Dark Overlay & Background Image Kill --- */
html.light-theme .footer-ultra > div[style*="background-image"],
html.light-theme .footer-ultra > div[style*="linear-gradient"],
html.light-theme .footer-ultra > div[style*="radial-gradient"],
html.light-theme .footer-ultra > div[style*="filter: blur"] {
    display: none !important;
    opacity: 0 !important;
}

html.light-theme .footer-ultra::before {
    display: none !important;
}

/* Footer Brand Card */
html.light-theme .footer-brand-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme #books .card .card-content div[style*="border-top"] {
    border-top-color: #e2e8f0 !important;
}

/* --- Services/Consulting Section (#consulting) --- */
html.light-theme #consulting {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light-theme #consulting > div[style*="background-image"],
html.light-theme #consulting > div[style*="radial-gradient"],
html.light-theme #consulting > div[style*="filter: blur"] {
    display: none !important;
    opacity: 0 !important;
}

/* Services Section Badge */
html.light-theme #consulting span[style*="backdrop-filter"] {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme #consulting span[style*="backdrop-filter"] > span:first-child {
    background: #005a9e !important;
    box-shadow: 0 0 8px rgba(0, 90, 158, 0.5) !important;
}

html.light-theme #consulting span[style*="backdrop-filter"] > span:last-child {
    background: transparent !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

html.light-theme #consulting h2 {
    color: #0f172a !important;
}

html.light-theme #consulting > .container > div:first-child p {
    color: #475569 !important;
}

/* Service Cards */
html.light-theme #consulting .reveal-up[style*="background: rgba(255"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

html.light-theme #consulting .reveal-up[style*="background: rgba(255"]:hover {
    box-shadow: 0 12px 35px rgba(0, 90, 158, 0.12) !important;
    border-color: #005a9e !important;
}

/* Service Card Inner Glow Kill */
html.light-theme #consulting .reveal-up > div[style*="radial-gradient"] {
    display: none !important;
}

/* Service Card Icon Box */
html.light-theme #consulting div[style*="background: rgba(255, 255, 255, 0.08)"][style*="border-radius: 18px"] {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #005a9e !important;
    backdrop-filter: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme #consulting h3 {
    color: #0f172a !important;
}

html.light-theme #consulting div[style*="color: rgba(255, 255, 255, 0.75)"] {
    color: #475569 !important;
}

/* Service Card CTA Button */
html.light-theme #consulting a.btn,
html.light-theme #consulting a.btn[style*="background: rgba(255, 255, 255, 0.08)"],
html.light-theme .service-btn-cta {
    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.2) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.light-theme #consulting a.btn:hover,
html.light-theme #consulting a.btn[style*="background: rgba(255, 255, 255, 0.08)"]:hover,
html.light-theme .service-btn-cta:hover {
    background: #005a9e !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 28px rgba(0, 90, 158, 0.35) !important;
}

/* --- Mission/Legacy Section (#legacy) --- */
html.light-theme #legacy {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light-theme #legacy > div[style*="background-image"],
html.light-theme #legacy > div[style*="radial-gradient"],
html.light-theme #legacy > div[style*="filter: blur"] {
    display: none !important;
    opacity: 0 !important;
}

/* Mission Section Badge */
html.light-theme #legacy span[style*="backdrop-filter"] {
    background: rgba(0, 120, 212, 0.08) !important;
    border: 1px solid rgba(0, 120, 212, 0.25) !important;
    color: #0078d4 !important;
    backdrop-filter: none !important;
}

html.light-theme #legacy span[style*="backdrop-filter"] span[style*="background: #ffffff"] {
    background: #0078d4 !important;
    box-shadow: 0 0 10px rgba(0, 120, 212, 0.6) !important;
}

html.light-theme #legacy h2 {
    color: #0f172a !important;
}

/* Mission Quote Card */
html.light-theme #legacy div[style*="backdrop-filter: blur(20px)"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}

html.light-theme #legacy div[style*="backdrop-filter: blur(20px)"] h3 {
    color: #0f172a !important;
    text-shadow: none !important;
}

html.light-theme #legacy div[style*="backdrop-filter: blur(20px)"] p {
    color: #475569 !important;
}

html.light-theme #legacy div[style*="backdrop-filter: blur(20px)"] div[style*="opacity: 0.12"] {
    color: #0078d4 !important;
    opacity: 0.08 !important;
}

html.light-theme #legacy div[style*="backdrop-filter: blur(20px)"] div[style*="background: linear-gradient(90deg, transparent, #38bdf8"] {
    background: linear-gradient(90deg, transparent, #0078d4, transparent) !important;
    box-shadow: 0 0 12px rgba(0, 120, 212, 0.4) !important;
}

/* --- Contact Section (#contact) --- */
html.light-theme #contact {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light-theme #contact > div[style*="background-image"],
html.light-theme #contact > div[style*="radial-gradient"],
html.light-theme #contact > div[style*="filter: blur"] {
    display: none !important;
    opacity: 0 !important;
}

/* --- Footer Dark Overlay & Background Image Kill --- */
html.light-theme .footer-ultra > div[style*="background-image"],
html.light-theme .footer-ultra > div[style*="linear-gradient"],
html.light-theme .footer-ultra > div[style*="radial-gradient"],
html.light-theme .footer-ultra > div[style*="filter: blur"] {
    display: none !important;
    opacity: 0 !important;
}

html.light-theme .footer-ultra::before {
    display: none !important;
}

/* Footer Brand Card */
html.light-theme .footer-brand-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme .footer-brand-card > div[style*="radial-gradient"] {
    display: none !important;
}

html.light-theme .footer-brand-card div[style*="background: rgba(56, 189, 248"] {
    background: rgba(0, 120, 212, 0.08) !important;
    border: 1px solid rgba(0, 120, 212, 0.2) !important;
    color: #0078d4 !important;
}

html.light-theme .footer-brand-card div[style*="background: rgba(56, 189, 248"] span[style*="background: #38bdf8"] {
    background: #0078d4 !important;
    box-shadow: 0 0 8px rgba(0, 120, 212, 0.6) !important;
}

/* =========================================================================
   GLOBAL GLASSMORPHISM & AMBIENT BACKGROUND
   ========================================================================= */

/* 1. Global Ambient Background */
.global-ambient-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -9999;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg-base); /* fallback */
}
.ambient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    animation: blob-float 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
.ambient-blob.blob-1 {
    top: -10%; left: -10%; width: 50vw; height: 50vw;
    background: rgba(56, 189, 248, 0.4); /* cyan */
    animation-delay: 0s;
}
.ambient-blob.blob-2 {
    bottom: -10%; right: -10%; width: 60vw; height: 60vw;
    background: rgba(37, 99, 235, 0.3); /* royal blue instead of emerald */
    animation-delay: -5s;
}
.ambient-blob.blob-3 {
    top: 40%; left: 30%; width: 40vw; height: 40vw;
    background: rgba(2, 132, 199, 0.35); /* sky blue */
    animation-delay: -10s;
}
html.light-theme .ambient-blob { opacity: 0.6; }
html.light-theme .ambient-blob.blob-1 { background: rgba(56, 189, 248, 0.5); }
html.light-theme .ambient-blob.blob-2 { background: rgba(245, 158, 11, 0.4); } /* amber/gold */
html.light-theme .ambient-blob.blob-3 { background: rgba(236, 72, 153, 0.3); } /* pink */

@keyframes blob-float {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(5%, 10%) scale(1.1); }
    100% { transform: translate(-5%, -5%) scale(0.9); }
}

/* 2. Make body and sections transparent so background shows through */
body, .section, footer, header {
    background: transparent !important;
}

/* 3. Global Glassmorphism for Cards and Containers */
.card, .stat-card-luxury, .footer-brand-card, .contact-card-ultra, .glass-panel, .form-control {
    background: rgba(20, 30, 45, 0.3) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}
html.light-theme .card, html.light-theme .stat-card-luxury, html.light-theme .footer-brand-card, html.light-theme .contact-card-ultra, html.light-theme .form-control {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 32px rgba(30, 41, 59, 0.05) !important;
}

/* 4. Stronger Blur for Navbar */
.navbar, .navbar.scrolled {
    background: rgba(1, 19, 36, 0.4) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    border: 1.5px solid #ffffff !important;
    border-top: 1.5px solid #ffffff !important;
    border-bottom: 1.5px solid #ffffff !important;
    border-left: 1.5px solid #ffffff !important;
    border-right: 1.5px solid #ffffff !important;
}
html.light-theme .navbar, html.light-theme .navbar.scrolled {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
    border-top: 1.5px solid rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.15) !important;
    border-left: 1.5px solid rgba(0, 0, 0, 0.15) !important;
    border-right: 1.5px solid rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   RESPONSIVE QUALITY PASS
   Keeps the editorial look intact while making every interactive surface
   comfortable on phones, tablets and compact laptops.
   ========================================================================== */
html {
    scroll-padding-top: 84px;
}

.section {
    isolation: isolate;
}

.section > .container,
.cards-grid,
.services-grid,
.contact-grid-layout-premium {
    min-width: 0;
}

/* Restore the intended dark section depth after the global glass layer. */
html:not(.light-theme) #about {
    background: linear-gradient(180deg, #010a16 0%, #011428 50%, #010a16 100%) !important;
}

html:not(.light-theme) #books {
    background: linear-gradient(180deg, #010712 0%, #011224 50%, #010712 100%) !important;
}

html:not(.light-theme) #consulting {
    background: linear-gradient(180deg, #010914 0%, #011528 50%, #010914 100%) !important;
}

html:not(.light-theme) #legacy,
html:not(.light-theme) #contact {
    background: linear-gradient(180deg, #010712 0%, #011428 50%, #010712 100%) !important;
}

@media (max-width: 992px) {
    .navbar,
    .navbar.scrolled {
        top: max(12px, env(safe-area-inset-top)) !important;
        width: calc(100% - 24px) !important;
        max-width: 720px !important;
        border: 1px solid rgba(255, 255, 255, 0.42) !important;
        border-radius: 18px !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36) !important;
    }

    .navbar-inner {
        height: 58px !important;
        padding: 0 16px !important;
    }

    #nav-links {
        top: max(12px, env(safe-area-inset-top)) !important;
        right: min(-84vw, -336px) !important;
        width: min(84vw, 336px) !important;
        height: calc(100vh - max(24px, env(safe-area-inset-top))) !important;
        padding: 82px 16px 24px !important;
        gap: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 20px !important;
        background: rgba(1, 19, 36, 0.94) !important;
        backdrop-filter: blur(28px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
    }

    #nav-links.mobile-active {
        right: 12px !important;
    }

    #nav-links a {
        min-height: 52px;
        padding: 14px 16px !important;
        border-radius: 14px !important;
    }

    .mobile-overlay {
        background: rgba(0, 9, 20, 0.58) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .section {
        padding: clamp(4rem, 9vw, 5.5rem) 0 !important;
        overflow: clip !important;
    }

    .hero-section {
        padding-top: 100px !important;
        padding-bottom: 44px !important;
    }

    .hero-actions .aurora-btn {
        width: auto !important;
    }
}

@media (max-width: 768px) {
    .container {
        width: min(100% - 32px, 680px) !important;
        padding: 0 !important;
    }

    .section-ambient-glow {
        width: 132vw !important;
        height: 72vw !important;
        max-width: none !important;
        filter: blur(64px) !important;
        opacity: 0.78;
    }

    .about-grid {
        gap: 28px !important;
    }

    .about-sticky {
        margin-bottom: 0 !important;
    }

    .cards-grid,
    .services-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    #books .card > div:first-child {
        height: min(370px, 92vw) !important;
        padding: 22px !important;
    }

    #books .card > div:first-child img {
        max-height: min(300px, 72vw) !important;
    }

    #books .card .card-content,
    .services-grid > .reveal-up {
        padding: 22px !important;
    }

    .mission-card {
        margin: 28px auto !important;
        padding: 38px 24px !important;
        border-radius: 24px !important;
    }

    .contact-section-premium {
        min-height: auto !important;
    }

    .contact-header-block {
        margin-bottom: 28px !important;
    }

    .contact-main-title {
        font-size: clamp(2rem, 9vw, 2.6rem) !important;
        line-height: 1.08 !important;
    }

    .contact-grid-layout-premium {
        gap: 18px !important;
    }

    .contact-info-card-premium,
    .contact-form-card-premium {
        padding: 24px !important;
        border-radius: 20px !important;
    }

    .contact-info-header {
        align-items: flex-start !important;
        gap: 14px !important;
        margin-bottom: 24px !important;
    }

    .contact-info-item-premium {
        gap: 12px !important;
        padding: 14px !important;
    }

    .contact-info-item-value,
    .contact-address-text {
        overflow-wrap: anywhere;
    }

    .footer-ultra {
        padding-top: 64px !important;
    }
}

@media (max-width: 560px) {
    html {
        scroll-padding-top: 76px;
    }

    .navbar,
    .navbar.scrolled {
        width: calc(100% - 20px) !important;
        top: max(10px, env(safe-area-inset-top)) !important;
        border-radius: 16px !important;
    }

    .navbar-inner {
        height: 54px !important;
        padding: 0 14px !important;
    }

    .brand-logo-img {
        height: 24px !important;
    }

    .nav-controls {
        gap: 8px !important;
    }

    #mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .hero-section {
        min-height: 760px !important;
        height: auto !important;
        padding: 94px 0 30px !important;
    }

    #hero .parallax-element {
        margin-bottom: 18px !important;
    }

    #hero .insan-badge {
        max-width: 100%;
        padding: 8px 14px !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.13em !important;
        white-space: nowrap;
    }

    #hero .hero-title {
        gap: 8px !important;
        margin-bottom: 18px !important;
    }

    #hero .hero-logo-wrap {
        margin-right: 0 !important;
    }

    #hero .hero-logo-img {
        height: 54px !important;
        transform: scale(1) !important;
    }

    #hero .aurora-title-text {
        font-size: clamp(2.15rem, 12.5vw, 3rem) !important;
    }

    .hero-subtitle-card {
        padding: 18px 20px !important;
        border-radius: 20px !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    .hero-actions {
        gap: 12px !important;
    }

    .hero-actions .aurora-btn {
        width: 100% !important;
        min-height: 58px;
        justify-content: center !important;
        padding: 15px 20px !important;
    }

    .mission-card h3 {
        font-size: clamp(1.6rem, 7.8vw, 2.1rem) !important;
        line-height: 1.3 !important;
    }

    .mission-card p {
        font-size: 1rem !important;
    }

    .contact-badge-premium {
        max-width: 100%;
        padding: 9px 14px !important;
        font-size: 0.64rem !important;
        letter-spacing: 0.1em !important;
    }
}

@media (max-width: 380px) {
    .container {
        width: min(100% - 24px, 680px) !important;
    }

    #nav-links {
        width: calc(100vw - 24px) !important;
        right: calc(-100vw + 12px) !important;
    }

    #nav-links.mobile-active {
        right: 12px !important;
    }

    #books .card .card-content > div:last-child {
        flex-direction: column !important;
    }

    #books .card .card-content > div:last-child .btn {
        width: 100% !important;
    }
}

/* ==========================================================================
   MOTION SYSTEM
   A small set of slow, purposeful movements gives the site depth without
   competing with the content or making touch devices work harder.
   ========================================================================== */
@keyframes hero-background-breathe {
    0%, 100% { transform: scale(1.01) translate3d(0, 0, 0); }
    50% { transform: scale(1.075) translate3d(0, -0.8%, 0); }
}

@keyframes brand-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -7px, 0); }
}

@keyframes badge-breathe {
    0%, 100% { transform: translate3d(0, 0, 0); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 20px rgba(56, 189, 248, 0.15); }
    50% { transform: translate3d(0, -3px, 0); box-shadow: 0 15px 36px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 28px rgba(56, 189, 248, 0.24); }
}

@keyframes title-sheen {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes ambient-glow-pulse {
    0%, 100% { opacity: 0.62; }
    50% { opacity: 0.92; }
}

@media (prefers-reduced-motion: no-preference) {
    .motion-ready .hero-bg-image {
        animation: hero-background-breathe 18s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        will-change: transform;
    }

    .motion-ready .hero-logo-wrap {
        animation: brand-float 5.5s ease-in-out infinite;
        will-change: transform;
    }

    .motion-ready .insan-badge {
        animation: badge-breathe 4.5s ease-in-out infinite;
        will-change: transform, box-shadow;
    }

    .motion-ready .aurora-title-text * {
        background-size: 180% 180% !important;
        animation: title-sheen 9s ease-in-out infinite;
    }

    .motion-ready .section-ambient-glow {
        animation: ambient-glow-pulse 9s ease-in-out infinite;
    }

    .motion-ready #about .section-ambient-glow { animation-delay: -2s; }
    .motion-ready #consulting .section-ambient-glow { animation-delay: -4s; }
    .motion-ready #legacy .section-ambient-glow { animation-delay: -6s; }
    .motion-ready #contact .section-ambient-glow { animation-delay: -3s; }

    @media (hover: hover) and (pointer: fine) {
        .card,
        .services-grid > .reveal-up,
        .mission-card,
        .contact-info-card-premium,
        .contact-form-card-premium {
            will-change: transform;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Contact form is for questions, consulting, and partnership enquiries only. */
.contact-form-purpose {
    margin: -2px 0 2px;
    padding: 12px 14px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    line-height: 1.55;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Author profile: concise verified outcomes, clear hierarchy, responsive cards. */
.author-modal-achievement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.author-modal-achievement {
    min-height: 108px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.author-modal-achievement strong {
    color: #ffffff;
    font-size: clamp(1.35rem, 2.7vw, 1.85rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.author-modal-achievement span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.4;
}

.author-modal-focus-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.author-modal-focus-list span {
    padding: 9px 11px;
    color: rgba(255, 255, 255, 0.83);
    font-size: 0.78rem;
    font-weight: 650;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}

html.light-theme .contact-form-purpose {
    color: rgba(17, 17, 17, 0.72);
    border-color: rgba(17, 17, 17, 0.13);
    background: rgba(255, 255, 255, 0.72);
}

html.light-theme .author-modal-achievement {
    border-color: rgba(17, 17, 17, 0.14);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 1px 0 #ffffff;
}

html.light-theme .author-modal-achievement strong,
html.light-theme .author-modal-achievement span,
html.light-theme .author-modal-focus-list span {
    color: #111111;
}

html.light-theme .author-modal-focus-list span {
    border-color: rgba(17, 17, 17, 0.14);
    background: rgba(255, 255, 255, 0.7);
}

@media (max-width: 520px) {
    .author-modal-achievement-grid {
        grid-template-columns: 1fr;
    }

    .author-modal-achievement {
        min-height: 88px;
    }

    .author-modal-focus-list span {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Kodeks detail: isolated cover plus a separate editorial background. */
.book-detail-section[data-book-theme="biznes-kodeksi"] {
    background:
        linear-gradient(110deg, rgba(1, 9, 20, 0.9), rgba(3, 21, 47, 0.7)),
        url("../images/books/kodeks-detail-bg-v1.5e0001d8d102.png") center / cover no-repeat !important;
}

.book-detail-section[data-book-theme="biznes-kodeksi"]::after {
    background-image: none !important;
}

.book-detail-section[data-book-theme="biznes-kodeksi"] .book-gallery-stage {
    background:
        linear-gradient(145deg, rgba(2, 13, 30, 0.52), rgba(2, 8, 18, 0.22)),
        url("../images/books/kodeks-detail-bg-v1.5e0001d8d102.png") center / cover no-repeat !important;
    border-color: rgba(113, 188, 255, 0.42) !important;
    box-shadow: 0 26px 56px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.book-detail-section[data-book-theme="biznes-kodeksi"] .book-gallery-stage > div:first-child {
    background: linear-gradient(180deg, rgba(1, 8, 19, 0.08), rgba(1, 8, 19, 0.38)) !important;
}

.book-detail-section .book-cover-isolated {
    background: transparent !important;
    filter: drop-shadow(0 28px 32px rgba(0, 0, 0, 0.56)) !important;
    transform: translateZ(0);
}

.book-detail-section[data-book-theme="biznes-kodeksi"] #main-book-img.book-cover-isolated {
    max-width: min(82%, 370px) !important;
}

.book-detail-section .book-meta-grid {
    position: relative;
    isolation: isolate;
    gap: 14px !important;
    padding: 14px !important;
    border-radius: 22px !important;
}

.book-detail-section .book-meta-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.11), transparent 42%, rgba(255, 255, 255, 0.04));
    pointer-events: none;
}

.book-detail-section .book-meta-item {
    min-height: 94px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, background 0.28s ease;
}

@media (hover: hover) {
    .book-detail-section .book-meta-item:hover {
        transform: translateY(-3px);
        border-color: rgba(var(--book-glow), 0.75) !important;
        background: linear-gradient(145deg, rgba(var(--book-glow), 0.22), rgba(255, 255, 255, 0.06)) !important;
    }
}

/* Book description body. The text is authored in the admin as Markdown, so the
   headings, lists and separators it produces are styled here rather than
   inline like the rest of this template. */
.book-detail-section .book-description-body {
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.8;
}

.book-detail-section .book-description-body > *:first-child {
    margin-top: 0;
}

.book-detail-section .book-description-body p {
    margin: 0 0 14px;
}

.book-detail-section .book-description-body h1,
.book-detail-section .book-description-body h2 {
    margin: 30px 0 12px;
    font-size: clamp(1.15rem, 1.9vw, 1.4rem);
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff;
}

.book-detail-section .book-description-body h3,
.book-detail-section .book-description-body h4,
.book-detail-section .book-description-body h5,
.book-detail-section .book-description-body h6 {
    margin: 22px 0 8px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--book-ink);
}

.book-detail-section .book-description-body ul,
.book-detail-section .book-description-body ol {
    margin: 0 0 14px;
    padding-left: 20px;
}

.book-detail-section .book-description-body li {
    margin-bottom: 6px;
}

.book-detail-section .book-description-body strong {
    color: #ffffff;
}

.book-detail-section .book-description-body hr {
    margin: 26px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

html body .book-detail-section .book-detail-actions .btn-primary,
html body .book-detail-section .book-detail-actions .btn-primary:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #07162f !important;
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    font-weight: 850 !important;
    text-decoration: none;
    text-shadow: none !important;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body .book-detail-section .book-detail-actions .btn-primary:hover,
html body .book-detail-section .book-detail-actions .btn-primary:focus-visible {
    color: #ffffff !important;
    background: #0d315c !important;
    border-color: #a8dcff !important;
    outline: none;
}

html.light-theme body .book-detail-section[data-book-theme="biznes-kodeksi"] {
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.84), rgba(228, 240, 255, 0.66)), url("../images/books/kodeks-detail-bg-v1.5e0001d8d102.png") center / cover no-repeat !important;
}

html.light-theme body .book-detail-section[data-book-theme="biznes-kodeksi"] .book-gallery-stage {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(236, 246, 255, 0.54)), url("../images/books/kodeks-detail-bg-v1.5e0001d8d102.png") center / cover no-repeat !important;
}

html.light-theme body .book-detail-section .book-detail-actions .btn-primary,
html.light-theme body .book-detail-section .book-detail-actions .btn-primary:visited {
    color: #ffffff !important;
    background: #111111 !important;
    border-color: #111111 !important;
}

/* Footer: one quiet glass scene instead of separate, competing cards. */
footer.footer-ultra {
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(150deg, #020914 0%, #06182a 48%, #02070e 100%) !important;
}

footer.footer-ultra::before {
    background:
        radial-gradient(circle at 14% 6%, rgba(112, 194, 255, 0.14), transparent 28%),
        radial-gradient(circle at 82% 94%, rgba(43, 127, 207, 0.14), transparent 34%) !important;
    filter: blur(18px);
    animation: footer-ambient-drift 16s ease-in-out infinite alternate;
}

footer.footer-ultra > div[style*="background-image"] {
    opacity: 0.32 !important;
    mix-blend-mode: screen !important;
    filter: contrast(1.08) brightness(0.72) blur(1px) !important;
    transform: scale(1.025);
}

footer.footer-ultra .footer-grid-ultra,
footer.footer-ultra .footer-bottom-ultra {
    position: relative;
    z-index: 2;
}

footer.footer-ultra .footer-brand-card {
    background: linear-gradient(145deg, rgba(14, 37, 63, 0.76), rgba(2, 10, 20, 0.58)) !important;
    border: 0 !important;
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

footer.footer-ultra .footer-col-ultra:not(:first-child) {
    padding-top: 12px;
}

footer.footer-ultra .footer-link-ultra {
    transition: color 0.24s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
    footer.footer-ultra .footer-link-ultra:hover {
        transform: translateX(4px);
        color: #ffffff !important;
    }

    footer.footer-ultra .footer-social-ultra:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    }
}

@keyframes footer-ambient-drift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to { transform: translate3d(1.5%, 1%, 0) scale(1.07); }
}

@media (max-width: 640px) {
    .book-detail-section[data-book-theme="biznes-kodeksi"] .book-gallery-stage {
        min-height: 390px !important;
    }

    .book-detail-section[data-book-theme="biznes-kodeksi"] #main-book-img.book-cover-isolated {
        max-width: min(84%, 300px) !important;
    }

    .book-detail-section .book-meta-item {
        min-height: 78px;
    }

    footer.footer-ultra .footer-col-ultra:not(:first-child) {
        padding-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    footer.footer-ultra::before { animation: none; }
}

/* Each remaining book receives its own dedicated editorial background. */
.book-detail-section[data-book-theme="kompleks-boshqaruv"] {
    background:
        linear-gradient(110deg, rgba(26, 11, 7, 0.9), rgba(69, 31, 16, 0.68)),
        url("../images/books/kompleks-detail-bg-v1.97a17af39739.png") center / cover no-repeat !important;
}

.book-detail-section[data-book-theme="kompleks-boshqaruv"]::after {
    background-image: none !important;
}

.book-detail-section[data-book-theme="kompleks-boshqaruv"] .book-gallery-stage {
    background:
        linear-gradient(145deg, rgba(35, 14, 9, 0.48), rgba(18, 8, 5, 0.18)),
        url("../images/books/kompleks-detail-bg-v1.97a17af39739.png") center / cover no-repeat !important;
    border-color: rgba(236, 166, 112, 0.4) !important;
}

.book-detail-section[data-book-theme="kompleks-boshqaruv"] .book-gallery-stage > div:first-child {
    background: linear-gradient(180deg, rgba(25, 9, 4, 0.06), rgba(25, 9, 4, 0.44)) !important;
}

.book-detail-section[data-book-theme="sherikchilik"] {
    background:
        linear-gradient(110deg, rgba(2, 30, 22, 0.88), rgba(6, 72, 47, 0.64)),
        url("../images/books/sherikchilik-detail-bg-v1.5a5e0022d38e.png") center / cover no-repeat !important;
}

.book-detail-section[data-book-theme="sherikchilik"]::after {
    background-image: none !important;
}

.book-detail-section[data-book-theme="sherikchilik"] .book-gallery-stage {
    background:
        linear-gradient(145deg, rgba(3, 38, 25, 0.5), rgba(1, 21, 14, 0.18)),
        url("../images/books/sherikchilik-detail-bg-v1.5a5e0022d38e.png") center / cover no-repeat !important;
    border-color: rgba(154, 231, 178, 0.42) !important;
}

.book-detail-section[data-book-theme="sherikchilik"] .book-gallery-stage > div:first-child {
    background: linear-gradient(180deg, rgba(3, 30, 18, 0.05), rgba(3, 30, 18, 0.4)) !important;
}

html.light-theme body .book-detail-section[data-book-theme="kompleks-boshqaruv"] {
    background: linear-gradient(110deg, rgba(255, 249, 245, 0.86), rgba(255, 233, 217, 0.68)), url("../images/books/kompleks-detail-bg-v1.97a17af39739.png") center / cover no-repeat !important;
}

html.light-theme body .book-detail-section[data-book-theme="sherikchilik"] {
    background: linear-gradient(110deg, rgba(247, 255, 249, 0.86), rgba(218, 247, 227, 0.67)), url("../images/books/sherikchilik-detail-bg-v1.5a5e0022d38e.png") center / cover no-repeat !important;
}

html.light-theme body .book-detail-section[data-book-theme="kompleks-boshqaruv"] .book-gallery-stage,
html.light-theme body .book-detail-section[data-book-theme="sherikchilik"] .book-gallery-stage {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* About section: a focused expert-profile composition with clear content hierarchy. */
#about.about-section-premium {
    isolation: isolate;
}

#about.about-section-premium .about-grid {
    align-items: center;
    gap: clamp(32px, 5vw, 76px);
}

/* The profile card is declared `position: sticky` in the page's own <style>,
   but this grid centres its items, which leaves a sticky item no room to
   travel. `align-self` overrides `align-items` for this one column so the
   card can actually stick while the bio beside it scrolls. On short viewports
   it falls back to normal flow, otherwise the lower half of the card would
   stay pinned off-screen. */
#about.about-section-premium .about-sticky {
    align-self: start;
}

@media (max-height: 719px) {
    #about.about-section-premium .about-sticky {
        position: relative;
        top: auto;
    }
}

#about.about-section-premium .about-profile-card {
    background: linear-gradient(145deg, rgba(14, 36, 62, 0.82), rgba(2, 10, 21, 0.7)) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 28px 58px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
}

#about.about-section-premium .about-profile-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.11), transparent 34%);
}

#about.about-section-premium .about-portrait-frame,
#about.about-section-premium .about-sticky > div > div:first-child {
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#about.about-section-premium .about-content-panel {
    position: relative;
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(5, 20, 38, 0.54), rgba(2, 10, 20, 0.24));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
}

#about.about-section-premium .about-content-panel::after {
    content: '';
    position: absolute;
    top: 18px;
    right: 22px;
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72));
}

#about.about-section-premium .about-eyebrow {
    color: rgba(255, 255, 255, 0.8) !important;
}

#about.about-section-premium .about-eyebrow > span:first-child {
    background: #ffffff !important;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.78) !important;
}

#about.about-section-premium .about-title {
    max-width: 14ch;
}

#about.about-section-premium .about-summary {
    max-width: 66ch;
}

#about.about-section-premium .about-expertise-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 26px;
}

#about.about-section-premium .about-expertise-list span {
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.83);
    font-size: 0.76rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
}

#about.about-section-premium .about-stat-grid {
    gap: 14px !important;
}

#about.about-section-premium .stat-card-luxury {
    min-height: 116px !important;
    padding: 22px !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.04)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background 0.3s ease;
}

@media (hover: hover) {
    #about.about-section-premium .stat-card-luxury:hover {
        transform: translateY(-5px) !important;
        border-color: rgba(255, 255, 255, 0.54) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)) !important;
    }
}

#about.about-section-premium .about-quote-card {
    border-left-color: #ffffff !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(2, 9, 17, 0.64)) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#about.about-section-premium .about-quote-card span {
    color: #ffffff !important;
}

html.light-theme #about.about-section-premium .about-profile-card,
html.light-theme #about.about-section-premium .about-content-panel {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(17, 17, 17, 0.12) !important;
    box-shadow: 0 18px 38px rgba(17, 17, 17, 0.08), inset 0 1px 0 #ffffff !important;
}

html.light-theme #about.about-section-premium .about-eyebrow,
html.light-theme #about.about-section-premium .about-expertise-list span,
html.light-theme #about.about-section-premium .about-quote-card span {
    color: #111111 !important;
}

html.light-theme #about.about-section-premium .about-eyebrow > span:first-child {
    background: #111111 !important;
    box-shadow: none !important;
}

html.light-theme #about.about-section-premium .about-expertise-list span,
html.light-theme #about.about-section-premium .stat-card-luxury,
html.light-theme #about.about-section-premium .about-quote-card {
    border-color: rgba(17, 17, 17, 0.14) !important;
    background: rgba(255, 255, 255, 0.68) !important;
}

@media (max-width: 760px) {
    #about.about-section-premium .about-content-panel {
        padding: 22px 18px;
        border-radius: 22px;
    }

    #about.about-section-premium .about-title {
        max-width: none;
    }

    #about.about-section-premium .about-expertise-list span {
        width: 100%;
    }

    #about.about-section-premium .about-stat-grid {
        gap: 12px !important;
    }
}

/* Final detail-page refinement: clean metadata panel, not the former grey slab. */
.book-detail-section .book-meta-grid {
    padding: 12px !important;
    gap: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: linear-gradient(145deg, rgba(8, 23, 43, 0.84), rgba(3, 12, 24, 0.72)) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.book-detail-section .book-meta-grid::after {
    opacity: 0.42;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0.09), transparent 38%, rgba(255, 255, 255, 0.025)) !important;
}

.book-detail-section .book-meta-item {
    min-height: 86px;
    padding: 13px 14px !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: none !important;
}

.book-detail-section .book-meta-item > span:first-child {
    color: rgba(255, 255, 255, 0.66) !important;
    font-size: 0.74rem !important;
}

.book-detail-section .book-meta-item > span:last-child {
    color: #ffffff !important;
    font-size: 1rem !important;
}

.book-detail-section .book-meta-item svg {
    color: rgba(255, 255, 255, 0.9) !important;
}

html.light-theme body .book-detail-section .book-meta-grid {
    border-color: rgba(17, 17, 17, 0.16) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 14px 30px rgba(17, 17, 17, 0.08), inset 0 1px 0 #ffffff !important;
}

html.light-theme body .book-detail-section .book-meta-item {
    border-color: rgba(17, 17, 17, 0.13) !important;
    background: rgba(17, 17, 17, 0.035) !important;
}

html.light-theme body .book-detail-section .book-meta-item > span:first-child {
    color: rgba(17, 17, 17, 0.58) !important;
}

html.light-theme body .book-detail-section .book-meta-item > span:last-child,
html.light-theme body .book-detail-section .book-meta-item svg {
    color: #111111 !important;
}

@media (max-width: 560px) {
    .book-detail-section .book-meta-grid {
        padding: 10px !important;
        gap: 10px !important;
    }

    .book-detail-section .book-meta-item {
        min-height: 74px;
    }
}

/* Mobile navigation as a softly elevated iOS-style glass sheet. */
@keyframes mobile-menu-breathe {
    0%, 100% { box-shadow: -26px 26px 66px rgba(0, 0, 0, 0.52), inset 1px 0 0 rgba(255, 255, 255, 0.2); }
    50% { box-shadow: -30px 30px 74px rgba(0, 0, 0, 0.6), 0 0 42px rgba(125, 211, 252, 0.1), inset 1px 0 0 rgba(255, 255, 255, 0.26); }
}

@keyframes mobile-menu-button-pop {
    0% { transform: scale(0.86) rotate(-24deg); }
    60% { transform: scale(1.12) rotate(100deg); }
    100% { transform: scale(1.07) rotate(90deg); }
}

@media (max-width: 768px) {
    .mobile-overlay {
        background: rgba(0, 7, 17, 0.5) !important;
        backdrop-filter: blur(16px) saturate(138%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(138%) !important;
        transition: opacity 0.46s ease, visibility 0.46s ease, backdrop-filter 0.46s ease !important;
    }

    #nav-links {
        top: max(84px, calc(env(safe-area-inset-top) + 76px)) !important;
        right: min(-87vw, -398px) !important;
        width: min(87vw, 398px) !important;
        height: calc(100dvh - max(96px, calc(env(safe-area-inset-top) + 92px))) !important;
        padding: 24px 16px 20px !important;
        gap: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.34) !important;
        border-right: 0 !important;
        border-radius: 26px 0 0 26px !important;
        background: radial-gradient(circle at 100% 0, rgba(125, 211, 252, 0.18), transparent 36%), linear-gradient(155deg, rgba(9, 47, 81, 0.84), rgba(1, 14, 31, 0.78)) !important;
        backdrop-filter: blur(38px) saturate(158%) !important;
        -webkit-backdrop-filter: blur(38px) saturate(158%) !important;
        box-shadow: -26px 26px 66px rgba(0, 0, 0, 0.52), inset 1px 0 0 rgba(255, 255, 255, 0.2) !important;
        transition: right 0.62s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease !important;
    }

    #nav-links.mobile-active {
        right: 0 !important;
        animation: mobile-menu-breathe 5s ease-in-out infinite;
    }

    #nav-links::before {
        padding: 2px 8px 16px !important;
        color: rgba(226, 241, 255, 0.76) !important;
        letter-spacing: 0.2em !important;
    }

    #nav-links::after {
        content: '';
        position: absolute;
        right: -52px;
        top: 36%;
        width: 164px;
        height: 164px;
        border: 1px solid rgba(186, 230, 253, 0.12);
        border-radius: 50%;
        box-shadow: 0 0 0 24px rgba(125, 211, 252, 0.02), 0 0 0 48px rgba(125, 211, 252, 0.014);
        pointer-events: none;
    }

    #nav-links li {
        position: relative;
        z-index: 1;
        opacity: 0;
        transform: translate3d(28px, 0, 0) scale(0.97);
        transition: opacity 0.42s ease, transform 0.56s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #nav-links.mobile-active li {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    #nav-links.mobile-active li:nth-child(1) { transition-delay: 0.08s; }
    #nav-links.mobile-active li:nth-child(2) { transition-delay: 0.13s; }
    #nav-links.mobile-active li:nth-child(3) { transition-delay: 0.18s; }
    #nav-links.mobile-active li:nth-child(4) { transition-delay: 0.23s; }
    #nav-links.mobile-active li:nth-child(5) { transition-delay: 0.28s; }

    #nav-links a {
        position: relative;
        min-height: 60px !important;
        padding: 15px 48px 15px 16px !important;
        border-color: rgba(255, 255, 255, 0.26) !important;
        background: linear-gradient(105deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 8px 20px rgba(0, 0, 0, 0.08) !important;
        transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.34s ease, background 0.34s ease, box-shadow 0.34s ease !important;
    }

    #nav-links a::before {
        color: #08223d !important;
        background: linear-gradient(145deg, #f8fdff, #bae6fd) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16), inset 0 1px 0 #ffffff;
    }

    #nav-links a::after {
        content: '›';
        position: absolute;
        right: 18px;
        top: 50%;
        color: rgba(226, 241, 255, 0.64);
        font-size: 1.35rem;
        font-weight: 300;
        line-height: 1;
        transform: translateY(-50%);
        transition: color 0.28s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #nav-links a:hover,
    #nav-links a:focus-visible,
    #nav-links a.active {
        border-color: rgba(255, 255, 255, 0.64) !important;
        background: linear-gradient(105deg, rgba(255, 255, 255, 0.2), rgba(125, 211, 252, 0.16)) !important;
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    }

    #nav-links a:hover::after,
    #nav-links a:focus-visible::after,
    #nav-links a.active::after {
        color: #ffffff;
        transform: translate(4px, -50%);
    }

    #mobile-menu-btn {
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        border-radius: 14px !important;
        color: #f8fdff !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)) !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
        backdrop-filter: blur(14px) saturate(150%);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
    }

    #mobile-menu-btn::after {
        content: '';
        position: absolute;
        inset: -4px;
        border: 1px solid rgba(186, 230, 253, 0);
        border-radius: 17px;
        pointer-events: none;
        transition: inset 0.42s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.42s ease;
    }

    #mobile-menu-btn svg {
        position: relative;
        z-index: 1;
        width: 22px !important;
        height: 22px !important;
        transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease !important;
    }

    .navbar.menu-open #mobile-menu-btn {
        animation: mobile-menu-button-pop 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
        border-color: rgba(255, 255, 255, 0.66) !important;
        background: linear-gradient(145deg, rgba(125, 211, 252, 0.3), rgba(255, 255, 255, 0.1)) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), 0 0 20px rgba(125, 211, 252, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    }

    .navbar.menu-open #mobile-menu-btn::after {
        inset: -7px;
        border-color: rgba(186, 230, 253, 0.34);
    }

    #mobile-menu-btn:active {
        transform: scale(0.9) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #nav-links,
    #nav-links li,
    #nav-links a,
    #mobile-menu-btn,
    #mobile-menu-btn svg {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   LIGHT MODE — CRISP IMAGES, WITHOUT FOG
   ========================================================================== */
html.light-theme,
html.light-theme body,
html.light-theme main {
    background: #f8fafc !important;
}

/* Only decorative mist, glows and moving colour clouds are removed in light mode. */
html.light-theme .global-ambient-bg,
html.light-theme .ambient-blob,
html.light-theme .mesh-bg,
html.light-theme .mesh-blob,
html.light-theme .section-ambient-glow,
html.light-theme .aurora-orb,
html.light-theme .glass-orb,
html.light-theme .star-particles,
html.light-theme .network-bg,
html.light-theme #hero::before,
html.light-theme #hero::after,
html.light-theme .book-detail-section::before {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
}

/* A clean light base sits behind the original section photography. */
html.light-theme .section,
html.light-theme .book-detail-section,
html.light-theme .footer-ultra {
    background-color: #ffffff !important;
}

/* Keep the original background photography; raise its clarity instead of hiding it. */
html.light-theme .section > div[style*="background-image"],
html.light-theme .footer-ultra > div[style*="background-image"] {
    display: block !important;
    opacity: 0.46 !important;
    filter: contrast(1.08) brightness(1.1) saturate(1.07) !important;
    mix-blend-mode: normal !important;
}

/* The colour fog around those images stays off. */
html.light-theme .section > div[style*="radial-gradient"],
html.light-theme .section > div[style*="filter: blur"],
html.light-theme .footer-ultra > div[style*="radial-gradient"],
html.light-theme .footer-ultra > div[style*="filter: blur"] {
    display: none !important;
    opacity: 0 !important;
}

html.light-theme body .aurora-hero-bg .hero-bg-image {
    display: block !important;
    opacity: 1 !important;
    filter: brightness(1.01) contrast(1.16) saturate(1.12) !important;
}

/* The hero image lives behind the section, so its surface must stay transparent. */
html.light-theme #hero.hero-section {
    background-color: transparent !important;
}

html.light-theme body .aurora-hero-bg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

/* Preserve a light readability veil, not the previous dark haze. */
html.light-theme body .aurora-hero-bg .hero-overlay,
html.light-theme .section > div[style*="background: linear-gradient"],
html.light-theme .footer-ultra > div[style*="background: linear-gradient"] {
    display: block !important;
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.28)) !important;
}

html.light-theme body .aurora-hero-bg .hero-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.15)) !important;
}

html.light-theme .book-card-upgraded > div:first-child > div[style*="background-image"] {
    display: block !important;
    opacity: 0.32 !important;
    filter: contrast(1.08) brightness(1.1) saturate(1.06) !important;
    mix-blend-mode: normal !important;
}

/* Remove glass haze from every card and navigation surface in the light theme. */
html.light-theme .navbar,
html.light-theme #nav-links,
html.light-theme .mobile-overlay,
html.light-theme .card,
html.light-theme .mission-card,
html.light-theme .contact-info-card-premium,
html.light-theme .contact-form-card-premium,
html.light-theme .footer-brand-card,
html.light-theme .book-detail-panel,
html.light-theme .book-gallery-stage,
html.light-theme #consulting .services-grid > .reveal-up,
html.light-theme [style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.light-theme .navbar {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
}

html.light-theme .navbar::after,
html.light-theme .footer-ultra::before,
html.light-theme .footer-ultra::after,
html.light-theme .card::before,
html.light-theme .card::after,
html.light-theme .card .card-content::before {
    display: none !important;
}

html.light-theme #nav-links,
html.light-theme #nav-links a,
html.light-theme #mobile-menu-btn {
    background: #ffffff !important;
    box-shadow: none !important;
}

html.light-theme #nav-links {
    border-color: #cbd5e1 !important;
}

html.light-theme #nav-links a {
    border-color: #e2e8f0 !important;
}

html.light-theme #nav-links a:hover,
html.light-theme #nav-links a:focus-visible,
html.light-theme #nav-links a.active {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

html.light-theme #mobile-menu-btn {
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   AUTHOR PROFILE CTA & MODAL
   ========================================================================== */
.author-bio-cta-wrap {
    width: min(100%, 540px);
    margin-top: 4px;
}

.author-bio-cta {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    overflow: hidden;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 22px;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.15), rgba(12, 59, 94, 0.76) 48%, rgba(3, 15, 31, 0.94));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.38s ease, box-shadow 0.38s ease, background 0.38s ease;
}

.author-bio-cta::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 180px;
    top: -120px;
    right: -42px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.38), transparent 68%);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.author-bio-cta::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: 21px;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.08) 46%, transparent 62%);
    background-size: 220% 100%;
    background-position: 100% 0;
    transition: background-position 0.7s ease;
}

.author-bio-cta-icon,
.author-bio-cta-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.author-bio-cta-icon {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 16px;
    color: #06213a;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.author-bio-cta-copy {
    display: grid;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.author-bio-cta-kicker {
    color: rgba(186, 230, 253, 0.86);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.author-bio-cta-title {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.author-bio-cta-arrow {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), background 0.38s ease;
}

.author-bio-cta:focus-visible {
    outline: 3px solid rgba(125, 211, 252, 0.92);
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .author-bio-cta:hover {
        transform: translate3d(0, -5px, 0);
        border-color: rgba(186, 230, 253, 0.8);
        background: linear-gradient(115deg, rgba(255, 255, 255, 0.2), rgba(8, 87, 137, 0.82) 50%, rgba(3, 15, 31, 0.96));
        box-shadow: 0 26px 54px rgba(0, 0, 0, 0.44), 0 0 30px rgba(56, 189, 248, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .author-bio-cta:hover::before {
        transform: scale(1.35) translate3d(-10px, 12px, 0);
    }

    .author-bio-cta:hover::after {
        background-position: 0 0;
    }

    .author-bio-cta:hover .author-bio-cta-arrow {
        transform: translate3d(4px, 0, 0);
        background: rgba(255, 255, 255, 0.18);
    }
}

#authorBioModal {
    padding: 16px !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    opacity: 0;
    transition: opacity 0.24s ease;
}

#authorBioModal.is-visible {
    opacity: 1;
}

.author-modal-card {
    width: min(100%, 950px) !important;
    height: calc(100dvh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(125, 211, 252, 0.75) rgba(255, 255, 255, 0.06);
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

.author-modal-card:focus-visible {
    outline: 2px solid rgba(125, 211, 252, 0.78);
    outline-offset: 3px;
}

.author-modal-card::-webkit-scrollbar {
    width: 8px;
}

.author-modal-card::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
}

.author-modal-card::-webkit-scrollbar-thumb {
    background: linear-gradient(#bae6fd, #38bdf8);
    border: 2px solid rgba(1, 12, 24, 0.9);
    border-radius: 999px;
}

#authorBioModal > .author-modal-card > button {
    position: fixed !important;
    top: 26px !important;
    right: max(26px, calc((100vw - 950px) / 2 + 16px)) !important;
    z-index: 1000000 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

@media (max-width: 768px) {
    #authorBioModal {
        align-items: center !important;
        padding: 12px !important;
    }

    .author-modal-card {
        height: calc(100dvh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        padding: 20px 16px 28px !important;
        border-radius: 22px !important;
    }

    .author-modal-grid {
        gap: 28px !important;
    }

    .author-modal-grid > div:first-child > div:first-child {
        max-height: 43dvh;
    }

    .author-modal-grid > div:first-child > div:first-child img {
        height: 43dvh !important;
        object-fit: cover;
        object-position: center top;
    }

    .author-modal-grid > div:last-child > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    #authorBioModal > .author-modal-card > button {
        top: 22px !important;
        right: 22px !important;
    }
}

@media (max-width: 480px) {
    .author-bio-cta {
        min-height: 76px;
        gap: 12px;
        padding: 12px;
        border-radius: 18px;
    }

    .author-bio-cta-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .author-bio-cta-title {
        font-size: 0.91rem;
    }

    .author-bio-cta-arrow {
        width: 34px;
        height: 34px;
    }
}

html.light-theme .author-bio-cta {
    color: #0f172a;
    border-color: rgba(14, 116, 144, 0.2);
    background: linear-gradient(115deg, #ffffff, #e0f2fe 48%, #f8fafc);
    box-shadow: 0 16px 38px rgba(14, 116, 144, 0.14), inset 0 1px 0 #ffffff;
}

html.light-theme .author-bio-cta-title,
html.light-theme .author-bio-cta-arrow {
    color: #0f172a;
}

html.light-theme .author-bio-cta-kicker {
    color: #0369a1;
}

html.light-theme .author-bio-cta-icon {
    color: #ffffff;
    background: #0369a1;
}

html.light-theme .author-bio-cta-arrow {
    border-color: rgba(3, 105, 161, 0.18);
    background: rgba(3, 105, 161, 0.08);
}

/* ==========================================================================
   FINAL VISUAL REFINEMENT — HOME, NAVIGATION, CONTACT, FOOTER & BOOKS
   ========================================================================== */
@keyframes surface-orbit {
    0%, 100% { transform: translate3d(-2%, -1%, 0) scale(1); }
    50% { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* Keep the original hero composition, while making its layers more precise. */
#hero {
    isolation: isolate;
}

#hero::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: min(780px, 120vw);
    aspect-ratio: 1;
    top: 7%;
    left: 50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.13) 0%, rgba(14, 116, 144, 0.06) 34%, transparent 68%);
    filter: blur(12px);
    pointer-events: none;
    animation: surface-orbit 14s ease-in-out infinite;
}

#hero::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(1, 8, 20, 0.33), transparent 24%, transparent 76%, rgba(1, 8, 20, 0.33));
}

#hero .container {
    isolation: isolate;
}

#hero .insan-badge {
    border-color: rgba(186, 230, 253, 0.42) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 5px rgba(56, 189, 248, 0.035) !important;
}

#hero .hero-subtitle-card {
    border-color: rgba(186, 230, 253, 0.24) !important;
    background: linear-gradient(115deg, rgba(2, 16, 35, 0.72), rgba(7, 35, 65, 0.44), rgba(1, 12, 28, 0.76)) !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(56, 189, 248, 0.035) !important;
}

#hero .hero-actions .aurora-btn {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24) !important;
}

@media (hover: hover) and (pointer: fine) {
    #hero .hero-logo-wrap:hover .hero-logo-img {
        transform: scale(1.22) translateY(-3px) !important;
    }

    #hero .hero-subtitle-card:hover {
        border-color: rgba(186, 230, 253, 0.46) !important;
        box-shadow: 0 28px 64px rgba(0, 0, 0, 0.48), 0 0 36px rgba(56, 189, 248, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }
}

/* Mission statement: less heavy white framing and a clearer premium focal point. */
#legacy .mission-card {
    isolation: isolate;
    border: 1px solid rgba(186, 230, 253, 0.48) !important;
    background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.16), transparent 42%), linear-gradient(145deg, rgba(7, 28, 52, 0.93), rgba(1, 10, 23, 0.95)) !important;
    box-shadow: 0 32px 78px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 6px rgba(56, 189, 248, 0.025) !important;
}

#legacy .mission-card::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 220px;
    height: 220px;
    right: -110px;
    bottom: -130px;
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(56, 189, 248, 0.025), 0 0 0 56px rgba(56, 189, 248, 0.018);
    pointer-events: none;
}

#legacy .mission-card > div:last-child {
    position: relative;
    z-index: 2;
}

#legacy .mission-card h3 {
    max-width: 760px;
    margin-inline: auto;
    text-wrap: balance;
}

#legacy .mission-card p {
    color: rgba(226, 241, 255, 0.82) !important;
    text-wrap: balance;
}

@media (hover: hover) and (pointer: fine) {
    #legacy .mission-card:hover {
        transform: translateY(-7px) !important;
        border-color: rgba(186, 230, 253, 0.78) !important;
        box-shadow: 0 38px 86px rgba(0, 0, 0, 0.6), 0 0 44px rgba(56, 189, 248, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    }
}

/* Contact cards share a single calm, reliable visual language. */
#contact .contact-info-card-premium,
#contact .contact-form-card-premium {
    border: 1px solid rgba(186, 230, 253, 0.32) !important;
    background: linear-gradient(145deg, rgba(7, 31, 57, 0.92), rgba(1, 13, 29, 0.94)) !important;
    box-shadow: 0 26px 60px rgba(0, 4, 14, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 5px rgba(56, 189, 248, 0.022) !important;
}

#contact .contact-info-card-premium::before,
#contact .contact-form-card-premium::before {
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.9), rgba(255, 255, 255, 0.75), rgba(125, 211, 252, 0.9), transparent) !important;
}

#contact .contact-info-card-premium::after,
#contact .contact-form-card-premium::after {
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.2), transparent) !important;
}

#contact .contact-info-header-icon {
    color: #e0f2fe !important;
    border-color: rgba(125, 211, 252, 0.4) !important;
    background: linear-gradient(145deg, rgba(14, 116, 144, 0.45), rgba(7, 31, 57, 0.62)) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#contact .contact-info-desc {
    color: rgba(226, 241, 255, 0.7) !important;
}

#contact .contact-info-item-premium {
    border-color: rgba(186, 230, 253, 0.2) !important;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0.055), rgba(56, 189, 248, 0.035)) !important;
}

#contact .contact-info-item-icon {
    color: #bae6fd !important;
    border-color: rgba(125, 211, 252, 0.3) !important;
    background: rgba(7, 31, 57, 0.68) !important;
}

#contact .contact-info-item-label {
    color: rgba(186, 230, 253, 0.78) !important;
}

#contact .contact-input-premium,
#contact .contact-select-premium {
    border-color: rgba(186, 230, 253, 0.36) !important;
    background: rgba(1, 13, 30, 0.68) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#contact .contact-input-premium:focus,
#contact .contact-input-premium:hover,
#contact .contact-select-premium:focus,
#contact .contact-select-premium:hover {
    border-color: #7dd3fc !important;
    background: rgba(7, 35, 65, 0.82) !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#contact .contact-submit-btn-premium {
    border-color: rgba(186, 230, 253, 0.42) !important;
    background: linear-gradient(115deg, #e0f2fe, #7dd3fc 48%, #38bdf8) !important;
    color: #08223d !important;
    box-shadow: 0 14px 28px rgba(14, 116, 144, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

@media (hover: hover) and (pointer: fine) {
    #contact .contact-info-card-premium:hover,
    #contact .contact-form-card-premium:hover {
        transform: translateY(-6px) !important;
        border-color: rgba(186, 230, 253, 0.68) !important;
        box-shadow: 0 34px 72px rgba(0, 4, 14, 0.58), 0 0 40px rgba(56, 189, 248, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }

    #contact .contact-info-item-premium:hover {
        transform: translateX(6px) !important;
        border-color: rgba(125, 211, 252, 0.56) !important;
        background: linear-gradient(105deg, rgba(56, 189, 248, 0.16), rgba(255, 255, 255, 0.07)) !important;
    }

    #contact .contact-submit-btn-premium:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 36px rgba(14, 116, 144, 0.38), 0 0 28px rgba(125, 211, 252, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    }
}

/* The footer brand is a compact card, not a harsh framed box. */
.footer-brand-card {
    isolation: isolate;
    border: 1px solid rgba(125, 211, 252, 0.36) !important;
    background: radial-gradient(circle at 0 0, rgba(14, 116, 144, 0.26), transparent 43%), linear-gradient(150deg, rgba(6, 28, 53, 0.92), rgba(1, 12, 27, 0.93)) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 4px rgba(56, 189, 248, 0.02) !important;
}

.footer-brand-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -52px;
    bottom: -52px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid rgba(125, 211, 252, 0.16);
    box-shadow: 0 0 0 24px rgba(56, 189, 248, 0.025);
}

.footer-brand-card p {
    color: rgba(226, 241, 255, 0.82) !important;
}

.footer-brand-card p span {
    color: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
    .footer-brand-card:hover {
        transform: translateY(-4px);
        border-color: rgba(186, 230, 253, 0.66) !important;
        box-shadow: 0 28px 56px rgba(0, 0, 0, 0.42), 0 0 30px rgba(56, 189, 248, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }
}

/* Book detail page: a true editorial layout that matches the Academy theme. */
.book-detail-section {
    position: relative;
    /* `clip` crops the decorative glows exactly like `hidden` did, but without
       turning the section into a scroll container — which would stop the
       sticky book gallery from sticking. `hidden` stays first as a fallback
       for browsers that don't support `clip`. */
    overflow: hidden;
    overflow: clip;
}

.book-detail-section::before {
    content: '';
    position: absolute;
    inset: 12% -25% auto;
    height: 420px;
    background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.11), transparent 67%);
    pointer-events: none;
}

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

.book-back-link {
    color: #bae6fd !important;
    padding: 10px 14px;
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 999px;
    background: rgba(7, 31, 57, 0.52);
    transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

.book-detail-grid {
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr) !important;
    gap: clamp(32px, 6vw, 72px) !important;
}

/* Keep the book cover in view while the long description scrolls past it.
   `align-self: start` is required: grid items stretch/centre by default, which
   leaves a sticky item no room to travel. Only applied when the layout is two
   columns AND the viewport is tall enough to show the whole gallery — on
   shorter or narrower screens it scrolls normally instead of getting stuck
   with its lower half off-screen. The navbar is fixed and ends at ~68px, so
   88px leaves a comfortable gap under it. */
@media (min-width: 841px) and (min-height: 760px) {
    .book-detail-section .book-gallery-column {
        position: sticky;
        top: 88px;
        align-self: start;
    }
}

.book-gallery-stage {
    min-height: 530px;
    display: grid;
    place-items: center;
    border-color: rgba(125, 211, 252, 0.32) !important;
    background: radial-gradient(circle at 50% 36%, rgba(56, 189, 248, 0.2), transparent 39%), linear-gradient(145deg, rgba(8, 35, 64, 0.96), rgba(1, 13, 30, 0.94)) !important;
    box-shadow: 0 30px 66px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.book-gallery-stage::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(186, 230, 253, 0.12);
    border-radius: calc(var(--radius-xl) - 8px);
    pointer-events: none;
}

#main-book-img {
    position: relative;
    z-index: 1;
    max-height: 470px !important;
}

.book-thumb-list {
    gap: 12px !important;
}

.gallery-thumb {
    appearance: none;
    border-color: rgba(125, 211, 252, 0.26) !important;
    background: rgba(7, 31, 57, 0.7) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}

.gallery-thumb:focus-visible {
    outline: 3px solid #7dd3fc;
    outline-offset: 3px;
}

.book-detail-panel {
    min-height: 100%;
    padding: clamp(24px, 4vw, 46px);
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(7, 32, 59, 0.88), rgba(1, 13, 30, 0.9));
    box-shadow: 0 28px 68px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.book-author-badge {
    color: #bae6fd !important;
    background: rgba(14, 116, 144, 0.28) !important;
    border: 1px solid rgba(125, 211, 252, 0.28);
}

.book-detail-title {
    color: #ffffff !important;
    font-size: clamp(2.25rem, 4vw, 4rem) !important;
    line-height: 1.04;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.book-detail-subtitle {
    color: rgba(226, 241, 255, 0.78) !important;
    font-style: normal !important;
    line-height: 1.55;
}

.book-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 !important;
    padding: 8px !important;
    border-color: rgba(125, 211, 252, 0.25) !important;
    background: rgba(2, 20, 42, 0.68) !important;
    overflow: hidden;
}

.book-meta-item {
    padding: 16px 18px;
}

.book-meta-item + .book-meta-item {
    border-left: 1px solid rgba(125, 211, 252, 0.18);
}

.book-meta-item > span:first-child {
    color: rgba(186, 230, 253, 0.68) !important;
    margin-bottom: 7px;
}

.book-description {
    padding-top: 4px;
}

.book-description h3 {
    color: #ffffff;
    font-size: 1.28rem !important;
}

.book-description p {
    color: rgba(226, 241, 255, 0.8) !important;
}

.book-detail-actions .btn {
    min-height: 52px;
    border-radius: 14px;
}

.book-detail-actions .btn-primary {
    background: linear-gradient(115deg, #e0f2fe, #7dd3fc 48%, #38bdf8) !important;
    color: #08223d !important;
    border: none !important;
    box-shadow: 0 14px 28px rgba(14, 116, 144, 0.25);
}

.book-detail-actions .btn-outline {
    border-color: rgba(125, 211, 252, 0.38) !important;
    color: #e0f2fe !important;
    background: rgba(7, 31, 57, 0.52) !important;
}

@media (hover: hover) and (pointer: fine) {
    .book-back-link:hover {
        transform: translateX(-4px);
        border-color: rgba(186, 230, 253, 0.6);
        background: rgba(14, 116, 144, 0.26);
    }

    .book-gallery-stage:hover #main-book-img {
        transform: translateY(-6px) scale(1.025);
    }

    .gallery-thumb:hover {
        transform: translateY(-4px);
        border-color: rgba(186, 230, 253, 0.7) !important;
    }

    .book-detail-actions .btn:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 840px) {
    .book-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .book-gallery-stage {
        min-height: 420px;
    }
}

@media (max-width: 768px) {
    #hero .container {
        padding-inline: 4px;
    }

    #hero .insan-badge {
        padding: 9px 18px !important;
        letter-spacing: 0.18em !important;
    }

    #hero .hero-subtitle-card {
        padding: 20px 18px !important;
        border-radius: 20px !important;
    }

    /* A clearer, more intentional mobile navigation drawer. */
    #nav-links {
        top: max(76px, calc(env(safe-area-inset-top) + 70px)) !important;
        right: min(-88vw, -390px) !important;
        width: min(88vw, 390px) !important;
        height: calc(100dvh - max(88px, calc(env(safe-area-inset-top) + 82px))) !important;
        padding: 22px 16px 18px !important;
        gap: 10px !important;
        border: 1px solid rgba(125, 211, 252, 0.48) !important;
        border-radius: 24px 0 0 24px !important;
        background: radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.2), transparent 36%), linear-gradient(160deg, rgba(5, 31, 59, 0.98), rgba(1, 13, 30, 0.99)) !important;
        box-shadow: -22px 24px 58px rgba(0, 0, 0, 0.52), inset 1px 0 0 rgba(255, 255, 255, 0.14) !important;
        counter-reset: mobile-nav;
    }

    #nav-links.mobile-active {
        right: 0 !important;
    }

    #nav-links::before {
        content: 'INSAN  /  NAVIGATSIYA';
        display: block;
        padding: 0 6px 12px;
        color: rgba(186, 230, 253, 0.74);
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.18em;
    }

    #nav-links li {
        counter-increment: mobile-nav;
    }

    #nav-links a {
        min-height: 58px !important;
        gap: 14px;
        padding: 14px 16px !important;
        border: 1px solid rgba(125, 211, 252, 0.26) !important;
        border-radius: 16px !important;
        color: #f8fdff !important;
        background: linear-gradient(105deg, rgba(255, 255, 255, 0.075), rgba(56, 189, 248, 0.035)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    #nav-links a::before {
        content: '0' counter(mobile-nav);
        flex: 0 0 auto;
        display: inline-grid;
        place-items: center;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        color: #08223d;
        background: #bae6fd;
        font-size: 0.64rem;
        font-weight: 900;
        letter-spacing: 0;
    }

    #nav-links a:hover,
    #nav-links a.active {
        border-color: rgba(186, 230, 253, 0.66) !important;
        background: linear-gradient(105deg, rgba(14, 116, 144, 0.5), rgba(56, 189, 248, 0.15)) !important;
        color: #ffffff !important;
        transform: translateX(-3px) !important;
    }

    #legacy .mission-card {
        padding: 40px 22px !important;
    }

    #legacy .mission-card h3 {
        font-size: clamp(1.72rem, 8vw, 2.2rem) !important;
        line-height: 1.24 !important;
    }

    #legacy .mission-card p {
        font-size: 1.04rem !important;
        line-height: 1.62 !important;
    }

    #contact .contact-info-card-premium,
    #contact .contact-form-card-premium {
        padding: 26px 20px !important;
        border-radius: 22px !important;
    }

    #contact .contact-info-header {
        gap: 14px;
        margin-bottom: 26px;
    }

    #contact .contact-info-item-premium {
        padding: 14px !important;
    }

    #contact .contact-info-item-value {
        font-size: 0.98rem !important;
    }

    .footer-brand-card {
        border-radius: 22px !important;
    }

    .book-detail-section {
        padding-top: 122px !important;
    }

    .book-gallery-stage {
        min-height: 370px;
        padding: 28px 18px !important;
        border-radius: 24px !important;
    }

    #main-book-img {
        max-height: 360px !important;
    }

    .book-detail-panel {
        padding: 26px 20px;
        border-radius: 24px;
    }

    .book-meta-grid {
        grid-template-columns: 1fr !important;
    }

    .book-meta-item + .book-meta-item {
        border-top: 1px solid rgba(125, 211, 252, 0.18);
        border-left: 0;
    }

    .book-detail-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

html.light-theme #hero::before,
html.light-theme #hero::after,
html.light-theme .book-detail-section::before {
    opacity: 0.55;
}

html.light-theme #legacy .mission-card,
html.light-theme #contact .contact-info-card-premium,
html.light-theme #contact .contact-form-card-premium,
html.light-theme .footer-brand-card,
html.light-theme .book-detail-panel,
html.light-theme .book-gallery-stage {
    background: linear-gradient(145deg, #ffffff, #eef8ff) !important;
    border-color: rgba(3, 105, 161, 0.22) !important;
    box-shadow: 0 20px 45px rgba(14, 116, 144, 0.1), inset 0 1px 0 #ffffff !important;
}

html.light-theme #legacy .mission-card h3,
html.light-theme #legacy .mission-card p,
html.light-theme .book-detail-title,
html.light-theme .book-description h3,
html.light-theme .book-description-body h1,
html.light-theme .book-description-body h2,
html.light-theme .book-description-body h4,
html.light-theme .book-description-body h5,
html.light-theme .book-description-body h6,
html.light-theme .book-description-body strong {
    color: #0f172a !important;
}

html.light-theme #contact .contact-info-desc,
html.light-theme .book-detail-subtitle,
html.light-theme .book-description p,
html.light-theme .book-description-body,
html.light-theme .book-description-body li,
html.light-theme .footer-brand-card p {
    color: #475569 !important;
}

html.light-theme #contact .contact-input-premium,
html.light-theme #contact .contact-select-premium,
html.light-theme .book-meta-grid,
html.light-theme .gallery-thumb {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(3, 105, 161, 0.2) !important;
}

html.light-theme .book-meta-item > span:first-child,
html.light-theme .book-author-badge,
html.light-theme .book-back-link {
    color: #0369a1 !important;
}

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

/* The complete modal is the scroll surface. This avoids nested-scroll issues
   in mobile webviews and makes a swipe work over every visible profile block. */
#authorBioModal {
    align-items: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: none;
    scrollbar-width: thin;
    scrollbar-color: #7dd3fc rgba(255, 255, 255, 0.06);
}

#authorBioModal::-webkit-scrollbar {
    width: 8px;
}

#authorBioModal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

#authorBioModal::-webkit-scrollbar-thumb {
    background: linear-gradient(#bae6fd, #38bdf8);
    border-radius: 999px;
}

.author-modal-card {
    display: block !important;
    height: auto !important;
    min-height: calc(100dvh - 32px) !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 auto !important;
}

.author-modal-grid {
    overflow: visible !important;
    touch-action: auto;
    padding-right: 0;
}

.author-modal-grid:focus-visible {
    outline: 2px solid rgba(125, 211, 252, 0.78);
    outline-offset: -3px;
}

@media (max-width: 768px) {
    .author-modal-card {
        min-height: calc(100dvh - 24px) !important;
    }
}

/* ==========================================================================
   WHITE-EDGE EDITION — REQUESTED CONTACT, MISSION & SERVICE FINISH
   ========================================================================== */
/* Restore the clear white frame language on the contact and mission panels. */
#legacy .mission-card {
    border-color: rgba(255, 255, 255, 0.9) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(1, 11, 24, 0.92)) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 24px rgba(255, 255, 255, 0.08) !important;
}

#legacy .mission-card::before {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.018), 0 0 0 56px rgba(255, 255, 255, 0.012);
}

#contact .contact-info-card-premium,
#contact .contact-form-card-premium {
    border-color: rgba(255, 255, 255, 0.88) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(1, 10, 22, 0.93)) !important;
    box-shadow: 0 28px 62px rgba(0, 4, 14, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.06) !important;
}

#contact .contact-info-card-premium::before,
#contact .contact-form-card-premium::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) !important;
}

#contact .contact-info-card-premium::after,
#contact .contact-form-card-premium::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent) !important;
}

#contact .contact-info-header-icon,
#contact .contact-info-item-icon {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

#contact .contact-info-desc,
#contact .contact-info-item-label {
    color: rgba(255, 255, 255, 0.74) !important;
}

#contact .contact-info-item-premium {
    border-color: rgba(255, 255, 255, 0.24) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

#contact .contact-input-premium,
#contact .contact-select-premium {
    border-color: rgba(255, 255, 255, 0.56) !important;
    background: rgba(1, 12, 27, 0.7) !important;
}

#contact .contact-input-premium:focus,
#contact .contact-input-premium:hover,
#contact .contact-select-premium:focus,
#contact .contact-select-premium:hover {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.075) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#contact .contact-submit-btn-premium {
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

@media (hover: hover) and (pointer: fine) {
    #legacy .mission-card:hover,
    #contact .contact-info-card-premium:hover,
    #contact .contact-form-card-premium:hover {
        border-color: #ffffff !important;
        box-shadow: 0 34px 76px rgba(0, 0, 0, 0.64), 0 0 32px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    }

    #contact .contact-info-item-premium:hover {
        border-color: rgba(255, 255, 255, 0.58) !important;
        background: rgba(255, 255, 255, 0.09) !important;
    }

    #contact .contact-submit-btn-premium:hover {
        color: #061526 !important;
        background: #ffffff !important;
        box-shadow: 0 16px 34px rgba(255, 255, 255, 0.24), inset 0 1px 0 #ffffff !important;
    }
}

/* Consulting cards use frosted glass over the existing image — not blue paint. */
#consulting .services-grid > .reveal-up {
    isolation: isolate;
    border: 1.5px solid rgba(255, 255, 255, 0.82) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(1, 12, 28, 0.5)) !important;
    backdrop-filter: blur(26px) saturate(132%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(132%) !important;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.23), inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
}

#consulting .services-grid > .reveal-up::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 1px;
    border-radius: 23px;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.1), transparent 34%, rgba(255, 255, 255, 0.025));
    pointer-events: none;
}

#consulting .services-grid > .reveal-up .service-btn-cta {
    border-color: rgba(255, 255, 255, 0.86) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

@media (hover: hover) and (pointer: fine) {
    #consulting .services-grid > .reveal-up:hover {
        border-color: #ffffff !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(1, 12, 28, 0.42)) !important;
        box-shadow: 0 30px 64px rgba(0, 0, 0, 0.58), 0 0 30px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    }

    #consulting .services-grid > .reveal-up:hover .service-btn-cta {
        color: #061526 !important;
        background: #ffffff !important;
        box-shadow: 0 10px 24px rgba(255, 255, 255, 0.22) !important;
    }
}

/* Apple-like navbar: soft glass, a compact scroll state and responsive depth. */
.navbar {
    isolation: isolate;
    overflow: visible;
    background: linear-gradient(120deg, rgba(2, 18, 36, 0.76), rgba(1, 13, 28, 0.58)) !important;
    backdrop-filter: blur(32px) saturate(164%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(164%) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, border-radius 0.5s ease !important;
}

.navbar::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0.11), transparent 24%, transparent 76%, rgba(125, 211, 252, 0.08));
    opacity: 0.8;
    transition: opacity 0.45s ease;
}

.navbar.scrolled {
    background: linear-gradient(120deg, rgba(1, 13, 28, 0.9), rgba(4, 25, 46, 0.82)) !important;
    border-color: rgba(255, 255, 255, 0.56) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 5px rgba(255, 255, 255, 0.025) !important;
    transform: translate3d(0, -2px, 0) scale(0.985);
}

.navbar.scrolled::after {
    opacity: 1;
}

.navbar.menu-open {
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 30px rgba(125, 211, 252, 0.1) !important;
}

.navbar-inner {
    position: relative;
    z-index: 1;
}

.brand-logo-wrap,
.nav-controls,
#mobile-menu-btn {
    transition: transform 0.46s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease !important;
}

.navbar.scrolled .brand-logo-wrap {
    transform: scale(0.94);
}

.navbar.menu-open #mobile-menu-btn {
    transform: rotate(90deg) scale(1.07);
}

@media (hover: hover) and (pointer: fine) {
    .navbar:hover {
        border-color: rgba(255, 255, 255, 0.68) !important;
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 0 28px rgba(125, 211, 252, 0.08) !important;
    }

    .navbar:hover::after {
        opacity: 1;
    }
}

/* Restore the hero CTAs' exit motion, with an elegant, reversible flight. */
#hero .hero-actions .aurora-btn {
    will-change: transform, opacity, filter;
    transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.54s ease, filter 0.54s ease, box-shadow 0.36s ease !important;
}

#hero.hero-is-scrolling .hero-actions .primary-aurora {
    transform: translate3d(var(--hero-primary-x, 0px), var(--hero-primary-y, 0px), 0) !important;
    opacity: var(--hero-primary-opacity, 1);
    filter: blur(var(--hero-primary-blur, 0px));
}

#hero.hero-is-scrolling .hero-actions .secondary-aurora {
    transform: translate3d(var(--hero-secondary-x, 0px), var(--hero-secondary-y, 0px), 0) !important;
    opacity: var(--hero-secondary-opacity, 1);
    filter: blur(var(--hero-secondary-blur, 0px));
}

#hero.hero-is-scrolling .hero-actions .contact-aurora {
    transform: translate3d(var(--hero-contact-x, 0px), var(--hero-contact-y, 0px), 0) scale(var(--hero-contact-scale, 1)) !important;
    opacity: var(--hero-contact-opacity, 1);
    filter: blur(var(--hero-contact-blur, 0px));
}

@media (max-width: 768px) {
    .navbar.scrolled {
        transform: translate3d(0, -1px, 0) scale(0.99);
    }

}

@media (prefers-reduced-motion: reduce) {
    .navbar,
    #hero .hero-actions .aurora-btn {
        transition: none !important;
    }

    #hero.hero-is-scrolling .hero-actions .aurora-btn {
        transform: none !important;
        opacity: 1;
        filter: none;
    }
}

/* ==========================================================================
   LAYERED HERO SCROLL — IMAGE AND CONTENT LEAVE AS DISTINCT PLANES
   ========================================================================== */
.aurora-hero-bg {
    transform: translate3d(0, var(--hero-background-y, 0px), 0) scale(var(--hero-background-scale, 1));
    transform-origin: center 42%;
    opacity: var(--hero-background-opacity, 1);
    will-change: transform, opacity;
    transition: transform 0.16s linear, opacity 0.2s ease;
}

/* Higher specificity also makes this work for a page already open in development. */
#hero .parallax-element {
    transform: translate3d(0, calc(var(--parallax-y, 0px) + var(--reveal-offset, 0px) + var(--hero-layer-y, 0px)), 0) scale(var(--hero-layer-scale, 1)) !important;
    transform-origin: center center;
    will-change: transform;
}

#hero.hero-is-scrolling .insan-badge {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), 0 0 0 6px rgba(255, 255, 255, 0.08) !important;
}

@media (prefers-reduced-motion: reduce) {
    .aurora-hero-bg,
    #hero .parallax-element {
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   LIGHT MODE — ANIMATED EDITORIAL BACKGROUNDS FOR EVERY HOME SECTION
   ========================================================================== */
html.light-theme body main section.section:is(#about, #books, #consulting, #legacy, #contact) {
    isolation: isolate;
    background: #f8fbff !important;
    border-color: rgba(148, 163, 184, 0.34) !important;
}

/* Restore each section's original photography, with a crisp light treatment. */
html.light-theme body main section.section:is(#about, #books, #consulting, #legacy, #contact) > div[style*="background-image"] {
    display: block !important;
    visibility: visible !important;
    z-index: 0 !important;
    opacity: 0.4 !important;
    filter: brightness(1.09) contrast(1.12) saturate(1.08) !important;
    mix-blend-mode: normal !important;
    transform: translate3d(0, var(--light-background-shift, 0px), 0) scale(1.075) !important;
    transform-origin: center center;
    transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), filter 0.55s ease, opacity 0.55s ease;
    will-change: transform;
}

/* A subtle light veil keeps text sharp without turning the photography into fog. */
html.light-theme body main section.section:is(#about, #books, #consulting, #legacy, #contact) > div[style*="background: linear-gradient"] {
    display: block !important;
    opacity: 1 !important;
    background: linear-gradient(120deg, rgba(248, 251, 255, 0.18), rgba(255, 255, 255, 0.06) 48%, rgba(235, 246, 255, 0.24)) !important;
}

html.light-theme body main section.section#about > div[style*="background-image"] {
    opacity: 0.42 !important;
    filter: brightness(1.08) contrast(1.14) saturate(1.04) !important;
}

html.light-theme body main section.section#books > div[style*="background-image"] {
    opacity: 0.36 !important;
    filter: brightness(1.12) contrast(1.08) saturate(0.96) !important;
}

html.light-theme body main section.section#consulting > div[style*="background-image"] {
    opacity: 0.38 !important;
    filter: brightness(1.1) contrast(1.12) saturate(1.04) !important;
}

html.light-theme body main section.section#legacy > div[style*="background-image"] {
    opacity: 0.36 !important;
    filter: brightness(1.12) contrast(1.1) saturate(0.98) !important;
}

html.light-theme body main section.section#contact > div[style*="background-image"] {
    opacity: 0.34 !important;
    filter: brightness(1.12) contrast(1.1) saturate(1.02) !important;
}

/* Containers remain above the moving photography and gain a restrained lift on reveal. */
html.light-theme body main section.section:is(#about, #books, #consulting, #legacy, #contact) > .container {
    position: relative;
    z-index: 2;
}

html.light-theme body main section.section:is(#about, #books, #consulting, #legacy, #contact) .reveal-up.active {
    animation: light-content-settle 0.82s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes light-content-settle {
    0% {
        opacity: 0;
        transform: translate3d(0, 22px, 0) scale(0.985);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Footer receives its own appropriate, calm architectural image treatment. */
html.light-theme body footer.footer-ultra.footer-ultra {
    background-image: linear-gradient(115deg, rgba(248, 251, 255, 0.86), rgba(235, 247, 255, 0.64)), url("../images/footer-bg-custom.b717d1039e1f.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    animation: light-footer-pan 24s ease-in-out infinite alternate;
}

html.light-theme body footer.footer-ultra.footer-ultra::before {
    display: block !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.32), transparent 42%, rgba(255, 255, 255, 0.18)) !important;
}

@keyframes light-footer-pan {
    from { background-position: center 48%; }
    to { background-position: center 54%; }
}

@media (prefers-reduced-motion: reduce) {
    html.light-theme body main section.section:is(#about, #books, #consulting, #legacy, #contact) > div[style*="background-image"] {
        transform: scale(1.04) !important;
        transition: none !important;
    }

    html.light-theme body main section.section:is(#about, #books, #consulting, #legacy, #contact) .reveal-up.active,
    html.light-theme body footer.footer-ultra.footer-ultra {
        animation: none !important;
    }
}

/* ==========================================================================
   INTERIOR PAGES — THE HOME PAGE'S LAYERED MOTION, ADAPTED PER PAGE TYPE
   ========================================================================== */
main.interior-page-motion > section.page-scene {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

main.interior-page-motion > section.page-scene::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: -5%;
    pointer-events: none;
    background-image:
        linear-gradient(120deg, rgba(1, 10, 24, 0.86), rgba(2, 16, 34, 0.48) 52%, rgba(1, 10, 24, 0.82)),
        var(--interior-scene-image);
    background-size: cover;
    background-position: center;
    filter: saturate(1.06) contrast(1.04);
    opacity: 0.56;
    transform: translate3d(0, var(--page-scene-background-y, 0px), 0) scale(var(--page-scene-background-scale, 1.07));
    transform-origin: center center;
    transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, filter 0.5s ease;
    will-change: transform;
}

main.interior-page-motion > section.page-scene-intro::before {
    opacity: 0.7;
    filter: saturate(1.12) contrast(1.08);
}

main.interior-page-motion > section.page-scene::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 9%;
    right: 9%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--interior-scene-accent), 0.72), transparent);
    box-shadow: 0 0 20px rgba(var(--interior-scene-accent), 0.22);
    opacity: 0;
    transition: opacity 0.6s ease 0.16s;
}

main.interior-page-motion > section.page-scene > .container {
    position: relative;
    z-index: 2;
}

main.interior-page-motion > section.page-scene.page-scene-visible::after {
    opacity: 1;
}

main.interior-page-motion > section.page-scene > .container {
    transform: translate3d(0, var(--page-scene-container-y, 0px), 0);
    transition: transform 0.66s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes interior-section-arrival {
    from {
        opacity: 0;
        transform: translate3d(0, 34px, 0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes interior-intro-arrival {
    from {
        opacity: 0;
        transform: translate3d(0, 48px, 0) scale(0.97);
    }
    68% {
        opacity: 1;
        transform: translate3d(0, -3px, 0) scale(1.008);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Every meaningful block within an interior section receives its own entrance
   and scroll velocity, matching the independent planes of the home hero. */
main.interior-page-motion > section.page-scene .page-scene-layer {
    transform: translate3d(0, var(--page-scene-layer-y, 0px), 0);
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.42s ease;
    will-change: transform;
}

main.interior-page-motion > section.page-scene.page-scene-visible .page-scene-layer {
    animation: interior-layer-arrival 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--scene-layer-index, 0) * 84ms);
}

main.interior-page-motion > section.page-scene.page-scene-intro.page-scene-visible .page-scene-layer {
    animation-duration: 0.92s;
}

@keyframes interior-layer-arrival {
    from {
        opacity: 0;
        filter: blur(8px);
        transform: translate3d(0, calc(34px + var(--page-scene-layer-y, 0px)), 0) scale(0.985);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, var(--page-scene-layer-y, 0px), 0) scale(1);
    }
}

/* Footer is part of the journey on every interior page, not a static ending. */
.footer-ultra.footer-scene.footer-scene-visible .footer-col-ultra {
    animation: footer-column-arrival 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.footer-ultra.footer-scene.footer-scene-visible .footer-col-ultra:nth-child(2) { animation-delay: 80ms; }
.footer-ultra.footer-scene.footer-scene-visible .footer-col-ultra:nth-child(3) { animation-delay: 160ms; }
.footer-ultra.footer-scene.footer-scene-visible .footer-col-ultra:nth-child(4) { animation-delay: 240ms; }

.footer-ultra.footer-scene.footer-scene-visible .footer-bottom-ultra {
    animation: footer-column-arrival 0.72s 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes footer-column-arrival {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    main.interior-page-motion > section.page-scene .page-scene-layer,
    main.interior-page-motion > section.page-scene.page-scene-visible .page-scene-layer,
    .footer-ultra.footer-scene.footer-scene-visible .footer-col-ultra,
    .footer-ultra.footer-scene.footer-scene-visible .footer-bottom-ultra {
        animation: none !important;
        transform: none !important;
        transition: none !important;
        filter: none !important;
    }
}

/* ==========================================================================
   CONSULTING SERVICES — CLEAR CONTENT OVER A TRUE BACKDROP-GLASS SURFACE
   ========================================================================== */
#consulting .services-grid > .reveal-up {
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background: rgba(3, 19, 37, 0.34) !important;
    backdrop-filter: blur(20px) saturate(138%) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(20px) saturate(138%) contrast(1.05) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease !important;
}

/* Remove the fog orb inside the card: the blur belongs only to the backdrop. */
#consulting .services-grid > .reveal-up > div[style*="radial-gradient"] {
    display: none !important;
}

/* A restrained surface highlight lives behind the sharp content. */
#consulting .services-grid > .reveal-up::after {
    z-index: 0 !important;
    inset: 0 !important;
    border-radius: inherit;
    background: linear-gradient(128deg, rgba(255, 255, 255, 0.14), transparent 32%, transparent 70%, rgba(125, 211, 252, 0.08)) !important;
}

#consulting .services-grid > .reveal-up > :not([style*="position: absolute"]) {
    position: relative;
    z-index: 1;
}

#consulting .services-grid > .reveal-up div[style*="width: 60px"][style*="height: 60px"] {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.54) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

html:not(.light-theme) #consulting .services-grid > .reveal-up h3 {
    color: #ffffff !important;
    text-shadow: none !important;
}

html:not(.light-theme) #consulting .services-grid > .reveal-up div[style*="color: rgba(255, 255, 255, 0.75)"] {
    color: rgba(241, 245, 249, 0.9) !important;
}

#consulting .services-grid > .reveal-up .service-btn-cta {
    border-color: rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(14px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px rgba(0, 0, 0, 0.14) !important;
}

#consulting .services-grid > .reveal-up.active {
    animation: service-glass-arrival 0.76s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes service-glass-arrival {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (hover: hover) and (pointer: fine) {
    #consulting .services-grid > .reveal-up:hover {
        transform: translate3d(0, -8px, 0) scale(1.012) !important;
        border-color: rgba(255, 255, 255, 0.96) !important;
        background: rgba(5, 28, 51, 0.4) !important;
        box-shadow: 0 28px 54px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(125, 211, 252, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }

    #consulting .services-grid > .reveal-up:hover .service-btn-cta {
        background: rgba(255, 255, 255, 0.18) !important;
        border-color: #ffffff !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    }
}

/* Light mode uses the same clear glass principle, with dark readable content. */
html.light-theme body #consulting .services-grid > .reveal-up {
    border-color: rgba(15, 23, 42, 0.18) !important;
    background: rgba(255, 255, 255, 0.64) !important;
    backdrop-filter: blur(18px) saturate(135%) contrast(1.03) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) contrast(1.03) !important;
    box-shadow: 0 18px 40px rgba(14, 116, 144, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

html.light-theme body #consulting .services-grid > .reveal-up::after {
    background: linear-gradient(128deg, rgba(255, 255, 255, 0.64), transparent 42%, rgba(186, 230, 253, 0.18)) !important;
}

html.light-theme body #consulting .services-grid > .reveal-up div[style*="width: 60px"][style*="height: 60px"] {
    background: rgba(255, 255, 255, 0.56) !important;
    border-color: rgba(14, 116, 144, 0.28) !important;
    color: #0e7490 !important;
}

html.light-theme body #consulting .services-grid > .reveal-up .service-btn-cta {
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.28) !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

@media (prefers-reduced-motion: reduce) {
    #consulting .services-grid > .reveal-up.active {
        animation: none !important;
    }
}

/* ==========================================================================
   LIGHT MODE FINAL PASS — CLEAN CONTRAST, QUIET BACKGROUNDS, VISIBLE CONTACT
   ========================================================================== */
/* Keep the architectural photography present, but never strong enough to wash
   out the content placed over it. */
html.light-theme body main section.section#about > div[style*="background-image"] { opacity: 0.16 !important; }
html.light-theme body main section.section#books > div[style*="background-image"] { opacity: 0.14 !important; }
html.light-theme body main section.section#consulting > div[style*="background-image"] { opacity: 0.16 !important; }
html.light-theme body main section.section#legacy > div[style*="background-image"] { opacity: 0.19 !important; }
html.light-theme body main section.section#contact > div[style*="background-image"] { opacity: 0.14 !important; }

html.light-theme body main section.section:is(#about, #books, #consulting, #legacy, #contact) > div[style*="background-image"] {
    filter: brightness(1.04) contrast(1.06) saturate(1.02) !important;
}

html.light-theme body main section.section:is(#about, #books, #consulting, #legacy, #contact) > div[style*="background: linear-gradient"] {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02) 50%, rgba(240, 249, 255, 0.1)) !important;
}

/* About: readable glass cards over a subtle image, rather than grey haze. */
html.light-theme body #about .stat-card-luxury,
html.light-theme body #about .about-sticky > div,
html.light-theme body #about .about-grid > div:last-child > div[style*="border-left"] {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(15, 23, 42, 0.13) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html.light-theme body #about .stat-card-luxury h3,
html.light-theme body #about .about-grid h2,
html.light-theme body #about .about-grid h3 {
    color: #0f172a !important;
}

html.light-theme body #about .stat-card-luxury p,
html.light-theme body #about .about-grid p {
    color: #475569 !important;
}

/* Books: preserve cover art, keep decorative layers restrained. */
html.light-theme body #books .book-card-upgraded > div:first-child > div[style*="background-image"] {
    opacity: 0.16 !important;
    filter: brightness(1.04) contrast(1.05) saturate(1.02) !important;
}

html.light-theme body #books .card,
html.light-theme body #books .book-card-upgraded {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
}

/* Consulting: a crisp white glass pane, never a washed-out fog card. */
html.light-theme body #consulting .services-grid > .reveal-up {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(14, 116, 144, 0.2) !important;
    backdrop-filter: blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
    box-shadow: 0 16px 34px rgba(14, 116, 144, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html.light-theme body #consulting .services-grid > .reveal-up h3 {
    color: #0f172a !important;
}

html.light-theme body #consulting .services-grid > .reveal-up div[style*="color: rgba(255, 255, 255, 0.75)"] {
    color: #475569 !important;
}

html.light-theme body #consulting .services-grid > .reveal-up .service-btn-cta {
    background: #0e7490 !important;
    border-color: #0e7490 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(14, 116, 144, 0.2) !important;
}

/* Mission remains the visual focal point, with a stronger clean reading surface. */
html.light-theme body #legacy .mission-card {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1), inset 0 1px 0 #ffffff !important;
}

html.light-theme body #legacy .mission-card h3,
html.light-theme body #legacy .mission-card p {
    color: #0f172a !important;
}

html.light-theme body #legacy .mission-card p {
    color: #475569 !important;
}

/* Contact: restore all icons, labels and the submit action with clear contrast. */
html.light-theme body #contact .contact-info-card-premium,
html.light-theme body #contact .contact-form-card-premium {
    background: rgba(255, 255, 255, 0.91) !important;
    border-color: rgba(14, 116, 144, 0.18) !important;
    backdrop-filter: blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
    box-shadow: 0 18px 40px rgba(14, 116, 144, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html.light-theme body #contact .contact-info-header-icon,
html.light-theme body #contact .contact-info-item-icon {
    color: #0e7490 !important;
    background: rgba(224, 242, 254, 0.78) !important;
    border-color: rgba(14, 116, 144, 0.26) !important;
}

html.light-theme body #contact .contact-info-title,
html.light-theme body #contact .contact-info-item-value,
html.light-theme body #contact .contact-info-item-arrow {
    color: #0f172a !important;
}

html.light-theme body #contact .contact-info-desc,
html.light-theme body #contact .contact-info-item-label {
    color: #475569 !important;
}

html.light-theme body #contact .contact-info-item-premium {
    background: rgba(255, 255, 255, 0.68) !important;
    border-color: rgba(14, 116, 144, 0.14) !important;
}

html.light-theme body #contact .contact-info-item-premium:hover {
    background: rgba(224, 242, 254, 0.62) !important;
    border-color: rgba(14, 116, 144, 0.36) !important;
    transform: translate3d(4px, 0, 0);
}

html.light-theme body #contact .contact-form-label,
html.light-theme body #contact .contact-form-label svg {
    color: #334155 !important;
}

html.light-theme body #contact .contact-input-premium,
html.light-theme body #contact .contact-select-premium {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}

html.light-theme body #contact .contact-input-premium::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

html.light-theme body #contact .contact-submit-btn-premium,
html.light-theme body #contact #contact-submit-btn {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0e7490, #0369a1) !important;
    border-color: #0e7490 !important;
    box-shadow: 0 12px 26px rgba(14, 116, 144, 0.24) !important;
}

html.light-theme body #contact .contact-submit-btn-premium:hover,
html.light-theme body #contact #contact-submit-btn:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #155e75, #075985) !important;
    box-shadow: 0 16px 30px rgba(14, 116, 144, 0.3) !important;
}

/* Footer background stays visible as a detail, while every link remains readable. */
html.light-theme body footer.footer-ultra.footer-ultra {
    background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.93), rgba(240, 249, 255, 0.86)), url("../images/footer-bg-custom.b717d1039e1f.png") !important;
    color: #334155 !important;
}

html.light-theme body footer.footer-ultra.footer-ultra .footer-heading-ultra,
html.light-theme body footer.footer-ultra.footer-ultra .footer-brand-card p span {
    color: #0f172a !important;
}

html.light-theme body footer.footer-ultra.footer-ultra .footer-link-ultra,
html.light-theme body footer.footer-ultra.footer-ultra .footer-brand-card p,
html.light-theme body footer.footer-ultra.footer-ultra .footer-bottom-ultra,
html.light-theme body footer.footer-ultra.footer-ultra .footer-bottom-ultra p {
    color: #475569 !important;
}

html.light-theme body footer.footer-ultra.footer-ultra .footer-brand-card {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}

html.light-theme body footer.footer-ultra.footer-ultra .footer-totop-ultra {
    color: #ffffff !important;
    background: #0f172a !important;
}

html.light-theme body footer.footer-ultra.footer-ultra .footer-totop-ultra:hover {
    color: #ffffff !important;
    background: #0e7490 !important;
}

/* Interior pages use the same calm image hierarchy as the home page. */
html.light-theme main.interior-page-motion > section.page-scene::before {
    opacity: 0.2;
}

html.light-theme main.interior-page-motion > section.page-scene-intro::before {
    opacity: 0.3;
}

/* ==========================================================================
   LIGHT MODE — MONOCHROME BLACK ACCENT SYSTEM
   ========================================================================== */
html.light-theme {
    --color-primary: #111111;
    --color-primary-light: #374151;
    --color-primary-dark: #050505;
    --color-accent: #111111;
    --color-accent-hover: #000000;
}

/* Navigation, inline links and all minor accents use the same neutral ink. */
html.light-theme body main a:not(.btn):not(.aurora-btn):not(.service-btn-cta):not(.book-btn-order) {
    color: #111111 !important;
}

html.light-theme body main a:not(.btn):not(.aurora-btn):not(.service-btn-cta):not(.book-btn-order):hover {
    color: #000000 !important;
}

html.light-theme body .insan-badge span,
html.light-theme body #about .about-grid > div:last-child > span span:first-child,
html.light-theme body #books .reveal-up span[style*="backdrop-filter"] > span:first-child,
html.light-theme body #consulting .reveal-up span[style*="backdrop-filter"] > span:first-child,
html.light-theme body #legacy .reveal-up span[style*="backdrop-filter"] > span:first-child,
html.light-theme body .status-dot-ultra {
    background: #111111 !important;
    box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.07) !important;
}

html.light-theme body .aurora-title-text span[style*="color"],
html.light-theme body .title-accent,
html.light-theme body .hero-subtitle strong,
html.light-theme body .hero-subtitle b,
html.light-theme body #about .about-grid > div:last-child > span,
html.light-theme body #about .about-grid > div:last-child > div[style*="border-left"] span,
html.light-theme body #consulting span[style*="color: #38bdf8"],
html.light-theme body #consulting svg[style*="color: #38bdf8"] {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

html.light-theme body #hero .primary-aurora,
html.light-theme body #books .book-btn-order,
html.light-theme body #books .book-card-upgraded .card-content > div:last-child > a:last-child,
html.light-theme body #consulting .services-grid > .reveal-up .service-btn-cta,
html.light-theme body #contact .contact-submit-btn-premium,
html.light-theme body #contact #contact-submit-btn {
    color: #ffffff !important;
    background: #111111 !important;
    border-color: #111111 !important;
    box-shadow: 0 11px 24px rgba(17, 17, 17, 0.2) !important;
}

html.light-theme body #hero .primary-aurora:hover,
html.light-theme body #books .book-btn-order:hover,
html.light-theme body #books .book-card-upgraded .card-content > div:last-child > a:last-child:hover,
html.light-theme body #consulting .services-grid > .reveal-up .service-btn-cta:hover,
html.light-theme body #contact .contact-submit-btn-premium:hover,
html.light-theme body #contact #contact-submit-btn:hover {
    color: #ffffff !important;
    background: #000000 !important;
    border-color: #000000 !important;
    box-shadow: 0 15px 28px rgba(0, 0, 0, 0.26) !important;
}

html.light-theme body #hero .secondary-aurora,
html.light-theme body #hero .contact-aurora,
html.light-theme body #hero .secondary-aurora svg,
html.light-theme body #hero .contact-aurora svg,
html.light-theme body #hero .contact-aurora .neon-icon {
    color: #111111 !important;
    border-color: rgba(17, 17, 17, 0.26) !important;
}

html.light-theme body #hero .contact-aurora .neon-icon {
    background: #111111 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.2) !important;
}

html.light-theme body .stat-card-luxury,
html.light-theme body #about .about-grid > div:last-child > div[style*="border-left"] {
    border-top-color: #111111 !important;
    border-left-color: #111111 !important;
}

html.light-theme body .stat-card-luxury:hover,
html.light-theme body #books .book-card-upgraded:hover,
html.light-theme body #consulting .services-grid > .reveal-up:hover {
    border-color: #111111 !important;
    box-shadow: 0 16px 34px rgba(17, 17, 17, 0.12) !important;
}

html.light-theme body #contact .contact-info-header-icon,
html.light-theme body #contact .contact-info-item-icon {
    color: #111111 !important;
    background: rgba(17, 17, 17, 0.06) !important;
    border-color: rgba(17, 17, 17, 0.2) !important;
}

html.light-theme body #contact .contact-input-premium:focus,
html.light-theme body #contact .contact-select-premium:focus {
    border-color: #111111 !important;
    box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.08) !important;
}

html.light-theme body #contact .contact-input-focus-line,
html.light-theme body #contact .contact-select-premium:focus~.contact-select-arrow {
    background: #111111 !important;
    color: #111111 !important;
}

html.light-theme body footer.footer-ultra.footer-ultra .footer-heading-ultra::after,
html.light-theme body footer.footer-ultra.footer-ultra .footer-link-ultra::after {
    background: #111111 !important;
}

html.light-theme body footer.footer-ultra.footer-ultra .footer-link-ultra:hover,
html.light-theme body footer.footer-ultra.footer-ultra .footer-status-ultra {
    color: #111111 !important;
}

html.light-theme body footer.footer-ultra.footer-ultra .footer-status-ultra {
    background: rgba(17, 17, 17, 0.06) !important;
    border-color: rgba(17, 17, 17, 0.16) !important;
}

/* The active light-mode switch becomes a clean black knob with a white sun. */
html.light-theme body .ts-wrap.ts-wrap:has(input:checked) .ts-knob {
    background: #111111 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
}

html.light-theme body .ts-wrap.ts-wrap:has(input:checked) .ts-sun {
    stroke: #ffffff !important;
}

@media (max-width: 768px) {
    html.light-theme body main section.section:is(#about, #books, #consulting, #legacy, #contact) > div[style*="background-image"] {
        opacity: 0.12 !important;
    }

    html.light-theme body #contact .contact-info-card-premium,
    html.light-theme body #contact .contact-form-card-premium {
        background: rgba(255, 255, 255, 0.94) !important;
    }
}

/* Light pages keep the same motion language, with crisp photography and clean contrast. */
html.light-theme main.interior-page-motion > section.page-scene::before {
    background-image:
        linear-gradient(120deg, rgba(248, 252, 255, 0.42), rgba(255, 255, 255, 0.12) 52%, rgba(239, 249, 255, 0.5)),
        var(--interior-scene-image);
    filter: brightness(1.08) saturate(1.06) contrast(1.1);
    opacity: 0.38;
}

html.light-theme main.interior-page-motion > section.page-scene-intro::before {
    opacity: 0.58;
}

html.light-theme main.interior-page-motion > section.page-scene::after {
    background: linear-gradient(90deg, transparent, rgba(var(--interior-scene-accent), 0.48), transparent);
    box-shadow: 0 0 18px rgba(var(--interior-scene-accent), 0.16);
}

@media (hover: hover) and (pointer: fine) {
    main.interior-page-motion > section.page-scene .card,
    main.interior-page-motion > section.page-scene .book-detail-panel,
    main.interior-page-motion > section.page-scene .book-gallery-stage {
        transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.48s ease, border-color 0.48s ease;
    }

    main.interior-page-motion > section.page-scene .card:hover,
    main.interior-page-motion > section.page-scene .book-detail-panel:hover,
    main.interior-page-motion > section.page-scene .book-gallery-stage:hover {
        transform: translate3d(0, -7px, 0);
    }
}

@media (max-width: 768px) {
    main.interior-page-motion > section.page-scene::before {
        inset: -8%;
        opacity: 0.44;
    }

    html.light-theme main.interior-page-motion > section.page-scene::before {
        opacity: 0.32;
    }

    main.interior-page-motion > section.page-scene-intro::before,
    html.light-theme main.interior-page-motion > section.page-scene-intro::before {
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    main.interior-page-motion > section.page-scene::before {
        transform: scale(1.04);
        transition: none;
    }

    main.interior-page-motion > section.page-scene.page-scene-visible > .container {
        animation: none;
    }
}

/* Final light-mode accent pass: black, charcoal and white only — no cyan, blue or amber. */
html.light-theme main.interior-page-motion > section.page-scene {
    --interior-scene-accent: 17, 17, 17;
}

html.light-theme body #consulting .services-grid > .reveal-up,
html.light-theme body #contact .contact-info-card-premium,
html.light-theme body #contact .contact-form-card-premium {
    border-color: rgba(17, 17, 17, 0.18) !important;
    box-shadow: 0 16px 34px rgba(17, 17, 17, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html.light-theme body #consulting .services-grid > .reveal-up::after {
    background: linear-gradient(128deg, rgba(255, 255, 255, 0.64), transparent 42%, rgba(17, 17, 17, 0.045)) !important;
}

html.light-theme body #consulting .services-grid > .reveal-up div[style*="width: 60px"][style*="height: 60px"],
html.light-theme body #contact .contact-form-title svg,
html.light-theme body #contact .contact-success-checkmark,
html.light-theme body #contact .contact-info-item-premium:hover .contact-info-item-arrow {
    color: #111111 !important;
    border-color: rgba(17, 17, 17, 0.24) !important;
}

html.light-theme body #contact .contact-info-item-premium,
html.light-theme body #contact .contact-info-item-premium:hover {
    border-color: rgba(17, 17, 17, 0.16) !important;
}

html.light-theme body #contact .contact-info-item-premium:hover {
    background: rgba(17, 17, 17, 0.045) !important;
}

html.light-theme body #legacy div[style*="background: linear-gradient(90deg, transparent, #38bdf8"] {
    background: linear-gradient(90deg, transparent, #111111, transparent) !important;
    box-shadow: 0 0 12px rgba(17, 17, 17, 0.16) !important;
}

html.light-theme body footer.footer-ultra.footer-ultra .footer-totop-ultra:hover {
    background: #000000 !important;
}

html.light-theme body .ts-wrap:has(input:checked) {
    background: rgba(17, 17, 17, 0.08) !important;
    border-color: rgba(17, 17, 17, 0.3) !important;
}

html.light-theme body .nav-links a:hover,
html.light-theme body .nav-links a:focus-visible,
html.light-theme body .nav-links a.active {
    color: #111111 !important;
    background: rgba(17, 17, 17, 0.055) !important;
    border-color: rgba(17, 17, 17, 0.24) !important;
}

html.light-theme body footer.footer-ultra.footer-ultra .footer-social-ultra:hover {
    color: #ffffff !important;
    background: #111111 !important;
    border-color: #111111 !important;
    box-shadow: 0 12px 26px rgba(17, 17, 17, 0.22) !important;
}

html.light-theme body [style*="color: #38bdf8"],
html.light-theme body [style*="color:#38bdf8"] {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

html.light-theme body [style*="background: #38bdf8"],
html.light-theme body [style*="background:#38bdf8"] {
    background: #111111 !important;
    box-shadow: 0 0 10px rgba(17, 17, 17, 0.22) !important;
}

@media (max-width: 768px) {
    html.light-theme body #nav-links {
        border-color: rgba(17, 17, 17, 0.22) !important;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(244, 244, 244, 0.99)) !important;
        box-shadow: -22px 24px 58px rgba(0, 0, 0, 0.16), inset 1px 0 0 rgba(255, 255, 255, 0.88) !important;
    }

    html.light-theme body #nav-links::before {
        color: rgba(17, 17, 17, 0.62) !important;
    }

    html.light-theme body #nav-links a {
        color: #111111 !important;
        background: rgba(255, 255, 255, 0.76) !important;
        border-color: rgba(17, 17, 17, 0.18) !important;
    }

    html.light-theme body #nav-links a::before {
        color: #ffffff !important;
        background: #111111 !important;
    }

    html.light-theme body #nav-links a:hover,
    html.light-theme body #nav-links a:focus-visible,
    html.light-theme body #nav-links a.active {
        color: #111111 !important;
        background: rgba(17, 17, 17, 0.07) !important;
        border-color: #111111 !important;
    }
}

/* ==========================================================================
   LIGHT MODE — CRISP MONOCHROME HOME SURFACES
   ========================================================================== */
/* Expert profile CTA: clear black-and-white hierarchy with no remaining blue. */
html.light-theme body .author-bio-cta {
    color: #111111 !important;
    border: 1.5px solid #111111 !important;
    background: #ffffff !important;
    box-shadow: 0 14px 30px rgba(17, 17, 17, 0.12), inset 0 1px 0 #ffffff !important;
}

html.light-theme body .author-bio-cta::before {
    background: radial-gradient(circle, rgba(17, 17, 17, 0.1), transparent 68%) !important;
}

html.light-theme body .author-bio-cta-kicker,
html.light-theme body .author-bio-cta-title,
html.light-theme body .author-bio-cta-arrow {
    color: #111111 !important;
}

html.light-theme body .author-bio-cta-icon {
    color: #ffffff !important;
    background: #111111 !important;
    border-color: #111111 !important;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.2) !important;
}

html.light-theme body .author-bio-cta-arrow {
    background: #ffffff !important;
    border-color: rgba(17, 17, 17, 0.38) !important;
}

html.light-theme body .author-bio-cta:focus-visible {
    outline-color: #111111 !important;
}

@media (hover: hover) and (pointer: fine) {
    html.light-theme body .author-bio-cta:hover {
        color: #ffffff !important;
        border-color: #111111 !important;
        background: #111111 !important;
        box-shadow: 0 20px 38px rgba(17, 17, 17, 0.22) !important;
    }

    html.light-theme body .author-bio-cta:hover .author-bio-cta-kicker,
    html.light-theme body .author-bio-cta:hover .author-bio-cta-title {
        color: #ffffff !important;
    }

    html.light-theme body .author-bio-cta:hover .author-bio-cta-icon {
        color: #111111 !important;
        background: #ffffff !important;
    }

    html.light-theme body .author-bio-cta:hover .author-bio-cta-arrow {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.13) !important;
        border-color: rgba(255, 255, 255, 0.58) !important;
    }
}

html.light-theme body .author-modal-card {
    scrollbar-color: #111111 rgba(17, 17, 17, 0.08);
}

html.light-theme body .author-modal-card::-webkit-scrollbar-thumb {
    background: #111111;
    border-color: #ffffff;
}

/* Hero actions are deliberately distinct, but remain one monochrome family. */
html.light-theme body #hero .hero-actions .primary-aurora {
    min-height: 62px;
    color: #ffffff !important;
    background: #111111 !important;
    border: 1.5px solid #111111 !important;
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.22) !important;
}

html.light-theme body #hero .hero-actions .secondary-aurora,
html.light-theme body #hero .hero-actions .contact-aurora {
    min-height: 62px;
    color: #111111 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1.5px solid #111111 !important;
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.13) !important;
}

html.light-theme body #hero .hero-actions .secondary-aurora svg,
html.light-theme body #hero .hero-actions .contact-aurora svg {
    color: currentColor !important;
}

html.light-theme body #hero .hero-actions .contact-aurora .neon-icon {
    flex: 0 0 44px;
    background: #111111 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
    html.light-theme body #hero .hero-actions .primary-aurora:hover {
        background: #000000 !important;
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28) !important;
    }

    html.light-theme body #hero .hero-actions .secondary-aurora:hover,
    html.light-theme body #hero .hero-actions .contact-aurora:hover {
        color: #ffffff !important;
        background: #111111 !important;
        border-color: #111111 !important;
        box-shadow: 0 16px 30px rgba(17, 17, 17, 0.22) !important;
    }

    html.light-theme body #hero .hero-actions .contact-aurora:hover .neon-icon {
        color: #111111 !important;
        background: #ffffff !important;
    }
}

/* Keep the book imagery visible and intentional, rather than whitening it into fog. */
html.light-theme body #books {
    background: #f5f5f3 !important;
    border-color: rgba(17, 17, 17, 0.12) !important;
}

html.light-theme body #books > div[style*="background-image"] {
    display: block !important;
    opacity: 0.28 !important;
    filter: brightness(1.1) contrast(1.12) saturate(0.48) !important;
}

html.light-theme body #books > div[style*="background: linear-gradient"] {
    display: block !important;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.72), rgba(248, 248, 246, 0.58) 54%, rgba(255, 255, 255, 0.76)) !important;
}

html.light-theme body #books .section-ambient-glow {
    display: none !important;
}

html.light-theme body #books .book-card-upgraded {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(17, 17, 17, 0.16) !important;
    box-shadow: 0 16px 34px rgba(17, 17, 17, 0.1), inset 0 1px 0 #ffffff !important;
}

html.light-theme body #books .book-card-upgraded > div:first-child {
    background: rgba(248, 248, 246, 0.94) !important;
}

html.light-theme body #books .book-card-upgraded > div:first-child > div[style*="background-image"] {
    opacity: 0.24 !important;
    filter: brightness(1.08) contrast(1.14) saturate(0.48) !important;
}

html.light-theme body #books .book-card-upgraded:hover {
    border-color: #111111 !important;
    box-shadow: 0 22px 42px rgba(17, 17, 17, 0.16), inset 0 1px 0 #ffffff !important;
}

/* Consulting retains the photo, while its content sits on a sharp white glass panel. */
html.light-theme body #consulting {
    background: #f3f3f1 !important;
    border-color: rgba(17, 17, 17, 0.12) !important;
}

html.light-theme body #consulting > div[style*="background-image"] {
    display: block !important;
    opacity: 0.24 !important;
    filter: brightness(1.12) contrast(1.15) saturate(0.18) !important;
}

html.light-theme body #consulting > div[style*="background: linear-gradient"] {
    display: block !important;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.68), rgba(248, 248, 246, 0.5) 54%, rgba(255, 255, 255, 0.7)) !important;
}

html.light-theme body #consulting .section-ambient-glow {
    display: none !important;
}

html.light-theme body #consulting .services-grid > .reveal-up {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(17, 17, 17, 0.16) !important;
    backdrop-filter: blur(12px) saturate(104%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(104%) !important;
    box-shadow: 0 16px 34px rgba(17, 17, 17, 0.1), inset 0 1px 0 #ffffff !important;
}

html.light-theme body #consulting .services-grid > .reveal-up h3 {
    color: #111111 !important;
}

html.light-theme body #consulting .services-grid > .reveal-up div[style*="color: rgba(255, 255, 255, 0.75)"],
html.light-theme body #consulting .services-grid > .reveal-up li {
    color: #4b5563 !important;
}

html.light-theme body #consulting .services-grid > .reveal-up div[style*="width: 60px"][style*="height: 60px"] {
    color: #111111 !important;
    background: #ffffff !important;
    border-color: rgba(17, 17, 17, 0.22) !important;
    box-shadow: 0 9px 18px rgba(17, 17, 17, 0.12) !important;
}

html.light-theme body #consulting .services-grid > .reveal-up span[style*="color: #38bdf8"],
html.light-theme body #consulting .services-grid > .reveal-up svg[style*="color: #38bdf8"] {
    color: #111111 !important;
}

html.light-theme body #consulting .services-grid > .reveal-up .service-btn-cta {
    color: #ffffff !important;
    background: #111111 !important;
    border-color: #111111 !important;
    box-shadow: 0 10px 20px rgba(17, 17, 17, 0.18) !important;
}

@media (hover: hover) and (pointer: fine) {
    html.light-theme body #consulting .services-grid > .reveal-up:hover {
        border-color: #111111 !important;
        background: #ffffff !important;
        box-shadow: 0 22px 42px rgba(17, 17, 17, 0.16), inset 0 1px 0 #ffffff !important;
    }

    html.light-theme body #consulting .services-grid > .reveal-up:hover .service-btn-cta {
        color: #ffffff !important;
        background: #000000 !important;
        border-color: #000000 !important;
    }
}

/* Hero CTA scroll choreography: books fly left, services fly right, phone fades upward. */
#hero .hero-actions {
    isolation: isolate;
    will-change: transform;
}

#hero .hero-actions .aurora-btn {
    transform-origin: center center;
    transition: transform 0.56s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.42s ease, filter 0.42s ease, box-shadow 0.42s ease !important;
}

#hero.hero-is-scrolling .hero-actions .aurora-btn {
    filter: none !important;
}

#hero.hero-is-scrolling .hero-actions .primary-aurora,
#hero.hero-is-scrolling .hero-actions .secondary-aurora,
#hero.hero-is-scrolling .hero-actions .contact-aurora {
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.2) !important;
}

/* Scroll-linked hero motion stays on the compositor: no blur, layout reads,
   or long transition tail while the visitor is actively scrolling. */
.aurora-hero-bg,
#hero .parallax-element,
#hero .hero-actions,
#hero .hero-actions .aurora-btn {
    will-change: auto;
}

html.hero-scroll-motion-active .aurora-hero-bg,
html.hero-scroll-motion-active #hero .parallax-element,
html.hero-scroll-motion-active #hero .hero-actions,
html.hero-scroll-motion-active #hero .hero-actions .aurora-btn {
    will-change: transform, opacity;
}

html.hero-scroll-motion-active .aurora-hero-bg,
html.hero-scroll-motion-active #hero .parallax-element,
html.hero-scroll-motion-active #hero .hero-actions .aurora-btn {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #hero .hero-actions,
    #hero .hero-actions .aurora-btn {
        transition: none !important;
    }
}

/* ==========================================================================
   AUTHOR PROFILE MODAL — PREMIUM GLASS, CLEAR HIERARCHY, RESPONSIVE SCROLL
   ========================================================================== */
#authorBioModal {
    isolation: isolate;
    align-items: flex-start !important;
    padding: clamp(12px, 3vw, 34px) !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.11), transparent 28%),
        radial-gradient(circle at 88% 90%, rgba(255, 255, 255, 0.07), transparent 32%),
        rgba(1, 7, 18, 0.84) !important;
    backdrop-filter: blur(30px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(135%) !important;
    scrollbar-color: rgba(255, 255, 255, 0.72) rgba(255, 255, 255, 0.08) !important;
}

#authorBioModal::before,
#authorBioModal::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: -1;
}

#authorBioModal::before {
    inset: 0;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.05), transparent 36%, transparent 66%, rgba(255, 255, 255, 0.04));
}

#authorBioModal::after {
    width: min(72vw, 720px);
    height: min(72vw, 720px);
    top: -34%;
    right: -22%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.11);
    filter: blur(92px);
    opacity: 0.5;
}

#authorBioModal.is-visible .author-modal-card {
    animation: author-modal-card-in 0.54s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes author-modal-card-in {
    from { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.985); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

#authorBioModal .author-modal-card {
    isolation: isolate;
    width: min(100%, 1060px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - clamp(24px, 6vw, 68px)) !important;
    margin: 0 auto !important;
    padding: clamp(18px, 3.4vw, 42px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: clamp(24px, 3vw, 34px) !important;
    background:
        linear-gradient(132deg, rgba(255, 255, 255, 0.13), rgba(6, 18, 34, 0.9) 36%, rgba(1, 9, 20, 0.96)) !important;
    box-shadow: 0 34px 92px rgba(0, 0, 0, 0.64), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
}

#authorBioModal .author-modal-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.1), transparent 23%, transparent 76%, rgba(255, 255, 255, 0.045));
}

#authorBioModal .author-modal-close {
    position: fixed !important;
    top: clamp(20px, 3vw, 34px) !important;
    right: max(clamp(20px, 3vw, 34px), calc((100vw - 1060px) / 2 + 18px)) !important;
    width: 48px !important;
    height: 48px !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    background: rgba(4, 14, 27, 0.62) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}

#authorBioModal .author-modal-close:hover {
    color: #06111f !important;
    background: #ffffff !important;
    transform: rotate(90deg) scale(1.06);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.38) !important;
}

#authorBioModal .author-modal-grid {
    display: grid !important;
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) !important;
    gap: clamp(24px, 4vw, 52px) !important;
    align-items: start !important;
}

#authorBioModal .author-modal-summary {
    position: sticky;
    top: 0;
    align-self: start;
}

#authorBioModal .author-modal-portrait {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.46) !important;
    border-radius: 22px !important;
    background: #02070d !important;
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

#authorBioModal .author-modal-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 54%, rgba(1, 8, 18, 0.26));
}

#authorBioModal .author-modal-grid > .author-modal-summary > .author-modal-portrait img {
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: 4 / 5.08;
    object-fit: cover;
    object-position: center top;
    filter: contrast(1.05) saturate(0.96) !important;
}

#authorBioModal .author-modal-name {
    color: #ffffff !important;
    font-size: clamp(1.55rem, 2.6vw, 2rem) !important;
    letter-spacing: -0.035em;
}

#authorBioModal .author-modal-role {
    color: rgba(255, 255, 255, 0.68) !important;
    letter-spacing: 0.13em !important;
}

#authorBioModal .author-modal-facts {
    display: grid !important;
    gap: 0 !important;
    padding: 8px 16px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.075) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#authorBioModal .author-modal-fact {
    min-height: 42px;
    padding: 10px 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#authorBioModal .author-modal-fact:last-child {
    border-bottom: 0;
}

#authorBioModal .author-modal-fact strong {
    color: #ffffff !important;
    text-align: right;
}

#authorBioModal .author-modal-content {
    padding: clamp(20px, 3vw, 32px) !important;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#authorBioModal .author-modal-kicker {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.09) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#authorBioModal #authorBioModalTitle {
    color: #ffffff !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    max-width: 15ch;
}

#authorBioModal .author-modal-intro,
#authorBioModal .author-modal-intro strong {
    color: rgba(255, 255, 255, 0.88) !important;
}

#authorBioModal .author-modal-intro strong {
    color: #ffffff !important;
}

#authorBioModal .author-modal-rules-title {
    color: #ffffff !important;
}

#authorBioModal .author-modal-rules {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

#authorBioModal .author-modal-rule {
    min-height: 58px;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease !important;
}

#authorBioModal .author-modal-rule:last-child {
    grid-column: 1 / -1;
}

@media (hover: hover) and (pointer: fine) {
    #authorBioModal .author-modal-rule:hover {
        transform: translate3d(0, -3px, 0);
        border-color: rgba(255, 255, 255, 0.42) !important;
        background: rgba(255, 255, 255, 0.11) !important;
    }
}

#authorBioModal .author-modal-links {
    gap: 12px !important;
}

#authorBioModal .author-modal-link {
    min-height: 46px;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease !important;
}

#authorBioModal .author-modal-link:hover {
    color: #06111f !important;
    background: #ffffff !important;
    transform: translate3d(0, -3px, 0);
}

/* White light-mode modal, still using the exact same black accent language. */
html.light-theme #authorBioModal {
    background: rgba(232, 232, 230, 0.72) !important;
    backdrop-filter: blur(28px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(118%) !important;
    scrollbar-color: #111111 rgba(17, 17, 17, 0.08) !important;
}

html.light-theme #authorBioModal .author-modal-card {
    background: linear-gradient(132deg, rgba(255, 255, 255, 0.98), rgba(244, 244, 242, 0.96)) !important;
    border-color: rgba(17, 17, 17, 0.22) !important;
    box-shadow: 0 30px 76px rgba(17, 17, 17, 0.18), inset 0 1px 0 #ffffff !important;
}

html.light-theme #authorBioModal .author-modal-close {
    color: #ffffff !important;
    border-color: #111111 !important;
    background: #111111 !important;
}

html.light-theme #authorBioModal .author-modal-close:hover {
    color: #111111 !important;
    background: #ffffff !important;
}

html.light-theme #authorBioModal .author-modal-portrait,
html.light-theme #authorBioModal .author-modal-facts,
html.light-theme #authorBioModal .author-modal-content,
html.light-theme #authorBioModal .author-modal-rule {
    border-color: rgba(17, 17, 17, 0.16) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: inset 0 1px 0 #ffffff !important;
}

html.light-theme #authorBioModal .author-modal-name,
html.light-theme #authorBioModal .author-modal-fact strong,
html.light-theme #authorBioModal #authorBioModalTitle,
html.light-theme #authorBioModal .author-modal-rules-title,
html.light-theme #authorBioModal .author-modal-intro strong,
html.light-theme #authorBioModal .author-modal-kicker {
    color: #111111 !important;
}

html.light-theme #authorBioModal .author-modal-role,
html.light-theme #authorBioModal .author-modal-fact,
html.light-theme #authorBioModal .author-modal-intro,
html.light-theme #authorBioModal .author-modal-rule {
    color: #4b5563 !important;
}

html.light-theme #authorBioModal .author-modal-kicker,
html.light-theme #authorBioModal .author-modal-link {
    border-color: rgba(17, 17, 17, 0.22) !important;
    background: #ffffff !important;
}

html.light-theme #authorBioModal .author-modal-link {
    color: #ffffff !important;
    background: #111111 !important;
    border-color: #111111 !important;
}

html.light-theme #authorBioModal .author-modal-link:hover {
    color: #111111 !important;
    background: #ffffff !important;
}

@media (max-width: 768px) {
    #authorBioModal {
        padding: 10px !important;
    }

    #authorBioModal .author-modal-card {
        max-height: calc(100dvh - 20px) !important;
        border-radius: 24px !important;
    }

    #authorBioModal .author-modal-close {
        position: fixed !important;
        top: 18px !important;
        right: 18px !important;
        width: 44px !important;
        height: 44px !important;
    }

    #authorBioModal .author-modal-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    #authorBioModal .author-modal-summary {
        position: static;
    }

    #authorBioModal .author-modal-grid > .author-modal-summary > .author-modal-portrait {
        max-width: min(100%, 410px);
        margin-left: auto;
        margin-right: auto;
    }

    #authorBioModal .author-modal-grid > .author-modal-summary > .author-modal-portrait img {
        height: min(48dvh, 390px) !important;
        aspect-ratio: auto;
    }

    #authorBioModal .author-modal-content {
        padding: 20px 16px !important;
        border-radius: 20px;
    }

    #authorBioModal #authorBioModalTitle {
        max-width: 13ch;
        font-size: clamp(1.85rem, 8.4vw, 2.35rem) !important;
    }
}

@media (max-width: 500px) {
    #authorBioModal .author-modal-facts {
        padding: 6px 14px !important;
    }

    #authorBioModal .author-modal-fact {
        font-size: 0.82rem !important;
    }

    #authorBioModal .author-modal-rules {
        grid-template-columns: 1fr !important;
    }

    #authorBioModal .author-modal-rule,
    #authorBioModal .author-modal-rule:last-child {
        grid-column: auto;
        min-height: 52px;
    }

    #authorBioModal .author-modal-links {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    #authorBioModal .author-modal-link {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    #authorBioModal.is-visible .author-modal-card {
        animation: none;
    }
}

/* Footer brand label follows the same neutral black-and-white identity. */
footer.footer-ultra .footer-brand-card > div:nth-of-type(2) {
    color: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.075) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

footer.footer-ultra .footer-brand-card > div:nth-of-type(2) > span {
    background: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.66) !important;
}

html.light-theme footer.footer-ultra .footer-brand-card > div:nth-of-type(2) {
    color: #111111 !important;
    border-color: rgba(17, 17, 17, 0.22) !important;
    background: rgba(17, 17, 17, 0.05) !important;
    box-shadow: none !important;
}

html.light-theme footer.footer-ultra .footer-brand-card > div:nth-of-type(2) > span {
    background: #111111 !important;
    box-shadow: 0 0 8px rgba(17, 17, 17, 0.26) !important;
}

/* ==========================================================================
   MOBILE NAVIGATION — COMPACT MONOCHROME GLASS SHEET
   ========================================================================== */
@keyframes compact-menu-button-open {
    0% { transform: scale(0.9); }
    62% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@media (max-width: 768px) {
    .mobile-overlay {
        background: rgba(1, 7, 14, 0.46) !important;
        backdrop-filter: blur(13px) saturate(112%) !important;
        -webkit-backdrop-filter: blur(13px) saturate(112%) !important;
    }

    #nav-links {
        top: max(84px, calc(env(safe-area-inset-top) + 78px)) !important;
        right: -88vw !important;
        width: min(78vw, 348px) !important;
        height: auto !important;
        max-height: calc(100dvh - max(100px, calc(env(safe-area-inset-top) + 94px))) !important;
        overflow-y: auto;
        padding: 16px 14px 14px !important;
        gap: 9px !important;
        border: 1px solid rgba(255, 255, 255, 0.34) !important;
        border-radius: 22px !important;
        background: linear-gradient(150deg, rgba(13, 28, 44, 0.84), rgba(1, 10, 21, 0.8)) !important;
        backdrop-filter: blur(30px) saturate(124%) !important;
        -webkit-backdrop-filter: blur(30px) saturate(124%) !important;
        box-shadow: 0 20px 46px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
        transition: right 0.52s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease, box-shadow 0.4s ease !important;
    }

    #nav-links.mobile-active {
        right: 12px !important;
        animation: none !important;
    }

    #nav-links::before {
        padding: 3px 6px 10px !important;
        color: rgba(255, 255, 255, 0.58) !important;
        letter-spacing: 0.16em !important;
    }

    #nav-links::after {
        display: none !important;
    }

    #nav-links li {
        transform: translate3d(0, 12px, 0) !important;
        transition: opacity 0.28s ease, transform 0.44s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    #nav-links.mobile-active li {
        transform: translate3d(0, 0, 0) !important;
    }

    #nav-links.mobile-active li:nth-child(1) { transition-delay: 0.04s; }
    #nav-links.mobile-active li:nth-child(2) { transition-delay: 0.08s; }
    #nav-links.mobile-active li:nth-child(3) { transition-delay: 0.12s; }
    #nav-links.mobile-active li:nth-child(4) { transition-delay: 0.16s; }
    #nav-links.mobile-active li:nth-child(5) { transition-delay: 0.2s; }

    #nav-links a {
        min-height: 54px !important;
        padding: 12px 42px 12px 14px !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.055) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
    }

    #nav-links a::before {
        color: #111111 !important;
        background: rgba(255, 255, 255, 0.94) !important;
        box-shadow: none !important;
    }

    #nav-links a::after {
        right: 15px !important;
        color: rgba(255, 255, 255, 0.62) !important;
        font-size: 1.18rem !important;
    }

    #nav-links a:hover,
    #nav-links a:focus-visible,
    #nav-links a.active {
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.48) !important;
        background: rgba(255, 255, 255, 0.12) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
        transform: translate3d(-2px, 0, 0) !important;
    }

    #nav-links a:hover::after,
    #nav-links a:focus-visible::after,
    #nav-links a.active::after {
        color: #ffffff !important;
        transform: translate(2px, -50%) !important;
    }

    #mobile-menu-btn {
        width: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(255, 255, 255, 0.32) !important;
        border-radius: 15px !important;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.09) !important;
        backdrop-filter: blur(18px) saturate(118%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
        transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), background 0.32s ease, color 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease !important;
    }

    #mobile-menu-btn::after {
        inset: -3px !important;
        border-color: rgba(255, 255, 255, 0) !important;
        border-radius: 18px !important;
    }

    #mobile-menu-btn svg {
        width: 21px !important;
        height: 21px !important;
        transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease !important;
    }

    .navbar.menu-open #mobile-menu-btn {
        color: #111111 !important;
        border-color: #ffffff !important;
        background: #ffffff !important;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24), inset 0 1px 0 #ffffff !important;
        animation: compact-menu-button-open 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    .navbar.menu-open #mobile-menu-btn::after {
        inset: -4px !important;
        border-color: rgba(255, 255, 255, 0.28) !important;
    }

    #mobile-menu-btn:active {
        transform: scale(0.94) !important;
    }
}

@media (max-width: 768px) {
    html.light-theme .mobile-overlay {
        background: rgba(17, 17, 17, 0.16) !important;
    }

    html.light-theme #nav-links {
        border-color: rgba(17, 17, 17, 0.2) !important;
        background: rgba(255, 255, 255, 0.84) !important;
        box-shadow: 0 20px 46px rgba(17, 17, 17, 0.15), inset 0 1px 0 #ffffff !important;
    }

    html.light-theme #nav-links::before {
        color: rgba(17, 17, 17, 0.58) !important;
    }

    html.light-theme #nav-links a {
        color: #111111 !important;
        border-color: rgba(17, 17, 17, 0.15) !important;
        background: rgba(255, 255, 255, 0.62) !important;
    }

    html.light-theme #nav-links a::before {
        color: #ffffff !important;
        background: #111111 !important;
    }

    html.light-theme #nav-links a::after {
        color: rgba(17, 17, 17, 0.58) !important;
    }

    html.light-theme #nav-links a:hover,
    html.light-theme #nav-links a:focus-visible,
    html.light-theme #nav-links a.active {
        color: #111111 !important;
        border-color: #111111 !important;
        background: rgba(17, 17, 17, 0.06) !important;
    }

    html.light-theme #nav-links a:hover::after,
    html.light-theme #nav-links a:focus-visible::after,
    html.light-theme #nav-links a.active::after {
        color: #111111 !important;
    }

    html.light-theme #mobile-menu-btn {
        color: #111111 !important;
        border-color: rgba(17, 17, 17, 0.24) !important;
        background: rgba(255, 255, 255, 0.72) !important;
        box-shadow: 0 8px 18px rgba(17, 17, 17, 0.1), inset 0 1px 0 #ffffff !important;
    }

    html.light-theme .navbar.menu-open #mobile-menu-btn {
        color: #ffffff !important;
        border-color: #111111 !important;
        background: #111111 !important;
    }
}

/* Every consulting CTA stays crisp white at rest and on hover. */
#consulting .services-grid > .reveal-up .service-btn-cta,
html.light-theme body #consulting .services-grid > .reveal-up .service-btn-cta {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

#consulting .services-grid > .reveal-up .service-btn-cta > span,
html.light-theme body #consulting .services-grid > .reveal-up .service-btn-cta > span {
    color: #ffffff !important;
}

#consulting .services-grid > .reveal-up .service-btn-cta:hover,
#consulting .services-grid > .reveal-up .service-btn-cta:focus-visible,
html.light-theme body #consulting .services-grid > .reveal-up .service-btn-cta:hover,
html.light-theme body #consulting .services-grid > .reveal-up .service-btn-cta:focus-visible {
    color: #111111 !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24), inset 0 1px 0 #ffffff !important;
    transform: translate3d(0, -2px, 0) !important;
}

#consulting .services-grid > .reveal-up .service-btn-cta:hover > span,
#consulting .services-grid > .reveal-up .service-btn-cta:focus-visible > span,
html.light-theme body #consulting .services-grid > .reveal-up .service-btn-cta:hover > span,
html.light-theme body #consulting .services-grid > .reveal-up .service-btn-cta:focus-visible > span {
    color: #111111 !important;
}

html.light-theme body #consulting .services-grid > .reveal-up .service-btn-cta {
    color: #ffffff !important;
    background: #111111 !important;
    border-color: #111111 !important;
}

/* Keep the footer brand area proportionate to the desktop footer columns. */
@media (min-width: 993px) {
    footer.footer-ultra .footer-grid-ultra {
        grid-template-columns: minmax(300px, 1.35fr) minmax(160px, 0.9fr) minmax(185px, 1fr) minmax(205px, 1.1fr) !important;
        align-items: stretch;
    }

    footer.footer-ultra .footer-col-ultra:first-child {
        display: flex;
        min-width: 0;
    }

    footer.footer-ultra .footer-col-ultra:first-child .footer-brand-card {
        width: 100%;
        max-width: none;
        min-height: 100%;
        padding: 24px !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
        background: linear-gradient(145deg, rgba(7, 25, 43, 0.82), rgba(2, 13, 27, 0.68)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 16px 34px rgba(0, 0, 0, 0.18) !important;
    }

    footer.footer-ultra .footer-col-ultra:first-child .footer-brand-card::after {
        border-color: rgba(255, 255, 255, 0.09) !important;
        box-shadow: none !important;
    }

    html.light-theme footer.footer-ultra .footer-col-ultra:first-child .footer-brand-card {
        border-color: rgba(17, 17, 17, 0.14) !important;
        background: rgba(255, 255, 255, 0.82) !important;
        box-shadow: inset 0 1px 0 #ffffff, 0 16px 34px rgba(17, 17, 17, 0.09) !important;
    }

html.light-theme footer.footer-ultra .footer-col-ultra:first-child .footer-brand-card::after {
        border-color: rgba(17, 17, 17, 0.07) !important;
    }
}

/* The footer brand card blends into the footer without an outer frame. */
footer.footer-ultra .footer-brand-card,
footer.footer-ultra .footer-brand-card:hover {
    border: 0 !important;
}

/* Footer brand: neutral ink treatment, without the previous cyan glow. */
footer.footer-ultra .footer-brand-card {
    background: linear-gradient(145deg, rgba(15, 22, 31, 0.92), rgba(3, 9, 16, 0.9)) !important;
}

footer.footer-ultra .footer-brand-card::after {
    display: none !important;
}

footer.footer-ultra .footer-brand-card > div:first-child {
    background: none !important;
    filter: none !important;
}

.footer-brand-monogram-link {
    display: inline-flex;
    margin-bottom: 16px;
    text-decoration: none;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-brand-monogram-link:hover {
    transform: translateY(-2px);
}

.footer-brand-logo {
    display: block;
    width: auto;
    height: 38px;
    max-width: 164px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22));
}

.footer-brand-monogram {
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.1em;
}

html.light-theme footer.footer-ultra .footer-brand-card {
    background: rgba(255, 255, 255, 0.82) !important;
}

html.light-theme .footer-brand-monogram {
    color: #111111;
}

/* ==========================================================================
   HOME SCROLL SCENES — ENTER, REST, EXIT
   ========================================================================== */
main > section.section.home-scroll-scene {
    overflow: clip;
}

main > section.section.home-scroll-scene > .container.home-scroll-scene-inner {
    transform: translate3d(var(--home-scene-x, 0px), var(--home-scene-y, 0px), 0);
    opacity: var(--home-scene-opacity, 1);
    will-change: transform, opacity;
    transition: transform 0.18s linear, opacity 0.18s linear;
}

#about .about-content-panel.active.about-scroll-exit {
    transform: translate3d(var(--about-panel-x, 0px), 0, 0) !important;
    opacity: var(--about-panel-opacity, 1);
    will-change: transform, opacity;
    transition: transform 0.2s linear, opacity 0.2s linear;
}

@media (max-width: 768px) {
    main > section.section.home-scroll-scene > .container.home-scroll-scene-inner {
        transform: translate3d(var(--home-scene-x, 0px), var(--home-scene-y, 0px), 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    main > section.section.home-scroll-scene > .container.home-scroll-scene-inner,
    #about .about-content-panel.active.about-scroll-exit {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/* ==========================================================================
   BOOK COLLECTION — EACH TITLE HAS ITS OWN COLOR WORLD
   ========================================================================== */

/* Default palette. The per-title themes below are keyed on the book slug,
   which an editor can change from the admin. Without these defaults an
   unrecognised slug leaves --book-* undefined and the card/section renders
   with no background at all, so every book keeps a valid look regardless. */
#books .book-card-upgraded,
.book-detail-section,
.book-order-section {
    --book-deep: #07162f;
    --book-mid: #1d4b88;
    --book-ink: #dceaff;
    --book-glow: 76, 145, 232;
    --book-border: rgba(132, 184, 255, 0.46);
}

#books .book-theme-biznes-kodeksi,
.book-detail-section[data-book-theme="biznes-kodeksi"],
.book-order-section[data-book-theme="biznes-kodeksi"] {
    --book-deep: #07162f;
    --book-mid: #1d4b88;
    --book-ink: #dceaff;
    --book-glow: 76, 145, 232;
    --book-border: rgba(132, 184, 255, 0.46);
}

#books .book-theme-kompleks-boshqaruv,
.book-detail-section[data-book-theme="kompleks-boshqaruv"],
.book-order-section[data-book-theme="kompleks-boshqaruv"] {
    --book-deep: #26120e;
    --book-mid: #7a4130;
    --book-ink: #fff0e8;
    --book-glow: 214, 128, 94;
    --book-border: rgba(245, 184, 151, 0.48);
}

#books .book-theme-sherikchilik,
.book-detail-section[data-book-theme="sherikchilik"],
.book-order-section[data-book-theme="sherikchilik"] {
    --book-deep: #06251f;
    --book-mid: #17634d;
    --book-ink: #e3fff3;
    --book-glow: 72, 190, 141;
    --book-border: rgba(145, 239, 192, 0.46);
}

#books .book-card-upgraded {
    background: linear-gradient(155deg, color-mix(in srgb, var(--book-deep) 89%, #000000), color-mix(in srgb, var(--book-mid) 54%, #08101a)) !important;
    border-color: var(--book-border) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#books .book-card-upgraded::before {
    background: radial-gradient(circle at 18% 7%, rgba(var(--book-glow), 0.22), transparent 37%) !important;
}

#books .book-card-upgraded:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(var(--book-glow), 0.82) !important;
    box-shadow: 0 30px 62px rgba(0, 0, 0, 0.46), 0 0 28px rgba(var(--book-glow), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

#books .book-card-cover {
    background:
        radial-gradient(circle at 50% 8%, rgba(var(--book-glow), 0.58), transparent 46%),
        linear-gradient(155deg, var(--book-mid), var(--book-deep) 75%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}

#books .book-card-cover-backdrop {
    opacity: 0.26 !important;
    mix-blend-mode: screen !important;
    filter: saturate(1.15) contrast(1.1) !important;
}

#books .book-card-cover-shade {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.48)) !important;
}

#books .book-card-cover-image {
    filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.62)) !important;
}

#books .book-card-upgraded:hover .book-card-cover-image {
    transform: scale(1.055) translateY(-6px);
    filter: drop-shadow(0 29px 36px rgba(0, 0, 0, 0.68)) !important;
}

#books .book-card-upgraded .card-content {
    background: linear-gradient(180deg, rgba(5, 9, 15, 0.08), rgba(0, 0, 0, 0.18)) !important;
}

html.light-theme #books .book-card-upgraded {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(var(--book-glow), 0.13)) !important;
    border-color: rgba(var(--book-glow), 0.38) !important;
    box-shadow: 0 18px 34px rgba(17, 17, 17, 0.09), inset 0 1px 0 #ffffff !important;
}

html.light-theme #books .book-card-upgraded:hover {
    border-color: rgba(var(--book-glow), 0.72) !important;
    box-shadow: 0 24px 42px rgba(17, 17, 17, 0.13), 0 0 22px rgba(var(--book-glow), 0.18) !important;
}

html.light-theme #books .book-card-upgraded .card-content {
    background: rgba(255, 255, 255, 0.52) !important;
}

/* Detail screens reuse the exact palette of the selected book. */
.book-detail-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    background:
        radial-gradient(circle at 88% 8%, rgba(var(--book-glow), 0.3), transparent 28%),
        linear-gradient(145deg, var(--book-deep), color-mix(in srgb, var(--book-mid) 58%, var(--book-deep))) !important;
}

.book-detail-section::before,
.book-detail-section::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.book-detail-section::before {
    inset: 0;
    background: radial-gradient(circle at 10% 15%, rgba(var(--book-glow), 0.26), transparent 27%), radial-gradient(circle at 90% 88%, rgba(var(--book-glow), 0.14), transparent 32%);
}

.book-detail-section::after {
    inset: 0;
    background-image: linear-gradient(100deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)), var(--book-cover);
    background-position: right -7% center;
    background-repeat: no-repeat;
    background-size: auto, min(52vw, 620px);
    opacity: 0.16;
    filter: saturate(1.1) contrast(1.06);
}

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

.book-detail-section .book-back-link {
    color: var(--book-ink) !important;
    padding: 10px 14px;
    border: 1px solid rgba(var(--book-glow), 0.38);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease;
}

.book-detail-section .book-back-link:hover {
    transform: translateX(-3px);
    background: rgba(var(--book-glow), 0.18);
}

.book-detail-section .book-gallery-stage,
.book-detail-section .book-detail-panel,
.book-detail-section .book-meta-grid {
    border-color: rgba(var(--book-glow), 0.34) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(0, 0, 0, 0.24)) !important;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.book-detail-section .book-gallery-stage > div:first-child {
    background: radial-gradient(circle at center, rgba(var(--book-glow), 0.32), transparent 70%) !important;
}

.book-detail-section .book-gallery-stage img {
    filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.64)) !important;
}

.book-detail-section .book-detail-panel {
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid rgba(var(--book-glow), 0.32);
    border-radius: 28px;
}

.book-detail-section .book-author-badge {
    color: var(--book-ink) !important;
    background: rgba(var(--book-glow), 0.18) !important;
    border: 1px solid rgba(var(--book-glow), 0.35);
}

.book-detail-section .book-detail-title,
.book-detail-section .book-description h3,
.book-detail-section .book-meta-item span {
    color: #ffffff !important;
}

.book-detail-section .book-detail-subtitle,
.book-detail-section .book-description p,
.book-detail-section .book-meta-item > span:first-child {
    color: rgba(255, 255, 255, 0.78) !important;
}

.book-detail-section .gallery-thumb {
    border-color: rgba(var(--book-glow), 0.28) !important;
    background: rgba(0, 0, 0, 0.22) !important;
}

.book-detail-section .gallery-thumb:hover,
.book-detail-section .gallery-thumb:focus-visible {
    border-color: rgba(var(--book-glow), 0.88) !important;
    transform: translateY(-3px);
}

.book-detail-section .book-detail-actions .btn-primary {
    color: var(--book-deep) !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.23) !important;
}

.book-detail-section .book-detail-actions .btn-primary:hover {
    transform: translateY(-3px);
    background: var(--book-ink) !important;
}

.book-detail-section .book-detail-actions .btn-outline {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.68) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.book-detail-section .book-detail-actions .btn-outline:hover {
    color: var(--book-deep) !important;
    background: #ffffff !important;
}

html.light-theme .book-detail-section {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(var(--book-glow), 0.22)) !important;
}

html.light-theme .book-detail-section::after {
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.35)), var(--book-cover);
    opacity: 0.14;
}

html.light-theme .book-detail-section .book-back-link,
html.light-theme .book-detail-section .book-detail-title,
html.light-theme .book-detail-section .book-description h3,
html.light-theme .book-detail-section .book-meta-item span {
    color: #111111 !important;
}

html.light-theme .book-detail-section .book-detail-subtitle,
html.light-theme .book-detail-section .book-description p,
html.light-theme .book-detail-section .book-meta-item > span:first-child {
    color: rgba(17, 17, 17, 0.7) !important;
}

html.light-theme .book-detail-section .book-gallery-stage,
html.light-theme .book-detail-section .book-detail-panel,
html.light-theme .book-detail-section .book-meta-grid,
html.light-theme .book-detail-section .gallery-thumb {
    background: rgba(255, 255, 255, 0.68) !important;
    border-color: rgba(var(--book-glow), 0.3) !important;
    box-shadow: 0 18px 36px rgba(17, 17, 17, 0.1), inset 0 1px 0 #ffffff !important;
}

@media (max-width: 760px) {
    .book-detail-section::after {
        background-position: 50% 92%;
        background-size: auto, min(100vw, 480px);
        opacity: 0.1;
    }

    .book-detail-section .book-detail-panel {
        padding: 22px 18px;
        border-radius: 22px;
    }
}

/* A polished, responsive editorial layout shared by all book-detail pages. */
.book-detail-section {
    min-height: 100vh;
}

.book-detail-section .book-detail-grid {
    align-items: center !important;
}

.book-detail-section .book-detail-nav {
    position: relative;
    z-index: 2;
}

.book-detail-section .book-gallery-stage {
    min-height: 560px;
    display: grid;
    place-items: center;
    padding: clamp(28px, 4vw, 52px) !important;
    border-radius: 30px !important;
}

.book-detail-section .book-gallery-stage::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(var(--book-glow), 0.14);
    border-radius: 22px;
    pointer-events: none;
}

.book-detail-section #main-book-img {
    position: relative;
    z-index: 2;
    max-height: 455px !important;
    transform: translateZ(0);
}

.book-detail-section .book-gallery-stage:hover #main-book-img {
    transform: translateY(-7px) scale(1.018);
}

.book-detail-section .book-thumb-list {
    position: relative;
    z-index: 2;
}

.book-detail-section .book-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 18px !important;
    position: relative;
    overflow: hidden;
}

.book-detail-section .book-meta-item {
    position: relative;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.book-detail-section .book-meta-item::before {
    content: '';
    position: absolute;
    width: 64px;
    height: 64px;
    top: -30px;
    right: -24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--book-glow), 0.22), transparent 70%);
    pointer-events: none;
}

.book-detail-section .book-meta-item > span:first-child {
    margin-bottom: 6px;
    letter-spacing: 0.04em;
}

.book-detail-section .book-meta-item > span:last-child {
    position: relative;
    z-index: 1;
}

.book-detail-section .book-meta-item svg {
    color: var(--book-ink);
}

.book-detail-section .book-detail-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-detail-section .book-detail-actions .btn {
    min-height: 54px;
    justify-content: center;
}

@keyframes book-detail-reveal-left {
    from { opacity: 0; transform: translate3d(-18px, 22px, 0) scale(0.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes book-detail-reveal-right {
    from { opacity: 0; transform: translate3d(18px, 22px, 0) scale(0.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

html.motion-ready .book-detail-section .book-gallery-column {
    animation: book-detail-reveal-left 0.82s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.motion-ready .book-detail-section .book-detail-panel {
    animation: book-detail-reveal-right 0.82s 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Dedicated order screen — selected book stays visible through checkout. */
.book-order-section {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(128px, 12vw, 160px) 0 clamp(72px, 8vw, 112px) !important;
    background: radial-gradient(circle at 92% 5%, rgba(var(--book-glow), 0.26), transparent 26%), linear-gradient(145deg, var(--book-deep), color-mix(in srgb, var(--book-mid) 56%, var(--book-deep))) !important;
}

.book-order-section::before,
.book-order-section::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.book-order-section::before {
    inset: 0;
    background: radial-gradient(circle at 8% 82%, rgba(var(--book-glow), 0.22), transparent 32%);
}

.book-order-section::after {
    inset: 0;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.08)), var(--book-cover);
    background-repeat: no-repeat;
    background-size: auto, min(48vw, 650px);
    background-position: right -4% center;
    opacity: 0.13;
}

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

.book-order-back,
.book-order-call {
    color: #ffffff;
    text-decoration: none;
}

.book-order-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: 28px;
    padding: 10px 14px;
    border: 1px solid rgba(var(--book-glow), 0.35);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease;
}

.book-order-back:hover {
    color: #ffffff;
    transform: translateX(-3px);
    background: rgba(var(--book-glow), 0.18);
}

.book-order-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.88fr) minmax(360px, 1.12fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: stretch;
}

.book-order-summary,
.book-order-form-card {
    border: 1px solid rgba(var(--book-glow), 0.34);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(0, 0, 0, 0.26));
    box-shadow: 0 26px 56px rgba(0, 0, 0, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.book-order-summary {
    padding: clamp(24px, 4vw, 40px);
}

.book-order-cover-wrap {
    display: grid;
    place-items: center;
    min-height: 280px;
    margin-bottom: 26px;
    border: 1px solid rgba(var(--book-glow), 0.22);
    border-radius: 22px;
    background: radial-gradient(circle at 50% 8%, rgba(var(--book-glow), 0.44), transparent 47%), linear-gradient(145deg, var(--book-mid), var(--book-deep));
    overflow: hidden;
}

.book-order-cover-wrap img {
    max-height: 310px;
    max-width: 80%;
    object-fit: contain;
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.62));
}

.book-order-author,
.book-order-kicker {
    color: var(--book-ink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

/* Price block in the order summary. Colours come from the per-book theme
   variables so it adapts to each title and needs no light-theme override. */
.book-order-price {
    margin-top: 20px;
}

.book-order-price-label {
    display: block;
    color: var(--book-ink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    opacity: 0.85;
    margin-bottom: 4px;
}

.book-order-price-value {
    display: block;
    color: #ffffff;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    line-height: 1.1;
}

.book-order-summary h1,
.book-order-form-card h2 {
    margin: 12px 0;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.08;
}

.book-order-summary p,
.book-order-form-card > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.7;
}

.book-order-call {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 26px;
    padding: 13px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.26);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease;
}

.book-order-call:hover {
    color: var(--book-deep);
    background: #ffffff;
    transform: translateY(-2px);
}

.book-order-form-card {
    padding: clamp(26px, 5vw, 52px);
}

.book-order-form-card form {
    display: grid;
    gap: 10px;
    margin-top: 28px;
}

.book-order-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.book-order-field-grid > div {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.book-order-form-card label {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.book-order-form-card label span { color: var(--book-ink); }

.book-order-form-card input,
.book-order-form-card select,
.book-order-form-card textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 16px;
    color: #ffffff;
    font: inherit;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    outline: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.book-order-form-card input[readonly] {
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);
}

.book-order-form-card input::placeholder,
.book-order-form-card textarea::placeholder { color: rgba(255, 255, 255, 0.48); }

.book-order-form-card input:focus,
.book-order-form-card select:focus,
.book-order-form-card textarea:focus {
    border-color: rgba(var(--book-glow), 0.9);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 4px rgba(var(--book-glow), 0.14);
}

.book-order-form-card textarea {
    min-height: 118px;
    resize: vertical;
}

.book-order-form-card button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    margin-top: 16px;
    color: var(--book-deep);
    font: inherit;
    font-weight: 800;
    border: 1px solid #ffffff;
    border-radius: 999px;
    background: #ffffff;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease;
}

.book-order-form-card button:hover {
    background: var(--book-ink);
    transform: translateY(-3px);
}

html.motion-ready .book-order-summary { animation: book-detail-reveal-left 0.8s 0.05s cubic-bezier(0.16, 1, 0.3, 1) both; }
html.motion-ready .book-order-form-card { animation: book-detail-reveal-right 0.8s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both; }

html.light-theme .book-detail-section .book-meta-item {
    border-color: rgba(17, 17, 17, 0.1);
    background: rgba(255, 255, 255, 0.54);
}

html.light-theme .book-order-section {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(var(--book-glow), 0.2)) !important;
}

html.light-theme .book-order-section::after {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.28)), var(--book-cover);
}

html.light-theme .book-order-summary,
html.light-theme .book-order-form-card {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 22px 48px rgba(17, 17, 17, 0.1), inset 0 1px 0 #ffffff;
}

html.light-theme .book-order-back,
html.light-theme .book-order-summary h1,
html.light-theme .book-order-form-card h2,
html.light-theme .book-order-form-card label,
html.light-theme .book-order-form-card input,
html.light-theme .book-order-form-card select,
html.light-theme .book-order-form-card textarea {
    color: #111111;
}

html.light-theme .book-order-summary p,
html.light-theme .book-order-form-card > p { color: rgba(17, 17, 17, 0.68); }
html.light-theme .book-order-back { background: rgba(255, 255, 255, 0.56); }
html.light-theme .book-order-form-card input,
html.light-theme .book-order-form-card select,
html.light-theme .book-order-form-card textarea { background: rgba(255, 255, 255, 0.78); border-color: rgba(17, 17, 17, 0.14); }
html.light-theme .book-order-form-card input[readonly] { color: rgba(17, 17, 17, 0.65); background: rgba(17, 17, 17, 0.05); }
html.light-theme .book-order-form-card input::placeholder,
html.light-theme .book-order-form-card textarea::placeholder { color: rgba(17, 17, 17, 0.42); }

@media (max-width: 860px) {
    .book-detail-section .book-detail-grid,
    .book-order-grid {
        grid-template-columns: 1fr !important;
    }

    .book-detail-section .book-gallery-stage { min-height: 420px; }
    .book-order-section::after { background-position: 50% 93%; background-size: auto, min(92vw, 500px); opacity: 0.09; }
}

@media (max-width: 560px) {
    .book-detail-section .book-gallery-stage { min-height: 360px; padding: 24px !important; border-radius: 22px !important; }
    .book-detail-section #main-book-img { max-height: 330px !important; }
    .book-detail-section .book-meta-grid { grid-template-columns: 1fr !important; gap: 10px !important; padding: 12px !important; }
    .book-detail-section .book-meta-item { padding: 11px 13px; }
    .book-detail-section .book-detail-actions { grid-template-columns: 1fr; }
    .book-detail-section .book-detail-actions { gap: 12px !important; }
    .book-order-section { padding-top: 104px !important; }
    .book-order-summary,
    .book-order-form-card { border-radius: 22px; padding: 24px 18px; }
    .book-order-field-grid { grid-template-columns: 1fr; gap: 10px; }
    .book-order-cover-wrap { min-height: 230px; }
    .book-order-cover-wrap img { max-height: 255px; }
}

@media (prefers-reduced-motion: reduce) {
    html.motion-ready .book-detail-section .book-gallery-column,
    html.motion-ready .book-detail-section .book-detail-panel,
    html.motion-ready .book-order-summary,
    html.motion-ready .book-order-form-card { animation: none; }
}

/* ==========================================================================
   PREMIUM MOTION UPGRADE - WHITE / #012550 BRAND SYSTEM
   ========================================================================== */
:root {
    --motion-brand: #012550;
    --motion-brand-2: #005a9e;
    --motion-cyan: #19c3d8;
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.motion-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 10000;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--motion-brand), var(--motion-cyan), var(--motion-brand));
    box-shadow: 0 0 18px rgba(25, 195, 216, 0.45);
    pointer-events: none;
}

.motion-ready .aurora-hero-bg::before,
.motion-ready .aurora-hero-bg::after {
    content: "";
    position: absolute;
    inset: -18%;
    z-index: 3;
    pointer-events: none;
    opacity: 0.72;
}

.motion-ready .aurora-hero-bg::before {
    background:
        radial-gradient(circle at var(--hero-x, 50%) var(--hero-y, 38%), rgba(25, 195, 216, 0.24), transparent 22%),
        linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.18) 31%, transparent 48%);
    mix-blend-mode: screen;
    animation: insanAuroraSweep 14s var(--motion-ease-out) infinite alternate;
}

.motion-ready .aurora-hero-bg::after {
    background:
        linear-gradient(rgba(1, 37, 80, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 37, 80, 0.06) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 68%);
    transform: perspective(900px) rotateX(62deg) translateY(9%);
    transform-origin: top center;
    animation: insanGridDrift 22s linear infinite;
}

html:not(.light-theme) .motion-ready .aurora-hero-bg::after {
    background:
        linear-gradient(rgba(25, 195, 216, 0.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}

.motion-ready .hero-bg-image {
    will-change: transform, filter;
    animation: insanHeroBreath 18s var(--motion-ease-out) infinite alternate;
}

.motion-ready .hero-logo-wrap {
    position: relative;
    transform-style: preserve-3d;
    animation: insanLogoFloat 7s ease-in-out infinite;
}

.motion-ready .hero-logo-wrap::after {
    content: "";
    position: absolute;
    inset: -14px -20px;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(25, 195, 216, 0.28), transparent 64%);
    filter: blur(14px);
    opacity: 0.75;
    animation: insanLogoHalo 3.8s ease-in-out infinite;
}

.motion-ready .hero-title,
.motion-ready .aurora-title-text {
    animation: insanTextLift 950ms var(--motion-ease-out) both;
}

.motion-ready .aurora-title-text {
    background-image: linear-gradient(110deg, #ffffff 0%, #dff8ff 36%, #ffffff 54%, #b8e9ff 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    animation: insanTextLift 950ms var(--motion-ease-out) both, insanTextSheen 5.8s ease-in-out infinite 1.1s;
}

html.light-theme .motion-ready .aurora-title-text,
html.light-theme .motion-ready .aurora-title-text * {
    background-image: linear-gradient(110deg, #012550 0%, #005a9e 34%, #19c3d8 52%, #012550 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.motion-ready .insan-badge,
.motion-ready .academy-badge,
.motion-ready .contact-badge-premium,
.motion-ready section .reveal-up > span[style*="backdrop-filter"] {
    position: relative;
    overflow: hidden;
}

.motion-ready .insan-badge::after,
.motion-ready .academy-badge::after,
.motion-ready .contact-badge-premium::after,
.motion-ready section .reveal-up > span[style*="backdrop-filter"]::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.48), transparent);
    transform: translateX(-120%);
    animation: insanBadgeSweep 4.2s ease-in-out infinite;
    pointer-events: none;
}

.motion-ready .aurora-btn,
.motion-ready .btn,
.motion-ready button,
.motion-ready .book-btn-order,
.motion-ready .book-btn-details {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.motion-ready .aurora-btn::after,
.motion-ready .btn::after,
.motion-ready button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--btn-x, 50%) var(--btn-y, 50%), rgba(255, 255, 255, 0.34), transparent 34%);
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
}

.motion-ready .aurora-btn:hover::after,
.motion-ready .btn:hover::after,
.motion-ready button:hover::after {
    opacity: 1;
}

.motion-ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    transform: translate(-50%, -50%) scale(0);
    animation: insanRipple 700ms var(--motion-ease-out) forwards;
    pointer-events: none;
}

.motion-ready .nav-link {
    position: relative;
    transition: color 260ms ease, transform 260ms var(--motion-ease-spring);
}

.motion-ready .nav-link::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -7px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--motion-cyan), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 360ms var(--motion-ease-out);
}

.motion-ready .nav-link:hover,
.motion-ready .nav-link.active {
    transform: translateY(-2px);
}

.motion-ready .nav-link:hover::before,
.motion-ready .nav-link.active::before {
    transform: scaleX(1);
}

/* Desktop navigation keeps its pill hover state, without the cyan underline. */
@media (min-width: 769px) {
    .motion-ready .navbar .nav-link::before,
    .motion-ready .navbar .nav-link:hover::before,
    .motion-ready .navbar .nav-link:focus-visible::before,
    .motion-ready .navbar .nav-link.active::before {
        content: none;
        display: none;
        transform: none;
    }
}

.motion-ready .card,
.motion-ready .book-card-upgraded,
.motion-ready .service-card-upgraded,
.motion-ready .stat-card-luxury,
.motion-ready .contact-info-card-premium,
.motion-ready .contact-form-card-premium,
.motion-ready .footer-brand-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --motion-x: 50%;
    --motion-y: 50%;
    transform-style: preserve-3d;
    will-change: transform, box-shadow, border-color;
    transition:
        transform 520ms var(--motion-ease-out),
        box-shadow 520ms var(--motion-ease-out),
        border-color 520ms var(--motion-ease-out),
        background 520ms var(--motion-ease-out) !important;
}

.motion-ready .motion-tilt-hover {
    transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-10px) scale(1.012) !important;
    box-shadow: 0 30px 80px rgba(1, 37, 80, 0.22), 0 0 38px rgba(25, 195, 216, 0.18) !important;
}

.motion-ready .card::before,
.motion-ready .book-card-upgraded::before,
.motion-ready .service-card-upgraded::before,
.motion-ready .stat-card-luxury::before,
.motion-ready .contact-info-card-premium::before,
.motion-ready .contact-form-card-premium::before {
    background:
        radial-gradient(520px circle at var(--motion-x) var(--motion-y), rgba(25, 195, 216, 0.26), transparent 38%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 44%, rgba(25, 195, 216, 0.08)) !important;
}

.motion-ready .book-card-upgraded img,
.motion-ready .card img {
    will-change: transform, filter;
    transition: transform 650ms var(--motion-ease-out), filter 650ms var(--motion-ease-out) !important;
}

.motion-ready .motion-tilt-hover img {
    transform: translateZ(46px) scale(1.045) !important;
}

.motion-reveal {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.992);
    will-change: transform, opacity;
}

.motion-reveal.motion-in {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) scale(1);
    transition:
        opacity 320ms var(--motion-ease-out),
        transform 320ms var(--motion-ease-out);
    transition-delay: var(--motion-delay, 0ms);
    will-change: auto;
}

.motion-ready .contact-input-premium,
.motion-ready .form-control,
.motion-ready input,
.motion-ready textarea,
.motion-ready select {
    transition: transform 240ms var(--motion-ease-out), box-shadow 240ms ease, border-color 240ms ease, background 240ms ease !important;
}

.motion-ready .contact-input-premium:focus,
.motion-ready .form-control:focus,
.motion-ready input:focus,
.motion-ready textarea:focus,
.motion-ready select:focus {
    transform: translateY(-2px);
    box-shadow: 0 0 0 5px rgba(25, 195, 216, 0.12), 0 18px 42px rgba(1, 37, 80, 0.12) !important;
}

#contact-ajax-alert {
    animation: none;
}

@keyframes insanAuroraSweep {
    0% { transform: translate3d(-3%, -2%, 0) rotate(0deg); opacity: 0.54; }
    50% { transform: translate3d(3%, 1%, 0) rotate(3deg); opacity: 0.82; }
    100% { transform: translate3d(0, 3%, 0) rotate(-2deg); opacity: 0.68; }
}

@keyframes insanGridDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 72px 72px, 72px 72px; }
}

@keyframes insanHeroBreath {
    from { transform: scale(1.01) translate3d(0, 0, 0); }
    to { transform: scale(1.065) translate3d(0, -14px, 0); }
}

@keyframes insanLogoFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
    50% { transform: translate3d(0, -8px, 0) rotateX(2deg); }
}

@keyframes insanLogoHalo {
    0%, 100% { opacity: 0.48; transform: scale(0.96); }
    50% { opacity: 0.9; transform: scale(1.08); }
}

@keyframes insanTextLift {
    from { opacity: 0; transform: translateY(28px); filter: blur(12px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes insanTextSheen {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes insanBadgeSweep {
    0%, 48% { transform: translateX(-120%); }
    64%, 100% { transform: translateX(120%); }
}

@keyframes insanRipple {
    to { transform: translate(-50%, -50%) scale(22); opacity: 0; }
}

@keyframes insanToastPop {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .motion-scroll-progress,
    .motion-ready .aurora-hero-bg::before,
    .motion-ready .aurora-hero-bg::after,
    .motion-ripple {
        display: none !important;
    }

    .motion-ready *,
    .motion-ready *::before,
    .motion-ready *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .motion-reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ==========================================================================
   PERFORMANCE STABILITY PASS
   Keeps visuals identical while allowing Chromium to skip off-screen paint work.
   ========================================================================== */
@supports (content-visibility: auto) {
    main > section.section:not(.hero-section):not(#about) {
        content-visibility: auto;
        contain-intrinsic-size: auto 920px;
    }

    footer.footer-ultra {
        content-visibility: auto;
        contain-intrinsic-size: auto 620px;
    }
}
/* Lightweight hero: the building image is already composed, so extra
   animated aurora/grid layers only add blur and GPU work. */
.aurora-hero-bg::before,
.aurora-hero-bg::after,
.motion-ready .aurora-hero-bg::before,
.motion-ready .aurora-hero-bg::after {
    display: none !important;
    content: none !important;
    background: none !important;
    animation: none !important;
}

.motion-ready .hero-bg-image {
    animation: none !important;
    will-change: auto !important;
}

/* No pointer-following glow: it is decorative and expensive on large screens. */
html .cursor-glow,
body .cursor-glow {
    display: none !important;
}

/* ===========================================================================
   I18N / FORM ACCESSIBILITY / VIEWPORT SAFETY
   The visual layers remain inside the viewport instead of contributing an
   invisible 100vw overflow area on desktop browsers with a scrollbar.
   ========================================================================== */
html,
body {
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: clip;
}

.global-ambient-bg {
    inset: 0;
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    overflow: clip;
    contain: paint;
}

/* Large floating fog was decorative, expensive, and was the primary source
   of the desktop overflow.  Each section keeps its own purposeful imagery. */
.global-ambient-bg .ambient-blob {
    display: none;
}

#global-network-bg {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 100%;
    display: none;
}

.aurora-hero-bg {
    inline-size: 100%;
    max-inline-size: 100%;
    overflow: clip !important;
    contain: paint;
}

#hero {
    isolation: isolate;
}

.contact-field-error {
    min-block-size: 1.1rem;
    margin: 6px 2px 0;
    color: #fca5a5;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.35;
}

html.light-theme .contact-field-error {
    color: #b91c1c;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #38bdf8 !important;
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .contact-field-error {
        font-size: 0.74rem;
    }
}

/* ===========================================================================
   NATIVE SCROLL PERFORMANCE GUARD
   Scroll should not require the browser to continuously re-sample pixels behind
   glass panels, animate large blurred layers, or retain off-screen compositor
   layers.  The content design remains intact; only decorative scroll work is
   removed.
   ========================================================================== */

/* A fixed, animated page background repaints the entire viewport on each
   scroll frame in Chromium and Safari. */
html.light-theme body {
    background-attachment: scroll !important;
    animation: none !important;
}

/* The fixed navigation is visible for the whole scroll, so it uses a stable
   opaque surface instead of a costly live backdrop sample. */
.navbar,
.navbar.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html:not(.light-theme) .navbar,
html:not(.light-theme) .navbar.scrolled {
    background: rgba(1, 13, 28, 0.96) !important;
}

html.light-theme .navbar,
html.light-theme .navbar.scrolled {
    background: rgba(255, 255, 255, 0.97) !important;
}

/* Glass cards are decorative.  Disabling their backdrop sampling prevents
   several large paint surfaces from being invalidated as content moves. */
main [style*="backdrop-filter"],
footer [style*="backdrop-filter"],
main *,
main *::before,
main *::after,
footer *,
footer *::before,
footer *::after,
main .card,
main .book-card-upgraded,
main .service-card-upgraded,
main .stat-card-luxury,
main .contact-info-card-premium,
main .contact-form-card-premium,
main .about-profile-card,
main .mission-card,
main .about-quote-card,
main #consulting .services-grid > .reveal-up,
main #consulting .services-grid > .reveal-up *,
footer .footer-brand-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Large blurred glows and blend layers are not content.  Removing them keeps
   each section cheap to rasterize when it enters the viewport. */
main .section-ambient-glow,
main [style^="filter: blur"],
main [style*="; filter: blur"],
footer [style^="filter: blur"],
footer [style*="; filter: blur"] {
    display: none !important;
    animation: none !important;
}

main [style*="background-image"][style*="filter:"],
footer [style*="background-image"][style*="filter:"] {
    filter: none !important;
}

main [style*="mix-blend-mode"],
footer [style*="mix-blend-mode"] {
    mix-blend-mode: normal !important;
}

/* Scroll-entry effects make newly visible sections animate at the exact moment
   they need to be painted.  Render them immediately instead.

   The transition/will-change reset stays unconditional — that was the actual
   cost. The opacity/transform pin is now only applied where the compositor
   driven reveals (see SITE-WIDE SCROLL-DRIVEN REVEALS) cannot run, so content
   is still never left invisible on an old browser, under reduced motion, or on
   a phone. Where they can run, the pin has to step aside: `!important` beats a
   CSS animation, so leaving it in place silently cancelled the reveal. */
main .motion-reveal,
main .reveal-up {
    transition: none !important;
    will-change: auto !important;
}

/* `.motion-reveal` has no scroll-driven counterpart, and the hero plays its own
   one-time entrance, so both stay pinned in every case. `.about-sticky` is
   excluded from the reveals too, so it must keep the pin as well. */
main .motion-reveal,
#hero .reveal-up,
main .reveal-up.about-sticky {
    opacity: 1 !important;
    transform: none !important;
}

@supports not (animation-timeline: view()) {
    main .reveal-up {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    main .reveal-up {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 840px) {
    main .reveal-up {
        opacity: 1 !important;
        transform: none !important;
    }
}

main .reveal-clip {
    clip-path: none !important;
    transition: none !important;
    will-change: auto !important;
}

/* Persistent will-change promotes every card into its own GPU layer.  Keep
   promotion only for the element the visitor is actively hovering. */
html.motion-ready main .card,
html.motion-ready main .book-card-upgraded,
html.motion-ready main .service-card-upgraded,
html.motion-ready main .stat-card-luxury,
html.motion-ready main .contact-info-card-premium,
html.motion-ready main .contact-form-card-premium,
html.motion-ready main .about-profile-card,
html.motion-ready main .mission-card,
html.motion-ready .footer-brand-card,
html.motion-ready main .card img,
html.motion-ready main .book-card-upgraded img,
html.motion-ready .hero-logo-wrap,
html.motion-ready .insan-badge {
    will-change: auto !important;
}

html.motion-ready main .motion-tilt-hover {
    will-change: transform !important;
}

/* Stop the remaining perpetual decorative animations that would otherwise
   compete with touch and wheel scrolling on lower-powered devices. */
html.motion-ready .hero-logo-wrap,
html.motion-ready .hero-logo-wrap::after,
html.motion-ready .insan-badge,
html.motion-ready .aurora-title-text,
html.motion-ready .aurora-title-text *,
html.motion-ready .insan-badge::after,
html.motion-ready .academy-badge::after,
html.motion-ready .contact-badge-premium::after,
html.motion-ready section .reveal-up > span[style*="backdrop-filter"]::after {
    animation: none !important;
}

#hero::before,
footer.footer-ultra::before {
    display: none !important;
    animation: none !important;
}

main [style*="pulse-dot"],
.contact-badge-pulse,
footer.footer-ultra::after,
.status-dot-ultra,
.footer-totop-ultra {
    animation: none !important;
}

.btn,
.reveal-up,
.motion-ready .footer-brand-card,
.motion-ready .card img,
.motion-ready .book-card-upgraded img {
    will-change: auto !important;
}

/* Preserve the browser's initial scroll-height estimate for the long home
   sections.  A generic 920px placeholder made the page shift as these sections
   were first activated by content-visibility. */
@supports (content-visibility: auto) {
    main > #books,
    main > #consulting,
    main > #legacy {
        contain-intrinsic-size: auto 1120px;
    }

    main > #contact {
        contain-intrinsic-size: auto 1300px;
    }
}

/* The profile modal already owns its overflow.  Let the browser handle wheel
   and touch scrolling directly instead of routing every gesture through JS. */
#authorBioModal {
    touch-action: pan-y;
}

/* Simple Browser may retain `content-visibility: auto` sections as blank
   placeholders after a rapid scroll.  Primary site content must always paint. */
@supports (content-visibility: auto) {
    main > #books,
    main > #consulting,
    main > #legacy,
    main > #contact,
    footer.footer-ultra {
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
    }
}

/* ===========================================================================
   HERO HOOK MOTION
   Restore the first-screen experience without bringing back scroll-linked
   scene work.  These animations pause as soon as the hero leaves the viewport.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    #hero .parallax-element.reveal-up {
        opacity: 0 !important;
        --reveal-offset: 28px;
        transition: opacity 620ms var(--motion-ease-out) var(--hero-hook-delay, 0ms), transform 720ms var(--motion-ease-out) var(--hero-hook-delay, 0ms) !important;
        will-change: transform, opacity !important;
    }

    #hero .parallax-element.reveal-up.active {
        opacity: 1 !important;
        --reveal-offset: 0px;
    }

    #hero .stagger-1 { --hero-hook-delay: 50ms; }
    #hero .stagger-2 { --hero-hook-delay: 140ms; }
    #hero .stagger-3 { --hero-hook-delay: 230ms; }
    #hero .stagger-4 { --hero-hook-delay: 320ms; }

    html.motion-ready .aurora-hero-bg .hero-bg-image {
        animation: insanHeroBreath 24s var(--motion-ease-out) infinite alternate !important;
        animation-play-state: paused !important;
        will-change: transform !important;
    }

    html.motion-ready #hero .hero-logo-wrap {
        animation: insanLogoFloat 7s ease-in-out infinite !important;
        animation-play-state: paused !important;
        will-change: transform !important;
    }

    html.motion-ready #hero .aurora-title-text {
        animation: insanTextSheen 7.5s ease-in-out infinite !important;
        animation-play-state: paused !important;
    }

    html.motion-ready #hero .insan-badge::after {
        animation: insanBadgeSweep 5s ease-in-out infinite !important;
        animation-play-state: paused !important;
    }

    html.motion-ready #hero .insan-badge > span:first-child {
        animation: pulse-dot 2s ease-in-out infinite !important;
        animation-play-state: paused !important;
    }

    html.hero-motion-running .aurora-hero-bg .hero-bg-image,
    html.motion-ready #hero.hero-motion-running .hero-logo-wrap,
    html.motion-ready #hero.hero-motion-running .aurora-title-text,
    html.motion-ready #hero.hero-motion-running .insan-badge::after,
    html.motion-ready #hero.hero-motion-running .insan-badge > span:first-child {
        animation-play-state: running !important;
    }
}

/* The CTA flight is the only scroll-linked motion retained on the home hero.
   It is active only while a scroll frame is being processed, so the three
   buttons stay responsive without permanently consuming compositor memory. */
@media (prefers-reduced-motion: no-preference) {
    html.hero-cta-motion-active #hero .hero-actions .aurora-btn {
        will-change: transform, opacity !important;
        transition: none !important;
    }

    #hero.hero-is-scrolling .hero-actions .aurora-btn {
        filter: none !important;
    }
}

/* ==========================================================================
   BOOK PAGES — SCROLL-DRIVEN MOTION

   main.js sets `enableScrollReveals = false` on purpose: the old
   IntersectionObserver reveals ran callbacks and layout work at the exact
   moment a section entered view, which made scrolling feel heavy. These
   animations deliberately do NOT bring that back. They are driven by a CSS
   `view()` timeline, so the browser advances them on the compositor without
   touching the main thread while the user scrolls, and only `opacity` and
   `transform` are animated (never layout or filter properties).

   Everything is gated three ways: `@supports` (browsers without scroll-driven
   animation simply show the final state, which is exactly today's behaviour),
   `prefers-reduced-motion`, and a min-width so phones stay completely still.
   ========================================================================== */

@keyframes content-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes book-ambient-breathe {
    0%,
    100% {
        opacity: 0.7;
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate3d(0, -16px, 0) scale(1.06);
    }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 841px) {
        /* Each block reveals as it scrolls into view. Because every element
           owns its own timeline, the stagger comes for free — no per-item
           delays to keep in sync with the markup. */
        .book-description-body > *,
        .book-detail-section .book-meta-grid,
        .book-detail-section .book-detail-price {
            animation: content-rise linear both;
            animation-timeline: view();
            /* The `entry` phase alone is only as long as the element is tall,
               so for a paragraph it would finish within ~50px of scrolling,
               right at the screen edge where nobody sees it. Ending on the
               `cover` phase instead stretches the reveal over roughly a third
               of a screen, so each block finishes settling around the lower
               middle of the viewport. */
            animation-range: entry 0% cover 30%;
        }

        /* Separators would look odd sliding upward; they just fade. */
        .book-description-body > hr {
            animation-name: book-separator-fade;
        }
    }
}

@keyframes book-separator-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* The section's ambient glow is a single pseudo-element, so breathing it is
   one compositor layer and no layout work. Paused on phones per the note
   above. */
@media (prefers-reduced-motion: no-preference) and (min-width: 841px) {
    html.motion-ready .book-detail-section::before {
        animation: book-ambient-breathe 19s ease-in-out infinite;
    }
}

/* Cover swaps used to replace `src` instantly. The template now toggles this
   class for one frame so the change reads as a crossfade instead of a jump. */
#main-book-img {
    transition: opacity 220ms ease;
}

#main-book-img.is-swapping {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    #main-book-img {
        transition: none;
    }

    #main-book-img.is-swapping {
        opacity: 1;
    }
}

/* ==========================================================================
   SITE-WIDE SCROLL-DRIVEN REVEALS

   The templates already mark what should reveal: main.js's IntersectionObserver
   is switched off (`enableScrollReveals = false`) because it did work on the
   main thread exactly while the user scrolled, but the `.reveal-up` hooks it
   used are still in the markup. Driving those same hooks from a `view()`
   timeline honours the original intent and keeps the reason it was disabled
   satisfied — the browser advances these on the compositor.

   Two deliberate exclusions:
   - `#hero` plays a one-time entrance on load; re-animating it on scroll
     would fight that choreography.
   - `.about-sticky` is `position: sticky`, so its box stops travelling with
     the page and a view() timeline would progress unevenly against it.
   ========================================================================== */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 841px) {
        .reveal-up:not(#hero .reveal-up):not(.about-sticky),
        .about-stat-grid > *,
        .about-quote-card,
        .forum-brief-section {
            animation: content-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }

        /* Cards in one row share a vertical position, so without an offset the
           whole row would pop at once. Shifting each column's range start
           makes a row arrive left-to-right instead. The site's own
           `.stagger-N` classes only set `transition-delay`, which does nothing
           for an animation, so the cascade is rebuilt here. */
        /* These repeat the base selector's `:not()` chain on purpose: that
           chain contains an id, so a plain `.stagger-2` would lose the
           specificity contest against the rule above and the offset would
           silently do nothing. */
        .reveal-up.stagger-2:not(#hero .reveal-up):not(.about-sticky) {
            animation-range: entry 3% cover 33%;
        }

        .reveal-up.stagger-3:not(#hero .reveal-up):not(.about-sticky) {
            animation-range: entry 6% cover 36%;
        }

        .reveal-up.stagger-4:not(#hero .reveal-up):not(.about-sticky) {
            animation-range: entry 9% cover 39%;
        }

        /* The four stat tiles are a 2x2 grid, so pairs share a row. */
        .about-stat-grid > *:nth-child(2),
        .about-stat-grid > *:nth-child(4) {
            animation-range: entry 4% cover 34%;
        }

        /* ---- Section headers cascade instead of arriving as one slab ----
           Every section opens with a single `.reveal-up` wrapper holding the
           eyebrow, the h2 and the lead paragraph. Revealing that wrapper moves
           all three at once, which reads flat. The wrapper is parked in its
           final state and its children are revealed one after another instead.
           `opacity`/`transform` have to be restated: `.reveal-up` starts at
           opacity 0, so simply cancelling its animation would leave the whole
           header invisible. */
        :is(#books, #consulting, #legacy, #contact) .container > .reveal-up:first-child {
            animation: none;
            opacity: 1;
            transform: none;
        }

        :is(#books, #consulting, #legacy, #contact) .container > .reveal-up:first-child > * {
            animation: content-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 24%;
        }

        :is(#books, #consulting, #legacy, #contact) .container > .reveal-up:first-child > *:nth-child(2) {
            animation-range: entry 4% cover 28%;
        }

        :is(#books, #consulting, #legacy, #contact) .container > .reveal-up:first-child > *:nth-child(3) {
            animation-range: entry 8% cover 32%;
        }

        /* ---- Cards lift with a touch of scale ----
           A pure fade reads cheap on something as large as a book cover; a few
           percent of scale makes it feel like it settles into place.

           The `:not(#hero .reveal-up)` tail is carried through every override
           below for one reason: the base rule above already contains an id
           inside its `:not()`, so a plain `#books .book-card-upgraded` would
           lose the specificity contest and the override would silently do
           nothing. */
        #books .book-card-upgraded:not(#hero .reveal-up),
        #consulting .services-grid > .reveal-up:not(#hero .reveal-up),
        #legacy .container > .reveal-up:first-child > .mission-card {
            animation-name: content-lift;
        }

        /* ---- Paired columns come in from their own side ----
           Both contact panels and the About bio sit beside something else, so
           a horizontal entrance reinforces the layout rather than fighting it. */
        #contact .contact-info-card-premium:not(#hero .reveal-up) {
            animation-name: content-enter-left;
        }

        #contact .contact-form-card-premium:not(#hero .reveal-up) {
            animation-name: content-enter-right;
            animation-range: entry 4% cover 34%;
        }

        #about .about-content-panel:not(#hero .reveal-up) {
            animation-name: content-enter-right;
        }

        /* ---- Footer ----
           The existing `footer-column-arrival` only runs on interior pages,
           where JS adds `.footer-scene-visible`; that rule is more specific, so
           it still wins there and this one covers everywhere else. */
        .footer-grid-ultra > .footer-col-ultra {
            animation: content-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 32%;
        }

        .footer-grid-ultra > .footer-col-ultra:nth-child(2) {
            animation-range: entry 4% cover 36%;
        }

        .footer-grid-ultra > .footer-col-ultra:nth-child(3) {
            animation-range: entry 8% cover 40%;
        }

        .footer-grid-ultra > .footer-col-ultra:nth-child(4) {
            animation-range: entry 12% cover 44%;
        }

    }
}

@keyframes content-lift {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(0.972);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes content-enter-left {
    from {
        opacity: 0;
        transform: translate3d(-36px, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes content-enter-right {
    from {
        opacity: 0;
        transform: translate3d(36px, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hero-hand-off {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0.12;
        transform: translate3d(0, -46px, 0);
    }
}

/* ==========================================================================
   REFINED-MOTION VISUALS (partner to static/js/refined-motion.js)

   These rules are the visual half of a few small polish effects the site
   picked up on its second pass:
     - a thin scroll-progress line at the very top,
     - a small size / weight change on the navbar once the visitor has left
       the hero,
     - a card-tilt hover state that is driven from JS via CSS variables.
   Everything is guarded by `prefers-reduced-motion` so nothing moves when
   the OS says not to. Nothing here uses `!important` on layout properties,
   so any component-specific rule elsewhere still wins.
   ========================================================================== */

.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #00d1ff, #00b3d6);
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 100000;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(0, 209, 255, 0.45);
    /* Transform is written every scroll frame from JS; the transition just
       smooths the very last frame so the bar doesn't feel notchy at the end
       of a fast scroll gesture. */
    transition: transform 60ms linear;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-progress-bar { display: none; }
}

/* Navbar sits on `.scrolled` once the visitor is past the hero. The class is
   already toggled by the existing JS — we only own the resulting look. Small
   height and horizontal padding change, kept subtle so it reads as polish
   rather than an obvious reflow. */
nav.navbar {
    transition: padding 220ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 220ms ease,
                backdrop-filter 220ms ease,
                box-shadow 220ms ease;
}

nav.navbar.scrolled {
    padding-top: 8px;
    padding-bottom: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* Tilt hover state is styled by the site's original component CSS, driven
   by `--tilt-x/--tilt-y` from main.js. Nothing to add here — the earlier
   duplicate rule fought that system for specificity. */

/* Founder projects: consistent PNG logo tiles in the profile panel. */
#authorBioModal .author-modal-projects {
    margin: 0 0 18px;
    text-align: left;
}

#authorBioModal .author-modal-projects h4 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
}

#authorBioModal .author-project-logo-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#authorBioModal .author-project-logo {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    background: rgba(255,255,255,0.055);
}

#authorBioModal .author-project-logo img {
    width: 52px;
    height: 38px;
    flex: 0 0 52px;
    object-fit: contain;
    border-radius: 7px;
    background: #102844;
}

#authorBioModal .author-project-logo span {
    min-width: 0;
    color: rgba(255,255,255,0.86);
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1.2;
}

/* The card itself owns the scroll gesture on touch and compact screens. */
#authorBioModal,
#authorBioModal .author-modal-card {
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}

/* The book-detail artwork is intentionally omitted; keep the written
   description and order panel as the single focused column. */
.book-detail-section[data-book-theme="kompleks-boshqaruv"] .book-gallery-column {
    display: none !important;
}

.book-detail-section[data-book-theme="kompleks-boshqaruv"] .book-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* The complex (brown) book keeps its own cover in the detail view. */
.book-detail-section[data-book-theme="kompleks-boshqaruv"] .book-gallery-column {
    display: block !important;
}
.book-detail-section[data-book-theme="kompleks-boshqaruv"] .book-detail-grid {
    grid-template-columns: 1fr 1.2fr !important;
}

#authorBioModal .author-modal-card {
    scrollbar-gutter: stable;
}

@media (max-width: 500px) {
    #authorBioModal .author-project-logo-list {
        grid-template-columns: 1fr;
    }
}

/* Readable tablet/zoom layout.  Many desktop browsers report a ~960px CSS
   viewport when Windows display scaling is high; keeping the desktop grids at
   four or two narrow columns there makes the page look broken. */
@media (max-width: 1100px) and (min-width: 769px) {
    #about.about-section-premium .about-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    #about.about-section-premium .about-sticky {
        position: relative !important;
        top: auto !important;
    }

    #books .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #consulting .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .contact-grid-layout-premium {
        grid-template-columns: 1fr !important;
    }
}