/* ==========================================================================
   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;
    }
}

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);
}

#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;
    overflow: hidden;
}

.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;
}

.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 {
    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 .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: calc(100dvh - clamp(24px, 6vw, 68px)) !important;
    margin: 0 auto !important;
    padding: clamp(18px, 3.4vw, 42px) !important;
    overflow: hidden !important;
    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 {
        min-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
   ========================================================================== */
#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;
    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;
}

.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 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 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 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 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. */
main .motion-reveal,
main .reveal-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !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;
    }
}