/* ═══════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
    /* Theme colors (RGB triplets for rgba usage) */
    --theme-primary: 6, 182, 212;
    --theme-secondary: 139, 92, 246;
    --theme-accent: 59, 130, 246;
    --theme-gradient-start: #22d3ee;
    --theme-gradient-mid: #3b82f6;
    --theme-gradient-end: #a855f7;
    --theme-glow: rgba(6, 182, 212, 0.3);
    --theme-transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* Dark mode semantic colors (default) */
    --color-bg: #0a0a0f;
    --color-bg-elevated: #12121a;
    --color-bg-elevated-rgb: 18, 18, 26;
    --color-bg-card: #1a1a25;
    --color-bg-card-hover: #22222f;
    --color-surface: rgba(255, 255, 255, 0.03);
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-hover: rgba(255, 255, 255, 0.15);
    --color-text: #f0f0f5;
    --color-text-secondary: #a0a0b0;
    --color-text-muted: #606070;

    /* Typography */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.25rem;
    --font-size-6xl: 4rem;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Layout — clamp() lets the container breathe on wide screens without
       letting it grow unbounded on ultra-wide. Bumped from a flat 1200px so
       the 2-column slide layout no longer looks cramped at 1440/1920/2560+. */
    --container-max: clamp(1200px, 92vw, 1480px);
    --nav-height: 84px;
}

/* ═══════════════════════════════════════════════
   PROJECT THEMES
   ═══════════════════════════════════════════════ */

/* CoHa: Warm Golden-Brown (Crispy Duck) */
[data-project-theme="coha"] {
    --theme-primary: 180, 108, 42;
    --theme-secondary: 210, 140, 60;
    --theme-accent: 230, 172, 90;
    --theme-gradient-start: #e6ac5a;
    --theme-gradient-mid: #b46c2a;
    --theme-gradient-end: #8b4513;
    --theme-glow: rgba(180, 108, 42, 0.3);
}

/* Imkerei: Amber/Gold */
[data-project-theme="imkerei"] {
    --theme-primary: 245, 158, 11;
    --theme-secondary: 217, 119, 6;
    --theme-accent: 251, 191, 36;
    --theme-gradient-start: #fbbf24;
    --theme-gradient-mid: #f59e0b;
    --theme-gradient-end: #d97706;
    --theme-glow: rgba(245, 158, 11, 0.3);
}

/* Maximilian Haak: Blue/Indigo (Personal) */
[data-project-theme="maxhaak"] {
    --theme-primary: 59, 130, 246;
    --theme-secondary: 99, 102, 241;
    --theme-accent: 129, 140, 248;
    --theme-gradient-start: #60a5fa;
    --theme-gradient-mid: #3b82f6;
    --theme-gradient-end: #6366f1;
    --theme-glow: rgba(59, 130, 246, 0.3);
}

/* AI Captain: Purple/Violet */
[data-project-theme="aicaptain"] {
    --theme-primary: 139, 92, 246;
    --theme-secondary: 124, 58, 237;
    --theme-accent: 167, 139, 250;
    --theme-gradient-start: #a78bfa;
    --theme-gradient-mid: #8b5cf6;
    --theme-gradient-end: #7c3aed;
    --theme-glow: rgba(139, 92, 246, 0.3);
}

/* E46 Studio: Blue (matches hero/maxhaak for seamless transition) */
[data-project-theme="e46"] {
    --theme-primary: 59, 130, 246;
    --theme-secondary: 99, 102, 241;
    --theme-accent: 129, 140, 248;
    --theme-gradient-start: #60a5fa;
    --theme-gradient-mid: #3b82f6;
    --theme-gradient-end: #6366f1;
    --theme-glow: rgba(59, 130, 246, 0.3);
}

/* SoundOfLvke: Rose/Pink (Music) */
[data-project-theme="soundoflvke"] {
    --theme-primary: 244, 63, 94;
    --theme-secondary: 225, 29, 72;
    --theme-accent: 251, 113, 133;
    --theme-gradient-start: #fb7185;
    --theme-gradient-mid: #f43f5e;
    --theme-gradient-end: #e11d48;
    --theme-glow: rgba(244, 63, 94, 0.3);
}

/* Shookroko: Lime/Green (Game) */
[data-project-theme="shookroko"] {
    --theme-primary: 132, 204, 22;
    --theme-secondary: 101, 163, 13;
    --theme-accent: 163, 230, 53;
    --theme-gradient-start: #84cc16;
    --theme-gradient-mid: #65a30d;
    --theme-gradient-end: #a3e635;
    --theme-glow: rgba(132, 204, 22, 0.3);
}

/* Medieval Tower Defense: Heraldisches Burgund/Wein-Rot */
[data-project-theme="medieval"] {
    --theme-primary: 185, 28, 28;
    --theme-secondary: 127, 29, 29;
    --theme-accent: 251, 191, 36;
    --theme-gradient-start: #ef4444;
    --theme-gradient-mid: #b91c1c;
    --theme-gradient-end: #7f1d1d;
    --theme-glow: rgba(185, 28, 28, 0.32);
}

/* dog-kennel-online: Teal mit warmem Akzent — ruhig, operativ */
[data-project-theme="dogkennel"] {
    --theme-primary: 13, 148, 136;
    --theme-secondary: 15, 118, 110;
    --theme-accent: 251, 146, 60;
    --theme-gradient-start: #2dd4bf;
    --theme-gradient-mid: #0d9488;
    --theme-gradient-end: #115e59;
    --theme-glow: rgba(13, 148, 136, 0.3);
}

/* Daniel Brecheis (Human Bridges Consulting): tiefes Navy/Sapphire — wertig, vertrauensvoll */
[data-project-theme="danielbrecheis"] {
    --theme-primary: 30, 64, 175;
    --theme-secondary: 30, 58, 138;
    --theme-accent: 59, 130, 246;
    --theme-gradient-start: #3b82f6;
    --theme-gradient-mid: #1e40af;
    --theme-gradient-end: #1e3a8a;
    --theme-glow: rgba(30, 64, 175, 0.3);
}

/* Kaya Seeds: Emerald — natürlich, lebendig */
[data-project-theme="kayaseeds"] {
    --theme-primary: 16, 185, 129;
    --theme-secondary: 5, 150, 105;
    --theme-accent: 52, 211, 153;
    --theme-gradient-start: #34d399;
    --theme-gradient-mid: #10b981;
    --theme-gradient-end: #047857;
    --theme-glow: rgba(16, 185, 129, 0.3);
}

/* JK Entertainment: Trading-Card-Orange — energetisch, spielerisch (matches Logo + CTA) */
[data-project-theme="jkentertainment"] {
    --theme-primary: 249, 115, 22;
    --theme-secondary: 234, 88, 12;
    --theme-accent: 251, 146, 60;
    --theme-gradient-start: #fb923c;
    --theme-gradient-mid: #f97316;
    --theme-gradient-end: #c2410c;
    --theme-glow: rgba(249, 115, 22, 0.32);
}

/* Theme transition on all theme-aware elements */
[data-project-theme] {
    transition:
        background var(--theme-transition),
        background-color var(--theme-transition),
        border-color var(--theme-transition),
        box-shadow var(--theme-transition),
        color var(--theme-transition);
}

/* Theme colors flow through the whole site — when a slide activates a theme,
   ALL sections (nav, services, pricing, testimonials, contact, footer) inherit it.
   This creates a cohesive, dynamic color experience tied to the active project. */

/* Smooth color/border/background transitions on theme-aware elements across the page */
#navbar,
.nav-cta,
.about-section,
.services-section,
.service-card,
.skill-tag,
.pricing-section,
.pricing-card,
.pricing-card.featured,
.testimonials-section,
.testimonial-card,
.contact-section,
.contact-link,
.contact-form input,
.contact-form textarea,
.contact-form button,
.project-card,
footer,
footer a {
    transition:
        background var(--theme-transition),
        background-color var(--theme-transition),
        border-color var(--theme-transition),
        box-shadow var(--theme-transition),
        color var(--theme-transition);
}

/* ═══════════════════════════════════════════════
   LIGHT MODE
   ═══════════════════════════════════════════════ */
html[data-color-scheme="light"] {
    --color-bg: #f3f4f8;
    --color-bg-elevated: #ffffff;
    --color-bg-elevated-rgb: 255, 255, 255;
    --color-bg-card: #ffffff;
    --color-bg-card-hover: #eef0f6;
    --color-surface: rgba(15, 23, 42, 0.03);
    --color-border: rgba(15, 23, 42, 0.12);
    --color-border-hover: rgba(15, 23, 42, 0.22);
    --color-text: #0f172a;
    --color-text-secondary: #3f4658;
    --color-text-muted: #6b7280;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.14);
    --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.08);
}

html[data-color-scheme="light"] body {
    background:
        radial-gradient(circle at 12% 8%, rgba(var(--theme-primary), 0.10), transparent 55%),
        radial-gradient(circle at 92% 92%, rgba(var(--theme-secondary), 0.08), transparent 55%),
        var(--color-bg);
}

html[data-color-scheme="light"] .project-orb {
    opacity: 0.16;
    /* mix-blend-mode: multiply was visually nicer but forced Chrome to
       composite the entire section on every animation frame. */
}

/* Tags / chips ------------------------------------------------------------ */
html[data-color-scheme="light"] .skill-tag {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: var(--color-text-secondary);
}
html[data-color-scheme="light"] .section-tag,
html[data-color-scheme="light"] .badge {
    background: rgba(var(--theme-primary), 0.10);
    border-color: rgba(var(--theme-primary), 0.28);
    color: rgb(var(--theme-primary));
}

/* Cards ------------------------------------------------------------------- */
html[data-color-scheme="light"] .testimonial-card,
html[data-color-scheme="light"] .pricing-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}
html[data-color-scheme="light"] .testimonial-card:hover,
html[data-color-scheme="light"] .pricing-card:hover {
    border-color: rgba(var(--theme-primary), 0.35);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10);
}
html[data-color-scheme="light"] .pricing-price {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
html[data-color-scheme="light"] .contact-map-link {
    border-color: rgba(15, 23, 42, 0.10);
}

/* Footer / cookie -------------------------------------------------------- */
html[data-color-scheme="light"] .footer-social-link {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: var(--color-text);
}
html[data-color-scheme="light"] .footer-social-link:hover {
    background: rgba(var(--theme-primary), 0.10);
    border-color: rgba(var(--theme-primary), 0.40);
    color: rgb(var(--theme-primary));
}

/* Buttons ---------------------------------------------------------------- */
html[data-color-scheme="light"] .btn-outline,
html[data-color-scheme="light"] .btn-secondary {
    border-color: rgba(15, 23, 42, 0.18);
    background: rgba(255, 255, 255, 0.6);
    color: var(--color-text);
}
html[data-color-scheme="light"] .btn-outline:hover,
html[data-color-scheme="light"] .btn-secondary:hover {
    border-color: rgb(var(--theme-primary));
    color: rgb(var(--theme-primary));
    background: rgba(var(--theme-primary), 0.08);
}

/* Forms ------------------------------------------------------------------ */
html[data-color-scheme="light"] .form-input,
html[data-color-scheme="light"] .form-textarea,
html[data-color-scheme="light"] .form-select {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.14);
    color: var(--color-text);
}
html[data-color-scheme="light"] .form-input:focus,
html[data-color-scheme="light"] .form-textarea:focus,
html[data-color-scheme="light"] .form-select:focus {
    border-color: rgb(var(--theme-primary));
    box-shadow: 0 0 0 4px rgba(var(--theme-primary), 0.15);
}

/* Slider arrows ---------------------------------------------------------- */
html[data-color-scheme="light"] .slider-arrow {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(var(--theme-primary), 0.45);
    color: var(--color-text);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.18);
}
html[data-color-scheme="light"] .slider-arrow:hover {
    background: rgba(var(--theme-primary), 0.12);
    color: rgb(var(--theme-primary));
}

/* Scroll hint ------------------------------------------------------------ */
html[data-color-scheme="light"] .scroll-hint {
    color: var(--color-text-secondary);
}
html[data-color-scheme="light"] .scroll-line {
    background: var(--color-text-secondary);
    opacity: 0.45;
}

/* Service cards ---------------------------------------------------------- */
html[data-color-scheme="light"] .service-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}
html[data-color-scheme="light"] .service-card:hover {
    border-color: rgba(var(--theme-primary), 0.35);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

/* Section dividers / separators ----------------------------------------- */
html[data-color-scheme="light"] .footer {
    border-top-color: rgba(15, 23, 42, 0.10);
}

/* Selection -------------------------------------------------------------- */
html[data-color-scheme="light"] ::selection {
    background: rgba(var(--theme-primary), 0.25);
    color: var(--color-text);
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

img {
    max-width: 100%;
    display: block;
}

ul, ol {
    list-style: none;
}

/* ═══════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* ═══════════════════════════════════════════════
   GRADIENT TEXT
   ═══════════════════════════════════════════════ */
.gradient-text {
    background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.5rem;
    min-height: 44px;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all var(--duration-base) var(--ease-out);
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
    color: #fff;
    box-shadow: 0 4px 15px var(--theme-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--theme-glow);
}

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-outline:hover {
    border-color: rgb(var(--theme-primary));
    color: rgb(var(--theme-primary));
    background: rgba(var(--theme-primary), 0.05);
}

/* Contact form button states (set via JS) */
.btn-primary.is-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.btn-primary.is-error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
    position: relative;
}

.btn-icon:hover {
    border-color: rgb(var(--theme-primary));
    color: rgb(var(--theme-primary));
    background: rgba(var(--theme-primary), 0.08);
}

html[data-color-scheme="light"] .btn-icon {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--color-text);
}

html[data-color-scheme="light"] .btn-icon:hover {
    background: rgba(var(--theme-primary), 0.08);
    border-color: rgb(var(--theme-primary));
    color: rgb(var(--theme-primary));
}

/* ═══════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════ */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    /* Transparent at the top of the page. A short top-to-bottom dark
       gradient keeps the nav items legible against any hero background
       without showing a visible bar. The tint only intensifies once the
       user scrolls (.scrolled) so the hero reads edge-to-edge.

       Performance: backdrop-filter + mask-image on a full-width fixed
       element forced Chrome to re-rasterize the entire navbar tile on
       every scroll frame, which made scrolling visibly laggy on Windows
       Chrome. Both effects are now omitted in the unscrolled state and
       only the .scrolled state opts back into a single backdrop-filter
       (without a mask) where it actually adds polish. */
    background:
        linear-gradient(
            to bottom,
            rgba(10, 10, 15, 0.45) 0%,
            rgba(10, 10, 15, 0.15) 70%,
            rgba(10, 10, 15, 0) 100%
        );
    border-bottom: 1px solid transparent;
    transition: background var(--duration-base),
                box-shadow var(--duration-base),
                border-color var(--duration-base);
}

html[data-color-scheme="light"] #navbar {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.20) 70%,
            rgba(255, 255, 255, 0) 100%
        );
    border-bottom-color: transparent;
}

/* After the user scrolls past the hero, fade in the solid glass look so the
   nav stays readable against the page body content. A single moderate
   backdrop-filter is acceptable here because the navbar background is now
   ~82% opaque, so Chrome can mostly skip behind-pixel sampling. */
#navbar.scrolled {
    background: rgba(10, 10, 15, 0.82);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-bottom-color: var(--color-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

html[data-color-scheme="light"] #navbar.scrolled {
    background: rgba(255, 255, 255, 0.78);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    position: relative;
}

.nav-logo {
    font-size: var(--font-size-xl);
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.logo-accent {
    font-weight: 700;
    background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background var(--theme-transition);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.nav-links a {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: color var(--duration-base);
    position: relative;
    padding: var(--space-xs) 0;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--color-text);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: rgb(var(--theme-primary));
    transition: width var(--duration-base) var(--ease-out);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* ═══ COLOR PICKER (single-ball trigger + popover) ═══ */
.color-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: var(--space-xs);
}

/* Trigger: a single ball showing the active theme colour. */
.color-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.color-picker-trigger:hover {
    transform: scale(1.06);
    border-color: rgba(var(--theme-primary), 0.6);
}

.color-picker-trigger[aria-expanded="true"] {
    border-color: rgba(var(--theme-primary), 0.85);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary), 0.18);
}

.color-picker-current {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgb(var(--theme-primary)),
        rgb(var(--theme-secondary, var(--theme-primary)))
    );
    box-shadow: 0 0 12px rgba(var(--theme-primary), 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: background var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

html[data-color-scheme="light"] .color-picker-trigger {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Popover: identical pill design as before, anchored to the trigger. */
.color-picker-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
                0 2px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    transform-origin: top right;
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
    pointer-events: none;
    z-index: 1100;
}

.color-picker-popover[data-open="true"] {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

html[data-color-scheme="light"] .color-picker-popover {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12),
                0 2px 6px rgba(0, 0, 0, 0.06);
}

.color-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.color-swatch span {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transition: width var(--duration-base) var(--ease-out),
                height var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.color-swatch[data-color-theme="maxhaak"] span {
    background: linear-gradient(135deg, #60a5fa, #6366f1);
}

.color-swatch[data-color-theme="imkerei"] span {
    background: linear-gradient(135deg, #fbbf24, #d97706);
}

.color-swatch[data-color-theme="coha"] span {
    background: linear-gradient(135deg, #e6ac5a, #8b4513);
}

.color-swatch[data-color-theme="aicaptain"] span {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.color-swatch[data-color-theme="soundoflvke"] span {
    background: linear-gradient(135deg, #fb7185, #e11d48);
}

.color-swatch[data-color-theme="shookroko"] span {
    background: linear-gradient(135deg, #a3e635, #65a30d);
}

.color-swatch[data-color-theme="danielbrecheis"] span {
    background: linear-gradient(135deg, #3b82f6, #1e3a8a);
}

.color-swatch[data-color-theme="kayaseeds"] span {
    background: linear-gradient(135deg, #34d399, #047857);
}

.color-swatch[data-color-theme="jkentertainment"] span {
    background: linear-gradient(135deg, #fb923c, #c2410c);
}

.color-swatch:hover {
    opacity: 1;
    transform: scale(1.15);
}

.color-swatch.active {
    opacity: 1;
}

.color-swatch.active span {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 2px var(--color-bg-elevated),
                0 0 0 3.5px rgba(var(--theme-primary), 0.85);
}

html[data-color-scheme="light"] .color-swatch.active span {
    box-shadow: 0 0 0 2px #ffffff,
                0 0 0 3.5px rgba(var(--theme-primary), 0.85);
}

/* Theme toggle */
#themeToggle {
    position: relative;
}

#themeToggle .icon-sun,
#themeToggle .icon-moon {
    position: absolute;
    inset: 0;
    margin: auto;
    transition: opacity var(--duration-base), transform var(--duration-base);
}

#themeToggle .icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

#themeToggle .icon-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

html[data-color-scheme="light"] #themeToggle .icon-sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

html[data-color-scheme="light"] #themeToggle .icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

/* Mobile menu toggle */
.menu-toggle,
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.menu-toggle .bar,
.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: all var(--duration-base);
}

.menu-toggle.active .bar:nth-child(1),
.menu-toggle[aria-expanded="true"] .bar:nth-child(1),
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active .bar:nth-child(2),
.menu-toggle[aria-expanded="true"] .bar:nth-child(2),
.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .bar:nth-child(3),
.menu-toggle[aria-expanded="true"] .bar:nth-child(3),
.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.lang-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Mobile nav panel */
.mobile-nav {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    z-index: 999;
    padding: var(--space-2xl);
    flex-direction: column;
    gap: var(--space-lg);
}

.mobile-nav.open {
    display: flex;
}

.mobile-nav a {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
    transition: color var(--duration-base);
}

.mobile-nav a:hover {
    color: var(--color-text);
}

/* ═══════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════ */
.hero-section {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-top: var(--nav-height);
    padding-bottom: var(--space-2xl);
    isolation: isolate;
}

/* Layered hero backdrop:
   1. Mountain photo, dimmed and slightly desaturated, sits at z=-3.
    2. Theme-tinted gradient veil at z=-2 keeps the photo on-brand and
        transitions colour with the active project theme.
    3. Bottom-fade gradient at z=-1 blends seamlessly into the page
        background so neighbouring sections remain edge-less. */
.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-section::before {
    /* Reserved for theme-tinted layering above the bg slides. */
    background: transparent;
    z-index: -3;
}

/* ── Hero background slideshow ──────────────────────────────────────
   Eight real photos taken by Max around Bruckmühl. They crossfade
   slowly behind the hero content. The dim/desaturate filter keeps text
   and theme colours readable, matching the previous static treatment.
   The first slide is preloaded eagerly via .is-active; subsequent
   slides load on first activation (background-image only). */
.hero-bg-slides {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
}

.hero-bg-slide {
    position: absolute;
    inset: 0;
    filter: brightness(0.72) saturate(1.0) hue-rotate(-4deg);
    transform: scale(1.04);
    opacity: 0;
    transition: opacity 1600ms ease-in-out;
    will-change: opacity;
}

.hero-bg-slide.is-active {
    opacity: 1;
}

.hero-bg-squared {
    transform: none;
    filter: brightness(0.58) saturate(1.04) contrast(1.02);
}

.hero-bg-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 35% 70%;
}
@media (min-width: 1200px) {
    .hero-bg-image {
        /* Wider landscape — keep cover, just nudge subject left of the
           text column on big screens. */
        object-position: 32% 68%;
    }
}
@media (min-width: 1600px) {
    .hero-bg-image {
        object-position: 30% 65%;
    }
}
html[data-color-scheme="light"] .hero-bg-slide.hero-bg-squared {
    filter: brightness(0.72) saturate(1.02) contrast(1.01);
}
/* hero-bg-6 / hero-bg-7 background-image is set via JS after first paint
   so they don't compete with the LCP image for bandwidth. */

@media (prefers-reduced-motion: reduce) {
    .hero-bg-slide {
        transition: none;
    }
}

.hero-section::after {
    background:
        radial-gradient(
            ellipse 80% 60% at 30% 35%,
            rgba(var(--theme-primary), 0.20) 0%,
            rgba(var(--theme-primary), 0.06) 40%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 70% 50% at 75% 70%,
            rgba(var(--theme-secondary, var(--theme-primary)), 0.14) 0%,
            transparent 65%
        ),
        linear-gradient(
            180deg,
            rgba(var(--color-bg-rgb, 10, 10, 14), 0.25) 0%,
            rgba(var(--color-bg-rgb, 10, 10, 14), 0.10) 35%,
            rgba(var(--color-bg-rgb, 10, 10, 14), 0.55) 70%,
            var(--color-bg) 92%,
            var(--color-bg) 100%
        );
    z-index: -2;
    /* No transition on background — animating multi-stop gradients across
       the full hero is a Chrome paint hot spot on theme changes. */
}

/* Light mode: lift the photo slightly and use a brighter veil so it
   reads as airy rather than washed out. */
html[data-color-scheme="light"] .hero-bg-slide {
    filter: brightness(0.92) saturate(1.0) hue-rotate(-2deg);
}

html[data-color-scheme="light"] .hero-section::after {
    background:
        radial-gradient(
            ellipse 80% 60% at 30% 35%,
            rgba(var(--theme-primary), 0.22) 0%,
            transparent 65%
        ),
        radial-gradient(
            ellipse 70% 50% at 75% 70%,
            rgba(var(--theme-secondary, var(--theme-primary)), 0.18) 0%,
            transparent 65%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.45) 40%,
            rgba(255, 255, 255, 0.85) 65%,
            var(--color-bg) 80%,
            var(--color-bg) 100%
        );
}

/* Hero content — static 2-column layout */
.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    position: relative;
    z-index: 2;
}

/* Single-column variant — right-aligned over the calmer right portion of
   the hero photo so the subject (car + person) on the LEFT stays fully
   visible and the headline never lands on top of him. */
.hero-section--single .hero-content {
    width: 100%;
    /* Cap the hero band on wide screens so the text column doesn't drift
       to the far right edge — keeps the headline near the visual center
       of the photo subject without overlapping it. */
    max-width: 1280px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 520px);
    justify-content: end;
    text-align: left;
    padding-left: var(--space-xl);
    padding-right: clamp(var(--space-lg), 4vw, 4rem);
}

.hero-section--single .hero-text {
    align-items: flex-start;
    grid-column: 2;
    max-width: 520px;
    margin-left: auto;
}

.hero-section--single .slide-title {
    color: #ffffff;
    font-size: clamp(3.1rem, 4.7vw, 4.35rem);
    line-height: 0.96;
    letter-spacing: 0;
}

.hero-section--single .slide-description {
    max-width: 500px;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1rem, 0.5vw + 0.9rem, 1.16rem);
    line-height: 1.62;
}

.hero-section--single .slide-cta {
    justify-content: flex-start;
}

/* Soft directional veil over the right side of the hero. Uses a wide,
   gently-curved gradient (no hard color stops) so it blends into the
   photo instead of reading as a visible "box" behind the text. */
.hero-section--single::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(
        270deg,
        rgba(8, 10, 18, 0.55) 0%,
        rgba(8, 10, 18, 0.42) 18%,
        rgba(8, 10, 18, 0.22) 38%,
        rgba(8, 10, 18, 0.08) 58%,
        rgba(8, 10, 18, 0) 75%
    );
}
html[data-color-scheme="light"] .hero-section--single::before {
    background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.40) 18%,
        rgba(255, 255, 255, 0.20) 38%,
        rgba(255, 255, 255, 0.06) 58%,
        rgba(255, 255, 255, 0) 75%
    );
}

.hero-section--square::before {
    background: linear-gradient(
        270deg,
        rgba(8, 10, 18, 0.78) 0%,
        rgba(8, 10, 18, 0.66) 26%,
        rgba(8, 10, 18, 0.42) 46%,
        rgba(8, 10, 18, 0.16) 68%,
        rgba(8, 10, 18, 0) 88%
    );
}
html[data-color-scheme="light"] .hero-section--square::before {
    background: linear-gradient(
        270deg,
        rgba(8, 10, 18, 0.66) 0%,
        rgba(8, 10, 18, 0.54) 26%,
        rgba(8, 10, 18, 0.32) 46%,
        rgba(8, 10, 18, 0.12) 68%,
        rgba(8, 10, 18, 0) 88%
    );
}

/* No localized box-shaped backdrop behind the text — the wide section
   veil above + the per-text shadow below carry contrast cleanly without
   producing a visible rectangle. */
.hero-section--single .hero-text {
    position: relative;
}

/* Layered, very soft text shadow — a tight close shadow for crispness
   plus a wider diffuse one for atmospheric separation from the photo.
   Both are subtle enough to look natural, never blocky. */
.hero-section--single .slide-title,
.hero-section--single .slide-description {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45),
        0 6px 24px rgba(0, 0, 0, 0.35);
}
html[data-color-scheme="light"] .hero-section--single .slide-title,
html[data-color-scheme="light"] .hero-section--single .slide-description {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.34),
        0 7px 26px rgba(0, 0, 0, 0.24);
}

/* Gradient text (e.g. "Haak.") uses a transparent fill + background-clip,
   so a regular text-shadow leaks through and muddies the colors. Strip
   the shadow on the gradient span and reproduce the depth with a
   drop-shadow filter that respects the painted (gradient) pixels only. */
.hero-section--single .slide-title .gradient-text {
    text-shadow: none;
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))
        drop-shadow(0 6px 24px rgba(0, 0, 0, 0.35));
}
html[data-color-scheme="light"] .hero-section--single .slide-title .gradient-text {
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.34))
        drop-shadow(0 7px 26px rgba(0, 0, 0, 0.24));
}

@media (max-width: 1100px) {
    .hero-section--single .hero-content {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
        padding-right: var(--space-xl);
    }

    .hero-section--single .hero-text {
        max-width: 460px;
    }
}

/* ═══════════════════════════════════════════════
    HERO BADGES — standalone white SVG icons with text labels
    ═══════════════════════════════════════════════ */
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    width: auto;
}

.hero-badge {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    min-height: 34px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #ffffff;
    white-space: nowrap;
    transform: translateZ(0);
}

html[data-color-scheme="light"] .hero-badge {
    background: transparent;
    color: #ffffff;
    box-shadow: none;
}

.hero-badge .badge-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 0;
    color: #ffffff;
}

html[data-color-scheme="light"] .hero-badge .badge-icon-wrapper {
    background: transparent;
}

.hero-badge svg {
    width: 30px;
    height: 30px;
}

.badge-label {
    color: #ffffff;
    font-size: clamp(0.84rem, 0.28vw + 0.78rem, 0.96rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45),
        0 5px 18px rgba(0, 0, 0, 0.35);
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Skills section — separate block below hero */
.skills-section {
    padding: var(--space-4xl) 0;
    position: relative;
}

.skills-section .section-header {
    margin-bottom: var(--space-2xl);
}

/* Portfolio ambient color orbs */
.projects-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.project-orb {
    position: absolute;
    border-radius: 50%;
    opacity: 0.28;
    will-change: transform;
    contain: layout style;
}

.project-orb-1 {
    width: 560px;
    height: 560px;
    top: clamp(1rem, 7vw, 6rem);
    right: max(-180px, -9vw);
    background: radial-gradient(
        circle,
        rgba(var(--theme-primary), 0.36) 0%,
        rgba(var(--theme-primary), 0.12) 34%,
        transparent 70%
    );
    animation: float-slow 24s ease-in-out infinite;
}

.project-orb-2 {
    width: 440px;
    height: 440px;
    bottom: clamp(1rem, 6vw, 5rem);
    left: max(-160px, -8vw);
    background: radial-gradient(
        circle,
        rgba(var(--theme-secondary), 0.30) 0%,
        rgba(var(--theme-secondary), 0.10) 34%,
        transparent 70%
    );
    animation: float-slow 28s ease-in-out infinite reverse;
}

.project-orb-3 {
    width: 320px;
    height: 320px;
    top: 44%;
    left: 55%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(var(--theme-accent, var(--theme-primary)), 0.24) 0%,
        rgba(var(--theme-accent, var(--theme-primary)), 0.08) 34%,
        transparent 70%
    );
    animation: pulse-glow 12s ease-in-out infinite;
}

/* Global grid overlay */
.hero-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* dvh avoids the iOS address-bar reflow that 100vh forces on every scroll. */
    height: 100dvh;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(
            0deg,
            transparent 24%,
            rgba(var(--theme-primary), 0.15) 25%,
            rgba(var(--theme-primary), 0.15) 26%,
            transparent 27%,
            transparent 74%,
            rgba(var(--theme-primary), 0.15) 75%,
            rgba(var(--theme-primary), 0.15) 76%,
            transparent 77%,
            transparent
        ),
        linear-gradient(
            90deg,
            transparent 24%,
            rgba(var(--theme-primary), 0.15) 25%,
            rgba(var(--theme-primary), 0.15) 26%,
            transparent 27%,
            transparent 74%,
            rgba(var(--theme-primary), 0.15) 75%,
            rgba(var(--theme-primary), 0.15) 76%,
            transparent 77%,
            transparent
        );
    background-size: 50px 50px;
}

/* Global ambient glow orbs */
.glow-orb {
    position: fixed;
    border-radius: 50%;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.glow-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--theme-primary), 0.3) 0%, transparent 70%);
    top: -200px;
    left: -200px;
}

.glow-orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(var(--theme-primary), 0.25) 0%, transparent 70%);
    bottom: -150px;
    right: -150px;
}

/* Background keyframe animations */
@keyframes float-slow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(30px, -30px) scale(1.05); }
    50%      { transform: translate(-20px, 20px) scale(0.95); }
    75%      { transform: translate(-30px, -20px) scale(1.02); }
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Project nav pills */
.project-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
}

.project-nav-group {
    flex-basis: 100%;
    text-align: center;
    margin: var(--space-md) 0 var(--space-xs);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.project-nav-group:first-child {
    margin-top: 0;
}

.project-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.5rem 1rem;
    min-height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
}

.project-nav-btn .nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    transition: background var(--duration-base);
}

.project-nav-btn:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text);
}

.project-nav-btn.active {
    border-color: rgba(var(--theme-primary), 0.5);
    color: var(--color-text);
    background: rgba(var(--theme-primary), 0.08);
    box-shadow: 0 0 20px var(--theme-glow), inset 0 0 20px rgba(var(--theme-primary), 0.03);
}

.project-nav-btn.active .nav-dot {
    background: rgb(var(--theme-primary));
    box-shadow: 0 0 8px rgba(var(--theme-primary), 0.5);
}

/* Project pagination — sits BELOW the slider, replaces the old grouped nav */
.project-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin: var(--space-2xl) auto var(--space-lg);
    position: relative;
    z-index: 5;
}

.project-pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.project-pag-btn .project-pag-index {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    transition: color var(--duration-base);
}

.project-pag-btn .project-pag-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.2;
}

.project-pag-btn:hover {
    background: var(--color-bg-elevated);
}

.project-pag-btn.active {
    background: rgba(var(--theme-primary), 0.1);
}

.project-pag-btn.active .project-pag-index {
    color: rgb(var(--theme-primary));
}

.project-pag-btn:focus-visible {
    border-color: rgb(var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary), 0.2);
}

/* Project mode selector — segmented pill above the slider nav */
.project-mode-selector {
    display: inline-flex;
    margin: var(--space-lg) auto var(--space-xl);
    padding: 4px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    gap: 4px;
    position: relative;
    z-index: 5;
}

.projects-section .container .section-header + .project-mode-selector {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.project-mode-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-width: 180px;
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    transition: color var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.project-mode-btn:not(.is-locked):hover {
    color: var(--color-text);
}

.project-mode-btn.is-active {
    background: rgba(var(--theme-primary), 0.12);
    color: var(--color-text);
    box-shadow: 0 0 18px var(--theme-glow),
                inset 0 0 0 1px rgba(var(--theme-primary), 0.45);
}

.project-mode-btn.is-locked {
    color: var(--color-text-muted);
    opacity: 0.55;
    cursor: not-allowed;
}

.project-mode-btn.is-locked:hover,
.project-mode-btn.is-locked:focus {
    color: var(--color-text-muted);
    background: transparent;
    box-shadow: none;
}

.project-mode-lock {
    flex-shrink: 0;
    opacity: 0.85;
}

.project-mode-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    .project-mode-btn {
        min-width: 0;
        flex: 1 1 50%;
        padding: 0.5rem 0.75rem;
        font-size: var(--font-size-xs);
    }

    .projects-section .container .section-header + .project-mode-selector {
        width: 100%;
    }
}

/* Hero slides */
.hero-slides-container {
    position: relative;
    width: 100%;
    min-height: 500px;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    overflow: visible;
    contain: layout style;
}

.hero-slide {
    position: absolute;
    inset: 0;
    padding: 0 var(--space-xl);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    z-index: 2;
    will-change: transform, opacity;
}

.slide-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

/* Slide text */
.slide-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.slide-title {
    font-size: clamp(1.5rem, 4.5vw + 0.25rem, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    overflow: visible;
    word-break: break-word;
    overflow-wrap: break-word;
}

.title-line {
    display: block;
}

.slide-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 500px;
}

.slide-cta {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.slide-tags {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.slide-tags span {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: var(--color-surface);
}

/* Slide visual — browser mockup */
.slide-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.showcase-container {
    position: relative;
    perspective: 1200px;
    transform-style: preserve-3d;
    width: 100%;
    max-width: 520px;
}

/* Badge — positioned relative to parent (.showcase-container) */
.showcase-badge {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 20px var(--theme-glow), 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background var(--theme-transition), box-shadow var(--theme-transition);
}

.showcase-badge svg {
    width: 14px;
    height: 14px;
}

.showcase-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

@media (hover: hover) {
    .showcase-link:hover .showcase-frame {
        transform: rotateY(-3deg) rotateX(1deg) scale(1.04) translateY(-6px);
        /* Reduced shadow blur from 80/40 → 32/16: blur >30px on a hovered+animated
           element forces full GPU re-blur every paint frame. */
        box-shadow:
            0 24px 32px rgba(var(--theme-primary), 0.28),
            0 8px 16px rgba(0, 0, 0, 0.35),
            inset 0 0 0 1px rgba(var(--theme-primary), 0.2);
        border-color: rgba(var(--theme-primary), 0.35);
    }

    .showcase-link:hover .showcase-frame .showcase-image-wrap img {
        transform: scale(1.05);
    }

    .showcase-link:hover .showcase-frame .browser-bar {
        background: rgba(var(--theme-primary), 0.08);
    }

    .showcase-link:hover ~ .showcase-glow {
        background: rgba(var(--theme-primary), 0.3);
        /* Reduced from 80px — animated blur on hover state is GPU-heavy. */
        filter: blur(45px);
        transform: scale(1.15);
    }
}

.showcase-frame {
    position: relative;
    z-index: 2;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}

.showcase-frame .showcase-image-wrap img {
    transition: transform 0.5s ease;
}

.showcase-frame .browser-bar {
    transition: background 0.4s ease;
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px 16px;
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
}

.browser-bar .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-text-muted);
    opacity: 0.4;
}

.browser-bar .dot:nth-child(1) { background: #ff5f57; opacity: 1; }
.browser-bar .dot:nth-child(2) { background: #febc2e; opacity: 1; }
.browser-bar .dot:nth-child(3) { background: #28c840; opacity: 1; }

.browser-url {
    flex: 1;
    margin-left: var(--space-sm);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.showcase-image-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.showcase-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* dog-kennel-online: image-less browser mock for the in-progress slide */
.showcase-frame--kennel {
    cursor: default;
}

.kennel-mock {
    aspect-ratio: 16 / 10;
    display: grid;
    align-content: start;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: linear-gradient(160deg,
        rgba(var(--theme-primary), 0.08) 0%,
        rgba(var(--theme-primary), 0.02) 60%,
        var(--color-bg-card) 100%);
}

.kennel-mock-line {
    display: block;
    height: 14px;
    border-radius: var(--radius-sm);
    background: rgba(var(--theme-primary), 0.18);
}

.kennel-mock-line--lg {
    width: 60%;
    height: 22px;
    background: rgba(var(--theme-primary), 0.32);
}

.kennel-mock-line--sm {
    width: 35%;
    background: rgba(var(--theme-primary), 0.12);
}

.kennel-mock-grid {
    display: block;
    margin-top: var(--space-md);
    height: 110px;
    border-radius: var(--radius-md);
    border: 1px dashed rgba(var(--theme-primary), 0.35);
    background:
        repeating-linear-gradient(0deg, rgba(var(--theme-primary), 0.06) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(var(--theme-primary), 0.06) 0 1px, transparent 1px 28px);
}

/* Showcase glow behind frame */
.showcase-glow {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    border-radius: 50%;
    background: rgba(var(--theme-primary), 0.15);
    /* 60 → 35: still soft, ~half the GPU cost. */
    filter: blur(35px);
    z-index: 1;
    transition: background 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

/* Slider arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-bg-elevated-rgb), 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--theme-primary), 0.3);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.slider-arrow:hover {
    border-color: rgb(var(--theme-primary));
    color: rgb(var(--theme-primary));
    background: rgba(var(--theme-primary), 0.15);
    box-shadow: 0 0 24px var(--theme-glow);
    transform: translateY(-50%) scale(1.08);
}

.slider-arrow svg {
    width: 20px;
    height: 20px;
}

.slider-arrow-left {
    left: 1.5rem;
}

.slider-arrow-right {
    right: 1.5rem;
}

/* Scroll hint */
.scroll-hint {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-hint svg {
    width: 20px;
    height: 20px;
}

.scroll-line {
    width: 1px;
    height: 24px;
    background: var(--color-text-muted);
    opacity: 0.3;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ═══════════════════════════════════════════════
   PROJECTS SHOWCASE SECTION
   ═══════════════════════════════════════════════ */
.projects-section {
    padding: var(--space-4xl) 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Section sits flat on --color-bg so the hero's bottom fade
       (which ends in solid --color-bg) flows in without any seam. */
    background: var(--color-bg);
}

.projects-section > .container,
.projects-section .hero-slides-container {
    position: relative;
    z-index: 1;
}

/* No decorative blobs — the section sits flat on --color-bg so the hero's
   bottom fade flows in seamlessly. */
.projects-section::before,
.projects-section::after {
    content: none;
}

@keyframes projectsBlobA {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-40px, 30px, 0) scale(1.08); }
}

@keyframes projectsBlobB {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(50px, -35px, 0) scale(1.06); }
}

/* Light mode: blobs need much less opacity to stay subtle on white. */
html[data-color-scheme="light"] .projects-section::before,
html[data-color-scheme="light"] .projects-section::after {
    opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
    .projects-section::before,
    .projects-section::after { animation: none; }
}

.projects-section .hero-slides-container {
    min-height: 500px;
}

.projects-section .slider-arrow {
    top: calc(50% + 40px);
}

/* ═══════════════════════════════════════════════
   SECTION SHARED
   ═══════════════════════════════════════════════ */
.section-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.section-note {
    max-width: 760px;
    margin: var(--space-lg) auto 0;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--theme-primary), 0.18);
    background: rgba(var(--theme-primary), 0.04);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    transition: border-color var(--theme-transition), background var(--theme-transition);
}

.section-note--footer {
    margin-top: var(--space-2xl);
    text-align: center;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.375rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(var(--theme-primary), 0.2);
    background: rgba(var(--theme-primary), 0.05);
    color: rgb(var(--theme-primary));
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-lg);
    transition: border-color var(--theme-transition), background var(--theme-transition), color var(--theme-transition);
}

.section-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ═══════════════════════════════════════════════
   ABOUT SECTION
   ═══════════════════════════════════════════════ */
.about-section {
    position: relative;
    padding: var(--space-4xl) 0;
    overflow: hidden;
}

.about-layout {
    display: grid;
    grid-template-columns: minmax(340px, 0.95fr) minmax(0, 0.9fr);
    gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
}

.about-media {
    justify-self: center;
    margin: 0;
    width: min(100%, clamp(420px, 34vw, 520px));
}

.about-image-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 6;
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--theme-primary), 0.22);
    background:
        linear-gradient(135deg, rgba(var(--theme-primary), 0.06), rgba(var(--theme-secondary), 0.03)),
        var(--color-bg-card);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 18px 40px rgba(0, 0, 0, 0.28);
    transition: border-color var(--theme-transition), box-shadow var(--theme-transition);
}

.about-image-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.05) 100%);
}

.about-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    background: var(--color-bg-elevated);
}

.about-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    justify-self: start;
    max-width: 58ch;
}

.about-copy p {
    max-width: 54ch;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    line-height: 1.68;
}

.about-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.about-highlight {
    min-height: 96px;
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.035);
    transition: border-color var(--theme-transition), background var(--theme-transition), transform var(--transition-base);
}

.about-highlight:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--theme-primary), 0.38);
    background: rgba(var(--theme-primary), 0.06);
}

.about-highlight-label {
    display: block;
    margin-bottom: var(--space-xs);
    color: rgb(var(--theme-primary));
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.about-highlight strong {
    display: block;
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: 1.35;
}

html[data-color-scheme="light"] .about-highlight {
    background: rgba(255, 255, 255, 0.82);
}

@media (max-width: 980px) {
    .about-layout {
        grid-template-columns: 1fr;
        max-width: 680px;
    }

    .about-media,
    .about-copy {
        justify-self: center;
    }

    .about-media {
        width: min(100%, 520px);
    }
}

@media (max-width: 560px) {
    .about-highlights {
        grid-template-columns: 1fr;
    }

    .about-copy p {
        font-size: var(--font-size-base);
    }
}

/* ═══════════════════════════════════════════════
   SERVICES SECTION
   ═══════════════════════════════════════════════ */
.services-section {
    padding: var(--space-4xl) 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    align-items: stretch;
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.025) 0%,
        rgba(255, 255, 255, 0.005) 100%
    );
    border: 1px solid var(--color-border);
    transition: transform var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
    overflow: hidden;
}

/* Top accent bar — slides in on hover */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgb(var(--theme-primary)) 50%,
        transparent 100%
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out);
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--theme-primary), 0.35);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.25),
        0 4px 12px rgba(var(--theme-primary), 0.08);
}

.service-card:hover::before {
    transform: scaleX(1);
}

/* ─── Featured (recommended) card ─── */
.service-card--featured {
    background: linear-gradient(
        160deg,
        rgba(var(--theme-primary), 0.08) 0%,
        rgba(var(--theme-primary), 0.02) 100%
    );
    border-color: rgba(var(--theme-primary), 0.28);
    box-shadow: 0 0 32px rgba(var(--theme-primary), 0.06);
}
.service-card--featured::before {
    transform: scaleX(1);
}

.service-card__badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgb(var(--theme-primary));
    background: rgba(var(--theme-primary), 0.15);
    border: 1px solid rgba(var(--theme-primary), 0.3);
    border-radius: var(--radius-full);
    z-index: 2;
}

/* ─── Header row: icon + meta (price/duration) ─── */
.service-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-xs);
}

.service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(var(--theme-primary), 0.1);
    color: rgb(var(--theme-primary));
    flex-shrink: 0;
}

.service-card__meta {
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    text-align: right;
}

/* Featured card pushes meta away from the badge */
.service-card--featured .service-card__head {
    padding-right: 7rem;
}

.service-card__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.service-card__sub {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ─── Bullet & check blocks ─── */
.service-card__block {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.service-card__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.service-card__bullets,
.service-card__checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.service-card__bullets li,
.service-card__checks li {
    position: relative;
    padding-left: 1.4rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.service-card__bullets li::before {
    content: '•';
    position: absolute;
    left: 0.4rem;
    top: 0;
    color: rgb(var(--theme-primary));
    font-weight: 700;
}

.service-card__checks li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: rgb(var(--theme-primary));
    font-weight: 700;
}

/* ─── Tech tag pills ─── */
.service-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: var(--space-xs);
}

.service-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
}

.service-card--featured .service-card__tag {
    color: rgb(var(--theme-primary));
    background: rgba(var(--theme-primary), 0.08);
    border-color: rgba(var(--theme-primary), 0.18);
}

/* ─── Footer with CTA + project examples ─── */
.service-card__foot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.service-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: 0.7rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgb(var(--theme-primary));
    background: rgba(var(--theme-primary), 0.08);
    border: 1px solid rgba(var(--theme-primary), 0.2);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.service-card__cta:hover {
    background: rgba(var(--theme-primary), 0.16);
    border-color: rgba(var(--theme-primary), 0.4);
    transform: translateX(2px);
}

.service-card--featured .service-card__cta {
    background: rgb(var(--theme-primary));
    color: var(--color-bg);
    border-color: rgb(var(--theme-primary));
}

.service-card--featured .service-card__cta:hover {
    background: rgba(var(--theme-primary), 0.85);
    border-color: rgba(var(--theme-primary), 0.85);
}

.service-card__examples {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.service-card__examples a {
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-text-muted);
    transition: color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.service-card__examples a:hover {
    color: rgb(var(--theme-primary));
    border-color: rgb(var(--theme-primary));
}

/* Light-mode tweaks */
html[data-color-scheme="light"] .service-card__tag {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--color-text-secondary);
}
html[data-color-scheme="light"] .service-card--featured .service-card__cta {
    color: #fff;
}

/* ═══ Legacy classes kept for back-compat (old layout still exists in
   project sub-pages) — restore originals here so nothing else breaks. */
.service-number {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.15em;
    color: rgb(var(--theme-primary));
    margin-bottom: var(--space-md);
    opacity: 0.85;
}

.service-card h3 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--space-md);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgb(var(--theme-primary));
    text-decoration: none;
    transition: gap var(--duration-base) var(--ease-out);
}

.service-link::after {
    content: '→';
    transition: transform var(--duration-base) var(--ease-out);
    display: inline-block;
}

.service-card:hover .service-link::after {
    transform: translateX(4px);
}

.services-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-3xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--color-border);
}

.services-cta p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    text-align: center;
}

/* ═══════════════════════════════════════════════
   PRICING SECTION
   ═══════════════════════════════════════════════ */
.pricing-section {
    padding: var(--space-4xl) 0;
    background: var(--color-bg-elevated);
    position: relative;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    align-items: start;
}

.pricing-card {
    background: var(--color-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    transition: all var(--duration-base) var(--ease-out);
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    border-color: rgba(var(--theme-primary), 0.2);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.pricing-card.featured {
    border-color: rgba(var(--theme-primary), 0.4);
    box-shadow: 0 0 40px rgba(var(--theme-primary), 0.1);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgb(var(--theme-primary)), rgb(var(--theme-secondary)));
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 0.35rem 1.25rem;
    border-radius: var(--radius-full);
    letter-spacing: 0.08em;
}

.pricing-header {
    margin-bottom: 1.5rem;
}

.pricing-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.pricing-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.pricing-price {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pricing-amount {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    background: linear-gradient(135deg, rgb(var(--theme-primary)), rgb(var(--theme-accent)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    flex: 1;
}

.pricing-features li {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: 0.5rem 0;
    line-height: 1.5;
}

.pricing-cta {
    width: 100%;
    text-align: center;
    margin-top: auto;
}

.pricing-note {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 3rem;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-section {
    padding: var(--space-4xl) 0;
    position: relative;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.testimonial-card {
    background: var(--color-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: 2rem;
    transition: all var(--duration-base) var(--ease-out);
    position: relative;
}

.testimonial-card:hover {
    border-color: rgba(var(--theme-primary), 0.2);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.testimonial-stars {
    color: rgb(var(--theme-primary));
    font-size: var(--font-size-lg);
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
}

.testimonial-quote {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem 0;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(var(--theme-primary)), rgb(var(--theme-secondary)));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.testimonial-name {
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.testimonial-role {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* Stats row */
.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Skills Grid — Variant A: hero column layout
   Frontend (left) · KI featured (center, wider) · Backend (right).
   Featured column is explicitly placed in column 2 so DOM order can
   stay logical (Frontend → Backend → AI). */
.skills-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
    margin-bottom: var(--space-xl);
    align-items: stretch;
}

.skill-category {
    padding: 1.25rem 1.1rem;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    transition: border-color var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out);
}

.skill-category:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.025);
}

.skill-category--featured {
    grid-column: 2;
    grid-row: 1;
    background: linear-gradient(180deg,
        rgba(var(--theme-primary), 0.07),
        rgba(var(--theme-primary), 0.02));
    border-color: rgba(var(--theme-primary), 0.22);
    box-shadow: 0 0 32px rgba(var(--theme-primary), 0.08);
}

.skill-category--featured:hover {
    border-color: rgba(var(--theme-primary), 0.35);
    background: linear-gradient(180deg,
        rgba(var(--theme-primary), 0.1),
        rgba(var(--theme-primary), 0.03));
}

.skill-category--featured .skill-category-title {
    color: rgb(var(--theme-primary));
}

.skill-category--featured .skill-tag {
    padding: 0.8rem 0.45rem 0.6rem;
    font-size: 11px;
}
.skill-category--featured .skill-tag .skill-icon {
    width: 36px;
    height: 36px;
}

html[data-color-scheme="light"] .skill-category {
    background: rgba(0, 0, 0, 0.015);
    border-color: rgba(0, 0, 0, 0.06);
}

html[data-color-scheme="light"] .skill-category:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

.skill-category-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.skill-tags {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 0.6rem;
}

.skill-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    padding: 0.7rem 0.4rem 0.55rem;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    transition: transform var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

/* Real-tech-icons sit ABOVE the name. White-tinted icons (typescript, etc.)
   stay crisp on retina; the icon brightens + lifts slightly on hover. */
.skill-tag .skill-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.95;
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.skill-tag:hover .skill-icon {
    opacity: 1;
    transform: scale(1.08);
}

/* Stacked dual-icon (e.g. HTML5 + CSS3) sits in the icon row. */
.skill-tag .skill-icon-pair {
    display: inline-flex;
    align-items: center;
    height: 32px;
}
.skill-tag .skill-icon-pair .skill-icon {
    width: 26px;
    height: 26px;
}
.skill-tag .skill-icon-pair .skill-icon + .skill-icon {
    margin-left: -0.35rem;
}

/* Text-glyph fallback for skills without a real icon (Stripe, GSAP, Prompts). */
.skill-tag .skill-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.skill-tag .skill-name {
    display: block;
    line-height: 1.15;
    word-break: break-word;
    hyphens: auto;
}

.skill-tag:hover {
    color: var(--color-text);
    background: rgba(var(--theme-primary), 0.1);
    border-color: rgba(var(--theme-primary), 0.3);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.skill-tag.highlight {
    color: rgb(var(--theme-primary));
    background: rgba(var(--theme-primary), 0.1);
    border-color: rgba(var(--theme-primary), 0.22);
}

.skill-tag.highlight .skill-icon-fallback {
    background: rgba(var(--theme-primary), 0.18);
    color: rgb(var(--theme-primary));
}

.skill-tag.highlight:hover {
    background: rgba(var(--theme-primary), 0.18);
    border-color: rgba(var(--theme-primary), 0.4);
}

/* ─── Skills section entry animation ───
   Initial state: tags hidden + slightly offset; revealed by JS via
   `.is-animated` class on the section once it scrolls into view.
   When JS is unavailable, `.no-anim` fallback shows everything. */
.skills-section .skill-tag {
    opacity: 0;
    transform: translateY(24px) scale(0.85);
    will-change: opacity, transform;
}

.skills-section .skill-category-title {
    position: relative;
    opacity: 0;
    transform: translateY(12px);
}

.skills-section .skill-category-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, rgb(var(--theme-primary)), transparent);
    transition: width 0.6s var(--ease-out) 0.1s;
}

.skills-section.is-animated .skill-category-title::after {
    width: 40px;
}

/* Pulse loop for AI/highlight tags — paused via JS when off-screen. */
.skill-tag.highlight.is-pulsing {
    animation: skillPulse 2.6s ease-in-out infinite;
}

@keyframes skillPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--theme-primary), 0);
    }
    50% {
        box-shadow: 0 0 14px 2px rgba(var(--theme-primary), 0.28);
    }
}

@media (prefers-reduced-motion: reduce) {
    .skills-section .skill-tag,
    .skills-section .skill-category-title {
        opacity: 1 !important;
        transform: none !important;
    }
    .skills-section .skill-category-title::after {
        width: 40px !important;
        transition: none !important;
    }
    .skill-tag.highlight.is-pulsing {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════
   CONTACT SECTION
   ═══════════════════════════════════════════════ */
.contact-section {
    padding: var(--space-4xl) 0;
    background: var(--color-bg-elevated);
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.contact-info p {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    text-decoration: none;
    padding: var(--space-sm) 0;
    transition: color var(--duration-base) var(--ease-out);
}

.contact-link:hover {
    color: rgb(var(--theme-primary));
}

.contact-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(var(--theme-primary), 0.1);
    color: rgb(var(--theme-primary));
    flex-shrink: 0;
}

.contact-map {
    margin-top: 1.5rem;
}

.contact-map-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    min-height: 96px;
    padding: var(--space-lg);
    color: var(--color-text-primary);
    text-decoration: none;
    background: rgba(var(--theme-primary), 0.08);
    border: 1px solid rgba(var(--theme-primary), 0.22);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.contact-map-link:hover {
    background: rgba(var(--theme-primary), 0.13);
    border-color: rgba(var(--theme-primary), 0.38);
    transform: translateY(-1px);
}

.contact-map-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    color: rgb(var(--theme-primary));
    background: rgba(var(--theme-primary), 0.12);
    border-radius: 50%;
}

.contact-map-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.contact-map-title {
    font-weight: 700;
    color: var(--color-text-primary);
}

.contact-map-action {
    font-size: var(--font-size-sm);
    color: rgb(var(--theme-primary));
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-form-status {
    min-height: 1.4em;
    margin: calc(var(--space-sm) * -1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.contact-form-status.is-success {
    color: rgb(var(--theme-primary));
}

.contact-form-status.is-error {
    color: #f87171;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.form-group input,
.form-group textarea {
    padding: 0.875rem 1rem;
    min-height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    transition: border-color var(--duration-base), box-shadow var(--duration-base);
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: rgb(var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary), 0.1);
}

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

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.site-footer {
    padding: var(--space-3xl) 0;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.site-footer p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.site-footer a {
    color: var(--color-text-secondary);
    transition: color var(--duration-base);
}

.site-footer a:hover {
    color: rgb(var(--theme-primary));
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all var(--duration-base) var(--ease-out);
}

.footer-social-link:hover {
    color: rgb(var(--theme-primary));
    background: rgba(var(--theme-primary), 0.1);
    border-color: rgba(var(--theme-primary), 0.3);
    transform: translateY(-2px);
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: 0;
}

/* ═══════════════════════════════════════════════
   SCROLL REVEAL (GSAP)
   ═══════════════════════════════════════════════ */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
}

/* ═══════════════════════════════════════════════
   LEGAL PAGES
   ═══════════════════════════════════════════════ */
.legal-page {
    padding-top: calc(var(--nav-height) + var(--space-3xl));
    padding-bottom: var(--space-5xl);
    min-height: 80vh;
}

.legal-page h1 {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    margin-bottom: var(--space-3xl);
    background: linear-gradient(135deg, rgb(var(--theme-primary)), rgb(var(--theme-accent)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legal-page h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.legal-page h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.legal-page h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.legal-page p,
.legal-page ul,
.legal-page li {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.legal-page ul {
    padding-left: var(--space-xl);
}

.legal-page a {
    color: rgb(var(--theme-primary));
    text-decoration: underline;
}

.legal-page a:hover {
    color: rgb(var(--theme-accent));
}

/* ═══════════════════════════════════════════════
   COOKIE CONSENT
   ═══════════════════════════════════════════════ */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    padding: 1rem 2rem;
    background: rgba(18, 18, 26, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-content {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cookie-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.cookie-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: var(--font-size-sm);
}

.cookie-link {
    color: rgb(var(--theme-primary));
    font-size: var(--font-size-sm);
    text-decoration: underline;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
}

html[data-color-scheme="light"] .cookie-consent {
    background: rgba(245, 245, 250, 0.97);
    border-top-color: rgba(0, 0, 0, 0.1);
}

html[data-color-scheme="light"] .cookie-content p {
    color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — LAPTOP / TABLET LANDSCAPE (1024px)
   ═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hero-content {
        gap: var(--space-2xl);
    }

    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .skill-category--featured {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .pricing-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pricing-card.featured {
        grid-column: span 2;
    }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET (768px)
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    :root {
        --font-size-3xl: 1.75rem;
        --font-size-4xl: 2rem;
        --font-size-5xl: 2.5rem;
        --space-5xl: 5rem;
    }

    #navbar.scrolled {
        background: rgba(10, 10, 15, 0.9);
        backdrop-filter: blur(8px) saturate(115%);
        -webkit-backdrop-filter: blur(8px) saturate(115%);
    }

    html[data-color-scheme="light"] #navbar.scrolled {
        background: rgba(245, 245, 250, 0.92);
    }

    .hero-slides-container {
        min-height: 820px;
    }

    .nav-links {
        display: none;
    }

    /* Color picker stays on mobile — just trim it down so it fits next to
       the theme toggle + menu button. The popover already renders relative
       to the trigger so it works in tight nav layouts. */
    .color-picker-trigger {
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
    }

    .color-picker-current {
        width: 18px;
        height: 18px;
    }

    .color-picker-popover {
        right: -4px;
        padding: 6px 10px;
        gap: 4px;
    }

    .nav-links.open {
        display: flex;
        position: absolute;
        top: calc(100% + var(--space-sm));
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
        min-width: 240px;
        padding: var(--space-lg);
        background: rgba(10, 10, 15, 0.96);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }

    html[data-color-scheme="light"] .nav-links.open {
        background: rgba(245, 245, 250, 0.98);
    }

    .nav-links.open a {
        width: 100%;
    }

    .menu-toggle,
    .mobile-menu-toggle {
        display: flex;
    }

    .slide-content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        text-align: center;
    }

    .slide-text {
        align-items: center;
    }

    .slide-description {
        max-width: 100%;
    }

        /* On mobile the square-derived photo needs a centered text column and
             a full-width veil for solid contrast. */
    .hero-section--single .hero-content {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }
    .hero-section--single .hero-text {
        align-items: center;
        grid-column: auto;
    }
    .hero-section--single .slide-cta {
        justify-content: center;
    }
    .hero-section--single::before {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.45) 50%,
            rgba(0, 0, 0, 0.55) 100%
        );
    }
    html[data-color-scheme="light"] .hero-section--single::before {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.40) 50%,
            rgba(255, 255, 255, 0.55) 100%
        );
    }
    .hero-section--square::before,
    html[data-color-scheme="light"] .hero-section--square::before {
        background: linear-gradient(
            180deg,
            rgba(8, 10, 18, 0.34) 0%,
            rgba(8, 10, 18, 0.56) 48%,
            rgba(8, 10, 18, 0.76) 100%
        );
    }
    .hero-bg-image {
        object-position: 48% 78%;
    }

    .slide-cta {
        justify-content: center;
    }

    .slide-tags {
        justify-content: center;
    }

    .slider-arrow-left {
        left: 0.75rem;
    }

    .slider-arrow-right {
        right: 0.75rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: var(--space-xl);
    }

    .service-card--featured .service-card__head {
        padding-right: 0;
        flex-wrap: wrap;
    }

    .service-card__badge {
        position: static;
        align-self: flex-start;
        margin-bottom: var(--space-xs);
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .pricing-card.featured {
        grid-column: unset;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        text-align: center;
    }

    .hero-text {
        align-items: center;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .about-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .skill-category--featured {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .showcase-container {
        perspective: none;
        transform-style: flat;
    }

    .showcase-badge {
        right: 0;
        top: -10px;
    }

    .pricing-features li {
        font-size: var(--font-size-base);
    }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE (480px)
   ═══════════════════════════════════════════════ */
@media (max-width: 480px) {
    :root {
        --font-size-3xl: 1.5rem;
        --font-size-4xl: 1.75rem;
        --space-xl: 1.25rem;
        --space-5xl: 4rem;
    }

    .hero-section {
        padding-top: var(--nav-height);
    }

    .hero-slides-container {
        min-height: clamp(640px, calc(100dvh - var(--nav-height) - 60px), 720px);
    }

    /* Project showcase frames stay visible on mobile — just smaller and
       without the perspective tilt so the whole browser mock-up fits the
       viewport width without being clipped. */
    .showcase-container {
        max-width: min(360px, 90vw);
    }

    .showcase-frame {
        transform: none;
        box-shadow:
            0 12px 24px rgba(var(--theme-primary), 0.18),
            0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .showcase-badge {
        top: -8px;
        right: -8px;
        font-size: 0.6rem;
        padding: 5px 10px;
    }

    .project-nav {
        gap: var(--space-xs);
    }

    .project-nav-btn {
        padding: 0.375rem 0.75rem;
        font-size: var(--font-size-xs);
        min-height: 40px;
    }

    .slider-arrow {
        display: none;
    }

    .stat-number {
        font-size: var(--font-size-2xl);
    }

    .about-stats {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .skills-grid {
        gap: 1rem;
        grid-template-columns: 1fr;
    }

    .skill-category--featured {
        grid-column: auto;
        grid-row: auto;
    }

    .service-card {
        padding: var(--space-xl);
    }

    .footer-links a {
        padding: var(--space-sm) var(--space-xs);
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: var(--space-sm);
    }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — SMALL PHONE (360px)
   ═══════════════════════════════════════════════ */
@media (max-width: 360px) {
    :root {
        --space-xl: 1rem;
        --space-5xl: 3.5rem;
    }

    .hero-slides-container {
        min-height: 680px;
    }

    .project-nav-btn {
        padding: 0.375rem 0.5rem;
    }

    .project-nav-btn span:not(.nav-dot) {
        display: none;
    }

    .slide-description {
        font-size: var(--font-size-sm);
    }

    .btn {
        padding: 0.625rem 1.125rem;
        font-size: var(--font-size-sm);
    }

    .showcase-badge {
        font-size: 0.625rem;
        padding: 5px 8px;
        right: -4px;
    }
}

/* ═══════════════════════════════════════════════
   ACCESSIBILITY — REDUCED MOTION
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .project-orb,
    .scroll-hint,
    .availability-dot {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }

    .btn-primary:hover,
    .btn-outline:hover,
    .project-nav-btn:hover,
    .slider-arrow:hover {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════
   PERFORMANCE
   - content-visibility lets the browser skip layout/paint for sections
     that aren't on screen yet. Massive scroll-perf win on long pages.
     The contain-intrinsic-size keeps the scrollbar honest.
   - Pause the projects-section blob animations while the section is
     off-screen; the IntersectionObserver in script.js toggles .in-view.
   - Reduce backdrop-filter blur on small screens — backdrop-filter is
     one of the most expensive paints; halving the radius materially
     reduces compositor cost on mobile/older GPUs.
   ═══════════════════════════════════════════════ */
.skills-section,
.services-section,
.pricing-section,
.testimonials-section,
.contact-section,
.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
}

.projects-section:not(.in-view) .project-orb {
    animation-play-state: paused;
}

/* Pause the hero scroll-hint bounce once the user has scrolled past the
   hero. The animation is cheap on its own, but combined with everything
   else off-screen it adds avoidable compositor work on every frame.
   #navbar gains .scrolled past 50px of scroll, so this acts as a
   pure-CSS "did the user start scrolling" check. */
#navbar.scrolled ~ main .scroll-hint {
    animation: none;
    opacity: 0;
}

@media (max-width: 768px) {
    /* Cheaper blurs on phones — barely visible difference, large GPU win. */
    .navbar,
    .color-picker-popover,
    .mobile-menu {
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
    }

    /* The third portfolio orb is decorative; drop it on phones to free a layer. */
    .project-orb-3 { display: none; }
    .project-orb-1 { width: 360px; height: 360px; }
    .project-orb-2 { width: 280px; height: 280px; }
}

/* ═══════════════════════════════════════════════
   POLISH PASS — responsive, a11y, touch, typography
   - Additive overrides only. Targets weak spots found in the audit
     without rewriting existing components.
   ═══════════════════════════════════════════════ */

/* Fluid section title across the whole site so headings stop being 32px
   on a 360 px phone (where they collide with the 60ch limit). */
.section-title {
    font-size: clamp(1.5rem, 1rem + 2.4vw, 2.25rem);
}

/* Section note: shorter line length for comfortable reading. */
.section-note {
    max-width: min(60ch, 100%);
}

/* Section header rhythm — less aggressive bottom margin on phones. */
.section-header {
    margin-bottom: clamp(var(--space-lg), 3vw, var(--space-2xl));
}

/* Section vertical padding becomes fluid so 128 px tops on phones
   don't waste real estate. Keeps the existing rhythm on desktop. */
.services-section,
.about-section,
.skills-section,
.pricing-section,
.testimonials-section,
.contact-section {
    padding-top: clamp(var(--space-2xl), 6vw, var(--space-4xl));
    padding-bottom: clamp(var(--space-2xl), 6vw, var(--space-4xl));
}

/* Tap targets ≥ 44px without changing visual size of the dot. */
.color-picker-trigger {
    width: 44px;
    height: 44px;
}

.color-swatch {
    width: 32px;
    height: 32px;
}

/* Generic icon button hit area — most theme/lang toggles already use this. */
.btn-icon {
    min-width: 44px;
    min-height: 44px;
}

/* Form: prevent iOS zoom on focus + visible keyboard focus. */
.form-group input,
.form-group textarea {
    font-size: 16px;
}

.form-group input:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid rgb(var(--theme-primary));
    outline-offset: 2px;
}

/* Universal keyboard focus ring — currently only inputs have one. */
:where(a, button, [role="button"]):focus-visible {
    outline: 2px solid rgb(var(--theme-primary));
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Hero text never narrower than the headline can break to. Prevents
   a 380 px right column from overflowing on a 360 px phone. */
@media (max-width: 768px) {
    .hero-section--single .hero-content {
        grid-template-columns: 1fr;
        max-width: none;
        padding-inline: clamp(1rem, 6vw, 2rem);
        text-align: left;
    }
    .hero-section--single .hero-text {
        max-width: 100%;
        margin-left: 0;
    }
    .hero-section--single .slide-cta {
        justify-content: flex-start;
    }
    .hero-section--single::before {
        background: linear-gradient(
            180deg,
            rgba(8, 10, 18, 0.20) 0%,
            rgba(8, 10, 18, 0.45) 55%,
            rgba(8, 10, 18, 0.70) 100%
        );
    }
    html[data-color-scheme="light"] .hero-section--single::before {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.50) 55%,
            rgba(255, 255, 255, 0.70) 100%
        );
    }
    .hero-section--square::before,
    html[data-color-scheme="light"] .hero-section--square::before {
        background: linear-gradient(
            180deg,
            rgba(8, 10, 18, 0.24) 0%,
            rgba(8, 10, 18, 0.54) 55%,
            rgba(8, 10, 18, 0.76) 100%
        );
    }
    .hero-bg-image {
        object-position: 47% 82%;
    }
}

/* Testimonials: explicit mobile single column (was relying on auto-fit). */
@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

/* Skill / service / pricing cards — gentler padding on phones. */
@media (max-width: 480px) {
    .skill-category,
    .service-card,
    .pricing-card,
    .testimonial-card {
        padding: var(--space-lg);
    }
    .pricing-card.featured {
        padding: var(--space-lg);
    }
}

/* Light mode: lift secondary text contrast. The existing #3f4658 already
   passes AA against #f3f4f8, but section notes were rendering with the
   undefined --text-secondary. Force a real, readable colour. */
.section-note {
    color: var(--color-text-secondary);
}

/* Smooth, accessible motion fallback for the hero veil. */
@media (prefers-reduced-motion: reduce) {
    .hero-section--single::before,
    .hero-section--single .slide-title,
    .hero-section--single .slide-description {
        transition: none;
    }
}

/* Production polish — compact project tabs and small-viewport stability. */
.hero-slides-container,
.slide-content,
.showcase-container,
.slide-cta,
.slide-tags {
    min-width: 0;
}

.slide-cta .btn,
.slide-tags span {
    max-width: 100%;
    white-space: normal;
}

.slide-tags span {
    overflow-wrap: anywhere;
}

.showcase-container {
    max-width: min(520px, 100%);
}

.showcase-frame,
.showcase-image-wrap,
.showcase-image-wrap img {
    max-width: 100%;
}

@media (max-width: 768px) {
    .hero-slides-container,
    .projects-section .hero-slides-container {
        min-height: 640px;
        padding-inline: clamp(1rem, 4vw, 1.5rem);
    }

    .hero-slide {
        padding-inline: clamp(0.5rem, 2vw, 1rem);
    }

    .slide-content {
        gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
    }

    .slide-description {
        font-size: var(--font-size-base);
        line-height: 1.62;
    }

    .project-pagination {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: var(--space-xl);
        -webkit-overflow-scrolling: touch;
        padding: 0 var(--space-xl) var(--space-xs);
        margin-inline: calc(var(--space-xl) * -1);
        scrollbar-width: thin;
    }

    .project-pag-btn {
        flex: 0 0 auto;
        min-width: max-content;
        padding-inline: 0.9rem;
    }
}

@media (max-width: 600px) {
    .projects-section {
        padding-block: clamp(3rem, 10vw, var(--space-4xl));
    }

    .about-layout,
    .services-grid,
    .skills-grid,
    .testimonials-grid,
    .contact-layout {
        gap: var(--space-xl);
    }

    .contact-info p {
        margin-bottom: var(--space-lg);
    }

    .contact-form {
        gap: var(--space-md);
    }

    .cookie-consent {
        padding: var(--space-md) var(--space-lg);
    }

    .cookie-content {
        align-items: stretch;
        gap: var(--space-md);
    }

    .cookie-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .hero-slides-container,
    .projects-section .hero-slides-container {
        min-height: 600px;
    }

    .project-mode-selector {
        border-radius: var(--radius-lg);
    }

    .project-mode-btn {
        min-height: 44px;
        padding-inline: 0.65rem;
    }

    .project-pag-btn {
        gap: 0.45rem;
        padding: 0.55rem 0.75rem;
    }

    .project-pag-btn .project-pag-index {
        font-size: 0.66rem;
    }

    .project-pag-btn .project-pag-name {
        font-size: 0.8rem;
    }

    .slide-cta {
        width: 100%;
        justify-content: center;
    }

    .slide-cta .btn {
        flex: 1 1 min(100%, 13rem);
        justify-content: center;
        min-height: 44px;
        text-align: center;
    }

    .slide-tags {
        justify-content: center;
        gap: 0.45rem;
    }

    .showcase-container {
        max-width: min(330px, 100%);
    }
}

@media (max-width: 360px) {
    .hero-slides-container,
    .projects-section .hero-slides-container {
        min-height: 580px;
    }

    .project-pag-btn span:not(.nav-dot) {
        display: inline;
    }

    .project-pag-btn .project-pag-name {
        white-space: nowrap;
    }

    .project-pag-btn .project-pag-index {
        display: inline-block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .project-pag-btn,
    .project-mode-btn,
    .showcase-frame,
    .showcase-badge {
        transition: none !important;
    }

    .project-pag-btn:hover,
    .showcase-frame:hover,
    .color-swatch:hover {
        transform: none !important;
    }
}