@charset "UTF-8";

:root {
    --shell-pad: clamp(12px, 1.6vw, 24px);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --mws-bg: #06020c;
    --mws-bg-2: #11081c;
    --mws-surface: rgba(255, 255, 255, 0.075);
    --mws-surface-strong: rgba(255, 255, 255, 0.12);
    --mws-border: rgba(255, 255, 255, 0.15);
    --mws-text: #f8f7ff;
    --mws-muted: rgba(248, 247, 255, 0.68);
    --mws-soft: rgba(248, 247, 255, 0.48);
    --mws-primary: #8b5cf6;
    --mws-primary-rgb: 139, 92, 246;
    --mws-accent: #c084fc;
    --mws-accent-rgb: 192, 132, 252;
    --mws-hot: #f0abfc;
    --mws-number: #d9b8ff;
    --mws-moon: #8b5cf6;
    --mws-sun: #f6c453;
    --mws-shell-bg: rgba(17, 8, 28, 0.78);
    --mws-topbar-bg: rgba(8, 3, 14, 0.82);
    --mws-workspace-glow: 0 0 46px rgba(139, 92, 246, 0.14);
    --mws-grid: rgba(248, 247, 255, 0.05);
    --mws-radius-xl: 34px;
    --mws-radius-lg: 24px;
    --mws-radius-md: 18px;
    --mws-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
    --mws-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mws-font-display: "Sora", "Inter", system-ui, sans-serif;
    color-scheme: dark;
}

html[data-theme="light"] {
    --mws-bg: #f4effb;
    --mws-bg-2: #ffffff;
    --mws-surface: rgba(255, 255, 255, 0.82);
    --mws-surface-strong: rgba(255, 255, 255, 0.94);
    --mws-border: rgba(84, 45, 147, 0.2);
    --mws-text: #161022;
    --mws-muted: rgba(30, 19, 47, 0.7);
    --mws-soft: rgba(30, 19, 47, 0.5);
    --mws-number: #5f2ec8;
    --mws-shell-bg: rgba(252, 250, 255, 0.9);
    --mws-topbar-bg: rgba(255, 255, 255, 0.92);
    --mws-workspace-glow: 0 0 42px rgba(72, 36, 130, 0.12);
    --mws-grid: rgba(76, 29, 149, 0.065);
    --mws-shadow: 0 26px 80px rgba(72, 36, 130, 0.18);
    color-scheme: light;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--mws-text);
    background:
        radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--mws-primary) 20%, transparent), transparent 34%),
        linear-gradient(180deg, var(--mws-bg-2), var(--mws-bg) 42%, var(--mws-bg));
    font-family: var(--mws-font-body);
    line-height: 1.6;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

body::before {
    content: none;
}

.site-backdrop {
    position: fixed;
    inset:
        calc(var(--shell-pad) + var(--safe-top))
        calc(var(--shell-pad) + var(--safe-right))
        calc(var(--shell-pad) + var(--safe-bottom))
        calc(var(--shell-pad) + var(--safe-left));
    z-index: -3;
    overflow: hidden;
    border-radius: var(--mws-radius-xl);
    background:
        radial-gradient(120% 52% at 50% -8%, rgba(var(--mws-primary-rgb), 0.16), transparent 58%),
        radial-gradient(110% 46% at 18% 26%, rgba(var(--mws-accent-rgb), 0.10), transparent 60%),
        radial-gradient(118% 50% at 82% 72%, rgba(var(--mws-primary-rgb), 0.09), transparent 62%),
        var(--mws-shell-bg);
    pointer-events: none;
}

.site-backdrop-frame {
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.18);
    border-radius: calc(var(--mws-radius-xl) - 1px);
}

.site-backdrop-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--mws-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--mws-grid) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.18));
}

.site-backdrop-frame::before,
.site-backdrop-frame::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    border-color: rgba(var(--mws-primary-rgb), 0.36);
    border-style: solid;
}

.site-backdrop-frame::before {
    top: -1px;
    left: -1px;
    border-width: 1px 0 0 1px;
}

.site-backdrop-frame::after {
    right: -1px;
    bottom: -1px;
    border-width: 0 1px 1px 0;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
}

.site-header,
.site-main,
.site-footer {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    top: calc(var(--shell-pad) + var(--safe-top));
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 74px;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--mws-border);
    border-radius: 999px;
    background: var(--mws-topbar-bg);
    box-shadow: var(--mws-shadow);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand-logo {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 50px;
    filter: drop-shadow(0 16px 28px rgba(var(--mws-primary-rgb), 0.22));
}

html[data-theme="light"] .brand-logo {
    filter: drop-shadow(0 14px 24px rgba(72, 36, 130, 0.14));
}

.brand-copy {
    display: grid;
    gap: 0;
    line-height: 1.1;
}

.brand-copy strong {
    font-family: var(--mws-font-display);
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.brand-copy small {
    color: var(--mws-muted);
    font-size: 0.77rem;
}

.site-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.topbar-language-group {
    position: relative;
}

.topbar-language-trigger,
.topbar-language-option {
    border: 1px solid var(--mws-border);
    color: var(--mws-text);
    background: transparent;
    cursor: pointer;
}

.topbar-language-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--mws-muted);
    font-size: 0.88rem;
    font-weight: 800;
    transition: 0.22s ease;
}

.topbar-language-trigger:hover,
.topbar-language-group.is-open .topbar-language-trigger {
    color: var(--mws-text);
    background: rgba(var(--mws-primary-rgb), 0.12);
}

.topbar-language-current {
    min-width: 1.9rem;
    text-align: center;
}

.topbar-language-chevron {
    font-size: 0.68rem;
}

.topbar-language-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    gap: 6px;
    min-width: 74px;
    padding: 8px;
    border: 1px solid var(--mws-border);
    border-radius: 22px;
    background: var(--mws-topbar-bg);
    box-shadow: var(--mws-shadow);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: 0.22s ease;
}

.topbar-language-group.is-open .topbar-language-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.topbar-language-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 6px;
    border-radius: 16px;
    transition: 0.22s ease;
}

.topbar-language-option:hover,
.topbar-language-option.is-active {
    background: rgba(var(--mws-primary-rgb), 0.16);
}

.topbar-language-option-code {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.site-menu a,
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    color: var(--mws-muted);
    background: transparent;
    font-size: 0.91rem;
    font-weight: 700;
    transition: 0.22s ease;
    cursor: pointer;
}

.site-menu a:hover,
.site-menu a.is-active,
.theme-toggle:hover {
    color: var(--mws-text);
    background: rgba(var(--mws-primary-rgb), 0.12);
}

.login-link {
    border: 1px solid rgba(var(--mws-primary-rgb), 0.26) !important;
    color: var(--mws-text) !important;
}

.theme-toggle {
    width: 42px;
    padding: 0;
    border: 1px solid var(--mws-border);
}

.theme-toggle[aria-pressed="true"] {
    background: rgba(var(--mws-primary-rgb), 0.16);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
}

.theme-toggle-icon {
    width: 18px;
    height: 18px;
}

.theme-toggle-moon {
    color: var(--mws-moon);
}

.theme-toggle-sun {
    display: none;
    color: var(--mws-sun);
}

html[data-theme="light"] .theme-toggle-sun {
    display: block;
}

html[data-theme="light"] .theme-toggle-moon {
    display: none;
}

.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--mws-border);
    border-radius: 16px;
    color: var(--mws-text);
    background: var(--mws-surface);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    border-radius: 99px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-main {
    padding-top: clamp(24px, 4vw, 52px);
}

.section-pad {
    padding-block: clamp(54px, 8vw, 112px);
}

.hero.section-pad {
    padding-top: clamp(10px, 2vw, 28px);
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.8fr);
    align-items: center;
    gap: clamp(34px, 6vw, 86px);
    min-height: calc(100vh - 130px);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.26);
    border-radius: 999px;
    color: color-mix(in srgb, var(--mws-accent) 88%, var(--mws-text));
    background: rgba(var(--mws-primary-rgb), 0.10);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--mws-accent);
    box-shadow: 0 0 18px rgba(var(--mws-accent-rgb), 0.8);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    font-family: var(--mws-font-display);
    letter-spacing: -0.045em;
}

.hero h1 {
    max-width: 950px;
    margin-bottom: 22px;
    font-size: clamp(2.7rem, 7vw, 6.8rem);
    font-weight: 800;
    line-height: 0.94;
}

.hero h1[data-i18n="landing.hero.title"] {
    --hero-title-edge: #a78bfa;
    --hero-title-depth: #6d28d9;
    --hero-title-depth-dark: #3b0764;
    position: relative;
    isolation: isolate;
    display: inline-block;
    width: fit-content;
    color: var(--mws-text);
    background:
        linear-gradient(
            118deg,
            #ffffff 4%,
            #ede9fe 28%,
            #c4b5fd 46%,
            #ffffff 56%,
            #a855f7 78%,
            #f5d0fe 100%
        );
    background-size: 230% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.24);
    text-shadow:
        1px 1px 0 var(--hero-title-edge),
        2px 2px 0 #8b5cf6,
        3px 3px 0 var(--hero-title-depth),
        4px 4px 0 var(--hero-title-depth),
        5px 5px 0 #5b21b6,
        6px 6px 0 #4c1d95,
        7px 7px 0 var(--hero-title-depth-dark),
        12px 16px 28px rgba(0, 0, 0, 0.46),
        0 0 34px rgba(var(--mws-primary-rgb), 0.32);
    filter: drop-shadow(0 12px 24px rgba(var(--mws-primary-rgb), 0.18));
    transform: perspective(720px) rotateX(2deg) rotateY(-4deg) translateZ(0);
    transform-origin: left center;
    animation: heroTitleShimmer 5.8s ease-in-out infinite;
    transition: transform 0.32s ease, filter 0.32s ease;
    will-change: background-position, transform;
}

.hero h1[data-i18n="landing.hero.title"]::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -15px;
    left: 8px;
    z-index: -1;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(var(--mws-primary-rgb), 0.58), rgba(var(--mws-accent-rgb), 0.12));
    filter: blur(14px);
    opacity: 0.58;
    pointer-events: none;
    transform: skewX(-18deg);
    animation: heroTitleGlow 3.6s ease-in-out infinite;
}

.hero h1[data-i18n="landing.hero.title"]:hover {
    filter: drop-shadow(0 18px 32px rgba(var(--mws-primary-rgb), 0.3)) brightness(1.08);
    transform: perspective(720px) rotateX(0deg) rotateY(1deg) translate3d(0, -4px, 12px) scale(1.02);
}

html[data-theme="light"] .hero h1[data-i18n="landing.hero.title"] {
    --hero-title-edge: #9f7aea;
    --hero-title-depth: #6d28d9;
    --hero-title-depth-dark: #2e1065;
    background:
        linear-gradient(
            118deg,
            #241038 0%,
            #4c1d95 23%,
            #7c3aed 42%,
            #7c3aed 46%,
            #ede9fe 49%,
            #6d28d9 52%,
            #9333ea 76%,
            #3b0764 100%
        );
    background-size: 190% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke-color: rgba(46, 16, 101, 0.58);
    text-shadow:
        1px 1px 0 #8b5cf6,
        2px 2px 0 #7c3aed,
        3px 3px 0 #6d28d9,
        4px 4px 0 #5b21b6,
        5px 5px 0 #4c1d95,
        6px 6px 0 #3b0764,
        7px 7px 0 var(--hero-title-depth-dark),
        12px 16px 24px rgba(46, 16, 101, 0.34),
        0 0 20px rgba(109, 40, 217, 0.16);
    filter: drop-shadow(0 12px 20px rgba(76, 29, 149, 0.2)) saturate(1.12);
}

html[data-theme="light"] .hero h1[data-i18n="landing.hero.title"]::after {
    background: linear-gradient(90deg, rgba(76, 29, 149, 0.46), rgba(139, 92, 246, 0.12));
    filter: blur(12px);
    animation-name: heroTitleGlowLight;
}

html[data-theme="light"] .hero h1[data-i18n="landing.hero.title"]:hover {
    filter: drop-shadow(0 17px 26px rgba(76, 29, 149, 0.3)) saturate(1.2) contrast(1.04);
}

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

    50% {
        background-position: 0 50%;
    }
}

@keyframes heroTitleGlow {
    0%,
    100% {
        opacity: 0.42;
        transform: skewX(-18deg) scaleX(0.92);
    }

    50% {
        opacity: 0.7;
        transform: skewX(-18deg) scaleX(1.04);
    }
}

@keyframes heroTitleGlowLight {
    0%,
    100% {
        opacity: 0.26;
        transform: skewX(-18deg) scaleX(0.92);
    }

    50% {
        opacity: 0.46;
        transform: skewX(-18deg) scaleX(1.02);
    }
}

.lead-text {
    max-width: 760px;
    color: var(--mws-muted);
    font-size: clamp(1.05rem, 1.7vw, 1.32rem);
}

.hero-actions,
.hero-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-actions {
    margin-top: 34px;
}

.btn-mws {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 900;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.btn-mws:hover {
    transform: translateY(-2px);
}

.btn-primary-mws {
    color: #fff;
    background: linear-gradient(135deg, var(--mws-primary), #a855f7 54%, #e879f9);
    box-shadow: 0 18px 38px rgba(var(--mws-primary-rgb), 0.33);
}

.btn-ghost-mws {
    border: 1px solid var(--mws-border);
    color: var(--mws-text);
    background: var(--mws-surface);
}

.hero-tags {
    margin-top: 24px;
}

.hero-tags span {
    padding: 7px 11px;
    border: 1px solid var(--mws-border);
    border-radius: 999px;
    color: var(--mws-muted);
    background: rgba(255, 255, 255, 0.045);
    font-size: 0.82rem;
    font-weight: 700;
}

.hero-visual {
    position: relative;
    min-height: 520px;
}

.visual-card {
    border: 1px solid var(--mws-border);
    border-radius: var(--mws-radius-xl);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 32%),
        var(--mws-surface);
    box-shadow: var(--mws-shadow);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.visual-card-main {
    position: absolute;
    inset: 38px 0 auto auto;
    width: min(100%, 470px);
    padding: 24px;
    transform: rotate(2deg);
}

.visual-card-top {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
}

.visual-card-top span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.visual-card-top span:nth-child(1) {
    background: #f6c23e;
}

.visual-card-top span:nth-child(2) {
    background: #ff5f57;
}

.visual-card-top span:nth-child(3) {
    background: #2ecc71;
}

.visual-title {
    margin-bottom: 22px;
    font-family: var(--mws-font-display);
    font-size: 1.35rem;
    font-weight: 800;
}

.store-card-head {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.store-card-head .visual-title {
    margin-bottom: 0;
}

.store-card-label {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 6px 10px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.22);
    border-radius: 999px;
    color: var(--mws-accent);
    background: rgba(var(--mws-primary-rgb), 0.12);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.store-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.store-icon-tile {
    position: relative;
    z-index: 0;
    display: grid;
    gap: 10px;
    justify-items: center;
    width: 100%;
    min-height: 118px;
    padding: 12px 10px;
    border: 1px solid var(--mws-border);
    border-radius: var(--mws-radius-md);
    appearance: none;
    color: inherit;
    background: color-mix(in srgb, var(--mws-surface-strong) 74%, transparent);
    cursor: pointer;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.store-icon-tile:focus-visible {
    z-index: 20;
    outline: 2px solid var(--mws-accent);
    outline-offset: 3px;
}

.store-icon-tile:focus-visible,
.store-icon-tile.is-open {
    border-color: rgba(var(--mws-primary-rgb), 0.52);
    background: color-mix(in srgb, var(--mws-surface-strong) 88%, rgba(var(--mws-primary-rgb), 0.18));
    box-shadow: 0 16px 34px rgba(var(--mws-primary-rgb), 0.2);
    transform: translateY(-3px);
}

.store-icon-tile.is-open {
    z-index: 19;
}

@media (hover: hover) {
    .store-icon-tile:hover {
        z-index: 18;
        border-color: rgba(var(--mws-primary-rgb), 0.46);
        background: color-mix(in srgb, var(--mws-surface-strong) 86%, rgba(var(--mws-primary-rgb), 0.16));
        box-shadow: 0 16px 32px rgba(var(--mws-primary-rgb), 0.18);
        transform: translateY(-4px);
    }

    .store-icon-tile:hover .store-icon-image {
        filter: drop-shadow(0 18px 28px rgba(var(--mws-primary-rgb), 0.32));
        transform: translateY(-3px) scale(1.08);
    }
}

.store-icon-shell {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 64px;
}

.store-icon-image {
    display: block;
    width: min(100%, 86px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.24));
    transition: transform 0.22s ease, filter 0.22s ease;
}

.store-icon-tile:focus-visible .store-icon-image,
.store-icon-tile.is-open .store-icon-image {
    filter: drop-shadow(0 18px 28px rgba(var(--mws-primary-rgb), 0.32));
    transform: translateY(-3px) scale(1.08);
}

.store-icon-light {
    display: none;
}

html[data-theme="light"] .store-icon-dark {
    display: none;
}

html[data-theme="light"] .store-icon-light {
    display: block;
}

.store-icon-label {
    color: var(--mws-muted);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    transition: color 0.22s ease;
}

.store-icon-tile:hover .store-icon-label,
.store-icon-tile:focus-visible .store-icon-label,
.store-icon-tile.is-open .store-icon-label {
    color: var(--mws-text);
}

.store-icon-info {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 30;
    width: min(230px, calc(300% + 24px));
    padding: 10px 12px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.34);
    border-radius: 14px;
    color: var(--mws-text);
    background: color-mix(in srgb, var(--mws-bg-2) 92%, var(--mws-primary) 8%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 8px) scale(0.96);
    transform-origin: center bottom;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.store-icon-tile:nth-child(3n + 1) .store-icon-info {
    left: 0;
    transform: translateY(8px) scale(0.96);
    transform-origin: left bottom;
}

.store-icon-tile:nth-child(3n) .store-icon-info {
    right: 0;
    left: auto;
    transform: translateY(8px) scale(0.96);
    transform-origin: right bottom;
}

.store-icon-tile.is-open .store-icon-info {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
}

.store-icon-tile:nth-child(3n + 1).is-open .store-icon-info,
.store-icon-tile:nth-child(3n).is-open .store-icon-info {
    transform: translateY(0) scale(1);
}

.store-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.store-card-meta span {
    padding: 6px 10px;
    border: 1px solid var(--mws-border);
    border-radius: 999px;
    color: var(--mws-muted);
    background: color-mix(in srgb, var(--mws-surface) 88%, transparent);
    font-size: 0.74rem;
    font-weight: 800;
}

.visual-bars {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}

.visual-bars span {
    display: block;
    width: var(--w);
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--mws-primary-rgb), 0.9), rgba(var(--mws-accent-rgb), 0.45));
}

.visual-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.visual-grid span {
    min-height: 84px;
    padding: 14px;
    border: 1px solid var(--mws-border);
    border-radius: var(--mws-radius-md);
    color: var(--mws-muted);
    background: rgba(255, 255, 255, 0.06);
    font-weight: 800;
}

.floating-card {
    position: absolute;
    z-index: 2;
    padding: 13px 16px;
    border: 1px solid var(--mws-border);
    border-radius: 999px;
    color: var(--mws-text);
    background: color-mix(in srgb, var(--mws-bg-2) 76%, transparent);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.26);
    font-weight: 900;
    backdrop-filter: blur(18px);
}

.card-a { top: 0; left: 10%; animation: floatA 6s ease-in-out infinite; }
.card-b { right: 4%; bottom: 22%; animation: floatB 7s ease-in-out infinite; }
.card-c { left: 0; bottom: 9%; animation: floatA 8s ease-in-out infinite; }

.surface-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mws-border);
    border-radius: var(--mws-radius-lg);
    background: var(--mws-surface);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.surface-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%);
}

.surface-card > * {
    position: relative;
    z-index: 1;
}

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

.stat-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 20px;
}

.stat-card > strong {
    color: var(--mws-number);
    font-family: var(--mws-font-display);
    font-size: 1.5rem;
    text-shadow: 0 0 22px rgba(var(--mws-primary-rgb), 0.14);
}

.stat-card h2 {
    margin-bottom: 4px;
    font-size: 1rem;
}

.stat-card p,
.service-card p,
.project-card p,
.process-item p,
.about-panel p,
.about-aside p,
.contact-panel p,
.contact-card small {
    margin-bottom: 0;
    color: var(--mws-muted);
}

.section-heading {
    max-width: 760px;
    margin-bottom: 28px;
}

.section-heading h2,
.about-panel h2,
.contact-panel h2 {
    margin-bottom: 14px;
    font-size: clamp(2rem, 4.8vw, 4.2rem);
    font-weight: 800;
    line-height: 1;
}

.section-heading p {
    color: var(--mws-muted);
    font-size: 1.04rem;
}

.split-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.65fr);
    align-items: end;
    gap: 24px;
    max-width: none;
}

.service-grid,
.project-grid,
.process-list,
.contact-grid {
    display: grid;
    gap: 16px;
}

.service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-card,
.project-card,
.process-item {
    padding: 22px;
}

.service-card {
    min-height: 268px;
    transition: transform 0.22s ease, border-color 0.22s ease;
}

.service-card:hover,
.project-card:hover,
.contact-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--mws-primary-rgb), 0.34);
}

.service-icon {
    display: block;
    width: max-content;
    margin-bottom: 30px;
    color: var(--mws-number);
    font-family: var(--mws-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 22px rgba(var(--mws-primary-rgb), 0.14);
}

.service-card h3,
.project-card h3,
.process-item h3 {
    margin-bottom: 10px;
    font-size: 1.22rem;
    font-weight: 800;
}

.project-grid {
    grid-template-columns: 1.15fr 0.92fr 0.92fr;
}

.project-card {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.22s ease, border-color 0.22s ease;
}

.project-badge {
    width: max-content;
    margin-bottom: 28px;
    padding: 7px 10px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--mws-accent) 80%, var(--mws-text));
    background: rgba(var(--mws-primary-rgb), 0.14);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.process-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-item span {
    display: block;
    margin-bottom: 34px;
    color: rgba(var(--mws-accent-rgb), 0.92);
    font-family: var(--mws-font-display);
    font-size: 1.8rem;
    font-weight: 800;
}

.about-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
    align-items: stretch;
    gap: 16px;
}

.about-panel,
.contact-panel {
    padding: clamp(24px, 4vw, 44px);
}

.check-list {
    display: grid;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 32px;
    color: var(--mws-muted);
}

.check-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--mws-primary), var(--mws-accent));
    font-size: 0.82rem;
    font-weight: 900;
}

.about-aside {
    display: grid;
    gap: 22px;
    align-content: start;
    min-height: 360px;
    padding: 26px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.22);
    border-radius: var(--mws-radius-lg);
    background:
        radial-gradient(circle at top right, rgba(var(--mws-primary-rgb), 0.35), transparent 50%),
        linear-gradient(145deg, rgba(var(--mws-primary-rgb), 0.16), rgba(255, 255, 255, 0.04));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.about-portrait-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.26);
    border-radius: calc(var(--mws-radius-lg) - 6px);
    background:
        radial-gradient(circle at top left, rgba(var(--mws-accent-rgb), 0.18), transparent 42%),
        rgba(255, 255, 255, 0.05);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}

.about-portrait-image {
    display: block;
    width: 100%;
    height: auto;
}

.about-aside-copy {
    display: grid;
    gap: 12px;
}

.about-aside-copy .project-badge {
    margin-bottom: 0;
}

.about-aside h3 {
    margin: 0;
    font-family: var(--mws-font-display);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 0.98;
}

.contact-panel {
    text-align: center;
}

.contact-panel .eyebrow {
    margin-inline: auto;
}

.contact-panel > p {
    max-width: 760px;
    margin-inline: auto;
}

.shop-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 260px;
    padding: clamp(26px, 5vw, 54px);
    align-items: center;
    gap: clamp(22px, 4vw, 48px);
    cursor: pointer;
    text-align: left;
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.shop-panel::after {
    content: "";
    position: absolute;
    inset: auto -12% -72% 20%;
    z-index: 0;
    height: 210%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--mws-primary-rgb), 0.24), transparent 64%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.shop-panel:hover,
.shop-panel:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(var(--mws-primary-rgb), 0.48);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(var(--mws-accent-rgb), 0.1);
}

.shop-panel:hover::after,
.shop-panel:focus-visible::after {
    opacity: 1;
    transform: translate3d(-4%, -4%, 0) scale(1.05);
}

.shop-panel:focus-visible {
    outline: 3px solid var(--mws-accent);
    outline-offset: 5px;
}

.shop-panel-icon {
    display: grid;
    width: clamp(84px, 12vw, 132px);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.28);
    border-radius: 30%;
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.2), transparent 36%),
        linear-gradient(145deg, rgba(var(--mws-primary-rgb), 0.28), rgba(var(--mws-accent-rgb), 0.1));
    box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.025), 0 20px 45px rgba(var(--mws-primary-rgb), 0.18);
}

.shop-panel-icon img {
    grid-area: 1 / 1;
    display: block;
    width: 66%;
    height: 66%;
    object-fit: contain;
    transition: transform 0.24s ease;
}

.shop-panel-icon-light,
html[data-theme="light"] .shop-panel-icon-dark {
    display: none;
}

html[data-theme="light"] .shop-panel-icon-light {
    display: block;
}

.shop-panel:hover .shop-panel-icon img,
.shop-panel:focus-visible .shop-panel-icon img {
    transform: scale(1.08) rotate(-3deg);
}

.shop-panel-copy {
    display: grid;
    gap: 12px;
}

.shop-panel-copy .eyebrow {
    width: max-content;
    margin: 0;
}

.shop-panel-copy h2 {
    margin: 0;
    font-size: clamp(2.3rem, 6vw, 5.1rem);
    line-height: 0.92;
}

.shop-panel-description {
    max-width: 680px;
    color: var(--mws-muted);
    font-size: clamp(0.98rem, 1.7vw, 1.16rem);
    line-height: 1.65;
}

.shop-panel-action {
    display: inline-flex;
    min-height: 48px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.34);
    border-radius: 999px;
    color: var(--mws-text);
    background: rgba(var(--mws-primary-rgb), 0.12);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
    transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.shop-panel-action svg {
    width: 19px;
    height: 19px;
    transition: transform 0.22s ease;
}

.shop-panel:hover .shop-panel-action,
.shop-panel:focus-visible .shop-panel-action {
    color: #fff;
    background: linear-gradient(135deg, var(--mws-primary), var(--mws-accent));
    transform: translateX(3px);
}

.shop-panel:hover .shop-panel-action svg,
.shop-panel:focus-visible .shop-panel-action svg {
    transform: translateX(3px);
}

@media (max-width: 760px) {
    .shop-panel {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 0;
    }

    .shop-panel-action {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .shop-panel {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .shop-panel-icon {
        width: 82px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-panel,
    .shop-panel::after,
    .shop-panel-icon img,
    .shop-panel-action,
    .shop-panel-action svg {
        transition: none;
    }
}

.contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
    margin: 32px auto 0;
}

.contact-card {
    display: grid;
    gap: 8px;
    min-height: 164px;
    padding: 22px;
    border: 1px solid var(--mws-border);
    border-radius: var(--mws-radius-md);
    background: rgba(255, 255, 255, 0.055);
    text-align: left;
    transition: transform 0.22s ease, border-color 0.22s ease;
}

.contact-card span {
    color: var(--mws-soft);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.contact-card strong {
    font-family: var(--mws-font-display);
    font-size: 1.25rem;
}

.contact-note {
    margin-top: 24px;
    font-size: 0.9rem;
}

.service-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.focus-demo-section {
    position: relative;
}

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

.focus-demo-card {
    display: flex;
    min-height: 410px;
    padding: 30px 24px 24px;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.focus-demo-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--mws-primary-rgb), 0.42);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.2);
}

.focus-demo-card:focus-visible {
    outline: 2px solid var(--mws-accent);
    outline-offset: 4px;
}

.focus-avatar {
    display: grid;
    width: 132px;
    aspect-ratio: 1;
    margin-bottom: 26px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.26), transparent 34%),
        linear-gradient(145deg, var(--mws-primary), #2e1065);
    box-shadow:
        inset 0 0 0 8px rgba(255, 255, 255, 0.04),
        0 22px 46px rgba(var(--mws-primary-rgb), 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.focus-demo-card-applications .focus-avatar {
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.28), transparent 34%),
        linear-gradient(145deg, #7c3aed, #312e81);
}

.focus-demo-card-hosting .focus-avatar {
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.28), transparent 34%),
        linear-gradient(145deg, #a855f7, #3b0764);
}

.focus-demo-card:hover .focus-avatar {
    transform: scale(1.045) rotate(-2deg);
    box-shadow:
        inset 0 0 0 8px rgba(255, 255, 255, 0.06),
        0 28px 58px rgba(var(--mws-primary-rgb), 0.3);
}

.focus-avatar svg {
    width: 52px;
    height: 52px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.focus-demo-copy {
    display: grid;
    gap: 10px;
}

.focus-demo-copy small {
    color: var(--mws-soft);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.focus-demo-copy strong {
    font-family: var(--mws-font-display);
    font-size: 1.22rem;
    line-height: 1.3;
}

.focus-demo-copy > span {
    color: var(--mws-muted);
}

.focus-demo-link {
    display: inline-flex;
    min-height: 42px;
    margin-top: auto;
    padding: 9px 14px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--mws-border);
    border-radius: 999px;
    color: var(--mws-text);
    background: rgba(255, 255, 255, 0.055);
    font-size: 0.86rem;
    font-weight: 800;
}

.focus-demo-link > span:last-child {
    color: var(--mws-number);
    font-size: 1.05rem;
    transition: transform 0.22s ease;
}

.focus-demo-card:hover .focus-demo-link > span:last-child {
    transform: translateX(4px);
}

.platform-section,
.legal-main {
    padding-bottom: 24px;
}

.platform-grid,
.legal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.platform-card,
.legal-card {
    padding: 24px;
}

.platform-card {
    display: grid;
    gap: 22px;
}

.platform-flow {
    display: grid;
    gap: 14px;
}

.platform-flow h3,
.legal-card h2 {
    margin: 0;
    font-family: var(--mws-font-display);
    font-size: 1.3rem;
    font-weight: 800;
}

.platform-flow-list,
.platform-app-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.platform-flow-list {
    counter-reset: platform-flow;
}

.platform-flow-list li,
.platform-app-list li {
    min-height: 54px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.14);
    border-radius: var(--mws-radius-md);
    color: var(--mws-muted);
    background: rgba(255, 255, 255, 0.05);
}

.platform-flow-list li {
    position: relative;
    padding-left: 64px;
}

.platform-flow-list li::before {
    counter-increment: platform-flow;
    content: counter(platform-flow);
    position: absolute;
    left: 16px;
    top: 50%;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--mws-primary), var(--mws-accent));
    font-weight: 900;
}

.platform-app-list li::marker {
    content: "";
}

.gallery-stack {
    display: grid;
    gap: 18px;
}

.gallery-card {
    display: grid;
    grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 24px;
    transition: transform 0.22s ease, border-color 0.22s ease;
}

.gallery-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--mws-primary-rgb), 0.34);
}

.gallery-browser {
    padding: 14px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.16);
    border-radius: var(--mws-radius-lg);
    background: rgba(255, 255, 255, 0.04);
}

.gallery-browser-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.gallery-browser-top span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.gallery-browser-top span:nth-child(1) {
    background: #f6c23e;
}

.gallery-browser-top span:nth-child(2) {
    background: #ff5f57;
}

.gallery-browser-top span:nth-child(3) {
    background: #2ecc71;
}

.gallery-browser-address {
    margin-left: auto;
    max-width: calc(100% - 48px);
    padding: 5px 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.12);
    border-radius: 999px;
    color: var(--mws-muted);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-screen {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.12);
    border-radius: var(--mws-radius-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%),
        rgba(255, 255, 255, 0.045);
}

.gallery-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 10, 18, 0.04), rgba(7, 10, 18, 0.18)),
        linear-gradient(90deg, rgba(var(--mws-primary-rgb), 0.06), transparent 22%, transparent 78%, rgba(var(--mws-accent-rgb), 0.06));
    pointer-events: none;
}

.gallery-screen-shot {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: top center;
    transform: scale(1.01);
    margin: 0;
}

.gallery-copy {
    display: grid;
    gap: 12px;
}

.gallery-copy h3 {
    margin: 0;
    font-family: var(--mws-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
}

.gallery-copy p {
    margin: 0;
    color: var(--mws-muted);
}

.gallery-copy strong {
    color: var(--mws-accent);
    font-size: 0.92rem;
    font-weight: 800;
}

.gallery-card-alpha .gallery-browser {
    background:
        radial-gradient(circle at top left, rgba(var(--mws-primary-rgb), 0.18), transparent 48%),
        rgba(255, 255, 255, 0.04);
}

.gallery-card-beta .gallery-browser {
    background:
        radial-gradient(circle at top right, rgba(var(--mws-accent-rgb), 0.18), transparent 48%),
        rgba(255, 255, 255, 0.04);
}

.gallery-card-gamma .gallery-browser {
    background:
        radial-gradient(circle at bottom left, rgba(var(--mws-primary-rgb), 0.16), transparent 50%),
        rgba(255, 255, 255, 0.04);
}

.minimal-footer {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 22px;
    padding: 26px;
    border: 1px solid var(--mws-border);
    border-radius: var(--mws-radius-lg);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.10), transparent 34%),
        var(--mws-surface);
    box-shadow: var(--mws-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.minimal-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, rgba(var(--mws-accent-rgb), 0.12), transparent 32%),
        radial-gradient(circle at bottom left, rgba(var(--mws-primary-rgb), 0.10), transparent 30%);
}

.minimal-footer > * {
    position: relative;
    z-index: 1;
}

.footer-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(var(--mws-primary-rgb), 0.14);
}

.footer-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.22);
    border-radius: 999px;
    color: var(--mws-text);
    background: rgba(var(--mws-primary-rgb), 0.12);
    font-family: var(--mws-font-display);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.footer-pill {
    padding: 7px 12px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.14);
    border-radius: 999px;
    color: var(--mws-muted);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.78rem;
    font-weight: 800;
}

.footer-grid {
    display: grid;
    gap: 24px;
    width: 100%;
}

.footer-grid-rich {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.62fr));
}

.footer-grid-legal {
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.7fr);
}

.footer-brand,
.footer-nav,
.footer-links,
.footer-access {
    display: grid;
    gap: 12px;
}

.footer-brand {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
}

.footer-grid-centered {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
}

.footer-brand-centered {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

.footer-logo {
    width: auto;
    height: 48px;
    filter: drop-shadow(0 12px 24px rgba(var(--mws-primary-rgb), 0.18));
}

.footer-brand strong,
.footer-nav strong,
.footer-links strong,
.footer-access strong {
    font-family: var(--mws-font-display);
    font-size: 1rem;
}

.footer-brand p,
.legal-card p {
    margin: 0;
    color: var(--mws-muted);
}

.footer-nav a,
.footer-links a {
    width: max-content;
    max-width: 100%;
    color: var(--mws-muted);
    font-weight: 700;
}

.footer-links-centered {
    justify-items: center;
    text-align: center;
}

.footer-link-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
}

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

.footer-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.22);
    border-radius: 16px;
    color: var(--mws-text);
    background: rgba(var(--mws-primary-rgb), 0.12);
    font-weight: 800;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.footer-cta-link:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--mws-primary-rgb), 0.34);
}

.footer-cta-link-ghost {
    background: rgba(255, 255, 255, 0.03);
    color: var(--mws-muted);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--mws-primary-rgb), 0.14);
}

.footer-bottom-centered {
    justify-content: center;
    text-align: center;
}

.footer-meta {
    color: var(--mws-muted);
    font-size: 0.88rem;
}

.footer-backtop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.18);
    border-radius: 999px;
    color: var(--mws-text);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.footer-backtop:hover {
    background: rgba(var(--mws-primary-rgb), 0.12);
}

.floating-actions {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.whatsapp-fab {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #25d366;
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.34);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.whatsapp-fab svg {
    width: 30px;
    height: 30px;
}

.whatsapp-fab:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(37, 211, 102, 0.42);
}

.landing-page .whatsapp-fab {
    position: fixed;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
}

.cookie-consent {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 1200;
    display: flex;
    width: min(760px, calc(100% - 32px));
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.24);
    border-radius: 22px;
    background: rgba(12, 7, 19, 0.96);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(18px);
    transform: translateX(-50%);
}

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

.cookie-consent-copy {
    display: grid;
    gap: 7px;
}

.cookie-consent-copy strong {
    color: #fff;
    font-size: 1.05rem;
}

.cookie-consent-copy p {
    margin: 0;
    color: #d7cfdf;
    font-size: 0.9rem;
}

.cookie-consent-copy a {
    width: fit-content;
    color: var(--mws-primary);
    font-size: 0.84rem;
    font-weight: 800;
}

.cookie-consent-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.legal-main {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.legal-hero h1 {
    margin-bottom: 16px;
    font-family: var(--mws-font-display);
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    font-weight: 800;
    line-height: 0.98;
}

.legal-hero .lead-text {
    max-width: 72ch;
}

.legal-grid {
    padding-bottom: 36px;
}

.legal-jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -12px 0 28px;
}

.legal-jump-nav a {
    padding: 10px 15px;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    font-weight: 800;
}

.legal-grid-detailed {
    align-items: start;
}

.legal-card-wide {
    grid-column: 1 / -1;
}

.legal-card h3 {
    margin: 24px 0 8px;
    color: var(--mws-text);
    font-size: 1rem;
}

.legal-card-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--mws-primary);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.legal-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 24px 0;
    overflow: hidden;
    border: 1px solid rgba(var(--mws-primary-rgb), 0.14);
    border-radius: 18px;
    background: rgba(var(--mws-primary-rgb), 0.14);
}

.legal-details div {
    padding: 15px 18px;
    background: var(--mws-surface);
}

.legal-details dt {
    margin-bottom: 5px;
    color: var(--mws-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.legal-details dd {
    margin: 0;
    color: var(--mws-text);
    overflow-wrap: anywhere;
}

.legal-status-note {
    padding: 14px 16px;
    border-left: 3px solid var(--mws-primary);
    border-radius: 0 12px 12px 0;
    background: rgba(var(--mws-primary-rgb), 0.08);
}

.legal-card {
    min-height: 220px;
}

.legal-note-card {
    grid-column: 1 / -1;
    display: grid;
    gap: 16px;
}

.site-footer {
    display: grid;
    gap: 18px;
    padding: 0;
    color: var(--mws-muted);
    font-size: 0.92rem;
}

.site-footer a {
    font-weight: 800;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].is-visible,
[data-reveal]:target {
    opacity: 1;
    transform: translateY(0);
}

@keyframes floatA {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -12px, 0); }
}

@keyframes floatB {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, 14px, 0); }
}

@media (max-width: 1080px) {
    .hero,
    .about-section,
    .split-heading {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
    }

    .hero-visual {
        min-height: 440px;
    }

    .visual-card-main {
        left: 50%;
        right: auto;
        transform: translateX(-50%) rotate(1deg);
    }

    .service-grid,
    .process-list,
    .platform-grid,
    .legal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .gallery-card,
    .footer-grid-legal {
        grid-template-columns: 1fr;
    }

    .footer-grid-rich {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .cookie-consent {
        align-items: stretch;
        flex-direction: column;
    }

    .cookie-consent-actions {
        width: 100%;
    }

    .cookie-consent-actions .btn-mws {
        flex: 1;
    }

    .legal-details {
        grid-template-columns: 1fr;
    }

    .site-header {
        top: calc(var(--shell-pad) + var(--safe-top));
        width: min(100% - 20px, 1180px);
        border-radius: 24px;
    }

    .brand-copy small {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    .site-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 10px);
        display: grid;
        gap: 6px;
        padding: 12px;
        border: 1px solid var(--mws-border);
        border-radius: 24px;
        background: var(--mws-topbar-bg);
        box-shadow: var(--mws-shadow);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: 0.22s ease;
    }

    .site-header.is-open .site-menu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .site-menu a,
    .theme-toggle,
    .topbar-language-trigger {
        justify-content: flex-start;
        width: 100%;
        min-height: 48px;
    }

    .theme-toggle {
        justify-content: center;
    }

    .service-grid,
    .process-list,
    .contact-grid,
    .focus-demo-grid,
    .platform-grid,
    .legal-grid {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 380px;
    }

    .floating-card {
        display: none;
    }

    .site-language-group {
        width: 100%;
    }

    .topbar-language-menu {
        left: 0;
        right: auto;
        width: 100%;
    }

    .gallery-card,
    .footer-brand,
    .footer-brand-centered {
        grid-template-columns: 1fr;
    }

    .footer-topline,
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-pills {
        justify-content: flex-start;
    }

    .footer-grid-rich,
    .footer-grid-legal {
        grid-template-columns: 1fr;
    }

    .footer-nav a,
    .footer-links a,
    .footer-cta-link {
        width: 100%;
    }

    .footer-link-row {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .about-aside {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    .site-backdrop {
        inset: 10px;
        border-radius: 24px;
    }

    .site-backdrop-frame {
        inset: 12px;
    }

    .site-main,
    .site-footer {
        width: min(100% - 22px, 1180px);
    }

    .site-main {
        padding-top: 32px;
    }

    .section-pad {
        padding-block: 52px;
    }

    .hero h1 {
        font-size: clamp(2.35rem, 15vw, 4.1rem);
    }

    .brand-logo {
        height: 42px;
    }

    .hero-actions .btn-mws {
        width: 100%;
    }

    .focus-demo-card {
        min-height: 380px;
    }

    .focus-avatar {
        width: 112px;
    }

    .hero-visual {
        min-height: auto;
    }

    .visual-card-main {
        position: relative;
        inset: auto;
        width: 100%;
        transform: none;
    }

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

    .stat-card {
        grid-template-columns: 1fr;
    }

    .site-footer {
        gap: 14px;
    }

    .minimal-footer {
        padding: 20px;
    }

    .gallery-screen-shot {
        height: 188px;
    }
}

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

/* ================================================================
   MWS BACKUP FRONT UPGRADES V17
   ================================================================ */

/* Statistikkarten: Hintergrund und Blur bewusst entfernt. */
.stat-card.surface-card {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Hero App-Card als modernes Smartphone. */
.hero-visual {
    min-height: 660px;
}

.visual-card.visual-card-main {
    position: absolute;
    inset: 8px 44px auto auto;
    display: block;
    width: min(100%, 354px);
    min-height: 640px;
    padding: 7px;
    overflow: visible;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 54px;
    background: linear-gradient(150deg, #312b38, #0a070e 46%, #020103);
    box-shadow:
        0 46px 100px rgba(0,0,0,.48),
        0 0 72px rgba(var(--mws-primary-rgb), .14),
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 0 0 2px rgba(0,0,0,.45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: rotate(2.4deg);
}

.phone-screen {
    position: relative;
    display: grid;
    grid-template-rows: 38px minmax(0, 1fr) 22px;
    min-height: 624px;
    overflow: hidden;
    border-radius: 47px;
    background:
        radial-gradient(circle at 76% 12%, rgba(var(--mws-primary-rgb), .15), transparent 30%),
        linear-gradient(180deg, #0d0714, #08040d 64%, #050207);
}

.phone-status {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 7px 17px 0;
    color: rgba(255,255,255,.82);
    font-size: .56rem;
    font-weight: 850;
}

.phone-island {
    width: 92px;
    height: 24px;
    border-radius: 999px;
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.phone-signal {
    justify-self: end;
    font-size: .48rem;
}

.phone-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 11px 16px 8px;
}

.phone-content .store-card-head {
    margin-bottom: 10px;
}

.phone-content .store-icon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 0;
}

.phone-content .store-icon-tile {
    min-height: 101px;
    padding: 8px 5px;
    border-radius: 16px;
}

.phone-content .store-icon-shell {
    min-height: 50px;
}

.phone-content .store-icon-image {
    width: min(100%, 60px);
}

.phone-content .store-icon-label {
    font-size: .63rem;
}

.phone-content .store-card-meta {
    margin-top: auto;
    padding-top: 10px;
}

.phone-home-bar {
    align-self: center;
    justify-self: center;
    width: 112px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.76);
}

.phone-side {
    position: absolute;
    z-index: -1;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #3c3543, #09060c);
}

.phone-side-volume {
    top: 132px;
    left: -4px;
    height: 84px;
}

.phone-side-power {
    top: 166px;
    right: -4px;
    height: 72px;
}

html[data-theme="light"] .phone-screen {
    background:
        radial-gradient(circle at 76% 12%, rgba(var(--mws-primary-rgb), .12), transparent 30%),
        linear-gradient(180deg, #fdfcff, #f5effb 64%, #eee7f7);
}

html[data-theme="light"] .phone-status {
    color: rgba(33,22,46,.80);
}

html[data-theme="light"] .phone-island {
    background: #171119;
}

html[data-theme="light"] .phone-home-bar {
    background: rgba(33,22,46,.66);
}

/* Demo-Abschnitt als Tablet, die vorhandenen Demo-Links bleiben erhalten. */
.focus-tablet {
    position: relative;
    width: min(100%, 1080px);
    margin: 0 auto;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 38px;
    background: linear-gradient(150deg, #2a2530, #070509 72%);
    box-shadow:
        0 34px 78px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.focus-tablet-camera {
    position: absolute;
    top: 50%;
    left: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #050307;
    transform: translateY(-50%);
}

.focus-tablet-screen {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 27px;
    background:
        radial-gradient(circle at 70% 12%, rgba(var(--mws-primary-rgb), .13), transparent 30%),
        rgba(7,4,11,.92);
}

.focus-tablet-bar {
    display: flex;
    min-height: 42px;
    padding: 0 18px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: var(--mws-muted);
    font-size: .68rem;
    font-weight: 850;
}

.focus-tablet-status {
    color: #6ee7b7;
}

.focus-tablet .focus-demo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 18px;
}

.focus-tablet .focus-demo-card {
    min-height: 245px;
    border-radius: 18px;
}

html[data-theme="light"] .focus-tablet {
    border-color: rgba(49,27,78,.14);
    background: linear-gradient(150deg, #ece8ef, #aaa4ae 78%);
    box-shadow: 0 30px 68px rgba(49,27,78,.14);
}

html[data-theme="light"] .focus-tablet-screen {
    border-color: rgba(49,27,78,.08);
    background:
        radial-gradient(circle at 70% 12%, rgba(var(--mws-primary-rgb), .10), transparent 30%),
        #f9f6fc;
}

html[data-theme="light"] .focus-tablet-bar {
    border-color: rgba(49,27,78,.08);
}

/* Shop-Callout auf der Startseite. */
.shop-panel.surface-card {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 18px;
    overflow: hidden;
    border-color: rgba(var(--mws-primary-rgb), .24);
    background:
        linear-gradient(120deg, rgba(var(--mws-primary-rgb), .10), transparent 42%),
        color-mix(in srgb, var(--mws-surface) 88%, transparent);
}

.shop-panel.surface-card::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -110px;
    width: 260px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--mws-primary);
    opacity: .10;
    filter: blur(55px);
    pointer-events: none;
}

.shop-panel-icon {
    position: relative;
    z-index: 1;
}

.shop-panel-preview {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 28px);
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(var(--mws-primary-rgb), .16);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

.shop-panel-preview i {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(var(--mws-primary-rgb), .24), rgba(var(--mws-accent-rgb), .08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.shop-panel-preview i:nth-child(2) {
    background: linear-gradient(145deg, rgba(var(--mws-accent-rgb), .28), rgba(var(--mws-primary-rgb), .08));
}

.shop-panel-preview i:nth-child(3) {
    background: linear-gradient(145deg, rgba(52,211,153,.22), rgba(var(--mws-primary-rgb), .08));
}

/* Website-Galerie als PC-Monitor mit geöffnetem Browser. */
.gallery-browser {
    position: relative;
    margin: 0 4px 42px;
    padding: 8px;
    overflow: visible;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    background: linear-gradient(155deg, #2b2730, #080609 72%);
    box-shadow:
        0 28px 60px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.14);
}

.gallery-monitor-camera {
    position: absolute;
    top: 3px;
    left: 50%;
    z-index: 3;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #030204;
    transform: translateX(-50%);
}

.gallery-monitor-window {
    overflow: hidden;
    border-radius: 17px;
    background: #09060d;
}

.gallery-browser-top {
    display: flex;
    min-height: 38px;
    margin: 0;
    padding: 0 11px;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: #15111a;
}

.gallery-browser-address {
    flex: 1 1 auto;
    max-width: 410px;
    min-height: 24px;
    margin: 0 auto 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.04);
    font-size: .61rem;
    text-align: center;
}

.gallery-screen {
    min-height: 230px;
    border: 0;
    border-radius: 0;
}

.gallery-screen-shot {
    min-height: 230px;
    object-fit: cover;
    object-position: top center;
}

.gallery-monitor-neck,
.gallery-monitor-foot {
    position: absolute;
    left: 50%;
    display: block;
    transform: translateX(-50%);
    pointer-events: none;
}

.gallery-monitor-neck {
    bottom: -28px;
    width: 58px;
    height: 29px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, #17131b, #322d36 50%, #151117);
}

.gallery-monitor-foot {
    bottom: -37px;
    width: 148px;
    height: 11px;
    border-radius: 50% 50% 9px 9px;
    background: linear-gradient(180deg, #39333d, #0c090e);
    box-shadow: 0 8px 15px rgba(0,0,0,.28);
}

html[data-theme="light"] .gallery-browser {
    border-color: rgba(49,27,78,.14);
    background: linear-gradient(155deg, #eeebf1, #aaa4ae 78%);
    box-shadow: 0 24px 52px rgba(49,27,78,.14);
}

html[data-theme="light"] .gallery-browser-top {
    border-color: rgba(49,27,78,.08);
    background: #f3f0f5;
}

html[data-theme="light"] .gallery-browser-address {
    border-color: rgba(49,27,78,.08);
    color: rgba(33,22,46,.56);
    background: rgba(49,27,78,.04);
}

html[data-theme="light"] .gallery-monitor-neck {
    background: linear-gradient(90deg, #aaa4ae, #e4e0e7 50%, #9c969f);
}

html[data-theme="light"] .gallery-monitor-foot {
    background: linear-gradient(180deg, #d8d3db, #908a95);
}

@media (max-width: 900px) {
    .focus-tablet .focus-demo-grid {
        grid-template-columns: 1fr;
    }

    .focus-tablet .focus-demo-card {
        min-height: 0;
    }

    .shop-panel.surface-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .shop-panel-preview {
        display: none;
    }
}

@media (max-width: 560px) {
    .hero-visual {
        min-height: 610px;
    }

    .visual-card.visual-card-main {
        position: relative;
        inset: auto;
        width: min(100%, 330px);
        min-height: 590px;
        margin-inline: auto;
        border-radius: 48px;
        transform: none;
    }

    .phone-screen {
        min-height: 574px;
        border-radius: 41px;
    }

    .focus-tablet {
        padding: 8px;
        border-radius: 26px;
    }

    .focus-tablet-screen {
        border-radius: 19px;
    }

    .focus-tablet .focus-demo-grid {
        padding: 11px;
    }

    .gallery-browser {
        margin-inline: 0;
    }

    .gallery-screen,
    .gallery-screen-shot {
        min-height: 178px;
    }
}

/* ================================================================
   MWS SINGLE DEMO TABLET V18
   focus-tablet zeigt bewusst nur noch die eine öffentliche M-OS Demo.
   ================================================================ */

.focus-tablet-screen {
    min-height: 455px;
}

.focus-tablet-bar {
    position: relative;
    z-index: 3;
}

.focus-tablet-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.focus-tablet-brand > i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mws-primary), var(--mws-accent));
    box-shadow: 0 0 14px rgba(var(--mws-primary-rgb), .42);
}

.focus-demo-single {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(360px, 1.18fr);
    gap: clamp(28px, 5vw, 64px);
    min-height: 410px;
    padding: clamp(26px, 4.2vw, 48px);
    align-items: center;
    overflow: hidden;
    color: var(--mws-text);
    text-decoration: none;
    background:
        radial-gradient(circle at 78% 36%, rgba(var(--mws-primary-rgb), .15), transparent 35%),
        linear-gradient(120deg, rgba(var(--mws-primary-rgb), .07), transparent 42%);
}

.focus-demo-single::before {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -170px;
    width: 360px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--mws-primary);
    opacity: .10;
    filter: blur(80px);
    pointer-events: none;
}

.focus-demo-single-copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 15px;
    min-width: 0;
}

.focus-demo-single-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(var(--mws-primary-rgb), .24);
    border-radius: 18px;
    color: var(--mws-text);
    background:
        linear-gradient(145deg, rgba(var(--mws-primary-rgb), .18), rgba(var(--mws-accent-rgb), .05));
    box-shadow:
        0 16px 35px rgba(var(--mws-primary-rgb), .14),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.focus-demo-single-icon svg {
    width: 25px;
    height: 25px;
}

.focus-demo-single-text {
    display: grid;
    gap: 8px;
}

.focus-demo-single-text small {
    color: var(--mws-accent);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.focus-demo-single-text strong {
    max-width: 520px;
    font-family: var(--mws-font-display);
    font-size: clamp(1.85rem, 3.4vw, 3.2rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.045em;
}

.focus-demo-single-text > span {
    max-width: 530px;
    color: var(--mws-muted);
    font-size: .88rem;
    line-height: 1.62;
}

.focus-demo-single-points {
    display: flex;
    gap: 6px;
}

.focus-demo-single-points i {
    display: block;
    width: 28px;
    height: 5px;
    border-radius: 999px;
    background: rgba(var(--mws-primary-rgb), .17);
}

.focus-demo-single-points i:first-child {
    width: 52px;
    background: linear-gradient(90deg, var(--mws-primary), var(--mws-accent));
}

.focus-demo-single-link {
    display: inline-flex;
    width: max-content;
    min-height: 44px;
    margin-top: 2px;
    padding: 0 15px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(var(--mws-primary-rgb), .28);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--mws-primary), var(--mws-accent));
    box-shadow: 0 13px 28px rgba(var(--mws-primary-rgb), .22);
    font-size: .76rem;
    font-weight: 900;
    transition: transform .22s ease, box-shadow .22s ease;
}

.focus-demo-single:hover .focus-demo-single-link {
    transform: translateY(-2px);
    box-shadow: 0 17px 34px rgba(var(--mws-primary-rgb), .28);
}

.focus-demo-single-preview {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    width: 100%;
    min-height: 285px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    background:
        radial-gradient(circle at 74% 18%, rgba(var(--mws-primary-rgb), .12), transparent 34%),
        #09060d;
    box-shadow:
        0 28px 58px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.06);
    transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
    transition: transform .32s ease;
}

.focus-demo-single:hover .focus-demo-single-preview {
    transform: perspective(900px) rotateY(-1deg) rotateX(0deg) translateY(-3px);
}

.focus-preview-sidebar {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 20px 13px;
    border-right: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
}

.focus-preview-sidebar i {
    display: block;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    background: rgba(255,255,255,.075);
}

.focus-preview-sidebar i.is-active {
    background: linear-gradient(135deg, var(--mws-primary), var(--mws-accent));
    box-shadow: 0 8px 18px rgba(var(--mws-primary-rgb), .24);
}

.focus-preview-workspace {
    display: grid;
    grid-template-rows: 42px auto 1fr auto;
    gap: 14px;
    padding: 0 16px 15px;
}

.focus-preview-topbar {
    display: flex;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

.focus-preview-topbar i,
.focus-preview-topbar span,
.focus-preview-topbar b {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
}

.focus-preview-topbar i {
    width: 56px;
}

.focus-preview-topbar span {
    width: 32px;
    margin-left: auto;
}

.focus-preview-topbar b {
    width: 17px;
}

.focus-preview-heading {
    display: grid;
    gap: 7px;
}

.focus-preview-heading strong,
.focus-preview-heading i {
    display: block;
    border-radius: 999px;
}

.focus-preview-heading strong {
    width: 48%;
    height: 12px;
    background: rgba(255,255,255,.75);
}

.focus-preview-heading i {
    width: 68%;
    height: 6px;
    background: rgba(255,255,255,.09);
}

.focus-preview-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.focus-preview-cards i {
    display: block;
    min-height: 67px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), transparent),
        rgba(255,255,255,.018);
}

.focus-preview-cards i:nth-child(2) {
    background:
        linear-gradient(145deg, rgba(var(--mws-primary-rgb), .17), transparent),
        rgba(255,255,255,.018);
}

.focus-preview-dock {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding-top: 3px;
}

.focus-preview-dock i {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(255,255,255,.07);
}

.focus-preview-dock i:nth-child(3) {
    background: linear-gradient(135deg, var(--mws-primary), var(--mws-accent));
}

html[data-theme="light"] .focus-demo-single {
    background:
        radial-gradient(circle at 78% 36%, rgba(var(--mws-primary-rgb), .10), transparent 35%),
        linear-gradient(120deg, rgba(var(--mws-primary-rgb), .05), transparent 42%);
}

html[data-theme="light"] .focus-demo-single-preview {
    border-color: rgba(49,27,78,.09);
    background:
        radial-gradient(circle at 74% 18%, rgba(var(--mws-primary-rgb), .09), transparent 34%),
        #f8f5fc;
    box-shadow:
        0 24px 50px rgba(49,27,78,.13),
        inset 0 1px 0 rgba(255,255,255,.8);
}

html[data-theme="light"] .focus-preview-sidebar {
    border-color: rgba(49,27,78,.08);
    background: rgba(49,27,78,.035);
}

html[data-theme="light"] .focus-preview-topbar {
    border-color: rgba(49,27,78,.07);
}

html[data-theme="light"] .focus-preview-topbar i,
html[data-theme="light"] .focus-preview-topbar span,
html[data-theme="light"] .focus-preview-topbar b,
html[data-theme="light"] .focus-preview-heading i {
    background: rgba(49,27,78,.10);
}

html[data-theme="light"] .focus-preview-heading strong {
    background: rgba(33,22,46,.72);
}

html[data-theme="light"] .focus-preview-cards i {
    border-color: rgba(49,27,78,.08);
    background:
        linear-gradient(145deg, rgba(124,58,237,.055), transparent),
        rgba(255,255,255,.64);
}

html[data-theme="light"] .focus-preview-dock i {
    background: rgba(49,27,78,.08);
}

@media (max-width: 860px) {
    .focus-demo-single {
        grid-template-columns: 1fr;
    }

    .focus-demo-single-preview {
        width: min(100%, 620px);
        margin-inline: auto;
        transform: none;
    }
}

@media (max-width: 560px) {
    .focus-tablet-screen {
        min-height: 0;
    }

    .focus-demo-single {
        min-height: 0;
        padding: 22px 17px 18px;
    }

    .focus-demo-single-text strong {
        font-size: clamp(1.85rem, 10vw, 2.7rem);
    }

    .focus-demo-single-preview {
        grid-template-columns: 43px minmax(0, 1fr);
        min-height: 225px;
        border-radius: 16px;
    }

    .focus-preview-sidebar {
        padding: 15px 8px;
    }

    .focus-preview-sidebar i {
        width: 25px;
        height: 25px;
    }

    .focus-preview-workspace {
        gap: 10px;
        padding: 0 10px 10px;
    }

    .focus-preview-cards i {
        min-height: 49px;
    }

    .focus-preview-dock i {
        width: 20px;
        height: 20px;
    }
}



/* ================================================================
   MWS SHOP PANEL THEME ICON V21
   ================================================================ */

.shop-panel-icon .shop-panel-icon-dark {
    display: block !important;
    opacity: 1;
    visibility: visible;
}

.shop-panel-icon .shop-panel-icon-light {
    display: none !important;
    opacity: 0;
    visibility: hidden;
}

html[data-theme="light"] .shop-panel-icon .shop-panel-icon-dark {
    display: none !important;
    opacity: 0;
    visibility: hidden;
}

html[data-theme="light"] .shop-panel-icon .shop-panel-icon-light {
    display: block !important;
    opacity: 1;
    visibility: visible;
}

/* ================================================================
   MWS HOME USER DASHBOARD PREVIEW V24 SAFE
   ================================================================ */

.home-mos-preview.visual-card-main {
    min-height: 640px;
}

.home-mos-screen.phone-screen {
    position: relative;
    grid-template-rows: 38px minmax(0, 1fr) 22px;
}

.home-mos-status {
    position: relative;
    z-index: 20;
}

.home-mos-dashboard {
    position: relative;
    min-height: 0;
    padding: 8px 10px 9px;
}

.home-mos-topbar-slot {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 30;
}

.home-mos-topbar {
    position: relative;
    display: grid;
    width: 50px;
    min-height: 50px;
    place-items: center;
    border: 1px solid rgba(var(--mws-primary-rgb), .18);
    border-radius: 19px;
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 13px 30px rgba(0,0,0,.22);
}

.home-mos-profile-toggle {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(var(--mws-primary-rgb), .24);
    border-radius: 50%;
    color: var(--mws-text);
    background: linear-gradient(145deg, rgba(var(--mws-primary-rgb), .18), rgba(var(--mws-accent-rgb), .06));
    box-shadow: 0 8px 18px rgba(0,0,0,.16);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.home-mos-profile-toggle:hover,
.home-mos-topbar.is-open .home-mos-profile-toggle {
    border-color: rgba(var(--mws-primary-rgb), .56);
    box-shadow: 0 0 0 3px rgba(var(--mws-primary-rgb), .10), 0 10px 22px rgba(0,0,0,.20);
    transform: translateY(-1px);
}

.home-mos-profile-avatar {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

.home-mos-profile-avatar svg {
    width: 18px;
    height: 18px;
}

.home-mos-profile-menu {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 40;
    display: grid;
    gap: 5px;
    width: 202px;
    padding: 8px;
    border: 1px solid rgba(var(--mws-primary-rgb), .18);
    border-radius: 16px;
    color: var(--mws-text);
    background: #100918;
    box-shadow: 0 25px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}

.home-mos-profile-menu[hidden] {
    display: none !important;
}

.home-mos-search {
    display: grid;
    grid-template-columns: 25px minmax(0,1fr);
    min-height: 36px;
    padding: 0 7px;
    align-items: center;
    border: 1px solid rgba(var(--mws-primary-rgb), .14);
    border-radius: 10px;
    color: var(--mws-muted);
    background: rgba(255,255,255,.045);
}

.home-mos-search > span,
.home-mos-menu-button > span:first-child {
    display: grid;
    place-items: center;
}

.home-mos-search svg,
.home-mos-menu-button svg {
    width: 15px;
    height: 15px;
}

.home-mos-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--mws-text);
    background: transparent;
    font-size: .60rem;
}

.home-mos-search input::placeholder {
    color: var(--mws-soft);
}

.home-mos-menu-button {
    display: grid;
    grid-template-columns: 25px minmax(0,1fr);
    min-height: 34px;
    padding: 0 7px;
    align-items: center;
    border: 0;
    border-radius: 9px;
    color: var(--mws-muted);
    background: transparent;
    font-size: .59rem;
    font-weight: 800;
    text-align: left;
    cursor: default;
}

.home-mos-menu-button:hover,
.home-mos-menu-button.is-preview-active {
    color: var(--mws-text);
    background: rgba(var(--mws-primary-rgb), .09);
}

.home-mos-menu-button-muted {
    opacity: .68;
}

html[data-theme="light"] .home-mos-topbar {
    border-color: rgba(49,27,78,.12);
    background: rgba(255,255,255,.55);
}

html[data-theme="light"] .home-mos-profile-menu {
    border-color: rgba(49,27,78,.12);
    background: #fff;
    box-shadow: 0 22px 50px rgba(49,27,78,.18);
}

html[data-theme="light"] .home-mos-search {
    border-color: rgba(49,27,78,.10);
    background: rgba(49,27,78,.035);
}

.home-mos-workspace {
    position: relative;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(var(--mws-primary-rgb), .14);
    border-radius: 24px;
    background:
        radial-gradient(120% 52% at 50% -8%, rgba(var(--mws-primary-rgb), .17), transparent 58%),
        radial-gradient(110% 46% at 18% 26%, rgba(var(--mws-accent-rgb), .08), transparent 60%),
        radial-gradient(118% 50% at 82% 72%, rgba(var(--mws-primary-rgb), .09), transparent 62%),
        rgba(255,255,255,.025);
}

.home-mos-workspace-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.042) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.042) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.16));
    pointer-events: none;
}

.home-mos-workspace-frame {
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(var(--mws-primary-rgb), .15);
    border-radius: 18px;
    pointer-events: none;
}

.home-mos-workspace-frame::before,
.home-mos-workspace-frame::after {
    content: "";
    position: absolute;
    width: 62px;
    height: 62px;
    border-color: rgba(var(--mws-primary-rgb), .36);
    border-style: solid;
}

.home-mos-workspace-frame::before {
    top: -1px;
    left: -1px;
    border-width: 1px 0 0 1px;
    border-radius: 18px 0 0 0;
}

.home-mos-workspace-frame::after {
    right: -1px;
    bottom: -1px;
    border-width: 0 1px 1px 0;
    border-radius: 0 0 18px 0;
}

html[data-theme="light"] .home-mos-workspace {
    background:
        radial-gradient(120% 52% at 50% -8%, rgba(var(--mws-primary-rgb), .11), transparent 58%),
        radial-gradient(110% 46% at 18% 26%, rgba(var(--mws-accent-rgb), .055), transparent 60%),
        radial-gradient(118% 50% at 82% 72%, rgba(var(--mws-primary-rgb), .06), transparent 62%),
        rgba(255,255,255,.54);
}

html[data-theme="light"] .home-mos-workspace-grid {
    background:
        linear-gradient(rgba(70,42,104,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(70,42,104,.05) 1px, transparent 1px);
    background-size: 28px 28px;
}

.home-mos-launcher {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 100%;
    height: 100%;
    padding: 17px 13px 16px;
    flex-direction: column;
}

.home-mos-launcher-head {
    display: grid;
    gap: 2px;
    max-width: calc(100% - 62px);
    padding: 4px 4px 0;
}

.home-mos-launcher-kicker {
    color: var(--mws-accent);
    font-size: .50rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.home-mos-launcher-head strong {
    color: var(--mws-text);
    font-family: var(--mws-font-display);
    font-size: .86rem;
    letter-spacing: -.02em;
}

.home-mos-launcher-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px 7px;
    margin-top: 22px;
    align-content: start;
}

.home-mos-launcher-app {
    display: grid;
    min-height: 122px;
    padding: 6px 4px 5px;
    gap: 5px;
    justify-items: center;
    align-content: start;
    border: 0;
    border-radius: 18px;
    color: var(--mws-text);
    background: transparent;
    text-align: center;
    cursor: default;
    transition: transform .20s ease, background .20s ease;
}

.home-mos-launcher-app:hover,
.home-mos-launcher-app.is-preview-active {
    background: rgba(255,255,255,.04);
    transform: translateY(-3px);
}

.home-mos-launcher-app[hidden] {
    display: none !important;
}

.home-mos-app-image-wrap {
    display: inline-grid;
    width: 73px;
    aspect-ratio: 1;
    place-items: center;
}

.home-mos-app-image {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.20));
}

.home-mos-app-light {
    display: none;
}

html[data-theme="light"] .home-mos-app-dark {
    display: none;
}

html[data-theme="light"] .home-mos-app-light {
    display: block;
}

.home-mos-security-icon {
    border: 1px solid rgba(var(--mws-primary-rgb), .18);
    border-radius: 24px;
    color: var(--mws-text);
    background: linear-gradient(145deg, rgba(var(--mws-primary-rgb), .22), rgba(var(--mws-accent-rgb), .07));
    box-shadow: 0 12px 20px rgba(0,0,0,.16);
}

.home-mos-security-icon svg {
    width: 42px;
    height: 42px;
}

.home-mos-app-title {
    max-width: 120px;
    overflow: hidden;
    color: var(--mws-text);
    font-size: .60rem;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .home-mos-preview.visual-card-main {
        min-height: 590px;
    }

    .home-mos-dashboard {
        padding-inline: 8px;
    }

    .home-mos-launcher {
        padding-inline: 11px;
    }

    .home-mos-launcher-grid {
        margin-top: 16px;
    }

    .home-mos-launcher-app {
        min-height: 108px;
    }

    .home-mos-app-image-wrap {
        width: 64px;
    }

    .home-mos-profile-menu {
        width: 190px;
    }
}

/* ================================================================
   MWS HOME POLISH V25
   ================================================================ */

.service-card.surface-card {
    background: transparent !important;
}

.home-mos-topbar-slot {
    top: 13px;
    right: 13px;
}

.home-mos-topbar.topbar-profile {
    --home-topbar-size: 38px;
    position: relative;
    display: flex;
    width: auto;
    max-width: 292px;
    min-height: 50px;
    padding: 5px;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    overflow: visible;
    border: 1px solid rgba(var(--mws-primary-rgb), .18);
    border-radius: 999px;
    background: rgba(255,255,255,.052);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 13px 30px rgba(0,0,0,.22);
    transition: border-color .22s ease, box-shadow .22s ease;
}

.home-mos-topbar.is-open {
    border-color: rgba(var(--mws-primary-rgb), .30);
    box-shadow: 0 0 0 1px rgba(var(--mws-primary-rgb), .07), 0 14px 34px rgba(0,0,0,.24);
}

.home-mos-profile-toggle.topbar-profile-toggle {
    position: relative;
    z-index: 2;
    flex: 0 0 var(--home-topbar-size);
    width: var(--home-topbar-size);
    min-width: var(--home-topbar-size);
    height: var(--home-topbar-size);
    min-height: var(--home-topbar-size);
}

.home-mos-profile-avatar.topbar-profile-avatar {
    display: grid;
    place-items: center;
}

.home-mos-profile-avatar svg {
    width: 18px;
    height: 18px;
}

.home-mos-profile-menu.topbar-profile-menu {
    order: -1;
    display: flex;
    width: auto;
    min-width: 0;
    max-width: 0;
    margin-right: 0;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(9px);
    transition:
        max-width .30s cubic-bezier(.22,1,.36,1),
        margin-right .30s cubic-bezier(.22,1,.36,1),
        opacity .16s ease,
        transform .26s ease,
        visibility 0s linear .30s;
}

.home-mos-topbar.is-open .home-mos-profile-menu {
    max-width: 238px;
    margin-right: 5px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition:
        max-width .32s cubic-bezier(.22,1,.36,1),
        margin-right .32s cubic-bezier(.22,1,.36,1),
        opacity .18s ease .04s,
        transform .26s ease,
        visibility 0s;
}

.home-mos-topbar-button {
    display: inline-flex;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--mws-primary-rgb), .14);
    border-radius: 999px;
    color: var(--mws-text);
    background: rgba(255,255,255,.038);
    cursor: pointer;
    transition: .2s ease;
}

.home-mos-topbar-button:hover,
.home-mos-topbar-button.is-preview-active {
    border-color: rgba(var(--mws-primary-rgb), .34);
    background: rgba(var(--mws-primary-rgb), .11);
    transform: translateY(-1px);
}

.home-mos-topbar-button svg {
    width: 15px;
    height: 15px;
}

.home-mos-logout-button {
    color: #ff9bad;
}

.home-mos-search.topbar-search {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    border: 1px solid rgba(var(--mws-primary-rgb), .14);
    border-radius: 999px;
    background: rgba(255,255,255,.038);
    overflow: hidden;
    transition: width .24s ease;
}

.home-mos-search.is-expanded {
    width: 118px;
}

.home-mos-search-toggle {
    border: 0;
    background: transparent;
}

.home-mos-search-field {
    min-width: 0;
}

.home-mos-search-field input {
    width: 78px;
    min-height: 32px;
    padding: 0 6px 0 0;
    border: 0;
    outline: 0;
    color: var(--mws-text);
    background: transparent;
    font-size: .52rem;
}

.home-mos-theme-icon {
    display: grid;
    place-items: center;
}

.home-mos-theme-sun {
    display: none;
}

html[data-theme="light"] .home-mos-theme-moon {
    display: none;
}

html[data-theme="light"] .home-mos-theme-sun {
    display: grid;
}

html[data-theme="light"] .home-mos-topbar.topbar-profile,
html[data-theme="light"] .home-mos-topbar-button,
html[data-theme="light"] .home-mos-search.topbar-search {
    background: rgba(255,255,255,.70);
}

.home-mos-security-tile {
    display: grid;
    width: 73px;
    height: 73px;
    place-items: center;
    border: 1px solid rgba(var(--mws-primary-rgb), .26);
    border-radius: 20px;
    color: #d8b4fe;
    background:
        radial-gradient(circle at 74% 18%, rgba(var(--mws-accent-rgb), .18), transparent 31%),
        linear-gradient(145deg, #0b0714, #171028);
    box-shadow: 0 12px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}

.home-mos-security-tile svg {
    width: 38px;
    height: 38px;
}

html[data-theme="light"] .home-mos-security-tile {
    color: #7c3aed;
    background:
        radial-gradient(circle at 74% 18%, rgba(168,85,247,.12), transparent 31%),
        linear-gradient(145deg, #fff, #f7f2ff);
}

.focus-demo-section .split-heading {
    align-items: end;
}

.focus-demo-single {
    grid-template-columns: minmax(0,.88fr) minmax(350px,1.12fr);
}

.focus-demo-single-text strong {
    font-size: clamp(1.75rem, 3.1vw, 2.9rem);
}

.focus-preview-app-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
}

.focus-preview-app-grid > span {
    display: grid;
    min-height: 54px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}

.focus-preview-app-grid img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.focus-preview-shield {
    color: #d8b4fe;
}

.focus-preview-shield svg {
    width: 28px;
    height: 28px;
}

.focus-preview-device-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.focus-preview-device-row i {
    display: block;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;
    background: rgba(255,255,255,.035);
}

.focus-preview-device-row i:nth-child(1) { width: 34px; height: 20px; }
.focus-preview-device-row i:nth-child(2) { width: 17px; height: 24px; }
.focus-preview-device-row i:nth-child(3) { width: 11px; height: 21px; border-radius: 5px; }

html[data-theme="light"] .focus-preview-app-grid > span {
    border-color: rgba(49,27,78,.08);
    background: rgba(255,255,255,.65);
}

html[data-theme="light"] .focus-preview-shield {
    color: #7c3aed;
}

@media (max-width: 560px) {
    .home-mos-topbar.topbar-profile {
        max-width: 278px;
    }

    .home-mos-topbar.is-open .home-mos-profile-menu {
        max-width: 224px;
    }

    .home-mos-search.is-expanded {
        width: 94px;
    }

    .home-mos-search-field input {
        width: 55px;
    }

    .focus-demo-single {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   MWS HOME RESPONSIVE DEVICE PASS V26
   Public start page only. M-OS preview internals intentionally untouched.
   ================================================================ */

@media (min-width: 1181px) {
    .home-page .site-header,
    .home-page .site-main,
    .home-page .site-footer {
        width: min(1240px, calc(100% - 44px));
    }

    .home-page .hero {
        grid-template-columns: minmax(0, 1fr) minmax(430px, .76fr);
        gap: clamp(54px, 6vw, 94px);
    }

    .home-page .service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .home-page .hero {
        grid-template-columns: minmax(0, .95fr) minmax(360px, .78fr);
        gap: 38px;
    }

    .home-page .hero h1 {
        font-size: clamp(2.75rem, 7vw, 5.4rem);
    }

    .home-page .service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablet/phone header becomes a dashboard-like expanding topbar. */
@media (max-width: 900px) {
    .home-page .site-header {
        top: calc(8px + var(--safe-top));
        display: flex;
        min-height: 62px;
        width: min(100% - 16px, 860px);
        padding: 7px;
        gap: 6px;
        justify-content: flex-end;
        border-radius: 999px;
        overflow: visible;
    }

    .home-page .brand {
        order: 0;
        flex: 0 0 48px;
        width: 48px;
        min-width: 48px;
        height: 48px;
        margin-right: auto;
        justify-content: center;
    }

    .home-page .brand-logo {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

    .home-page .brand-copy {
        display: none;
    }

    .home-page .nav-toggle {
        order: 2;
        display: grid;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0 12px;
        place-content: center;
        border: 1px solid rgba(var(--mws-primary-rgb), .22);
        border-radius: 50%;
        background: rgba(255,255,255,.045);
        box-shadow: 0 8px 20px rgba(0,0,0,.15);
    }

    .home-page .site-menu {
        position: static;
        order: 1;
        display: flex;
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        max-width: 0;
        height: 46px;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        border: 0;
        border-radius: 999px;
        background: transparent;
        box-shadow: none;
        opacity: 0;
        transform: translateX(12px);
        pointer-events: none;
        scrollbar-width: none;
        transition:
            max-width .32s cubic-bezier(.22,1,.36,1),
            opacity .18s ease,
            transform .26s ease;
    }

    .home-page .site-menu::-webkit-scrollbar { display: none; }

    .home-page .site-header.is-open .site-menu {
        max-width: calc(100vw - 126px);
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

    .home-page .site-menu > a,
    .home-page .site-menu > .topbar-language-group,
    .home-page .site-menu > .theme-toggle {
        flex: 0 0 auto;
        width: auto;
    }

    .home-page .site-menu a,
    .home-page .topbar-language-trigger,
    .home-page .theme-toggle {
        width: auto;
        min-height: 38px;
        padding: 0 10px;
        justify-content: center;
        border: 1px solid rgba(var(--mws-primary-rgb), .12);
        background: rgba(255,255,255,.035);
        font-size: .72rem;
        white-space: nowrap;
    }

    .home-page .theme-toggle {
        width: 38px;
        min-width: 38px;
        padding: 0;
    }

    .home-page .site-language-group {
        width: auto;
    }

    .home-page .topbar-language-trigger {
        width: 48px;
        min-width: 48px;
        padding: 0 7px;
        gap: 2px;
    }

    .home-page .topbar-language-current { min-width: 0; }

    .home-page .topbar-language-menu {
        position: fixed;
        top: calc(72px + var(--safe-top));
        right: 14px;
        left: auto;
        z-index: 120;
        width: 74px;
    }

    .home-page .hero {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 28px;
        padding-top: 24px;
    }

    .home-page .hero-copy {
        max-width: 760px;
    }

    .home-page .hero-visual {
        width: min(100%, 560px);
        min-height: 610px;
        margin-inline: auto;
    }

    .home-page .section-pad {
        padding-block: clamp(44px, 8vw, 76px);
    }

    .home-page .split-heading {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .home-page .service-grid,
    .home-page .platform-grid,
    .home-page .gallery-card,
    .home-page .contact-grid {
        grid-template-columns: 1fr;
    }

    .home-page .service-card {
        min-height: 0;
    }
}

@media (max-width: 620px) {
    .home-page .site-header {
        min-height: 58px;
        padding: 6px;
    }

    .home-page .brand {
        flex-basis: 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .home-page .brand-logo {
        width: 40px;
        height: 40px;
    }

    .home-page .nav-toggle {
        flex-basis: 40px;
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    .home-page .site-menu {
        height: 42px;
    }

    .home-page .site-header.is-open .site-menu {
        max-width: calc(100vw - 112px);
    }

    .home-page .site-menu a,
    .home-page .topbar-language-trigger,
    .home-page .theme-toggle {
        min-height: 36px;
        font-size: .68rem;
    }

    .home-page .site-menu a {
        padding-inline: 9px;
    }

    .home-page .hero h1 {
        font-size: clamp(2.45rem, 15vw, 4.25rem);
        line-height: .96;
    }

    .home-page .lead-text {
        font-size: 1rem;
    }

    .home-page .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 24px;
    }

    .home-page .hero-actions .btn-mws {
        width: 100%;
    }

    .home-page .hero-tags {
        gap: 7px;
    }

    .home-page .hero-tags span {
        padding: 6px 9px;
        font-size: .72rem;
    }

    .home-page .hero-visual {
        min-height: 590px;
    }

    .home-page .site-main,
    .home-page .site-footer {
        width: calc(100% - 20px);
    }

    .home-page .section-heading h2,
    .home-page .about-panel h2,
    .home-page .contact-panel h2 {
        font-size: clamp(1.85rem, 10vw, 3rem);
    }

    .home-page .service-card,
    .home-page .platform-card,
    .home-page .about-panel,
    .home-page .contact-panel {
        padding: 18px;
    }
}

@media (max-width: 390px) {
    .home-page .site-menu a { padding-inline: 8px; }
    .home-page .site-header.is-open .site-menu { max-width: calc(100vw - 108px); }
    .home-page .hero-visual { min-height: 560px; }
}



/* ================================================================
   MWS HOME FINAL TOPBAR V30
   Öffnungs-/Schließverhalten entspricht /user/dashboard topbar.
   ================================================================ */
.home-mos-topbar.topbar-profile {
    --home-topbar-size: 38px;
    display: flex;
    width: auto;
    max-width: calc(100% - 8px);
    min-height: 50px;
    padding: 5px;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    overflow: visible;
    border-radius: 999px;
}

.home-mos-profile-toggle.topbar-profile-toggle {
    order: 2;
    flex: 0 0 var(--home-topbar-size);
    width: var(--home-topbar-size);
    min-width: var(--home-topbar-size);
    height: var(--home-topbar-size);
    min-height: var(--home-topbar-size);
}

.home-mos-profile-menu.topbar-profile-menu {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
    max-width: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(12px);
    transform-origin: right center;
    transition:
        max-width .30s cubic-bezier(.22, 1, .36, 1),
        margin-right .30s cubic-bezier(.22, 1, .36, 1),
        opacity .16s ease,
        transform .26s ease,
        visibility 0s linear .30s;
}

.home-mos-profile-menu > * {
    flex: 0 0 auto;
}

.home-mos-topbar.is-open .home-mos-profile-menu {
    max-width: min(238px, calc(100% - 45px));
    margin-right: 5px;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition:
        max-width .32s cubic-bezier(.22, 1, .36, 1),
        margin-right .32s cubic-bezier(.22, 1, .36, 1),
        opacity .18s ease .05s,
        transform .26s ease,
        visibility 0s;
}

.home-mos-search.topbar-search {
    grid-template-columns: 34px minmax(0,1fr);
    width: 34px;
    min-width: 34px;
    min-height: 34px;
}

.home-mos-search.topbar-search.is-open {
    width: 118px;
}

.home-mos-search.topbar-search.is-open .topbar-search-field {
    max-width: 84px;
    padding: 0 7px 0 4px;
    opacity: 1;
    pointer-events: auto;
}

.home-mos-search.topbar-search .topbar-search-field {
    max-width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.home-mos-search-input.topbar-search-input {
    width: 74px;
    font-size: .52rem;
}

.home-mos-security-icon,
.home-mos-security-tile {
    display: none !important;
}

@media (max-width:560px) {
    .home-mos-topbar.is-open .home-mos-profile-menu {
        max-width: min(224px, calc(100% - 42px));
    }

    .home-mos-search.topbar-search.is-open {
        width: 92px;
    }

    .home-mos-search-input.topbar-search-input {
        width: 50px;
    }
}


/* ================================================================
   MWS HOME FINAL V32
   Home M-OS preview mirrors the original dashboard topbar.
   Mobile public site-header expands horizontally to the left.
   ================================================================ */

/* Original /user/dashboard topbar proportions inside the home preview */
.home-mos-topbar.topbar-profile {
    --home-topbar-size: 44px;
    width: auto;
    max-width: calc(100% - 4px);
    min-height: 58px;
    padding: 7px;
    gap: 0;
    justify-content: flex-end;
    overflow: visible;
    border: 1px solid var(--mws-border);
    border-radius: 999px;
    background: var(--mws-topbar-bg);
    box-shadow: var(--mws-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.home-mos-profile-toggle.topbar-profile-toggle {
    order: 2;
    flex: 0 0 var(--home-topbar-size);
    width: var(--home-topbar-size);
    min-width: var(--home-topbar-size);
    height: var(--home-topbar-size);
    min-height: var(--home-topbar-size);
    border-color: rgba(var(--mws-primary-rgb), .24);
    background: rgba(255,255,255,.045);
    box-shadow: 0 8px 20px rgba(0,0,0,.16);
}

.home-mos-profile-avatar.topbar-profile-avatar svg {
    width: 21px;
    height: 21px;
}

.home-mos-profile-menu.topbar-profile-menu {
    order: 1;
    gap: 10px;
    max-width: 0;
    margin-right: 0;
    transform: translateX(12px);
}

.home-mos-topbar.is-open .home-mos-profile-menu {
    max-width: min(680px, calc(100% - 54px));
    margin-right: 10px;
}

.home-mos-topbar-button,
.home-mos-theme-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border: 1px solid rgba(var(--mws-primary-rgb), .16);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
}

.home-mos-search.topbar-search {
    grid-template-columns: 44px minmax(0,1fr);
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    border-color: rgba(var(--mws-primary-rgb), .16);
    background: rgba(255,255,255,.04);
}

.home-mos-search.topbar-search.is-open,
.home-mos-search.topbar-search.is-expanded {
    width: min(100%, 148px);
}

.home-mos-search.topbar-search.is-open .topbar-search-field,
.home-mos-search.topbar-search.is-expanded .topbar-search-field {
    max-width: 100px;
    padding: 0 10px 0 6px;
}

.home-mos-search-input.topbar-search-input {
    width: 88px;
    font-size: .54rem;
}

.home-mos-topbar-button svg,
.home-mos-theme-toggle svg,
.home-mos-search-toggle svg {
    width: 18px;
    height: 18px;
}

/* Mobile landing navigation — same horizontal reveal behavior as dashboard top-nav */
@media (max-width: 900px) {
    .home-page .site-header {
        top: calc(8px + var(--safe-top));
        display: flex;
        width: auto;
        max-width: calc(100vw - 16px);
        min-height: 58px;
        margin-left: auto;
        margin-right: 8px;
        padding: 7px;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        border-radius: 999px;
        overflow: visible;
        transition:
            border-color .22s ease,
            box-shadow .22s ease,
            max-width .32s cubic-bezier(.22,1,.36,1);
    }

    .home-page .site-header.is-open {
        border-color: rgba(var(--mws-primary-rgb), .28);
        box-shadow: var(--mws-shadow), 0 0 0 1px rgba(var(--mws-primary-rgb), .08);
    }

    .home-page .brand {
        order: 2;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        margin: 0 7px 0 0;
        justify-content: center;
        overflow: hidden;
        border: 1px solid rgba(var(--mws-primary-rgb), .18);
        border-radius: 50%;
        background: rgba(255,255,255,.035);
    }

    .home-page .brand-logo {
        width: 38px;
        height: 38px;
    }

    .home-page .brand-copy {
        display: none;
    }

    .home-page .nav-toggle {
        position: relative;
        z-index: 3;
        order: 3;
        display: grid;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        place-content: center;
        border: 1px solid rgba(var(--mws-primary-rgb), .24);
        border-radius: 50%;
        background: rgba(255,255,255,.045);
        box-shadow: 0 8px 20px rgba(0,0,0,.16);
    }

    .home-page .site-menu {
        position: static;
        order: 1;
        display: flex;
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        max-width: 0;
        height: 44px;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        overflow: hidden;
        border: 0;
        border-radius: 999px;
        background: transparent;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(12px);
        transform-origin: right center;
        transition:
            max-width .32s cubic-bezier(.22,1,.36,1),
            margin-right .32s cubic-bezier(.22,1,.36,1),
            opacity .18s ease,
            transform .26s ease,
            visibility 0s linear .32s;
    }

    .home-page .site-header.is-open .site-menu {
        max-width: min(660px, calc(100vw - 118px));
        margin-right: 7px;
        overflow-x: auto;
        overflow-y: visible;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        scrollbar-width: none;
        transition:
            max-width .32s cubic-bezier(.22,1,.36,1),
            margin-right .32s cubic-bezier(.22,1,.36,1),
            opacity .18s ease .04s,
            transform .26s ease,
            visibility 0s;
    }

    .home-page .site-header.is-open .site-menu::-webkit-scrollbar {
        display: none;
    }

    .home-page .site-menu > a,
    .home-page .site-menu > .topbar-language-group,
    .home-page .site-menu > .theme-toggle {
        flex: 0 0 auto;
        width: auto;
    }

    .home-page .site-menu a,
    .home-page .topbar-language-trigger,
    .home-page .theme-toggle {
        width: auto;
        min-height: 38px;
        padding: 0 10px;
        justify-content: center;
        border: 1px solid rgba(var(--mws-primary-rgb), .13);
        border-radius: 999px;
        background: rgba(255,255,255,.035);
        font-size: .68rem;
        white-space: nowrap;
    }

    .home-page .theme-toggle {
        width: 38px;
        min-width: 38px;
        padding: 0;
    }

    .home-page .site-language-group {
        width: auto;
    }

    .home-page .topbar-language-trigger {
        width: 48px;
        min-width: 48px;
        padding: 0 7px;
    }

    .home-page .topbar-language-menu {
        position: fixed;
        top: calc(72px + var(--safe-top));
        right: 62px;
        left: auto;
        width: 74px;
    }
}

@media (max-width: 560px) {
    .home-mos-topbar.topbar-profile {
        --home-topbar-size: 40px;
        min-height: 52px;
        padding: 5px;
    }

    .home-mos-topbar-button,
    .home-mos-theme-toggle {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

    .home-mos-search.topbar-search {
        grid-template-columns: 40px minmax(0,1fr);
        width: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .home-mos-topbar.is-open .home-mos-profile-menu {
        max-width: min(620px, calc(100% - 47px));
        margin-right: 6px;
        gap: 5px;
    }

    .home-page .site-header {
        min-height: 54px;
        padding: 5px;
        margin-right: 6px;
        max-width: calc(100vw - 12px);
    }

    .home-page .brand,
    .home-page .nav-toggle {
        flex-basis: 40px;
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    .home-page .brand {
        margin-right: 5px;
    }

    .home-page .brand-logo {
        width: 35px;
        height: 35px;
    }

    .home-page .site-menu {
        height: 40px;
        gap: 4px;
    }

    .home-page .site-header.is-open .site-menu {
        max-width: calc(100vw - 104px);
        margin-right: 5px;
    }

    .home-page .site-menu a,
    .home-page .topbar-language-trigger,
    .home-page .theme-toggle {
        min-height: 34px;
        font-size: .64rem;
    }
}

/* ================================================================
   MWS HOME STATS POLISH V33
   Highlight cards below hero
   ================================================================ */
.stats-grid {
    position: relative;
    gap: 14px;
    margin-top: 8px;
    perspective: 1200px;
}

.stats-grid::before {
    content: "";
    position: absolute;
    inset: -36px -22px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 50%, rgba(var(--mws-primary-rgb), .08), transparent 30%),
        radial-gradient(circle at 82% 45%, rgba(var(--mws-primary-rgb), .055), transparent 32%);
    filter: blur(20px);
    opacity: .85;
}

.stat-card.surface-card {
    isolation: isolate;
    position: relative;
    min-height: 168px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 19px 20px;
    overflow: hidden;
    border: 1px solid rgba(var(--mws-primary-rgb), .16) !important;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.018) 58%, rgba(var(--mws-primary-rgb), .032)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 14px 34px rgba(21,10,38,.075);
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transform: translateZ(0);
    transition:
        transform .32s cubic-bezier(.2,.8,.2,1),
        border-color .32s ease,
        box-shadow .32s ease,
        background .32s ease;
}

.stat-card.surface-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(112deg, rgba(255,255,255,.10), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(var(--mws-primary-rgb), .12), transparent 30%);
    opacity: .74;
    transition: opacity .32s ease, transform .5s ease;
}

.stat-card.surface-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--mws-primary-rgb), .52), transparent);
    opacity: .68;
}

.stat-card.surface-card:nth-child(2)::before {
    background:
        linear-gradient(112deg, rgba(255,255,255,.08), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(113,103,255,.12), transparent 30%);
}

.stat-card.surface-card:nth-child(3)::before {
    background:
        linear-gradient(112deg, rgba(255,255,255,.08), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(196,106,255,.12), transparent 30%);
}

.stat-card.surface-card > strong {
    position: relative;
    z-index: 1;
    display: grid;
    width: 48px;
    min-height: 48px;
    place-items: center;
    margin-top: 1px;
    padding: 0 4px;
    border: 1px solid rgba(var(--mws-primary-rgb), .17);
    border-radius: 14px;
    color: var(--mws-number);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 32%),
        rgba(var(--mws-primary-rgb), .065);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 22px rgba(var(--mws-primary-rgb), .08);
    font-size: 1.22rem;
    line-height: 1;
    letter-spacing: -.035em;
    text-shadow: 0 0 20px rgba(var(--mws-primary-rgb), .20);
    transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease;
}

.stat-card.surface-card > div {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding-top: 2px;
}

.stat-card.surface-card h2 {
    margin: 0 0 7px;
    color: var(--mws-text);
    font-size: .93rem;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.stat-card.surface-card p {
    max-width: 31ch;
    margin: 0;
    color: var(--mws-muted);
    font-size: .78rem;
    line-height: 1.53;
}

.stat-card.surface-card:hover {
    transform: translateY(-6px) rotateX(1.2deg);
    border-color: rgba(var(--mws-primary-rgb), .34) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.080), rgba(255,255,255,.026) 58%, rgba(var(--mws-primary-rgb), .055)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 22px 46px rgba(28,12,52,.13),
        0 0 28px rgba(var(--mws-primary-rgb), .07);
}

.stat-card.surface-card:hover::before {
    opacity: 1;
    transform: scale(1.04);
}

.stat-card.surface-card:hover > strong {
    transform: translateY(-2px) scale(1.045);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 10px 26px rgba(var(--mws-primary-rgb), .14),
        0 0 18px rgba(var(--mws-primary-rgb), .08);
}

.stats-grid[data-reveal].is-visible .stat-card.surface-card {
    animation: mwsStatCardIn .62s cubic-bezier(.2,.8,.2,1) both;
}

.stats-grid[data-reveal].is-visible .stat-card.surface-card:nth-child(2) {
    animation-delay: .09s;
}

.stats-grid[data-reveal].is-visible .stat-card.surface-card:nth-child(3) {
    animation-delay: .18s;
}

@keyframes mwsStatCardIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

html[data-theme="light"] .stat-card.surface-card {
    border-color: rgba(var(--mws-primary-rgb), .13) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.91), rgba(255,255,255,.67) 66%, rgba(var(--mws-primary-rgb), .035)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 14px 34px rgba(74,38,111,.07);
}

html[data-theme="light"] .stat-card.surface-card:hover {
    border-color: rgba(var(--mws-primary-rgb), .28) !important;
    background:
        linear-gradient(145deg, #fff, rgba(250,246,255,.88) 66%, rgba(var(--mws-primary-rgb), .055)) !important;
    box-shadow:
        inset 0 1px 0 #fff,
        0 22px 46px rgba(74,38,111,.11),
        0 0 24px rgba(var(--mws-primary-rgb), .06);
}

@media (max-width: 1100px) {
    .stat-card.surface-card {
        min-height: 152px;
        grid-template-columns: 50px minmax(0, 1fr);
        padding: 17px;
    }

    .stat-card.surface-card > strong {
        width: 44px;
        min-height: 44px;
        border-radius: 12px;
        font-size: 1.08rem;
    }

    .stat-card.surface-card p {
        font-size: .74rem;
    }
}

@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stat-card.surface-card {
        min-height: 0;
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 16px;
    }

    .stat-card.surface-card p {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .stats-grid {
        gap: 8px;
    }

    .stat-card.surface-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 11px;
        padding: 14px;
        border-radius: 14px;
    }

    .stat-card.surface-card > strong {
        width: 40px;
        min-height: 40px;
        border-radius: 11px;
        font-size: .98rem;
    }

    .stat-card.surface-card h2 {
        margin-bottom: 4px;
        font-size: .86rem;
    }

    .stat-card.surface-card p {
        font-size: .70rem;
        line-height: 1.46;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stat-card.surface-card,
    .stat-card.surface-card > strong,
    .stats-grid[data-reveal].is-visible .stat-card.surface-card {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}


/* ================================================================
   V41 — Landing mobile/tablet topbar aligned with M-OS portal topbar
   ================================================================ */
@media (max-width:900px){
    .home-page .site-header{
        --landing-mobile-topbar-size:44px;
        top:calc(var(--shell-pad) + var(--safe-top));
        width:auto;
        max-width:calc(100vw - 18px);
        min-height:58px;
        margin-left:auto;
        margin-right:9px;
        padding:7px;
        justify-content:flex-end;
        gap:0;
        border-radius:999px;
        background:var(--mws-topbar-bg);
        box-shadow:var(--mws-shadow);
        overflow:visible;
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
    }

    /* Portal topbar collapses to one circular trigger. */
    .home-page .site-header > .brand{
        display:none;
    }

    .home-page .nav-toggle{
        order:2;
        flex:0 0 var(--landing-mobile-topbar-size);
        width:var(--landing-mobile-topbar-size);
        min-width:var(--landing-mobile-topbar-size);
        height:var(--landing-mobile-topbar-size);
        min-height:var(--landing-mobile-topbar-size);
        border:1px solid rgba(var(--mws-primary-rgb),.24);
        border-radius:50%;
        background:rgba(255,255,255,.045);
        box-shadow:0 8px 20px rgba(0,0,0,.16);
    }

    .home-page .site-menu{
        order:1;
        height:var(--landing-mobile-topbar-size);
        max-width:0;
        margin-right:0;
        gap:5px;
        overflow:hidden;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateX(12px);
        transform-origin:right center;
        transition:
            max-width .30s cubic-bezier(.22,1,.36,1),
            margin-right .30s cubic-bezier(.22,1,.36,1),
            opacity .16s ease,
            transform .26s ease,
            visibility 0s linear .30s;
    }

    .home-page .site-header.is-open .site-menu{
        max-width:min(680px,calc(100vw - 82px));
        margin-right:10px;
        overflow-x:auto;
        overflow-y:visible;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateX(0);
        scrollbar-width:none;
        transition:
            max-width .32s cubic-bezier(.22,1,.36,1),
            margin-right .32s cubic-bezier(.22,1,.36,1),
            opacity .18s ease .05s,
            transform .26s ease,
            visibility 0s;
    }

    .home-page .site-header.is-open .site-menu::-webkit-scrollbar{display:none}

    .home-page .site-menu > a,
    .home-page .topbar-language-trigger{
        min-height:38px;
        padding-inline:10px;
    }
}

@media (max-width:560px){
    .home-page .site-header{
        --landing-mobile-topbar-size:40px;
        min-height:52px;
        max-width:calc(100vw - 12px);
        margin-right:6px;
        padding:5px;
    }

    .home-page .site-header.is-open .site-menu{
        max-width:calc(100vw - 80px);
        margin-right:6px;
        gap:5px;
    }

    .home-page .site-menu > a,
    .home-page .topbar-language-trigger,
    .home-page .theme-toggle{
        min-height:34px;
    }
}


/* ================================================================
   MWS HOME V46 — complete tablet + mobile optimization
   ================================================================ */

/* Tablet / small laptop */
@media (max-width: 1100px) {
    .home-page .site-main {
        width: min(100%, calc(100vw - 28px));
        margin-inline: auto;
    }

    .home-page .section-pad {
        padding-block: clamp(52px, 7vw, 78px);
        padding-inline: clamp(4px, 1.2vw, 12px);
    }

    .home-page .hero {
        grid-template-columns: minmax(0, .92fr) minmax(360px, .76fr);
        gap: clamp(24px, 4vw, 46px);
        min-height: auto;
        padding-top: clamp(112px, 13vw, 148px);
    }

    .home-page .hero-copy h1 {
        font-size: clamp(3.2rem, 7.4vw, 5.8rem);
    }

    .home-page .hero-visual {
        min-height: 470px;
    }

    .home-page .visual-card-main {
        width: min(100%, 410px);
        right: 0;
    }

    .home-page .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page .service-grid-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-page .project-grid,
    .home-page .process-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page .gallery-card {
        grid-template-columns: minmax(250px, .9fr) minmax(0, 1fr);
        gap: 20px;
    }

    .home-page .about-section {
        grid-template-columns: minmax(0, 1fr) minmax(260px, .46fr);
    }

    .home-page .footer-grid-rich {
        grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .7fr));
    }

    .home-page .footer-grid-rich > :last-child {
        grid-column: 2 / -1;
    }
}

/* Main tablet breakpoint */
@media (max-width: 900px) {
    .home-page {
        overflow-x: clip;
    }

    .home-page .site-main {
        width: min(100%, calc(100vw - 22px));
    }

    .home-page .section-pad {
        padding-block: clamp(44px, 7vw, 66px);
        padding-inline: 4px;
    }

    .home-page .hero {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        min-height: 0;
        padding-top: 104px;
        padding-bottom: 48px;
    }

    .home-page .hero-copy {
        max-width: 760px;
        margin-inline: auto;
        text-align: center;
    }

    .home-page .hero-copy .eyebrow {
        margin-inline: auto;
    }

    .home-page .hero-copy h1 {
        max-width: 850px;
        margin-inline: auto;
        font-size: clamp(3.3rem, 10vw, 6rem);
        line-height: .9;
    }

    .home-page .hero-copy .lead-text {
        max-width: 680px;
        margin-inline: auto;
        font-size: clamp(.98rem, 2vw, 1.14rem);
    }

    .home-page .hero-actions,
    .home-page .hero-tags {
        justify-content: center;
    }

    .home-page .hero-visual {
        min-height: 560px;
        display: grid;
        place-items: center;
    }

    .home-page .visual-card-main {
        position: relative;
        inset: auto;
        width: min(100%, 430px);
        margin-inline: auto;
        transform: none;
    }

    .home-page .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .home-page .stat-card.surface-card {
        min-height: 145px;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        padding: 15px;
    }

    .home-page .split-heading {
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: start;
    }

    .home-page .split-heading > p {
        max-width: 700px;
        justify-self: start;
        text-align: left;
    }

    .home-page .section-heading {
        max-width: 740px;
        margin-bottom: 22px;
    }

    .home-page .section-heading h2,
    .home-page .about-panel h2,
    .home-page .contact-panel h2,
    .home-page .shop-panel-copy h2 {
        font-size: clamp(2.1rem, 7.2vw, 4.2rem);
    }

    .home-page .service-grid,
    .home-page .service-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page .service-card {
        min-height: 220px;
    }

    .home-page .focus-tablet {
        width: 100%;
        padding: 8px;
        border-radius: 28px;
    }

    .home-page .focus-tablet-screen {
        border-radius: 20px;
    }

    .home-page .focus-tablet .focus-demo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
    }

    .home-page .focus-tablet .focus-demo-card:last-child {
        grid-column: 1 / -1;
    }

    .home-page .platform-grid {
        grid-template-columns: 1fr;
    }

    .home-page .platform-card {
        padding: 20px;
    }

    .home-page .gallery-card {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .home-page .gallery-browser {
        width: 100%;
        margin-inline: 0;
    }

    .home-page .gallery-copy {
        max-width: 720px;
    }

    .home-page .gallery-card:nth-child(even) .gallery-copy {
        order: 0;
    }

    .home-page .gallery-card:nth-child(even) .gallery-browser {
        order: 1;
    }

    .home-page .about-section {
        grid-template-columns: 1fr;
    }

    .home-page .about-aside {
        min-height: 0;
    }

    .home-page .shop-panel.surface-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 18px;
        min-height: 0;
        padding: 24px;
    }

    .home-page .shop-panel-preview {
        display: none;
    }

    .home-page .shop-panel-action {
        grid-column: 1 / -1;
        width: 100%;
    }

    .home-page .contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .home-page .footer-topline,
    .home-page .footer-bottom {
        align-items: flex-start;
    }

    .home-page .footer-grid-rich {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page .footer-grid-rich > :last-child {
        grid-column: auto;
    }

    .home-page .cookie-consent {
        width: min(680px, calc(100vw - 22px));
        gap: 16px;
        padding: 16px;
    }
}

/* Large phones / portrait tablets */
@media (max-width: 680px) {
    .home-page .site-main {
        width: calc(100vw - 14px);
    }

    .home-page .section-pad {
        padding-block: 42px;
        padding-inline: 0;
    }

    .home-page .hero {
        gap: 26px;
        padding-top: 88px;
        padding-bottom: 34px;
    }

    .home-page .hero-copy {
        text-align: left;
        padding-inline: 8px;
    }

    .home-page .hero-copy .eyebrow {
        margin-inline: 0;
    }

    .home-page .hero-copy h1 {
        margin-inline: 0;
        font-size: clamp(2.75rem, 14vw, 4.7rem);
        line-height: .9;
        letter-spacing: -.045em;
        overflow-wrap: anywhere;
    }

    .home-page .hero-copy .lead-text {
        margin-inline: 0;
        font-size: .98rem;
        line-height: 1.62;
    }

    .home-page .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        justify-content: stretch;
    }

    .home-page .hero-actions .btn-mws {
        width: 100%;
        min-height: 48px;
    }

    .home-page .hero-tags {
        justify-content: flex-start;
        gap: 7px;
    }

    .home-page .hero-tags span {
        font-size: .69rem;
        padding: 6px 9px;
    }

    .home-page .hero-visual {
        min-height: auto;
        padding: 4px 8px 14px;
    }

    .home-page .visual-card-main {
        width: min(100%, 390px);
        padding: 14px;
        border-radius: 24px;
    }

    .home-page .phone-screen {
        border-radius: 20px;
    }

    .home-page .home-mos-dashboard {
        min-height: 510px;
    }

    .home-page .stats-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .home-page .stat-card.surface-card {
        min-height: 0;
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 14px;
    }

    .home-page .section-heading {
        margin-bottom: 18px;
        padding-inline: 5px;
    }

    .home-page .section-heading h2,
    .home-page .about-panel h2,
    .home-page .contact-panel h2,
    .home-page .shop-panel-copy h2 {
        font-size: clamp(2rem, 11vw, 3.4rem);
        line-height: .96;
    }

    .home-page .section-heading p,
    .home-page .split-heading > p {
        font-size: .92rem;
        line-height: 1.62;
    }

    .home-page .service-grid,
    .home-page .service-grid-three,
    .home-page .project-grid,
    .home-page .process-list,
    .home-page .contact-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .home-page .service-card,
    .home-page .project-card,
    .home-page .process-item {
        min-height: 0;
        padding: 18px;
    }

    .home-page .service-icon,
    .home-page .process-item span,
    .home-page .project-badge {
        margin-bottom: 18px;
    }

    .home-page .focus-tablet {
        padding: 5px;
        border-radius: 22px;
    }

    .home-page .focus-tablet-screen {
        border-radius: 17px;
    }

    .home-page .focus-tablet-bar {
        min-height: 36px;
        padding: 0 10px;
        font-size: .6rem;
    }

    .home-page .focus-tablet .focus-demo-grid {
        grid-template-columns: 1fr;
        padding: 9px;
        gap: 8px;
    }

    .home-page .focus-tablet .focus-demo-card,
    .home-page .focus-tablet .focus-demo-card:last-child {
        grid-column: auto;
        min-height: 190px;
    }

    .home-page .platform-card {
        gap: 16px;
        padding: 16px;
    }

    .home-page .platform-flow-list li,
    .home-page .platform-app-list li {
        min-height: 50px;
        padding: 12px 13px;
        font-size: .82rem;
    }

    .home-page .platform-flow-list li {
        padding-left: 56px;
    }

    .home-page .platform-flow-list li::before {
        left: 12px;
        width: 30px;
        height: 30px;
        margin-top: -15px;
    }

    .home-page .gallery-stack {
        gap: 10px;
    }

    .home-page .gallery-card {
        gap: 16px;
        padding: 12px;
        border-radius: 18px;
    }

    .home-page .gallery-browser {
        margin: 0 0 28px;
        padding: 6px;
        border-radius: 18px;
    }

    .home-page .gallery-monitor-window {
        border-radius: 13px;
    }

    .home-page .gallery-browser-top {
        min-height: 32px;
        padding: 0 8px;
    }

    .home-page .gallery-browser-address {
        max-width: calc(100% - 44px);
        min-width: 0;
        font-size: .63rem;
    }

    .home-page .gallery-screen {
        min-height: 160px;
    }

    .home-page .gallery-screen-shot {
        height: 190px;
    }

    .home-page .gallery-copy {
        gap: 8px;
        padding: 0 5px 5px;
    }

    .home-page .gallery-copy h3 {
        font-size: 1.45rem;
    }

    .home-page .about-panel,
    .home-page .about-aside {
        padding: 18px;
    }

    .home-page .about-aside {
        gap: 14px;
    }

    .home-page .check-list {
        margin-top: 20px;
    }

    .home-page .shop-panel.surface-card {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 15px;
        padding: 18px;
    }

    .home-page .shop-panel-icon {
        width: 76px;
    }

    .home-page .shop-panel-description {
        font-size: .92rem;
        line-height: 1.6;
    }

    .home-page .contact-card {
        min-height: 0;
        padding: 18px;
    }

    .home-page .minimal-footer {
        gap: 18px;
        padding: 18px;
        border-radius: 18px;
    }

    .home-page .footer-topline,
    .home-page .footer-bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-page .footer-pills {
        justify-content: flex-start;
    }

    .home-page .footer-grid-rich,
    .home-page .footer-grid-legal {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .home-page .footer-brand {
        grid-template-columns: 1fr;
    }

    .home-page .footer-link-row {
        justify-content: flex-start;
    }

    .home-page .cookie-consent {
        bottom: max(8px, env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr;
        width: calc(100vw - 14px);
        max-height: min(72dvh, 520px);
        overflow: auto;
        gap: 12px;
        padding: 14px;
        border-radius: 16px;
    }

    .home-page .cookie-consent-copy p {
        font-size: .82rem;
    }

    .home-page .cookie-consent-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .home-page .cookie-consent-actions .btn-mws {
        width: 100%;
    }
}

/* Small phones */
@media (max-width: 430px) {
    .home-page .site-main {
        width: calc(100vw - 10px);
    }

    .home-page .hero {
        padding-top: 80px;
    }

    .home-page .hero-copy {
        padding-inline: 5px;
    }

    .home-page .hero-copy h1 {
        font-size: clamp(2.5rem, 15.5vw, 3.7rem);
    }

    .home-page .hero-tags {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .home-page .hero-tags span {
        width: 100%;
        text-align: center;
    }

    .home-page .hero-tags span:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .home-page .visual-card-main {
        padding: 10px;
        border-radius: 20px;
    }

    .home-page .home-mos-dashboard {
        min-height: 470px;
    }

    .home-page .section-pad {
        padding-block: 36px;
    }

    .home-page .surface-card,
    .home-page .platform-card,
    .home-page .gallery-card,
    .home-page .about-panel,
    .home-page .about-aside {
        border-radius: 15px;
    }

    .home-page .section-heading h2,
    .home-page .about-panel h2,
    .home-page .shop-panel-copy h2 {
        font-size: clamp(1.9rem, 12vw, 2.8rem);
    }

    .home-page .footer-pills {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .home-page .footer-pill {
        text-align: center;
    }
}

/* Better touch behaviour: no desktop lift/jump effects on touch devices */
@media (hover:none) and (pointer:coarse) {
    .home-page .service-card:hover,
    .home-page .project-card:hover,
    .home-page .contact-card:hover,
    .home-page .gallery-card:hover,
    .home-page .shop-panel:hover,
    .home-page .shop-panel:focus-visible {
        transform: none;
    }

    .home-page .btn-mws,
    .home-page .site-menu a,
    .home-page .topbar-language-trigger,
    .home-page .theme-toggle,
    .home-page .nav-toggle {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* Landscape phone: avoid oversized first screen */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
    .home-page .hero {
        padding-top: 72px;
    }

    .home-page .hero-visual {
        min-height: 430px;
    }

    .home-page .visual-card-main {
        width: min(360px, 48vw);
    }
}

/* ================================================================
   MWS HOME M-OS TOPBAR V33
   Mirrors the real dashboard profile topbar inside the landing preview.
   ================================================================ */
.home-mos-topbar-slot {
    top: 12px;
    right: 12px;
}

.home-mos-topbar.top-bar.panel.topbar-profile {
    --home-topbar-size: 44px;
    position: relative;
    display: flex;
    width: auto;
    max-width: min(336px, calc(100% - 4px));
    min-height: 58px;
    padding: 7px;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    overflow: visible;
    border: 1px solid rgba(var(--mws-primary-rgb), .20);
    border-radius: 999px;
    background: rgba(8, 3, 14, .82);
    box-shadow: 0 24px 52px rgba(2, 0, 7, .36), inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.home-mos-topbar.top-bar.panel.topbar-profile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(var(--mws-primary-rgb), .07), 0 0 28px rgba(var(--mws-primary-rgb), .07);
    pointer-events: none;
}

.home-mos-topbar.top-bar.panel.topbar-profile.is-open {
    border-color: rgba(var(--mws-primary-rgb), .30);
    box-shadow: 0 24px 52px rgba(2, 0, 7, .40), 0 0 0 1px rgba(var(--mws-primary-rgb), .07);
}

.home-mos-profile-toggle.topbar-profile-toggle {
    position: relative;
    z-index: 2;
    flex: 0 0 var(--home-topbar-size);
    width: var(--home-topbar-size);
    min-width: var(--home-topbar-size);
    height: var(--home-topbar-size);
    min-height: var(--home-topbar-size);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--mws-primary-rgb), .24);
    border-radius: 50%;
    color: var(--mws-text-muted);
    background: rgba(255,255,255,.045);
    box-shadow: 0 8px 20px rgba(0,0,0,.16);
}

.home-mos-profile-avatar.topbar-profile-avatar svg {
    width: 21px;
    height: 21px;
}

.home-mos-profile-menu.topbar-profile-menu {
    order: -1;
    display: flex;
    width: auto;
    min-width: 0;
    max-width: 0;
    margin-right: 0;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(12px);
    transform-origin: right center;
    transition: max-width .30s cubic-bezier(.22,1,.36,1), margin-right .30s cubic-bezier(.22,1,.36,1), opacity .16s ease, transform .26s ease, visibility 0s linear .30s;
}

.home-mos-topbar.is-open .home-mos-profile-menu {
    max-width: min(274px, calc(100vw - 92px));
    margin-right: 8px;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: max-width .32s cubic-bezier(.22,1,.36,1), margin-right .32s cubic-bezier(.22,1,.36,1), opacity .18s ease .04s, transform .26s ease, visibility 0s;
}

.home-mos-topbar-button,
.home-mos-search.topbar-search {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border: 1px solid rgba(var(--mws-primary-rgb), .16);
    border-radius: 999px;
    color: var(--mws-text);
    background: rgba(255,255,255,.04);
}

.home-mos-topbar-button {
    display: inline-flex;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.home-mos-topbar-button svg {
    width: 17px;
    height: 17px;
}

.home-mos-search.topbar-search {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr);
    overflow: hidden;
    transition: width .24s ease, background .22s ease, border-color .22s ease;
}

.home-mos-search.topbar-search.is-open {
    width: 132px;
    border-color: rgba(var(--mws-primary-rgb), .34);
    background: rgba(var(--mws-primary-rgb), .08);
}

.home-mos-search-toggle.topbar-search-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border: 0;
    background: transparent;
}

.home-mos-search-field.topbar-search-field input {
    width: 82px;
    min-height: 38px;
    padding: 0 8px 0 0;
    font-size: .54rem;
}

html[data-theme="light"] .home-mos-topbar.top-bar.panel.topbar-profile {
    background: rgba(255,255,255,.86);
    box-shadow: 0 20px 42px rgba(69,27,129,.11), inset 0 1px 0 rgba(255,255,255,.82);
}

html[data-theme="light"] .home-mos-profile-toggle.topbar-profile-toggle,
html[data-theme="light"] .home-mos-topbar-button,
html[data-theme="light"] .home-mos-search.topbar-search {
    background: rgba(255,255,255,.72);
}

@media (max-width: 560px) {
    .home-mos-topbar.top-bar.panel.topbar-profile {
        --home-topbar-size: 42px;
        max-width: min(318px, calc(100% - 2px));
        min-height: 54px;
        padding: 6px;
    }

    .home-mos-profile-menu.topbar-profile-menu {
        gap: 5px;
    }

    .home-mos-topbar.is-open .home-mos-profile-menu {
        max-width: 256px;
        margin-right: 6px;
    }

    .home-mos-topbar-button,
    .home-mos-search.topbar-search,
    .home-mos-search-toggle.topbar-search-toggle {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
    }

    .home-mos-search.topbar-search {
        grid-template-columns: 36px minmax(0,1fr);
    }

    .home-mos-search.topbar-search.is-open {
        width: 102px;
    }

    .home-mos-search-field.topbar-search-field input {
        width: 58px;
        min-height: 34px;
    }
}


/* ================================================================
   MWS HOME M-OS TOPBAR V34
   Structural parity with app/includes/topbar.php, scaled for preview.
   ================================================================ */
.home-mos-profile-avatar.topbar-profile-avatar {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.home-mos-profile-avatar .topbar-profile-avatar-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: 50%;
    color: var(--mws-text-muted);
    background: rgba(255,255,255,.055);
}

.home-mos-profile-avatar .topbar-profile-avatar-fallback svg {
    width: 21px;
    height: 21px;
}

.home-mos-profile-menu.topbar-profile-menu > * {
    flex: 0 0 auto;
}

.home-mos-notifications.topbar-notifications,
.home-mos-logout-form.topbar-logout-form {
    position: relative;
    display: flex;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.home-mos-notifications .home-mos-topbar-button,
.home-mos-logout-form .home-mos-topbar-button {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
}

.home-mos-theme-toggle .theme-toggle-icon {
    width: 18px;
    height: 18px;
}

.home-mos-theme-toggle .theme-toggle-icon svg {
    width: 18px;
    height: 18px;
}

.home-mos-search-field.topbar-search-field {
    display: flex;
    min-width: 0;
    align-items: center;
}

.home-mos-topbar-button:focus-visible,
.home-mos-profile-toggle:focus-visible,
.home-mos-search-input:focus-visible {
    outline: 2px solid rgba(var(--mws-primary-rgb), .72);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .home-mos-notifications.topbar-notifications,
    .home-mos-logout-form.topbar-logout-form {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
    }
}

/* ========================================================================
   MWS PUBLIC PRE-LAUNCH 2026-08-29
   Public landing sections: services, visual gallery, partner monitor, about.
   Kept scoped to .home-page so portal layouts are not affected.
   ======================================================================== */
.home-page .visual-gallery-section,
.home-page .partner-section {
    position: relative;
}

.home-page .visual-gallery-grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 176px;
    gap: 14px;
}

.home-page .visual-gallery-item {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--mws-border);
    border-radius: 22px;
    background: var(--mws-surface);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .14);
    isolation: isolate;
}

.home-page .visual-gallery-item.is-wide {
    grid-column: span 2;
}

.home-page .visual-gallery-item.is-tall {
    grid-row: span 2;
}

.home-page .visual-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}

.home-page .visual-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 44%, rgba(5, 2, 10, .82) 100%);
    pointer-events: none;
}

.home-page .visual-gallery-item figcaption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 13px;
    z-index: 2;
    color: #fff;
    font-family: var(--mws-font-display);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.home-page .visual-gallery-item:hover img {
    transform: scale(1.035);
}

html[data-theme="light"] .home-page .visual-gallery-item {
    box-shadow: 0 18px 42px rgba(72, 36, 130, .12);
}

.home-page .partner-showcase {
    display: grid;
    gap: 22px;
}

.home-page .partner-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.home-page .partner-selector-button {
    display: inline-flex;
    min-height: 48px;
    padding: 7px 14px 7px 8px;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--mws-border);
    border-radius: 999px;
    color: var(--mws-muted);
    background: rgba(255, 255, 255, .045);
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}

.home-page .partner-selector-button:hover,
.home-page .partner-selector-button.is-active {
    color: var(--mws-text);
    border-color: rgba(var(--mws-primary-rgb), .42);
    background: rgba(var(--mws-primary-rgb), .11);
    transform: translateY(-1px);
}

.home-page .partner-selector-button:focus-visible {
    outline: 2px solid var(--mws-accent);
    outline-offset: 3px;
}

.home-page .partner-logo-shell {
    display: grid;
    width: 34px;
    height: 34px;
    overflow: hidden;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--mws-primary-rgb), .16);
    border-radius: 50%;
    background: var(--mws-surface-strong);
}

.home-page .partner-logo-shell img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.home-page .partner-logo-fallback {
    color: var(--mws-number);
    font-family: var(--mws-font-display);
    font-size: .78rem;
    font-weight: 900;
}

.home-page .partner-monitor-wrap {
    width: min(885px, 100%);
    margin-inline: auto;
}

.home-page .partner-monitor.gallery-browser {
    margin-inline: auto;
}

.home-page .partner-monitor-image {
    transition: opacity .16s ease, transform .3s ease;
}

.home-page .partner-monitor-image.is-switching {
    opacity: .22;
    transform: scale(1.012);
}

.home-page .partner-monitor-meta {
    display: flex;
    margin-top: 10px;
    padding-inline: 8px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.home-page .partner-monitor-meta > div {
    display: grid;
    gap: 5px;
}

.home-page .partner-monitor-meta strong {
    font-family: var(--mws-font-display);
    font-size: 1.08rem;
}

.home-page .about-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.home-page .about-detail-card {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(var(--mws-primary-rgb), .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
}

.home-page .about-detail-card > span {
    color: var(--mws-number);
    font-family: var(--mws-font-display);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.home-page .about-detail-card h3 {
    margin: 0;
    font-family: var(--mws-font-display);
    font-size: .96rem;
    line-height: 1.3;
}

.home-page .about-detail-card p {
    margin: 0;
    color: var(--mws-muted);
    font-size: .8rem;
    line-height: 1.55;
}

.home-page .footer-social-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
}

.home-page .footer-social-row a {
    display: inline-flex;
    min-height: 38px;
    padding: 7px 12px;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--mws-border);
    border-radius: 999px;
    color: var(--mws-muted);
    background: rgba(255, 255, 255, .04);
    font-size: .77rem;
    font-weight: 800;
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.home-page .footer-social-row a:hover {
    color: var(--mws-text);
    border-color: rgba(var(--mws-primary-rgb), .4);
    transform: translateY(-1px);
}

.home-page .footer-social-row svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 901px) {
    .home-page .site-menu {
        gap: 2px;
    }

    .home-page .site-menu > a {
        padding-inline: 9px;
        font-size: .78rem;
    }
}

@media (max-width: 900px) {
    .home-page .service-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page .visual-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 165px;
    }

    .home-page .visual-gallery-item.is-wide {
        grid-column: span 2;
    }

    .home-page .about-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .home-page .service-grid-three {
        grid-template-columns: 1fr;
    }

    .home-page .visual-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 132px;
        gap: 9px;
    }

    .home-page .visual-gallery-item {
        border-radius: 16px;
    }

    .home-page .visual-gallery-item.is-tall {
        grid-row: span 1;
    }

    .home-page .visual-gallery-item figcaption {
        left: 11px;
        right: 11px;
        bottom: 9px;
        font-size: .7rem;
    }

    .home-page .partner-selector {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 2px 5px;
        scrollbar-width: none;
    }

    .home-page .partner-selector::-webkit-scrollbar {
        display: none;
    }

    .home-page .partner-selector-button {
        flex: 0 0 auto;
        min-height: 43px;
        padding: 6px 12px 6px 7px;
        font-size: .72rem;
    }

    .home-page .partner-logo-shell {
        width: 30px;
        height: 30px;
    }

    .home-page .partner-monitor-meta {
        align-items: stretch;
        flex-direction: column;
    }

    .home-page .partner-monitor-meta .btn-mws {
        width: 100%;
    }
}

/* ========================================================================
   MWS PUBLIC POLISH 2026-08-29
   - Start-page M-OS icon theme pairing
   - Partner monitor/selector stability
   - Mobile/tablet header expands as one surface
   ======================================================================== */

/* The preview contains a dark and a light SVG for every app. Make the
   pairing explicit so later component rules cannot leave the wrong asset
   visible after a theme switch. */
.home-mos-app-image.home-mos-app-dark {
    display: block !important;
}

.home-mos-app-image.home-mos-app-light {
    display: none !important;
}

html[data-theme="light"] .home-mos-app-image.home-mos-app-dark {
    display: none !important;
}

html[data-theme="light"] .home-mos-app-image.home-mos-app-light {
    display: block !important;
}

/* Partner selection uses a fixed footprint. Active/hover state changes
   color only, never geometry, so clicking another partner cannot jump. */
.home-page .partner-selector-button,
.home-page .partner-selector-button:hover,
.home-page .partner-selector-button.is-active {
    transform: none;
}

.home-page .partner-monitor-wrap {
    width: min(885px, 100%);
}

.home-page .partner-monitor .gallery-monitor-window {
    min-width: 0;
}

.home-page .partner-monitor-screen.gallery-screen {
    display: grid;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1889 / 908;
    place-items: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--mws-primary-rgb), .09), transparent 48%),
        rgba(255, 255, 255, .025);
}

.home-page .partner-monitor-image.gallery-screen-shot {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: top center;
    transform: none;
}

.home-page .partner-monitor-image.is-switching {
    transform: none;
}

.home-page .partner-monitor-meta {
    justify-content: flex-start;
}

@media (max-width: 820px) {
    /* One expandable header surface on tablet/mobile. The menu is part of
       the header flow instead of appearing as a detached background card. */
    .home-page .site-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0 10px;
        min-height: 68px;
        padding: 9px 11px 9px 14px;
        border-radius: 24px;
        transition: border-radius .24s ease, padding .24s ease, box-shadow .24s ease;
    }

    .home-page .site-header.is-open {
        border-radius: 26px;
    }

    .home-page .site-header .brand {
        min-width: 0;
    }

    .home-page .site-header .nav-toggle {
        justify-self: end;
    }

    .home-page .site-menu {
        position: static;
        grid-column: 1 / -1;
        display: grid;
        width: 100%;
        max-height: 0;
        margin: 0;
        padding: 0 3px;
        gap: 5px;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        opacity: 0;
        transform: none;
        pointer-events: none;
        transition: max-height .30s ease, opacity .18s ease, margin-top .24s ease, padding-top .24s ease;
    }

    .home-page .site-header.is-open .site-menu {
        max-height: 620px;
        margin-top: 8px;
        padding-top: 9px;
        overflow: visible;
        border-top: 1px solid var(--mws-border);
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .home-page .site-menu a,
    .home-page .site-menu .topbar-language-trigger,
    .home-page .site-menu .theme-toggle {
        min-height: 44px;
    }

    .home-page .site-language-group {
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .home-page .partner-monitor-wrap {
        width: 100%;
    }

    .home-page .partner-monitor.gallery-browser {
        padding: 9px;
        border-radius: 20px;
    }

    .home-page .partner-monitor-screen.gallery-screen {
        aspect-ratio: 1889 / 908;
    }
}

/* ========================================================================
   MWS PUBLIC UI V47 — final focus preview, partner monitor and mobile nav
   ======================================================================== */

/* Header wrappers keep desktop behavior while allowing a real mobile layout. */
.home-page .site-menu-links,
.home-page .site-menu-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* Focus-demo mini M-OS uses the same dark/light icon pairing as the main
   start-page M-OS preview. */
.focus-preview-app-icon-light {
    display: none !important;
}

.focus-preview-app-icon-dark {
    display: block !important;
}

html[data-theme="light"] .focus-preview-app-icon-dark {
    display: none !important;
}

html[data-theme="light"] .focus-preview-app-icon-light {
    display: block !important;
}

/* Keep the browser address optically centered regardless of the traffic
   lights on the left. */
.home-page .partner-monitor .gallery-browser-top {
    position: relative;
    justify-content: flex-start;
}

.home-page .partner-monitor .gallery-browser-address {
    position: absolute;
    left: 50%;
    width: min(52%, 410px);
    max-width: min(52%, 410px);
    margin: 0;
    transform: translateX(-50%);
}

/* Partner preview uses the Stay27 screenshot ratio as the common monitor
   format. This removes unused vertical monitor space and keeps every partner
   preview on exactly the same visual footprint. */
.home-page .partner-monitor-screen.gallery-screen {
    --partner-preview-ratio: 1889 / 908;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: var(--partner-preview-ratio);
    overflow: hidden;
}

.home-page .partner-monitor-image.gallery-screen-shot {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* ------------------------------------------------------------------------
   Tablet / mobile navigation
   New layout: compact branded header + integrated expandable navigation.
   No detached flyout, no horizontal scrolling, and no shared desktop values.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
    .home-page .site-header {
        --landing-nav-toggle: 46px;
        position: sticky;
        top: calc(10px + var(--safe-top));
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--landing-nav-toggle);
        width: calc(100% - 24px);
        max-width: 760px;
        min-height: 66px;
        margin-inline: auto;
        padding: 9px 10px 9px 13px;
        align-items: center;
        gap: 0 10px;
        overflow: visible;
        border: 1px solid var(--mws-border);
        border-radius: 22px;
        background: var(--mws-topbar-bg);
        box-shadow: 0 16px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        transition: border-radius .25s ease, box-shadow .25s ease, padding .25s ease;
    }

    html[data-theme="light"] .home-page .site-header {
        box-shadow: 0 14px 34px rgba(60,32,91,.12), inset 0 1px 0 rgba(255,255,255,.9);
    }

    .home-page .site-header.is-open {
        padding-bottom: 12px;
        border-radius: 24px;
        box-shadow: 0 20px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
    }

    .home-page .site-header > .brand {
        display: inline-flex;
        width: fit-content;
        min-width: 0;
        max-width: 100%;
        gap: 9px;
        overflow: hidden;
    }

    .home-page .site-header .brand-logo {
        width: auto;
        height: 40px;
        flex: 0 0 auto;
    }

    .home-page .site-header .brand-copy {
        min-width: 0;
    }

    .home-page .site-header .brand-copy strong {
        font-size: .9rem;
    }

    .home-page .site-header .brand-copy small {
        max-width: 190px;
        overflow: hidden;
        font-size: .66rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .home-page .nav-toggle {
        position: relative;
        order: initial;
        display: block;
        justify-self: end;
        width: var(--landing-nav-toggle);
        min-width: var(--landing-nav-toggle);
        height: var(--landing-nav-toggle);
        min-height: var(--landing-nav-toggle);
        padding: 0;
        border: 1px solid rgba(var(--mws-primary-rgb), .25);
        border-radius: 15px;
        color: var(--mws-text);
        background: rgba(var(--mws-primary-rgb), .08);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }

    .home-page .site-menu {
        position: static;
        grid-column: 1 / -1;
        order: initial;
        display: grid;
        width: 100%;
        height: auto;
        max-width: none;
        max-height: 0;
        margin: 0;
        padding: 0;
        align-items: stretch;
        gap: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        transition: max-height .32s cubic-bezier(.22,1,.36,1), opacity .18s ease, margin-top .24s ease, padding-top .24s ease, visibility 0s linear .32s;
    }

    .home-page .site-header.is-open .site-menu {
        width: 100%;
        max-width: none;
        max-height: 470px;
        margin: 10px 0 0;
        padding: 11px 1px 0;
        overflow: visible;
        border-top: 1px solid var(--mws-border);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: max-height .34s cubic-bezier(.22,1,.36,1), opacity .18s ease .04s, margin-top .24s ease, padding-top .24s ease, visibility 0s;
    }

    .home-page .site-menu-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
    }

    .home-page .site-menu-links > a {
        display: flex;
        min-width: 0;
        min-height: 42px;
        padding: 8px 10px;
        justify-content: center;
        border: 1px solid rgba(var(--mws-primary-rgb), .10);
        border-radius: 13px;
        color: var(--mws-muted);
        background: rgba(255,255,255,.025);
        font-size: .75rem;
        font-weight: 800;
        text-align: center;
        white-space: normal;
    }

    .home-page .site-menu-links > a:hover,
    .home-page .site-menu-links > a.is-active {
        color: var(--mws-text);
        border-color: rgba(var(--mws-primary-rgb), .27);
        background: rgba(var(--mws-primary-rgb), .10);
    }

    html[data-theme="light"] .home-page .site-menu-links > a {
        background: rgba(255,255,255,.52);
    }

    .home-page .site-menu-actions {
        display: grid;
        grid-template-columns: minmax(92px, auto) minmax(100px, 1fr) 44px;
        width: 100%;
        margin-top: 8px;
        padding-top: 8px;
        align-items: center;
        gap: 7px;
        border-top: 1px solid rgba(var(--mws-primary-rgb), .08);
    }

    .home-page .site-language-group {
        min-width: 0;
    }

    .home-page .site-menu-actions .topbar-language-trigger,
    .home-page .site-menu-actions .login-link,
    .home-page .site-menu-actions .theme-toggle {
        min-height: 40px;
        margin: 0;
    }

    .home-page .site-menu-actions .topbar-language-trigger {
        width: 100%;
        padding-inline: 10px;
        border-radius: 13px;
    }

    .home-page .site-menu-actions .login-link {
        width: 100%;
        padding-inline: 12px;
        border-radius: 13px;
        font-size: .78rem;
    }

    .home-page .site-menu-actions .theme-toggle {
        width: 44px;
        min-width: 44px;
        padding: 0;
        border-radius: 13px;
    }

    .home-page .site-language-group .topbar-language-menu {
        top: calc(100% + 7px);
        right: auto;
        left: 0;
        z-index: 80;
    }

    .home-page .partner-monitor-screen.gallery-screen {
        height: auto;
        aspect-ratio: 1889 / 908;
    }
}

@media (max-width: 560px) {
    .home-page .site-header {
        --landing-nav-toggle: 42px;
        top: calc(7px + var(--safe-top));
        width: calc(100% - 14px);
        min-height: 58px;
        padding: 7px 8px 7px 10px;
        gap: 0 8px;
        border-radius: 19px;
    }

    .home-page .site-header.is-open {
        padding-bottom: 10px;
        border-radius: 21px;
    }

    .home-page .site-header .brand-logo {
        height: 35px;
    }

    .home-page .site-header .brand-copy strong {
        font-size: .84rem;
    }

    .home-page .site-header .brand-copy small {
        display: none;
    }

    .home-page .nav-toggle {
        border-radius: 13px;
    }

    .home-page .site-header.is-open .site-menu {
        max-height: 520px;
        margin-top: 8px;
        padding-top: 9px;
    }

    .home-page .site-menu-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .home-page .site-menu-links > a {
        min-height: 40px;
        padding: 7px 8px;
        border-radius: 12px;
        font-size: .71rem;
    }

    .home-page .site-menu-actions {
        grid-template-columns: minmax(82px, .85fr) minmax(88px, 1fr) 40px;
        gap: 6px;
    }

    .home-page .site-menu-actions .topbar-language-trigger,
    .home-page .site-menu-actions .login-link,
    .home-page .site-menu-actions .theme-toggle {
        min-height: 38px;
    }

    .home-page .site-menu-actions .theme-toggle {
        width: 40px;
        min-width: 40px;
    }

    .home-page .partner-monitor-screen.gallery-screen {
        aspect-ratio: 1889 / 908;
    }

    .home-page .partner-monitor .gallery-browser-address {
        width: min(58%, 270px);
        max-width: min(58%, 270px);
        padding-inline: 7px;
        font-size: .56rem;
    }
}

/* ========================================================================
   MWS HOME STARTPAGE PATCH 2026-08-30
   Scoped landing-page adjustments: side profile menu, responsive device
   preview, gallery slider and partner monitor height.
   ======================================================================== */

/* 1) Launcher headline was removed from markup; reclaim the vertical space. */
.home-page .home-mos-launcher-grid {
    margin-top: 8px;
}

/* 2) Keep the preview topbar compact. The profile action rail now opens as
      an independent pill to the LEFT of the profile circle, rather than
      growing below/inside the topbar itself. */
.home-page .home-mos-topbar.top-bar.panel.topbar-profile {
    width: 58px;
    max-width: 58px;
    min-width: 58px;
}

.home-page .home-mos-profile-menu.topbar-profile-menu {
    position: absolute;
    top: 50%;
    right: calc(100% + 9px);
    order: initial;
    display: flex;
    width: max-content;
    max-width: 336px;
    margin: 0;
    padding: 6px;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    overflow: visible;
    border: 1px solid rgba(var(--mws-primary-rgb), .20);
    border-radius: 999px;
    background: rgba(8, 3, 14, .88);
    box-shadow: 0 20px 44px rgba(2, 0, 7, .34), inset 0 1px 0 rgba(255,255,255,.055);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(12px, -50%) scale(.985);
    transform-origin: right center;
    transition: opacity .18s ease, transform .26s cubic-bezier(.22,1,.36,1), visibility 0s linear .26s;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.home-page .home-mos-topbar.is-open .home-mos-profile-menu {
    max-width: 336px;
    margin: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0, -50%) scale(1);
    transition: opacity .18s ease .02s, transform .28s cubic-bezier(.22,1,.36,1), visibility 0s;
}

html[data-theme="light"] .home-page .home-mos-profile-menu.topbar-profile-menu {
    border-color: rgba(83, 47, 123, .14);
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 40px rgba(69,27,129,.13), inset 0 1px 0 rgba(255,255,255,.92);
}

/* 3) Add a real phone companion to the existing tablet/M-OS preview. */
.home-page .focus-demo-single-preview {
    overflow: visible;
}

.home-page .focus-preview-phone {
    position: absolute;
    z-index: 5;
    right: -18px;
    bottom: -16px;
    display: block;
    width: 92px;
    aspect-ratio: 9 / 18.8;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 22px;
    background: #08050d;
    box-shadow: 0 22px 42px rgba(0,0,0,.40), 0 0 0 1px rgba(var(--mws-primary-rgb), .08);
    transform: rotate(2deg);
    pointer-events: none;
}

.home-page .focus-preview-phone-speaker {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 50%;
    width: 28px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    transform: translateX(-50%);
}

.home-page .focus-preview-phone-screen {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    padding: 24px 8px 10px;
    align-content: start;
    gap: 10px;
    overflow: hidden;
    border: 1px solid rgba(var(--mws-primary-rgb), .12);
    border-radius: 17px;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 18%, rgba(var(--mws-primary-rgb), .15), transparent 42%),
        #0d0814;
    background-size: 14px 14px, 14px 14px, auto, auto;
}

.home-page .focus-preview-phone-profile {
    justify-self: end;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(var(--mws-primary-rgb), .30);
    border-radius: 50%;
    background: rgba(var(--mws-primary-rgb), .09);
}

.home-page .focus-preview-phone-apps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 6px;
}

.home-page .focus-preview-phone-apps > span {
    display: grid;
    place-items: center;
}

.home-page .focus-preview-phone-apps .focus-preview-app-icon {
    width: 25px;
    height: 25px;
}

.home-page .focus-preview-phone-dock {
    width: 32px;
    height: 3px;
    margin-top: auto;
    justify-self: center;
    border-radius: 999px;
    background: rgba(255,255,255,.24);
}

html[data-theme="light"] .home-page .focus-preview-phone {
    border-color: rgba(54,31,80,.12);
    background: #fff;
    box-shadow: 0 18px 38px rgba(63,33,94,.15), 0 0 0 1px rgba(var(--mws-primary-rgb), .05);
}

html[data-theme="light"] .home-page .focus-preview-phone-speaker,
html[data-theme="light"] .home-page .focus-preview-phone-dock {
    background: rgba(54,31,80,.18);
}

html[data-theme="light"] .home-page .focus-preview-phone-screen {
    border-color: rgba(54,31,80,.09);
    background:
        linear-gradient(rgba(54,31,80,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(54,31,80,.035) 1px, transparent 1px),
        radial-gradient(circle at 50% 18%, rgba(var(--mws-primary-rgb), .10), transparent 42%),
        #fbf9fe;
    background-size: 14px 14px, 14px 14px, auto, auto;
}

/* 4) Visual gallery: one full preview at a time with arrows and pagination. */
.home-page .visual-gallery-grid.visual-gallery-slider {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    gap: 14px;
    width: 100%;
}

.home-page .visual-gallery-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--mws-border);
    border-radius: 24px;
    background: var(--mws-surface);
    box-shadow: 0 22px 52px rgba(0,0,0,.15);
}

html[data-theme="light"] .home-page .visual-gallery-viewport {
    box-shadow: 0 18px 44px rgba(72,36,130,.12);
}

.home-page .visual-gallery-track {
    display: flex;
    width: 100%;
    transform: translate3d(0,0,0);
    transition: transform .52s cubic-bezier(.22,1,.36,1);
    will-change: transform;
    touch-action: pan-y;
}

.home-page .visual-gallery-slider .visual-gallery-item,
.home-page .visual-gallery-slider .visual-gallery-item.is-wide,
.home-page .visual-gallery-slider .visual-gallery-item.is-tall {
    flex: 0 0 100%;
    width: 100%;
    height: clamp(330px, 43vw, 535px);
    min-width: 100%;
    margin: 0;
    grid-column: auto;
    grid-row: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--mws-surface);
}

.home-page .visual-gallery-slider .visual-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
}

.home-page .visual-gallery-slider .visual-gallery-item:hover img {
    transform: none;
}


/* Partner monitor height is ratio-driven above; no fixed desktop height. */

@media (max-width: 860px) {
    .home-page .focus-preview-phone {
        right: 10px;
        bottom: 10px;
        width: 82px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item,
    .home-page .visual-gallery-slider .visual-gallery-item.is-wide,
    .home-page .visual-gallery-slider .visual-gallery-item.is-tall {
        height: clamp(280px, 58vw, 440px);
    }
}

@media (max-width: 560px) {
    .home-page .home-mos-topbar.top-bar.panel.topbar-profile {
        width: 54px;
        max-width: 54px;
        min-width: 54px;
    }

    .home-page .home-mos-profile-menu.topbar-profile-menu {
        right: calc(100% + 6px);
        max-width: 282px;
        padding: 5px;
        gap: 5px;
    }

    .home-page .home-mos-topbar.is-open .home-mos-profile-menu {
        max-width: 282px;
        margin: 0;
    }

    .home-page .focus-preview-phone {
        right: 7px;
        bottom: 7px;
        width: 68px;
        padding: 4px;
        border-radius: 17px;
    }

    .home-page .focus-preview-phone-screen {
        padding: 19px 5px 7px;
        gap: 7px;
        border-radius: 13px;
    }

    .home-page .focus-preview-phone-apps {
        gap: 5px 4px;
    }

    .home-page .focus-preview-phone-apps .focus-preview-app-icon {
        width: 19px;
        height: 19px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item,
    .home-page .visual-gallery-slider .visual-gallery-item.is-wide,
    .home-page .visual-gallery-slider .visual-gallery-item.is-tall {
        height: clamp(220px, 67vw, 330px);
    }

}

/* ========================================================================
   MWS HOME GALLERY TABLET FRAME 2026-08-30
   The slider logic stays unchanged; every slide is rendered as a landscape
   tablet so differently sized screenshots remain fully visible.
   ======================================================================== */
.home-page .visual-gallery-viewport {
    overflow: hidden;
    padding: 6px 8px;
    border: 0;
    border-radius: 28px;
    background: transparent;
    box-shadow: none;
}

.home-page .visual-gallery-track {
    align-items: center;
}

.home-page .visual-gallery-slider {
    cursor: grab;
}

.home-page .visual-gallery-slider.is-dragging {
    cursor: grabbing;
}

.home-page .visual-gallery-slider .visual-gallery-item,
.home-page .visual-gallery-slider .visual-gallery-item.is-wide,
.home-page .visual-gallery-slider .visual-gallery-item.is-tall {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    padding: 10px 12px 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--mws-primary-rgb), .28);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), transparent 36%),
        #0d0913;
    box-shadow:
        0 24px 58px rgba(0,0,0,.24),
        inset 0 0 0 1px rgba(255,255,255,.03),
        inset 0 0 20px rgba(var(--mws-primary-rgb), .07);
    isolation: isolate;
}

.home-page .visual-gallery-slider .visual-gallery-item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    z-index: 5;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: #050308;
    box-shadow: 0 0 0 2px rgba(var(--mws-primary-rgb), .08);
    transform: translateX(-50%);
    pointer-events: none;
}

.home-page .visual-gallery-slider .visual-gallery-item::after {
    content: "";
    position: absolute;
    top: 28%;
    right: 5px;
    z-index: 5;
    width: 3px;
    height: 40px;
    border-radius: 999px;
    background: rgba(var(--mws-primary-rgb), .34);
    opacity: .75;
    pointer-events: none;
}

.home-page .visual-gallery-slider .visual-gallery-item img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid rgba(var(--mws-primary-rgb), .10);
    border-radius: 20px;
    background: var(--mws-surface);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
    object-fit: cover;
    object-position: center center;
    transform: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.home-page .visual-gallery-slider .visual-gallery-item figcaption {
    left: 26px;
    right: auto;
    bottom: 24px;
    z-index: 6;
    max-width: calc(100% - 52px);
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    color: #fff;
    background: rgba(8,5,13,.72);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
}

html[data-theme="light"] .home-page .visual-gallery-slider .visual-gallery-item,
html:not([data-theme="dark"]) .home-page .visual-gallery-slider .visual-gallery-item {
    border-color: rgba(var(--mws-primary-rgb), .24);
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(var(--mws-primary-rgb), .055)),
        #f2edf8;
    box-shadow:
        0 24px 58px rgba(72,36,130,.16),
        inset 0 0 0 1px rgba(255,255,255,.72),
        inset 0 0 22px rgba(var(--mws-primary-rgb), .05);
}

html[data-theme="light"] .home-page .visual-gallery-slider .visual-gallery-item::before,
html:not([data-theme="dark"]) .home-page .visual-gallery-slider .visual-gallery-item::before {
    border-color: rgba(54,31,80,.16);
    background: #d9d0e7;
}

html[data-theme="light"] .home-page .visual-gallery-slider .visual-gallery-item figcaption,
html:not([data-theme="dark"]) .home-page .visual-gallery-slider .visual-gallery-item figcaption {
    border-color: rgba(54,31,80,.08);
    color: #27123e;
    background: rgba(255,255,255,.84);
    box-shadow: 0 8px 22px rgba(72,36,130,.10);
}

@media (max-width: 860px) {
    .home-page .visual-gallery-viewport {
        padding: 10px;
        border-radius: 28px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item,
    .home-page .visual-gallery-slider .visual-gallery-item.is-wide,
    .home-page .visual-gallery-slider .visual-gallery-item.is-tall {
        height: auto;
        aspect-ratio: 16 / 10;
        padding: 12px;
        border-radius: 27px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item img {
        border-radius: 17px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item figcaption {
        left: 22px;
        bottom: 21px;
        max-width: calc(100% - 44px);
        padding: 6px 10px;
        font-size: .75rem;
    }
}

@media (max-width: 560px) {
    .home-page .visual-gallery-viewport {
        padding: 6px;
        border-radius: 22px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item,
    .home-page .visual-gallery-slider .visual-gallery-item.is-wide,
    .home-page .visual-gallery-slider .visual-gallery-item.is-tall {
        height: auto;
        aspect-ratio: 16 / 10;
        padding: 9px;
        border-radius: 21px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item::before {
        top: 3px;
        width: 4px;
        height: 4px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item::after {
        right: 3px;
        width: 2px;
        height: 28px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item img {
        border-radius: 13px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item figcaption {
        left: 15px;
        bottom: 14px;
        max-width: calc(100% - 30px);
        padding: 5px 8px;
        font-size: .68rem;
    }
}

/* ========================================================================
   MWS HOME GALLERY TABLET COMPACT + SWIPE 2026-08-30
   Compact landscape tablet. Navigation is gesture-only; the former arrow/dot
   controls are intentionally removed from the public gallery.
   ======================================================================== */
.home-page .visual-gallery-grid.visual-gallery-slider {
    gap: 0;
}

.home-page .visual-gallery-viewport {
    width: min(860px, 90%);
    margin-inline: auto;
    padding: 10px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.home-page .visual-gallery-viewport:active {
    cursor: grabbing;
}

.home-page .visual-gallery-track {
    touch-action: pan-y;
}

.home-page .visual-gallery-slider .visual-gallery-item,
.home-page .visual-gallery-slider .visual-gallery-item.is-wide,
.home-page .visual-gallery-slider .visual-gallery-item.is-tall {
    padding: 13px;
    border-radius: 29px;
}

.home-page .visual-gallery-slider .visual-gallery-item img {
    border-radius: 18px;
}

.home-page .visual-gallery-slider .visual-gallery-item figcaption {
    left: 25px;
    bottom: 23px;
    max-width: calc(100% - 50px);
}


@media (max-width: 860px) {
    .home-page .visual-gallery-viewport {
        width: min(720px, 92%);
        padding: 8px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item,
    .home-page .visual-gallery-slider .visual-gallery-item.is-wide,
    .home-page .visual-gallery-slider .visual-gallery-item.is-tall {
        padding: 10px;
        border-radius: 24px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item img {
        border-radius: 15px;
    }
}

@media (max-width: 560px) {
    .home-page .visual-gallery-viewport {
        width: min(440px, 96%);
        padding: 5px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item,
    .home-page .visual-gallery-slider .visual-gallery-item.is-wide,
    .home-page .visual-gallery-slider .visual-gallery-item.is-tall {
        padding: 8px;
        border-radius: 19px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item img {
        border-radius: 12px;
    }
}

/* ========================================================================
   MWS HOME GALLERY STATIC TABLET / CONTENT-ONLY SWIPE 2026-08-30
   The tablet shell stays fixed. Only the screenshots inside the display move.
   ======================================================================== */
.home-page .visual-gallery-grid.visual-gallery-slider {
    overflow: visible;
}

.home-page .visual-gallery-viewport {
    position: relative;
    box-sizing: border-box;
    width: min(860px, 90%);
    aspect-ratio: 16 / 10;
    margin-inline: auto;
    padding: 14px 14px 16px;
    overflow: hidden;
    border: 1px solid rgba(var(--mws-primary-rgb), .30);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), transparent 36%),
        #0d0913;
    box-shadow:
        0 24px 58px rgba(0,0,0,.24),
        inset 0 0 0 1px rgba(255,255,255,.03),
        inset 0 0 20px rgba(var(--mws-primary-rgb), .07);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    isolation: isolate;
}

.home-page .visual-gallery-viewport:active {
    cursor: grabbing;
}

.home-page .visual-gallery-viewport::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    z-index: 12;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: #050308;
    box-shadow: 0 0 0 2px rgba(var(--mws-primary-rgb), .08);
    transform: translateX(-50%);
    pointer-events: none;
}

.home-page .visual-gallery-viewport::after {
    content: "";
    position: absolute;
    top: 28%;
    right: 5px;
    z-index: 12;
    width: 3px;
    height: 40px;
    border-radius: 999px;
    background: rgba(var(--mws-primary-rgb), .34);
    opacity: .75;
    pointer-events: none;
}

.home-page .visual-gallery-track {
    position: relative;
    z-index: 2;
    height: 100%;
    align-items: stretch;
    touch-action: pan-y;
}

.home-page .visual-gallery-slider .visual-gallery-item,
.home-page .visual-gallery-slider .visual-gallery-item.is-wide,
.home-page .visual-gallery-slider .visual-gallery-item.is-tall {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: var(--mws-surface);
    box-shadow: none;
    isolation: isolate;
}

.home-page .visual-gallery-slider .visual-gallery-item::before,
.home-page .visual-gallery-slider .visual-gallery-item::after {
    content: none;
    display: none;
}

.home-page .visual-gallery-slider .visual-gallery-item img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid rgba(var(--mws-primary-rgb), .10);
    border-radius: 20px;
    background: var(--mws-surface);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
    object-fit: cover;
    object-position: center center;
    transform: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.home-page .visual-gallery-slider .visual-gallery-item figcaption {
    left: 14px;
    right: auto;
    bottom: 12px;
    z-index: 6;
    max-width: calc(100% - 28px);
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    color: #fff;
    background: rgba(8,5,13,.72);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
}

html[data-theme="light"] .home-page .visual-gallery-viewport,
html:not([data-theme="dark"]) .home-page .visual-gallery-viewport {
    border-color: rgba(var(--mws-primary-rgb), .24);
    background:
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(var(--mws-primary-rgb), .055)),
        #f2edf8;
    box-shadow:
        0 22px 52px rgba(72,36,130,.15),
        inset 0 0 0 1px rgba(255,255,255,.72),
        inset 0 0 22px rgba(var(--mws-primary-rgb), .05);
}

html[data-theme="light"] .home-page .visual-gallery-viewport::before,
html:not([data-theme="dark"]) .home-page .visual-gallery-viewport::before {
    border-color: rgba(54,31,80,.16);
    background: #d9d0e7;
}

html[data-theme="light"] .home-page .visual-gallery-slider .visual-gallery-item,
html:not([data-theme="dark"]) .home-page .visual-gallery-slider .visual-gallery-item {
    border: 0;
    background: #fbf9fe;
    box-shadow: none;
}

html[data-theme="light"] .home-page .visual-gallery-slider .visual-gallery-item figcaption,
html:not([data-theme="dark"]) .home-page .visual-gallery-slider .visual-gallery-item figcaption {
    border-color: rgba(54,31,80,.08);
    color: #27123e;
    background: rgba(255,255,255,.84);
    box-shadow: 0 8px 22px rgba(72,36,130,.10);
}

@media (max-width: 860px) {
    .home-page .visual-gallery-viewport {
        width: min(720px, 92%);
        padding: 11px 11px 13px;
        border-radius: 25px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item,
    .home-page .visual-gallery-slider .visual-gallery-item.is-wide,
    .home-page .visual-gallery-slider .visual-gallery-item.is-tall,
    .home-page .visual-gallery-slider .visual-gallery-item img {
        border-radius: 16px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item figcaption {
        left: 11px;
        bottom: 10px;
        max-width: calc(100% - 22px);
        padding: 6px 10px;
        font-size: .75rem;
    }
}

@media (max-width: 560px) {
    .home-page .visual-gallery-viewport {
        width: min(440px, 96%);
        padding: 8px 8px 10px;
        border-radius: 20px;
    }

    .home-page .visual-gallery-viewport::before {
        top: 3px;
        width: 4px;
        height: 4px;
    }

    .home-page .visual-gallery-viewport::after {
        right: 3px;
        width: 2px;
        height: 28px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item,
    .home-page .visual-gallery-slider .visual-gallery-item.is-wide,
    .home-page .visual-gallery-slider .visual-gallery-item.is-tall,
    .home-page .visual-gallery-slider .visual-gallery-item img {
        border-radius: 12px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item figcaption {
        left: 8px;
        bottom: 7px;
        max-width: calc(100% - 16px);
        padding: 5px 8px;
        font-size: .68rem;
    }
}


/* ========================================================================
   MWS HOME GALLERY INNER SCREEN MASK 2026-08-30
   Neighbouring slides are clipped inside the fixed tablet display.
   ======================================================================== */
.home-page .visual-gallery-viewport {
    overflow: visible;
}

.home-page .visual-gallery-screen-mask {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(var(--mws-primary-rgb), .10);
    border-radius: 20px;
    background: var(--mws-surface);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
    isolation: isolate;
}

.home-page .visual-gallery-screen-mask .visual-gallery-track {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.home-page .visual-gallery-screen-mask .visual-gallery-item,
.home-page .visual-gallery-screen-mask .visual-gallery-item.is-wide,
.home-page .visual-gallery-screen-mask .visual-gallery-item.is-tall {
    border-radius: 0;
    background: transparent;
}

.home-page .visual-gallery-screen-mask .visual-gallery-item img {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html[data-theme="light"] .home-page .visual-gallery-screen-mask,
html:not([data-theme="dark"]) .home-page .visual-gallery-screen-mask {
    border-color: rgba(var(--mws-primary-rgb), .09);
    background: #fbf9fe;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.78);
}

@media (max-width: 860px) {
    .home-page .visual-gallery-screen-mask {
        border-radius: 16px;
    }
}

@media (max-width: 560px) {
    .home-page .visual-gallery-screen-mask {
        border-radius: 12px;
    }
}

/* ========================================================================
   MWS HOME RESPONSIVE RELEASE 2026-08-30
   Final mobile/tablet-only containment and layout pass.
   Desktop >= 1101px intentionally remains unchanged.
   ======================================================================== */
@media (max-width: 1100px) {
    html,
    body.home-page {
        max-width: 100%;
        overflow-x: clip;
    }

    .home-page *,
    .home-page *::before,
    .home-page *::after {
        box-sizing: border-box;
    }

    .home-page .site-header,
    .home-page .site-main,
    .home-page .site-footer,
    .home-page .hero,
    .home-page .hero-copy,
    .home-page .hero-visual,
    .home-page .site-section,
    .home-page .section-heading,
    .home-page .split-heading,
    .home-page .stats-grid,
    .home-page .service-grid,
    .home-page .service-grid-three,
    .home-page .focus-tablet,
    .home-page .focus-tablet-screen,
    .home-page .focus-demo-single,
    .home-page .focus-demo-single-copy,
    .home-page .focus-demo-single-preview,
    .home-page .visual-gallery-grid,
    .home-page .visual-gallery-viewport,
    .home-page .visual-gallery-screen-mask,
    .home-page .partner-showcase,
    .home-page .partner-selector,
    .home-page .partner-monitor-wrap,
    .home-page .about-section,
    .home-page .about-panel,
    .home-page .about-aside,
    .home-page .contact-section,
    .home-page .contact-grid,
    .home-page .shop-panel,
    .home-page .minimal-footer {
        min-width: 0;
        max-width: 100%;
    }

    .home-page .hero > * {
        min-width: 0;
    }

    .home-page .visual-card-main {
        box-sizing: border-box;
        max-width: 100%;
    }

    /* Off-screen gallery slides must never participate in page overflow. */
    .home-page .visual-gallery-screen-mask {
        overflow: clip;
        contain: paint;
    }

    .home-page .visual-gallery-screen-mask .visual-gallery-track {
        min-width: 0;
        max-width: 100%;
    }

    .home-page .visual-gallery-screen-mask .visual-gallery-item,
    .home-page .visual-gallery-screen-mask .visual-gallery-item.is-wide,
    .home-page .visual-gallery-screen-mask .visual-gallery-item.is-tall {
        max-width: 100%;
    }
}

/* Tablet landscape / compact laptop: preserve desktop visual language,
   only tighten dimensions that otherwise become cramped. */
@media (min-width: 901px) and (max-width: 1100px) {
    .home-page .site-header {
        width: calc(100% - 24px);
        gap: 10px;
        padding-inline: 12px;
    }

    .home-page .site-header .brand-logo {
        height: 44px;
    }

    .home-page .site-header .brand-copy small {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .home-page .site-menu-links,
    .home-page .site-menu-actions {
        gap: 2px;
    }

    .home-page .site-menu a,
    .home-page .topbar-language-trigger {
        padding-inline: 9px;
        font-size: .78rem;
    }

    .home-page .hero {
        grid-template-columns: minmax(0, 1fr) minmax(340px, .78fr);
        gap: clamp(24px, 3.2vw, 38px);
    }

    .home-page .hero-copy,
    .home-page .hero-visual {
        width: 100%;
    }

    .home-page .hero-copy h1 {
        max-width: 100%;
    }

    .home-page .visual-card-main {
        width: min(100%, 390px);
    }

    .home-page .partner-monitor-wrap {
        width: min(820px, 92%);
    }

    .home-page .visual-gallery-viewport {
        width: min(820px, 88%);
    }
}

/* Tablet portrait and all mobile devices. */
@media (max-width: 900px) {
    .home-page .site-main {
        width: calc(100% - 20px);
        padding-top: 18px;
    }

    .home-page .section-pad {
        padding-inline: 0;
    }

    /* Header stays one integrated expandable surface. */
    .home-page .site-header {
        width: calc(100% - 20px);
        max-width: 760px;
    }

    .home-page .site-header.is-open .site-menu {
        max-height: min(560px, calc(100dvh - 110px));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--mws-primary-rgb), .42) transparent;
    }

    .home-page .site-header.is-open .site-menu::-webkit-scrollbar {
        width: 4px;
    }

    .home-page .site-header.is-open .site-menu::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(var(--mws-primary-rgb), .42);
    }

    /* Hero: prevent grid min-content from widening the viewport. */
    .home-page .hero {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
        overflow: visible;
    }

    .home-page .hero-copy {
        width: 100%;
        max-width: 760px;
        justify-self: center;
    }

    .home-page .hero-copy .eyebrow {
        width: fit-content;
        max-width: 100%;
        white-space: normal;
    }

    .home-page .hero-copy h1,
    .home-page .hero-copy .lead-text,
    .home-page .hero-actions,
    .home-page .hero-tags {
        width: 100%;
        max-width: 100%;
    }

    .home-page .hero-copy h1[data-i18n="landing.hero.title"] {
        width: fit-content;
        max-width: calc(100% - 12px);
        overflow-wrap: anywhere;
    }

    .home-page .hero-visual {
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
    }

    .home-page .visual-card-main {
        width: min(430px, 100%);
        max-width: 100%;
    }

    .home-page .phone-screen,
    .home-page .home-mos-dashboard,
    .home-page .home-mos-workspace,
    .home-page .home-mos-workspace-frame,
    .home-page .home-mos-launcher,
    .home-page .home-mos-launcher-grid {
        max-width: 100%;
        min-width: 0;
    }

    /* Cards use space efficiently without changing the desktop hierarchy. */
    .home-page .stats-grid,
    .home-page .service-grid,
    .home-page .service-grid-three {
        width: 100%;
    }

    .home-page .service-card,
    .home-page .stat-card,
    .home-page .about-detail-card,
    .home-page .contact-card {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* M-OS focus preview stays contained on tablets. */
    .home-page .focus-tablet {
        width: 100%;
        max-width: 100%;
    }

    .home-page .focus-demo-single {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .home-page .focus-demo-single-copy,
    .home-page .focus-demo-single-preview {
        width: 100%;
        max-width: 100%;
    }

    .home-page .focus-demo-single-preview {
        transform: none;
    }

    .home-page .focus-preview-phone {
        right: 8px;
        bottom: 8px;
    }

    /* Gallery tablet scales from the available viewport, never from slide width. */
    .home-page .visual-gallery-grid.visual-gallery-slider {
        width: 100%;
        overflow: hidden;
    }

    .home-page .visual-gallery-viewport {
        width: min(720px, calc(100% - 8px));
    }

    .home-page .visual-gallery-track {
        max-width: 100%;
    }

    /* Partner selector and monitor stay fully inside the viewport. */
    .home-page .partner-selector {
        width: 100%;
        max-width: 100%;
    }

    .home-page .partner-monitor-wrap {
        width: min(100%, 760px);
    }

    .home-page .partner-monitor.gallery-browser {
        width: 100%;
    }

    .home-page .partner-monitor-image.gallery-screen-shot {
        width: 100%;
        max-width: 100%;
    }

    /* About/contact/footer wrap without forcing long text widths. */
    .home-page .about-section,
    .home-page .contact-grid,
    .home-page .footer-grid-rich,
    .home-page .footer-grid-legal {
        width: 100%;
    }

    .home-page .footer-link-row,
    .home-page .footer-pills,
    .home-page .footer-social-row {
        max-width: 100%;
    }
}

/* Phones: compact hierarchy and touch-first sizing. */
@media (max-width: 560px) {
    .home-page .site-main {
        width: calc(100% - 14px);
        padding-top: 14px;
    }

    .home-page .section-pad {
        padding-block: 34px;
    }

    .home-page .site-header {
        width: calc(100% - 14px);
    }

    .home-page .site-header .brand {
        max-width: calc(100% - 52px);
    }

    .home-page .site-menu-links > a,
    .home-page .site-menu-actions .topbar-language-trigger,
    .home-page .site-menu-actions .login-link,
    .home-page .site-menu-actions .theme-toggle {
        min-height: 42px;
    }

    .home-page .hero {
        gap: 22px;
        padding-top: 74px;
        padding-bottom: 28px;
    }

    .home-page .hero-copy {
        padding-inline: 4px;
    }

    .home-page .hero-copy h1 {
        font-size: clamp(2.45rem, 14vw, 3.55rem);
        line-height: .92;
    }

    .home-page .hero-copy h1[data-i18n="landing.hero.title"] {
        max-width: calc(100% - 8px);
        transform: perspective(720px) rotateX(1deg) rotateY(-2deg) translateZ(0);
    }

    .home-page .hero-copy h1[data-i18n="landing.hero.title"]::after {
        right: -8px;
        left: 2px;
    }

    .home-page .hero-copy .lead-text {
        font-size: .94rem;
        line-height: 1.58;
    }

    .home-page .hero-actions {
        margin-top: 24px;
    }

    .home-page .hero-actions .btn-mws {
        min-height: 46px;
        padding-inline: 16px;
    }

    .home-page .hero-tags {
        margin-top: 18px;
    }

    .home-page .hero-visual {
        min-height: 0;
        padding-inline: 4px;
    }

    .home-page .visual-card.visual-card-main {
        width: min(350px, 100%);
        min-height: 0;
        padding: 10px;
        border-radius: 24px;
    }

    .home-page .phone-screen {
        min-height: 0;
        border-radius: 19px;
    }

    .home-page .home-mos-dashboard {
        min-height: 430px;
    }

    .home-page .floating-card.card-a {
        display: none;
    }

    .home-page .stats-grid {
        gap: 7px;
    }

    .home-page .stat-card.surface-card {
        padding: 13px;
    }

    .home-page .section-heading {
        padding-inline: 3px;
    }

    .home-page .section-heading h2,
    .home-page .about-panel h2,
    .home-page .contact-panel h2,
    .home-page .shop-panel-copy h2 {
        font-size: clamp(1.9rem, 10.8vw, 2.75rem);
        overflow-wrap: anywhere;
    }

    .home-page .service-grid,
    .home-page .service-grid-three,
    .home-page .contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-page .service-card,
    .home-page .contact-card {
        padding: 16px;
    }

    .home-page .focus-tablet {
        padding: 5px;
        border-radius: 20px;
    }

    .home-page .focus-tablet-screen {
        border-radius: 15px;
    }

    .home-page .focus-demo-single {
        gap: 18px;
        padding: 18px 13px 14px;
    }

    .home-page .focus-demo-single-text strong {
        font-size: clamp(1.7rem, 9vw, 2.35rem);
    }

    .home-page .focus-demo-single-text > span {
        font-size: .82rem;
        line-height: 1.55;
    }

    .home-page .focus-demo-single-link {
        min-height: 40px;
        padding-inline: 13px;
    }

    .home-page .focus-demo-single-preview {
        grid-template-columns: 38px minmax(0, 1fr);
        min-height: 205px;
        border-radius: 14px;
    }

    .home-page .focus-preview-sidebar {
        padding: 12px 6px;
    }

    .home-page .focus-preview-sidebar i {
        width: 23px;
        height: 23px;
        border-radius: 7px;
    }

    .home-page .focus-preview-workspace {
        gap: 8px;
        padding: 0 8px 8px;
    }

    .home-page .focus-preview-phone {
        right: 5px;
        bottom: 5px;
        width: 64px;
        padding: 4px;
        border-radius: 16px;
    }

    .home-page .focus-preview-phone-screen {
        padding: 18px 5px 7px;
        gap: 6px;
        border-radius: 12px;
    }

    .home-page .focus-preview-phone-apps {
        gap: 5px 4px;
    }

    .home-page .focus-preview-phone-apps .focus-preview-app-icon {
        width: 19px;
        height: 19px;
    }

    /* Gallery tablet keeps a useful screen size without touching viewport edges. */
    .home-page .visual-gallery-viewport {
        width: calc(100% - 4px);
        padding: 7px 7px 9px;
        border-radius: 18px;
    }

    .home-page .visual-gallery-screen-mask {
        border-radius: 11px;
    }

    .home-page .visual-gallery-slider .visual-gallery-item figcaption {
        left: 7px;
        bottom: 6px;
        max-width: calc(100% - 14px);
        padding: 5px 8px;
        font-size: .64rem;
    }

    /* Partner choices are horizontally swipeable instead of squeezing text. */
    .home-page .partner-selector {
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 2px 1px 6px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .home-page .partner-selector::-webkit-scrollbar {
        display: none;
    }

    .home-page .partner-selector-button {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 5px 11px 5px 6px;
        scroll-snap-align: start;
        font-size: .72rem;
    }

    .home-page .partner-logo-shell {
        width: 30px;
        height: 30px;
    }

    .home-page .partner-logo-shell img {
        width: 20px;
        height: 20px;
    }

    .home-page .partner-monitor.gallery-browser {
        margin-bottom: 30px;
        padding: 6px;
        border-radius: 17px;
    }

    .home-page .partner-monitor .gallery-monitor-window {
        border-radius: 11px;
    }

    .home-page .partner-monitor .gallery-browser-top {
        min-height: 28px;
    }

    .home-page .partner-monitor .gallery-browser-address {
        width: min(62%, 220px);
        max-width: min(62%, 220px);
        min-height: 20px;
        padding: 2px 6px;
        font-size: .52rem;
    }

    .home-page .partner-monitor-screen.gallery-screen {
        min-height: 0;
        aspect-ratio: 1889 / 908;
    }

    .home-page .partner-monitor-meta {
        margin-top: 6px;
        padding-inline: 2px;
    }

    .home-page .partner-monitor-meta strong {
        font-size: .92rem;
    }

    .home-page .about-panel,
    .home-page .about-aside {
        padding: 16px;
    }

    .home-page .about-detail-grid {
        gap: 9px;
        margin-top: 18px;
    }

    .home-page .about-detail-card {
        padding: 14px;
    }

    .home-page .about-portrait-shell {
        max-height: 320px;
        overflow: hidden;
        border-radius: 14px;
    }

    .home-page .about-portrait-image {
        width: 100%;
        height: 100%;
        max-height: 320px;
        object-fit: cover;
        object-position: center top;
    }

    .home-page .shop-panel.surface-card {
        padding: 16px;
    }

    .home-page .minimal-footer {
        width: 100%;
        padding: 16px;
    }

    .home-page .footer-pills {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px;
    }

    .home-page .footer-pill,
    .home-page .footer-link-row a,
    .home-page .footer-social-row a {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* Very narrow phones retain comfortable gutters and avoid two-column pills. */
@media (max-width: 380px) {
    .home-page .site-main,
    .home-page .site-header {
        width: calc(100% - 10px);
    }

    .home-page .site-menu-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
    }

    .home-page .hero-copy h1 {
        font-size: clamp(2.25rem, 14vw, 3.2rem);
    }

    .home-page .hero-tags,
    .home-page .footer-pills {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-page .hero-tags span:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* ========================================================================
   MWS HOME FINALIZATION V1 — current M-OS core preview alignment
   The public preview mirrors the current user launcher: Settings, Inbox,
   AppStore. This layer only adjusts the existing preview grids.
   ======================================================================== */
.home-page .home-mos-launcher-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.home-page .home-mos-launcher-app {
    min-height: 112px;
}

.home-page .focus-preview-phone-apps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 560px) {
    .home-page .home-mos-launcher-grid {
        gap: 5px;
    }

    .home-page .home-mos-launcher-app {
        min-height: 100px;
    }
}