/**
 * Unified Theme + Signal System
 *
 * Single source of truth for:
 * - theme mode (auto/dark/light)
 * - signal palettes
 * - wallpaper presets (mode aware)
 * - global accent mappings (header, outlines, focus, CTA)
 */

:root {
    color-scheme: dark;

    /* Signal palette scale (Classic Premium / Dark) */
    --signal-default-300: #e6c991;
    --signal-default-500: #d4a45a;
    --signal-default-700: #9f7033;
    --signal-default-500-rgb: 212, 164, 90;

    --signal-gold-300: #f0d9a9;
    --signal-gold-500: #e1bf78;
    --signal-gold-700: #ae8a45;
    --signal-gold-500-rgb: 225, 191, 120;

    --signal-coral-300: #e9b5ac;
    --signal-coral-500: #d9887a;
    --signal-coral-700: #a95a4f;
    --signal-coral-500-rgb: 217, 136, 122;

    --signal-teal-300: #9bcfca;
    --signal-teal-500: #4fa7a1;
    --signal-teal-700: #2f7270;
    --signal-teal-500-rgb: 79, 167, 161;

    --signal-terracotta-300: #e2b08d;
    --signal-terracotta-500: #c97a45;
    --signal-terracotta-700: #91502c;
    --signal-terracotta-500-rgb: 201, 122, 69;

    /* Active signal defaults */
    --signal-300: var(--signal-default-300);
    --signal-500: var(--signal-default-500);
    --signal-700: var(--signal-default-700);
    --signal-500-rgb: var(--signal-default-500-rgb);

    /* Semantic accent tokens */
    --accent-main: var(--signal-500);
    --accent-main-rgb: var(--signal-500-rgb);
    --accent-main-ink: var(--signal-300);
    --accent-light: var(--signal-300);
    --accent-dark: var(--signal-700);
    --accent-soft: rgba(var(--signal-500-rgb), 0.14);
    --accent-glow: rgba(var(--signal-500-rgb), 0.24);

    /* Header accents are intentionally lighter and cleaner */
    --accent-header: #78afc2;
    --accent-header-rgb: 120, 175, 194;

    /* Outlines default to the active header accent */
    --accent-outline-stroke: var(--accent-header);

    /* Surface defaults */
    --wall-bg: #0a0908;
    --wall-bg-alt: #0d0c0b;
    --wall-wave-cyan: 6, 182, 212;
    --wall-wave-indigo: 99, 102, 241;
    --wall-wave-purple: 139, 92, 246;
}

/* --------------------------------------------------------------------------
   Signal palettes (selected via html[data-signal])
   -------------------------------------------------------------------------- */
:root:not([data-signal]),
:root[data-signal="default"] {
    --signal-500: var(--signal-custom, var(--signal-default-500));
    --signal-500-rgb: var(--signal-custom-rgb, var(--signal-default-500-rgb));
    --signal-300: var(--signal-custom-light, color-mix(in srgb, var(--signal-500) 70%, #ffffff));
    --signal-700: var(--signal-custom-dark, color-mix(in srgb, var(--signal-500) 74%, #000000));
}

:root[data-signal="gold"] {
    --signal-300: var(--signal-gold-300);
    --signal-500: var(--signal-gold-500);
    --signal-700: var(--signal-gold-700);
    --signal-500-rgb: var(--signal-gold-500-rgb);
}

:root[data-signal="coral"] {
    --signal-300: var(--signal-coral-300);
    --signal-500: var(--signal-coral-500);
    --signal-700: var(--signal-coral-700);
    --signal-500-rgb: var(--signal-coral-500-rgb);
}

:root[data-signal="teal"] {
    --signal-300: var(--signal-teal-300);
    --signal-500: var(--signal-teal-500);
    --signal-700: var(--signal-teal-700);
    --signal-500-rgb: var(--signal-teal-500-rgb);
}

:root[data-signal="terracotta"] {
    --signal-300: var(--signal-terracotta-300);
    --signal-500: var(--signal-terracotta-500);
    --signal-700: var(--signal-terracotta-700);
    --signal-500-rgb: var(--signal-terracotta-500-rgb);
}

/* --------------------------------------------------------------------------
   Legacy token bridge
   -------------------------------------------------------------------------- */
:root {
    --color-signal-300: var(--signal-300);
    --color-signal-500: var(--signal-500);
    --color-signal-700: var(--signal-700);
    --color-signal: var(--accent-main);
    --color-signal-ink: var(--accent-main-ink, var(--accent-main));
    --c-signal: var(--accent-main);
    --color-signal-rgb: var(--accent-main-rgb);
    --signal-rgb: var(--accent-main-rgb);
    --color-signal-light: var(--accent-light);
    --c-signal-light: var(--accent-light);
    --color-signal-dark: var(--accent-dark);
    --c-signal-dark: var(--accent-dark);
    --c-signal-glow: var(--accent-glow);
    --c-signal-subtle: var(--accent-soft);
    --c-gold: var(--accent-main);
    --color-gold: var(--accent-main);
    --c-gold-dark: var(--accent-dark);
    --c-gold-dim: var(--accent-dark);
    --color-gold-dark: var(--accent-dark);
    --color-gold-dim: var(--accent-dark);
    --mm-header-accent-color: var(--accent-header);
    --mm-header-accent-rgb: var(--accent-header-rgb);
    --accent-focus-ring: rgba(var(--accent-main-rgb), 0.34);
}

/* --------------------------------------------------------------------------
   Theme mode (selected via html[data-theme])
   -------------------------------------------------------------------------- */
:root.dark,
:root[data-theme="dark"] {
    color-scheme: dark;
}

:root.light,
:root[data-theme="light"] {
    color-scheme: light;

    /* Signal palette scale (Classic Premium / Light) */
    --signal-default-300: #b78855;
    --signal-default-500: #8e6230;
    --signal-default-700: #5f3f1f;
    --signal-default-500-rgb: 142, 98, 48;

    --signal-gold-300: #c0955e;
    --signal-gold-500: #9a6b2f;
    --signal-gold-700: #694519;
    --signal-gold-500-rgb: 154, 107, 47;

    --signal-coral-300: #b47971;
    --signal-coral-500: #8e4e45;
    --signal-coral-700: #5f302a;
    --signal-coral-500-rgb: 142, 78, 69;

    --signal-teal-300: #4d9093;
    --signal-teal-500: #2f6e72;
    --signal-teal-700: #1e4f53;
    --signal-teal-500-rgb: 47, 110, 114;

    --signal-terracotta-300: #b67a55;
    --signal-terracotta-500: #8a4d2a;
    --signal-terracotta-700: #5d321c;
    --signal-terracotta-500-rgb: 138, 77, 42;

    --color-text: #13243b;
    --color-text-dim: rgba(19, 36, 59, 0.74);
    --color-text-meta: rgba(19, 36, 59, 0.68);
    --color-text-inv: #f8f2e6;
    --color-glass: rgba(255, 251, 244, 0.76);
    --color-glass-border: rgba(44, 38, 30, 0.14);
    --color-bg-hover: rgba(19, 36, 59, 0.055);
    --color-bg-card: rgba(255, 255, 255, 0.7);
    --accent-main-ink: var(--signal-700);
    --color-signal-ink: var(--signal-700);
    --accent-header: #2f6677;
    --accent-header-rgb: 47, 102, 119;
    --accent-outline-stroke: var(--accent-header);
}

/* Light-mode signal harmonization:
   keep each signal identity while preserving strong contrast on light surfaces. */
:root[data-theme="light"]:not([data-signal]),
:root[data-theme="light"][data-signal="default"] {
    --signal-500: var(--signal-custom, var(--signal-default-500));
    --signal-500-rgb: var(--signal-custom-rgb, var(--signal-default-500-rgb));
    --signal-300: var(--signal-custom-light, color-mix(in srgb, var(--signal-500) 66%, #ffffff));
    --signal-700: var(--signal-custom-dark, color-mix(in srgb, var(--signal-500) 72%, #000000));
}

:root[data-theme="light"][data-signal="gold"] {
    --signal-300: var(--signal-gold-300);
    --signal-500: var(--signal-gold-500);
    --signal-700: var(--signal-gold-700);
    --signal-500-rgb: var(--signal-gold-500-rgb);
}

:root[data-theme="light"][data-signal="coral"] {
    --signal-300: var(--signal-coral-300);
    --signal-500: var(--signal-coral-500);
    --signal-700: var(--signal-coral-700);
    --signal-500-rgb: var(--signal-coral-500-rgb);
}

:root[data-theme="light"][data-signal="teal"] {
    --signal-300: var(--signal-teal-300);
    --signal-500: var(--signal-teal-500);
    --signal-700: var(--signal-teal-700);
    --signal-500-rgb: var(--signal-teal-500-rgb);
}

:root[data-theme="light"][data-signal="terracotta"] {
    --signal-300: var(--signal-terracotta-300);
    --signal-500: var(--signal-terracotta-500);
    --signal-700: var(--signal-terracotta-700);
    --signal-500-rgb: var(--signal-terracotta-500-rgb);
}

/* --------------------------------------------------------------------------
   Wallpaper presets (mode-aware)
   -------------------------------------------------------------------------- */
:root[data-theme="dark"][data-bg-preset="deep-space"] {
    --wall-bg: #0a0908;
    --wall-bg-alt: #0d0c0b;
    --wall-wave-cyan: 6, 182, 212;
    --wall-wave-indigo: 99, 102, 241;
    --wall-wave-purple: 139, 92, 246;
}

:root[data-theme="dark"][data-bg-preset="midnight-blue"] {
    --wall-bg: #0a1628;
    --wall-bg-alt: #0d1d35;
    --wall-wave-cyan: 56, 189, 248;
    --wall-wave-indigo: 99, 102, 241;
    --wall-wave-purple: 124, 58, 237;
}

:root[data-theme="dark"][data-bg-preset="obsidian"] {
    --wall-bg: #050505;
    --wall-bg-alt: #0a0a0a;
    --wall-wave-cyan: 6, 182, 212;
    --wall-wave-indigo: 79, 70, 229;
    --wall-wave-purple: 139, 92, 246;
}

:root[data-theme="dark"][data-bg-preset="aurora-dark"] {
    --wall-bg: #080b14;
    --wall-bg-alt: #0d1220;
    --wall-wave-cyan: 34, 211, 238;
    --wall-wave-indigo: 129, 140, 248;
    --wall-wave-purple: 167, 139, 250;
}

:root[data-theme="dark"][data-bg-preset="charcoal"] {
    --wall-bg: #121212;
    --wall-bg-alt: #1a1a1a;
    --wall-wave-cyan: 6, 182, 212;
    --wall-wave-indigo: 99, 102, 241;
    --wall-wave-purple: 139, 92, 246;
}

:root[data-theme="dark"][data-bg-preset="ocean-depth"] {
    --wall-bg: #061018;
    --wall-bg-alt: #0a1825;
    --wall-wave-cyan: 14, 165, 233;
    --wall-wave-indigo: 59, 130, 246;
    --wall-wave-purple: 99, 102, 241;
}

:root[data-theme="light"][data-bg-preset="deep-space"] {
    --wall-bg: #f6f1e8;
    --wall-bg-alt: #ece3d6;
    --wall-wave-cyan: 100, 155, 186;
    --wall-wave-indigo: 123, 128, 172;
    --wall-wave-purple: 163, 135, 156;
}

:root[data-theme="light"][data-bg-preset="midnight-blue"] {
    --wall-bg: #f2f4f5;
    --wall-bg-alt: #e8ecef;
    --wall-wave-cyan: 90, 142, 178;
    --wall-wave-indigo: 112, 128, 170;
    --wall-wave-purple: 146, 126, 158;
}

:root[data-theme="light"][data-bg-preset="obsidian"] {
    --wall-bg: #f7f2ea;
    --wall-bg-alt: #eee4d8;
    --wall-wave-cyan: 96, 150, 179;
    --wall-wave-indigo: 131, 136, 172;
    --wall-wave-purple: 171, 145, 162;
}

:root[data-theme="light"][data-bg-preset="aurora-dark"] {
    --wall-bg: #f3efe8;
    --wall-bg-alt: #e9e3da;
    --wall-wave-cyan: 104, 155, 176;
    --wall-wave-indigo: 136, 138, 170;
    --wall-wave-purple: 176, 148, 163;
}

:root[data-theme="light"][data-bg-preset="charcoal"] {
    --wall-bg: #f4f1ec;
    --wall-bg-alt: #ebe5db;
    --wall-wave-cyan: 99, 149, 173;
    --wall-wave-indigo: 126, 132, 166;
    --wall-wave-purple: 163, 141, 157;
}

:root[data-theme="light"][data-bg-preset="ocean-depth"] {
    --wall-bg: #eef2f0;
    --wall-bg-alt: #e4eae8;
    --wall-wave-cyan: 84, 146, 170;
    --wall-wave-indigo: 116, 130, 162;
    --wall-wave-purple: 152, 139, 156;
}

/* Apply wallpaper tokens to global vars consumed by existing layers */
:root {
    --c-bg: var(--wall-bg);
    --color-bg: var(--wall-bg);
    --c-bg-alt: var(--wall-bg-alt);
    --color-bg-alt: var(--wall-bg-alt);
    --wave-cyan: var(--wall-wave-cyan);
    --wave-indigo: var(--wall-wave-indigo);
    --wave-purple: var(--wall-wave-purple);
}

/* --------------------------------------------------------------------------
   Header: hover/active = underline only
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .mm-os-center-nav .mm-menubar__nav-item,
    .mm-os-center-nav .mm-menubar__nav-item:hover,
    .mm-os-center-nav .mm-menubar__nav-item.active,
    .mm-os-center-nav .mm-menubar__nav-item[aria-current="page"] {
        background: transparent !important;
        border: 0 !important;
        border-width: 0 !important;
        border-color: transparent !important;
        box-shadow: none !important;
        filter: none !important;
    }

    .mm-os-center-nav .mm-menubar__nav-item {
        color: var(--color-text-dim) !important;
    }

    .mm-os-center-nav .mm-menubar__nav-item::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 7px;
        height: 1px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-header-rgb), 0.9) 50%, transparent 100%);
        transform: scaleX(0);
        transform-origin: center;
        opacity: 0;
        transition: transform 0.22s ease, opacity 0.22s ease;
    }

    .mm-os-center-nav .mm-menubar__nav-item:hover,
    .mm-os-center-nav .mm-menubar__nav-item.active,
    .mm-os-center-nav .mm-menubar__nav-item[aria-current="page"] {
        color: var(--accent-header) !important;
    }

    .mm-os-center-nav .mm-menubar__nav-item:hover::after,
    .mm-os-center-nav .mm-menubar__nav-item.active::after,
    .mm-os-center-nav .mm-menubar__nav-item[aria-current="page"]::after {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   Outline system: stroke-first (no forced fill)
   -------------------------------------------------------------------------- */
:root {
    --mm-outline-tilt-base: 3.4deg;
    --mm-outline-shadow-y: 7px;
    --mm-outline-shadow-blur: 16px;
    --mm-outline-shadow-alpha: 0.24;
    --mm-outline-shift-y: 0px;
    --mm-outline-scale: 1;
}

.text-outline,
.text-outline-glow,
.text-outline-glow-subtle,
.text-outline-signal,
.text-outline-thick {
    --mm-outline-base: var(--outline-color, var(--accent-outline-stroke, var(--color-signal)));
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: var(--outline-thickness, 1px) var(--mm-outline-base) !important;
    opacity: var(--outline-opacity, 1);
    filter: none !important;
    paint-order: stroke fill;
    text-shadow: none !important;
}

.text-outline-thick {
    -webkit-text-stroke: calc(var(--outline-thickness, 1px) + 1px) var(--mm-outline-base) !important;
}

.text-outline-glow-subtle {
    text-shadow: 0 0 8px rgba(var(--accent-main-rgb), 0.16) !important;
}

.text-outline-glow,
.text-outline-signal {
    text-shadow: 0 0 12px rgba(var(--accent-main-rgb), 0.2) !important;
}

@media (min-width: 1024px) {

    .text-outline,
    .text-outline-glow,
    .text-outline-glow-subtle,
    .text-outline-signal,
    .text-outline-thick {
        display: inline-block;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        transform-origin: 50% 76%;
        transform:
            perspective(1100px) rotateX(var(--mm-outline-tilt-x, var(--mm-outline-tilt-base))) translateY(var(--mm-outline-shift-y, 0px)) scale(var(--mm-outline-scale, 1));
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.08),
            0 var(--mm-outline-shadow-y, 7px) var(--mm-outline-shadow-blur, 16px) rgba(3, 9, 17, var(--mm-outline-shadow-alpha, 0.24)),
            0 0 10px rgba(var(--accent-header-rgb), 0.16) !important;
    }

    .mm-outline-hero-dynamic {
        will-change: auto;
    }

    .mm-hero-section.mm-hero-v2.mm-hero-scene-active .mm-outline-hero-dynamic {
        will-change: transform;
    }
}

:root[data-theme="light"] .text-outline,
:root[data-theme="light"] .text-outline-glow,
:root[data-theme="light"] .text-outline-glow-subtle,
:root[data-theme="light"] .text-outline-signal,
:root[data-theme="light"] .text-outline-thick {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28),
        0 var(--mm-outline-shadow-y, 7px) var(--mm-outline-shadow-blur, 16px) rgba(18, 31, 46, var(--mm-outline-shadow-alpha, 0.22)),
        0 0 9px rgba(var(--accent-header-rgb), 0.14) !important;
}

.mm-outline-off .text-outline,
.mm-outline-off .text-outline-glow,
.mm-outline-off .text-outline-glow-subtle,
.mm-outline-off .text-outline-signal,
.mm-outline-off .text-outline-thick {
    color: var(--color-signal) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Section heading fold-in (hero-inspired, reversible, low-cost)
   -------------------------------------------------------------------------- */
main#main section .mm-heading-fold {
    perspective: 1200px;
    transform-style: preserve-3d;
}

main#main section .mm-heading-fold .mm-heading-fold__inner {
    display: inline-block;
    transform-origin: 50% 100%;
    transform:
        perspective(1100px) rotateX(68deg) translate3d(0, 0.16em, 0) scaleY(0.96);
    opacity: 0.92;
    transition:
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

main#main section .mm-heading-fold.mm-reveal-text.in-view .mm-heading-fold__inner {
    transform: none;
    opacity: 1;
    will-change: auto;
}

/* Avoid double 3D transform stacking on outlined lines inside folded section headings. */
main#main section .mm-heading-fold .text-outline,
main#main section .mm-heading-fold .text-outline-glow,
main#main section .mm-heading-fold .text-outline-glow-subtle,
main#main section .mm-heading-fold .text-outline-signal,
main#main section .mm-heading-fold .text-outline-thick {
    transform: none !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* Dark/default: keep folded outline headlines clearly legible. */
:root:not([data-theme="light"]) main#main section .mm-heading-fold .text-outline,
:root:not([data-theme="light"]) main#main section .mm-heading-fold .text-outline-glow,
:root:not([data-theme="light"]) main#main section .mm-heading-fold .text-outline-glow-subtle,
:root:not([data-theme="light"]) main#main section .mm-heading-fold .text-outline-signal,
:root:not([data-theme="light"]) main#main section .mm-heading-fold .text-outline-thick {
    --outline-thickness: 1.15px;
    --mm-outline-base: rgba(204, 223, 241, 0.66);
    color: rgba(237, 245, 255, 0.34) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: var(--outline-thickness) var(--mm-outline-base) !important;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.5),
        0 8px 18px rgba(0, 0, 0, 0.42),
        0 0 9px rgba(var(--accent-header-rgb), 0.18) !important;
}

@media (max-width: 767px) {
    main#main section .mm-heading-fold .mm-heading-fold__inner {
        transform:
            perspective(900px) rotateX(58deg) translate3d(0, 0.12em, 0) scaleY(0.97);
    }
}

@media (prefers-reduced-motion: reduce) {
    main#main section .mm-heading-fold .mm-heading-fold__inner {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   Global accent behavior
   -------------------------------------------------------------------------- */
:focus-visible {
    outline-color: var(--color-signal);
    box-shadow: 0 0 0 2px var(--accent-focus-ring);
}

.mm-btn-primary,
.mm-cta-btn {
    background: var(--color-signal);
    border-color: var(--color-signal);
}

.mm-btn-primary:hover,
.mm-cta-btn:hover {
    background: var(--color-signal-dark);
    border-color: var(--color-signal-dark);
    box-shadow: 0 0 14px var(--accent-glow);
}

/* Trust cards: use large, low-noise background icons instead of top badges. */
.mm-trust-card {
    overflow: hidden;
}

.mm-trust-card__bg-icon {
    position: absolute;
    right: 1.2rem;
    bottom: 0.95rem;
    font-size: clamp(3.8rem, 6vw, 5.6rem);
    line-height: 1;
    color: rgba(var(--accent-main-rgb), 0.26);
    opacity: 0.22;
    pointer-events: none;
    z-index: 1;
    transform: translate3d(0, 0, 0);
    transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.mm-trust-card:hover .mm-trust-card__bg-icon {
    color: rgba(var(--accent-main-rgb), 0.36);
    opacity: 0.32;
    transform: translate3d(0, -2px, 0) scale(1.03);
}

/* --------------------------------------------------------------------------
   Light mode harmonization
   Keeps dark mode untouched while fixing readability and surface quality.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
    --mm-light-surface: linear-gradient(165deg,
            rgba(255, 251, 244, 0.95) 0%,
            rgba(246, 238, 227, 0.96) 100%);
    --mm-light-surface-soft: linear-gradient(165deg,
            rgba(255, 251, 243, 0.92) 0%,
            rgba(242, 233, 219, 0.94) 100%);
    --mm-light-border: rgba(41, 34, 27, 0.16);
    --mm-light-border-soft: rgba(41, 34, 27, 0.1);
    --mm-light-shadow: 0 16px 36px rgba(30, 25, 20, 0.12);
    --mm-light-shadow-soft: 0 8px 22px rgba(30, 25, 20, 0.08);
}

/* Raise medium text utility contrast in light mode while respecting local --color-text contexts. */
:root[data-theme="light"] .text-text\/50 {
    color: color-mix(in srgb, var(--color-text) 64%, transparent) !important;
}

:root[data-theme="light"] .text-text\/55 {
    color: color-mix(in srgb, var(--color-text) 68%, transparent) !important;
}

:root[data-theme="light"] .text-text\/60 {
    color: color-mix(in srgb, var(--color-text) 72%, transparent) !important;
}

/* Dark media cards keep light text in light mode. */
:root[data-theme="light"] .mm-about-portrait-card,
:root[data-theme="light"] .mm-project-card-shell,
:root[data-theme="light"] .mm-benefit-card-surface {
    --color-text: #eef6ff;
    --color-text-dim: rgba(224, 237, 255, 0.78);
    --color-text-meta: rgba(192, 213, 238, 0.58);
}

:root[data-theme="light"] .mm-benefit-card-surface {
    background: linear-gradient(168deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(12, 20, 33, 0.74) 70%,
            rgba(8, 12, 20, 0.88) 100%) !important;
    border-color: rgba(184, 206, 234, 0.26) !important;
    box-shadow: 0 18px 44px rgba(9, 20, 35, 0.2) !important;
}

:root[data-theme="light"] .mm-benefit-media-overlay {
    opacity: 0.36 !important;
}

:root[data-theme="light"] .mm-about-portrait-card {
    border-color: rgba(184, 206, 234, 0.28) !important;
    box-shadow: 0 20px 46px rgba(9, 20, 36, 0.22) !important;
}

:root[data-theme="light"] .mm-project-card-shell {
    border-color: rgba(184, 206, 234, 0.34) !important;
    box-shadow: 0 22px 52px rgba(9, 20, 34, 0.24) !important;
}

/* Light surfaces for text-heavy feature cards/panels. */
:root[data-theme="light"] .mm-service-card>div,
:root[data-theme="light"] .mm-usp-panel-card,
:root[data-theme="light"] .mm-about-story-card,
:root[data-theme="light"] .mm-about-stats-card,
:root[data-theme="light"] .mm-faq-shell,
:root[data-theme="light"] .mm-package-card-surface,
:root[data-theme="light"] .mm-package-fallback-card,
:root[data-theme="light"] .mm-trust-card {
    background: var(--mm-light-surface) !important;
    border-color: var(--mm-light-border) !important;
    box-shadow: var(--mm-light-shadow-soft);
    --color-text: #0f2239;
    --color-text-dim: rgba(15, 34, 57, 0.76);
    --color-text-meta: rgba(15, 34, 57, 0.62);
}

:root[data-theme="light"] .mm-service-card>div:hover,
:root[data-theme="light"] .mm-usp-panel-card:hover,
:root[data-theme="light"] .mm-about-story-card:hover,
:root[data-theme="light"] .mm-about-stats-card:hover,
:root[data-theme="light"] .mm-package-card-surface:hover,
:root[data-theme="light"] .mm-trust-card:hover {
    border-color: rgba(var(--accent-main-rgb), 0.3) !important;
    box-shadow: var(--mm-light-shadow);
}

:root[data-theme="light"] .mm-btn-primary,
:root[data-theme="light"] .mm-cta-btn {
    color: #f8f2e6 !important;
}

:root[data-theme="light"] .mm-about-story-card .mm-about-story-text,
:root[data-theme="light"] .mm-about-stats-card .text-text\/50,
:root[data-theme="light"] .mm-about-stats-card .text-text\/60,
:root[data-theme="light"] .mm-about-stats-card .text-text\/40 {
    color: var(--color-text-dim) !important;
}

:root[data-theme="light"] .mm-package-details-surface {
    background: var(--mm-light-surface-soft) !important;
    border-color: var(--mm-light-border-soft) !important;
}

:root[data-theme="light"] .mm-package-card-surface button[data-package],
:root[data-theme="light"] #pakete .mm-packages-fallback a[href="#kontakt"] {
    background: var(--color-signal) !important;
    color: #f8f2e6 !important;
}

:root[data-theme="light"] .mm-package-card-surface .mm-pkg-toggle {
    color: rgba(15, 34, 57, 0.64) !important;
}

:root[data-theme="light"] .mm-package-card-surface .mm-pkg-toggle:hover {
    color: #0f2239 !important;
}

:root[data-theme="light"] .mm-faq-item-surface {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(15, 34, 57, 0.1) !important;
}

:root[data-theme="light"] .mm-faq-item-surface:hover {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(var(--accent-main-rgb), 0.24) !important;
}

:root[data-theme="light"] .mm-faq-section .mm-accordion-panel>div {
    border-left-color: rgba(15, 34, 57, 0.1) !important;
}

:root[data-theme="light"] .mm-faq-section .mm-faq-tab-btn,
:root[data-theme="light"] .mm-faq-section .mm-faq-tab-count {
    border-color: rgba(15, 34, 57, 0.12) !important;
    background: rgba(255, 255, 255, 0.64) !important;
}

:root[data-theme="light"] .mm-faq-section .mm-faq-tab-btn {
    color: rgba(15, 34, 57, 0.74) !important;
}

:root[data-theme="light"] .mm-faq-section .mm-faq-tab-btn .mm-faq-tab-count {
    color: rgba(15, 34, 57, 0.78) !important;
}

:root[data-theme="light"] .mm-faq-section .mm-faq-tab-btn:hover {
    color: #0f2239 !important;
    border-color: rgba(15, 34, 57, 0.2) !important;
}

:root[data-theme="light"] .mm-faq-section .mm-faq-tab-btn:hover .mm-faq-tab-count {
    color: #0f2239 !important;
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: rgba(15, 34, 57, 0.22) !important;
}

:root[data-theme="light"] .mm-faq-section .mm-faq-tab-btn.active {
    border-color: rgba(var(--accent-main-rgb), 0.3) !important;
    background: rgba(var(--accent-main-rgb), 0.12) !important;
    color: #0f2239 !important;
}

:root[data-theme="light"] .mm-faq-section .mm-faq-tab-btn.active .mm-faq-tab-count {
    color: #0f2239 !important;
    background: rgba(var(--accent-main-rgb), 0.3) !important;
    border-color: rgba(var(--accent-main-rgb), 0.44) !important;
}

:root[data-theme="light"] .mm-licensing-section [role="tab"] {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(15, 34, 57, 0.14) !important;
    color: rgba(15, 34, 57, 0.74) !important;
}

:root[data-theme="light"] .mm-licensing-section [role="tab"][aria-selected="true"] {
    background: rgba(var(--accent-header-rgb), 0.16) !important;
    border-color: rgba(var(--accent-header-rgb), 0.42) !important;
    color: #0f2239 !important;
}

:root[data-theme="light"] .mm-trust-card__bg-icon {
    color: rgba(var(--accent-main-rgb), 0.32);
    opacity: 0.3;
}

:root[data-theme="light"] .mm-trust-card:hover .mm-trust-card__bg-icon {
    color: rgba(var(--accent-main-rgb), 0.44);
    opacity: 0.4;
}

:root[data-theme="light"] .mm-testimonial-mobile-dot {
    border-color: rgba(15, 34, 57, 0.2);
    background: rgba(15, 34, 57, 0.12);
}

/* Portfolio ticker: dedicated light-mode readability + visual cleanup */
:root[data-theme="light"] #portfolio .mm-testimonial-ticker {
    color: #10263f;
}

:root[data-theme="light"] #portfolio .mm-testimonial-ticker>.absolute .bg-bg-alt {
    background: linear-gradient(170deg,
            rgba(248, 242, 233, 0.98) 0%,
            rgba(244, 236, 225, 0.96) 52%,
            rgba(237, 228, 214, 0.98) 100%) !important;
}

:root[data-theme="light"] #portfolio .mm-testimonial-ticker .mix-blend-overlay {
    opacity: 0.06 !important;
    mix-blend-mode: normal !important;
}

:root[data-theme="light"] #portfolio .mm-testimonial-ticker [style*="grid.svg"] {
    opacity: 0.03 !important;
}

:root[data-theme="light"] #portfolio .mm-testimonial-ticker>.absolute .h-px {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(var(--accent-main-rgb), 0.34) 50%,
            transparent 100%) !important;
}

:root[data-theme="light"] #portfolio .mm-testimonial-ticker>.absolute [class*="h-1/2"] {
    opacity: 0.38 !important;
}

:root[data-theme="light"] #portfolio .mm-ticker-wave-glow {
    opacity: 0.12 !important;
    filter: blur(96px) !important;
}

:root[data-theme="light"] #portfolio .mm-ticker-wave-secondary {
    opacity: 0.08 !important;
    filter: blur(88px) !important;
}

:root[data-theme="light"] #portfolio .mm-testimonial-ticker>.absolute.inset-y-0.left-0 {
    width: clamp(2rem, 4vw, 4.5rem);
    background: linear-gradient(to right,
            rgba(247, 242, 234, 0.98) 0%,
            rgba(247, 242, 234, 0.64) 58%,
            rgba(247, 242, 234, 0) 100%) !important;
}

:root[data-theme="light"] #portfolio .mm-testimonial-ticker>.absolute.inset-y-0.right-0 {
    width: clamp(2rem, 4vw, 4.5rem);
    background: linear-gradient(to left,
            rgba(247, 242, 234, 0.98) 0%,
            rgba(247, 242, 234, 0.64) 58%,
            rgba(247, 242, 234, 0) 100%) !important;
}

:root[data-theme="light"] #portfolio .mm-testimonial-card {
    background: linear-gradient(165deg,
            rgba(255, 252, 247, 0.96) 0%,
            rgba(246, 238, 226, 0.92) 100%) !important;
    border-color: rgba(20, 32, 51, 0.17) !important;
    box-shadow:
        0 14px 30px rgba(20, 32, 51, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.74) inset !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

:root[data-theme="light"] #portfolio .mm-testimonial-card:hover {
    border-color: rgba(var(--accent-main-rgb), 0.42) !important;
    background: linear-gradient(165deg,
            rgba(255, 253, 250, 0.98) 0%,
            rgba(248, 240, 229, 0.94) 100%) !important;
    box-shadow:
        0 18px 34px rgba(20, 32, 51, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.82) inset !important;
}

:root[data-theme="light"] #portfolio .mm-testimonial-card>.absolute.font-serif {
    color: rgba(20, 32, 51, 0.08) !important;
    top: 0.4rem !important;
    right: 0.85rem !important;
    line-height: 0.78 !important;
    font-size: clamp(4.6rem, 8.2vw, 7.4rem) !important;
}

:root[data-theme="light"] #portfolio .mm-testimonial-card .w-12.h-12,
:root[data-theme="light"] #portfolio .mm-testimonial-card .w-14.h-14 {
    background: linear-gradient(150deg,
            rgba(255, 255, 255, 0.86) 0%,
            rgba(246, 239, 228, 0.88) 100%) !important;
    border-color: rgba(20, 32, 51, 0.16) !important;
    color: color-mix(in srgb, var(--accent-main) 72%, #6d4a1f) !important;
    box-shadow:
        0 8px 18px rgba(20, 32, 51, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.76) inset !important;
}

:root[data-theme="light"] #portfolio .mm-testimonial-card .font-black.text-text {
    color: #10263f !important;
    letter-spacing: -0.01em;
}

:root[data-theme="light"] #portfolio .mm-testimonial-card span[class*="text-text/5"] {
    color: rgba(16, 38, 63, 0.68) !important;
}

:root[data-theme="light"] #portfolio .mm-testimonial-card p {
    color: rgba(20, 39, 60, 0.9) !important;
    font-style: normal !important;
    font-weight: 520;
    line-height: 1.72;
    text-wrap: pretty;
    max-width: 46ch;
}

:root[data-theme="light"] #portfolio .mm-testimonial-mobile-dot {
    border-color: rgba(20, 32, 51, 0.28);
    background: rgba(20, 32, 51, 0.14);
}

:root[data-theme="light"] #portfolio .mm-testimonial-mobile-dot.is-active,
:root[data-theme="light"] #portfolio .mm-testimonial-mobile-dot[aria-selected="true"] {
    background: rgba(var(--accent-main-rgb), 0.86);
    border-color: rgba(var(--accent-main-rgb), 0.92);
    box-shadow:
        0 0 0 1px rgba(var(--accent-main-rgb), 0.2),
        0 0 12px rgba(var(--accent-main-rgb), 0.26);
}

:root[data-theme="light"] #portfolio .mm-testimonial-mobile-nav {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(20, 32, 51, 0.2);
    color: rgba(20, 32, 51, 0.82);
    box-shadow:
        0 8px 18px rgba(20, 32, 51, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.62) inset;
}

:root[data-theme="light"] #portfolio .mm-testimonial-mobile-nav:hover,
:root[data-theme="light"] #portfolio .mm-testimonial-mobile-nav:focus-visible {
    background: rgba(var(--accent-main-rgb), 0.2);
    border-color: rgba(var(--accent-main-rgb), 0.46);
    color: rgba(16, 30, 47, 0.96);
}

:root[data-theme="light"] #portfolio .mm-testimonial-mobile-count {
    color: rgba(16, 38, 63, 0.66);
}

@media (min-width: 768px) {
    :root[data-theme="light"] #portfolio .mm-testimonial-marquee .mm-testimonial-card {
        width: clamp(320px, 34vw, 470px) !important;
    }
}

/* Keep header center nav visually clean: underline only, no capsule state. */
@media (min-width: 1024px) {

    :root[data-theme="light"] .mm-os-center-nav .mm-menubar__nav-item,
    :root[data-theme="dark"] .mm-os-center-nav .mm-menubar__nav-item {
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Light mode nav hover/active - use accent-header for underline */
    :root[data-theme="light"] .mm-os-center-nav .mm-menubar__nav-item {
        color: rgba(20, 32, 51, 0.72) !important;
        background: transparent !important;
    }

    :root[data-theme="light"] .mm-os-center-nav .mm-menubar__nav-item::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 7px;
        height: 1px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent 0%, var(--accent-header) 50%, transparent 100%);
        transform: scaleX(0);
        transform-origin: center;
        opacity: 0;
        transition: transform 0.22s ease, opacity 0.22s ease;
    }

    :root[data-theme="light"] .mm-os-center-nav .mm-menubar__nav-item:hover,
    :root[data-theme="light"] .mm-os-center-nav .mm-menubar__nav-item.active,
    :root[data-theme="light"] .mm-os-center-nav .mm-menubar__nav-item[aria-current="page"] {
        color: var(--accent-header) !important;
        background: transparent !important;
    }

    :root[data-theme="light"] .mm-os-center-nav .mm-menubar__nav-item:hover::after,
    :root[data-theme="light"] .mm-os-center-nav .mm-menubar__nav-item.active::after,
    :root[data-theme="light"] .mm-os-center-nav .mm-menubar__nav-item[aria-current="page"]::after {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   Final light-mode polish
   -------------------------------------------------------------------------- */
:root[data-theme="light"] body.mm-wave-bg::before {
    content: '' !important;
    display: block !important;
    opacity: calc(0.44 * var(--wave-intensity, 1)) !important;
    filter: saturate(0.92) brightness(1.01) !important;
    animation-duration: 55s !important;
}

:root[data-theme="light"] body.mm-wave-bg::after {
    content: '' !important;
    display: block !important;
    opacity: calc(0.18 * var(--wave-intensity, 1)) !important;
    mix-blend-mode: normal !important;
}

/* Wallpaper modes (Control Center + Settings panel) */
:root[data-theme="light"] body.mm-wave-bg:not([data-wallpaper])::after,
:root[data-theme="light"] body.mm-wave-bg[data-wallpaper="grid"]::after {
    background:
        linear-gradient(to bottom,
            rgba(var(--accent-header-rgb), 0.08) 1px,
            transparent 1px),
        linear-gradient(to right,
            rgba(var(--accent-header-rgb), 0.045) 1px,
            transparent 1px),
        radial-gradient(circle 280px at 18% 22%,
            rgba(var(--color-signal-rgb), 0.048) 0%,
            transparent 70%),
        radial-gradient(circle 340px at 78% 70%,
            rgba(var(--wave-cyan), 0.038) 0%,
            transparent 72%),
        radial-gradient(circle 240px at 52% 16%,
            rgba(var(--wave-indigo), 0.03) 0%,
            transparent 72%) !important;
    background-size: 100% 10px, 40px 40px, auto, auto, auto !important;
    opacity: calc(0.2 * var(--wave-intensity, 1)) !important;
}

:root[data-theme="light"] body.mm-wave-bg[data-wallpaper="aurora"]::before {
    opacity: calc(0.62 * var(--wave-intensity, 1)) !important;
    filter: saturate(1.08) brightness(1.02) !important;
}

:root[data-theme="light"] body.mm-wave-bg[data-wallpaper="aurora"]::after {
    background:
        radial-gradient(circle 360px at 14% 24%,
            rgba(var(--color-signal-rgb), 0.08) 0%,
            transparent 72%),
        radial-gradient(circle 420px at 82% 78%,
            rgba(var(--wave-cyan), 0.07) 0%,
            transparent 74%),
        radial-gradient(circle 320px at 52% 14%,
            rgba(var(--wave-indigo), 0.055) 0%,
            transparent 74%),
        radial-gradient(circle 360px at 45% 92%,
            rgba(var(--wave-purple), 0.045) 0%,
            transparent 76%) !important;
    opacity: calc(0.3 * var(--wave-intensity, 1)) !important;
}

:root[data-theme="light"] body.mm-wave-bg[data-wallpaper="none"]::before,
:root[data-theme="light"] body.mm-wave-bg[data-wallpaper="none"]::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
    filter: none !important;
    animation: none !important;
}

/* Ambient glow controls (subtle / aurora / vivid) */
:root[data-theme="light"] body.mm-wave-bg[data-ambient-glow="subtle"]:not([data-wallpaper="none"])::before {
    opacity: calc(0.52 * var(--wave-intensity, 1)) !important;
}

:root[data-theme="light"] body.mm-wave-bg[data-ambient-glow="subtle"]:not([data-wallpaper="none"])::after {
    opacity: calc(0.22 * var(--wave-intensity, 1)) !important;
}

:root[data-theme="light"] body.mm-wave-bg[data-ambient-glow="aurora"]:not([data-wallpaper="none"])::before {
    opacity: calc(0.68 * var(--wave-intensity, 1)) !important;
    filter: saturate(1.12) brightness(1.03) !important;
}

:root[data-theme="light"] body.mm-wave-bg[data-ambient-glow="aurora"]:not([data-wallpaper="none"])::after {
    opacity: calc(0.32 * var(--wave-intensity, 1)) !important;
}

:root[data-theme="light"] body.mm-wave-bg[data-ambient-glow="vivid"]:not([data-wallpaper="none"])::before {
    opacity: calc(0.82 * var(--wave-intensity, 1)) !important;
    filter: saturate(1.17) brightness(1.04) !important;
}

:root[data-theme="light"] body.mm-wave-bg[data-ambient-glow="vivid"]:not([data-wallpaper="none"])::after {
    opacity: calc(0.38 * var(--wave-intensity, 1)) !important;
}

.mm-global-bg-accent {
    opacity: 0.22;
}

:root[data-theme="light"] .mm-global-bg-accent {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
}

:root[data-theme="light"] .mm-os-bar {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.light .mm-os-bar {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Keep the header area fully transparent in Light Mode (same behavior as Dark). */
:root[data-theme="light"] .mm-os-bar,
html.light .mm-os-bar {
    box-shadow: none !important;
}

/* Keep logo shadow language aligned with OS chrome in both themes. */
:root {
    --mm-os-logo-filter-desktop:
        drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.12));
    --mm-os-logo-filter-mobile:
        drop-shadow(0 12px 28px rgba(0, 0, 0, 0.42))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.1));
}

:root[data-theme="light"] {
    --mm-os-logo-filter-desktop:
        drop-shadow(0 10px 22px rgba(20, 27, 38, 0.12))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.68));
    --mm-os-logo-filter-mobile:
        drop-shadow(0 8px 16px rgba(20, 27, 38, 0.16))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.54));
}

@media (min-width: 768px) {
    .mm-os-bar #mm-os-logo {
        transform-origin: left center;
        filter: var(--mm-os-logo-filter-desktop);
    }
}

@media (max-width: 767px) {
    .mm-os-bar #mm-os-logo {
        filter: var(--mm-os-logo-filter-mobile);
    }
}

@media (min-width: 1280px) {
    :root[data-theme="light"] #mm-os-logo {
        transform: scale(1.08);
    }
}

@media (min-width: 768px) {
    :root[data-theme="light"] .mm-os-bar .mm-os-right-pill {
        background: linear-gradient(145deg,
                rgba(255, 252, 247, 0.9) 0%,
                rgba(246, 239, 228, 0.92) 100%) !important;
        border-color: rgba(35, 43, 57, 0.18) !important;
        box-shadow:
            0 10px 22px rgba(20, 27, 38, 0.12),
            0 1px 0 rgba(255, 255, 255, 0.68) inset !important;
    }
}

@media (min-width: 1024px) {
    :root[data-theme="light"] .mm-os-bar .mm-os-center-nav {
        background: linear-gradient(145deg,
                rgba(255, 252, 247, 0.92) 0%,
                rgba(246, 239, 228, 0.92) 100%) !important;
        border-color: rgba(35, 43, 57, 0.18) !important;
        box-shadow:
            0 10px 22px rgba(20, 27, 38, 0.12),
            0 1px 0 rgba(255, 255, 255, 0.68) inset !important;
    }
}

@media (min-width: 768px) {
    :root[data-theme="light"] .mm-os-bar .mm-os-actions>[data-auth-modal="login"] {
        background: linear-gradient(135deg,
                rgba(var(--accent-header-rgb), 0.14) 0%,
                rgba(var(--accent-header-rgb), 0.08) 100%) !important;
        border-color: rgba(var(--accent-header-rgb), 0.46) !important;
        color: color-mix(in srgb, var(--accent-header) 70%, #16324a) !important;
        box-shadow:
            0 10px 20px rgba(20, 32, 51, 0.12),
            0 1px 0 rgba(255, 255, 255, 0.62) inset !important;
    }

    :root[data-theme="light"] .mm-os-bar .mm-os-actions>[data-auth-modal="login"]:hover {
        background: linear-gradient(135deg,
                rgba(var(--accent-header-rgb), 0.22) 0%,
                rgba(var(--accent-header-rgb), 0.14) 100%) !important;
        border-color: rgba(var(--accent-header-rgb), 0.58) !important;
        color: color-mix(in srgb, var(--accent-header) 74%, #0f2a43) !important;
    }

    :root[data-theme="light"] .mm-os-actions .mm-os-dropdown-trigger[data-target="os-devblog-dropdown"],
    :root[data-theme="light"] .mm-os-actions .mm-os-dropdown-trigger[data-target="os-shop-dropdown"] {
        background: rgba(20, 32, 51, 0.05) !important;
        border-color: rgba(20, 32, 51, 0.16) !important;
        color: rgba(20, 32, 51, 0.74) !important;
    }

    :root[data-theme="light"] .mm-os-actions .mm-os-dropdown-trigger[data-target="os-devblog-dropdown"]:hover,
    :root[data-theme="light"] .mm-os-actions .mm-os-dropdown-trigger[data-target="os-shop-dropdown"]:hover {
        background: rgba(20, 32, 51, 0.09) !important;
        border-color: rgba(20, 32, 51, 0.22) !important;
        color: rgba(20, 32, 51, 0.92) !important;
    }
}

/* ===== OS Dropdowns Light Mode - Premium Glassmorphism ===== */
:root[data-theme="light"] .mm-os-dropdown,
html.light .mm-os-dropdown {
    background: linear-gradient(155deg,
            rgba(255, 253, 250, 0.72) 0%,
            rgba(250, 244, 234, 0.76) 100%) !important;
    border-color: rgba(35, 43, 57, 0.14) !important;
    box-shadow:
        0 24px 56px rgba(14, 21, 35, 0.18),
        0 8px 24px rgba(14, 21, 35, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 1px rgba(var(--accent-main-rgb), 0.1) inset !important;
    backdrop-filter: blur(28px) saturate(1.8) brightness(1.06) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.8) brightness(1.06) !important;
    position: relative;
}

/* Warm amber bottom accent line on light dropdowns (mirrors dark glow) */
:root[data-theme="light"] .mm-os-dropdown::after,
html.light .mm-os-dropdown::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(var(--accent-main-rgb), 0.25) 25%,
            rgba(var(--accent-main-rgb), 0.55) 50%,
            rgba(var(--accent-main-rgb), 0.25) 75%,
            transparent 100%);
    pointer-events: none;
}

@media (max-width: 767px) {
    :root[data-theme="light"] .mm-mobile-burger-btn,
    :root[data-theme="light"] .mm-mobile-info-btn {
        background: linear-gradient(160deg,
                rgba(255, 252, 246, 0.96) 0%,
                rgba(244, 236, 225, 0.94) 100%) !important;
        border-color: rgba(23, 35, 50, 0.26) !important;
        color: #1a304a !important;
        box-shadow:
            0 10px 24px rgba(17, 27, 41, 0.2),
            0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
    }

    :root[data-theme="light"] .mm-mobile-burger-btn:hover,
    :root[data-theme="light"] .mm-mobile-burger-btn:focus-visible,
    :root[data-theme="light"] .mm-mobile-info-btn:hover,
    :root[data-theme="light"] .mm-mobile-info-btn:focus-visible {
        border-color: rgba(var(--accent-header-rgb), 0.5) !important;
        color: rgba(16, 29, 45, 0.96) !important;
        box-shadow:
            0 12px 26px rgba(17, 27, 41, 0.22),
            0 0 0 2px rgba(var(--accent-header-rgb), 0.2),
            0 1px 0 rgba(255, 255, 255, 0.78) inset !important;
    }

    :root[data-theme="light"] .mm-mobile-burger-btn i,
    :root[data-theme="light"] .mm-mobile-info-btn i {
        color: currentColor !important;
        opacity: 0.96 !important;
    }

    :root[data-theme="light"] .mm-mobile-burger-btn .mm-burger-icon-open,
    :root[data-theme="light"] .mm-mobile-burger-btn .mm-burger-icon-close {
        color: currentColor !important;
        line-height: 1;
    }

    :root[data-theme="light"] .mm-mobile-burger-btn .mm-burger-icon-open i,
    :root[data-theme="light"] .mm-mobile-burger-btn .mm-burger-icon-close i {
        color: currentColor !important;
        opacity: 1 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
    }

    :root[data-theme="light"] .mm-mobile-info-btn__badge {
        color: rgba(250, 252, 255, 0.98) !important;
        border-color: rgba(var(--accent-main-rgb), 0.78) !important;
        background: rgba(var(--accent-main-rgb), 0.86) !important;
        box-shadow:
            0 8px 16px rgba(21, 33, 50, 0.24),
            0 1px 0 rgba(255, 255, 255, 0.24) inset !important;
    }

    /* Mobile 3D wheel menu: light-mode parity with default structure, no dark haze bands */
    :root[data-theme="light"] #mm-mobile-menu,
    html.light #mm-mobile-menu {
        background:
            radial-gradient(ellipse at top, rgba(var(--accent-main-rgb), 0.11) 0%, transparent 58%),
            linear-gradient(180deg, rgba(252, 248, 241, 0.96) 0%, rgba(247, 240, 230, 0.95) 100%) !important;
        backdrop-filter: blur(12px) saturate(1.03) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.03) !important;
    }

    :root[data-theme="light"] #mm-mobile-menu .mm-mobile-close,
    html.light #mm-mobile-menu .mm-mobile-close {
        background: rgba(255, 251, 245, 0.84) !important;
        border-color: rgba(20, 32, 51, 0.2) !important;
        color: rgba(20, 32, 51, 0.78) !important;
        box-shadow:
            0 10px 24px rgba(17, 27, 41, 0.12),
            0 1px 0 rgba(255, 255, 255, 0.72) inset !important;
    }

    :root[data-theme="light"] #mm-mobile-menu .mm-mobile-close:hover,
    :root[data-theme="light"] #mm-mobile-menu .mm-mobile-close:focus-visible,
    html.light #mm-mobile-menu .mm-mobile-close:hover,
    html.light #mm-mobile-menu .mm-mobile-close:focus-visible {
        background: rgba(var(--accent-main-rgb), 0.2) !important;
        border-color: rgba(var(--accent-main-rgb), 0.52) !important;
        color: rgba(16, 29, 45, 0.94) !important;
        box-shadow:
            0 12px 26px rgba(17, 27, 41, 0.16),
            0 0 0 2px rgba(var(--accent-main-rgb), 0.2) !important;
    }

    :root[data-theme="light"] #mm-mobile-menu .mm-3d-wheel-wrapper,
    html.light #mm-mobile-menu .mm-3d-wheel-wrapper {
        border-top-color: rgba(20, 32, 51, 0.09) !important;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
    }

    :root[data-theme="light"] #mm-mobile-menu .mm-3d-wheel-wrapper::before,
    html.light #mm-mobile-menu .mm-3d-wheel-wrapper::before {
        background:
            radial-gradient(circle at 50% 0%, rgba(var(--accent-main-rgb), 0.08), transparent 62%),
            linear-gradient(180deg,
                rgba(248, 243, 235, 0.16) 0%,
                rgba(248, 243, 235, 0.03) 42%,
                rgba(248, 243, 235, 0.16) 100%) !important;
    }

    :root[data-theme="light"] #mm-mobile-menu .mm-3d-item,
    html.light #mm-mobile-menu .mm-3d-item {
        color: rgba(21, 33, 53, 0.58) !important;
        opacity: 0.74;
    }

    :root[data-theme="light"] #mm-mobile-menu .mm-3d-item.active,
    html.light #mm-mobile-menu .mm-3d-item.active {
        color: rgba(16, 34, 58, 0.96) !important;
        text-shadow: none !important;
        filter: drop-shadow(0 8px 16px rgba(var(--accent-main-rgb), 0.18));
    }

    :root[data-theme="light"] #mm-mobile-menu .mm-3d-highlight,
    html.light #mm-mobile-menu .mm-3d-highlight {
        border-top-color: rgba(var(--accent-main-rgb), 0.38) !important;
        border-bottom-color: rgba(var(--accent-main-rgb), 0.38) !important;
        background: rgba(var(--accent-main-rgb), 0.09) !important;
        box-shadow:
            0 0 20px rgba(var(--accent-main-rgb), 0.08),
            0 1px 0 rgba(255, 255, 255, 0.45) inset !important;
    }

    :root[data-theme="light"] #mm-mobile-menu .mm-3d-preview,
    html.light #mm-mobile-menu .mm-3d-preview {
        background: rgba(20, 31, 46, 0.08) !important;
        border-color: rgba(20, 31, 46, 0.18) !important;
        color: rgba(20, 32, 51, 0.72) !important;
    }

    :root[data-theme="light"] #mm-mobile-menu .mm-3d-hint,
    html.light #mm-mobile-menu .mm-3d-hint {
        border-color: rgba(20, 32, 51, 0.2) !important;
        background: rgba(255, 255, 255, 0.58) !important;
        color: rgba(20, 32, 51, 0.62) !important;
    }

    :root[data-theme="light"] #mm-mobile-menu .mm-mobile-scroll-indicator span,
    html.light #mm-mobile-menu .mm-mobile-scroll-indicator span {
        color: color-mix(in srgb, var(--accent-main) 82%, #243145);
    }

    :root[data-theme="light"] #mm-mobile-menu .mm-scroll-indicator-wheel,
    html.light #mm-mobile-menu .mm-scroll-indicator-wheel {
        border-color: rgba(20, 32, 51, 0.24) !important;
    }
}

/* Modal close button contrast in light mode */
:root[data-theme="light"] .mm-modal-close {
    color: rgba(20, 32, 51, 0.72);
    border-color: rgba(20, 32, 51, 0.22);
    background: rgba(255, 255, 255, 0.74);
}

:root[data-theme="light"] .mm-modal-close:hover {
    background: rgba(var(--accent-main-rgb), 0.2);
    border-color: rgba(var(--accent-main-rgb), 0.5);
    color: rgba(20, 32, 51, 0.96);
    box-shadow: 0 10px 22px rgba(var(--accent-main-rgb), 0.18);
}

:root[data-theme="light"] .mm-modal-close:focus-visible {
    box-shadow:
        0 0 0 2px rgba(var(--accent-main-rgb), 0.32),
        0 10px 20px rgba(var(--accent-main-rgb), 0.12);
    background: rgba(var(--accent-main-rgb), 0.16);
    color: rgba(20, 32, 51, 0.94);
}

:root[data-theme="light"] .mm-modal-close:active {
    background: rgba(var(--accent-main-rgb), 0.2);
}

/* Modal backdrop tuning: visible page context + no blur/flicker */
.mm-os-modal .mm-os-backdrop {
    background: rgba(8, 12, 18, 0.26) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: auto !important;
}

/* OS dialogs already use .mm-os-backdrop; keep native layer transparent to avoid double-overlay flicker */
.mm-os-modal::backdrop {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: none !important;
}

/* Mobile menu scroll lock: prevent background page scroll while wheel menu is open */
html.mm-no-scroll,
body.mm-no-scroll {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none;
}

/* Fallback for any non-OS dialog */
dialog:not(.mm-os-modal)::backdrop {
    background: rgba(8, 12, 18, 0.16) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#mm-auth-modal .mm-auth-backdrop {
    background: rgba(8, 12, 18, 0.26) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

:root[data-theme="light"] .mm-os-modal .mm-os-backdrop,
.light .mm-os-modal .mm-os-backdrop {
    background: rgba(0, 0, 0, 0.55) !important;
}

:root[data-theme="light"] dialog:not(.mm-os-modal)::backdrop,
.light dialog:not(.mm-os-modal)::backdrop {
    background: rgba(18, 26, 38, 0.08) !important;
}

:root[data-theme="light"] #mm-auth-modal .mm-auth-backdrop,
.light #mm-auth-modal .mm-auth-backdrop {
    background: rgba(18, 26, 38, 0.14) !important;
}

/* Shop/cart readability in light mode (dropdown + modal) */
:root[data-theme="light"] #mm-shop-modal .mm-os-window,
:root[data-theme="light"] #os-shop-dropdown {
    background: linear-gradient(165deg,
            rgba(255, 252, 247, 0.98) 0%,
            rgba(247, 240, 231, 0.96) 100%) !important;
    border-color: rgba(35, 43, 57, 0.16) !important;
}

:root[data-theme="light"] #mm-shop-modal .text-white,
:root[data-theme="light"] #os-shop-dropdown .text-white {
    color: #132036 !important;
}

:root[data-theme="light"] #mm-shop-modal [class*="text-white"],
:root[data-theme="light"] #os-shop-dropdown [class*="text-white"] {
    color: #132036 !important;
}

:root[data-theme="light"] #mm-shop-modal [class*="text-white/"],
:root[data-theme="light"] #os-shop-dropdown [class*="text-white/"] {
    color: rgba(19, 32, 54, 0.62) !important;
}

:root[data-theme="light"] #mm-shop-modal [class*="bg-white/"],
:root[data-theme="light"] #os-shop-dropdown [class*="bg-white/"] {
    background: rgba(19, 32, 54, 0.055) !important;
}

:root[data-theme="light"] #mm-shop-modal [class*="border-white/"],
:root[data-theme="light"] #os-shop-dropdown [class*="border-white/"] {
    border-color: rgba(19, 32, 54, 0.14) !important;
}

:root[data-theme="light"] #mm-shop-modal #mm-shop-loading {
    background: rgba(255, 251, 244, 0.94) !important;
}

/* Shop Modal: Trust Badges Section - stronger contrast in light mode */
:root[data-theme="light"] #mm-shop-modal .bg-bg-hover {
    background: rgba(19, 32, 54, 0.06) !important;
}

:root[data-theme="light"] #mm-shop-modal .text-text-dim {
    color: rgba(19, 32, 54, 0.72) !important;
}

:root[data-theme="light"] #mm-shop-modal .text-text-meta {
    color: rgba(19, 32, 54, 0.58) !important;
}

:root[data-theme="light"] #mm-shop-modal .text-text {
    color: #132036 !important;
}

/* Shop Modal: Empty state icon box */
:root[data-theme="light"] #mm-shop-modal .bg-black\/30 {
    background: rgba(19, 32, 54, 0.08) !important;
}

:root[data-theme="light"] #mm-shop-modal [class*="border-white/"],
:root[data-theme="light"] #mm-shop-modal .border-glass-border {
    border-color: rgba(19, 32, 54, 0.12) !important;
}

/* Shop Modal: Trust badge icon circles */
:root[data-theme="light"] #mm-shop-modal .w-12.h-12.rounded-full.bg-bg-hover {
    background: rgba(var(--color-signal-rgb), 0.12) !important;
    border: 1px solid rgba(var(--color-signal-rgb), 0.2);
}

/* Shop Modal: Glass panels in light mode */
:root[data-theme="light"] #mm-shop-modal .bg-glass {
    background: rgba(255, 252, 247, 0.85) !important;
    border-color: rgba(19, 32, 54, 0.1) !important;
}

/* Shop Modal: "Theme Store" header - fix white gradient text */
:root[data-theme="light"] #mm-shop-modal .text-transparent.bg-clip-text[class*="from-white"] {
    background-image: linear-gradient(to right, rgba(19, 32, 54, 0.5), rgba(19, 32, 54, 0.3)) !important;
}

:root[data-theme="light"] #os-shop-dropdown .mm-os-checkout-btn {
    box-shadow: 0 10px 24px rgba(var(--accent-main-rgb), 0.24) !important;
}

:root[data-theme="light"] #os-shop-dropdown #mm-shop-trigger {
    background: rgba(19, 32, 54, 0.06) !important;
    border-color: rgba(19, 32, 54, 0.14) !important;
    color: rgba(19, 32, 54, 0.72) !important;
}

:root[data-theme="light"] #os-shop-dropdown #mm-shop-trigger:hover {
    background: rgba(19, 32, 54, 0.1) !important;
    color: #132036 !important;
}

/* Footer keeps strong contrast on the intentionally dark footer surface */
:root[data-theme="light"] #site-footer {
    --color-text: #f2e8d9;
    --color-text-dim: rgba(242, 232, 217, 0.78);
    --color-text-meta: rgba(242, 232, 217, 0.58);
    --color-glass-border: rgba(242, 232, 217, 0.16);
}

:root[data-theme="light"] #site-footer .mm-footer-step {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(242, 232, 217, 0.18) !important;
}

:root[data-theme="light"] #site-footer .text-text\/40 {
    color: rgba(242, 232, 217, 0.44) !important;
}

:root[data-theme="light"] #site-footer .text-text\/50,
:root[data-theme="light"] #site-footer .text-text\/60,
:root[data-theme="light"] #site-footer .text-text\/70 {
    color: rgba(242, 232, 217, 0.72) !important;
}

:root[data-theme="light"] #mm-settings-trigger,
:root[data-theme="light"] #mm-footer-cookie-trigger,
:root[data-theme="light"] #mm-back-to-top {
    color: rgba(242, 232, 217, 0.72) !important;
}

:root[data-theme="light"] #mm-settings-trigger:hover,
:root[data-theme="light"] #mm-footer-cookie-trigger:hover,
:root[data-theme="light"] #mm-back-to-top:hover {
    color: var(--accent-main) !important;
}

/* Light mode: signal text needs stronger contrast than signal surfaces */
:root[data-theme="light"] .text-signal {
    color: var(--color-signal-ink) !important;
}

:root[data-theme="light"] #site-footer .text-signal {
    color: var(--accent-main) !important;
}

/* --------------------------------------------------------------------------
   Footer accent integration (both themes)
   -------------------------------------------------------------------------- */
#site-footer .mm-footer-step {
    border-color: rgba(var(--accent-main-rgb), 0.18) !important;
}

#site-footer .mm-footer-step:hover {
    border-color: rgba(var(--accent-main-rgb), 0.42) !important;
    background: rgba(var(--accent-main-rgb), 0.1) !important;
}

/* Step number circles - accent border and text */
#site-footer .mm-footer-step > span:first-child {
    border-color: rgba(var(--accent-main-rgb), 0.35) !important;
    background: rgba(var(--accent-main-rgb), 0.12) !important;
    color: var(--accent-main) !important;
}

#site-footer .mm-footer-step:hover > span:first-child {
    background: var(--accent-main) !important;
    border-color: var(--accent-main) !important;
    color: #0a0908 !important;
}

/* Footer social icons hover */
#site-footer a[target="_blank"]:not(.mm-whatsapp-link):hover {
    border-color: rgba(var(--accent-main-rgb), 0.5) !important;
    background: rgba(var(--accent-main-rgb), 0.18) !important;
    color: var(--accent-main) !important;
}

/* Email link row hover */
#site-footer a[href^="mailto:"]:hover {
    color: var(--accent-main) !important;
}

#site-footer a[href^="mailto:"]:hover > div {
    background: rgba(var(--accent-main-rgb), 0.25) !important;
    border-color: rgba(var(--accent-main-rgb), 0.4) !important;
}

/* Legal nav buttons hover */
#site-footer nav button:hover {
    color: var(--accent-main) !important;
}

/* Footer top accent line */
#site-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 800px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(var(--accent-main-rgb), 0.15) 20%,
            rgba(var(--accent-main-rgb), 0.35) 50%,
            rgba(var(--accent-main-rgb), 0.15) 80%,
            transparent 100%);
    pointer-events: none;
    z-index: 30;
}

/* Clean, less playful cart badge style across desktop + mobile */
.mm-cart-count {
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.24rem;
    border-radius: 999px !important;
    font-size: 0.62rem !important;
    line-height: 1;
    letter-spacing: 0.01em;
    font-weight: 800 !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.24),
        0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
}

.mm-cart-count.mm-cart-count--sticky {
    position: absolute;
    top: 0.55rem;
    right: 0.65rem;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.35rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto !important;
    width: max-content;
    max-width: 2.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.2) !important;
    color: rgba(18, 16, 12, 0.98) !important;
}

.mm-cart-count.mm-cart-count--header {
    background: linear-gradient(160deg,
            rgba(var(--color-signal-rgb), 0.98) 0%,
            rgba(var(--color-signal-rgb), 0.84) 100%) !important;
    color: rgba(18, 16, 12, 0.95) !important;
}

.mm-cart-count.mm-cart-count--inline {
    background: rgba(var(--color-signal-rgb), 0.14) !important;
    color: var(--color-signal-ink) !important;
    border-color: rgba(var(--color-signal-rgb), 0.28) !important;
    box-shadow: none !important;
    min-width: 1.22rem;
    height: 1.22rem;
    padding: 0 0.35rem;
}

:root[data-theme="light"] .mm-cart-count {
    border-color: rgba(23, 32, 46, 0.24) !important;
    box-shadow:
        0 3px 9px rgba(26, 35, 49, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.64) inset !important;
}

:root[data-theme="light"] .mm-mobile-dock__badge.mm-cart-count {
    color: #132036 !important;
    border-color: rgba(19, 32, 54, 0.24) !important;
}

/* Settings modal: dedicated light palette with strong readability */
:root[data-theme="light"] #mm-settings-menu .mm-os-window {
    background: linear-gradient(160deg,
            rgba(252, 247, 239, 0.98) 0%,
            rgba(245, 237, 226, 0.98) 100%) !important;
    border-color: rgba(29, 38, 54, 0.16) !important;
    box-shadow:
        0 30px 70px rgba(25, 33, 47, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.72) inset !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-os-header {
    background: rgba(241, 233, 222, 0.88) !important;
    border-bottom-color: rgba(29, 38, 54, 0.14) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-os-title {
    color: rgba(22, 35, 54, 0.72) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-content {
    background: linear-gradient(180deg,
            rgba(251, 246, 238, 0.98) 0%,
            rgba(245, 237, 226, 0.98) 100%) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-note {
    background: rgba(20, 32, 51, 0.04) !important;
    border-color: rgba(20, 32, 51, 0.11) !important;
    color: rgba(20, 32, 51, 0.66) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-group {
    background: linear-gradient(170deg,
            rgba(255, 251, 243, 0.86) 0%,
            rgba(244, 235, 223, 0.9) 100%) !important;
    border-color: rgba(20, 32, 51, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-group-title {
    color: rgba(20, 32, 51, 0.62) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-group-subtitle {
    color: rgba(20, 32, 51, 0.58) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-row,
:root[data-theme="light"] #mm-settings-menu .mm-settings-chip,
:root[data-theme="light"] #mm-settings-menu .mm-settings-segment span {
    background: rgba(20, 32, 51, 0.03) !important;
    border-color: rgba(20, 32, 51, 0.14) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-row:hover,
:root[data-theme="light"] #mm-settings-menu .mm-settings-chip:hover,
:root[data-theme="light"] #mm-settings-menu .mm-settings-segment:hover span {
    background: rgba(20, 32, 51, 0.055) !important;
    border-color: rgba(20, 32, 51, 0.21) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-row-title {
    color: rgba(20, 32, 51, 0.9) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-row-desc,
:root[data-theme="light"] #mm-settings-menu .mm-settings-field-value,
:root[data-theme="light"] #mm-settings-menu .mm-settings-chip-label {
    color: rgba(20, 32, 51, 0.62) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-field-title {
    color: rgba(20, 32, 51, 0.74) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-segment span {
    color: rgba(20, 32, 51, 0.68) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-segment:has(input:checked) span,
:root[data-theme="light"] #mm-settings-menu .mm-settings-chip:has(input:checked),
:root[data-theme="light"] #mm-settings-menu .mm-settings-row:has(.mm-settings-switch-input:checked) {
    background: rgba(var(--color-signal-rgb), 0.12) !important;
    border-color: rgba(var(--color-signal-rgb), 0.38) !important;
    color: rgba(20, 32, 51, 0.94) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-switch {
    background: rgba(20, 32, 51, 0.12) !important;
    border-color: rgba(20, 32, 51, 0.16) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-switch::after {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 1px 4px rgba(20, 32, 51, 0.28) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-wave-intensity-range {
    background: rgba(20, 32, 51, 0.16) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-link {
    background: rgba(20, 32, 51, 0.035) !important;
    border-color: rgba(20, 32, 51, 0.14) !important;
    color: rgba(20, 32, 51, 0.7) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-settings-link:hover {
    background: rgba(var(--color-signal-rgb), 0.14) !important;
    border-color: rgba(var(--color-signal-rgb), 0.38) !important;
    color: rgba(20, 32, 51, 0.94) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-signal-btn {
    border-color: rgba(20, 32, 51, 0.18) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 6px 14px rgba(20, 32, 51, 0.08);
}

:root[data-theme="light"] #mm-settings-menu .mm-signal-btn.active {
    border-color: rgba(var(--color-signal-rgb), 0.54) !important;
    box-shadow:
        0 0 0 1px rgba(var(--color-signal-rgb), 0.28),
        0 8px 18px rgba(var(--color-signal-rgb), 0.24);
}

:root[data-theme="light"] #mm-settings-menu .mm-signal-btn--default {
    background: linear-gradient(135deg, rgba(47, 102, 119, 0.92) 0%, rgba(142, 98, 48, 0.92) 100%) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-signal-btn--gold {
    background: linear-gradient(135deg, rgba(192, 149, 94, 0.95) 0%, rgba(105, 69, 25, 0.9) 100%) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-signal-btn--coral {
    background: linear-gradient(135deg, rgba(180, 121, 113, 0.92) 0%, rgba(95, 48, 42, 0.9) 100%) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-signal-btn--teal {
    background: linear-gradient(135deg, rgba(77, 144, 147, 0.92) 0%, rgba(30, 79, 83, 0.9) 100%) !important;
}

:root[data-theme="light"] #mm-settings-menu .mm-signal-btn--terracotta {
    background: linear-gradient(135deg, rgba(182, 122, 85, 0.94) 0%, rgba(93, 50, 28, 0.9) 100%) !important;
}

/* Blog modal light contrast */
:root[data-theme="light"] #mm-blog-modal .mm-os-window {
    background: linear-gradient(165deg,
            rgba(252, 247, 239, 0.98) 0%,
            rgba(244, 235, 223, 0.98) 100%) !important;
    border-color: rgba(20, 32, 51, 0.16) !important;
}

:root[data-theme="light"] #mm-blog-modal .mm-os-header {
    background: rgba(244, 236, 224, 0.84) !important;
    border-bottom-color: rgba(20, 32, 51, 0.14) !important;
}

:root[data-theme="light"] #mm-blog-modal .mm-os-title {
    color: rgba(20, 32, 51, 0.68) !important;
}

:root[data-theme="light"] #mm-blog-modal #mm-blog-filter-bar,
:root[data-theme="light"] #mm-blog-modal #mm-blog-share-bar {
    background: rgba(234, 228, 219, 0.72) !important;
    border-color: rgba(20, 32, 51, 0.12) !important;
}

:root[data-theme="light"] #mm-blog-modal .mm-cat-pill {
    border-color: rgba(20, 32, 51, 0.18) !important;
    color: rgba(20, 32, 51, 0.78) !important;
    background: rgba(20, 32, 51, 0.06) !important;
}

:root[data-theme="light"] #mm-blog-modal .mm-cat-pill.active {
    background: rgba(var(--color-signal-rgb), 0.82) !important;
    border-color: rgba(var(--color-signal-rgb), 0.84) !important;
    color: #17120b !important;
}

:root[data-theme="light"] #mm-blog-modal .mm-blog-card {
    background: rgba(255, 252, 247, 0.78) !important;
    border-color: rgba(20, 32, 51, 0.14) !important;
    box-shadow: 0 10px 28px rgba(20, 32, 51, 0.07);
}

:root[data-theme="light"] #mm-blog-modal .mm-blog-card:hover {
    border-color: rgba(var(--color-signal-rgb), 0.44) !important;
    box-shadow: 0 16px 34px rgba(20, 32, 51, 0.12);
}

:root[data-theme="light"] #mm-blog-modal .text-text-meta {
    color: rgba(20, 32, 51, 0.62) !important;
}

/* Legal modals: readable headings/meta on light surfaces */
:root[data-theme="light"] .mm-legal-modal .mm-os-window {
    background: linear-gradient(165deg,
            rgba(252, 247, 239, 0.98) 0%,
            rgba(244, 236, 225, 0.98) 100%) !important;
    border-color: rgba(20, 32, 51, 0.16) !important;
}

:root[data-theme="light"] .mm-legal-modal .mm-os-header {
    background: rgba(244, 236, 224, 0.84) !important;
    border-bottom-color: rgba(20, 32, 51, 0.14) !important;
}

:root[data-theme="light"] .mm-legal-modal .mm-os-content {
    background: rgba(252, 248, 240, 0.84) !important;
}

:root[data-theme="light"] .mm-legal-modal [class*="text-text/40"] {
    color: rgba(20, 32, 51, 0.68) !important;
}

:root[data-theme="light"] .mm-legal-modal [class*="text-text/50"] {
    color: rgba(20, 32, 51, 0.72) !important;
}

:root[data-theme="light"] .mm-legal-modal [class*="text-text/60"],
:root[data-theme="light"] .mm-legal-modal .text-text-dim {
    color: rgba(20, 32, 51, 0.8) !important;
}

:root[data-theme="light"] .mm-legal-modal .bg-bg-hover {
    background: rgba(20, 32, 51, 0.045) !important;
    border-color: rgba(20, 32, 51, 0.14) !important;
}

:root[data-theme="light"] .mm-legal-modal .prose,
:root[data-theme="light"] .mm-legal-modal .prose-invert {
    color: rgba(20, 32, 51, 0.86) !important;
}

:root[data-theme="light"] .mm-legal-modal .prose :is(h1, h2, h3, h4, strong),
:root[data-theme="light"] .mm-legal-modal .prose-invert :is(h1, h2, h3, h4, strong) {
    color: #132036 !important;
}

:root[data-theme="light"] .mm-legal-modal .prose :is(p, li, ul, ol, blockquote),
:root[data-theme="light"] .mm-legal-modal .prose-invert :is(p, li, ul, ol, blockquote) {
    color: rgba(20, 32, 51, 0.82) !important;
}

/* Licensing section SVG/details contrast in light mode */
:root[data-theme="light"] .mm-licensing-section .mm-licensing-lead {
    color: rgba(20, 32, 51, 0.84) !important;
    text-wrap: balance;
}

:root[data-theme="light"] .mm-licensing-section .mm-licensing-tag {
    border-color: rgba(20, 32, 51, 0.15) !important;
    background: rgba(255, 255, 255, 0.46) !important;
    color: rgba(20, 32, 51, 0.82) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

:root[data-theme="light"] .mm-licensing-section .mm-usp-symbol {
    opacity: 0.98;
}

:root[data-theme="light"] .mm-licensing-section [data-usp-symbol] [data-usp-cluster] {
    stroke: rgba(20, 32, 51, 0.28) !important;
    fill: rgba(20, 32, 51, 0.1) !important;
}

:root[data-theme="light"] .mm-licensing-section [data-usp-symbol] [data-usp-detail] {
    stroke: rgba(20, 32, 51, 0.24) !important;
    fill: rgba(20, 32, 51, 0.18) !important;
}

:root[data-theme="light"] .mm-licensing-section [data-usp-symbol] [data-usp-accent],
:root[data-theme="light"] .mm-licensing-section [data-usp-symbol] [data-usp-node] {
    stroke: rgba(var(--color-signal-rgb), 0.56) !important;
    fill: rgba(var(--color-signal-rgb), 0.34) !important;
}

:root[data-theme="light"] .mm-licensing-section [data-usp-symbol] rect[data-usp-core] {
    stroke: rgba(20, 32, 51, 0.3) !important;
    fill: color-mix(in srgb, rgba(var(--color-signal-rgb), 0.3) 68%, rgba(255, 255, 255, 0.44)) !important;
}

:root[data-theme="light"] .mm-licensing-section [data-usp-symbol] path[data-usp-line] {
    stroke: rgba(var(--color-signal-rgb), 0.62) !important;
    stroke-width: 1.7 !important;
}

:root[data-theme="light"] .mm-licensing-section .text-text\/70,
:root[data-theme="light"] .mm-licensing-section .text-text\/60 {
    color: rgba(20, 32, 51, 0.82) !important;
}

:root[data-theme="light"] .mm-licensing-section .text-outline-glow-subtle {
    --mm-outline-base: rgba(22, 39, 60, 0.34);
    --outline-thickness: 1px;
    color: rgba(20, 32, 51, 0.5) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: var(--outline-thickness) var(--mm-outline-base) !important;
    text-shadow: 0 0 0 transparent !important;
}

/* Section outline headlines: keep stroke character, add fill for legibility on light surfaces. */
:root[data-theme="light"] main#main .text-outline-glow-subtle:not(.mm-hero-v2__outline-word) {
    --mm-outline-base: rgba(22, 39, 60, 0.36);
    --outline-thickness: 1px;
    color: rgba(20, 32, 51, 0.7) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: var(--outline-thickness) var(--mm-outline-base) !important;
    text-shadow: 0 0 0 transparent !important;
}

/* Preserve signal emphasis readability (e.g. AGENTUR / IHNEN / DIREKT BETREUT) in light mode. */
:root[data-theme="light"] main#main .text-signal.italic.font-accent.font-light {
    color: var(--color-signal-ink) !important;
    opacity: 0.98 !important;
}

/* Keep licensing headline tuning stronger than generic light outline defaults. */
:root[data-theme="light"] main#main .mm-licensing-section .text-outline-glow-subtle {
    --mm-outline-base: rgba(22, 39, 60, 0.34);
    --outline-thickness: 1px;
    color: rgba(20, 32, 51, 0.5) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: var(--outline-thickness) var(--mm-outline-base) !important;
    text-shadow: 0 0 0 transparent !important;
}

/* --------------------------------------------------------------------------
   Hero V2 Rebuild
   Clean structure, no legacy overlays, GPU-friendly motion variables.
   -------------------------------------------------------------------------- */
.mm-hero-section.mm-hero-v2 {
    --mm-hero-bg-shift: 0px;
    --mm-hero-content-tilt: 0deg;
    --mm-hero-overlay-alpha: 1;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 100svh;
    overflow: hidden;
    padding: clamp(6rem, 11vh, 8.25rem) 0 calc(7.25rem + env(safe-area-inset-bottom));
    color: #f2f7ff;
    background: #070c12;
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    transform: translate3d(0, var(--mm-hero-bg-shift), 0) scale(1.02);
    transform-origin: 50% 45%;
    will-change: transform;
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 66% 44%;
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: var(--mm-hero-overlay-alpha);
    background:
        radial-gradient(125% 115% at 14% 46%,
            rgba(3, 8, 15, 0.78) 0%,
            rgba(3, 8, 15, 0.52) 36%,
            rgba(3, 8, 15, 0.08) 68%,
            rgba(3, 8, 15, 0) 100%),
        linear-gradient(109deg,
            rgba(4, 10, 18, 0.92) 0%,
            rgba(5, 12, 22, 0.78) 40%,
            rgba(6, 14, 26, 0.42) 68%,
            rgba(8, 16, 30, 0.14) 100%),
        linear-gradient(to bottom,
            rgba(4, 10, 18, 0.42) 0%,
            rgba(4, 10, 18, 0.14) 24%,
            rgba(4, 10, 18, 0.58) 100%);
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__texture {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-signal) 80%, #ffffff 20%) 1px, transparent 1px);
    background-size: 100% 10px;
    opacity: 0.18;
    mix-blend-mode: overlay;
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__face-light {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(66% 84% at 86% 46%,
            rgba(244, 248, 255, 0.24) 0%,
            rgba(223, 235, 252, 0.16) 30%,
            rgba(193, 211, 238, 0.08) 49%,
            rgba(0, 0, 0, 0) 74%),
        linear-gradient(95deg,
            rgba(255, 255, 255, 0) 44%,
            rgba(224, 236, 253, 0.09) 74%,
            rgba(246, 250, 255, 0.19) 100%);
    mix-blend-mode: screen;
    opacity: 0.94;
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__inner {
    position: relative;
    z-index: 4;
    width: min(1220px, calc(100% - 2.2rem));
    margin-inline: auto;
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__content {
    max-width: min(700px, 100%);
    display: grid;
    gap: clamp(1.05rem, 2.2vw, 1.65rem);
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 8.2vw, 5.9rem);
    line-height: 0.9;
    letter-spacing: -0.027em;
    font-weight: 820;
    color: #f3f8ff;
    text-wrap: balance;
    text-shadow:
        0 14px 28px rgba(2, 7, 12, 0.38),
        0 3px 8px rgba(2, 7, 12, 0.34);
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__title-line {
    display: block;
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__title-line--second {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.12em;
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__line1-accent {
    color: color-mix(in srgb, var(--color-signal) 70%, #f6dcc0);
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    margin-inline-start: 0.2em;
    opacity: 0.92;
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__outline-word {
    --outline-thickness: 1.55px;
    --mm-outline-base: color-mix(in srgb, var(--mm-header-accent-color, var(--accent-header)) 86%, #a2d2ef);
    color: rgba(var(--mm-header-accent-rgb, var(--accent-header-rgb)), 0.32) !important;
    -webkit-text-fill-color: currentColor !important;
    transform-origin: 50% 78%;
    text-shadow:
        0 0 1px rgba(var(--mm-header-accent-rgb, var(--accent-header-rgb)), 0.18),
        0 8px 18px rgba(3, 8, 14, 0.32);
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__fill-word {
    color: color-mix(in srgb, var(--color-signal) 84%, #f3cb90);
    text-shadow: 0 10px 24px rgba(5, 10, 18, 0.32);
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__lead {
    margin: 0;
    max-width: 33ch;
    font-family: var(--font-body);
    font-size: clamp(1.06rem, 1.9vw, 1.56rem);
    line-height: 1.48;
    font-weight: 500;
    color: rgba(236, 244, 255, 0.94);
    text-wrap: balance;
    text-shadow: 0 2px 8px rgba(4, 9, 16, 0.52);
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.52rem;
    min-height: 56px;
    padding: 0.88rem 1.75rem;
    border-radius: 16px;
    border: 1px solid transparent;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background-color 0.24s ease, color 0.24s ease;
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__cta:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(var(--color-signal-rgb), 0.48),
        0 10px 24px rgba(6, 12, 20, 0.36);
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__cta--primary {
    background: var(--color-signal);
    border-color: color-mix(in srgb, var(--color-signal) 84%, #fff 16%);
    color: #14100a;
    -webkit-text-fill-color: #14100a;
    box-shadow: 0 14px 32px rgba(var(--color-signal-rgb), 0.3);
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__cta--primary:hover {
    transform: translateY(-2px);
    color: #14100a;
    -webkit-text-fill-color: #14100a;
    background: color-mix(in srgb, var(--color-signal) 90%, #be8f55);
    border-color: color-mix(in srgb, var(--color-signal) 78%, #ffffff 22%);
    box-shadow: 0 18px 36px rgba(var(--color-signal-rgb), 0.36);
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__cta--primary:visited,
.mm-hero-section.mm-hero-v2 .mm-hero-v2__cta--primary:active,
.mm-hero-section.mm-hero-v2 .mm-hero-v2__cta--primary:hover,
.mm-hero-section.mm-hero-v2 .mm-hero-v2__cta--primary:focus-visible {
    color: #14100a !important;
    -webkit-text-fill-color: #14100a !important;
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__cta--secondary {
    background: rgba(10, 22, 39, 0.52);
    border-color: rgba(198, 219, 240, 0.25);
    color: rgba(233, 243, 255, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__cta--secondary:hover {
    transform: translateY(-2px);
    background: rgba(10, 24, 42, 0.64);
    border-color: rgba(212, 230, 247, 0.4);
    color: #f3f9ff;
    box-shadow: 0 12px 26px rgba(5, 12, 20, 0.28);
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__meta {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(218, 232, 249, 0.78);
}

.mm-hero-section.mm-hero-v2 .mm-hero-v2__fade {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: clamp(120px, 18vh, 220px);
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom,
            rgba(4, 10, 18, 0) 0%,
            rgba(4, 10, 18, 0.3) 48%,
            var(--color-bg, #0a0908) 100%);
}

:root[data-theme="light"] .mm-hero-section.mm-hero-v2 .mm-hero-v2__scrim {
    background:
        radial-gradient(125% 115% at 14% 46%,
            rgba(4, 10, 18, 0.74) 0%,
            rgba(4, 10, 18, 0.5) 38%,
            rgba(4, 10, 18, 0.08) 70%,
            rgba(4, 10, 18, 0) 100%),
        linear-gradient(112deg,
            rgba(8, 17, 30, 0.7) 0%,
            rgba(9, 20, 35, 0.58) 44%,
            rgba(10, 24, 42, 0.3) 72%,
            rgba(10, 24, 42, 0.1) 100%),
        linear-gradient(to bottom,
            rgba(7, 15, 27, 0.36) 0%,
            rgba(7, 15, 27, 0.12) 28%,
            rgba(7, 15, 27, 0.38) 100%);
}

:root[data-theme="light"] .mm-hero-section.mm-hero-v2 .mm-hero-v2__texture {
    opacity: 0.14;
    mix-blend-mode: soft-light;
}

:root[data-theme="light"] .mm-hero-section.mm-hero-v2 .mm-hero-v2__face-light {
    background:
        radial-gradient(64% 82% at 86% 46%,
            rgba(255, 249, 239, 0.28) 0%,
            rgba(250, 238, 220, 0.18) 31%,
            rgba(242, 226, 201, 0.1) 50%,
            rgba(0, 0, 0, 0) 74%),
        linear-gradient(95deg,
            rgba(255, 255, 255, 0) 44%,
            rgba(255, 242, 224, 0.11) 74%,
            rgba(255, 250, 242, 0.2) 100%);
    mix-blend-mode: soft-light;
    opacity: 0.82;
}

:root[data-theme="light"] .mm-hero-section.mm-hero-v2 .mm-hero-v2__outline-word {
    color: rgba(var(--mm-header-accent-rgb, var(--accent-header-rgb)), 0.42) !important;
}

:root[data-theme="light"] .mm-hero-section.mm-hero-v2 .mm-hero-v2__lead {
    color: rgba(242, 249, 255, 0.95);
    text-shadow: 0 2px 9px rgba(4, 11, 20, 0.52);
}

:root[data-theme="light"] .mm-hero-section.mm-hero-v2 .mm-hero-v2__meta {
    color: rgba(216, 231, 247, 0.8);
}

:root[data-theme="light"] .mm-hero-section.mm-hero-v2 {
    border-bottom: 1px solid rgba(20, 32, 51, 0.2);
    box-shadow: 0 18px 28px -20px rgba(8, 15, 27, 0.56);
}

:root[data-theme="light"] .mm-hero-section.mm-hero-v2 .mm-hero-v2__fade {
    display: none !important;
    height: 0 !important;
    background: none !important;
}

:root[data-theme="light"] .mm-section-top-blend {
    margin-top: 0;
}

:root[data-theme="light"] .mm-section-top-blend__aura {
    display: none !important;
    height: 0 !important;
    background: none !important;
    opacity: 0 !important;
}

:root[data-theme="light"] .mm-benefits {
    border-top: 0 !important;
}

:root[data-theme="light"] .mm-benefits__badge {
    background: linear-gradient(145deg,
            rgba(255, 252, 247, 0.94) 0%,
            rgba(246, 239, 228, 0.9) 100%) !important;
    border-color: rgba(var(--accent-main-rgb), 0.42) !important;
    color: var(--color-signal-ink) !important;
    box-shadow:
        0 10px 18px rgba(17, 27, 41, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.72) inset !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 767px) {
    :root[data-theme="light"] .mm-section-top-blend {
        margin-top: 0;
    }

    :root[data-theme="light"] .mm-section-top-blend__aura {
        height: clamp(16px, 2.8vh, 28px);
        opacity: 0.34;
    }
}

:root[data-theme="light"] .mm-hero-section.mm-hero-v2 .mm-hero-v2__cta--secondary {
    background: rgba(9, 23, 40, 0.54);
    border-color: rgba(196, 219, 243, 0.34);
    color: rgba(239, 246, 255, 0.92);
}

:root[data-theme="light"] .mm-os-bar::before,
html.light .mm-os-bar::before {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* Light Mode: keep OS bar fully transparent (no underline/accent line). */
:root[data-theme="light"] .mm-os-bar::after,
html.light .mm-os-bar::after {
    content: none !important;
    display: none !important;
    background: none !important;
    height: 0 !important;
    opacity: 0 !important;
}

@media (min-width: 1024px) {
    .mm-hero-section.mm-hero-v2 {
        padding-top: clamp(7.25rem, 10vh, 9.25rem);
        padding-bottom: clamp(6.6rem, 12vh, 8.6rem);
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__content {
        transform: perspective(1400px) rotateX(var(--mm-hero-content-tilt, 0deg));
        transform-origin: 48% 100%;
        will-change: auto;
    }

    .mm-hero-section.mm-hero-v2.mm-hero-scene-active .mm-hero-v2__content {
        will-change: transform;
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__actions {
        gap: 1rem;
    }
}

@media (max-width: 1023px) {
    .mm-hero-section.mm-hero-v2 .mm-hero-v2__inner {
        width: min(100%, calc(100% - 1.6rem));
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__content {
        text-align: center;
        margin-inline: auto;
        justify-items: center;
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__lead {
        max-width: 30ch;
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__actions {
        justify-content: center;
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__title-line--second {
        display: flex;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .mm-hero-section.mm-hero-v2 {
        padding-top: calc(6.8rem + env(safe-area-inset-top));
        padding-bottom: calc(8.4rem + env(safe-area-inset-bottom));
        min-height: 100dvh;
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__image {
        object-position: 70% 44%;
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__texture {
        background-size: 100% 9px;
        opacity: 0.2;
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__face-light {
        background:
            radial-gradient(74% 92% at 89% 43%,
                rgba(246, 250, 255, 0.28) 0%,
                rgba(223, 236, 253, 0.19) 32%,
                rgba(196, 213, 240, 0.1) 52%,
                rgba(0, 0, 0, 0) 74%),
            linear-gradient(97deg,
                rgba(255, 255, 255, 0) 46%,
                rgba(224, 237, 255, 0.1) 75%,
                rgba(247, 251, 255, 0.2) 100%);
        opacity: 0.98;
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__title {
        font-size: clamp(2rem, 10.4vw, 3.35rem);
        line-height: 0.92;
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__lead {
        font-size: clamp(1.02rem, 5.4vw, 1.36rem);
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__cta {
        min-height: 52px;
        width: 100%;
        max-width: 22rem;
    }

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__meta {
        font-size: 0.66rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .mm-hero-section.mm-hero-v2 .mm-hero-v2__media,
    .mm-hero-section.mm-hero-v2 .mm-hero-v2__content,
    .mm-hero-section.mm-hero-v2 .mm-hero-v2__cta {
        transform: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   Light Mode: Gradual Section Darkening with Signal Color Tinting
   Creates a scroll gradient from light to darker, progressively tinted
   with the active signal color for visual cohesion
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
    /* Base light color */
    --section-base-light: #faf7f2;
    /* Subtle section texture for improved scanability on bright backgrounds */
    --section-texture-line: rgba(var(--accent-main-rgb), 0.05);
    --section-texture-grid: rgba(17, 31, 50, 0.02);
    /* Progressively mix signal color for depth + brand cohesion */
    --section-bg-1: var(--section-base-light);
    --section-bg-2: color-mix(in srgb, var(--section-base-light) 94%, var(--accent-main) 6%);
    --section-bg-3: color-mix(in srgb, var(--section-base-light) 88%, var(--accent-main) 12%);
    --section-bg-4: color-mix(in srgb, var(--section-base-light) 82%, var(--accent-main) 18%);
    --section-bg-5: color-mix(in srgb, var(--section-base-light) 76%, var(--accent-main) 24%);
    --section-bg-6: color-mix(in srgb, var(--section-base-light) 70%, var(--accent-main) 30%);
    --section-bg-7: color-mix(in srgb, var(--section-base-light) 64%, var(--accent-main) 36%);
    --section-bg-8: color-mix(in srgb, var(--section-base-light) 58%, var(--accent-main) 42%);
}

/* Light mode section texture:
   static gradients only (no blur/no animation) to keep cost minimal. */
:root[data-theme="light"] main#main > section:nth-of-type(n+2) {
    background-image:
        repeating-linear-gradient(to bottom,
            var(--section-texture-line) 0,
            var(--section-texture-line) 1px,
            transparent 1px,
            transparent 12px),
        repeating-linear-gradient(to right,
            var(--section-texture-grid) 0,
            var(--section-texture-grid) 1px,
            transparent 1px,
            transparent 46px);
}

/* Explicit texture pass for services (visible but subtle). */
:root[data-theme="light"] #services {
    isolation: isolate;
}

:root[data-theme="light"] #services::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        repeating-linear-gradient(to bottom,
            rgba(var(--accent-main-rgb), 0.06) 0,
            rgba(var(--accent-main-rgb), 0.06) 1px,
            transparent 1px,
            transparent 11px),
        repeating-linear-gradient(to right,
            rgba(17, 31, 50, 0.022) 0,
            rgba(17, 31, 50, 0.022) 1px,
            transparent 1px,
            transparent 44px);
    opacity: 0.46;
}

/* Target all direct section children of main - override bg-black etc. */
:root[data-theme="light"] main#main > section:nth-of-type(1) {
    background-color: var(--section-bg-1) !important;
}

:root[data-theme="light"] main#main > section:nth-of-type(2) {
    background-color: var(--section-bg-2) !important;
}

:root[data-theme="light"] main#main > section:nth-of-type(3) {
    background-color: var(--section-bg-3) !important;
}

:root[data-theme="light"] main#main > section:nth-of-type(4) {
    background-color: var(--section-bg-4) !important;
}

:root[data-theme="light"] main#main > section:nth-of-type(5) {
    background-color: var(--section-bg-5) !important;
}

:root[data-theme="light"] main#main > section:nth-of-type(6) {
    background-color: var(--section-bg-6) !important;
}

:root[data-theme="light"] main#main > section:nth-of-type(7) {
    background-color: var(--section-bg-7) !important;
}

:root[data-theme="light"] main#main > section:nth-of-type(8) {
    background-color: var(--section-bg-8) !important;
}

/* Sections beyond 8: use the deepest signal-tinted shade */
:root[data-theme="light"] main#main > section:nth-of-type(n+9) {
    background-color: var(--section-bg-8) !important;
}

/* Account page: light mode readability parity with dark mode */
.mm-account-page .mm-account-surface {
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

:root[data-theme="light"] .mm-account-page h1,
:root[data-theme="light"] .mm-account-page h2,
:root[data-theme="light"] .mm-account-page h3,
:root[data-theme="light"] .mm-account-page h4,
html.light .mm-account-page h1,
html.light .mm-account-page h2,
html.light .mm-account-page h3,
html.light .mm-account-page h4 {
    text-shadow: none !important;
}

:root[data-theme="light"] .mm-account-page .mm-account-surface,
html.light .mm-account-page .mm-account-surface {
    background: var(--mm-light-surface) !important;
    border-color: var(--mm-light-border) !important;
    box-shadow: var(--mm-light-shadow-soft) !important;
}

:root[data-theme="light"] .mm-account-page details.mm-account-surface[open],
html.light .mm-account-page details.mm-account-surface[open] {
    background: var(--mm-light-surface-soft) !important;
    border-color: rgba(var(--accent-main-rgb), 0.36) !important;
    box-shadow: var(--mm-light-shadow) !important;
}

:root[data-theme="light"] .mm-account-page .text-text-meta,
html.light .mm-account-page .text-text-meta {
    color: rgba(15, 34, 57, 0.66) !important;
}