/* ============================================================
   PORTFOLIO — QUANTUM GLASS DESIGN SYSTEM
   Professional • Futuristic • Optimised
   ============================================================ */

/* ============================================================
   00. GOOGLE FONTS
   ============================================================ */
/* Fonts are loaded once in index.html to avoid duplicate network requests. */

/* ============================================================
   01. DESIGN TOKENS & CSS VARIABLES
   ============================================================ */
:root {
    /* ── TRUE COMPLETE BLACK OLED CORE PALETTE ── */
    --c-bg: #000000;
    --c-bg-alt: #050505;
    --c-surface: rgba(12, 12, 12, 0.80);
    --c-surface-solid: #090909;
    --c-border: rgba(255, 255, 255, 0.08);
    --c-border-glow: rgba(0, 212, 255, 0.40);

    /* ── Brand colours — CYAN ACCENT on BLACK CORE ── */
    --clr-primary: #00d4ff;
    --clr-primary-dk: #0088cc;
    --clr-primary-lt: #7ce9ff;
    --clr-glow: rgba(0, 212, 255, 0.30);
    --clr-grad: linear-gradient(135deg, #00d4ff 0%, #6f00ff 100%);

    /* ── Accent palette ── */
    --clr-magenta: #ff0080;
    --clr-green: #00ff8c;
    --clr-gold: #ffc700;
    --clr-violet: #9b5de5;

    /* Legacy aliases kept for backward compatibility */
    --primary: var(--clr-primary);
    --primary-dark: var(--clr-primary-dk);
    --primary-light: var(--clr-primary-lt);
    --primary-glow: var(--clr-glow);
    --primary-gradient: var(--clr-grad);
    --accent-1: var(--clr-magenta);
    --accent-2: var(--clr-green);
    --accent-3: var(--clr-gold);
    --accent-4: var(--clr-violet);
    --accent-5: #00e5ff;
    --accent-6: #3a86ff;
    --secondary: #8e9bae;
    --background: var(--c-bg);
    --background-alt: var(--c-bg-alt);
    --surface: var(--c-surface);
    --surface-solid: var(--c-surface-solid);
    --surface-hover: rgba(22, 22, 22, 0.90);
    --border: var(--c-border);
    --border-hover: var(--c-border-glow);
    --glass-bg: var(--c-surface);
    --glass-border: 1px solid var(--c-border);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
    --card-radius: 20px;
    --card-shadow: 0 16px 44px -8px rgba(0, 0, 0, 0.92), 0 0 20px rgba(0, 212, 255, 0.05);

    /* ── Semantic ── */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    /* ── Text ── */
    --text: #f1f5f9;
    --text-color: #f1f5f9;
    --primary-color: var(--clr-primary);
    --text-secondary: #94a3b8;
    --text-desc: #cbd5e1;
    --text-muted: #64748b;

    /* ── Fluid type scale ── */
    --fs-xs: clamp(.72rem, .68rem + .18vw, .80rem);
    --fs-sm: clamp(.82rem, .77rem + .24vw, .92rem);
    --fs-base: clamp(.96rem, .91rem + .28vw, 1.06rem);
    --fs-lg: clamp(1.12rem, 1.04rem + .40vw, 1.28rem);
    --fs-xl: clamp(1.32rem, 1.20rem + .60vw, 1.56rem);
    --fs-2xl: clamp(1.64rem, 1.44rem + .96vw, 2.10rem);
    --fs-3xl: clamp(2.10rem, 1.72rem + 1.9vw, 3.10rem);
    --fs-4xl: clamp(2.60rem, 2.0rem + 3.2vw, 4.80rem);

    /* ── Motion ── */
    --ease-spring: cubic-bezier(.16, 1, .30, 1);
    --ease-smooth: cubic-bezier(.4, 0, .2, 1);
    --t-fast: .14s ease;
    --t-mid: .30s var(--ease-spring);
    --t-slow: .60s var(--ease-spring);
    --transition: var(--t-mid);

    /* ── Spacing ── */
    --sp-xs: .50rem;
    --sp-sm: 1rem;
    --sp-md: 1.75rem;
    --sp-lg: 2.75rem;
    --sp-xl: 4.50rem;

    /* ── Blur / Glass ── */
    --blur: blur(18px) saturate(180%);

    /* ── Z-index ladder ── */
    --z-base: 0;
    --z-up: 100;
    --z-sticky: 900;
    --z-nav: 1000;
    --z-overlay: 1100;
    --z-modal: 1200;
    --z-toast: 1300;
    --z-loader: 9999;
    --z-cursor: 10000;

    --size: 80%;
}

/* NEW ENHANCED LIGHT THEME TOKENS */
[data-theme="light"],
body.light-theme {
    --c-bg: #f0f4fb;
    --c-bg-alt: #e3e9f5;
    --c-surface: rgba(255, 255, 255, .78);
    --c-surface-solid: #ffffff;
    --c-border: rgba(0, 136, 204, .18);
    --c-border-glow: rgba(0, 136, 204, .45);
    --clr-primary: #0088cc;
    --clr-primary-dk: #006faa;
    --clr-primary-lt: #00b4ff;
    --clr-glow: rgba(0, 136, 204, .22);
    --text: #000000;
    --text-color: #000000;
    --text-secondary: #000000;
    --text-desc: #000000;
    --text-muted: #1e293b;
    --glass-bg: rgba(255, 255, 255, .75);
    --glass-border: 1px solid rgba(0, 136, 204, .16);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, .06);
    --card-shadow: 0 10px 30px -6px rgba(0, 20, 50, 0.08), 0 0 16px rgba(0, 136, 204, 0.04);
}

/* AMOLED / True Complete Black */
.dark-theme,
[data-theme="dark"] {
    --c-bg: #000000;
    --c-bg-alt: #050505;
    --c-surface: rgba(12, 12, 12, 0.80);
    --c-surface-solid: #090909;
    --c-surface-hover: rgba(22, 22, 22, 0.90);
    --c-border: rgba(255, 255, 255, 0.08);
    --c-border-glow: rgba(0, 212, 255, 0.40);
    --clr-primary: #00d4ff;
    --clr-primary-dk: #0088cc;
    --clr-primary-lt: #7ce9ff;
    --clr-glow: rgba(0, 212, 255, 0.30);
    --text: #e2e8f0;
    --text-color: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-desc: #cbd5e1;
    --glass-bg: rgba(10, 10, 10, 0.78);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
    --card-shadow: 0 16px 44px -8px rgba(0, 0, 0, 0.92), 0 0 20px rgba(0, 212, 255, 0.05);
}

/* High contrast */
body.high-contrast {
    --c-bg: #000 !important;
    --c-surface: #000 !important;
    --c-surface-solid: #000 !important;
    --c-border: 2px solid #fff !important;
    --text: #fff !important;
    --text-secondary: #ff0 !important;
    --clr-primary: #0ff !important;
    --blur: none !important;
}

/* ============================================================
   02. MODERN CSS RESET & BASE STYLES
   ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 112px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--c-bg);
    color: var(--text);
    line-height: 1.72;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    transition: background-color .4s ease, color .4s ease;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Global Content Protection: disable selection & dragging on all elements */
*,
*::before,
*::after {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

img,
picture,
video,
canvas,
svg,
a {
    display: block;
    max-width: 100%;
    height: auto;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
    pointer-events: auto;
}

/* Permit text entry and cursor interaction strictly inside form fields */
input,
textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

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

ul,
ol {
    list-style: none;
}

button {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--clr-primary);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(0, 212, 255, .18);
    border-radius: 4px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -60px;
    left: 20px;
    background: var(--clr-primary);
    color: #000;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 700;
    z-index: var(--z-cursor);
    transition: top .3s ease;
}

.skip-link:focus {
    top: 20px;
}

/* SR-only */
.sr-only,
#sr-announcements {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   03. MINIMAL AESTHETIC BACKGROUND (ZERO LAG)
   ============================================================ */
.animated-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-color: var(--c-bg, #030509);
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
    contain: layout style paint;
    transform: translateZ(0);
}

.ambient-dark-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 100% 90% at 50% 40%, #060a14 0%, #020408 85%);
}

/* Subtle, single-tone ambient illumination (ultra-soft GPU blur, low fill-rate) */
.ambient-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    will-change: transform;
    transform: translate3d(0, 0, 0);
    opacity: 0.65;
}

.glow-primary {
    width: 55vw;
    height: 55vw;
    top: -10vw;
    left: 20vw;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.07) 0%, rgba(0, 100, 220, 0.015) 55%, transparent 70%);
    animation: ambientFloatSlow 26s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.glow-secondary {
    width: 48vw;
    height: 48vw;
    bottom: -8vw;
    right: 15vw;
    background: radial-gradient(circle, rgba(120, 80, 255, 0.05) 0%, rgba(80, 40, 200, 0.01) 50%, transparent 68%);
    animation: ambientFloatSlow2 32s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

@keyframes ambientFloatSlow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-30px, 40px, 0) scale(1.08);
    }

    100% {
        transform: translate3d(20px, -20px, 0) scale(0.96);
    }
}

@keyframes ambientFloatSlow2 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(35px, -35px, 0) scale(1.06);
    }

    100% {
        transform: translate3d(-25px, 25px, 0) scale(0.95);
    }
}

/* Minimal celestial grid with soft center vignette */
.minimal-celestial-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, black 25%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, black 25%, transparent 85%);
    opacity: 0.7;
    pointer-events: none;
}

/* Subtle perimeter vignette */
.vignette-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(1, 3, 6, 0.65) 100%);
    pointer-events: none;
}

/* 3D Cinematic WebGL Canvas (refined background integration) */
.webgl-3d-canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
    display: block;
    opacity: 0.85;
}

/* Light Theme Global Background */
[data-theme="light"] .ambient-dark-backdrop {
    background: radial-gradient(ellipse 100% 90% at 50% 40%, #f8fafd 0%, #edf2f7 85%);
}

[data-theme="light"] .glow-primary {
    background: radial-gradient(circle, rgba(2, 132, 199, 0.08) 0%, transparent 70%);
}

[data-theme="light"] .glow-secondary {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
}

[data-theme="light"] .minimal-celestial-grid {
    background-image:
        linear-gradient(rgba(2, 132, 199, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 132, 199, 0.035) 1px, transparent 1px);
}

[data-theme="light"] .vignette-overlay {
    background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(220, 230, 245, 0.4) 100%);
}

/* ============================================================
   4-SECOND FULL-SCREEN HERO ZOOM-TUNNEL INTRO (NESTED CENTER-ORIGIN)
   transform-origin: center center | expo.inOut easing | 60fps GPU
   ============================================================ */

:root {
    --tunnel-expo-in-out: cubic-bezier(0.87, 0, 0.13, 1);
    --tunnel-duration: 5.0s;
    --tunnel-cover-scale: 1.05;
}

.hero-tunnel-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    contain: layout style;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s ease;
}

.hero-tunnel-stage.animate-tunnel,
.hero-tunnel-stage.tunnel-intro-completed {
    opacity: 1;
    visibility: visible;
}

.tunnel-viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

/* 4 Concentric 16:9 Containers centered at viewport origin with 1920x1080 reference box */
.tunnel-concentric-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 1080px;
    margin-left: -960px;
    margin-top: -540px;
    transform-origin: center center;
    will-change: transform, opacity;
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ── LAYER 1: Radial SVG (6 overlapping circles in radial petal pattern) ── */
.radial-petal-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.radial-petal-svg circle,
.radial-petal-svg line,
.radial-petal-svg rect {
    vector-effect: non-scaling-stroke;
}

/* 0.0s – 1.2s: Scale from center seed (0.0125 = 24px x 14px) to 70vw x 70vh (0.70)
   1.2s – 2.4s: Scale outward pushing Layer 1 off-screen (> 3.0 scale, 0 opacity) */
.animate-tunnel .tunnel-layer-1 {
    animation: tunnelLayer1Timeline var(--tunnel-duration) var(--tunnel-expo-in-out) forwards;
}

@keyframes tunnelLayer1Timeline {
    0% {
        transform: scale(0.0125);
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    28% {
        /* 1.26s: scaled to 70vw x 70vh */
        transform: scale(0.70);
        opacity: 1;
    }

    42% {
        /* 1.89s */
        transform: scale(1.65);
        opacity: 0.65;
    }

    54% {
        /* 2.43s: pushed completely off-screen */
        transform: scale(3.2);
        opacity: 0;
        visibility: hidden;
    }

    100% {
        transform: scale(3.5);
        opacity: 0;
        visibility: hidden;
    }
}

/* ── LAYER 2: Grid Overlay (4-column by 3-row structural wireframe grid, 2px stroke, framed outer border) ── */
.structural-wireframe-grid {
    width: 100%;
    height: 100%;
    display: block;
}

.structural-wireframe-grid line,
.structural-wireframe-grid rect,
.structural-wireframe-grid path {
    vector-effect: non-scaling-stroke;
}

/* 0.0s – 0.8s: hidden
   0.8s: emerges as tiny seed in center (scale 0.0125)
   0.8s – 2.25s: scales outward to fill frame (scale 1.0), pushing Layer 1 off-screen
   2.25s – 3.6s: pushed past viewport edges (scale > 3.0, opacity 0) */
.animate-tunnel .tunnel-layer-2 {
    animation: tunnelLayer2Timeline var(--tunnel-duration) var(--tunnel-expo-in-out) forwards;
}

@keyframes tunnelLayer2Timeline {

    0%,
    18% {
        transform: scale(0.0125);
        opacity: 0;
        visibility: hidden;
    }

    19% {
        /* 0.85s: emerges as seed */
        transform: scale(0.0125);
        opacity: 0.8;
        visibility: visible;
    }

    35% {
        /* 1.57s */
        transform: scale(0.40);
        opacity: 0.95;
    }

    50% {
        /* 2.25s: fills frame */
        transform: scale(1.0);
        opacity: 1;
    }

    66% {
        /* 2.97s: pushing outward */
        transform: scale(1.9);
        opacity: 0.5;
    }

    80% {
        /* 3.60s: pushed past viewport edges */
        transform: scale(3.2);
        opacity: 0;
        visibility: hidden;
    }

    100% {
        transform: scale(3.5);
        opacity: 0;
        visibility: hidden;
    }
}

/* ── LAYER 3: Hero Media Container (with 45-degree angled corner masks) ── */
.tunnel-hero-media {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(6, 16, 36, 0.95) 0%, rgba(2, 4, 8, 0.98) 80%);
}

.media-fullbleed-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 40%, rgba(0, 212, 255, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(112, 0, 255, 0.08) 0%, transparent 50%),
        linear-gradient(rgba(0, 212, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.035) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
    opacity: 0.95;
}

/* 45-degree Angled Geometric Corner Masks */
.angled-corner-mask {
    position: absolute;
    width: 140px;
    height: 140px;
    pointer-events: none;
    z-index: 3;
    will-change: transform, opacity;
    animation: cornerMasksTimeline var(--tunnel-duration) var(--tunnel-expo-in-out) forwards;
}

.mask-top-left {
    top: 0;
    left: 0;
}

.mask-top-right {
    top: 0;
    right: 0;
}

.mask-bottom-left {
    bottom: 0;
    left: 0;
}

.mask-bottom-right {
    bottom: 0;
    right: 0;
}

.angled-corner-mask svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 0.0s – 1.35s: hidden
   1.35s: seeded at center (scale 0.0125)
   1.35s – 2.16s: inner rectangle scaled to 40vw x 40vh (scale 0.40)
   2.16s – 3.37s: expanded from center to 100vw x 100vh full bleed
   3.37s – 4.5s: settles as full-bleed background */
.animate-tunnel .tunnel-layer-3 {
    animation: tunnelLayer3Timeline var(--tunnel-duration) var(--tunnel-expo-in-out) forwards;
}

@keyframes tunnelLayer3Timeline {

    0%,
    30% {
        transform: scale(0.0125);
        opacity: 0;
        visibility: hidden;
    }

    31% {
        /* 1.39s: seeded */
        transform: scale(0.0125);
        opacity: 0.65;
        visibility: visible;
    }

    42% {
        /* 1.89s */
        transform: scale(0.20);
        opacity: 0.85;
    }

    48% {
        /* 2.16s: 40vw x 40vh */
        transform: scale(0.40);
        opacity: 0.95;
    }

    75% {
        /* 3.37s: expands to 100vw x 100vh full-bleed */
        transform: scale(var(--tunnel-cover-scale, 1.05));
        opacity: 1;
    }

    100% {
        transform: scale(var(--tunnel-cover-scale, 1.05));
        opacity: 1;
        visibility: visible;
    }
}

/* Corner frames pushed past edges between 2.0s and 3.4s */
@keyframes cornerMasksTimeline {

    0%,
    42% {
        transform: scale(1);
        opacity: 0.9;
    }

    60% {
        /* 2.70s */
        transform: scale(1.15);
        opacity: 0.7;
    }

    76% {
        /* 3.42s: pushed past viewport edges */
        transform: scale(1.8) translate3d(0, 0, 0);
        opacity: 0;
        visibility: hidden;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
        visibility: hidden;
    }
}

/* ── LAYER 4: Elite Minimalist Editorial Display (Distraction-Free) ── */
.tunnel-layer-4 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tunnel-editorial-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 94%;
    max-width: 1180px;
    z-index: 5;
    pointer-events: none;
    padding: 34px 38px;
    border-radius: 28px;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 240, 255, 0.08) 0%, rgba(155, 93, 229, 0.04) 50%, transparent 80%);
}

/* High-Precision Cyber/Editorial Corner Brackets */
.editorial-corner-bracket {
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    opacity: 0.75;
    transition: opacity 0.4s ease;
}

.editorial-corner-bracket.bracket-tl {
    top: 10px;
    left: 10px;
    border-top: 1.5px solid rgba(0, 240, 255, 0.85);
    border-left: 1.5px solid rgba(0, 240, 255, 0.85);
}

.editorial-corner-bracket.bracket-tr {
    top: 10px;
    right: 10px;
    border-top: 1.5px solid rgba(0, 240, 255, 0.85);
    border-right: 1.5px solid rgba(0, 240, 255, 0.85);
}

.editorial-corner-bracket.bracket-bl {
    bottom: 10px;
    left: 10px;
    border-bottom: 1.5px solid rgba(0, 240, 255, 0.85);
    border-left: 1.5px solid rgba(0, 240, 255, 0.85);
}

.editorial-corner-bracket.bracket-br {
    bottom: 10px;
    right: 10px;
    border-bottom: 1.5px solid rgba(0, 240, 255, 0.85);
    border-right: 1.5px solid rgba(0, 240, 255, 0.85);
}

/* Top Eyebrow Row with Flank Gradient Lines */
.editorial-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 14px;
    width: 100%;
}

.editorial-flank-line {
    height: 1px;
    flex: 1;
    max-width: 150px;
    opacity: 0.8;
}

.editorial-flank-line.flank-left {
    background: linear-gradient(90deg, transparent 0%, rgba(0, 240, 255, 0.8) 100%);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.editorial-flank-line.flank-right {
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.8) 0%, transparent 100%);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.editorial-eyebrow-tag {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(0, 240, 255, 0.95);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.25);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.15);
}

.eyebrow-beacon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff8c;
    box-shadow: 0 0 8px #00ff8c, 0 0 14px rgba(0, 255, 140, 0.6);
    animation: beaconPulse 2s ease-in-out infinite;
}

@keyframes beaconPulse {

    0%,
    100% {
        opacity: 0.8;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* Author Name Row: "Hello, I’m Sarthak M." — Elite Typography */
.editorial-author-row {
    overflow: hidden;
    line-height: 1.08;
    padding: 6px 0;
}

.editorial-author-row h1,
.editorial-heading,
.editorial-author-row .hero-title-fade-in {
    font-family: 'Orbitron', 'Space Grotesk', sans-serif !important;
    font-size: clamp(2.2rem, 5.5vw, 4.2rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.16 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.28em !important;
    text-transform: none !important;
    filter: drop-shadow(0 4px 28px rgba(0, 212, 255, 0.40));
}

.editorial-author-row .greeting-prefix {
    font-family: 'Orbitron', 'Space Grotesk', sans-serif !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    opacity: 0.96;
}

.editorial-author-row .name-gradient {
    font-family: 'Orbitron', 'Space Grotesk', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    background: var(--clr-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 24px rgba(0, 212, 255, 0.50));
}

/* ── Luminous Gradient Baseline Rule (Underline Beam with Center Diamond Gem) ── */
.editorial-baseline-rule {
    display: block !important;
    position: relative !important;
    width: min(84%, 580px) !important;
    height: 2px !important;
    margin: 18px auto 22px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 240, 255, 0.15) 10%, #00f0ff 40%, #ffffff 50%, #c084fc 62%, rgba(0, 240, 255, 0.15) 90%, transparent 100%) !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: initial !important;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.85), 0 0 32px rgba(192, 132, 252, 0.45) !important;
    opacity: 1;
    transform: scaleX(1);
    transform-origin: center center;
}

.editorial-baseline-rule::before {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 12%;
    right: 12%;
    border-left: 2px solid rgba(0, 240, 255, 0.85);
    border-right: 2px solid rgba(192, 132, 252, 0.85);
    pointer-events: none;
}

.editorial-baseline-rule .rule-center-gem {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #ffffff;
    box-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 30px #c084fc;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 1px;
    display: block;
}

/* Primary Editorial Phrase */
.editorial-line-primary {
    overflow: hidden;
    line-height: 1.35;
    padding: 4px 0;
}

.editorial-primary-text {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(0.95rem, 2.0vw, 1.65rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 240, 255, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    filter: drop-shadow(0 2px 18px rgba(0, 240, 255, 0.42));
}

.editorial-primary-text .phrase-slash {
    color: rgba(192, 132, 252, 0.85);
    font-weight: 300;
    margin: 0 6px;
    text-shadow: 0 0 10px rgba(192, 132, 252, 0.7);
}

/* Middle Gradient Accent Line */
.editorial-mid-gradient-line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(45%, 260px);
    height: 1px;
    margin: 14px auto 16px;
    position: relative;
}

.editorial-mid-gradient-line .mid-line-beam {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 240, 255, 0.7) 50%, transparent 100%);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.editorial-mid-gradient-line .mid-line-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #00f0ff;
    box-shadow: 0 0 8px #00f0ff;
    z-index: 1;
}

/* Secondary Editorial Phrase */
.editorial-line-secondary {
    overflow: hidden;
    line-height: 1.45;
    padding: 4px 0;
}

.editorial-secondary-text {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: clamp(0.70rem, 1.1vw, 0.90rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.76);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.bullet-sep {
    color: #00f0ff;
    margin: 0 0.6em;
    font-size: 0.85em;
    display: inline-block;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
}

/* Bottom Micro Gradient Anchor Line */
.editorial-bottom-anchor-line {
    width: min(25%, 120px);
    height: 1px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 240, 255, 0.35) 50%, transparent 100%);
}

/* Staggered Cinematic Keyframe Choreography */
.animate-tunnel .editorial-corner-bracket {
    animation: bracketGlowReveal var(--tunnel-duration) var(--tunnel-expo-in-out) forwards;
}

.animate-tunnel .editorial-eyebrow-row {
    animation: eyebrowReveal var(--tunnel-duration) var(--tunnel-expo-in-out) forwards;
    will-change: transform, opacity;
}

.animate-tunnel .editorial-author-row {
    animation: editorialAuthorReveal var(--tunnel-duration) var(--tunnel-expo-in-out) forwards;
    will-change: transform, opacity, clip-path;
}

.animate-tunnel .editorial-baseline-rule {
    animation: baselineRuleExpand var(--tunnel-duration) var(--tunnel-expo-in-out) forwards;
    will-change: transform, opacity;
}

.animate-tunnel .editorial-line-primary {
    animation: editorialPrimaryReveal var(--tunnel-duration) var(--tunnel-expo-in-out) forwards;
    will-change: transform, opacity, clip-path;
}

.animate-tunnel .editorial-mid-gradient-line {
    animation: midLineExpand var(--tunnel-duration) var(--tunnel-expo-in-out) forwards;
    will-change: transform, opacity;
}

.animate-tunnel .editorial-line-secondary {
    animation: editorialSecondaryReveal var(--tunnel-duration) var(--tunnel-expo-in-out) forwards;
    will-change: transform, opacity;
}

.animate-tunnel .editorial-bottom-anchor-line {
    animation: anchorLineReveal var(--tunnel-duration) var(--tunnel-expo-in-out) forwards;
}

@keyframes bracketGlowReveal {

    0%,
    26% {
        opacity: 0;
        transform: scale(0.85);
    }

    34% {
        opacity: 0.85;
        transform: scale(1);
    }

    82% {
        opacity: 0.85;
        transform: scale(1);
    }

    92%,
    100% {
        opacity: 0;
        transform: scale(0.95);
    }
}

@keyframes eyebrowReveal {

    0%,
    28% {
        opacity: 0;
        transform: translateY(-10px);
    }

    34% {
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        opacity: 1;
        transform: translateY(0);
    }

    90%,
    100% {
        opacity: 0;
        transform: translateY(-16px);
    }
}

@keyframes editorialAuthorReveal {

    0%,
    32% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        opacity: 0;
        transform: translateY(16px);
    }

    36% {
        opacity: 1;
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }

    54% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
        transform: translateY(0);
    }

    78% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
        transform: translateY(0);
    }

    90% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 0;
        transform: translateY(-22px) scale(0.97);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 0;
        transform: translateY(-22px) scale(0.97);
        visibility: hidden;
    }
}

@keyframes baselineRuleExpand {

    0%,
    38% {
        opacity: 0;
        transform: scaleX(0);
    }

    44% {
        opacity: 0.6;
    }

    58% {
        opacity: 1;
        transform: scaleX(1);
    }

    78% {
        opacity: 1;
        transform: scaleX(1);
    }

    90% {
        opacity: 0;
        transform: scaleX(0.85);
    }

    100% {
        opacity: 0;
        transform: scaleX(0.85);
        visibility: hidden;
    }
}

@keyframes editorialPrimaryReveal {

    0%,
    44% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        opacity: 0;
        transform: translateY(14px);
    }

    48% {
        opacity: 1;
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }

    64% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
        transform: translateY(0);
    }

    92% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 0;
        transform: translateY(-20px) scale(0.97);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 0;
        transform: translateY(-20px) scale(0.97);
        visibility: hidden;
    }
}

@keyframes midLineExpand {

    0%,
    48% {
        opacity: 0;
        transform: scaleX(0);
    }

    54% {
        opacity: 0.8;
        transform: scaleX(1);
    }

    80% {
        opacity: 0.8;
        transform: scaleX(1);
    }

    92%,
    100% {
        opacity: 0;
        transform: scaleX(0.8);
    }
}

@keyframes editorialSecondaryReveal {

    0%,
    52% {
        opacity: 0;
        transform: translateY(12px);
    }

    56% {
        opacity: 0.3;
    }

    70% {
        opacity: 0.88;
        transform: translateY(0);
    }

    82% {
        opacity: 0.88;
        transform: translateY(0);
    }

    94% {
        opacity: 0;
        transform: translateY(-16px);
    }

    100% {
        opacity: 0;
        transform: translateY(-16px);
        visibility: hidden;
    }
}

@keyframes anchorLineReveal {

    0%,
    56% {
        opacity: 0;
        transform: scaleX(0);
    }

    64% {
        opacity: 0.5;
        transform: scaleX(1);
    }

    82% {
        opacity: 0.5;
        transform: scaleX(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: scaleX(0.7);
    }
}

/* ============================================================
   STRICT SEQUENCING PIPELINE:
   1. Loader runs for exactly 6.0s (all main UI completely hidden)
   2. Intro animation runs for 5.0s (main card completely hidden)
   3. Main card & initial UI components revealed ONLY after animation finishes
   ============================================================ */

/* SCROLL LOCK: Prevent all scrolling while loader or intro animation is playing.
   Covers mouse wheel, scrollbar drag, touch/swipe, and keyboard (arrow keys, space, Page Down).
   The lock is released when body.intro-completed is added by HeroTunnelIntro.revealMainComponents(). */
html:not(.intro-scroll-unlocked),
body:not(.intro-completed) {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* Once intro completes, restore natural scrolling */
html.intro-scroll-unlocked,
body.intro-completed {
    overflow: visible !important;
    overflow-x: hidden !important;
    overscroll-behavior: auto !important;
}

/* While loader or intro animation is running: keep main card & initial UI strictly hidden */
body:not(.intro-completed) .hero-content,
.hero-content:not(.card-revealed) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(32px) scale(0.96) !important;
    transition: none !important;
}

body:not(.intro-completed) header[role="banner"],
body:not(.intro-completed) .header,
body:not(.intro-completed) .mobile-top-bar,
body:not(.intro-completed) .nav-container,
body:not(.intro-completed) .section-nav,
body:not(.intro-completed) .scroll-indicator,
body:not(.intro-completed) .scroll-progress-bar,
body:not(.intro-completed) .back-to-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-20px) !important;
    transition: none !important;
}

/* Stage 3: Smooth reveal ONLY after intro animation completes */
body.intro-completed .hero-content,
.hero-content.card-revealed {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.intro-completed header[role="banner"],
body.intro-completed .header,
body.intro-completed .mobile-top-bar,
body.intro-completed .nav-container {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.intro-completed .section-nav,
body.intro-completed .scroll-indicator,
body.intro-completed .scroll-progress-bar {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.85s ease !important;
}

body.intro-completed .back-to-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.3s ease !important;
}

/* Light Theme Adaptations */
[data-theme="light"] .tunnel-hero-media {
    background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(240, 244, 250, 0.95) 0%, rgba(230, 235, 245, 0.98) 80%);
}

[data-theme="light"] .editorial-author-row h1,
[data-theme="light"] .editorial-heading,
[data-theme="light"] .editorial-author-row .hero-title-fade-in {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.08));
}

[data-theme="light"] .editorial-author-row .greeting-prefix {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

[data-theme="light"] .editorial-author-row .name-gradient {
    background: linear-gradient(135deg, #0f172a 10%, #0284c7 60%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(2, 132, 199, 0.20));
}

[data-theme="light"] .editorial-baseline-rule {
    background: linear-gradient(90deg, transparent 0%, rgba(2, 132, 199, 0.2) 10%, #0284c7 40%, #0f172a 50%, #7c3aed 62%, rgba(2, 132, 199, 0.2) 90%, transparent 100%) !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.35) !important;
}

[data-theme="light"] .editorial-baseline-rule .rule-center-gem {
    background: #0f172a;
    box-shadow: 0 0 8px #0284c7;
}

[data-theme="light"] .editorial-flank-line.flank-left {
    background: linear-gradient(90deg, transparent 0%, rgba(2, 132, 199, 0.6) 100%);
}

[data-theme="light"] .editorial-flank-line.flank-right {
    background: linear-gradient(90deg, rgba(2, 132, 199, 0.6) 0%, transparent 100%);
}

[data-theme="light"] .editorial-eyebrow-tag {
    color: #0284c7;
    background: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.25);
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.12);
}

[data-theme="light"] .editorial-mid-gradient-line .mid-line-beam {
    background: linear-gradient(90deg, transparent 0%, rgba(2, 132, 199, 0.5) 50%, transparent 100%);
}

[data-theme="light"] .editorial-mid-gradient-line .mid-line-dot {
    background: #0284c7;
    box-shadow: 0 0 6px #0284c7;
}

[data-theme="light"] .editorial-primary-text {
    color: #0284c7;
    filter: drop-shadow(0 2px 12px rgba(2, 132, 199, 0.20));
}

[data-theme="light"] .editorial-primary-text .phrase-slash {
    color: #7c3aed;
}

[data-theme="light"] .editorial-secondary-text {
    color: #475569;
}

[data-theme="light"] .bullet-sep {
    color: #0284c7;
}

/* Media Query Adaptations for Mobile & Tablet */
@media (max-width: 768px) {
    .tunnel-editorial-display {
        padding: 24px 18px;
        width: 95%;
    }

    .editorial-author-row h1,
    .editorial-heading,
    .editorial-author-row .hero-title-fade-in {
        font-size: clamp(2.2rem, 7.5vw, 3.6rem) !important;
    }

    .editorial-flank-line {
        max-width: 80px;
    }

    .editorial-eyebrow-tag {
        font-size: 0.62rem;
        letter-spacing: 0.16em;
        padding: 3px 10px;
    }

    .editorial-baseline-rule {
        margin: 14px auto 18px !important;
        width: 90% !important;
    }

    .editorial-primary-text {
        font-size: clamp(0.88rem, 3.0vw, 1.25rem);
        letter-spacing: 0.09em;
    }

    .editorial-secondary-text {
        font-size: clamp(0.66rem, 2.0vw, 0.80rem);
        letter-spacing: 0.10em;
    }
}

@media (max-width: 480px) {
    .tunnel-editorial-display {
        width: 96%;
        padding: 18px 12px;
    }

    .editorial-author-row h1,
    .editorial-heading,
    .editorial-author-row .hero-title-fade-in {
        font-size: clamp(1.8rem, 7.2vw, 2.6rem) !important;
    }

    .editorial-flank-line {
        max-width: 40px;
    }

    .editorial-eyebrow-tag {
        font-size: 0.58rem;
        letter-spacing: 0.12em;
        padding: 3px 8px;
    }

    .editorial-baseline-rule {
        margin: 12px auto 15px !important;
        width: 92% !important;
    }

    .editorial-primary-text {
        font-size: clamp(0.80rem, 3.4vw, 0.98rem);
        letter-spacing: 0.07em;
        line-height: 1.35;
    }

    .editorial-mid-gradient-line {
        margin: 10px auto 12px;
        width: 60%;
    }

    .editorial-secondary-text {
        font-size: clamp(0.60rem, 2.6vw, 0.70rem);
        letter-spacing: 0.06em;
        line-height: 1.45;
    }

    /* Optimized Mobile Profile Component (Hero Content) */
    .hero-content {
        width: calc(100% - 20px) !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        padding: 20px 14px 18px !important;
        border-radius: 24px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 212, 255, 0.12) !important;
    }

    [data-theme="light"] .hero-content,
    body.light-theme .hero-content {
        box-shadow: 0 16px 40px rgba(0, 20, 60, 0.10), 0 0 16px rgba(0, 136, 204, 0.08) !important;
    }

    .hero-subtitle {
        font-size: 0.65rem !important;
        padding: 4px 12px !important;
        letter-spacing: 1px !important;
        margin-bottom: 8px !important;
    }

    .hero-title-fade-in {
        font-size: clamp(1.2rem, 5.2vw, 1.65rem) !important;
        margin-bottom: 10px !important;
        line-height: 1.22 !important;
    }

    .hero-description {
        font-size: 0.86rem !important;
        line-height: 1.55 !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
    }

    .skills-carousel {
        margin-bottom: 12px !important;
        padding: 6px 0 !important;
    }

    .profile-container {
        max-width: 240px !important;
        margin: 8px auto 14px !important;
    }

    .hero-buttons {
        gap: 8px !important;
        margin-top: 6px !important;
    }

    .hero-btn {
        min-height: 42px !important;
        padding: 10px 18px !important;
        font-size: 0.82rem !important;
    }
}

/* ── Background Particles & Falling Stars (Hidden for zero lag) ── */
.particles,
.particle,
.falling-stars,
.star {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Custom cursor ── */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--clr-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: var(--z-cursor);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px var(--clr-primary);
    will-change: transform;
}

.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--clr-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: calc(var(--z-cursor) - 1);
    transform: translate(-50%, -50%);
    transition: width .22s ease, height .22s ease, background .22s ease;
    will-change: transform;
}

.cursor-trail {
    position: fixed;
    pointer-events: none;
    z-index: calc(var(--z-cursor) - 2);
}

body.hovering .cursor-outline {
    width: 54px;
    height: 54px;
    background: rgba(0, 212, 255, .08);
    border-color: var(--clr-primary-lt);
}

/* ============================================================
   05. NAVIGATION & HEADER
   ============================================================ */

/* Header Root & Floating Wrapper */
header,
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-nav);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 24px;
    transition: padding var(--t-mid), transform var(--t-mid), background-color var(--t-mid);
    background: transparent;
    pointer-events: none;
    /* Let empty peripheral space pass clicks through */
}

header.scrolled,
.navbar.scrolled {
    padding: 10px 24px;
}

/* Header Inner Container */
.header-inner {
    width: 100%;
    max-width: 1280px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    pointer-events: none;
}

/* Brand display states (desktop vs mobile) */
.mobile-brand {
    display: none !important;
}

.desktop-brand {
    display: inline-flex !important;
}

.drawer-header {
    display: none;
}

.drawer-footer {
    display: none;
}

/* Navigation Pill Container */
.nav-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 5px 6px 5px 10px;
    border-radius: 9999px;
    background: rgba(8, 8, 8, 0.84);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 212, 255, 0.06),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.10);
    transition: border-color var(--t-mid), box-shadow var(--t-mid), background-color var(--t-mid), transform var(--t-mid);
    pointer-events: auto;
}

.nav-container:hover {
    border-color: rgba(0, 212, 255, 0.35);
    box-shadow: 0 14px 40px -8px rgba(0, 0, 0, 0.85),
        0 0 32px rgba(0, 212, 255, 0.12),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.16);
}

header.scrolled .nav-container {
    background: rgba(5, 5, 5, 0.94);
    border-color: rgba(0, 212, 255, 0.28);
    box-shadow: 0 12px 36px -6px rgba(0, 0, 0, 0.9),
        0 0 26px rgba(0, 212, 255, 0.10),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.12);
}

/* Gliding Active Pill Indicator */
.nav-indicator {
    position: absolute;
    top: 5px;
    height: calc(100% - 10px);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.9) 0%, rgba(111, 0, 255, 0.9) 100%);
    border-radius: 9999px;
    z-index: 0;
    transition: left .34s cubic-bezier(.23, 1, .32, 1), width .34s cubic-bezier(.23, 1, .32, 1), opacity .28s ease;
    box-shadow: 0 2px 14px rgba(0, 212, 255, 0.45);
    opacity: 0;
    will-change: left, width, opacity;
    pointer-events: none;
}

/* Logo SVG / Image & Micro-Interactions */
.brand-logo-svg,
.brand-logo-img {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.65));
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

/* Top "Portfolio" Brand Text & Badge */
.port {
    position: relative;
    z-index: 1;
    font-family: 'Space Grotesk', 'Orbitron', system-ui, -apple-system, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 8px 3px 4px;
    color: #ffffff;
    border-radius: 9999px;
    transition: transform var(--t-fast), filter var(--t-mid);
    user-select: none;
    pointer-events: auto;
}

.port span {
    background: linear-gradient(135deg, #ffffff 15%, #67e8f9 60%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0, 212, 255, 0.35));
    transition: filter var(--t-mid);
    display: inline-block;
    line-height: 1.2;
}

.port:hover {
    transform: scale(1.02);
}

.port:hover .brand-logo-svg,
.port:hover .brand-logo-img {
    transform: rotate(15deg) scale(1.1);
    filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.95)) drop-shadow(0 0 20px rgba(136, 85, 255, 0.5));
}

.port:hover span {
    filter: drop-shadow(0 2px 12px rgba(0, 240, 255, 0.7));
}

.port:active {
    transform: scale(0.98);
}

.mobile-top-bar {
    display: none;
}

.mobile-only-link {
    display: none !important;
}

.mobile-icon {
    display: none;
}

/* Navigation Links */
.nav-link {
    position: relative;
    z-index: 1;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 6px 13px;
    min-height: 34px;
    border-radius: 9999px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--ease-spring);
    user-select: none;
}

.nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.nav-link.active {
    color: #ffffff;
    font-weight: 600;
}

.nav-link::after {
    display: none;
}

/* Header Action Buttons (Theme & Contrast Toggles) */
.nav-actions {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 1;
}

.theme-toggle,
#highContrastToggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.16);
    color: var(--text);
    font-size: 0.82rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    cursor: pointer;
    position: relative;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.theme-toggle i,
#highContrastToggle i {
    font-size: 0.82rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover,
#highContrastToggle:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.5);
    color: var(--clr-primary-lt);
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.35);
    transform: scale(1.08) rotate(8deg);
}

.theme-toggle:active,
#highContrastToggle:active {
    transform: scale(0.95);
}

/* Mobile Hamburger Toggle (kept responsive & accessible) */
.mobile-menu-toggle {
    display: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--c-border);
    color: var(--text);
    font-size: 1.15rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    transition: var(--t-mid);
    z-index: var(--z-nav);
    cursor: pointer;
    pointer-events: auto;
}

.mobile-menu-toggle:hover {
    background: var(--clr-primary);
    color: #000;
    box-shadow: 0 0 16px var(--clr-glow);
}

/* Nav Open Backdrop & Stacking */
body.nav-open {
    overflow: hidden;
}

body.nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    background: rgba(2, 5, 14, .68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.nav-open header,
body.nav-open .navbar {
    z-index: var(--z-modal);
}

/* Tablet Nav Optimization (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {

    header,
    .navbar {
        padding: 12px 16px;
    }

    .nav-container {
        padding: 5px 8px 5px 10px;
        gap: 1px;
    }

    .port {
        font-size: 1.05rem;
        padding: 4px 8px 4px 4px;
        gap: 7px;
    }

    .port .brand-logo-svg {
        width: 20px;
        height: 20px;
    }

    .nav-link {
        padding: 7px 11px;
        font-size: 0.8rem;
        min-height: 34px;
    }

    .nav-actions {
        margin-left: 4px;
        padding-left: 6px;
        gap: 4px;
    }

    .theme-toggle,
    #highContrastToggle {
        width: 32px;
        height: 32px;
        font-size: 0.82rem;
    }
}

/* Light Mode Overrides for Top Navbar & Portfolio Brand */
[data-theme="light"] .nav-container,
body.light-theme .nav-container {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(0, 136, 204, 0.2);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08),
        0 0 20px rgba(0, 136, 204, 0.06),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] header.scrolled .nav-container,
body.light-theme header.scrolled .nav-container {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .port span,
body.light-theme .port span {
    background: linear-gradient(135deg, #090d1a 10%, #0284c7 60%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}

[data-theme="light"] .nav-link,
body.light-theme .nav-link {
    color: #475569;
}

[data-theme="light"] .nav-link:hover,
body.light-theme .nav-link:hover {
    color: #0f172a;
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .nav-link.active,
body.light-theme .nav-link.active {
    color: #ffffff;
}

[data-theme="light"] .theme-toggle,
[data-theme="light"] #highContrastToggle,
body.light-theme .theme-toggle,
body.light-theme #highContrastToggle {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

/* ============================================================
   06. HERO SECTION
   ============================================================ */
.hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 80px 20px 80px;
}

#hero-3d-scene,
.hero-3d-container {
    /* The camera timeline spans the whole page, so the scene stays in the
       viewport while the content travels through it. */
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#main-content {
    position: relative;
    z-index: 1;
}

/* NEW SUBTLE AMBIENT 3D BACKGROUND CANVAS */
.webgl-3d-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    opacity: 0.88;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

[data-theme="light"] .webgl-3d-canvas,
body.light-theme .webgl-3d-canvas {
    opacity: 0.28;
}

/* RESTORED PREMIUM CENTERED HERO CARD (MATCHING REFERENCE IMAGE 5) */
.hero-content {
    max-width: 820px;
    width: 92%;
    margin: 0 auto;
    text-align: center;
    z-index: 25;
    position: relative;
    background: rgba(10, 15, 28, 0.78);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(0, 212, 255, 0.20);
    border-radius: 36px;
    padding: clamp(36px, 5vw, 52px) clamp(32px, 5vw, 52px) clamp(28px, 3.5vw, 38px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 212, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    overflow: hidden;
    transform: translate3d(0, calc(var(--scene-energy, 0) * -2px), 0);
    will-change: transform, border-color, box-shadow;
}

/* The UI shares the same motion state as the 3D scene. This tiny lift and
   stage-aware accent keep the content card connected to the choreography. */
body[data-scene-stage="contact"] .hero-content,
body[data-scene-stage="experience"] .hero-content {
    border-color: rgba(136, 85, 255, 0.24);
}

[data-theme="light"] .hero-content,
body.light-theme .hero-content {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(0, 136, 204, 0.16) !important;
    box-shadow: 0 24px 64px -10px rgba(0, 30, 80, 0.10), 0 0 24px rgba(0, 136, 204, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}

/* Badge */
.hero-subtitle,
.fade-in:not(.hero-description):not(.hero-buttons):not(.skills-carousel):not(.profile-container):not(.hero-content) {
    display: inline-block;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    font-size: clamp(.78rem, .74rem + .22vw, .86rem);
    color: var(--clr-primary);
    font-weight: 700;
    padding: 6px 22px;
    border-radius: 50px;
    background: rgba(0, 212, 255, .06);
    border: 1px solid rgba(0, 212, 255, .28);
    box-shadow: 0 0 16px rgba(0, 212, 255, .10);
    margin-bottom: 14px;
}

[data-theme="light"] .hero-subtitle,
body.light-theme .hero-subtitle {
    background: rgba(0, 136, 204, 0.08) !important;
    border-color: rgba(0, 136, 204, 0.30) !important;
    color: #0077b6 !important;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.10) !important;
}

/* Title */
.hero-title-fade-in {
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    font-size: clamp(1.85rem, 1.45rem + 1.6vw, 2.65rem);
    line-height: 1.22;
    margin-bottom: 16px;
    color: var(--text);
    animation: fadeUp .8s var(--ease-spring) both;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.32em;
    flex-wrap: nowrap;
}

/* Typewriter text and cursor */
.typewriter-text {
    display: inline-flex;
    align-items: center;
    position: relative;
    min-width: 0.5ch;
    white-space: nowrap;
    background: var(--clr-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.typewriter-text::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1.05em;
    background-color: var(--clr-primary, #00d4ff);
    margin-left: 3px;
    vertical-align: middle;
    animation: caretBlink .8s step-end infinite;
    box-shadow: 0 0 8px var(--clr-primary, #00d4ff);
    border-radius: 1px;
}

.typewriter-text .txt {
    background: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

/* Description sunken panel */
.hero-description {
    max-width: 680px;
    margin: 0 auto 18px;
    line-height: 1.65;
    background: rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 16px 26px;
    font-size: clamp(0.95rem, 0.90rem + 0.22vw, 1.08rem);
}

[data-theme="light"] .hero-description,
body.light-theme .hero-description {
    background: rgba(240, 246, 255, 0.80) !important;
    border: 1px solid rgba(0, 136, 204, 0.20) !important;
    color: #1e293b !important;
}

.bouncing-text {
    display: inline-block;
    color: var(--text-secondary);
    font-size: clamp(.88rem, .84rem + .18vw, .96rem);
    line-height: 1.65;
}

[data-theme="light"] .bouncing-text,
body.light-theme .bouncing-text {
    color: #334155 !important;
}

/* ── Skills Ticker ── */
.skills-carousel {
    max-width: 720px;
    margin: 0 auto 18px;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.skills-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: scrollSkills 35s linear infinite;
    will-change: transform;
}

.skills-carousel:hover .skills-track {
    animation-play-state: paused;
}

.skill-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    transition: border-color var(--t-fast), transform var(--t-fast);
}

[data-theme="light"] .skill-item,
body.light-theme .skill-item {
    background: #ffffff !important;
    border: 1px solid rgba(0, 136, 204, 0.18) !important;
    box-shadow: 0 2px 8px rgba(0, 30, 80, 0.05) !important;
    color: #1e293b !important;
}

.skill-item i {
    font-size: 0.94rem;
    color: var(--clr-primary);
}

/* AI Brand Colors in Hero Carousel */
.skill-item i.icon-claude-mini {
    color: #D97757 !important;
}

.skill-item i.icon-gpt-mini {
    color: #10A37F !important;
}

.skill-item i.icon-deepseek-mini {
    color: #4D6BFE !important;
}

.skill-item i.icon-antigravity-mini {
    color: #00D4FF !important;
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.6));
}

.skill-item i.icon-gemini-mini {
    color: #38BDF8 !important;
}

.skill-item i.icon-langchain-mini {
    color: #22D3EE !important;
}

.skill-item i.icon-pytorch-mini {
    color: #EE4C2C !important;
}

.skill-item i.fa-react {
    color: #61DAFB !important;
}

.skill-item i.fa-node-js {
    color: #68A063 !important;
}

.skill-item i.fa-python {
    color: #3776AB !important;
}

.skill-item i.fa-database {
    color: #47A248 !important;
}

.skill-item i.fa-js {
    color: #F7DF1E !important;
}

.skill-item i.fa-cloud {
    color: #FF9900 !important;
}

.skill-item i.fa-docker {
    color: #2496ED !important;
}

/* ── Profile carousel ── */
.profile-container {
    position: relative;
    margin: 0 auto 16px;
    width: min(440px, 92vw);
    max-width: 440px;
    height: auto;
}

.image-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 22px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid rgba(0, 212, 255, 0.28);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 212, 255, 0.15);
    transition: transform .35s ease, border-color .35s ease;
    contain: paint;
    background: var(--c-surface-solid, rgba(10, 15, 30, 0.6));
}

[data-theme="light"] .image-carousel,
body.light-theme .image-carousel {
    border: 3px solid #ffffff !important;
    box-shadow: 0 16px 36px -6px rgba(0, 30, 80, 0.16), 0 0 0 1px rgba(0, 136, 204, 0.15) !important;
}

.image-carousel:hover {
    border-color: var(--clr-primary);
    transform: translateY(-2px);
}

.carousel-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    border-radius: inherit;
    transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.97);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    will-change: opacity, transform;
    pointer-events: none;
    z-index: 0;
}

.carousel-track.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: 1;
}

.profile-img,
.morph-shape,
.image-carousel img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 22%;
    display: block;
    border-radius: inherit;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.6s ease;
}

.image-carousel:hover .profile-img {
    transform: scale(1.03);
}

.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    position: static;
}

.carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

[data-theme="light"] .carousel-dot,
body.light-theme .carousel-dot {
    background: rgba(0, 136, 204, 0.35);
}

.carousel-dot.active {
    width: 22px;
    border-radius: 10px;
    background: var(--clr-primary);
    box-shadow: 0 0 10px var(--clr-primary);
}

/* ── Sunken Button Panel inside Hero Card ── */
.hero-buttons {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
}

[data-theme="light"] .hero-buttons,
body.light-theme .hero-buttons {
    background: rgba(240, 246, 255, 0.85) !important;
    border: 1px solid rgba(0, 136, 204, 0.18) !important;
}

.hero-buttons .hero-btn:not(.primary) {
    height: 52px;
    min-width: 160px;
    padding: 0 28px;
    border-radius: 50px;
    font-size: 1.0rem;
    font-weight: 600;
    background: rgba(15, 23, 42, 0.85);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
}

[data-theme="light"] .hero-buttons .hero-btn:not(.primary),
body.light-theme .hero-buttons .hero-btn:not(.primary) {
    background: #1e293b !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.hero-buttons .hero-btn:not(.primary):hover {
    border-color: var(--clr-primary);
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.28);
    transform: translateY(-2px);
}

.hero-buttons .hero-btn.primary {
    height: 52px;
    min-width: 160px;
    padding: 0 28px;
    border-radius: 50px;
    font-size: 1.0rem;
    font-weight: 600;
    background: linear-gradient(135deg, #00d4ff 0%, #3a86ff 50%, #8855ff 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 22px rgba(0, 212, 255, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.hero-buttons .hero-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(0, 212, 255, 0.60);
}

.hero-buttons .hero-btn::before {
    display: none !important;
}

.hero-btn,
.cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    min-width: 164px;
    padding: 0 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: .94rem;
    letter-spacing: .4px;
    background: var(--c-surface-solid);
    color: var(--text);
    border: 1px solid var(--c-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .22);
    overflow: hidden;
    z-index: 1;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.hero-btn.btn-3d::before,
.cta-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--clr-grad);
    opacity: .12;
    z-index: -1;
    transition: opacity .28s ease;
}

.hero-btn.btn-3d:hover::before,
.cta-button:hover::before {
    opacity: .24;
}

.hero-btn.primary,
.cta-button {
    background: var(--clr-grad);
    color: #fff;
    border: none;
    box-shadow: 0 8px 32px var(--clr-glow);
}

.hero-btn.primary::before,
.cta-button::before {
    opacity: 0;
}

.hero-btn:hover,
.cta-button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 38px var(--clr-glow);
    border-color: var(--clr-primary);
}

.hero-btn.primary:hover,
.cta-button:hover {
    box-shadow: 0 14px 42px rgba(0, 212, 255, .55);
}

.hero-btn.outline {
    background: transparent;
    border: 2px solid var(--clr-primary);
    color: var(--clr-primary);
}

.hero-btn.outline:hover {
    background: var(--clr-primary);
    color: #000;
}

/* ── Skills Ticker ── */
.skills-carousel {
    margin: 28px 0;
    overflow: hidden;
    padding: 8px 0;
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* Hardware-Accelerate Moving Layers (Zero Visual Change) */
.ticker-track,
.carousel-track {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    will-change: transform;
}

.skills-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: ticker 26s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    transform: translate3d(0, 0, 0);
}

.skills-track:hover {
    animation-play-state: paused;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: 40px;
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text);
    transition: var(--t-fast);
}

.skill-item i {
    color: var(--clr-primary);
    font-size: 1.1rem;
}

.skill-item:hover {
    border-color: var(--clr-primary);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px var(--clr-glow);
}

/* ============================================================
   07. SHARED SECTION STYLES & LAYOUT
   ============================================================ */

section,
.section-transition {
    padding: clamp(48px, 6vw, 70px) 20px;
    position: relative;
    scroll-margin-top: 96px;
}

/* Skip Off-Screen DOM Rendering with content-visibility (Zero Visual Change) */
section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: auto none auto 750px;
}

/* Ensure first section and active modal containers render immediately */
#home,
section:first-of-type,
section:has(.case-study-modal.active) {
    content-visibility: visible;
    contain-intrinsic-size: unset;
}

.container {
    width: min(100%, 1280px);
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* RESTORED UNIVERSAL SECTION CONTAINER (MATCHING REFERENCE IMAGE 3)
   Wraps every section in an elegant, elevated card container with consistent
   width, padding, border radius, and layered depth. */
.container.testimonial-card.glass-card,
.section-transition>.container.testimonial-card.glass-card,
section>.container.testimonial-card.glass-card {
    max-width: 1140px;
    width: min(100% - 40px, 1140px);
    margin: 0 auto;
    border-radius: 28px;
    padding: clamp(38px, 4.5vw, 56px) clamp(22px, 3.8vw, 48px);
    background: rgba(10, 16, 30, 0.78);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(0, 212, 255, 0.16);
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.85), 0 0 32px rgba(0, 212, 255, 0.05);
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-mid), box-shadow var(--t-mid);
}

.container.testimonial-card.glass-card:hover,
.section-transition>.container.testimonial-card.glass-card:hover,
section>.container.testimonial-card.glass-card:hover {
    border-color: rgba(0, 212, 255, 0.28);
    box-shadow: 0 28px 72px -12px rgba(0, 0, 0, 0.90), 0 0 40px rgba(0, 212, 255, 0.08);
}

/* Light Theme Container (Matching Reference Image 3: portfolioskens.vercel.app) */
[data-theme="light"] .container.testimonial-card.glass-card,
[data-theme="light"] .section-transition>.container.testimonial-card.glass-card,
[data-theme="light"] section>.container.testimonial-card.glass-card,
body.light-theme .container.testimonial-card.glass-card,
body.light-theme .section-transition>.container.testimonial-card.glass-card,
body.light-theme section>.container.testimonial-card.glass-card {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(0, 136, 204, 0.16) !important;
    box-shadow: 0 24px 60px -15px rgba(0, 30, 80, 0.09), 0 0 24px rgba(0, 136, 204, 0.04) !important;
}

[data-theme="light"] .container.testimonial-card.glass-card:hover,
[data-theme="light"] .section-transition>.container.testimonial-card.glass-card:hover,
[data-theme="light"] section>.container.testimonial-card.glass-card:hover,
body.light-theme .container.testimonial-card.glass-card:hover,
body.light-theme .section-transition>.container.testimonial-card.glass-card:hover,
body.light-theme section>.container.testimonial-card.glass-card:hover {
    border-color: rgba(0, 136, 204, 0.28) !important;
    box-shadow: 0 28px 68px -15px rgba(0, 30, 80, 0.13), 0 0 32px rgba(0, 136, 204, 0.08) !important;
}

/* High Contrast Theme Container */
body.high-contrast .container.testimonial-card.glass-card,
body.high-contrast .section-transition>.container.testimonial-card.glass-card,
body.high-contrast section>.container.testimonial-card.glass-card {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
}

/* Nested Inner Cards inside Section Container for Perfect Multi-Tiered Depth (Reference Image 3) */
[data-theme="light"] .container.testimonial-card.glass-card .grid-item,
[data-theme="light"] .container.testimonial-card.glass-card .tech-category,
[data-theme="light"] .container.testimonial-card.glass-card .timeline-card,
[data-theme="light"] .container.testimonial-card.glass-card .timeline-container,
[data-theme="light"] .container.testimonial-card.glass-card .routine-item,
[data-theme="light"] .container.testimonial-card.glass-card .habits-section,
[data-theme="light"] .container.testimonial-card.glass-card .habit-item,
[data-theme="light"] .container.testimonial-card.glass-card .goal-item,
[data-theme="light"] .container.testimonial-card.glass-card .service-card,
[data-theme="light"] .container.testimonial-card.glass-card .project-card,
[data-theme="light"] .container.testimonial-card.glass-card .portfolio-carousel,
[data-theme="light"] .container.testimonial-card.glass-card .opensource-card,
[data-theme="light"] .container.testimonial-card.glass-card .talk-card,
[data-theme="light"] .container.testimonial-card.glass-card .publication-card,
[data-theme="light"] .container.testimonial-card.glass-card .blog-card,
[data-theme="light"] .container.testimonial-card.glass-card .review-card,
[data-theme="light"] .container.testimonial-card.glass-card .timeline-content,
[data-theme="light"] .container.testimonial-card.glass-card .stat-box,
body.light-theme .container.testimonial-card.glass-card .grid-item,
body.light-theme .container.testimonial-card.glass-card .tech-category,
body.light-theme .container.testimonial-card.glass-card .timeline-card,
body.light-theme .container.testimonial-card.glass-card .timeline-container,
body.light-theme .container.testimonial-card.glass-card .routine-item,
body.light-theme .container.testimonial-card.glass-card .habits-section,
body.light-theme .container.testimonial-card.glass-card .habit-item,
body.light-theme .container.testimonial-card.glass-card .goal-item,
body.light-theme .container.testimonial-card.glass-card .service-card,
body.light-theme .container.testimonial-card.glass-card .project-card,
body.light-theme .container.testimonial-card.glass-card .portfolio-carousel,
body.light-theme .container.testimonial-card.glass-card .opensource-card,
body.light-theme .container.testimonial-card.glass-card .talk-card,
body.light-theme .container.testimonial-card.glass-card .publication-card,
body.light-theme .container.testimonial-card.glass-card .blog-card,
body.light-theme .container.testimonial-card.glass-card .review-card,
body.light-theme .container.testimonial-card.glass-card .timeline-content,
body.light-theme .container.testimonial-card.glass-card .stat-box {
    background: #ffffff !important;
    border: 1px solid rgba(0, 136, 204, 0.14) !important;
    box-shadow: 0 4px 18px rgba(0, 30, 80, 0.05) !important;
}

[data-theme="dark"] .container.testimonial-card.glass-card .grid-item,
[data-theme="dark"] .container.testimonial-card.glass-card .tech-category,
[data-theme="dark"] .container.testimonial-card.glass-card .timeline-card,
[data-theme="dark"] .container.testimonial-card.glass-card .timeline-container,
[data-theme="dark"] .container.testimonial-card.glass-card .routine-item,
[data-theme="dark"] .container.testimonial-card.glass-card .habits-section,
[data-theme="dark"] .container.testimonial-card.glass-card .habit-item,
[data-theme="dark"] .container.testimonial-card.glass-card .goal-item,
[data-theme="dark"] .container.testimonial-card.glass-card .service-card,
[data-theme="dark"] .container.testimonial-card.glass-card .project-card,
[data-theme="dark"] .container.testimonial-card.glass-card .portfolio-carousel,
[data-theme="dark"] .container.testimonial-card.glass-card .opensource-card,
[data-theme="dark"] .container.testimonial-card.glass-card .talk-card,
[data-theme="dark"] .container.testimonial-card.glass-card .publication-card,
[data-theme="dark"] .container.testimonial-card.glass-card .blog-card,
[data-theme="dark"] .container.testimonial-card.glass-card .review-card,
[data-theme="dark"] .container.testimonial-card.glass-card .timeline-content,
[data-theme="dark"] .container.testimonial-card.glass-card .stat-box,
.dark-theme .container.testimonial-card.glass-card .grid-item,
.dark-theme .container.testimonial-card.glass-card .tech-category,
.dark-theme .container.testimonial-card.glass-card .timeline-card,
.dark-theme .container.testimonial-card.glass-card .timeline-container,
.dark-theme .container.testimonial-card.glass-card .routine-item,
.dark-theme .container.testimonial-card.glass-card .habits-section,
.dark-theme .container.testimonial-card.glass-card .habit-item,
.dark-theme .container.testimonial-card.glass-card .goal-item,
.dark-theme .container.testimonial-card.glass-card .service-card,
.dark-theme .container.testimonial-card.glass-card .project-card,
.dark-theme .container.testimonial-card.glass-card .portfolio-carousel,
.dark-theme .container.testimonial-card.glass-card .opensource-card,
.dark-theme .container.testimonial-card.glass-card .talk-card,
.dark-theme .container.testimonial-card.glass-card .publication-card,
.dark-theme .container.testimonial-card.glass-card .blog-card,
.dark-theme .container.testimonial-card.glass-card .review-card,
.dark-theme .container.testimonial-card.glass-card .timeline-content,
.dark-theme .container.testimonial-card.glass-card .stat-box {
    background: rgba(16, 24, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40) !important;
}

/* Mission card inner banner */
[data-theme="light"] .container.testimonial-card.glass-card .p-lg.m-md.text-center,
body.light-theme .container.testimonial-card.glass-card .p-lg.m-md.text-center {
    background: rgba(0, 136, 204, 0.04) !important;
    border: 1px solid rgba(0, 136, 204, 0.16) !important;
    border-radius: 18px !important;
}

[data-theme="dark"] .container.testimonial-card.glass-card .p-lg.m-md.text-center,
.dark-theme .container.testimonial-card.glass-card .p-lg.m-md.text-center {
    background: rgba(0, 212, 255, 0.04) !important;
    border: 1px solid rgba(0, 212, 255, 0.14) !important;
    border-radius: 18px !important;
}

/* Standalone testimonial review cards retain card styling */
.testimonial-slider .testimonial-card,
.testimonial-card.review-card {
    background: var(--glass-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: clamp(22px, 3.2vw, 36px);
}

/* Headings */

.modern-heading,
.section-title {
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    font-size: var(--fs-3xl);
    text-align: center;
    margin-bottom: clamp(24px, 3.5vw, 42px);
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--text);
}

.modern-heading span,
.section-title span {
    margin-left: 0.25em;
    display: inline-block;
}

.section-title.nav-link,
.modern-heading.nav-link {
    padding: 0;
    min-height: 0;
    border-radius: 0;
    color: var(--text);
    white-space: normal;
    user-select: text;
    transition: none;
}

.text-gradient {
    background: var(--clr-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-shimmer {
    display: inline-block;
    background: linear-gradient(90deg,
            var(--clr-primary) 0%,
            var(--clr-magenta) 25%,
            #00ffc8 50%,
            var(--clr-magenta) 75%,
            var(--clr-primary) 100%);
    background-size: 200% auto;
    background-position: 0% center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: inherit;
    vertical-align: baseline;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: background-position;
    animation: shimmerBg 5s linear infinite;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: .84rem;
    color: var(--text-secondary);
    font-family: 'Fira Code', monospace;
}

.breadcrumb a:hover {
    color: var(--clr-primary);
}

.breadcrumb-separator {
    color: var(--text-muted);
}

/* Elegant body copy & section descriptions */
.elegant-text,
p.des,
.des,
.mission-text,
.grid-item p,
.timeline-desc,
.routine-item p,
.routine-summary,
.habit-item span,
.passion-item span,
.project-desc,
.repo-description,
.stat-label,
.talk-card p.elegant-text,
.blog-desc,
.testimonial-text,
.section-desc {
    color: var(--text-desc, var(--text-secondary));
    line-height: 1.72;
}

[data-theme="light"] .elegant-text,
[data-theme="light"] p.des,
[data-theme="light"] .des,
[data-theme="light"] .mission-text,
[data-theme="light"] .grid-item p,
[data-theme="light"] .timeline-desc,
[data-theme="light"] .routine-item p,
[data-theme="light"] .routine-summary,
[data-theme="light"] .habit-item span,
[data-theme="light"] .passion-item span,
[data-theme="light"] .project-desc,
[data-theme="light"] .repo-description,
[data-theme="light"] .talk-card p,
[data-theme="light"] .blog-desc,
[data-theme="light"] .testimonial-text,
[data-theme="light"] .section-desc,
[data-theme="light"] .stat-label,
[data-theme="light"] .highlight-chip,
[data-theme="light"] .vision-statement p,
[data-theme="light"] .service-card p,
[data-theme="light"] .opensource-card p,
[data-theme="light"] .opensource-card span,
body.light-theme .elegant-text,
body.light-theme p.des,
body.light-theme .des,
body.light-theme .mission-text,
body.light-theme .grid-item p,
body.light-theme .timeline-desc,
body.light-theme .routine-item p,
body.light-theme .routine-summary,
body.light-theme .habit-item span,
body.light-theme .passion-item span,
body.light-theme .project-desc,
body.light-theme .repo-description,
body.light-theme .talk-card p,
body.light-theme .blog-desc,
body.light-theme .testimonial-text,
body.light-theme .section-desc,
body.light-theme .stat-label,
body.light-theme .highlight-chip,
body.light-theme .vision-statement p,
body.light-theme .service-card p,
body.light-theme .opensource-card p,
body.light-theme .opensource-card span {
    color: #000000 !important;
}

[data-theme="dark"] .elegant-text,
[data-theme="dark"] p.des,
[data-theme="dark"] .des,
[data-theme="dark"] .mission-text,
[data-theme="dark"] .grid-item p,
[data-theme="dark"] .timeline-desc,
[data-theme="dark"] .routine-item p,
[data-theme="dark"] .routine-summary,
[data-theme="dark"] .habit-item span,
[data-theme="dark"] .passion-item span,
[data-theme="dark"] .project-desc,
[data-theme="dark"] .repo-description,
[data-theme="dark"] .talk-card p,
[data-theme="dark"] .blog-desc,
[data-theme="dark"] .testimonial-text,
[data-theme="dark"] .section-desc,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .highlight-chip,
[data-theme="dark"] .vision-statement p,
[data-theme="dark"] .service-card p,
[data-theme="dark"] .opensource-card p,
[data-theme="dark"] .opensource-card span,
body.dark-theme .elegant-text,
body.dark-theme p.des,
body.dark-theme .des,
body.dark-theme .mission-text,
body.dark-theme .grid-item p,
body.dark-theme .timeline-desc,
body.dark-theme .routine-item p,
body.dark-theme .routine-summary,
body.dark-theme .habit-item span,
body.dark-theme .passion-item span,
body.dark-theme .project-desc,
body.dark-theme .repo-description,
body.dark-theme .talk-card p,
body.dark-theme .blog-desc,
body.dark-theme .testimonial-text,
body.dark-theme .section-desc,
body.dark-theme .stat-label,
body.dark-theme .highlight-chip,
body.dark-theme .vision-statement p,
body.dark-theme .service-card p,
body.dark-theme .opensource-card p,
body.dark-theme .opensource-card span {
    color: #cbd5e1 !important;
}

/* ── Glass card ── */
.glass-card,
.interactive-card,
.testimonial-card {
    background: var(--glass-bg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: border-color var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid);
    position: relative;
    overflow: hidden;
}

.interactive-card,
.grid-item,
.service-card,
.project-card,
.stat-card,
.stat-box,
.opensource-card,
.talk-card,
.routine-item,
.goal-item,
.tech-item,
.blog-card,
.review-card {
    will-change: transform;
}

.glass-card:hover {
    border-color: var(--c-border-glow);
    box-shadow: 0 18px 48px -8px rgba(0, 212, 255, .22);
}

/* Holographic shimmer layer */
.glass-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    z-index: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, transparent 50%, rgba(0, 212, 255, .04) 100%);
    pointer-events: none;
}

/* Stagger animation helper */
.stagger-animation>* {
    animation: fadeUp .6s var(--ease-spring) both;
}

.stagger-animation>*:nth-child(1) {
    animation-delay: .05s;
}

.stagger-animation>*:nth-child(2) {
    animation-delay: .12s;
}

.stagger-animation>*:nth-child(3) {
    animation-delay: .19s;
}

.stagger-animation>*:nth-child(4) {
    animation-delay: .26s;
}

.stagger-animation>*:nth-child(5) {
    animation-delay: .33s;
}

.stagger-animation>*:nth-child(n+6) {
    animation-delay: .40s;
}

/* Fade-in utility */
.fade-in {
    animation: fadeUp .7s var(--ease-spring) both;
}

/* Image zoom wrapper */
.image-hover-zoom {
    overflow: hidden;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--c-surface-solid, rgba(255, 255, 255, 0.02));
    position: relative;
    contain: paint;
}

.image-hover-zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    display: block;
    transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1), filter .4s ease;
    will-change: transform;
}

.image-hover-zoom:hover img {
    transform: scale(1.06);
}

.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ensure images inside aspect-ratio / carousel containers fill their space */
.image-hover-zoom .responsive-img,
.carousel-track .responsive-img,
.swiper-slide .responsive-img {
    height: 100%;
}

.author-avatar.responsive-img {
    height: 100%;
    max-width: none;
}

/* Image blur-up loading */
img {
    transition: filter .35s ease, opacity .35s ease;
}

img.blur-load {
    filter: blur(20px);
    opacity: 0;
}

img.loaded {
    filter: blur(0);
    opacity: 1;
}

/* ============================================================
   08. ABOUT ME & BENTO GRID
   ============================================================ */
.about-mission-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    margin-bottom: 26px;
    border-radius: 18px;
    border: 1px solid rgba(0, 212, 255, 0.18);
    background: rgba(0, 212, 255, 0.04);
}

.mission-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(0, 212, 255, 0.14);
    border: 1px solid rgba(0, 212, 255, 0.28);
    color: var(--clr-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

.mission-text {
    font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem);
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

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

.grid-item {
    padding: 24px;
    border-radius: var(--card-radius);
    background: var(--glass-bg);
    border: var(--glass-border);
    display: flex;
    flex-direction: column;
    transition: var(--t-mid);
}

.grid-item:hover {
    border-color: var(--c-border-glow);
    transform: translateY(-3px);
}

.grid-item-large {
    grid-column: span 2;
}

.card-header-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.card-icon-pill {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(0, 212, 255, 0.10);
    border: 1px solid rgba(0, 212, 255, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.grid-item h3 {
    font-size: clamp(1.08rem, 1.02rem + 0.25vw, 1.25rem);
    margin: 0;
    font-weight: 600;
}

.grid-item p {
    color: var(--text-desc, var(--text-secondary));
    font-size: clamp(0.88rem, 0.84rem + 0.14vw, 0.95rem);
    line-height: 1.70;
    margin-bottom: 12px;
}

.grid-item p:last-of-type {
    margin-bottom: 0;
}

.journey-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.highlight-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.76rem;
    color: var(--text-secondary);
}

.highlight-chip i {
    color: var(--clr-primary);
    font-size: 0.82rem;
}

.passions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.passion-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.passion-item i {
    color: var(--clr-primary);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.passion-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.passion-item strong {
    font-size: 0.84rem;
    color: var(--text);
}

.passion-item span {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.about-cta-card {
    justify-content: space-between;
}

.about-cta-btn-wrap {
    margin-top: 16px;
}

/* Skills tags */
.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
}

.skill-tag {
    background: rgba(0, 212, 255, .08);
    padding: 5px 12px;
    border-radius: 16px;
    font-size: .78rem;
    color: var(--clr-primary);
    font-weight: 500;
    border: 1px solid rgba(0, 212, 255, .20);
    transition: var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.skill-tag:hover {
    background: var(--clr-primary);
    color: #000;
    box-shadow: 0 0 14px var(--clr-glow);
}

/* Streamlined Timeline */
.timeline-container {
    margin-top: 28px;
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--card-radius);
}

.timeline-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.timeline-header h3 {
    margin: 0;
    font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.35rem);
    font-weight: 600;
}

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.timeline-card {
    padding: 20px 22px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    border-top: 2px solid var(--clr-primary);
}

.timeline-badge {
    display: inline-block;
    color: var(--clr-primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-family: 'Fira Code', monospace;
}

.timeline-card h4 {
    font-size: 1rem;
    margin-bottom: 4px;
    color: var(--text);
}

.timeline-role {
    font-size: 0.84rem;
    color: var(--clr-primary-lt);
    font-weight: 500;
    margin-bottom: 8px !important;
}

.timeline-desc {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    color: var(--text-secondary);
    margin: 0 !important;
}

/* ============================================================
   09. DAILY ROUTINE & FUTURE GOALS
   ============================================================ */
.routine-intro {
    max-width: 660px;
    margin: 0 auto 32px;
}

.routine-summary {
    font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem);
    line-height: 1.65;
    margin: 0;
}

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

.routine-item {
    padding: 22px 24px;
    border-radius: var(--card-radius);
    background: var(--glass-bg);
    border: var(--glass-border);
    display: flex;
    flex-direction: column;
    transition: var(--t-mid);
    border-top: 3px solid rgba(0, 212, 255, 0.5);
}

.routine-item:hover {
    border-color: var(--c-border-glow);
    border-top-color: var(--clr-primary);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -6px var(--clr-glow);
}

.routine-item-wide {
    grid-column: span 3;
}

.routine-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.routine-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 14px;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.25);
    color: var(--clr-primary);
    font-size: 0.74rem;
    font-weight: 700;
    font-family: 'Fira Code', monospace;
    letter-spacing: 0.4px;
}

.routine-badge.focus-badge {
    background: rgba(136, 85, 255, 0.14);
    border-color: rgba(136, 85, 255, 0.32);
    color: #b388ff;
}

.routine-icon-pill {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-primary);
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: var(--t-fast);
}

.routine-item:hover .routine-icon-pill {
    background: rgba(0, 212, 255, 0.14);
    color: var(--clr-primary);
    transform: scale(1.08);
}

.routine-item h3 {
    margin: 0 0 8px 0;
    font-size: clamp(1.02rem, 0.98rem + 0.18vw, 1.15rem);
    font-weight: 600;
    color: var(--text);
}

.routine-item p {
    color: var(--text-secondary);
    font-size: clamp(0.85rem, 0.82rem + 0.12vw, 0.92rem);
    line-height: 1.62;
    margin: 0;
}

.habits-section {
    padding: clamp(22px, 3.5vw, 32px);
    margin-top: 30px;
    border-radius: var(--card-radius);
    background: var(--glass-bg);
    border: var(--glass-border);
}

.habits-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.habits-header h3 {
    margin: 0 0 2px 0;
    font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.35rem);
    font-weight: 600;
}

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

.habit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .03);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .06);
    transition: var(--t-fast);
}

.habit-item:hover {
    background: rgba(0, 212, 255, .07);
    border-color: rgba(0, 212, 255, 0.28);
    transform: translateY(-2px);
}

.habit-item i {
    color: var(--clr-primary);
    font-size: 1.05rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.habit-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.habit-item strong {
    font-size: 0.88rem;
    color: var(--text);
    font-weight: 600;
}

.habit-item span {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.goals-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.goal-period h3 {
    font-size: var(--fs-xl);
    margin-bottom: 18px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: 10px;
}

.goals-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.goal-item.glass-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-left: 3px solid var(--clr-primary);
    transition: var(--t-fast);
}

.goal-item.glass-card:hover {
    background: rgba(0, 212, 255, .06);
}

.goal-item i {
    color: var(--clr-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.goal-item span {
    font-size: .92rem;
}

.vision-statement {
    padding: var(--sp-lg);
    margin-top: 32px;
    text-align: center;
}

.vision-statement h3 {
    font-size: var(--fs-xl);
    margin-bottom: 14px;
}

.vision-statement p {
    font-size: var(--fs-lg);
    line-height: 1.80;
    font-style: italic;
    color: var(--text-secondary);
}

/* ============================================================
   10. TECH STACK & AI ECOSYSTEM
   ============================================================ */
.tech-stack-intro {
    max-width: 660px;
    margin: 0 auto 32px;
}

.tech-stack-summary {
    font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem);
    line-height: 1.65;
    margin: 0;
}

/* ============================================================
   AI MODELS & AUTONOMOUS AGENTS SLIDING STRIP
   ============================================================ */
.ai-strip-container {
    margin-bottom: 30px;
    padding: 24px 22px 26px;
    border-radius: var(--card-radius);
    background: var(--glass-bg);
    border: var(--glass-border);
    position: relative;
    overflow: hidden;
    transition: var(--t-mid);
}

.ai-strip-container:hover {
    border-color: rgba(0, 212, 255, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 212, 255, 0.1);
}

.ai-strip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-strip-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--clr-primary);
}

.ai-live-badge i {
    animation: pulseGlow 2s infinite ease-in-out;
}

.ai-strip-title h3 {
    margin: 0;
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.2px;
}

.ai-strip-sub {
    font-size: 0.76rem;
    font-family: 'Fira Code', monospace;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Infinite Marquee Track */
.ai-marquee-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    padding: 6px 0;
}

.ai-marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: marqueeScroll 45s linear infinite;
    will-change: transform;
}

.ai-marquee-wrapper:hover .ai-marquee-track {
    animation-play-state: paused;
}

@keyframes marqueeScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Individual Agent Card */
.ai-agent-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    white-space: nowrap;
    user-select: none;
    cursor: default;
    transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    flex-shrink: 0;
}

.ai-agent-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.4);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 212, 255, 0.15);
}

.ai-agent-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.ai-agent-item:hover .ai-agent-icon {
    transform: scale(1.14) rotate(4deg);
}

.ai-agent-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.ai-agent-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.2px;
}

.ai-agent-creator {
    font-size: 0.68rem;
    color: var(--text-secondary);
    font-family: 'Fira Code', monospace;
    opacity: 0.85;
}

/* Distinct Authentic Brand Identities for AI Agents */
.icon-claude {
    background: rgba(217, 119, 87, 0.14);
    color: #D97757;
    border: 1px solid rgba(217, 119, 87, 0.3);
}

.icon-gpt {
    background: rgba(16, 163, 127, 0.14);
    color: #10A37F;
    border: 1px solid rgba(16, 163, 127, 0.3);
}

.icon-deepseek {
    background: rgba(77, 107, 254, 0.14);
    color: #4D6BFE;
    border: 1px solid rgba(77, 107, 254, 0.3);
}

.icon-antigravity {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.2), rgba(234, 67, 53, 0.2));
    color: #00D4FF;
    border: 1px solid rgba(0, 212, 255, 0.4);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.25);
}

.icon-gemini {
    background: rgba(59, 130, 246, 0.14);
    color: #38BDF8;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.icon-cursor {
    background: rgba(255, 255, 255, 0.08);
    color: #00E5FF;
    border: 1px solid rgba(0, 229, 255, 0.3);
}

.icon-copilot {
    background: rgba(94, 234, 212, 0.14);
    color: #5EEAD4;
    border: 1px solid rgba(94, 234, 212, 0.3);
}

.icon-perplexity {
    background: rgba(32, 180, 180, 0.14);
    color: #20B4B4;
    border: 1px solid rgba(32, 180, 180, 0.3);
}

.icon-midjourney {
    background: rgba(168, 85, 247, 0.14);
    color: #C084FC;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.icon-grok {
    background: rgba(255, 255, 255, 0.10);
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.icon-mistral {
    background: rgba(255, 112, 0, 0.14);
    color: #FF7000;
    border: 1px solid rgba(255, 112, 0, 0.3);
}

.icon-llama {
    background: rgba(0, 129, 251, 0.14);
    color: #0081FB;
    border: 1px solid rgba(0, 129, 251, 0.3);
}

.icon-langchain {
    background: rgba(34, 211, 238, 0.14);
    color: #22D3EE;
    border: 1px solid rgba(34, 211, 238, 0.3);
}

.icon-autogpt {
    background: rgba(244, 63, 94, 0.14);
    color: #F43F5E;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.icon-huggingface {
    background: rgba(255, 210, 30, 0.14);
    color: #FFD21E;
    border: 1px solid rgba(255, 210, 30, 0.3);
}

.icon-crewai {
    background: rgba(245, 158, 11, 0.14);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.icon-cohere {
    background: rgba(57, 91, 100, 0.18);
    color: #395B64;
    border: 1px solid rgba(57, 91, 100, 0.3);
}

.icon-elevenlabs {
    background: rgba(236, 72, 153, 0.14);
    color: #EC4899;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.icon-runway {
    background: rgba(14, 165, 233, 0.14);
    color: #0EA5E9;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.icon-sora {
    background: rgba(239, 68, 68, 0.14);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.icon-whisper {
    background: rgba(139, 92, 246, 0.14);
    color: #8B5CF6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.icon-qwen {
    background: rgba(99, 102, 241, 0.14);
    color: #6366F1;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.icon-stablediffusion {
    background: rgba(236, 72, 153, 0.14);
    color: #F472B6;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.icon-devin {
    background: rgba(16, 185, 129, 0.14);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Light Theme Adaptability for AI Strip */
[data-theme="light"] .ai-strip-container,
body.light-theme .ai-strip-container {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .ai-strip-header,
body.light-theme .ai-strip-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .ai-strip-sub,
body.light-theme .ai-strip-sub {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #64748B !important;
}

[data-theme="light"] .ai-agent-item,
body.light-theme .ai-agent-item {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .ai-agent-item:hover,
body.light-theme .ai-agent-item:hover {
    background: #ffffff !important;
    border-color: rgba(0, 136, 204, 0.35) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .ai-agent-name,
body.light-theme .ai-agent-name {
    color: #0F172A !important;
}

[data-theme="light"] .icon-grok {
    background: rgba(15, 23, 42, 0.08);
    color: #0F172A;
    border: 1px solid rgba(15, 23, 42, 0.2);
}

.tech-stack-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tech-category {
    padding: 24px;
    border-radius: var(--card-radius);
    background: var(--glass-bg);
    border: var(--glass-border);
    display: flex;
    flex-direction: column;
    transition: var(--t-mid);
}

.tech-category:hover {
    border-color: var(--c-border-glow);
    transform: translateY(-3px);
}

.tech-cat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tech-cat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0, 212, 255, 0.10);
    border: 1px solid rgba(0, 212, 255, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tech-cat-header h3 {
    font-size: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
    margin: 0 0 2px 0;
    font-weight: 600;
    color: var(--text);
}

.tech-cat-sub {
    font-size: 0.74rem;
    color: var(--text-secondary);
    display: block;
    font-family: 'Fira Code', monospace;
    letter-spacing: 0.2px;
}

.tech-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    background: rgba(255, 255, 255, .03);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .06);
    aspect-ratio: 1 / 1;
    min-height: 78px;
    transition: var(--t-mid);
    position: relative;
    user-select: none;
    touch-action: manipulation;
}

.tech-item:hover {
    background: rgba(0, 212, 255, .08);
    border-color: var(--clr-primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px -4px var(--clr-glow);
}

.tech-item:active {
    transform: scale(0.96);
}

.tech-item i {
    font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
    color: var(--clr-primary);
    transition: transform .3s ease;
}

.tech-item:hover i {
    transform: scale(1.12);
}

.tech-item span {
    font-size: clamp(.68rem, .65rem + .2vw, .76rem);
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
}

.tech-item img {
    width: 2.2rem;
    height: 2.2rem;
    object-fit: contain;
}

[data-theme="light"] .tech-item,
body.light-theme .tech-item {
    background: rgba(0, 136, 204, 0.03);
    border: 1px solid rgba(0, 136, 204, 0.12);
}

[data-theme="light"] .tech-item:hover,
body.light-theme .tech-item:hover {
    background: rgba(0, 136, 204, 0.08);
    border-color: rgba(0, 136, 204, 0.35);
}

[data-theme="light"] .tech-item span,
body.light-theme .tech-item span {
    color: #475569;
}

/* ============================================================
   AUTHENTIC BRAND COLOR SYSTEM FOR TECHNOLOGY STACK & SKILLS
   ============================================================ */
/* React */
.tech-item[data-tooltip*="React"] i,
.skill-item:has(span:contains("React")) i,
.skills-track .skill-item:nth-child(1) i,
.skills-track .skill-item:nth-child(7) i,
.tech-item .fa-react {
    color: #61DAFB !important;
    filter: drop-shadow(0 0 6px rgba(97, 218, 251, 0.4));
}

/* Next.js & JavaScript */
.tech-item[data-tooltip*="Next"] i,
.tech-item .fa-js-square {
    color: #ffffff !important;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

[data-theme="light"] .tech-item[data-tooltip*="Next"] i,
[data-theme="light"] .tech-item .fa-js-square {
    color: #111827 !important;
    filter: none;
}

.tech-item[data-tooltip*="JavaScript"] i,
.skill-item:has(span:contains("JavaScript")) i,
.skills-track .skill-item:nth-child(5) i,
.skills-track .skill-item:nth-child(11) i,
.tech-item .fa-js {
    color: #F7DF1E !important;
    filter: drop-shadow(0 0 6px rgba(247, 223, 30, 0.4));
}

/* TypeScript */
.tech-item[data-tooltip*="TypeScript"] i {
    color: #3178C6 !important;
    filter: drop-shadow(0 0 6px rgba(49, 120, 198, 0.4));
}

/* Tailwind CSS */
.tech-item[data-tooltip*="Tailwind"] i {
    color: #06B6D4 !important;
    filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.4));
}

/* HTML5 & CSS3 */
.tech-item[data-tooltip*="HTML"] i,
.tech-item .fa-html5 {
    color: #E34F26 !important;
    filter: drop-shadow(0 0 6px rgba(227, 79, 38, 0.4));
}

.tech-item .fa-css3-alt {
    color: #1572B6 !important;
    filter: drop-shadow(0 0 6px rgba(21, 114, 182, 0.4));
}

/* Three.js / 3D */
.tech-item[data-tooltip*="Three"] i {
    color: #A855F7 !important;
    filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.4));
}

/* Node.js */
.tech-item[data-tooltip*="Node"] i,
.skill-item:has(span:contains("Node")) i,
.skills-track .skill-item:nth-child(2) i,
.skills-track .skill-item:nth-child(8) i,
.tech-item .fa-node-js {
    color: #68A063 !important;
    filter: drop-shadow(0 0 6px rgba(104, 160, 99, 0.4));
}

/* Python */
.tech-item[data-tooltip*="Python"] i,
.skill-item:has(span:contains("Python")) i,
.skills-track .skill-item:nth-child(3) i,
.skills-track .skill-item:nth-child(9) i,
.tech-item .fa-python {
    color: #3776AB !important;
    filter: drop-shadow(0 0 6px rgba(55, 118, 171, 0.4));
}

/* Express.js */
.tech-item[data-tooltip*="Express"] i {
    color: #E2E8F0 !important;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}

[data-theme="light"] .tech-item[data-tooltip*="Express"] i {
    color: #1E293B !important;
    filter: none;
}

/* FastAPI */
.tech-item[data-tooltip*="FastAPI"] i {
    color: #009688 !important;
    filter: drop-shadow(0 0 6px rgba(0, 150, 136, 0.4));
}

/* REST & WebSockets */
.tech-item[data-tooltip*="REST"] i {
    color: #00D4FF !important;
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.4));
}

.tech-item[data-tooltip*="WebSocket"] i {
    color: #EC4899 !important;
    filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.4));
}

/* MongoDB */
.tech-item[data-tooltip*="MongoDB"] i,
.skill-item:has(span:contains("MongoDB")) i,
.skills-track .skill-item:nth-child(4) i,
.skills-track .skill-item:nth-child(10) i,
.tech-item .fa-leaf {
    color: #47A248 !important;
    filter: drop-shadow(0 0 6px rgba(71, 162, 72, 0.4));
}

/* PostgreSQL */
.tech-item[data-tooltip*="PostgreSQL"] i {
    color: #4169E1 !important;
    filter: drop-shadow(0 0 6px rgba(65, 105, 225, 0.4));
}

/* Redis */
.tech-item[data-tooltip*="Redis"] i {
    color: #DC382D !important;
    filter: drop-shadow(0 0 6px rgba(220, 56, 45, 0.4));
}

/* MySQL */
.tech-item[data-tooltip*="MySQL"] i {
    color: #00758F !important;
    filter: drop-shadow(0 0 6px rgba(0, 117, 143, 0.4));
}

/* Prisma */
.tech-item[data-tooltip*="Prisma"] i {
    color: #2D3748 !important;
}

[data-theme="dark"] .tech-item[data-tooltip*="Prisma"] i,
body:not([data-theme="light"]):not(.light-theme) .tech-item[data-tooltip*="Prisma"] i {
    color: #5A67D8 !important;
    filter: drop-shadow(0 0 6px rgba(90, 103, 216, 0.4));
}

/* Firebase / Firestore */
.tech-item[data-tooltip*="Firestore"] i,
.tech-item[data-tooltip*="Firebase"] i {
    color: #FFCA28 !important;
    filter: drop-shadow(0 0 6px rgba(255, 202, 40, 0.4));
}

/* AWS */
.tech-item[data-tooltip*="AWS"] i,
.tech-item[data-tooltip*="Amazon"] i,
.skill-item:has(span:contains("AWS")) i,
.skills-track .skill-item:nth-child(6) i,
.skills-track .skill-item:nth-child(12) i,
.tech-item .fa-aws {
    color: #FF9900 !important;
    filter: drop-shadow(0 0 6px rgba(255, 153, 0, 0.4));
}

/* Docker */
.tech-item[data-tooltip*="Docker"] i,
.tech-item .fa-docker {
    color: #2496ED !important;
    filter: drop-shadow(0 0 6px rgba(36, 150, 237, 0.4));
}

/* Kubernetes */
.tech-item[data-tooltip*="Kubernetes"] i {
    color: #326CE5 !important;
    filter: drop-shadow(0 0 6px rgba(50, 108, 229, 0.4));
}

/* CI/CD / GitHub */
.tech-item[data-tooltip*="GitHub"] i,
.tech-item .fa-github {
    color: #F0F6FC !important;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

[data-theme="light"] .tech-item[data-tooltip*="GitHub"] i,
[data-theme="light"] .tech-item .fa-github {
    color: #1F2937 !important;
    filter: none;
}

/* Edge CDN / Cloudflare */
.tech-item[data-tooltip*="Edge"] i,
.tech-item[data-tooltip*="Cloudflare"] i {
    color: #F38020 !important;
    filter: drop-shadow(0 0 6px rgba(243, 128, 32, 0.4));
}

/* Linux */
.tech-item[data-tooltip*="Linux"] i,
.tech-item .fa-linux {
    color: #FCC624 !important;
    filter: drop-shadow(0 0 6px rgba(252, 198, 36, 0.4));
}

/* TensorFlow */
.tech-item[data-tooltip*="TensorFlow"] i {
    color: #FF6F00 !important;
    filter: drop-shadow(0 0 6px rgba(255, 111, 0, 0.4));
}

/* PyTorch */
.tech-item[data-tooltip*="PyTorch"] i {
    color: #EE4C2C !important;
    filter: drop-shadow(0 0 6px rgba(238, 76, 44, 0.4));
}

/* OpenAI */
.tech-item[data-tooltip*="OpenAI"] i {
    color: #10A37F !important;
    filter: drop-shadow(0 0 6px rgba(16, 163, 127, 0.4));
}

/* LangChain */
.tech-item[data-tooltip*="LangChain"] i {
    color: #1C3C3C !important;
}

[data-theme="dark"] .tech-item[data-tooltip*="LangChain"] i,
body:not([data-theme="light"]):not(.light-theme) .tech-item[data-tooltip*="LangChain"] i {
    color: #22D3EE !important;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.4));
}

/* Hugging Face / Transformers */
.tech-item[data-tooltip*="Hugging"] i,
.tech-item[data-tooltip*="Transformers"] i {
    color: #FFD21E !important;
    filter: drop-shadow(0 0 6px rgba(255, 210, 30, 0.4));
}

/* Vector DB */
.tech-item[data-tooltip*="Vector"] i {
    color: #8B5CF6 !important;
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.4));
}

/* Git */
.tech-item[data-tooltip*="Git"] i,
.tech-item .fa-git-alt {
    color: #F05032 !important;
    filter: drop-shadow(0 0 6px rgba(240, 80, 50, 0.4));
}

/* Figma */
.tech-item[data-tooltip*="Figma"] i,
.tech-item .fa-figma {
    color: #F24E1E !important;
    filter: drop-shadow(0 0 6px rgba(242, 78, 30, 0.4));
}

/* Postman */
.tech-item[data-tooltip*="Postman"] i {
    color: #FF6C37 !important;
    filter: drop-shadow(0 0 6px rgba(255, 108, 55, 0.4));
}

/* VS Code */
.tech-item[data-tooltip*="VS Code"] i {
    color: #007ACC !important;
    filter: drop-shadow(0 0 6px rgba(0, 122, 204, 0.4));
}

/* npm */
.tech-item[data-tooltip*="npm"] i,
.tech-item .fa-npm {
    color: #CB3837 !important;
    filter: drop-shadow(0 0 6px rgba(203, 56, 55, 0.4));
}

/* Vite */
.tech-item[data-tooltip*="Vite"] i {
    color: #BD34FE !important;
    filter: drop-shadow(0 0 6px rgba(189, 52, 254, 0.4));
}

/* Light Theme subtle background tuning for tech-items to highlight rich colors */
[data-theme="light"] .tech-item,
body.light-theme .tech-item {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .tech-item:hover,
body.light-theme .tech-item:hover {
    background: #ffffff !important;
    border-color: rgba(0, 136, 204, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Tooltip */
.tech-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-surface-solid);
    color: var(--text);
    font-size: .74rem;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--c-border);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .2s ease;
}

.tech-item[data-tooltip]:hover::after {
    opacity: 1;
}

/* ============================================================
   11. SERVICES & OFFERINGS
   ============================================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 22px;
}

.service-card,
.service-link .service-card {
    padding: 28px 22px;
    text-align: center;
    border-radius: var(--card-radius);
    background: var(--glass-bg);
    border: var(--glass-border);
    border-bottom: 3px solid var(--clr-primary);
    transition: var(--t-mid);
}

.service-card:hover {
    transform: translateY(-4px);
    border-bottom-color: var(--clr-magenta);
    box-shadow: 0 14px 34px -6px var(--clr-glow);
}

.service-card i {
    font-size: 3rem;
    margin-bottom: 18px;
    background: var(--clr-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-card h3 {
    font-size: var(--fs-xl);
    margin-bottom: 10px;
}

.service-card p {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.70;
}

.service-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Trust badges */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    width: min(100%, 900px);
    margin: 36px auto 0;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: 40px;
    font-size: .88rem;
    font-weight: 500;
    transition: var(--t-fast);
}

.trust-badge:hover {
    border-color: var(--clr-primary);
}

.badge-icon {
    color: var(--clr-primary);
    font-size: 1.1rem;
}

/* ============================================================
   12. FEATURED PROJECTS & PORTFOLIO
   ============================================================ */
.projects-intro {
    max-width: 660px;
    margin: 0 auto 30px;
}

.projects-summary {
    font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem);
    line-height: 1.65;
    margin: 0;
}

/* Filter pills */
.project-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.filter-btn {
    min-height: 42px;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 30px;
    color: #e2e8f0;
    font-size: .88rem;
    font-weight: 500;
    transition: var(--t-mid);
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.filter-btn:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--clr-primary);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.35);
    transform: translateY(-2px);
}

.filter-btn.active {
    background: var(--clr-grad);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px var(--clr-glow);
    font-weight: 600;
    transform: translateY(-2px);
}

[data-theme="light"] .filter-btn {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.14);
    color: #1e293b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .filter-btn:hover {
    background: rgba(0, 212, 255, 0.12);
    border-color: var(--clr-primary);
    color: #0f172a;
}

[data-theme="light"] .filter-btn.active {
    background: var(--clr-grad);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 16px var(--clr-glow);
}

/* Swiper / Embla carousel */
.portfolio-carousel {
    border-radius: var(--card-radius);
    overflow: hidden;
    margin-bottom: 38px;
    border: var(--glass-border);
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
    position: relative;
    width: 100%;
}

/* Embla root viewport - strict 16:9 container */
.embla,
.swiper {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    max-height: 520px;
    background: var(--c-surface-solid, rgba(10, 15, 28, 0.4));
}

/* Slide container (runs GPU transform) */
.embla__container,
.swiper-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

/* Individual slide */
.embla__slide,
.swiper-slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    background: var(--c-surface-solid, rgba(255, 255, 255, 0.02));
    contain: paint;
}

.embla__slide img,
.swiper-slide img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}

.embla__slide:hover img,
.swiper-slide:hover img {
    transform: scale(1.04);
}

.slide-content {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(24px, 5vw, 44px) clamp(18px, 4vw, 32px) clamp(18px, 3.5vw, 28px);
    background: linear-gradient(180deg, transparent 0%, rgba(4, 6, 15, .55) 30%, rgba(4, 6, 15, .94) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    z-index: 2;
}

.slide-title {
    font-size: clamp(1.2rem, 1.1rem + 0.8vw, 1.8rem);
    margin: 0;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.slide-desc {
    font-size: clamp(0.85rem, 0.8rem + 0.25vw, 0.98rem);
    color: rgba(255, 255, 255, 0.86);
    margin: 0 0 12px 0;
    max-width: 680px;
    line-height: 1.5;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.slide-content .cta-button {
    font-size: 0.85rem;
    padding: 10px 22px;
    height: auto;
    min-height: 40px;
    min-width: 140px;
    box-shadow: 0 4px 18px rgba(0, 212, 255, 0.45);
    font-weight: 600;
}

.embla__prev,
.embla__next,
.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #ffffff !important;
    background: rgba(10, 15, 28, 0.75) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 212, 255, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 10px rgba(0, 212, 255, 0.2);
    transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.embla__prev:hover,
.embla__next:hover,
.swiper-button-next:hover,
.swiper-button-prev:hover {
    border-color: var(--clr-primary) !important;
    background: rgba(0, 212, 255, 0.25) !important;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px var(--clr-glow);
}

.embla__prev,
.swiper-button-prev {
    left: 18px;
}

.embla__next,
.swiper-button-next {
    right: 18px;
}

.embla__prev::after,
.swiper-button-prev::after {
    content: "\f053";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    color: var(--clr-primary);
}

.embla__next::after,
.swiper-button-next::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    color: var(--clr-primary);
}

.embla__dots,
.swiper-pagination {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.embla__dot,
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary) !important;
    opacity: .55 !important;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform var(--t-fast), opacity var(--t-fast), background var(--t-fast);
}

.embla__dot--selected,
.swiper-pagination-bullet-active {
    background: var(--clr-primary) !important;
    opacity: 1 !important;
    transform: scale(1.25);
    box-shadow: 0 0 8px var(--clr-glow);
}

/* Project cards */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.project-card {
    border-radius: var(--card-radius);
    overflow: hidden;
    background: var(--glass-bg);
    border: var(--glass-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
    position: relative;
    box-shadow: var(--glass-shadow);
}

.project-card:hover {
    transform: translateY(-6px);
    border-color: var(--c-border-glow);
    box-shadow: 0 20px 40px -10px rgba(0, 212, 255, .22);
}

/* Strict 16:9 Image Container */
.image-hover-zoom {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--c-surface-solid, rgba(15, 23, 42, 0.6));
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.project-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(10, 15, 28, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 212, 255, 0.4);
    color: var(--clr-primary);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Fira Code', monospace;
    letter-spacing: 0.4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.project-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-img {
    transform: scale(1.06);
}

.project-content {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.project-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-title {
    font-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
    font-weight: 600;
    margin: 0;
    color: var(--text);
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.project-desc {
    color: var(--text-secondary);
    font-size: clamp(0.86rem, 0.82rem + 0.12vw, 0.92rem);
    line-height: 1.62;
    flex: 1 1 auto;
    margin: 0;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 10px;
}

.tech-tag {
    background: rgba(0, 212, 255, .08);
    color: var(--clr-primary);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0, 212, 255, .18);
    font-size: .74rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--t-fast);
}

.tech-tag:hover {
    background: rgba(0, 212, 255, .16);
    border-color: var(--clr-primary);
    transform: translateY(-1px);
}

.project-links {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .project-links {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.project-btn {
    flex: 1;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--t-fast);
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.project-btn:hover {
    background: rgba(0, 212, 255, 0.18);
    border-color: var(--clr-primary);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.3);
    transform: translateY(-2px);
}

.project-btn.primary-btn {
    background: linear-gradient(135deg, #00d4ff 0%, #3a7bd5 100%);
    border: 1px solid rgba(0, 212, 255, 0.7);
    color: #040916;
    font-weight: 700;
    box-shadow: 0 3px 12px rgba(0, 212, 255, 0.35);
}

.project-btn.primary-btn:hover {
    background: linear-gradient(135deg, #33dcff 0%, #4a8ae6 100%);
    border-color: #ffffff;
    color: #000000;
    box-shadow: 0 5px 18px rgba(0, 212, 255, 0.55);
    transform: translateY(-2px);
}

[data-theme="light"] .project-btn {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.16);
    color: #0f172a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .project-btn:hover {
    background: rgba(0, 212, 255, 0.14);
    border-color: var(--clr-primary);
    color: #0284c7;
}

[data-theme="light"] .project-btn.primary-btn {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    border: 1px solid #0284c7;
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(2, 132, 199, 0.35);
}

[data-theme="light"] .project-btn.primary-btn:hover {
    background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 5px 16px rgba(2, 132, 199, 0.5);
}

/* Case study modal */
.case-study-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .80);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.case-study-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--c-surface-solid);
    border: var(--glass-border);
    border-radius: var(--card-radius);
    max-width: 800px;
    width: 90%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 36px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--t-fast);
}

.modal-close:hover {
    background: rgba(255, 255, 255, .08);
    transform: scale(1.1);
}

/* .case-study-btn styled via general button and project-links classes */

.tech-stack {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--c-border);
}

.tech-stack h3 {
    margin-bottom: 14px;
    font-size: var(--fs-lg);
}

/* ============================================================
   13. IMPACT & STATISTICS
   ============================================================ */
.stats-grid,
#open-source .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 22px;
    text-align: center;
}

.stat-card,
.stat-box {
    padding: 28px 20px;
    border-radius: var(--card-radius);
    background: var(--glass-bg);
    border: var(--glass-border);
    transition: var(--t-mid);
}

.stat-card:hover,
.stat-box:hover {
    border-color: var(--clr-primary);
    transform: translateY(-4px);
    box-shadow: 0 14px 36px -8px var(--clr-glow);
}

.stat-number {
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    background: var(--clr-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.stat-label {
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--text-secondary);
}

/* GitHub stats larger container */
.github-stats-large {
    padding: var(--sp-lg);
    margin-top: 32px;
}

.github-stats-large h3 {
    text-align: center;
    margin-bottom: 24px;
    font-size: var(--fs-xl);
}

/* ============================================================
   14. OPEN SOURCE CONTRIBUTIONS
   ============================================================ */
.opensource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}

.opensource-card.glass-card {
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
}

.opensource-card.glass-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-border-glow);
    box-shadow: 0 16px 36px -6px rgba(0, 212, 255, .20);
}

.repo-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
}

.repo-header i.fab {
    font-size: 2rem;
    color: var(--text);
}

.repo-header h3 {
    flex-grow: 1;
    font-size: var(--fs-lg);
    color: var(--clr-primary-lt);
    margin: 0;
}

.repo-stars {
    background: rgba(255, 199, 0, .10);
    color: var(--clr-gold);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .80rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.repo-description {
    color: var(--text-secondary);
    font-size: .90rem;
    line-height: 1.65;
    flex-grow: 1;
}

.repo-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tech-badge {
    font-size: .76rem;
    padding: 4px 10px;
    background: rgba(0, 212, 255, .10);
    color: var(--clr-primary);
    border-radius: 6px;
    border: 1px solid rgba(0, 212, 255, .18);
    font-family: 'Fira Code', monospace;
}

.repo-stats {
    display: flex;
    justify-content: space-between;
    font-size: .84rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
    gap: 8px;
}

.repo-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.repo-stats i {
    color: var(--clr-primary);
}

/* ============================================================
   15. SPEAKING & WORKSHOPS
   ============================================================ */
.talks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}

/* NEW REFINED & BALANCED TALK CARD */
.talk-card.glass-card {
    padding: 24px 24px 22px;
    position: relative;
    border-radius: var(--card-radius);
    background: var(--glass-bg);
    border: var(--glass-border);
    transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
    display: flex;
    flex-direction: column;
}

.talk-card.glass-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-border-glow);
    box-shadow: 0 16px 36px -6px rgba(0, 212, 255, .20);
}

.talk-date {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    background: rgba(0, 212, 255, 0.08);
    color: var(--clr-primary);
    border: 1px solid rgba(0, 212, 255, 0.22);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

[data-theme="light"] .talk-date,
body.light-theme .talk-date {
    background: rgba(0, 136, 204, 0.08);
    color: #0077b6;
    border-color: rgba(0, 136, 204, 0.22);
}

.talk-card h3 {
    font-size: var(--fs-xl);
    margin-bottom: 6px;
}

.talk-event {
    color: var(--clr-green);
    font-weight: 500;
    font-size: .90rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.talk-event::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-green);
    flex-shrink: 0;
}

.talk-links {
    display: flex;
    gap: 16px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.talk-link {
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    transition: color .2s ease;
}

.talk-link:hover {
    color: var(--clr-primary-lt);
}

.cta-section {
    text-align: center;
    margin-top: 36px;
}

.cta-section h3 {
    font-size: var(--fs-xl);
    margin-bottom: 18px;
}

/* ============================================================
   16. PUBLICATIONS & RESOURCES
   ============================================================ */
.publications-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* NEW REFINED & BALANCED PUBLICATION CARD */
.publication-card.glass-card {
    padding: clamp(20px, 2.8vw, 30px);
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
    position: relative;
    display: flex;
    flex-direction: column;
}

.publication-card.glass-card:hover {
    transform: translateY(-3px);
    border-color: var(--c-border-glow);
    box-shadow: 0 16px 36px -6px rgba(0, 212, 255, .20);
}

.publication-type {
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--clr-violet);
    background: rgba(123, 44, 191, 0.08);
    border: 1px solid rgba(123, 44, 191, 0.28);
    padding: .25rem .75rem;
    border-radius: 20px;
}

[data-theme="light"] .publication-type,
body.light-theme .publication-type {
    color: #6b21a8;
    background: rgba(107, 33, 168, 0.08);
    border-color: rgba(107, 33, 168, 0.22);
}

.publication-card .hero-btn {
    align-self: flex-start;
    height: 40px;
    min-width: 140px;
    padding: 0 22px;
    margin-top: 18px;
    font-size: 0.88rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-violet) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(0, 136, 204, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--t-fast);
}

.publication-card .hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 136, 204, 0.40);
    color: #ffffff !important;
}

.publication-card .hero-btn::before {
    display: none !important;
}

.publication-date {
    color: var(--text-muted);
    font-size: .86rem;
}

.publication-card h3 {
    font-size: var(--fs-xl);
    margin-bottom: 6px;
}

.publication-source {
    color: var(--clr-primary-lt);
    font-style: italic;
    font-size: .88rem;
    margin-bottom: 10px;
}

.publication-stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 14px;
    font-size: .84rem;
    color: var(--text-secondary);
}

.publication-stats span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.publication-stats i {
    color: var(--clr-primary);
}

/* ============================================================
   17. COLLABORATION OPTIONS
   ============================================================ */
.collaboration-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}

.collab-option.glass-card {
    padding: 36px 24px;
    text-align: center;
    border-top: 5px solid var(--clr-primary);
    transition: var(--t-mid);
}

.collab-option.glass-card:nth-child(2) {
    border-top-color: var(--clr-green);
}

.collab-option.glass-card:nth-child(3) {
    border-top-color: var(--clr-violet);
}

.collab-option.glass-card:nth-child(4) {
    border-top-color: var(--clr-magenta);
}

.collab-option.glass-card:hover {
    transform: translateY(-4px);
}

.collab-icon {
    font-size: 2.8rem;
    margin-bottom: 16px;
    background: var(--clr-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 6px 16px var(--clr-glow));
}

.collab-option h3 {
    font-size: var(--fs-xl);
    margin-bottom: 10px;
}

.collab-option p {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.70;
}

.collab-features {
    text-align: left;
    margin: 18px 0;
    padding-left: 1.4rem;
}

.collab-features li {
    list-style: none;
    position: relative;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: .88rem;
}

.collab-features li::before {
    content: '✓';
    position: absolute;
    left: -1.4rem;
    color: var(--success);
    font-weight: 700;
}

/* ============================================================
   18. WORK EXPERIENCE & JOURNEY
   ============================================================ */
.experience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}

.experience-card {
    padding: 26px;
    border-radius: var(--card-radius);
    background: var(--glass-bg);
    border: var(--glass-border);
    border-left: 4px solid var(--clr-primary);
    transition: var(--t-mid);
    position: relative;
    overflow: hidden;
}

.experience-card:hover {
    transform: translateY(-4px);
    border-color: var(--clr-primary);
    box-shadow: 0 14px 36px -8px var(--clr-glow);
}

.experience-card h3 {
    font-size: var(--fs-lg);
    margin-bottom: 5px;
}

.experience-card .company {
    color: var(--clr-primary-lt);
    font-weight: 600;
    font-size: .94rem;
    margin-bottom: 4px;
}

.experience-card .duration {
    font-size: .82rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: block;
}

.certificate-card {
    border: var(--glass-border);
    background: rgba(255, 255, 255, .03);
    border-radius: var(--card-radius);
    transition: var(--t-mid);
    padding: 24px;
}

.certificate-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 212, 255, .15);
    border-color: rgba(0, 212, 255, .3);
}

.certificate-card i {
    filter: drop-shadow(0 0 12px rgba(0, 212, 255, .3));
    transition: transform .3s ease;
}

.certificate-card:hover i {
    transform: scale(1.1) rotate(5deg);
}

/* ============================================================
   19. PROCESS TIMELINE
   ============================================================ */
.process-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.process-step.glass-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: start;
    gap: 20px;
    padding: 28px;
    position: relative;
}

.step-number {
    font-size: 2.6rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .05);
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    line-height: 1;
}

.step-icon {
    position: absolute;
    top: 28px;
    left: 28px;
    font-size: 1.4rem;
    color: var(--clr-primary);
}

.process-step h3 {
    color: var(--clr-primary-lt);
    margin-bottom: 6px;
    font-size: var(--fs-lg);
}

.step-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.step-tools li {
    background: rgba(255, 255, 255, .10);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .78rem;
    color: var(--text-secondary);
}

/* ============================================================
   20. CONTACT SECTION & FORM
   ============================================================ */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--glass-bg);
    border: var(--glass-border);
    transition: var(--t-mid);
}

.contact-item>div {
    min-width: 0;
}

.contact-item:hover {
    border-color: var(--clr-primary);
    transform: translateX(6px);
}

.contact-item i {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 212, 255, .10);
    color: var(--clr-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-item h3,
.contact-item h4 {
    font-size: var(--fs-sm);
    line-height: 1.35;
    margin-bottom: 3px;
}

.contact-item p,
.contact-item a {
    font-size: .84rem;
    color: var(--text-secondary);
}

.contact-item p,
.contact-item a {
    overflow-wrap: anywhere;
}

.contact-item a:hover {
    color: var(--clr-primary);
}

.contact-form-container {
    border-radius: var(--card-radius);
    background: var(--glass-bg);
    border: var(--glass-border);
    padding: 30px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: .84rem;
    margin-bottom: 6px;
    color: var(--text-secondary);
}

.form-status {
    min-height: 1.4em;
    margin-top: 12px;
    color: var(--clr-primary-lt);
    font-size: .82rem;
}

.form-input,
.form-textarea,
.form-control,
.newsletter-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(10, 10, 10, 0.78);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    color: var(--text);
    font-size: .92rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea,
[data-theme="light"] .form-control,
[data-theme="light"] .newsletter-input,
body.light-theme .form-input,
body.light-theme .form-textarea,
body.light-theme .form-control,
body.light-theme .newsletter-input {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 136, 204, 0.22);
    color: #0f172a;
}

.form-input:focus,
.form-textarea:focus,
.form-control:focus,
.newsletter-input:focus {
    outline: none;
    border-color: var(--clr-primary);
    background: rgba(0, 212, 255, .05);
    box-shadow: 0 0 18px var(--clr-glow);
}

.form-textarea {
    min-height: 140px;
    resize: vertical;
}

#chatInput:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 2px rgba(0, 212, 255, .12);
}

/* Map */
.location-map,
.embed-map-container {
    border-radius: var(--card-radius);
    overflow: hidden;
    border: 1px solid var(--c-border);
    margin-top: 16px;
}

.embed-map-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--card-radius);
}

.embed-map-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(100%) invert(90%) contrast(110%);
}

/* Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}

.testimonial-slider {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.testimonial-slider>.testimonial-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 2px solid var(--clr-primary);
    flex: 0 0 48px;
    flex-shrink: 0;
    display: block;
    background: var(--c-surface-solid, rgba(255, 255, 255, 0.05));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.testimonial-card.review-card {
    padding: 28px;
    text-align: left;
    flex-direction: column;
    gap: 14px;
}

.testimonial-text {
    font-size: var(--fs-sm);
    line-height: 1.75;
    color: var(--text-secondary);
    font-style: italic;
}

.testimonial-text::before {
    content: '"';
    color: var(--clr-primary);
    font-size: 1.5rem;
    line-height: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.author-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--clr-primary);
}

.author-info h4 {
    font-size: .92rem;
}

.author-info p {
    color: var(--text-muted);
    font-size: .80rem;
}

.testimonial-rating i {
    color: var(--clr-gold);
    font-size: .90rem;
}

/* ============================================================
   21. FOOTER
   ============================================================ */
footer {
    padding: 60px 20px 28px;
    background: var(--c-bg-alt);
    border-top: 1px solid var(--c-border);
    width: 100%;
}

/* Ensure footer container is fully unboxed and transparent */
footer .container,
footer .footer-container,
footer>.container.glass-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: 1220px;
    margin: 0 auto;
}

footer .container::before,
footer .footer-container::before,
footer>.container.glass-card::before {
    display: none !important;
}

.footer-content>* {
    min-width: 0;
}

.footer-content {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(170px, .9fr) minmax(220px, 1.1fr);
    gap: 24px;
    max-width: 1220px;
    margin: 0 auto 36px;
    align-items: stretch;
}

.footer-content .footer-about,
.footer-content .footer-links {
    height: 100%;
}

.footer-about p {
    color: var(--text-secondary);
    font-size: .88rem;
    line-height: 1.72;
    margin-bottom: 18px;
}

.footer-logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--clr-primary);
    margin-bottom: 12px;
    font-family: 'Space Grotesk', 'Orbitron', system-ui, sans-serif;
}

.footer-links h3,
.footer-links h4 {
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 14px;
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: .88rem;
    transition: color .2s ease, padding-left .2s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--clr-primary);
    padding-left: 5px;
}

.newsletter-section-footer h4 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.newsletter-section-footer p {
    color: var(--text-muted);
    font-size: .82rem;
    margin-bottom: 12px;
}

.newsletter-form {
    display: flex;
    gap: 10px;
}

.newsletter-input {
    flex: 1;
    border-radius: 25px;
    font-size: .88rem;
}

.social-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.social-icons a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--c-border);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--t-fast);
}

.social-icons a:hover {
    background: var(--clr-primary);
    color: #000;
    border-color: var(--clr-primary);
    transform: translateY(-3px);
}

.copyright {
    text-align: center;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: var(--text-muted);
    font-size: .82rem;
    max-width: 1220px;
    margin: 0 auto;
}

/* ============================================================
   LIGHT THEME FOOTER STYLING
   ============================================================ */
[data-theme="light"] footer,
body.light-theme footer {
    background: linear-gradient(180deg, #f8fafc 0%, #edf2f9 45%, #e2e8f0 100%) !important;
    border-top: 1px solid rgba(0, 136, 204, 0.18) !important;
    color: #0f172a !important;
}

[data-theme="light"] footer .footer-about p,
body.light-theme footer .footer-about p {
    color: #475569 !important;
}

[data-theme="light"] footer .footer-links h3,
[data-theme="light"] footer .footer-links h4,
body.light-theme footer .footer-links h3,
body.light-theme footer .footer-links h4 {
    color: #0f172a !important;
}

[data-theme="light"] footer .footer-links a,
body.light-theme footer .footer-links a {
    color: #475569 !important;
}

[data-theme="light"] footer .footer-links a:hover,
body.light-theme footer .footer-links a:hover {
    color: var(--clr-primary) !important;
}

[data-theme="light"] footer .social-icons a,
body.light-theme footer .social-icons a {
    background: rgba(255, 255, 255, 0.90) !important;
    border: 1px solid rgba(0, 136, 204, 0.22) !important;
    color: #334155 !important;
    box-shadow: 0 2px 8px rgba(0, 30, 80, 0.05) !important;
}

[data-theme="light"] footer .social-icons a:hover,
body.light-theme footer .social-icons a:hover {
    background: var(--clr-primary) !important;
    color: #ffffff !important;
    border-color: var(--clr-primary) !important;
    box-shadow: 0 4px 14px var(--clr-glow) !important;
}

[data-theme="light"] footer .trust-badge,
body.light-theme footer .trust-badge {
    background: rgba(255, 255, 255, 0.90) !important;
    border: 1px solid rgba(0, 136, 204, 0.18) !important;
    color: #0f172a !important;
    box-shadow: 0 4px 14px rgba(0, 30, 80, 0.04) !important;
}

[data-theme="light"] footer .trust-badge span,
body.light-theme footer .trust-badge span {
    color: #1e293b !important;
}

[data-theme="light"] footer .copyright,
body.light-theme footer .copyright {
    border-top: 1px solid rgba(0, 136, 204, 0.15) !important;
    color: #64748b !important;
}

[data-theme="light"] footer .copyright p,
body.light-theme footer .copyright p {
    color: #64748b !important;
}

/* ============================================================
   22. ARTICLES & BLOG SECTION
   ============================================================ */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.blog-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
}

.blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-border-glow);
    box-shadow: 0 16px 36px -6px rgba(0, 212, 255, .20);
}

.blog-image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--c-bg-alt);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.blog-card:hover .blog-image {
    transform: scale(1.06);
}

.blog-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 24px 24px;
}

.blog-content h3 {
    font-size: var(--fs-lg);
    line-height: 1.35;
}

.blog-content p {
    margin: 0;
}

.blog-content .cta-button {
    margin-top: auto;
    min-height: 44px;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0;
}

.blog-meta span {
    align-items: center;
    gap: 5px;
}

.blog-meta i {
    color: var(--clr-primary);
}

/* ============================================================
   23. CHAT WIDGET & ASSISTANT
   ============================================================ */
.chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--clr-grad);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px var(--clr-glow);
    z-index: var(--z-nav);
    transition: var(--t-mid);
    cursor: pointer;
}

.chat-widget:hover {
    transform: scale(1.12);
    box-shadow: 0 12px 40px rgba(0, 212, 255, .55);
}

.chat-box {
    position: fixed;
    bottom: 94px;
    right: clamp(12px, 3vw, 24px);
    width: min(355px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    background: var(--c-surface-solid);
    border: var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: 0 24px 56px rgba(0, 0, 0, .55);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s var(--ease-spring);
}

.chat-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.chat-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h3 {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-header h3 i {
    color: var(--clr-primary);
}

.chat-messages {
    height: 290px;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .86rem;
    line-height: 1.52;
}

.user-message {
    background: var(--clr-primary);
    color: #000;
    align-self: flex-end;
    border-bottom-right-radius: 3px;
}

.bot-message {
    background: rgba(255, 255, 255, .08);
    color: var(--text);
    align-self: flex-start;
    border-bottom-left-radius: 3px;
}

.typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
}

.typing-indicator span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--clr-primary);
    animation: typingDot 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: .18s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: .36s;
}

.chat-input {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--c-border);
}

.chat-input input {
    flex: 1;
    padding: 9px 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--c-border);
    border-radius: 25px;
    color: var(--text);
    font-size: .86rem;
}

.chat-input button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--clr-primary);
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--t-fast);
}

.chat-input button:hover {
    box-shadow: 0 0 14px var(--clr-glow);
}

.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 10px;
}

.chat-chip {
    padding: 4px 12px;
    border-radius: 14px;
    background: rgba(0, 212, 255, .10);
    color: var(--clr-primary);
    font-size: .76rem;
    cursor: pointer;
    border: 1px solid rgba(0, 212, 255, .18);
    transition: var(--t-fast);
}

.chat-chip:hover {
    background: var(--clr-primary);
    color: #000;
}

/* ============================================================
   24. COMMAND PALETTE MODAL
   ============================================================ */
.command-palette-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding-top: 11vh;
    opacity: 0;
    transition: opacity .3s ease;
}

.command-palette-overlay.active {
    display: flex;
    opacity: 1;
}

.command-palette {
    width: 90%;
    max-width: 600px;
    background: var(--c-surface-solid);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .60);
    overflow: hidden;
    transform: translateY(-22px);
    transition: transform .3s var(--ease-spring);
}

.command-palette-overlay.active .command-palette {
    transform: translateY(0);
}

.cmd-input-wrapper {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border);
}

.cmd-input-wrapper i {
    color: var(--clr-primary);
    margin-right: 14px;
    font-size: 1.1rem;
}

.cmd-input {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1.05rem;
    width: 100%;
    outline: none;
}

.cmd-results {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px 0;
}

.cmd-item {
    min-height: 44px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background .18s;
    color: var(--text-secondary);
}

.cmd-item:hover,
.cmd-item.selected {
    background: rgba(255, 255, 255, .05);
    color: var(--clr-primary);
}

.cmd-item i {
    margin-right: 14px;
    width: 20px;
    text-align: center;
}

.cmd-shortcut {
    margin-left: auto;
    font-size: .76rem;
    opacity: .5;
    background: rgba(255, 255, 255, .10);
    padding: 2px 6px;
    border-radius: 5px;
}

.cmd-category {
    font-size: .72rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--clr-primary);
    padding: 12px 20px 6px;
    opacity: .7;
    letter-spacing: 1px;
}

.cmd-no-results {
    text-align: center;
    padding: 38px 20px;
    color: rgba(255, 255, 255, .45);
    font-size: .88rem;
}

/* ============================================================
   25. LOADING SCREEN & PRELOADER
   ============================================================ */

/* ── TRUE COMPLETE BLACK OLED LOADING SCREEN ── */
.loading-screen {
    position: fixed;
    inset: 0;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: var(--z-loader);
    background:
        radial-gradient(circle at 50% 30%, rgba(0, 212, 255, .07), transparent 50%),
        #000000;
    transition: opacity .45s ease, visibility .45s ease;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .35;
    background-image: linear-gradient(rgba(0, 212, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.loader-ambient {
    position: absolute;
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .15;
    pointer-events: none;
    animation: loaderFloat 8s ease-in-out infinite alternate;
}

.loader-ambient-one {
    top: -18rem;
    left: -10rem;
    background: var(--clr-primary);
}

.loader-ambient-two {
    right: -16rem;
    bottom: -18rem;
    background: rgba(0, 212, 255, 0.4);
    animation-delay: -3s;
}

.loader-shell {
    width: min(92vw, 680px);
    padding: clamp(24px, 4.5vw, 48px);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 28px;
    background: rgba(8, 8, 8, 0.90);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .90), 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 0 60px rgba(0, 212, 255, .08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    animation: loaderReveal .7s var(--ease-spring) both;
}

.loader-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

.loader-monogram {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(0, 212, 255, .50);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 212, 255, .24), rgba(136, 85, 255, .32));
    color: #fff;
    font: 700 .92rem 'Orbitron', sans-serif;
    letter-spacing: .08em;
    box-shadow: 0 0 24px rgba(0, 212, 255, .25);
}

.loader-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.loader-brand-copy small {
    color: var(--clr-primary-lt);
    font: 600 .65rem 'Fira Code', monospace;
    letter-spacing: .16em;
}

.loader-brand-copy strong {
    color: #fff;
    font: 600 1rem 'Orbitron', sans-serif;
    letter-spacing: .03em;
}

/* Microsoft Clarity Badge in Loader */
.loader-clarity-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.28);
    font: 600 0.72rem 'Fira Code', monospace;
    color: var(--clr-primary-lt);
    letter-spacing: 0.5px;
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.12);
    user-select: none;
}

.loader-clarity-badge i {
    color: #00d4ff;
    font-size: 0.85rem;
}

.loader-clarity-badge.clarity-synced {
    background: rgba(0, 255, 136, 0.08);
    border-color: rgba(0, 255, 136, 0.35);
    color: #00ff88;
    box-shadow: 0 0 18px rgba(0, 255, 136, 0.18);
}

.loader-clarity-badge.clarity-synced i {
    color: #00ff88;
}

.clarity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px #00ff88;
    animation: clarityPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes clarityPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.85);
    }
}

.loader-kicker {
    margin: clamp(34px, 5vw, 56px) 0 12px;
    color: var(--clr-primary-lt);
    font: 600 .72rem 'Fira Code', monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.loader-title {
    max-width: 620px;
    margin: 0;
    color: #fff;
    font: 700 clamp(1.85rem, 4.5vw, 3.4rem)/1.12 'Orbitron', 'Space Grotesk', sans-serif;
    letter-spacing: -.03em;
}

.loader-title span {
    color: transparent;
    background: linear-gradient(135deg, #00f0ff 0%, #7000ff 50%, #ff007a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    display: inline-block;
    filter: drop-shadow(0 0 18px rgba(0, 240, 255, 0.35));
}

.loader-subtitle {
    max-width: 540px;
    margin: 16px 0 0;
    color: rgba(241, 245, 249, .74);
    font-size: clamp(.88rem, 1.4vw, 1.02rem);
    line-height: 1.68;
}

.loader-progress-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 36px;
}

.loader-progress-ring {
    position: relative;
    flex: 0 0 86px;
    width: 86px;
    height: 86px;
}

.loader-progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.loader-progress-ring circle {
    fill: none;
    stroke-width: 6;
}

.loader-ring-track {
    stroke: rgba(255, 255, 255, .10);
}

.loader-ring-value {
    stroke: var(--clr-primary);
    stroke-linecap: round;
    stroke-dasharray: 270.18;
    stroke-dashoffset: 270.18;
    filter: drop-shadow(0 0 7px rgba(0, 212, 255, .55));
    transition: stroke-dashoffset .18s ease;
}

.loader-progress-ring>span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font: 700 .92rem 'Orbitron', sans-serif;
}

.loader-progress-copy {
    min-width: 0;
    flex: 1;
}

.loading-percentage {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: .84rem;
}

.loading-percentage span {
    color: #fff;
    font: 700 1rem 'Orbitron', sans-serif;
}

.loading-percentage div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loader-progress-track {
    height: 6px;
    margin-top: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
}

.progress-bar {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--clr-grad);
    box-shadow: 0 0 18px var(--clr-glow);
    transition: width .18s ease;
}

.loader-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 34px;
    color: rgba(241, 245, 249, .42);
    font: 500 .68rem 'Fira Code', monospace;
    letter-spacing: .04em;
}

.loader-footer i {
    color: var(--clr-primary);
    margin-right: 5px;
}

@keyframes loaderReveal {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes loaderFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(10%, -8%, 0) scale(1.12);
    }
}

.loader-container,
.loading-content,
.loading-text {
    display: contents;
}

.progress-container {
    display: none;
}

.portfolio-logo {
    display: none;
}

.loading-screen .hero-btn {
    display: none;
}

/* Light Theme Design for Loading Screen */
[data-theme="light"] .loading-screen,
body.light-theme .loading-screen {
    background:
        radial-gradient(circle at 20% 25%, rgba(0, 180, 255, 0.12), transparent 45%),
        radial-gradient(circle at 80% 75%, rgba(136, 85, 255, 0.12), transparent 45%),
        #f8fafc !important;
}

[data-theme="light"] .loading-screen::before,
body.light-theme .loading-screen::before {
    opacity: 0.25;
    background-image: linear-gradient(rgba(0, 136, 204, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 136, 204, 0.08) 1px, transparent 1px);
}

[data-theme="light"] .loading-screen .loader-shell,
body.light-theme .loading-screen .loader-shell {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(0, 136, 204, 0.25) !important;
    box-shadow: 0 30px 80px rgba(0, 30, 80, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.9) inset, 0 0 40px rgba(0, 136, 204, 0.08) !important;
}

[data-theme="light"] .loading-screen .loader-monogram,
body.light-theme .loading-screen .loader-monogram {
    border-color: rgba(0, 136, 204, 0.4);
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.18), rgba(124, 58, 237, 0.22));
    color: #0284c7;
}

[data-theme="light"] .loading-screen .loader-brand-copy small,
body.light-theme .loading-screen .loader-brand-copy small {
    color: #0284c7;
}

[data-theme="light"] .loading-screen .loader-brand-copy strong,
body.light-theme .loading-screen .loader-brand-copy strong {
    color: #0f172a !important;
}

[data-theme="light"] .loading-screen .loader-clarity-badge,
body.light-theme .loading-screen .loader-clarity-badge {
    background: rgba(0, 136, 204, 0.08);
    border-color: rgba(0, 136, 204, 0.25);
    color: #0284c7;
}

[data-theme="light"] .loading-screen .loader-kicker,
body.light-theme .loading-screen .loader-kicker {
    color: #0284c7;
}

[data-theme="light"] .loading-screen .loader-title,
body.light-theme .loading-screen .loader-title {
    color: #0f172a !important;
}

[data-theme="light"] .loading-screen .loader-subtitle,
body.light-theme .loading-screen .loader-subtitle {
    color: #334155 !important;
}

[data-theme="light"] .loading-screen .loader-ring-track,
body.light-theme .loading-screen .loader-ring-track {
    stroke: rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .loading-screen .loader-progress-ring>span,
body.light-theme .loading-screen .loader-progress-ring>span {
    color: #0f172a !important;
}

[data-theme="light"] .loading-screen .loading-percentage span,
body.light-theme .loading-screen .loading-percentage span {
    color: #0f172a !important;
}

[data-theme="light"] .loading-screen .loading-percentage div,
body.light-theme .loading-screen .loading-percentage div {
    color: #475569 !important;
}

[data-theme="light"] .loading-screen .loader-progress-track,
body.light-theme .loading-screen .loader-progress-track {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .loading-screen .loader-footer,
body.light-theme .loading-screen .loader-footer {
    color: #64748b !important;
}

/* ============================================================
   26. SCROLL INDICATORS & SECTION NAVIGATION
   ============================================================ */
.scroll-indicator,
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--clr-grad);
    z-index: calc(var(--z-nav) + 1);
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
    pointer-events: none;
    transition: transform .05s linear;
}

.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--c-surface-solid);
    border: 1px solid var(--c-border);
    color: var(--clr-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--t-mid);
    z-index: var(--z-nav);
    cursor: pointer;
    /* Prevent flash on hover */
    backface-visibility: hidden;
    transform: translateZ(0);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--clr-primary);
    color: #000;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

.section-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 13px;
    z-index: var(--z-sticky);
}

.section-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .24);
    cursor: pointer;
    transition: var(--t-fast);
    position: relative;
}

.section-dot.active,
.section-dot:hover {
    background: var(--clr-primary);
    transform: scale(1.4);
    box-shadow: 0 0 10px var(--clr-glow);
}

.section-dot::after {
    content: attr(data-label);
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--c-surface-solid);
    color: var(--text);
    padding: 4px 10px;
    border-radius: 5px;
    font-size: .74rem;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .25s ease;
    border: 1px solid var(--c-border);
}

.section-dot:hover::after {
    opacity: 1;
}

/* Cookie banner - Modern, Accessible, High Contrast */
.cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    max-width: 380px;
    width: calc(100% - 48px);
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(10, 16, 28, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 212, 255, 0.28);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 24px rgba(0, 212, 255, 0.12);
    z-index: 10000;
    display: none;
    color: #f1f5f9;
}

.cookie-banner.show {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: slideUp .5s var(--ease-spring);
}

.cookie-banner h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cookie-banner h4 i {
    color: var(--clr-primary, #00d4ff);
    font-size: 1rem;
}

.cookie-banner .cookie-text,
.cookie-banner p {
    font-size: 0.82rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}

.cookie-banner .cookie-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.cookie-banner .cookie-btn,
.cookie-banner .hero-btn {
    flex: 1;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cookie-banner .cookie-accept-btn {
    background: linear-gradient(135deg, #00d4ff 0%, #6f00ff 100%);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.3);
}

.cookie-banner .cookie-accept-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 212, 255, 0.45);
}

.cookie-banner .cookie-decline-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e2e8f0 !important;
}

.cookie-banner .cookie-decline-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff !important;
}

/* Light Theme Cookie Banner (Crisp, High Contrast, Legible) */
[data-theme="light"] .cookie-banner,
body.light-theme .cookie-banner {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 136, 204, 0.25) !important;
    box-shadow: 0 16px 44px rgba(0, 30, 80, 0.14), 0 0 16px rgba(0, 136, 204, 0.08) !important;
    color: #0f172a !important;
}

[data-theme="light"] .cookie-banner h4,
body.light-theme .cookie-banner h4 {
    color: #0f172a !important;
}

[data-theme="light"] .cookie-banner h4 i,
body.light-theme .cookie-banner h4 i {
    color: #0088cc !important;
}

[data-theme="light"] .cookie-banner .cookie-text,
body.light-theme .cookie-banner .cookie-text,
[data-theme="light"] .cookie-banner p,
body.light-theme .cookie-banner p {
    color: #334155 !important;
}

[data-theme="light"] .cookie-banner .cookie-accept-btn,
body.light-theme .cookie-banner .cookie-accept-btn {
    background: linear-gradient(135deg, #0088cc 0%, #005f99 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 136, 204, 0.25) !important;
}

[data-theme="light"] .cookie-banner .cookie-decline-btn,
body.light-theme .cookie-banner .cookie-decline-btn {
    background: rgba(0, 136, 204, 0.06) !important;
    border: 1px solid rgba(0, 136, 204, 0.25) !important;
    color: #0f172a !important;
}

[data-theme="light"] .cookie-banner .cookie-decline-btn:hover,
body.light-theme .cookie-banner .cookie-decline-btn:hover {
    background: rgba(0, 136, 204, 0.12) !important;
    border-color: rgba(0, 136, 204, 0.45) !important;
}

/* Inline feedback for actions whose external destination is not configured yet. */
.site-notice {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: var(--z-toast);
    max-width: min(92vw, 460px);
    padding: 12px 18px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface-solid);
    color: var(--text);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 18px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s var(--ease-spring);
    text-align: center;
    font-size: .84rem;
}

.site-notice.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ============================================================
   27. SKELETON LOADERS & IMAGE UTILITIES
   ============================================================ */
.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .10) 37%, rgba(255, 255, 255, .05) 63%);
    background-size: 400% 100%;
    animation: skeletonAnim 1.4s ease infinite;
    border-radius: 6px;
}

.skeleton-text {
    height: 1em;
    margin-bottom: .5em;
    width: 100%;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-block {
    width: 100%;
    height: 200px;
}

.skeleton-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
}

.skeleton-loading {
    background: linear-gradient(90deg, var(--glass-bg) 25%, rgba(255, 255, 255, .14) 50%, var(--glass-bg) 75%);
    background-size: 200% 100%;
    animation: skeletonAnim 1.5s infinite;
    min-height: 200px;
}

img.skeleton-loading {
    min-height: 0;
}

/* ============================================================
   28. UTILITY CLASSES & HELPERS
   ============================================================ */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.m-0 {
    margin: 0 !important;
}

.mt-1 {
    margin-top: .25rem !important;
}

.mt-2 {
    margin-top: .5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 2rem !important;
}

.mb-1 {
    margin-bottom: .25rem !important;
}

.mb-2 {
    margin-bottom: .5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 2rem !important;
}

.p-0 {
    padding: 0 !important;
}

.user-select-none {
    user-select: none;
}

/* Playground section */
.playground .cta-button {
    margin-top: 20px;
}

/* Blog */
.blog-meta {
    display: flex;
    gap: 14px;
    font-size: .82rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.blog-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Code editor */
.editor-content pre {
    margin: 0;
    overflow-x: auto;
}

.editor-content code {
    font-family: 'Fira Code', monospace;
    font-size: .88rem;
    line-height: 1.55;
    color: #d4d4d4;
}

.code-editor {
    width: 100%;
    overflow: hidden;
    margin: 24px auto 0;
    border: 1px solid rgba(0, 212, 255, .24);
    border-radius: 16px;
    background: #0a1020;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

.editor-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    background: rgba(255, 255, 255, .06);
    color: var(--text-secondary);
    font: 500 .78rem 'Fira Code', monospace;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.editor-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.editor-dot.red {
    background: #ff5f57;
}

.editor-dot.yellow {
    background: #febc2e;
}

.editor-dot.green {
    background: #28c840;
}

.editor-content {
    padding: 22px;
    overflow-x: auto;
}

.editor-content pre {
    color: #d4d4d4;
    white-space: pre;
}

/* ============================================================
   29. KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes orbFloat1 {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }

    33% {
        transform: translate3d(6vw, 8vw, 0) scale(1.08) rotate(35deg);
    }

    66% {
        transform: translate3d(-4vw, 10vw, 0) scale(0.94) rotate(70deg);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@keyframes orbFloat2 {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }

    33% {
        transform: translate3d(-7vw, -6vw, 0) scale(1.10) rotate(-45deg);
    }

    66% {
        transform: translate3d(5vw, -8vw, 0) scale(0.92) rotate(-90deg);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@keyframes orbFloat3 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(5vw, -6vw, 0) scale(1.06);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes gridPulse {
    0% {
        opacity: .25;
    }

    50% {
        opacity: .40;
    }

    100% {
        opacity: .25;
    }
}

@keyframes spotFloat1 {
    0% {
        opacity: .45;
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        opacity: .65;
        transform: translate3d(3vw, 4vw, 0) scale(1.08);
    }

    100% {
        opacity: .45;
        transform: translate3d(-2vw, 6vw, 0) scale(0.96);
    }
}

@keyframes spotFloat2 {
    0% {
        opacity: .40;
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        opacity: .60;
        transform: translate3d(-4vw, -3vw, 0) scale(1.06);
    }

    100% {
        opacity: .40;
        transform: translate3d(3vw, -5vw, 0) scale(0.94);
    }
}

@keyframes ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes scrollSkills {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes caretBlink {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes shimmerBg {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes typingDot {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

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

    100% {
        background-position: 0 50%;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 1;
    }
}

/* High-contrast overrides */
body.high-contrast .glass-card,
body.high-contrast .interactive-card,
body.high-contrast .service-card,
body.high-contrast .project-card,
body.high-contrast .nav-container {
    background: #000 !important;
    border: 2px solid #fff !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

body.high-contrast .text-gradient,
body.high-contrast .text-shimmer {
    background: none !important;
    -webkit-text-fill-color: #0ff !important;
    color: #0ff !important;
}

body.high-contrast .stat-number {
    -webkit-text-fill-color: #0ff;
    color: #0ff;
    background: none;
}

/* ============================================================
   30. RESPONSIVE MEDIA QUERIES & MOBILE BREAKPOINTS
   ============================================================ */
@media (max-width:1280px) {
    .footer-content {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width:1024px) {

    section,
    .section-transition {
        padding: 52px 18px;
    }

    .testimonial-card.glass-card {
        padding: 22px 18px;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .grid-item-large {
        grid-column: span 1;
    }

    .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-grid,
    .testimonial-slider {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    section,
    .section-transition {
        scroll-margin-top: 76px;
    }

    /* ============================================================
       NEW REFINED & BALANCED MOBILE SIZING & RESPONSIVENESS
       ============================================================ */
    .hero {
        padding: calc(64px + env(safe-area-inset-top, 0px)) 12px calc(64px + env(safe-area-inset-bottom, 12px)) !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    /* Mobile hero card — centered, visually balanced, isolated on first viewport */
    .hero-content {
        max-width: min(100%, 460px) !important;
        width: 100% !important;
        margin: auto !important;
        padding: 16px 14px 16px !important;
        border-radius: 24px !important;
    }

    /* Compact, refined badge */
    .hero-subtitle,
    .hero-subtitle.fade-in {
        letter-spacing: 1.2px !important;
        padding: 4px 12px !important;
        font-size: 0.65rem !important;
        max-width: 90% !important;
        white-space: nowrap !important;
        text-align: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-bottom: 8px !important;
        border-radius: 20px !important;
    }

    /* Balanced hero title - clean typography without crowding */
    .hero-title-fade-in {
        font-size: clamp(1.05rem, 0.85rem + 1.8vw, 1.45rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.28em !important;
        flex-wrap: nowrap !important;
    }

    /* Sleek hero description */
    .hero-description {
        font-size: 0.80rem !important;
        line-height: 1.46 !important;
        margin: 0 auto 10px !important;
        max-width: 100% !important;
    }

    .hero-description .bouncing-text,
    .bouncing-text {
        padding: 9px 13px !important;
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        border-radius: 12px !important;
    }

    /* Skills Ticker - compact, smooth, responsive & proportional */
    .skills-carousel {
        margin: 8px 0 10px !important;
        padding: 3px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
    }

    .skills-track {
        display: flex !important;
        gap: 8px !important;
        width: max-content !important;
        will-change: transform !important;
        animation: scrollSkills 28s linear infinite !important;
    }

    .skills-carousel:hover .skills-track,
    .skills-carousel:active .skills-track {
        animation-play-state: paused !important;
    }

    .skill-item {
        padding: 4px 11px !important;
        font-size: 0.72rem !important;
        gap: 6px !important;
        border-radius: 24px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .skill-item i,
    .skill-item svg {
        font-size: 0.84rem !important;
        width: 14px !important;
        height: 14px !important;
    }

    /* Profile image — constrained for mobile with 16:9 ratio */
    .profile-container {
        width: min(280px, 82vw) !important;
        max-width: 280px !important;
        height: auto !important;
        margin: 8px auto 10px !important;
    }

    .image-carousel {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        border-radius: 16px !important;
    }

    /* Hero CTA buttons — side by side, full-width stretch on small screens */
    .hero-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 10px !important;
        padding: 6px 8px !important;
        border-radius: 16px !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero-buttons .hero-btn,
    .hero-btn {
        padding: 9px 18px !important;
        font-size: 0.84rem !important;
        min-height: 40px !important;
        border-radius: 12px !important;
        flex: 1 1 130px !important;
        max-width: 200px !important;
        letter-spacing: 0.3px;
    }

    /* Keep section headings clean, balanced and centered */
    .section-title,
    .modern-heading {
        font-size: clamp(1.30rem, 1.1rem + 1.2vw, 1.75rem) !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: block !important;
        text-align: center !important;
        margin-bottom: 22px !important;
    }

    /* Mobile horizontally scrollable project filters */
    .project-filters {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 4px 6px 10px;
        gap: 7px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .project-filters::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 14px !important;
        font-size: 0.78rem !important;
        min-height: 44px !important;
        border-radius: 12px !important;
    }

    /* Cookie banner - sleek, centered, compact floating card on mobile */
    .cookie-banner {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        max-width: min(calc(100% - 24px), 380px) !important;
        width: calc(100% - 24px) !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 10px)) !important;
        padding: 12px 16px !important;
        border-radius: 16px !important;
        gap: 8px !important;
    }

    .cookie-banner h4 {
        font-size: 0.88rem !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .cookie-banner .cookie-text,
    .cookie-banner p,
    .cookie-banner .elegant-text {
        font-size: 0.74rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    .cookie-banner .cookie-btn,
    .cookie-banner .hero-btn {
        min-height: 34px !important;
        padding: 6px 12px !important;
        font-size: 0.76rem !important;
        flex: 1;
        border-radius: 10px !important;
    }

    /* Ensure footer content isn't covered by bottom nav */
    footer {
        padding-bottom: calc(75px + env(safe-area-inset-bottom, 14px)) !important;
    }

    /* Back-to-top: move above the mobile bottom nav bar */
    .back-to-top {
        bottom: calc(80px + env(safe-area-inset-bottom, 12px)) !important;
        right: 16px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 0.82rem !important;
    }

    /* Hide section nav dots on mobile — too cramped */
    .section-nav {
        display: none !important;
    }

    /* ============================================================
   MOBILE FLOATING TOP BAR & DRAWER NAVIGATION
   ============================================================ */
    header,
    .navbar {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
        pointer-events: none;
        transition: padding var(--t-mid), background-color var(--t-mid);
    }

    .header-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 480px;
        pointer-events: none;
    }

    /* ── MOBILE TOP FLOATING BAR ISLAND ── */
    .mobile-top-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 6px 10px 6px 14px;
        background: rgba(8, 12, 22, 0.88);
        backdrop-filter: blur(20px) saturate(190%);
        -webkit-backdrop-filter: blur(20px) saturate(190%);
        border: 1px solid rgba(0, 212, 255, 0.22);
        border-radius: 9999px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65),
            0 0 22px rgba(0, 212, 255, 0.12),
            inset 0 1px 1px 0 rgba(255, 255, 255, 0.12);
        pointer-events: auto;
        transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    header.scrolled .mobile-top-bar {
        background: rgba(5, 8, 16, 0.96);
        border-color: rgba(0, 212, 255, 0.35);
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.85),
            0 0 24px rgba(0, 212, 255, 0.16);
    }

    /* ── BRAND LOGO & TEXT IN MOBILE TOP BAR ── */
    .mobile-brand {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        font-family: 'Space Grotesk', 'Orbitron', system-ui, -apple-system, sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: #ffffff;
        user-select: none;
        pointer-events: auto;
    }

    .mobile-brand .brand-logo-svg,
    .mobile-brand .brand-logo-img {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        object-fit: cover;
        filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.75));
        transition: transform 0.3s var(--ease-spring), filter 0.3s ease;
    }

    .mobile-brand:hover .brand-logo-svg,
    .mobile-brand:hover .brand-logo-img,
    .mobile-brand:active .brand-logo-svg,
    .mobile-brand:active .brand-logo-img {
        transform: rotate(15deg) scale(1.1);
        filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.95)) drop-shadow(0 0 20px rgba(136, 85, 255, 0.5));
    }

    .mobile-brand span {
        background: linear-gradient(135deg, #ffffff 15%, #67e8f9 60%, #c084fc 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
        font-size: 1.02rem;
        line-height: 1;
        filter: drop-shadow(0 2px 8px rgba(0, 212, 255, 0.35));
    }

    /* ── MOBILE TOP ACTIONS (Theme quick toggle & Hamburger) ── */
    .mobile-top-actions {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

    .mobile-top-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(0, 212, 255, 0.20);
        color: var(--text);
        font-size: 0.95rem;
        cursor: pointer;
        transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
        pointer-events: auto;
    }

    .mobile-top-btn:hover,
    .mobile-top-btn:active {
        background: rgba(0, 212, 255, 0.16);
        border-color: rgba(0, 212, 255, 0.5);
        color: var(--clr-primary-lt);
        box-shadow: 0 0 14px rgba(0, 212, 255, 0.35);
        transform: scale(1.05);
    }

    .mobile-menu-toggle {
        display: inline-flex !important;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        background: rgba(0, 212, 255, 0.12);
        border: 1px solid rgba(0, 212, 255, 0.35);
        color: #ffffff;
        font-size: 1rem;
        cursor: pointer;
        box-shadow: 0 0 14px rgba(0, 212, 255, 0.25);
        transition: all 0.25s var(--ease-spring);
        pointer-events: auto;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:active,
    .mobile-menu-toggle.active {
        background: var(--clr-grad);
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 0 20px var(--clr-glow);
        transform: scale(1.06);
    }

    .desktop-brand {
        display: none !important;
    }

    .nav-actions {
        display: none !important;
    }

    /* ── LIGHT THEME FOR MOBILE TOP BAR ── */
    [data-theme="light"] .mobile-top-bar,
    body.light-theme .mobile-top-bar {
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(0, 136, 204, 0.24) !important;
        box-shadow: 0 8px 24px rgba(0, 40, 90, 0.10),
            0 0 18px rgba(0, 136, 204, 0.08),
            inset 0 1px 1px 0 rgba(255, 255, 255, 0.95) !important;
    }

    [data-theme="light"] .mobile-brand span,
    body.light-theme .mobile-brand span {
        background: linear-gradient(135deg, #090d1a 10%, #0284c7 60%, #7c3aed 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 1px 3px rgba(0, 136, 204, 0.25)) !important;
    }

    [data-theme="light"] .mobile-top-btn,
    body.light-theme .mobile-top-btn {
        background: rgba(0, 0, 0, 0.04) !important;
        border: 1px solid rgba(0, 136, 204, 0.20) !important;
        color: #1e293b !important;
    }

    [data-theme="light"] .mobile-top-btn:hover,
    [data-theme="light"] .mobile-top-btn:active,
    body.light-theme .mobile-top-btn:hover,
    body.light-theme .mobile-top-btn:active {
        background: rgba(0, 136, 204, 0.12) !important;
        color: #0284c7 !important;
        border-color: #0284c7 !important;
    }

    [data-theme="light"] .mobile-menu-toggle,
    body.light-theme .mobile-menu-toggle {
        background: rgba(2, 132, 199, 0.10) !important;
        border: 1px solid rgba(2, 132, 199, 0.30) !important;
        color: #0284c7 !important;
    }

    [data-theme="light"] .mobile-menu-toggle.active,
    [data-theme="light"] .mobile-menu-toggle:hover,
    body.light-theme .mobile-menu-toggle.active,
    body.light-theme .mobile-menu-toggle:hover {
        background: var(--clr-grad) !important;
        color: #ffffff !important;
        border-color: transparent !important;
    }

    /* ── HIGH CONTRAST MOBILE TOP BAR ── */
    body.high-contrast .mobile-top-bar {
        background: #000000 !important;
        border: 2px solid #00ffff !important;
        box-shadow: none !important;
    }

    body.high-contrast .mobile-top-btn,
    body.high-contrast .mobile-menu-toggle {
        background: #000000 !important;
        border: 2px solid #00ffff !important;
        color: #00ffff !important;
    }

    /* ── MOBILE SLIDE-OUT DRAWER ── */
    body.nav-open {
        overflow: hidden;
    }

    body.nav-open::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-modal) - 1);
        background: rgba(2, 6, 18, 0.75);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: block !important;
        opacity: 1 !important;
    }

    .section-nav {
        display: none !important;
    }

    .nav-container {
        position: fixed !important;
        top: 0;
        right: -100%;
        width: min(86vw, 320px);
        height: 100vh;
        height: 100dvh;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: calc(18px + env(safe-area-inset-top, 0px)) 18px max(20px, env(safe-area-inset-bottom, 16px)) !important;
        border-radius: 24px 0 0 24px !important;
        background: rgba(10, 15, 28, 0.96) !important;
        backdrop-filter: blur(24px) saturate(190%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
        border-left: 1px solid rgba(0, 212, 255, 0.25) !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
        box-shadow: none;
        transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        z-index: var(--z-modal) !important;
        display: flex !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto !important;
    }

    .nav-container.active {
        right: 0 !important;
        box-shadow: -12px 0 44px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 212, 255, 0.15) !important;
    }

    .nav-indicator {
        display: none !important;
    }

    /* Drawer Header */
    .drawer-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0 4px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 8px;
    }

    .drawer-logo {
        font-size: 1.25rem;
        padding: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: 'Space Grotesk', 'Orbitron', system-ui, sans-serif;
        font-weight: 700;
        color: #ffffff;
    }

    .drawer-logo span {
        background: linear-gradient(135deg, #ffffff 15%, #67e8f9 60%, #c084fc 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .drawer-close-btn {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(0, 212, 255, 0.22);
        color: var(--text);
        font-size: 1.1rem;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--t-fast);
    }

    .drawer-close-btn:hover,
    .drawer-close-btn:active {
        background: var(--clr-primary);
        color: #000;
        box-shadow: 0 0 14px var(--clr-glow);
    }

    /* Mobile Drawer Links */
    .nav-container .nav-link {
        padding: 12px 16px !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        color: var(--text-secondary) !important;
        text-decoration: none !important;
        min-height: 44px !important;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
    }

    .mobile-only-link {
        display: flex !important;
    }

    .mobile-icon {
        display: inline-flex !important;
    }

    .nav-container .nav-link i {
        font-size: 1rem;
        width: 22px;
        text-align: center;
        color: var(--clr-primary);
        transition: transform 0.2s ease;
        display: inline-flex !important;
    }

    .nav-container .nav-link:hover,
    .nav-container .nav-link.active {
        background: rgba(0, 212, 255, 0.12) !important;
        color: #ffffff !important;
        border-color: rgba(0, 212, 255, 0.35) !important;
        box-shadow: 0 4px 16px rgba(0, 212, 255, 0.20) !important;
        transform: translateX(3px);
    }

    .nav-container .nav-link.active i {
        transform: scale(1.12);
        filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.8));
    }

    /* Drawer Footer (Translate, Theme & Contrast toggles) */
    .drawer-footer {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-top: auto !important;
        padding-top: 16px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        width: 100% !important;
    }

    .drawer-footer .drawer-btn,
    .drawer-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 44px !important;
        padding: 10px 14px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(0, 212, 255, 0.22) !important;
        color: var(--text) !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: var(--t-fast) !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .drawer-footer .drawer-btn i,
    .drawer-btn i {
        font-size: 0.95rem !important;
        width: auto !important;
        margin: 0 !important;
        color: var(--clr-primary) !important;
        display: inline-block !important;
        transform: none !important;
    }

    .drawer-footer .drawer-btn:hover,
    .drawer-footer .drawer-btn:active,
    .drawer-btn:hover,
    .drawer-btn:active {
        background: var(--clr-primary) !important;
        color: #000 !important;
        border-color: var(--clr-primary) !important;
        box-shadow: 0 0 14px var(--clr-glow) !important;
    }

    .drawer-footer .drawer-btn:hover i,
    .drawer-footer .drawer-btn:active i,
    .drawer-btn:hover i,
    .drawer-btn:active i {
        color: #000 !important;
    }

    /* Light Mode Overrides for Drawer */
    [data-theme="light"] .nav-container,
    body.light-theme .nav-container {
        background: rgba(255, 255, 255, 0.97) !important;
        border-left: 1px solid rgba(0, 136, 204, 0.25) !important;
        box-shadow: -10px 0 36px rgba(0, 30, 80, 0.12) !important;
    }

    [data-theme="light"] .drawer-header,
    body.light-theme .drawer-header {
        border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    }

    [data-theme="light"] .drawer-logo span,
    body.light-theme .drawer-logo span {
        background: linear-gradient(135deg, #090d1a 10%, #0284c7 60%, #7c3aed 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    [data-theme="light"] .drawer-close-btn,
    body.light-theme .drawer-close-btn {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(0, 136, 204, 0.2) !important;
        color: #1e293b !important;
    }

    [data-theme="light"] .nav-container .nav-link,
    body.light-theme .nav-container .nav-link {
        background: rgba(0, 0, 0, 0.02) !important;
        border-color: rgba(0, 0, 0, 0.06) !important;
        color: #475569 !important;
    }

    [data-theme="light"] .nav-container .nav-link i,
    body.light-theme .nav-container .nav-link i {
        color: #0284c7 !important;
    }

    [data-theme="light"] .nav-container .nav-link:hover,
    [data-theme="light"] .nav-container .nav-link.active,
    body.light-theme .nav-container .nav-link:hover,
    body.light-theme .nav-container .nav-link.active {
        background: rgba(2, 132, 199, 0.12) !important;
        border-color: rgba(2, 132, 199, 0.3) !important;
        color: #0284c7 !important;
        box-shadow: 0 4px 16px rgba(2, 132, 199, 0.15) !important;
    }

    [data-theme="light"] .drawer-footer,
    body.light-theme .drawer-footer {
        border-top-color: rgba(0, 0, 0, 0.08) !important;
    }

    [data-theme="light"] .drawer-btn,
    body.light-theme .drawer-btn {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(0, 136, 204, 0.2) !important;
        color: #1e293b !important;
    }

    [data-theme="light"] .drawer-btn:hover,
    [data-theme="light"] .drawer-btn:active,
    body.light-theme .drawer-btn:hover,
    body.light-theme .drawer-btn:active {
        background: #0284c7 !important;
        color: #ffffff !important;
        border-color: #0284c7 !important;
    }

    .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .blog-grid,
    .testimonial-slider {
        grid-template-columns: 1fr;
    }

    .social-icons {
        justify-content: center;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-input {
        width: 100%;
    }

    .chat-box {
        width: min(355px, calc(100vw - 32px));
        right: 16px;
        bottom: calc(84px + env(safe-area-inset-bottom));
    }

    .routine-item.glass-card {
        padding-top: 28px;
    }

    section,
    .section-transition {
        padding: 42px 14px;
    }

    .glass-card,
    .testimonial-card.glass-card {
        padding: 18px 16px;
    }

    /* AI Agents Sliding Strip Mobile Optimization */
    .ai-strip-container {
        padding: 16px 12px 18px !important;
        margin-bottom: 20px !important;
        border-radius: 18px !important;
    }

    .ai-strip-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
    }

    .ai-strip-title h3 {
        font-size: 1.02rem !important;
    }

    .ai-strip-sub {
        font-size: 0.68rem !important;
        padding: 3px 10px !important;
    }

    .ai-marquee-track {
        gap: 10px !important;
        animation-duration: 35s !important;
    }

    .ai-agent-item {
        padding: 7px 12px !important;
        gap: 9px !important;
        border-radius: 14px !important;
    }

    .ai-agent-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.95rem !important;
        border-radius: 8px !important;
    }

    .ai-agent-name {
        font-size: 0.76rem !important;
    }

    .ai-agent-creator {
        font-size: 0.62rem !important;
    }

    .repo-stats,
    .publication-stats {
        flex-direction: column;
        gap: 8px;
    }

    /* ── MOBILE OPTIMIZATION: "MY IMPACT" & "OVERALL GITHUB CONTRIBUTIONS" ── */
    #stats .testimonial-card,
    #stats.section-transition,
    .github-stats-large {
        padding: 20px 14px !important;
        border-radius: 20px !important;
        margin-top: 20px !important;
    }

    .github-stats-large h3,
    #stats .section-title {
        font-size: clamp(1.15rem, 4.5vw, 1.35rem) !important;
        text-align: center !important;
        margin-bottom: 16px !important;
    }

    #stats .stats-grid,
    .github-stats-large .stats-grid,
    #open-source .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #stats .stat-card,
    .github-stats-large .stat-box,
    .stat-card,
    .stat-box {
        padding: 16px 10px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
        min-height: 96px !important;
        box-sizing: border-box !important;
    }

    #stats .stat-number,
    .github-stats-large .stat-number,
    .stat-number {
        font-size: clamp(1.45rem, 5.2vw, 1.85rem) !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        margin-bottom: 6px !important;
        letter-spacing: -0.5px !important;
    }

    #stats .stat-label,
    .github-stats-large .stat-label,
    .stat-label {
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
        letter-spacing: 0.6px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        margin: 0 !important;
    }

    [data-theme="light"] #stats .stat-card,
    [data-theme="light"] .github-stats-large .stat-box,
    body.light-theme #stats .stat-card,
    body.light-theme .github-stats-large .stat-box {
        background: rgba(255, 255, 255, 0.85) !important;
        border: 1px solid rgba(0, 136, 204, 0.18) !important;
        box-shadow: 0 4px 14px rgba(0, 30, 80, 0.06) !important;
    }

    [data-theme="light"] #stats .stat-label,
    [data-theme="light"] .github-stats-large .stat-label,
    body.light-theme #stats .stat-label,
    body.light-theme .github-stats-large .stat-label {
        color: #000000 !important;
    }

    [data-theme="dark"] #stats .stat-label,
    [data-theme="dark"] .github-stats-large .stat-label,
    body.dark-theme #stats .stat-label,
    body.dark-theme .github-stats-large .stat-label {
        color: #cbd5e1 !important;
    }

    .gradients-container,
    .spotlight {
        opacity: .25;
    }
}

@media (max-width:480px) {

    /* NEW REFINED 480px HERO & COMPACT BUTTON SIZING */
    .hero {
        padding: calc(20px + env(safe-area-inset-top, 0px)) 12px calc(80px + env(safe-area-inset-bottom, 12px)) !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .hero-buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .hero-btn,
    .cta-button {
        width: auto;
        min-width: 120px;
        flex: 1 1 auto;
        max-width: 160px;
        justify-content: center;
        padding: 6px 14px !important;
        font-size: 0.78rem !important;
        min-height: 34px !important;
    }

    .loader-shell {
        width: calc(100vw - 28px);
        padding: 26px 22px;
        border-radius: 22px;
    }

    .loader-kicker {
        margin-top: 32px;
        letter-spacing: .11em;
        font-size: .64rem;
    }

    .loader-title {
        font-size: clamp(1.8rem, 10vw, 2.7rem);
    }

    .loader-progress-row {
        gap: 14px;
        margin-top: 28px;
    }

    .loader-progress-ring {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
    }

    .loader-footer {
        flex-direction: column;
        gap: 8px;
        margin-top: 26px;
    }

    .site-notice {
        bottom: calc(16px + env(safe-area-inset-bottom));
        border-radius: 16px;
    }

    section,
    .section-transition {
        padding: 34px 12px;
    }

    .glass-card,
    .testimonial-card.glass-card {
        padding: 16px 12px;
    }
}

/* ── Mobile performance ── */
@media (max-width:768px) {

    .gradients-container {
        display: block !important;
        opacity: .40;
        filter: blur(50px);
    }

    .gradient-3,
    .gradient-4,
    .gradient-5,
    .spotlight {
        display: none !important;
    }

    .gradient-1,
    .gradient-2 {
        animation-duration: 38s;
    }

    .falling-stars {
        display: none !important;
    }

    .gradient-bg {
        animation: none !important;
    }

    .glass-card {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .cursor-dot,
    .cursor-outline,
    .cursor-trail {
        display: none !important;
    }

    /* Keep a quiet, simplified depth layer on mobile. The scene itself uses
       the low-detail tier; hiding it entirely breaks the continuous journey. */
    .hero-3d-container {
        display: block !important;
        opacity: .46;
    }

    .webgl-3d-canvas {
        opacity: .54 !important;
    }
}

/* ── Large screen nav show ── */
@media (min-width:769px) {
    .section-nav {
        display: flex;
    }
}

/* ============================================================
   31. ACCESSIBILITY, PRINT & HIGH-CONTRAST MODES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto !important;
    }

    /* Disable heavy decorative background loops & high-frequency animations */
    .animated-bg,
    .particles,
    .gradients-container,
    .falling-stars,
    .spotlight {
        display: none !important;
        animation: none !important;
    }
}

/* ============================================================
   FLOATING BOTTOM NAVIGATION (MOBILE) - FALLBACK STYLING
   ============================================================ */
.bottom-nav-mobile {
    position: fixed;
    bottom: max(14px, env(safe-area-inset-bottom, 14px));
    left: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--z-modal) + 10);
    display: none;

    background: rgba(8, 8, 8, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.75),
        0 0 24px rgba(0, 212, 255, 0.06),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.12);
    padding: 4px 6px;
    max-width: 370px;
    width: min(calc(100% - 32px), 370px);
    transition: transform 0.35s cubic-bezier(.16, 1, .30, 1),
        opacity 0.35s cubic-bezier(.16, 1, .30, 1),
        bottom 0.3s ease;
}

/* Auto-hide on scroll down, show on scroll up */
.bottom-nav-mobile.hidden {
    transform: translateX(-50%) translateY(90px);
    opacity: 0;
    pointer-events: none;
}

.bottom-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2px;
    width: 100%;
}

.bottom-nav-mobile,
.bottom-nav-mobile * {
    pointer-events: auto !important;
}

.bottom-nav-link,
.bottom-nav-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px 5px;
    min-width: 0;
    border-radius: 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.58rem;
    font-weight: 500;
    cursor: pointer !important;
    z-index: 99999 !important;
    position: relative !important;
    touch-action: manipulation;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    flex: 1 1 0;
}

.bottom-nav-link i,
.bottom-nav-more i {
    font-size: 1.02rem;
    transition: transform 0.25s ease, filter 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.bottom-nav-link span,
.bottom-nav-more span {
    font-size: 0.58rem;
    letter-spacing: 0.2px;
    line-height: 1.1;
    font-weight: 500;
}

/* Active state with compact glowing pill */
.bottom-nav-link.active {
    color: var(--clr-primary);
    background: rgba(0, 212, 255, 0.09);
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.08);
}

.bottom-nav-link.active i {
    transform: scale(1.06);
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.5));
}

/* Active indicator dot/pill under icon */
.bottom-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--clr-grad);
    box-shadow: 0 0 8px var(--clr-glow);
}

/* More button */
.bottom-nav-more {
    color: var(--text-secondary);
}

.bottom-nav-more.active {
    color: var(--clr-primary);
    background: rgba(0, 212, 255, 0.09);
}

/* Mobile bottom nav backdrop overlay */
.bottom-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: calc(var(--z-modal) + 9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

.bottom-nav-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Dropdown (More menu) */
.bottom-nav-dropdown {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 8px;
    background: var(--c-surface-solid);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: var(--glass-border);
    border-radius: 18px;
    padding: 8px 0;
    min-width: 190px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 28px var(--clr-glow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.16, 1, .30, 1), visibility 0.25s ease;
    transform-origin: bottom right;
    z-index: calc(var(--z-modal) + 12);
}

.bottom-nav-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.bottom-nav-dropdown-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
    font-family: inherit;
    text-align: left;
}

.bottom-nav-dropdown-link:hover,
.bottom-nav-dropdown-link:focus {
    background: rgba(0, 212, 255, 0.08);
    color: var(--clr-primary);
}

.bottom-nav-dropdown-link i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    color: var(--clr-primary);
}

.bottom-nav-divider {
    height: 1px;
    margin: 6px 16px;
    background: var(--c-border);
}

/* Light Theme Mobile Bottom Nav */
[data-theme="light"] .bottom-nav-mobile,
body.light-theme .bottom-nav-mobile {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(0, 136, 204, 0.25) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12),
        0 0 20px rgba(0, 136, 204, 0.10) !important;
}

[data-theme="light"] .bottom-nav-dropdown,
body.light-theme .bottom-nav-dropdown {
    background: #ffffff !important;
    border: 1px solid rgba(0, 136, 204, 0.22) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14) !important;
}

[data-theme="light"] .bottom-nav-backdrop,
body.light-theme .bottom-nav-backdrop {
    background: rgba(0, 15, 35, 0.35);
}

[data-theme="light"] .bottom-nav-link,
[data-theme="light"] .bottom-nav-more,
body.light-theme .bottom-nav-link,
body.light-theme .bottom-nav-more {
    color: #475569 !important;
}

[data-theme="light"] .bottom-nav-link i,
[data-theme="light"] .bottom-nav-more i,
body.light-theme .bottom-nav-link i,
body.light-theme .bottom-nav-more i {
    color: #475569 !important;
}

[data-theme="light"] .bottom-nav-link span,
[data-theme="light"] .bottom-nav-more span,
body.light-theme .bottom-nav-link span,
body.light-theme .bottom-nav-more span {
    color: #475569 !important;
}

[data-theme="light"] .bottom-nav-link.active,
[data-theme="light"] .bottom-nav-more.active,
body.light-theme .bottom-nav-link.active,
body.light-theme .bottom-nav-more.active {
    color: #0088cc !important;
    background: rgba(0, 136, 204, 0.12) !important;
}

[data-theme="light"] .bottom-nav-link.active i,
[data-theme="light"] .bottom-nav-more.active i,
body.light-theme .bottom-nav-link.active i,
body.light-theme .bottom-nav-more.active i,
[data-theme="light"] .bottom-nav-link.active span,
[data-theme="light"] .bottom-nav-more.active span,
body.light-theme .bottom-nav-link.active span,
body.light-theme .bottom-nav-more.active span {
    color: #0088cc !important;
}

@media (max-width: 768px) {
    :root {
        --blur: blur(8px) !important;
    }

    /* Reduce expensive stacked box-shadows on mobile GPUs */
    .glass-card,
    .testimonial-card,
    .service-card,
    .project-card,
    .card {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    }

    /* Disable desktop cursor overhead on touch devices */
    .cursor-dot,
    .cursor-outline,
    .cursor-trail {
        display: none !important;
    }

    body {
        padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    }

    .bottom-nav-mobile,
    .bottom-nav-backdrop,
    .bottom-nav-dropdown {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    section,
    .section-transition {
        scroll-margin-top: 76px;
        scroll-margin-bottom: 90px;
    }

    /* RESTORED RESPONSIVE MOBILE SECTION CONTAINER */
    .container.testimonial-card.glass-card {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 28px 18px !important;
        border-radius: 22px !important;
    }

    .container.testimonial-card.glass-card>.breadcrumb {
        margin-bottom: 12px !important;
    }

    .p-lg {
        padding: 18px 16px !important;
    }

    .m-md {
        margin-top: 14px !important;
        margin-bottom: 14px !important;
    }
}

@media (max-width: 420px) {

    .bottom-nav-mobile {
        display: none !important;
        visibility: hidden !important;
    }

    .mobile-top-bar {
        padding: 5px 8px 5px 12px !important;
    }

    .mobile-brand {
        font-size: 0.98rem !important;
        gap: 6px !important;
    }

    .mobile-brand .brand-logo-svg {
        width: 20px !important;
        height: 20px !important;
    }

    .mobile-top-btn,
    .mobile-menu-toggle {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.9rem !important;
    }

    .bottom-nav-link span,
    .bottom-nav-more span {
        font-size: 0.52rem;
        letter-spacing: 0.1px;
    }

    .bottom-nav-link i,
    .bottom-nav-more i {
        font-size: 0.94rem;
    }

    .bottom-nav-link,
    .bottom-nav-more {
        padding: 4px 2px 4px;
        min-width: 30px;
        border-radius: 12px;
    }

    .bottom-nav-link.active::after {
        width: 10px;
        height: 2px;
        bottom: 2px;
    }

    .container.testimonial-card.glass-card,
    .section-transition>.container.testimonial-card.glass-card,
    section>.container.testimonial-card.glass-card {
        width: calc(100% - 16px) !important;
        padding: clamp(18px, 4vw, 24px) clamp(12px, 3vw, 16px) !important;
        border-radius: 18px !important;
    }
}

/* PRINT BLOCKING: Prevent page printing, saving to PDF, or paper scraping */
@media print {
    html,
    body {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }
}

/* ============================================================
   FINAL RESPONSIVE NORMALIZATION
   Keeps sizing predictable after the legacy responsive layers above.
   ============================================================ */
@media screen {
    :root {
        --layout-gutter: clamp(12px, 3.5vw, 32px);
    }

    html,
    body {
        overflow-x: hidden;
        overflow-x: clip;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    header,
    .navbar {
        padding-inline: clamp(12px, 3vw, 24px);
    }

    .nav-container {
        max-width: calc(100vw - 32px);
        gap: clamp(1px, .35vw, 6px);
    }

    .nav-link {
        min-height: 44px;
        padding: 8px clamp(8px, 1.15vw, 15px);
        font-size: clamp(.72rem, .68rem + .2vw, .9rem);
        white-space: nowrap;
    }

    .hero {
        padding-inline: var(--layout-gutter);
    }

    .hero-content {
        width: min(820px, calc(100% - 16px));
        padding: clamp(28px, 4vw, 52px) clamp(22px, 4vw, 52px) clamp(24px, 3vw, 38px);
        border-radius: clamp(24px, 3vw, 36px);
    }

    .hero-title-fade-in {
        font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.35rem);
        line-height: 1.18;
    }

    .hero-description {
        padding: clamp(14px, 2vw, 18px) clamp(18px, 2.5vw, 28px);
        font-size: clamp(.92rem, .85rem + .35vw, 1.14rem);
    }

    .skills-carousel {
        width: min(100%, 720px);
    }

    .hero-buttons {
        width: min(100%, 680px);
        gap: clamp(8px, 1.4vw, 16px);
        padding: clamp(10px, 1.4vw, 14px) clamp(12px, 2vw, 24px);
    }

    .hero-btn {
        min-height: 44px;
    }

    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        gap: clamp(16px, 2.5vw, 26px);
    }

    .project-img {
        width: 100%;
        height: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .project-content,
    .blog-content {
        padding: clamp(18px, 2.2vw, 24px);
    }

    .blog-grid,
    .testimonial-slider {
        gap: clamp(16px, 2vw, 24px);
    }

    .blog-image {
        width: 100%;
        height: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .author-avatar,
    .author-img {
        width: clamp(42px, 4vw, 48px);
        height: clamp(42px, 4vw, 48px);
        aspect-ratio: 1 / 1;
        flex: 0 0 clamp(42px, 4vw, 48px);
        flex-shrink: 0;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .hero {
        padding: 68px 20px;
    }

    .hero-content {
        width: min(720px, calc(100% - 28px));
        padding: 34px 34px 28px;
    }

    .hero-title-fade-in {
        font-size: clamp(1.75rem, 3.8vw, 2.35rem);
    }

    .hero-description {
        padding: 14px 20px;
        margin-bottom: 14px;
    }

    .skills-carousel {
        margin-bottom: 14px;
    }

    .profile-container {
        max-width: 380px;
    }

    .image-carousel {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .hero-buttons {
        max-width: 600px;
    }

    .nav-container {
        max-width: calc(100vw - 24px);
    }

    .about-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .grid-item-large {
        grid-column: span 2 !important;
    }

    .tech-stack-categories {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .routine-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .routine-item-wide {
        grid-column: span 2 !important;
    }

    .habits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
}

@media screen and (max-width: 768px) {
    body {
        padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    }

    .hero {
        padding: calc(48px + env(safe-area-inset-top, 0px)) 10px calc(48px + env(safe-area-inset-bottom, 12px)) !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .hero-content {
        width: min(calc(100% - 16px), 460px) !important;
        max-width: 460px !important;
        padding: 16px 14px 14px !important;
        border-radius: 22px !important;
        margin: auto !important;
    }

    .hero-subtitle,
    .hero-subtitle.fade-in {
        margin-bottom: 8px !important;
        padding: 3px 12px !important;
        font-size: 0.65rem !important;
    }

    .hero-title-fade-in {
        font-size: clamp(1.05rem, 0.85rem + 1.8vw, 1.45rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
        min-height: auto !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.28em !important;
        flex-wrap: nowrap !important;
    }

    .hero-description {
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        font-size: .78rem !important;
        line-height: 1.45 !important;
    }

    .hero-description .bouncing-text {
        padding: 0 2px !important;
        font-size: .78rem !important;
        line-height: 1.45 !important;
    }

    .skills-carousel {
        margin: 6px 0 8px !important;
    }

    .profile-container {
        width: min(280px, 82vw) !important;
        max-width: 280px !important;
        margin: 8px auto 10px !important;
    }

    .image-carousel {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        border-radius: 16px !important;
    }

    .hero-buttons {
        gap: 7px !important;
        margin-top: 8px !important;
        padding: 6px !important;
        border-radius: 16px !important;
    }

    /* About Section Mobile Responsive Refinement */
    .about-mission-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px 16px !important;
    }

    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .grid-item-large {
        grid-column: span 1 !important;
    }

    .grid-item {
        padding: 18px 16px !important;
    }

    .timeline-container {
        padding: 18px 14px !important;
    }

    .timeline-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Tech Stack Mobile Responsive Refinement */
    .tech-stack-intro {
        margin-bottom: 20px !important;
    }

    .tech-stack-categories {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .tech-category {
        padding: 18px 16px !important;
    }

    .tech-cat-header {
        margin-bottom: 14px !important;
        padding-bottom: 10px !important;
    }

    .tech-icons {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .tech-item {
        padding: 10px 4px !important;
        min-height: 72px !important;
    }

    .tech-item i {
        font-size: 1.4rem !important;
    }

    .tech-item span {
        font-size: 0.65rem !important;
    }

    /* Routine & Habits Mobile Responsive Refinement */
    .routine-intro {
        margin-bottom: 20px !important;
    }

    .routine-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .routine-item-wide {
        grid-column: span 1 !important;
    }

    .routine-item {
        padding: 16px 14px !important;
    }

    .habits-section {
        padding: 18px 14px !important;
        margin-top: 22px !important;
    }

    .habits-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .habit-item {
        padding: 12px 14px !important;
    }

    /* Projects Mobile Responsive Refinement */
    .projects-intro {
        margin-bottom: 18px !important;
    }

    .projects-summary {
        font-size: 0.84rem !important;
        line-height: 1.55 !important;
    }

    /* Filter pills: horizontal smooth swipe with no clipping */
    .project-filters {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin-bottom: 22px !important;
        padding: 4px 6px 12px 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .project-filters::-webkit-scrollbar {
        display: none !important;
    }

    .filter-btn {
        flex: 0 0 auto !important;
        min-height: 34px !important;
        padding: 6px 14px !important;
        font-size: 0.76rem !important;
        white-space: nowrap !important;
    }

    /* Portfolio Featured Carousel Mobile Optimization */
    .portfolio-carousel {
        margin-bottom: 24px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .portfolio-carousel .embla,
    .portfolio-carousel .swiper {
        aspect-ratio: 16 / 9 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 220px !important;
        position: relative !important;
    }

    .portfolio-carousel .embla__slide,
    .portfolio-carousel .swiper-slide {
        aspect-ratio: 16 / 9 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .portfolio-carousel .embla__slide img,
    .portfolio-carousel .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Mobile Slide Content: Scaled typography & gradient protection */
    .portfolio-carousel .slide-content {
        padding: 14px 14px 12px 14px !important;
        background: linear-gradient(180deg, transparent 0%, rgba(4, 6, 15, 0.45) 25%, rgba(4, 6, 15, 0.92) 80%, rgba(4, 6, 15, 0.98) 100%) !important;
        gap: 4px !important;
        max-width: 100% !important;
    }

    .portfolio-carousel .slide-title {
        font-size: clamp(0.95rem, 0.85rem + 1vw, 1.15rem) !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        max-width: 82% !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
    }

    .portfolio-carousel .slide-desc {
        font-size: 0.74rem !important;
        line-height: 1.35 !important;
        margin: 0 0 6px 0 !important;
        color: rgba(255, 255, 255, 0.88) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        max-width: 85% !important;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8) !important;
    }

    .portfolio-carousel .slide-content .cta-button {
        font-size: 0.74rem !important;
        padding: 6px 14px !important;
        min-height: 32px !important;
        height: 32px !important;
        min-width: 110px !important;
        box-shadow: 0 3px 12px rgba(0, 212, 255, 0.4) !important;
    }

    /* Compact Mobile Navigation Arrows (Placed neatly on sides without obscuring center content) */
    .portfolio-carousel .embla__prev,
    .portfolio-carousel .embla__next,
    .portfolio-carousel .swiper-button-prev,
    .portfolio-carousel .swiper-button-next {
        width: 32px !important;
        height: 32px !important;
        background: rgba(10, 15, 28, 0.82) !important;
        border: 1px solid rgba(0, 212, 255, 0.45) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
        top: 50% !important;
    }

    .portfolio-carousel .embla__prev,
    .portfolio-carousel .swiper-button-prev {
        left: 8px !important;
    }

    .portfolio-carousel .embla__next,
    .portfolio-carousel .swiper-button-next {
        right: 8px !important;
    }

    .portfolio-carousel .embla__prev::after,
    .portfolio-carousel .swiper-button-prev::after,
    .portfolio-carousel .embla__next::after,
    .portfolio-carousel .swiper-button-next::after {
        font-size: 0.7rem !important;
    }

    /* Carousel Pagination Dots on Mobile */
    .portfolio-carousel .embla__dots,
    .portfolio-carousel .swiper-pagination {
        bottom: 8px !important;
        right: 12px !important;
        left: auto !important;
        gap: 5px !important;
    }

    .portfolio-carousel .embla__dot,
    .portfolio-carousel .swiper-pagination-bullet {
        width: 6px !important;
        height: 6px !important;
    }

    /* Mobile Projects Grid */
    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .project-card {
        border-radius: 16px !important;
    }

    .project-card .image-hover-zoom {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .project-card .project-img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
    }

    .project-card .project-badge {
        top: 10px !important;
        right: 10px !important;
        padding: 4px 10px !important;
        font-size: 0.68rem !important;
    }

    .project-content {
        padding: 16px 14px !important;
        gap: 10px !important;
    }

    .project-title {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
    }

    .project-desc {
        font-size: 0.8rem !important;
        line-height: 1.55 !important;
    }

    .tech-tag {
        font-size: 0.68rem !important;
        padding: 3px 8px !important;
    }

    .project-links {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 6px !important;
        padding-top: 12px !important;
    }

    .project-links .case-study-btn {
        grid-column: span 2 !important;
    }

    .project-btn {
        width: 100% !important;
        min-height: 38px !important;
        font-size: 0.76rem !important;
        padding: 8px 10px !important;
    }

    .hero-buttons .hero-btn,
    .hero-btn {
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px !important;
        padding: 8px 10px !important;
        font-size: .78rem !important;
        flex: 1 1 0 !important;
    }

    /* Loading Screen Mobile Responsive Refinement */
    .loader-shell {
        width: min(94vw, 520px) !important;
        padding: 22px 18px !important;
        border-radius: 22px !important;
    }

    .loader-brand {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .loader-clarity-badge {
        margin-left: 0 !important;
        font-size: 0.68rem !important;
        padding: 4px 10px !important;
    }

    .loader-title {
        font-size: clamp(1.45rem, 6vw, 1.95rem) !important;
        line-height: 1.15 !important;
    }

    .loader-subtitle {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
        margin-top: 10px !important;
    }

    .loader-progress-row {
        gap: 14px !important;
        margin-top: 24px !important;
    }

    .loader-progress-ring {
        flex: 0 0 68px !important;
        width: 68px !important;
        height: 68px !important;
    }

    .loader-progress-ring>span {
        font-size: 0.78rem !important;
    }

    .bottom-nav-mobile {
        width: min(calc(100% - 20px), 372px) !important;
        max-width: 372px !important;
        bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
        padding: 5px 7px !important;
        border-radius: 22px !important;
    }

    .bottom-nav-link,
    .bottom-nav-more {
        min-height: 48px;
        padding: 6px 3px 5px !important;
    }

    .bottom-nav-link i,
    .bottom-nav-more i {
        font-size: 1.05rem !important;
    }

    .bottom-nav-link span,
    .bottom-nav-more span {
        font-size: .58rem !important;
        line-height: 1.1;
    }

    .cookie-banner {
        bottom: calc(72px + env(safe-area-inset-bottom, 10px)) !important;
        width: min(calc(100% - 24px), 360px) !important;
        max-width: 360px !important;
        padding: 11px 14px !important;
        gap: 7px !important;
    }

    .cookie-banner h4 {
        font-size: .78rem !important;
    }

    .cookie-banner p,
    .cookie-banner .elegant-text {
        font-size: .70rem !important;
        line-height: 1.35 !important;
    }

    .cookie-banner .hero-btn {
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: .72rem !important;
    }
}

@media screen and (min-width: 421px) and (max-width: 1024px) {

    /* Tablet privacy notice: compact enough to clear the centered hero actions. */
    .cookie-banner {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(calc(100% - 32px), 460px) !important;
        max-width: 460px !important;
        padding: 12px 16px !important;
        gap: 8px !important;
    }

    .cookie-banner h4 {
        font-size: .9rem !important;
        margin: 0 !important;
    }

    .cookie-banner p,
    .cookie-banner .elegant-text {
        font-size: .76rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    .cookie-banner .hero-btn {
        height: 38px !important;
        min-height: 38px !important;
        padding: 7px 14px !important;
        font-size: .76rem !important;
        line-height: 1 !important;
    }
}

@media screen and (max-width: 420px) {
    .hero {
        padding-inline: 8px !important;
    }

    .hero-content {
        width: calc(100% - 16px) !important;
        padding-inline: 14px !important;
    }

    .hero-title-fade-in {
        font-size: clamp(0.95rem, 0.75rem + 1.6vw, 1.25rem) !important;
        line-height: 1.25 !important;
        min-height: auto !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.25em !important;
        flex-wrap: nowrap !important;
    }

    .hero-buttons {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .hero-buttons .hero-btn,
    .hero-btn {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-height: 44px !important;
    }

    .profile-container {
        width: min(260px, calc(100vw - 36px)) !important;
        max-width: 260px !important;
    }

    .image-carousel {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
    }

    .bottom-nav-mobile {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        padding-inline: 5px !important;
    }

    .bottom-nav-link span,
    .bottom-nav-more span {
        font-size: .56rem !important;
    }

    .cookie-banner {
        padding: 10px 14px !important;
        gap: 6px !important;
    }

    .cookie-banner h4 {
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
    }

    .cookie-banner .cookie-text,
    .cookie-banner p,
    .cookie-banner .elegant-text {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
    }

    .cookie-banner .cookie-actions,
    .cookie-banner>div {
        gap: 8px !important;
    }

    .cookie-banner .cookie-btn,
    .cookie-banner .hero-btn {
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
    }
}

/* ============================================================
   FOOTER, MOTION & TYPE REFINEMENT
   ============================================================ */
@media screen {

    /* The WebGL canvas is animated by JavaScript; avoid reserving an extra
       compositor layer for a property it never transforms. */
    .webgl-3d-canvas {
        will-change: auto;
    }

    footer {
        position: relative;
        z-index: 1;
        isolation: isolate;
        contain: paint;
        padding: clamp(44px, 6vw, 72px) clamp(16px, 3vw, 32px) 28px;
        background: linear-gradient(180deg, rgba(5, 5, 5, .98), #050505 35%, #000 100%);
    }

    [data-theme="light"] footer,
    body.light-theme footer {
        background: linear-gradient(180deg, #f8fafc 0%, #edf2f9 45%, #e2e8f0 100%) !important;
        border-top: 1px solid rgba(0, 136, 204, 0.18) !important;
    }

    footer .footer-container {
        width: min(100%, 1180px);
        max-width: 1180px;
    }

    footer .footer-content {
        grid-template-columns: minmax(0, 1.6fr) minmax(150px, .8fr) minmax(180px, .9fr);
        gap: clamp(24px, 4vw, 56px);
        margin-bottom: 30px;
    }

    footer .footer-about,
    footer .footer-links {
        height: auto;
    }

    footer .footer-logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        font-family: 'Space Grotesk', system-ui, sans-serif;
        font-size: clamp(1.35rem, 1.1rem + .6vw, 1.75rem);
        letter-spacing: -.02em;
    }

    footer .footer-logo i {
        font-size: .95em;
    }

    footer .footer-about p {
        max-width: 42ch;
        line-height: 1.6;
    }

    footer .footer-links a {
        min-height: 32px;
        display: flex;
        align-items: center;
        padding-block: 4px;
        transition: color .2s ease, transform .2s ease;
    }

    footer .footer-links a:hover {
        padding-left: 0;
        transform: translateX(4px);
    }

    footer .trust-badges {
        width: 100%;
        gap: 10px;
        margin: 0 auto 26px;
    }

    footer .trust-badge {
        padding: 10px 16px;
        font-size: .82rem;
    }

    footer .copyright {
        width: 100%;
        padding-top: 18px;
        line-height: 1.55;
    }

    .text-shimmer {
        text-rendering: geometricPrecision;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    footer .footer-content {
        grid-template-columns: minmax(0, 1.25fr) minmax(140px, .85fr) minmax(160px, .95fr);
        gap: 22px;
    }

    .webgl-3d-canvas {
        opacity: .56 !important;
    }
}

@media screen and (max-width: 768px) {
    footer {
        padding: 44px 16px calc(112px + env(safe-area-inset-bottom, 20px)) !important;
    }

    footer .footer-container {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    footer .footer-content {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px 14px !important;
        margin-bottom: 24px !important;
        text-align: center !important;
    }

    footer .footer-about {
        grid-column: 1 / -1 !important;
        text-align: center !important;
        margin-bottom: 6px !important;
    }

    footer .footer-logo {
        justify-content: center !important;
        margin-bottom: 10px !important;
        font-size: 1.45rem !important;
    }

    footer .footer-about p {
        margin-inline: auto !important;
        max-width: 36ch !important;
        font-size: 0.84rem !important;
        line-height: 1.58 !important;
        margin-bottom: 16px !important;
    }

    footer .social-icons {
        justify-content: center !important;
        gap: 12px !important;
    }

    footer .social-icons a {
        width: 42px !important;
        height: 42px !important;
    }

    footer .footer-links {
        text-align: center !important;
    }

    footer .footer-links h3 {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
        letter-spacing: -0.01em !important;
    }

    footer .footer-links ul {
        align-items: center !important;
        gap: 6px !important;
    }

    footer .footer-links a {
        justify-content: center !important;
        min-height: 32px !important;
        padding: 2px 6px !important;
        font-size: 0.82rem !important;
    }

    footer .trust-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 auto 20px !important;
        width: 100% !important;
    }

    footer .trust-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 7px 13px !important;
        font-size: 0.76rem !important;
        border-radius: 24px !important;
        width: auto !important;
        flex: 0 1 auto !important;
    }

    footer .copyright {
        font-size: 0.74rem !important;
        line-height: 1.55 !important;
        padding-top: 16px !important;
        text-align: center !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .text-shimmer {
        animation: none !important;
        transform: none !important;
        background-position: 0 50% !important;
    }
}