/* Premium feature layer */
:root {
    --panel-solid: #0a0a0a;
    --panel-soft: rgba(10, 10, 10, 0.94);
}

html.menu-open,
body.menu-open,
body.modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.menu-open {
    position: fixed;
    width: 100%;
    inset-inline: 0;
}

.admin-gated {
    display: none !important;
}

body.admin-authorized .nav-admin-button {
    display: grid !important;
}

body.admin-authorized .mobile-menu-tools .admin-gated {
    display: flex !important;
}

body.admin-authorized .footer-tools .admin-gated {
    display: inline-flex !important;
}

body.admin-authorized #admin-modal {
    display: flex !important;
}

body.admin-page #admin-modal .experience-close {
    display: none;
}

.site-loader {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #020203;
    transition: opacity 0.75s ease, visibility 0.75s ease;
}

.site-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-emblem {
    width: auto;
    height: auto;
    position: relative;
    display: block;
    border: none;
    background: none;
}

.loader-emblem::before,
.loader-emblem::after,
.loader-emblem span {
    display: none !important;
}

.loader-emblem img,
.boot-screen-content img,
.boot-laptop-lid-back img {
    display: block;
    object-fit: contain;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.loader-word {
    margin-top: 18px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.38em;
}

.loader-tagline {
    margin: 0 0 4px;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(167, 139, 250, 0.85);
    opacity: 0;
    animation: loaderTaglineIn 1.2s ease 0.15s forwards;
}

.loader-status {
    margin: 14px 0 0;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.42);
    min-height: 1.2em;
    text-align: center;
}

@keyframes loaderTaglineIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.loader-progress {
    width: 160px;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.09);
}

.loader-progress span {
    display: block;
    width: 55%;
    height: 100%;
    background: #fff;
    animation: loaderLine 1.2s ease-in-out infinite;
}

@keyframes loaderOrbit {
    to { transform: rotate(360deg); }
}

@keyframes loaderLine {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(210%); }
}

/* Boot intro — galaxy hyperspace + laptop reveal */
body.boot-lock {
    position: fixed;
    overflow: hidden;
    width: 100%;
    left: 0;
    right: 0;
    touch-action: none;
}

body.site-entered #hero .hero-content {
    animation: heroUnveil 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes heroUnveil {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.site-loader {
    overflow: hidden;
    background: #010102;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.galaxy-cosmos {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: opacity 0.65s ease;
}

.site-loader.galaxy-warp-active .galaxy-cosmos {
    opacity: 1;
}

.galaxy-cosmos::before {
    content: '';
    position: absolute;
    inset: -40%;
    pointer-events: none;
    opacity: 0;
    background:
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(255, 255, 255, 0) 0deg 7deg,
            rgba(167, 139, 250, 0.22) 7deg 8deg,
            rgba(255, 255, 255, 0) 8deg 15deg,
            rgba(34, 211, 238, 0.16) 15deg 16deg);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.site-loader.galaxy-warp-active .galaxy-cosmos::before,
html.css-warp-fallback .galaxy-cosmos::before,
html.privacy-browser .galaxy-cosmos::before {
    opacity: 0.55;
    -webkit-animation: cssWarpSpin 5s linear infinite;
    animation: cssWarpSpin 5s linear infinite;
}

@-webkit-keyframes cssWarpSpin {
    to { -webkit-transform: rotate(360deg) scale(1.08); transform: rotate(360deg) scale(1.08); }
}

@keyframes cssWarpSpin {
    to { -webkit-transform: rotate(360deg) scale(1.08); transform: rotate(360deg) scale(1.08); }
}

.galaxy-warp-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.site-loader.galaxy-warp-active .galaxy-warp-canvas {
    opacity: 1;
}

.galaxy-nebula {
    position: absolute;
    border-radius: 50%;
    -webkit-filter: blur(55px);
    filter: blur(55px);
    opacity: 0;
    mix-blend-mode: normal;
    transition: opacity 1.2s ease, -webkit-transform 2.5s cubic-bezier(0.16, 1, 0.3, 1), transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.galaxy-nebula--violet {
    width: 70vmax;
    height: 70vmax;
    left: -20%;
    top: -25%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.55) 0%, transparent 68%);
    animation: nebulaPulse 8s ease-in-out infinite;
}

.galaxy-nebula--cyan {
    width: 55vmax;
    height: 55vmax;
    right: -18%;
    bottom: -20%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.4) 0%, transparent 70%);
    animation: nebulaPulse 11s ease-in-out infinite reverse;
}

.galaxy-nebula--magenta {
    width: 45vmax;
    height: 45vmax;
    left: 30%;
    top: 40%;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.35) 0%, transparent 72%);
    animation: nebulaDrift 14s ease-in-out infinite;
}

@keyframes nebulaPulse {
    0%, 100% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 0.45; }
    50% { -webkit-transform: scale(1.12) rotate(8deg); transform: scale(1.12) rotate(8deg); opacity: 0.75; }
}

@keyframes nebulaDrift {
    0%, 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); }
    50% { -webkit-transform: translate3d(4%, -3%, 0) scale(1.08); transform: translate3d(4%, -3%, 0) scale(1.08); }
}

.site-loader.galaxy-warp-active .galaxy-nebula,
.site-loader.boot-playing .galaxy-nebula {
    opacity: 0.9;
}

.site-loader.galaxy-arrival .galaxy-nebula {
    opacity: 1;
    transform: scale(1.15);
}

.galaxy-dust {
    position: absolute;
    inset: -20%;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 25% 65%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 42% 12%, rgba(200, 220, 255, 0.8), transparent),
        radial-gradient(1px 1px at 58% 78%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 72% 34%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1.5px 1.5px at 88% 56%, rgba(180, 200, 255, 0.7), transparent),
        radial-gradient(1px 1px at 15% 88%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 93% 8%, rgba(255, 255, 255, 0.65), transparent);
    background-size: 280px 280px;
    opacity: 0.35;
    animation: galaxyDustSpin 120s linear infinite;
}

@keyframes galaxyDustSpin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

.site-loader.galaxy-warp-active .galaxy-dust {
    opacity: 0.65;
    animation-duration: 18s;
}

.galaxy-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(120vmax, 1400px);
    height: min(120vmax, 1400px);
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.3);
    transform: translate3d(-50%, -50%, 0) scale(0.3);
    border-radius: 50%;
    border: 1px solid rgba(167, 139, 250, 0.2);
    box-shadow:
        0 0 60px rgba(124, 58, 237, 0.25),
        inset 0 0 80px rgba(34, 211, 238, 0.08);
    opacity: 0;
    transition: opacity 0.8s ease, transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-loader.galaxy-warp-active .galaxy-ring {
    opacity: 0.7;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.85);
    transform: translate3d(-50%, -50%, 0) scale(0.85);
    -webkit-animation: galaxyRingSpin 6s linear infinite;
    animation: galaxyRingSpin 6s linear infinite;
}

.site-loader.galaxy-arrival .galaxy-ring {
    opacity: 1;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
}

@-webkit-keyframes galaxyRingSpin {
    to { -webkit-transform: translate3d(-50%, -50%, 0) scale(0.85) rotate(360deg); transform: translate3d(-50%, -50%, 0) scale(0.85) rotate(360deg); }
}

@keyframes galaxyRingSpin {
    to { -webkit-transform: translate3d(-50%, -50%, 0) scale(0.85) rotate(360deg); transform: translate3d(-50%, -50%, 0) scale(0.85) rotate(360deg); }
}

.galaxy-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24vmax;
    height: 24vmax;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(167, 139, 250, 0.65) 18%,
        rgba(34, 211, 238, 0.35) 42%,
        transparent 72%);
    opacity: 0;
    filter: blur(2px);
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.site-loader.galaxy-arrival .galaxy-core {
    opacity: 0.85;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
}

.site-loader.boot-reveal .galaxy-core {
    opacity: 1;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(4.5);
    transform: translate3d(-50%, -50%, 0) scale(4.5);
    filter: blur(0);
    transition: transform 1.1s cubic-bezier(0.55, 0.06, 0.2, 1), opacity 0.5s ease;
}

.galaxy-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(167, 139, 250, 0.4) 25%, transparent 65%);
    opacity: 0;
    pointer-events: none;
}

.site-loader.boot-reveal .galaxy-flash {
    animation: galaxyFlashBurst 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes galaxyFlashBurst {
    0% { opacity: 0; transform: scale(0.6); }
    35% { opacity: 0.95; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.4); }
}

.loader-loading {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transition: opacity 0.55s ease, transform 0.55s ease, filter 0.55s ease;
}

.site-loader.loading-done .loader-loading {
    opacity: 0;
    transform: scale(1.12);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    pointer-events: none;
}

.site-loader.boot-playing .loader-loading {
    display: none;
}

.loader-emblem {
    box-shadow:
        0 0 40px rgba(124, 58, 237, 0.35),
        0 0 80px rgba(34, 211, 238, 0.15);
}

.boot-scene {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    opacity: 0;
    pointer-events: none;
    -webkit-perspective: 1600px;
    perspective: 1600px;
    -webkit-transform: scale(0.88) translateZ(0);
    transform: scale(0.88) translateZ(0);
    -webkit-filter: blur(6px);
    filter: blur(6px);
    transition: opacity 0.7s ease, -webkit-transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), -webkit-filter 0.7s ease, filter 0.7s ease;
}

.site-loader.boot-playing .boot-scene {
    opacity: 1;
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
    -webkit-filter: none;
    filter: none;
}

.galaxy-portal {
    position: absolute;
    left: 50%;
    top: 46%;
    width: min(420px, 90vw);
    height: min(420px, 90vw);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.galaxy-portal-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(167, 139, 250, 0.9);
    border-right-color: rgba(34, 211, 238, 0.5);
    box-shadow:
        0 0 50px rgba(124, 58, 237, 0.45),
        inset 0 0 40px rgba(34, 211, 238, 0.12);
    opacity: 0;
    transform: scale(0.4) rotate(0deg);
    transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.galaxy-portal-core {
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(124, 58, 237, 0.5) 40%, transparent 72%);
    opacity: 0;
    transform: scale(0.5);
    filter: blur(4px);
    transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-loader.boot-playing .galaxy-portal-ring {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    -webkit-animation: portalRingSpin 2.8s linear infinite;
    animation: portalRingSpin 2.8s linear infinite;
}

.site-loader.boot-playing .galaxy-portal-core {
    opacity: 0.9;
    transform: scale(1);
    animation: portalCorePulse 1.6s ease-in-out infinite;
}

.site-loader.boot-lid-open .galaxy-portal-ring {
    opacity: 0.35;
    animation-duration: 1.2s;
}

.site-loader.boot-reveal .galaxy-portal {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
    transition: opacity 0.5s ease, transform 0.8s ease;
}

@-webkit-keyframes portalRingSpin {
    to { -webkit-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); }
}

@keyframes portalRingSpin {
    to { -webkit-transform: scale(1) rotate(360deg); transform: scale(1) rotate(360deg); }
}

@keyframes portalCorePulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.08); opacity: 1; }
}

.boot-laptop {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 40px, 0) scale(0.55) rotateX(18deg);
    transform: translate3d(0, 40px, 0) scale(0.55) rotateX(18deg);
    opacity: 0;
    -webkit-filter: drop-shadow(0 0 40px rgba(124, 58, 237, 0.5));
    filter: drop-shadow(0 0 40px rgba(124, 58, 237, 0.5));
    transition: -webkit-transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease, -webkit-filter 0.8s ease, filter 0.8s ease;
}

.site-loader.boot-playing .boot-laptop {
    opacity: 1;
    -webkit-transform: translate3d(0, 12px, 0) scale(0.92) rotateX(0deg);
    transform: translate3d(0, 12px, 0) scale(0.92) rotateX(0deg);
}

.site-loader.galaxy-arrival .boot-laptop {
    -webkit-transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
    transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
    -webkit-filter: drop-shadow(0 0 60px rgba(34, 211, 238, 0.35));
    filter: drop-shadow(0 0 60px rgba(34, 211, 238, 0.35));
}

.site-loader.boot-lid-open .boot-laptop {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
}

.site-loader.boot-reveal .boot-laptop {
    -webkit-transform: translate3d(0, -2vh, 0) scale(2.2);
    transform: translate3d(0, -2vh, 0) scale(2.2);
    opacity: 0;
    filter: drop-shadow(0 0 120px rgba(255, 255, 255, 0.8));
    transition: transform 1.05s cubic-bezier(0.55, 0.06, 0.2, 1), opacity 0.65s ease 0.15s, filter 0.5s ease;
}

.boot-laptop-top {
    position: relative;
    width: min(340px, 78vw);
    height: 215px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotateX(-88deg);
    transform: rotateX(-88deg);
    transition: -webkit-transform 1.05s cubic-bezier(0.22, 1, 0.28, 1), transform 1.05s cubic-bezier(0.22, 1, 0.28, 1);
}

.site-loader.boot-lid-open .boot-laptop-top {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.boot-laptop-bezel {
    position: absolute;
    inset: 0;
    padding: 10px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg, #2a2b31 0%, #14151a 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    backface-visibility: hidden;
}

.boot-laptop-screen {
    position: relative;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #06070b;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.boot-screen-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-style: normal;
}

.boot-screen-chrome span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.boot-screen-chrome span:nth-child(1) { background: #ff5f57; }
.boot-screen-chrome span:nth-child(2) { background: #febc2e; }
.boot-screen-chrome span:nth-child(3) { background: #28c840; }

.boot-screen-chrome em {
    margin-left: auto;
    font-size: 10px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
}

.boot-screen-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: calc(100% - 34px);
    text-align: center;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s;
}

.boot-screen-content strong {
    font-family: var(--font-heading);
    font-size: 22px;
    letter-spacing: -0.02em;
}

.boot-screen-content small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.boot-screen-content img {
    background-color: var(--bg-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.boot-screen-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 40%, rgba(167, 139, 250, 0.35), transparent 55%),
        radial-gradient(circle at 30% 70%, rgba(34, 211, 238, 0.2), transparent 50%);
    opacity: 0;
    transition: opacity 0.45s ease 0.2s;
    pointer-events: none;
}

.site-loader.boot-lid-open .boot-screen-content {
    opacity: 1;
    transform: scale(1);
}

.site-loader.boot-lid-open .boot-screen-glow {
    opacity: 1;
}

.boot-laptop-lid-back {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(160deg, #1b1c22 0%, #0a0b0f 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: rotateX(180deg);
    backface-visibility: hidden;
}

.boot-laptop-base {
    width: min(360px, 84vw);
    height: 16px;
    margin-top: 3px;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, #23242a 0%, #121318 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    position: relative;
}

.boot-keyboard {
    position: absolute;
    left: 8%;
    right: 8%;
    top: -7px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
}

.boot-trackpad {
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 28%;
    height: 8px;
    transform: translateX(-50%);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
}

.boot-caption {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}

.site-loader.boot-reveal .boot-caption {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.site-loader.boot-playing .boot-caption {
    opacity: 1;
    transform: translateY(0);
}

.site-loader.boot-reveal {
    background: #010102;
}

.site-loader.boot-exit {
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.85s ease, transform 0.85s ease, visibility 0.85s ease;
}

.site-loader.boot-exit .galaxy-cosmos {
    transform: scale(1.15);
    transition: transform 0.85s ease;
}

html.perf-lite .galaxy-warp-canvas {
    opacity: 0.85;
}

html.css-warp-fallback .galaxy-warp-canvas,
html.privacy-browser .galaxy-warp-canvas {
    display: none !important;
}

html.css-warp-fallback .galaxy-dust,
html.privacy-browser .galaxy-dust {
    opacity: 0.85;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

html.css-warp-fallback .boot-scene,
html.privacy-browser .boot-scene {
    -webkit-filter: none !important;
    filter: none !important;
}

html.css-warp-fallback .galaxy-nebula,
html.privacy-browser .galaxy-nebula {
    -webkit-filter: blur(42px);
    filter: blur(42px);
    opacity: 0.95;
}

html:not(.intro-enabled) .galaxy-cosmos,
html:not(.intro-enabled) .boot-scene {
    display: none !important;
}

html.perf-lite .galaxy-dust {
    animation-duration: 40s;
}

html.perf-lite .boot-laptop-top {
    transition-duration: 0.72s;
}

html.perf-lite .boot-laptop {
    transition-duration: 0.55s;
}

html.perf-lite .galaxy-nebula {
    filter: blur(40px);
}

@media (prefers-reduced-motion: reduce) {
    body.is-ready .site-header .header-bar {
        animation: none !important;
    }

    .boot-scene,
    .galaxy-cosmos,
    .loader-tagline {
        display: none !important;
    }

    body.site-entered #hero .hero-content {
        animation: none !important;
    }
}

.film-grain {
    position: fixed;
    inset: 0;
    z-index: 3000;
    opacity: 0.028;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ——— Premium floating header ——— */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 120;
    padding: 18px 0 0;
    pointer-events: none;
    transition: padding 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

body.has-dev-banner .site-header {
    top: 34px;
}

.site-header.scrolled {
    padding-top: 10px;
}

.header-container {
    pointer-events: auto;
}

.header-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 8px 10px 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
        rgba(6, 7, 11, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition:
        border-color 0.45s ease,
        background 0.45s ease,
        box-shadow 0.45s ease,
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 20%, rgba(167, 139, 250, 0.08) 48%, rgba(34, 211, 238, 0.06) 58%, transparent 80%);
    opacity: 0.65;
    pointer-events: none;
}

.site-header.scrolled .header-bar {
    border-color: rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
        rgba(4, 5, 8, 0.82);
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(167, 139, 250, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(0);
}

.site-header .logo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    text-decoration: none;
    flex-shrink: 0;
}

.site-header .logo-img {
    width: 36px;
    height: 36px;
}

.site-header .logo-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.05;
}

.site-header .logo-copy strong {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text-primary);
}

.site-header .logo-copy small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.site-header .logo:hover {
    transform: none;
}

.site-header .nav-menu {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.site-header .nav-menu-track {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.22);
}

.site-header .nav-link {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
    padding: 8px 13px;
    border-radius: 999px;
    white-space: nowrap;
    transform: none;
    transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

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

.site-header .nav-link:hover {
    color: #fff;
    transform: none;
    background: rgba(255, 255, 255, 0.07);
}

.site-header .nav-link.active {
    color: #050505;
    background: linear-gradient(180deg, #ffffff, #e4e4e7);
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.12);
}

.site-header .nav-actions {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    gap: 8px;
}

.nav-actions-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 8px;
    margin-right: 2px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header .language-toggle,
.site-header .client-portal-button {
    height: 38px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
}

.site-header .client-portal-button span {
    font-size: 11px;
    letter-spacing: 0.04em;
}

.site-header .header-cta {
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 10px 28px rgba(255, 255, 255, 0.12);
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.site-header .header-cta i {
    width: 15px;
    height: 15px;
}

.site-header .mobile-menu-toggle {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}

/* Override legacy full-width header bar */
header.site-header {
    background: transparent;
    border-bottom: none;
}

header.site-header.scrolled {
    background: transparent;
    border-bottom: none;
    padding-bottom: 0;
}

body.is-ready .site-header .header-bar {
    animation: headerBarIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.05s;
}

@keyframes headerBarIn {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-cta {
    padding: 8px 16px;
    font-size: 13px;
}

.language-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    background: transparent;
    transition: var(--transition-normal);
}

.client-portal-button {
    min-width: 38px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-normal);
}

.client-portal-button:hover {
    color: #050505;
    background: #fff;
    border-color: #fff;
}

.client-portal-button svg {
    width: 14px;
}

.nav-admin-button {
    width: 38px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-normal);
}

.nav-admin-button:hover {
    color: #050505;
    background: #fff;
    border-color: #fff;
}

.nav-admin-button svg {
    width: 14px;
}

.language-toggle:hover {
    color: #050505;
    background: #fff;
    border-color: #fff;
}

.mobile-menu-toggle {
    display: none;
    width: 42px;
    height: 38px;
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.mobile-menu-toggle span {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 1px;
    background: #fff;
    transition: var(--transition-normal);
}

.mobile-menu-toggle span:first-child { top: 14px; }
.mobile-menu-toggle span:last-child { top: 22px; }

.mobile-menu-toggle.active span:first-child {
    top: 18px;
    transform: rotate(45deg);
}

.mobile-menu-toggle.active span:last-child {
    top: 18px;
    transform: rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 95;
    padding: 110px 24px 30px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.09), transparent 32%),
        rgba(2, 2, 3, 0.98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-18px);
    transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s ease;
    overflow: hidden;
    overscroll-behavior: contain;
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-menu-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: 520px;
    margin: 0 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.mobile-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.mobile-menu-label {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.mobile-language-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.035);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.mobile-language-button:hover {
    color: #050505;
    background: #fff;
    border-color: #fff;
}

.mobile-language-button svg {
    width: 15px;
}

.mobile-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-heading);
    font-size: clamp(24px, 7vw, 38px);
    font-weight: 600;
    letter-spacing: -0.04em;
}

.mobile-menu a svg {
    width: 20px;
}

.mobile-booking-link {
    margin-top: auto;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--radius-sm);
    color: #050505;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
}

.mobile-menu-tools {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 20px;
}

body:not(.admin-authorized) .mobile-menu-tools {
    display: grid;
}

.mobile-menu-tools button,
.mobile-menu-tools a {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.025);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.mobile-menu-tools svg {
    width: 15px;
}

.service-marquee {
    overflow: hidden;
    padding: 18px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.015);
    contain: layout paint;
}

.service-marquee-track {
    width: max-content;
    display: flex;
    align-items: center;
    animation: marqueeMove 32s linear infinite;
    -webkit-animation: marqueeMove 32s linear infinite;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.service-marquee-group {
    width: max-content;
    min-width: 100vw;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 26px;
    padding-right: 26px;
}

.service-marquee span {
    color: #d4d4d8;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-marquee i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #71717a;
}

@keyframes marqueeMove {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@-webkit-keyframes marqueeMove {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(-50%, 0, 0); }
}

section.reveal::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(1150px, calc(100% - 48px));
    height: 1px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
    transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
}

section.reveal.active::after {
    transform: translateX(-50%) scaleX(1);
}

.magnetic {
    will-change: transform;
}

/* Portfolio mockups and case studies */
.portfolio-card {
    isolation: isolate;
}

.portfolio-img-overlay {
    padding: 32px 22px 105px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-apex {
    background: radial-gradient(circle at 60% 20%, #3f3f46, #0a0a0b 55%);
}

.project-nova {
    background: radial-gradient(circle at 50% 25%, #eee9e2, #8f8982 48%, #191919 100%);
}

.project-taskflow {
    background: radial-gradient(circle at 70% 20%, #52525b, #111114 55%);
}

.project-browser {
    width: 92%;
    height: 88%;
    overflow: hidden;
    border-radius: 8px;
    transform: perspective(800px) rotateX(4deg) rotateY(-5deg);
    border: 1px solid rgba(255, 255, 255, 0.17);
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.48);
    transition: transform var(--transition-slow);
}

.portfolio-card:hover .project-browser {
    transform: perspective(800px) rotateX(0) rotateY(0) scale(1.035);
}

.project-browser-bar {
    height: 18px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(10, 10, 10, 0.95);
}

.project-browser-bar span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #71717a;
}

.apex-visual {
    height: calc(100% - 18px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, transparent 48%, rgba(255, 255, 255, 0.15) 49%, transparent 50%),
        #111;
}

.apex-visual b {
    font-family: var(--font-heading);
    font-size: 34px;
    letter-spacing: 0.28em;
}

.apex-visual small,
.nova-visual small {
    margin-top: 8px;
    font-size: 6px;
    letter-spacing: 0.22em;
}

.nova-visual {
    height: calc(100% - 18px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 15px;
    color: #131313;
    background: #ebe7e1;
}

.nova-visual b {
    font-family: var(--font-heading);
    font-size: 22px;
    letter-spacing: 0.14em;
}

.nova-product {
    position: absolute;
    top: 18px;
    right: 28px;
    width: 38px;
    height: 76px;
    border-radius: 5px 5px 12px 12px;
    background: linear-gradient(90deg, #d0cbc4, #fff, #b6afa7);
    box-shadow: 0 18px 20px rgba(0, 0, 0, 0.2);
}

.nova-product::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 9px;
    width: 20px;
    height: 12px;
    background: #292929;
}

.taskflow-visual {
    height: calc(100% - 18px);
    display: grid;
    grid-template-columns: 25% 1fr;
    gap: 8px;
    padding: 10px;
    background: #111114;
}

.taskflow-sidebar {
    border-radius: 4px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.12) 8px, transparent 8px) 8px 12px / 65% 24px repeat-y,
        #1a1a1e;
}

.taskflow-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.taskflow-board span {
    border-radius: 4px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.1) 20px, transparent 20px) 6px 8px / calc(100% - 12px) 38px repeat-y,
        #202026;
}

.portfolio-open-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 11px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(8px);
    transition: var(--transition-normal);
}

.portfolio-open-hint svg {
    width: 13px;
}

.portfolio-card:hover .portfolio-open-hint,
.portfolio-card:focus-visible .portfolio-open-hint {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-card.filter-enter {
    animation: portfolioEnter 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes portfolioEnter {
    from { opacity: 0; transform: translateY(22px) scale(0.95); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* FAQ and booking CTA */
.faq-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.faq-intro {
    position: sticky;
    top: 130px;
}

.faq-intro .section-header {
    text-align: left;
}

.faq-intro .section-title {
    max-width: 480px;
}

.faq-intro .section-desc {
    margin-bottom: 28px;
}

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

.faq-item {
    overflow: hidden;
    border-radius: 12px;
}

.faq-item > button {
    width: 100%;
    min-height: 72px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--text-primary);
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.faq-icon-toggle {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin-left: 16px;
}

.faq-icon-toggle::before,
.faq-icon-toggle::after {
    content: '';
    position: absolute;
    background-color: var(--text-primary);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
    border-radius: 1px;
}

/* Horizontal line */
.faq-icon-toggle::before {
    top: 6px;
    left: 0;
    width: 14px;
    height: 2px;
}

/* Vertical line */
.faq-icon-toggle::after {
    top: 0;
    left: 6px;
    width: 2px;
    height: 14px;
}

/* When the item is open, morph the plus into a minus */
.faq-item.open .faq-icon-toggle::after {
    transform: scaleY(0);
}

.faq-item.open .faq-icon-toggle::before {
    background-color: var(--primary);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer p {
    overflow: hidden;
    padding: 0 22px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.8;
    transition: padding var(--transition-normal);
}

.faq-item.open .faq-answer {
    grid-template-rows: 1fr;
}

.faq-item.open .faq-answer p {
    padding: 0 22px 22px;
}

.booking-cta {
    padding-top: 40px;
}

.booking-cta-card {
    padding: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 75% 0%, rgba(255, 255, 255, 0.12), transparent 33%),
        rgba(255, 255, 255, 0.025);
}

.booking-cta-card h2 {
    max-width: 650px;
    margin-bottom: 12px;
    font-size: 38px;
}

.booking-cta-card p {
    max-width: 650px;
    color: var(--text-secondary);
}

/* Chat attachment */
.assistant-composer {
    grid-template-columns: auto 1fr auto;
}

.assistant-attachment {
    width: 46px;
    height: 46px;
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    transition: var(--transition-normal);
}

.assistant-attachment:hover,
.assistant-attachment.has-file {
    color: #050505;
    background: #fff;
}

.assistant-attachment input {
    display: none;
}

.assistant-attachment svg {
    width: 17px;
}

.attachment-name {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    max-width: 260px;
    display: none;
    padding: 7px 10px;
    overflow: hidden;
    color: #050505;
    background: #fff;
    border-radius: 7px;
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.assistant-attachment.has-file .attachment-name {
    display: block;
}

.assistant-success-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-tools {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-tools button,
.footer-tools a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.footer-tools button:hover,
.footer-tools a:hover {
    color: var(--text-primary);
}

.footer-tools svg {
    width: 13px;
}

/* Shared experience modals */
.experience-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.experience-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.experience-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.84);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.experience-close {
    width: 40px;
    height: 40px;
    z-index: 3;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition-normal);
}

.experience-close:hover {
    color: #050505;
    background: #fff;
}

.experience-close svg {
    width: 17px;
}

.portfolio-case {
    width: min(1120px, 96vw);
    max-height: 90vh;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background: #080816;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.75);
    transform: translateY(24px) scale(0.97);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.experience-modal.active .portfolio-case,
.experience-modal.active .booking-panel,
.experience-modal.active .client-panel,
.experience-modal.active .admin-panel {
    transform: translateY(0) scale(1);
}

.portfolio-case > .experience-close {
    position: absolute;
    top: 18px;
    right: 18px;
}

.case-visual {
    min-height: 610px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #151515;
}

.case-visual .project-browser {
    width: 82%;
    height: 68%;
    min-height: 360px;
}

.case-content {
    padding: 64px 46px 46px;
    overflow-y: auto;
}

.case-content h2 {
    margin: 10px 0 18px;
    font-size: 42px;
}

.case-content > p {
    color: var(--text-secondary);
    font-size: 14px;
}

.case-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 28px 0;
}

.case-results article {
    padding: 15px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-align: center;
}

.case-results strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-heading);
    font-size: 20px;
}

.case-results span {
    color: var(--text-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.case-meta {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 30px;
}

.case-meta div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.case-meta small {
    color: var(--text-muted);
}

.case-meta strong {
    max-width: 65%;
    text-align: right;
    font-size: 12px;
}

.booking-panel,
.admin-panel {
    width: min(760px, 96vw);
    max-height: 90vh;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    padding: 42px;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: #080816;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.75);
    transform: translateY(24px) scale(0.97);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-panel > .experience-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.booking-heading h2 {
    margin: 8px 0 10px;
    font-size: 34px;
}

.booking-heading p,
.booking-note {
    color: var(--text-secondary);
    font-size: 12px;
}

.booking-step {
    margin-top: 28px;
}

.booking-step > label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.booking-dates,
.booking-times {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.booking-choice {
    padding: 12px 8px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: transform var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal);
}

.booking-choice:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.booking-choice.selected {
    color: #020203;
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

.booking-choice strong,
.booking-choice span {
    display: block;
}

.booking-choice strong {
    font-size: 14px;
}

.booking-choice span {
    margin-top: 2px;
    font-size: 9px;
}

.booking-unavailable {
    grid-column: 1 / -1;
    padding: 18px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    text-align: center;
    font-size: 10px;
    line-height: 1.6;
}

.booking-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 24px 0 14px;
}

.booking-fields input {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.booking-panel form > .btn {
    width: 100%;
}

.booking-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.booking-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.5;
    cursor: pointer;
}

.booking-consent input {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    accent-color: #fff;
}

.booking-panel form > .btn:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none !important;
}

.booking-note {
    margin-top: 11px;
    text-align: center;
}

.booking-note.is-success {
    color: #e4e4e7;
}

.booking-note.is-error {
    color: #fca5a5;
}

.is-hidden {
    display: none !important;
}

.quote-archive-status {
    margin: 8px 0 18px;
    color: var(--text-muted);
    font-size: 11px;
}

.quote-archive-status.is-saved {
    color: #86efac;
}

.quote-archive-status.is-error {
    color: #fca5a5;
}

.client-panel {
    width: min(920px, 96vw);
    max-height: 90vh;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    padding: 36px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: #080816;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.75);
    transform: translateY(24px) scale(0.97);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.client-panel > .experience-close {
    position: absolute;
    top: 18px;
    right: 18px;
}

.client-heading {
    max-width: 680px;
    margin-bottom: 24px;
}

.client-heading h2 {
    margin: 8px 0 10px;
    font-size: 34px;
}

.client-heading p,
.client-auth-card p,
.client-auth-note {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
}

.client-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.client-auth-card,
.portal-project,
.portal-document,
.invoice-history-entry {
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.client-auth-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.client-auth-card-heading svg {
    width: 18px;
    color: var(--text-secondary);
}

.client-auth-card-heading h3 {
    margin-bottom: 4px;
    font-size: 16px;
}

.client-auth-form {
    display: grid;
    gap: 8px;
}

.client-auth-form input,
.admin-status-select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.035);
    padding: 0 12px;
    font-family: inherit;
    font-size: 12px;
}

.client-auth-form button,
.client-account-bar button,
.invoice-history-entry button,
.portal-document button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.035);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-normal);
}

.client-auth-form button:hover,
.client-account-bar button:hover,
.invoice-history-entry button:hover,
.portal-document button:hover {
    color: #050505;
    border-color: #fff;
    background: #fff;
}

.client-account-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.client-account-bar strong {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}

.client-project-list,
.client-document-list {
    display: grid;
    gap: 12px;
}

.client-document-list {
    margin-top: 14px;
}

.portal-project h3,
.portal-document h3,
.invoice-history-entry h4 {
    font-size: 15px;
}

.portal-project-meta,
.portal-document-meta,
.invoice-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 10px;
}

.project-progress {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 14px;
}

.project-step {
    min-width: 0;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    text-align: center;
}

.project-step.is-complete {
    color: #050505;
    border-color: #fff;
    background: #fff;
}

body.client-page {
    min-height: 100vh;
}

body.client-page header {
    position: sticky;
    top: 0;
    background: rgba(2, 2, 3, 0.9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border-color);
}

.client-page #client-workspace {
    scroll-margin-top: 120px;
}

.client-page-main {
    position: relative;
    z-index: 1;
    padding-top: 24px;
    padding-bottom: 70px;
}

.client-dashboard-shell {
    width: min(1320px, calc(100% - 48px));
    min-height: calc(100vh - 160px);
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    gap: 18px;
    margin: 0 auto;
}

.client-dashboard-rail,
.client-dashboard-content {
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: rgba(8, 8, 18, 0.88);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.44);
}

.client-dashboard-rail {
    position: sticky;
    top: 24px;
    align-self: start;
    min-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 26px;
    overflow: hidden;
}

.client-dashboard-rail::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.11), transparent 28%),
        radial-gradient(circle at 100% 80%, rgba(99, 102, 241, 0.12), transparent 34%);
    opacity: 0.9;
}

.client-dashboard-rail > * {
    position: relative;
    z-index: 1;
}

.client-dashboard-rail h1 {
    margin: -4px 0 0;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.client-dashboard-rail > p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.75;
}

.client-rail-stats {
    display: grid;
    gap: 10px;
}

.client-rail-stats article {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 4px 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.client-rail-stats svg {
    grid-row: span 2;
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.client-rail-stats span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.client-rail-stats strong {
    min-width: 0;
    color: var(--text-primary);
    font-size: 13px;
}

.client-dashboard-content {
    min-width: 0;
    padding: 24px;
}

.client-dashboard-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.client-dashboard-topbar h2 {
    margin: 7px 0 6px;
    font-size: clamp(26px, 3.2vw, 40px);
}

.client-dashboard-topbar p {
    max-width: 680px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.7;
}

.client-auth-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.72fr);
    gap: 18px;
}

.client-auth-dashboard.is-hidden {
    display: none;
}

.client-access-preview,
.client-login-stack {
    min-width: 0;
}

.client-access-preview {
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.025);
    overflow: hidden;
}

.client-preview-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.client-preview-toolbar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
}

.client-preview-toolbar strong {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.client-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.client-preview-grid article {
    min-height: 128px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
}

.client-preview-grid span {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.client-preview-grid strong {
    display: block;
    margin-top: 12px;
    font-size: 18px;
}

.client-preview-grid i {
    display: block;
    width: 100%;
    height: 5px;
    margin-top: 24px;
    border-radius: 999px;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.1));
}

.client-preview-timeline {
    display: grid;
    gap: 10px;
}

.client-preview-timeline span {
    height: 58px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 52%),
        rgba(255, 255, 255, 0.025);
}

.client-login-stack {
    display: grid;
    gap: 14px;
}

.client-gate-card {
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.025);
}

.client-gate-card h3 {
    margin: 8px 0 10px;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.02;
}

.client-gate-card p,
.login-copy-panel p,
.login-panel-heading p,
.login-security-list span {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.7;
}

.client-gate-list {
    display: grid;
    gap: 10px;
}

.client-gate-list span {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    font-size: 12px;
    font-weight: 700;
}

.client-gate-list svg {
    width: 16px;
    flex: 0 0 auto;
}

.client-gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.login-page-main {
    min-height: calc(100vh - 84px);
    display: grid;
    align-items: center;
}

.login-shell {
    width: min(1160px, calc(100% - 48px));
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.72fr);
    gap: 18px;
    margin: 0 auto;
}

.login-copy-panel,
.login-form-panel {
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: rgba(8, 8, 18, 0.88);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.44);
}

.login-copy-panel {
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 34px;
    overflow: hidden;
}

.login-copy-panel h1 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(42px, 6vw, 74px);
    line-height: 0.96;
}

.login-copy-panel > p {
    max-width: 620px;
    margin-top: 18px;
    font-size: 15px;
}

.login-security-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.login-security-list article {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.login-security-list svg {
    width: 20px;
    color: var(--text-secondary);
}

.login-security-list strong,
.login-security-list span {
    display: block;
}

.login-security-list strong {
    margin-bottom: 5px;
    font-size: 14px;
}

.login-form-panel {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 24px;
}

.login-panel-heading {
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.login-panel-heading h2 {
    margin: 7px 0 6px;
    font-size: clamp(28px, 3.5vw, 44px);
}

.login-auth-dashboard {
    display: block;
}

.login-auth-dashboard .client-auth-card {
    min-height: 0;
}

.login-auth-dashboard .client-auth-form + .client-auth-form {
    margin-top: 8px;
}

.login-return-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.025);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: var(--transition-normal);
}

.login-return-link:hover {
    color: #050505;
    border-color: #fff;
    background: #fff;
}

.login-return-link svg {
    width: 14px;
}

.client-page-hero {
    position: relative;
    overflow: hidden;
    padding: 54px 0 38px;
}

.client-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.12), transparent 26%),
        radial-gradient(circle at 86% 36%, rgba(99, 102, 241, 0.12), transparent 32%);
    opacity: 0.75;
}

.client-page-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.55fr);
    gap: 44px;
    align-items: end;
}

.client-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.client-page-eyebrow svg {
    width: 15px;
}

.client-page-hero h1 {
    max-width: 820px;
    margin-bottom: 18px;
    font-size: clamp(42px, 6vw, 82px);
    line-height: 0.94;
    letter-spacing: -0.04em;
}

.client-page-hero p {
    max-width: 660px;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.75;
}

.client-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.client-page-side {
    display: grid;
    gap: 12px;
}

.client-page-kpi {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.client-page-kpi span {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.client-page-kpi strong {
    display: block;
    margin-top: 8px;
    font-size: 18px;
}

.client-page-workspace {
    padding: 34px 0 90px;
}

.client-page-section-header {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.client-page-section-header h2 {
    margin: 8px 0 0;
    font-size: 34px;
}

.client-page-section-header p {
    max-width: 520px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.7;
}

.client-page-portal {
    display: block;
}

.client-page-portal.is-hidden {
    display: none;
}

.client-page-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    margin-top: 28px;
}

.client-page-column {
    min-width: 0;
}

.client-page-column > p {
    max-width: 520px;
    margin: 8px 0 16px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.7;
}

.client-page-column h3 {
    font-size: 22px;
}

.client-tabs {
    position: relative;
    top: auto;
    z-index: 8;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 22px 0;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(5, 5, 8, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.client-tabs button {
    min-width: 0;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    background: transparent;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition-normal);
}

.client-tabs button:hover,
.client-tabs button.is-active {
    color: #050505;
    border-color: #fff;
    background: #fff;
}

.client-tabs svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.client-tab-panel {
    display: none;
}

.client-tab-panel.is-active {
    display: block;
}

.client-overview-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.client-overview-card,
.client-plan-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.client-overview-card span,
.client-plan-meta,
.client-price-list small {
    color: var(--text-muted);
    font-size: 10px;
}

.client-overview-card span {
    display: block;
    margin-bottom: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.client-overview-card strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 17px;
}

.client-overview-card small {
    display: block;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 11px;
}

.client-overview-progress {
    margin-top: 16px;
}

.client-latest-activity,
.client-storage-note {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.client-latest-activity strong,
.client-latest-activity small {
    display: block;
}

.client-latest-activity small,
.client-storage-note p {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.7;
}

.client-activity-list {
    display: grid;
    gap: 10px;
}

.client-activity-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.client-activity-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.client-activity-icon svg {
    width: 16px;
}

.client-activity-item span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.client-activity-item strong,
.client-activity-item p {
    display: block;
    overflow-wrap: anywhere;
}

.client-activity-item strong {
    margin-top: 4px;
    font-size: 14px;
}

.client-activity-item p,
.client-activity-item time {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.55;
}

.client-activity-item time {
    white-space: nowrap;
}

.client-storage-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.client-storage-note svg {
    width: 18px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--text-secondary);
}

.client-plan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.client-plan-head h4 {
    margin-top: 6px;
    font-size: 20px;
}

.client-plan-head strong {
    flex: 0 0 auto;
    font-size: 20px;
}

.client-plan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.client-price-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.client-price-list div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}

.client-price-list span,
.client-price-list small {
    display: block;
}

.client-price-list b {
    flex: 0 0 auto;
}

.client-page .client-auth-grid {
    max-width: 980px;
}

.client-page .client-auth-card {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.client-page .client-account-bar {
    margin-bottom: 0;
}

.client-page-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    color: var(--text-muted);
    font-size: 11px;
}

.client-page-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
}

.client-page-trust svg {
    width: 13px;
}

.admin-entry-actions {
    display: grid;
    grid-template-columns: minmax(130px, 180px) auto;
    gap: 8px;
    margin-top: 10px;
}

.admin-status-select {
    min-height: 34px;
    color: var(--text-secondary);
    background: rgba(9, 9, 11, 0.95);
}

/* Admin dashboard */
.admin-panel {
    width: min(1180px, 96vw);
}

.admin-heading {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.admin-heading h2 {
    margin: 8px 0;
    font-size: 34px;
}

.admin-heading p {
    color: var(--text-secondary);
    font-size: 12px;
}

.admin-command-bar {
    position: sticky;
    top: -42px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 -10px 22px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: var(--panel-soft);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.admin-sync-state {
    display: flex;
    align-items: center;
    gap: 11px;
}

.admin-sync-state > div {
    display: grid;
    gap: 2px;
}

.admin-sync-state strong {
    font-size: 12px;
}

.admin-sync-state small {
    color: var(--text-muted);
    font-size: 10px;
}

.admin-sync-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.08), 0 0 18px rgba(251, 191, 36, 0.35);
}

.admin-sync-state.is-ready .admin-sync-dot {
    background: #4ade80;
    box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.08), 0 0 18px rgba(74, 222, 128, 0.3);
}

.admin-sync-state.is-dirty .admin-sync-dot {
    background: #60a5fa;
    box-shadow: 0 0 0 5px rgba(96, 165, 250, 0.08), 0 0 18px rgba(96, 165, 250, 0.3);
}

.admin-sync-state.is-error .admin-sync-dot {
    background: #f87171;
    box-shadow: 0 0 0 5px rgba(248, 113, 113, 0.08), 0 0 18px rgba(248, 113, 113, 0.3);
}

.admin-save-button {
    min-height: 42px;
    padding: 0 18px;
}

.admin-availability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.admin-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
        #080816;
}

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

.admin-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-card-heading > svg {
    width: 19px;
    color: var(--text-muted);
}

.admin-card-heading h3,
.admin-local-heading h3 {
    margin-top: 4px;
    font-size: 17px;
}

.admin-card-kicker {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.admin-card-help {
    margin: 8px 0 16px;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.6;
}

.admin-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7px;
}

.admin-weekdays button,
.admin-time-chip {
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: var(--transition-normal);
}

.admin-weekdays button {
    display: grid;
    gap: 3px;
    padding: 12px 5px;
}

.admin-weekdays button:hover,
.admin-weekdays button.is-active {
    color: #050505;
    border-color: #fff;
    background: #fff;
    transform: translateY(-2px);
}

.admin-weekdays span {
    font-size: 12px;
    font-weight: 800;
}

.admin-weekdays small {
    font-size: 8px;
    opacity: 0.65;
}

.admin-time-options {
    min-height: 42px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
}

.admin-time-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    color: #f4f4f5;
    font-size: 11px;
}

.admin-time-chip:hover {
    border-color: rgba(248, 113, 113, 0.55);
    background: rgba(248, 113, 113, 0.08);
}

.admin-time-chip svg {
    width: 12px;
    height: 12px;
    color: var(--text-muted);
}

.admin-inline-form,
.admin-exception-form,
.admin-vacation-form {
    display: grid;
    gap: 8px;
}

.admin-inline-form {
    grid-template-columns: minmax(0, 1fr) auto;
}

.admin-exception-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.admin-vacation-form {
    grid-template-columns: minmax(180px, 1.35fr) 1fr 1fr auto;
}

.admin-vacation-form label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 7px;
    padding-left: 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.025);
    font-size: 9px;
}

.admin-vacation-form label input {
    border: 0;
    background: transparent;
}

.admin-inline-form input,
.admin-exception-form input,
.admin-exception-form select,
.admin-vacation-form input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: #f4f4f5;
    background: rgba(255, 255, 255, 0.025);
    color-scheme: dark;
    font-size: 11px;
}

.admin-inline-form button,
.admin-exception-form button,
.admin-vacation-form > button {
    min-height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #050505;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.admin-inline-form button svg,
.admin-exception-form button svg,
.admin-vacation-form > button svg {
    width: 13px;
}

.admin-rule-list {
    display: grid;
    gap: 7px;
    margin-top: 12px;
}

.admin-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 11px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.admin-rule > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.admin-rule strong {
    font-size: 11px;
}

.admin-rule span {
    color: var(--text-muted);
    font-size: 9px;
}

.admin-rule button {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
}

.admin-rule button:hover {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.09);
}

.admin-rule button svg {
    width: 13px;
}

.admin-rules-empty {
    padding: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--text-muted);
    text-align: center;
    font-size: 9px;
}

.admin-local-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 30px 0 14px;
}

.admin-local-heading p {
    color: var(--text-muted);
    font-size: 9px;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.admin-stats article {
    padding: 18px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.admin-stats svg {
    width: 17px;
    grid-row: span 2;
    align-self: center;
}

.admin-stats span {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
}

.admin-stats strong {
    font-family: var(--font-heading);
    font-size: 24px;
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.admin-grid > section {
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.015);
}

.admin-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.admin-section-title h3 {
    font-size: 15px;
}

.admin-section-title button {
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
}

.admin-list {
    max-height: 310px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.admin-entry {
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.admin-entry-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.admin-entry strong {
    font-size: 12px;
}

.admin-entry time,
.admin-entry p,
.admin-entry span {
    color: var(--text-secondary);
    font-size: 10px;
}

.admin-entry p {
    margin-top: 7px;
}

.admin-empty {
    padding: 30px 15px;
    color: var(--text-muted);
    text-align: center;
    font-size: 11px;
}

.site-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 6000;
    max-width: min(420px, calc(100% - 32px));
    padding: 12px 18px;
    color: #050505;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 20px);
    transition: var(--transition-normal);
}

.site-toast.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

html.nav-scrolling .scroll-progress {
    height: 4px;
    filter: brightness(1.8) drop-shadow(0 0 12px rgba(255, 255, 255, 0.65));
    transition: height 0.25s ease, filter 0.25s ease;
}

html.nav-scrolling .site-header .header-bar {
    transform: scale(0.975);
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

html.nav-scrolling .grid-overlay {
    opacity: 1;
    filter: brightness(1.25);
    transition: filter 0.45s ease, opacity 0.45s ease;
}

html.nav-scrolling .bg-blobs .blob {
    filter: blur(72px) brightness(1.35) saturate(1.2);
    transition: filter 0.45s ease, transform 0.45s ease;
}

html.nav-scroll-down.nav-scrolling .bg-blobs .blob-1 {
    transform: translateY(18px) scale(1.06);
}

html.nav-scroll-up.nav-scrolling .bg-blobs .blob-3 {
    transform: translateY(-18px) scale(1.06);
}

html.nav-scrolling section[id],
html.nav-scrolling #hero {
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.55s ease;
}

html.nav-scroll-down.nav-scrolling section[id],
html.nav-scroll-down.nav-scrolling #hero {
    transform: translateY(-14px) scale(0.982);
    filter: saturate(0.82) brightness(0.86);
}

html.nav-scroll-up.nav-scrolling section[id],
html.nav-scroll-up.nav-scrolling #hero {
    transform: translateY(14px) scale(0.982);
    filter: saturate(0.82) brightness(0.86);
}

html.nav-scrolling::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    background:
        radial-gradient(ellipse 85% 55% at 50% 50%, rgba(2, 2, 3, 0.42), transparent 72%),
        radial-gradient(
            ellipse 130% 60% at 50% var(--nav-aurora-y, 50%),
            rgba(255, 255, 255, 0.14),
            rgba(113, 113, 122, 0.06) 45%,
            transparent 70%
        );
    opacity: 0;
    animation: navVignettePulse var(--nav-duration, 900ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

html.nav-scroll-down {
    --nav-aurora-y: 90%;
}

html.nav-scroll-up {
    --nav-aurora-y: 10%;
}

@keyframes navVignettePulse {
    0%, 100% { opacity: 0; }
    18%, 82% { opacity: 1; }
}

.nav-transition-layer {
    position: fixed;
    inset: 0;
    z-index: 115;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.nav-transition-layer.is-active {
    opacity: 1;
    visibility: visible;
}

.nav-transition-beam {
    position: absolute;
    left: -8%;
    width: 116%;
    height: min(46vh, 420px);
    top: 0;
    border-radius: 50%;
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 16%,
            rgba(255, 255, 255, 0.32) 48%,
            rgba(200, 200, 210, 0.18) 72%,
            transparent 100%
        );
    box-shadow:
        0 0 60px rgba(255, 255, 255, 0.22),
        0 0 140px rgba(255, 255, 255, 0.1);
    filter: blur(6px);
    opacity: 0;
    will-change: transform, opacity;
}

.nav-transition-layer.is-down .nav-transition-beam {
    animation: navBeamMoveDown var(--nav-duration, 900ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nav-transition-layer.is-up .nav-transition-beam {
    animation: navBeamMoveUp var(--nav-duration, 900ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes navBeamMoveDown {
    0% { transform: translateY(-55vh) scaleX(0.55); opacity: 0; }
    14% { opacity: 1; transform: translateY(-5vh) scaleX(1); }
    86% { opacity: 0.92; }
    100% { transform: translateY(115vh) scaleX(0.88); opacity: 0; }
}

@keyframes navBeamMoveUp {
    0% { transform: translateY(115vh) scaleX(0.55); opacity: 0; }
    14% { opacity: 1; transform: translateY(55vh) scaleX(1); }
    86% { opacity: 0.92; }
    100% { transform: translateY(-55vh) scaleX(0.88); opacity: 0; }
}

.nav-transition-chevron {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    opacity: 0;
}

.nav-transition-chevron::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    margin: 6px auto 0;
    border-right: 3px solid rgba(255, 255, 255, 0.92);
    border-bottom: 3px solid rgba(255, 255, 255, 0.92);
    transform: rotate(45deg);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.55));
    border-radius: 1px;
}

.nav-transition-layer.is-up .nav-transition-chevron::before {
    margin-top: 10px;
    transform: rotate(-135deg);
}

.nav-transition-layer.is-down .nav-transition-chevron {
    animation: navChevronDown var(--nav-duration, 900ms) ease forwards;
}

.nav-transition-layer.is-up .nav-transition-chevron {
    animation: navChevronUp var(--nav-duration, 900ms) ease forwards;
}

@keyframes navChevronDown {
    0%, 100% { opacity: 0; transform: translateY(-24px); }
    12%, 88% { opacity: 1; }
    50% { transform: translateY(18px); }
}

@keyframes navChevronUp {
    0%, 100% { opacity: 0; transform: translateY(24px); }
    12%, 88% { opacity: 1; }
    50% { transform: translateY(-18px); }
}

.nav-transition-edge {
    position: fixed;
    top: 18%;
    bottom: 18%;
    width: 2px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(255, 255, 255, 0.55) 35%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.55) 65%,
        transparent
    );
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.35);
    opacity: 0;
}

.nav-transition-edge--left {
    left: 28px;
}

.nav-transition-edge--right {
    right: 28px;
}

.nav-transition-layer.is-down .nav-transition-edge {
    animation: navEdgeDown var(--nav-duration, 900ms) ease forwards;
}

.nav-transition-layer.is-up .nav-transition-edge {
    animation: navEdgeUp var(--nav-duration, 900ms) ease forwards;
}

@keyframes navEdgeDown {
    0% { opacity: 0; transform: translateY(-30vh); }
    20%, 80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(30vh); }
}

@keyframes navEdgeUp {
    0% { opacity: 0; transform: translateY(30vh); }
    20%, 80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-30vh); }
}

@media (prefers-reduced-motion: reduce) {
    html.nav-scrolling::before,
    .nav-transition-layer,
    html.nav-scrolling section[id],
    html.nav-scrolling #hero {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    :where(
        .btn,
        .filter-btn,
        .language-toggle,
        .client-portal-button,
        .nav-admin-button,
        .mobile-menu-toggle,
        .mobile-language-button,
        .mobile-menu a,
        .mobile-menu-tools button,
        .mobile-menu-tools a,
        .mobile-booking-link,
        .portfolio-card,
        .footer-tools button,
        .footer-tools a,
        .experience-close,
        .booking-choice,
        .client-auth-form button,
        .client-account-bar button,
        .invoice-history-entry button,
        .portal-document button,
        .admin-weekdays button,
        .admin-time-chip,
        .admin-rule button,
        .admin-section-title button,
        .apex-site-btn,
        .nova-add-btn,
        .nova-cart-checkout-btn,
        .taskflow-site-card,
        .taskflow-site-action-btn,
        .star-select-item
    ) {
        transform-style: preserve-3d;
        will-change: transform, filter;
    }

    :where(
        .btn,
        .filter-btn,
        .language-toggle,
        .client-portal-button,
        .nav-admin-button,
        .mobile-menu-toggle,
        .mobile-language-button,
        .mobile-menu a,
        .mobile-menu-tools button,
        .mobile-menu-tools a,
        .mobile-booking-link,
        .footer-tools button,
        .footer-tools a,
        .experience-close,
        .client-auth-form button,
        .client-account-bar button,
        .invoice-history-entry button,
        .portal-document button,
        .admin-time-chip,
        .admin-rule button,
        .admin-section-title button,
        .apex-site-btn,
        .nova-add-btn,
        .nova-cart-checkout-btn,
        .taskflow-site-action-btn,
        .star-select-item
    ):hover {
        transform: translate3d(0, -5px, 0) scale(1.012);
        filter: drop-shadow(0 14px 18px rgba(255, 255, 255, 0.08));
    }

    .filter-btn:hover,
    .nova-cart-checkout-btn:hover {
        box-shadow: 0 16px 36px rgba(255, 255, 255, 0.18);
    }

    .portfolio-card:hover,
    .taskflow-site-card:hover {
        transform: translate3d(0, -8px, 0) scale(1.018);
        box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55), 0 0 34px rgba(255, 255, 255, 0.07);
    }

    .booking-choice:hover,
    .admin-weekdays button:hover {
        transform: translate3d(0, -6px, 0) scale(1.018);
    }

    .booking-choice.selected:hover,
    .admin-weekdays button.is-active:hover {
        transform: translate3d(0, -6px, 0) scale(1.03);
    }
}

@media (max-width: 1180px) {
    .site-header .nav-link {
        padding: 7px 10px;
        font-size: 12px;
    }

    .site-header .nav-menu-track {
        gap: 1px;
    }

    .site-header .header-cta span {
        display: none;
    }

    .site-header .header-cta {
        width: 40px;
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 1000px) {
    .nav-menu { gap: 18px; }
    .nav-link { font-size: 12px; }
    .faq-layout { gap: 40px; }
    .portfolio-case { grid-template-columns: 1fr; overflow-y: auto; }
    .case-visual { min-height: 410px; }
    .case-content { overflow: visible; }
}

@media (max-width: 768px) {
    body.has-dev-banner .site-header {
        top: 40px;
    }

    .site-header {
        padding: 12px 0 0;
    }

    .site-header.scrolled {
        padding-top: 8px;
    }

    .header-bar {
        min-height: 52px;
        padding: 6px 8px 6px 10px;
        border-radius: 18px;
    }

    .site-header .logo-copy small {
        display: none;
    }

    .site-header .logo-copy strong {
        font-size: 16px;
    }

    .site-header .logo-mark {
        display: contents;
    }

    .nav-actions-tools {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }

    .site-header .client-portal-button span {
        display: none;
    }

    .site-header .client-portal-button {
        width: 38px;
        padding: 0;
    }

    .site-header .header-cta {
        display: none;
    }

    .film-grain { opacity: 0.02; }
    .bg-blobs::before {
        animation-duration: 40s;
        background:
            radial-gradient(ellipse 80% 50% at 10% 10%, rgba(99, 102, 241, 0.14), transparent 70%),
            radial-gradient(ellipse 70% 45% at 90% 50%, rgba(139, 92, 246, 0.10), transparent 72%),
            radial-gradient(ellipse 80% 40% at 50% 90%, rgba(59, 130, 246, 0.09), transparent 74%);
    }
    .bg-blobs::after {
        animation: none;
    }
    .grid-overlay {
        background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px;
    }
    .glass,
    header.scrolled,
    .assistant-header,
    .assistant-composer,
    .experience-modal-backdrop {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .reveal,
    .reveal-item,
    .portfolio-card.filter-enter {
        filter: none;
    }
    .mobile-menu {
        z-index: 110;
        padding-top: 92px;
    }

    .mobile-menu-toggle { display: block; }
    body.admin-authorized .nav-admin-button { display: none !important; }
    .language-toggle { height: 38px; }
    .client-portal-button {
        width: 42px;
        height: 38px;
        padding: 0;
    }
    .client-portal-button span { display: none; }
    .header-cta span { display: none; }
    .header-cta { width: 42px; height: 38px; padding: 0; }
    .nav-actions { margin-left: auto; }

    .service-marquee { margin-top: -1px; }
    .service-marquee span { font-size: 11px; }

    .portfolio-img-overlay { padding: 24px 18px 110px; }
    .project-browser { height: 80%; }
    .portfolio-open-hint { opacity: 1; transform: none; }

    .faq-layout { grid-template-columns: 1fr; }
    .faq-intro { position: static; }
    .booking-cta-card {
        padding: 30px 24px;
        align-items: flex-start;
        flex-direction: column;
    }
    .booking-cta-card h2 { font-size: 28px; }

    .assistant-composer { grid-template-columns: 44px 1fr 52px; }
    .assistant-attachment { width: 44px; }

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

    .experience-modal { padding: 10px; }
    .portfolio-case,
    .booking-panel,
    .client-panel,
    .admin-panel { width: 100%; max-height: 94vh; border-radius: 16px; }
    .case-visual { min-height: 310px; }
    .case-visual .project-browser { min-height: 240px; }
    .case-content { padding: 34px 24px; }
    .case-content h2 { font-size: 32px; }
    .case-results { grid-template-columns: 1fr 1fr 1fr; }
    .case-results strong { font-size: 16px; }

    .booking-panel,
    .client-panel,
    .admin-panel { padding: 28px 20px; }
    .client-page-main { padding-top: 16px; }
    .client-dashboard-shell {
        width: min(100% - 22px, 760px);
        min-height: 0;
        grid-template-columns: 1fr;
    }
    .client-dashboard-rail {
        position: relative;
        top: auto;
        min-height: 0;
    }
    .client-dashboard-content {
        padding: 14px;
    }
    .client-dashboard-topbar,
    .client-auth-dashboard {
        grid-template-columns: 1fr;
    }
    .client-dashboard-topbar {
        flex-direction: column;
    }
    .login-page-main {
        align-items: start;
    }
    .login-shell {
        width: min(100% - 22px, 760px);
        grid-template-columns: 1fr;
    }
    .login-copy-panel {
        min-height: 0;
        padding: 24px;
    }
    .login-security-list {
        grid-template-columns: 1fr;
    }
    .login-form-panel {
        padding: 14px;
    }
    .client-gate-card {
        min-height: 0;
    }
    .client-access-preview {
        min-height: 360px;
    }
    .client-preview-grid {
        grid-template-columns: 1fr;
    }
    .client-page-hero { padding: 38px 0 24px; }
    .client-page-hero-inner,
    .client-page-columns {
        grid-template-columns: 1fr;
    }
    .client-page-hero h1 { font-size: 44px; }
    .client-page-side {
        grid-template-columns: 1fr;
    }
    .client-page-section-header {
        align-items: flex-start;
        flex-direction: column;
    }
    .client-tabs {
        position: static;
        grid-template-columns: 1fr 1fr;
    }
    .client-overview-grid {
        grid-template-columns: 1fr 1fr;
    }
    .client-activity-item {
        grid-template-columns: 38px minmax(0, 1fr);
    }
    .client-activity-item time {
        grid-column: 2;
        white-space: normal;
    }
    .client-plan-head {
        flex-direction: column;
    }
    .client-auth-grid { grid-template-columns: 1fr; }
    .client-account-bar { align-items: flex-start; flex-direction: column; }
    .project-progress { grid-template-columns: 1fr; }
    .project-step { height: 34px; }
    .booking-dates,
    .booking-times { grid-template-columns: repeat(2, 1fr); }
    .booking-fields { grid-template-columns: 1fr; }
    .admin-command-bar {
        top: -28px;
        margin-inline: -4px;
    }
    .admin-availability-grid { grid-template-columns: 1fr; }
    .admin-card-wide { grid-column: auto; }
    .admin-weekdays { grid-template-columns: repeat(4, 1fr); }
    .admin-exception-form,
    .admin-vacation-form { grid-template-columns: 1fr 1fr; }
    .admin-vacation-form > button { grid-column: 1 / -1; }
    .admin-local-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
    .admin-stats { grid-template-columns: 1fr 1fr; }
    .admin-grid { grid-template-columns: 1fr; }
}

.page-paused *,
.page-paused *::before,
.page-paused *::after {
    animation-play-state: paused !important;
}

@media (max-width: 430px) {
    .nav-container { padding: 0 16px; }
    .header-container { padding-left: 16px; padding-right: 16px; }
    .logo { gap: 8px; font-size: 18px; }
    .logo-img { height: 32px; }
    .nav-actions { gap: 6px; }
    .header-cta { display: none; }

    .assistant-composer {
        grid-template-columns: 42px 1fr 48px;
        gap: 7px;
    }
    .assistant-input-wrap { padding: 0 10px; }
    .assistant-input-wrap > svg { display: none; }
    .assistant-attachment { width: 42px; }
    .assistant-send { min-width: 48px; }

    .case-results { gap: 5px; }
    .case-results article { padding: 12px 5px; }
    .client-page-hero h1 { font-size: 38px; }
    .client-dashboard-shell {
        width: calc(100% - 18px);
    }
    .client-dashboard-rail,
    .client-dashboard-content {
        border-radius: 14px;
    }
    .client-dashboard-rail {
        padding: 20px;
    }
    .login-shell {
        width: calc(100% - 18px);
    }
    .login-copy-panel,
    .login-form-panel {
        border-radius: 14px;
    }
    .login-copy-panel h1 {
        font-size: 40px;
    }
    .client-gate-actions,
    .client-gate-actions .btn {
        width: 100%;
    }
    .client-dashboard-topbar {
        padding: 14px;
    }
    .client-page-actions { align-items: stretch; flex-direction: column; }
    .client-page-actions .btn { width: 100%; }
    .client-tabs,
    .client-overview-grid {
        grid-template-columns: 1fr;
    }
    .client-tabs button {
        justify-content: flex-start;
    }
    .client-storage-note {
        flex-direction: column;
    }
    .client-price-list div {
        flex-direction: column;
        gap: 6px;
    }
    .admin-heading h2 { font-size: 27px; }
    .admin-command-bar { align-items: stretch; flex-direction: column; }
    .admin-save-button { width: 100%; }
    .admin-weekdays { grid-template-columns: repeat(2, 1fr); }
    .admin-exception-form,
    .admin-vacation-form { grid-template-columns: 1fr; }
    .admin-vacation-form > button { grid-column: auto; }
    .admin-stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PORTFOLIO MINI-SITES SIMULATOR STYLES
   ========================================================================== */
.case-visual .project-browser {
    width: 90% !important;
    height: 88% !important;
    min-height: 520px !important;
    max-width: 960px !important;
    background: #0d0d15;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: none !important;
    transition: none !important;
}

.case-visual .project-browser-bar {
    height: 32px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    background: #12121a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.case-visual .browser-dots {
    display: flex;
    gap: 6px;
}

.case-visual .browser-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.case-visual .browser-dots span:nth-child(1) { background: #ef4444; }
.case-visual .browser-dots span:nth-child(2) { background: #eab308; }
.case-visual .browser-dots span:nth-child(3) { background: #22c55e; }

.case-visual .project-browser-address {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 45%;
    height: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #a1a1aa;
    gap: 6px;
    user-select: none;
}

.case-visual .project-browser-address svg {
    width: 10px;
    height: 10px;
    color: #10b981;
}

.case-visual .project-browser-content {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    background: #09090b;
}

/* --- Apex Architecture Mini-Site --- */
.apex-site {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #09090b;
    color: #ffffff;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
}

.apex-site-header {
    height: 50px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(9, 9, 11, 0.9);
    backdrop-filter: blur(8px);
    z-index: 10;
}

.apex-site-logo {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #ffffff;
}

.apex-site-nav {
    display: flex;
    gap: 20px;
}

.apex-site-nav span {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #a1a1aa;
    cursor: pointer;
    transition: color 0.2s;
}

.apex-site-nav span:hover {
    color: #ffffff;
}

.apex-site-hero {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 30px;
}

.apex-site-bg-canvas {
    position: absolute;
    inset: 0;
    background: #0d0d11;
    z-index: 1;
    transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.apex-site-bg-grid {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, #ffffff 1px, transparent 1px),
        linear-gradient(to bottom, #ffffff 1px, transparent 1px);
    z-index: 2;
}

.apex-site-vector {
    position: absolute;
    inset: 10%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s;
}

.apex-site-vector svg {
    width: 60%;
    height: 60%;
    stroke: #ffffff;
    stroke-width: 0.8px;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation: drawVector 3s ease forwards;
    opacity: 0.75;
}

@keyframes drawVector {
    from { stroke-dashoffset: 1000; opacity: 0; }
    to { stroke-dashoffset: 0; opacity: 0.75; }
}

.apex-site-info {
    position: relative;
    z-index: 5;
    background: rgba(9, 9, 11, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
    width: 320px;
    backdrop-filter: blur(6px);
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s;
}

.apex-site-info.changing {
    transform: translateY(15px);
    opacity: 0;
}

.apex-site-info h4 {
    font-size: 20px;
    margin: 0 0 6px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.apex-site-info p {
    font-size: 11px;
    color: #a1a1aa;
    margin: 0 0 14px;
    line-height: 1.5;
}

.apex-site-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
}

.apex-site-meta div span {
    display: block;
    color: #71717a;
    margin-bottom: 2px;
}

.apex-site-meta div strong {
    color: #ffffff;
    font-weight: 600;
}

.apex-site-controls {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 5;
    display: flex;
    gap: 8px;
}

.apex-site-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(9, 9, 11, 0.8);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.apex-site-btn:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

.apex-site-btn svg {
    width: 14px;
    height: 14px;
}

/* --- Nova Cosmetics Mini-Site --- */
.nova-site {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fbfaf7;
    color: #292524;
    font-family: 'Plus Jakarta Sans', sans-serif;
    position: relative;
    overflow: hidden;
}

.nova-site-header {
    height: 52px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eae6df;
    background: #fbfaf7;
    z-index: 10;
}

.nova-site-logo {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #1c1917;
}

.nova-site-nav {
    display: flex;
    gap: 20px;
}

.nova-site-nav span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #78716c;
    cursor: pointer;
}

.nova-site-cart-trigger {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nova-site-cart-trigger svg {
    width: 16px;
    height: 16px;
}

.nova-site-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #d97706;
    color: #ffffff;
    font-size: 8px;
    font-weight: 700;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nova-site-body {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: calc(100% - 52px);
    overflow: hidden;
}

.nova-site-visual-panel {
    background: #f5f2eb;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nova-bottle-container {
    width: 140px;
    height: 250px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nova-bottle-cap {
    width: 44px;
    height: 48px;
    background: linear-gradient(to right, #e2ddd5, #beaba0);
    border-radius: 4px 4px 1px 1px;
    border-bottom: 2px solid #7c6f64;
    position: relative;
    z-index: 2;
}

.nova-bottle-body {
    width: 84px;
    height: 170px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px 12px 18px 18px;
    backdrop-filter: blur(6px);
    position: relative;
    z-index: 1;
    margin-top: -2px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05), inset 0 2px 5px rgba(255,255,255,0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nova-bottle-liquid {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    top: 30px;
    background: linear-gradient(180deg, rgba(245, 220, 200, 0.2) 0%, rgba(210, 180, 160, 0.7) 100%);
    border-radius: 0 0 14px 14px;
    z-index: 1;
    box-shadow: inset 0 -10px 20px rgba(255,255,255,0.4);
}

.nova-bottle-label {
    position: relative;
    z-index: 2;
    background: #ffffff;
    width: 62px;
    padding: 18px 4px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    text-align: center;
    border: 1px solid #f1eeeb;
}

.nova-bottle-label h5 {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.nova-bottle-label p {
    margin: 4px 0 0;
    font-size: 5px;
    letter-spacing: 0.05em;
    color: #a8a29e;
}

.nova-site-info-panel {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fbfaf7;
    overflow-y: auto;
}

.nova-site-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #b45309;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.nova-site-info-panel h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 10px;
    color: #1c1917;
}

.nova-site-stars {
    display: flex;
    gap: 3px;
    color: #fbbf24;
    font-size: 12px;
    margin-bottom: 12px;
}

.nova-site-price {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #1c1917;
}

.nova-site-desc {
    font-size: 11px;
    color: #57534e;
    line-height: 1.6;
    margin: 0 0 20px;
}

.nova-size-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.nova-size-btn {
    padding: 8px 16px;
    border: 1px solid #d6d3d1;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: #57534e;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.nova-size-btn.active {
    border-color: #1c1917;
    background: #1c1917;
    color: #ffffff;
}

.nova-add-btn {
    height: 40px;
    background: #1c1917;
    color: #ffffff;
    border: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nova-add-btn:hover {
    background: #44403c;
}

.nova-cart-overlay {
    position: absolute;
    inset: 0;
    background: rgba(28, 25, 23, 0.4);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.nova-cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

.nova-cart-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    background: #ffffff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    z-index: 101;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.nova-cart-drawer.active {
    transform: translateX(0);
}

.nova-cart-header {
    height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f2eb;
}

.nova-cart-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.nova-cart-close {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #78716c;
}

.nova-cart-body {
    flex-grow: 1;
    padding: 16px;
    overflow-y: auto;
}

.nova-cart-empty {
    text-align: center;
    color: #a8a29e;
    margin-top: 40px;
    font-size: 11px;
}

.nova-cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid #f5f2eb;
    margin-bottom: 14px;
}

.nova-cart-item-info h5 {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
}

.nova-cart-item-info span {
    font-size: 9px;
    color: #a8a29e;
}

.nova-cart-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nova-cart-qty-btn {
    width: 20px;
    height: 20px;
    border: 1px solid #e7e5e4;
    background: #fbfaf7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    border-radius: 2px;
}

.nova-cart-qty-val {
    font-size: 11px;
    font-weight: 600;
    min-width: 12px;
    text-align: center;
}

.nova-cart-item-price {
    font-size: 11px;
    font-weight: 700;
}

.nova-cart-footer {
    padding: 16px;
    border-top: 1px solid #f5f2eb;
    background: #fbfaf7;
}

.nova-cart-subtotal {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 14px;
}

.nova-cart-checkout-btn {
    width: 100%;
    height: 38px;
    background: #1c1917;
    color: #ffffff;
    border: none;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.nova-cart-checkout-btn:hover {
    background: #44403c;
}

/* --- TaskFlow Pro Mini-Site --- */
.taskflow-site {
    height: 100%;
    display: flex;
    background: #0b0b11;
    color: #f4f4f5;
    font-family: 'Space Grotesk', sans-serif;
    overflow: hidden;
}

.taskflow-site-sidebar {
    width: 160px;
    background: #0f0f18;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
}

.taskflow-site-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 24px;
    color: #8b5cf6;
}

.taskflow-site-logo svg {
    width: 14px;
    height: 14px;
}

.taskflow-site-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.taskflow-site-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 11px;
    color: #a1a1aa;
    border-radius: 6px;
    cursor: pointer;
}

.taskflow-site-menu-item.active {
    background: rgba(139, 92, 246, 0.1);
    color: #ffffff;
    font-weight: 600;
}

.taskflow-site-menu-item svg {
    width: 13px;
    height: 13px;
}

.taskflow-site-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.taskflow-site-topbar {
    height: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.taskflow-site-project-name {
    font-size: 12px;
    font-weight: 600;
}

.taskflow-site-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 220px;
}

.taskflow-site-progress-text {
    font-size: 10px;
    color: #a1a1aa;
    white-space: nowrap;
}

.taskflow-site-progress-bar-bg {
    flex-grow: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.taskflow-site-progress-bar-fill {
    height: 100%;
    background: #8b5cf6;
    width: 60%;
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.taskflow-site-board {
    flex-grow: 1;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    overflow: hidden;
    height: calc(100% - 48px);
}

.taskflow-site-column {
    background: #11111a;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

.taskflow-site-column-header {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.taskflow-site-column-title {
    font-size: 11px;
    font-weight: 600;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.taskflow-site-column-count {
    background: rgba(255, 255, 255, 0.06);
    color: #a1a1aa;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.taskflow-site-card-list {
    flex-grow: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.taskflow-site-card {
    background: #181825;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px;
    position: relative;
    transition: border-color 0.2s, background-color 0.2s;
}

.taskflow-site-card:hover {
    border-color: rgba(139, 92, 246, 0.4);
    background: #1c1c2b;
}

.taskflow-site-card-title {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 8px;
}

.taskflow-site-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.taskflow-site-priority-tag {
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

.taskflow-site-priority-tag.high {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.taskflow-site-priority-tag.medium {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.taskflow-site-priority-tag.low {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.taskflow-site-card-actions {
    display: flex;
    gap: 4px;
}

.taskflow-site-action-btn {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: #a1a1aa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.taskflow-site-action-btn:hover {
    background: #8b5cf6;
    color: #ffffff;
    border-color: #8b5cf6;
}

.taskflow-site-action-btn svg {
    width: 10px;
    height: 10px;
}

.taskflow-site-add-form {
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    background: #11111a;
}

.taskflow-site-add-input {
    width: 100%;
    height: 30px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 0 10px;
    color: #ffffff;
    font-size: 10px;
    outline: none;
    transition: border-color 0.2s;
}

.taskflow-site-add-input:focus {
    border-color: #8b5cf6;
}

/* Responsiveness overrides for the simulator inside case visual */
@media (max-width: 1000px) {
    .case-visual .project-browser {
        width: 95% !important;
        height: 92% !important;
        min-height: 480px !important;
    }
    .nova-site-body {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
    .nova-site-visual-panel {
        padding: 20px 0;
        min-height: 200px;
    }
    .nova-bottle-container {
        height: 180px;
        transform: scale(0.85);
    }
    .nova-site-info-panel {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .case-visual .project-browser {
        width: 100% !important;
        height: 100% !important;
        min-height: 310px !important;
        border-radius: 0;
        border: none;
    }
    .case-visual .project-browser-address {
        display: none;
    }
    .taskflow-site-sidebar {
        display: none;
    }
    .taskflow-site-progress-wrap {
        width: 120px;
    }
    .taskflow-site-board {
        padding: 10px;
        gap: 8px;
    }
    .taskflow-site-card-list {
        padding: 6px;
        gap: 6px;
    }
    .taskflow-site-card {
        padding: 8px;
    }
    .taskflow-site-card-title {
        font-size: 10px;
        margin-bottom: 4px;
    }
    .taskflow-site-priority-tag {
        font-size: 7px;
        padding: 1px 4px;
    }
}

/* Hero status availability badge replacing stats */
.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--border-color);
    padding-top: 32px;
    width: 100%;
}

.status-pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.status-pulse-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #10b981;
    opacity: 0;
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

.status-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Star rating select in reviews form */
.review-stars-select {
    display: flex;
    gap: 8px;
    color: #52525b; /* zinc-600 */
    font-size: 24px;
    cursor: pointer;
    margin-top: 6px;
}

.star-select-item {
    transition: color 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
}

.star-select-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2px;
    fill: none;
    transition: fill 0.2s;
}

.star-select-item.active {
    color: #fbbf24; /* amber-400 */
}

.star-select-item.active svg {
    fill: #fbbf24 !important;
    stroke: #fbbf24 !important;
}

/* Hover effects for selecting note */
.review-stars-select:hover .star-select-item svg {
    color: #fbbf24;
    fill: #fbbf24 !important;
    stroke: #fbbf24 !important;
}

.star-select-item:hover ~ .star-select-item svg {
    color: #52525b !important;
    fill: none !important;
    stroke: #52525b !important;
}



.star-select-item:hover {
    transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
    .film-grain,
    .loader-emblem::before,
    .loader-emblem::after,
    .loader-emblem span,
    .loader-progress span,
    .service-marquee-track {
        width: 100%;
        animation: none !important;
        -webkit-animation: none !important;
        transform: none !important;
    }

    .service-marquee-group {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 18px;
    }

    .service-marquee-group[aria-hidden="true"] {
        display: none;
    }
}

.mobile-sticky-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(6, 7, 11, 0.96), rgba(6, 7, 11, 0.72));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.mobile-sticky-cta .btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 768px) {
    .mobile-sticky-cta {
        display: block;
    }

    body {
        padding-bottom: 72px;
    }
}

/* ——— Floating assistant widget ——— */
.assistant-widget {
    position: fixed;
    inset: 0;
    z-index: 4200;
    pointer-events: none;
}

.assistant-launcher {
    pointer-events: auto;
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 4202;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 18px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
        rgba(6, 7, 11, 0.82);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.assistant-launcher-logo {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.assistant-widget.is-open .assistant-launcher-logo {
    display: none;
}

.assistant-launcher-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.1;
}

.assistant-launcher-copy strong {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.assistant-launcher-copy small {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.52);
}

.assistant-launcher:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.assistant-launcher-icons {
    position: absolute;
    right: 14px;
    width: 18px;
    height: 18px;
    display: none;
    place-items: center;
}

.assistant-launcher-icons svg {
    width: 22px;
    height: 22px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.assistant-launcher-close {
    opacity: 0;
    transform: scale(0.7);
}

.assistant-widget.is-open .assistant-launcher-close {
    opacity: 1;
    transform: scale(1);
}

.assistant-launcher-label {
    display: none;
}

.assistant-widget.is-open .assistant-launcher {
    padding: 0 44px 0 10px;
    color: #fff;
    background: rgba(8, 9, 14, 0.94);
    border-color: rgba(255, 255, 255, 0.12);
}

.assistant-widget.is-open .assistant-launcher-copy {
    display: none;
}

.assistant-widget.is-open .assistant-launcher-icons {
    display: grid;
}

.assistant-launcher-pulse {
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.35);
    animation: assistantPulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes assistantPulse {
    0% { transform: scale(1); opacity: 0.75; }
    100% { transform: scale(1.18); opacity: 0; }
}

.assistant-widget.is-open .assistant-launcher-pulse {
    animation: none;
    opacity: 0;
}

.assistant-panel {
    position: fixed;
    inset: 0;
    z-index: 4201;
    pointer-events: none;
}

.assistant-widget.is-open .assistant-panel {
    pointer-events: auto;
}

.assistant-panel-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(1, 1, 4, 0.55);
    opacity: 0;
    transition: opacity 0.28s ease;
    cursor: pointer;
}

.assistant-widget.is-open .assistant-panel-backdrop {
    opacity: 1;
}

.assistant-panel-card {
    position: absolute;
    right: 22px;
    bottom: 92px;
    width: min(440px, calc(100vw - 24px));
    max-height: min(720px, calc(100vh - 116px));
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(0.96);
    transform-origin: right bottom;
    filter: drop-shadow(0 28px 80px rgba(0, 0, 0, 0.55));
    transition:
        opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.32s;
}

.assistant-widget.is-open .assistant-panel-card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.assistant-card.is-floating {
    max-width: none;
    margin: 0;
    width: 100%;
    height: 100%;
    max-height: min(720px, calc(100vh - 116px));
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #0a0b10 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 30px 80px rgba(0, 0, 0, 0.65);
}

.assistant-card.is-floating::before {
    display: none;
}

.assistant-card.is-floating .assistant-header {
    background: #0d0e14;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.assistant-card.is-floating .assistant-header-badge {
    background: #1c1d26;
    border-color: rgba(255, 255, 255, 0.2);
    color: #e4e4e7;
}

.assistant-card.is-floating .assistant-suggestions-label {
    color: rgba(255, 255, 255, 0.55);
}

.assistant-card.is-floating .assistant-conversation {
    flex: 1;
    min-height: 280px;
    max-height: none;
    background: #0a0b10;
}

.assistant-card.is-floating .assistant-conversation::after {
    background: linear-gradient(to top, #0a0b10, transparent);
}

#assistant-widget .assistant-composer {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    grid-template-columns: 1fr auto;
    padding: 0 14px 8px;
    margin: 0 0 8px;
}

#assistant-widget .assistant-input-wrap {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: #1c1d26;
}

#assistant-widget .assistant-input-wrap:focus-within {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: #22232e;
}

#assistant-widget .assistant-input-wrap input,
#assistant-widget .assistant-input-wrap input:focus,
#assistant-widget .assistant-input-wrap input:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.assistant-card.is-floating .assistant-composer {
    flex-shrink: 0;
    margin-top: auto;
    border-top: 0;
    background: #0d0e14;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.assistant-card.is-floating .assistant-input-wrap {
    background: #1c1d26;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.assistant-card.is-floating .assistant-input-wrap:focus-within {
    background: #22232e;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.assistant-card.is-floating .assistant-input-wrap svg {
    color: #a1a1aa;
}

.assistant-card.is-floating .assistant-input-wrap input {
    color: #f4f4f5;
}

.assistant-card.is-floating .assistant-input-wrap input::placeholder {
    color: #71717a;
}

.assistant-card.is-floating .assistant-attachment {
    background: #1c1d26;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e4e4e7;
}

.assistant-card.is-floating .assistant-attachment:hover,
.assistant-card.is-floating .assistant-attachment.has-file {
    background: #262733;
    border-color: rgba(255, 255, 255, 0.3);
    color: #f4f4f5;
}

.assistant-card.is-floating .assistant-send {
    background: #f4f4f5;
    border: none;
    box-shadow: none;
    transition: background 0.2s ease;
}

.assistant-card.is-floating .assistant-send:hover {
    background: #d4d4d8;
    box-shadow: none;
}

.assistant-card.is-floating .assistant-quick-actions button {
    background: #1c1d26;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #f4f4f5;
    box-shadow: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.assistant-card.is-floating .assistant-quick-actions button svg {
    color: #d4d4d8;
    opacity: 1;
}

.assistant-card.is-floating .assistant-quick-actions button:hover:not(.quick-action-primary) {
    background: #262733;
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
    box-shadow: none;
}

.assistant-card.is-floating .assistant-quick-actions button.quick-action-primary {
    background: #f4f4f5;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #09090b;
    font-weight: 700;
    box-shadow: none;
}

.assistant-card.is-floating .assistant-quick-actions button.quick-action-primary:hover {
    background: #d4d4d8;
    border-color: rgba(255, 255, 255, 0.35);
    color: #09090b;
    box-shadow: none;
}

.assistant-card.is-floating .assistant-quick-actions.is-inline button {
    width: auto;
    font-size: 12px;
    padding: 10px 14px;
}

.assistant-card.is-floating .message-bubble {
    background: #1c1d26;
    border-color: rgba(255, 255, 255, 0.14);
    color: #e4e4e7;
}

.assistant-card.is-floating .assistant-success-screen {
    background: #0a0b10;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.assistant-card.is-floating .assistant-close {
    background: #1c1d26;
    border-color: rgba(255, 255, 255, 0.22);
    color: #e4e4e7;
}

.assistant-card.is-floating .assistant-close:hover {
    background: #f4f4f5;
    border-color: #f4f4f5;
    color: #09090b;
}

.assistant-card.is-floating .assistant-composer-hint {
    color: rgba(255, 255, 255, 0.45);
}

/* Surcharges bot flottant uniquement — annule le hover global du site */
#assistant-widget .assistant-quick-actions button:hover,
#assistant-widget .assistant-send:hover,
#assistant-widget .assistant-attachment:hover,
#assistant-widget .assistant-close:hover {
    transform: none !important;
    filter: none !important;
}

#assistant-widget .assistant-quick-actions button:hover {
    background: #262733;
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
}

#assistant-widget .assistant-quick-actions button.quick-action-primary:hover {
    background: #d4d4d8;
    border-color: rgba(255, 255, 255, 0.35);
    color: #09090b;
}

.assistant-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.assistant-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.assistant-close:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.assistant-close svg {
    width: 16px;
    height: 16px;
}

body.assistant-open {
    overflow: hidden;
}

body.has-assistant-widget .back-to-top.visible {
    right: 22px;
    bottom: 92px;
}

.contact-cta-card {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 28px;
    align-items: center;
    padding: 34px;
    border-radius: 24px;
}

.contact-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 700;
}

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

.contact-cta-copy h3 {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 34px);
    margin-bottom: 10px;
}

.contact-cta-copy p {
    color: var(--text-secondary);
    max-width: 56ch;
}

.contact-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-link-button {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
    transition: color 0.2s ease;
}

.footer-link-button:hover {
    color: #fff;
}

@media (max-width: 768px) {
    .assistant-launcher {
        right: 16px;
        bottom: 16px;
        min-height: 54px;
        padding: 0 14px 0 8px;
        gap: 10px;
    }

    .assistant-launcher-logo {
        width: 34px;
        height: 34px;
    }

    .assistant-launcher-copy small {
        display: none;
    }

    .assistant-panel-card {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-height: min(88vh, 760px);
        transform: translateY(100%);
        transform-origin: center bottom;
        border-radius: 22px 22px 0 0;
    }

    .assistant-widget.is-open .assistant-panel-card {
        transform: translateY(0);
    }

    .assistant-card.is-floating {
        max-height: min(88vh, 760px);
        border-radius: 22px 22px 0 0;
    }

    body.has-assistant-widget .back-to-top.visible {
        bottom: 84px;
        right: 16px;
    }

    .contact-cta-card {
        grid-template-columns: 1fr;
        padding: 24px;
    }
}

.assistant-quick-actions.is-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.assistant-follow-up-actions .assistant-quick-actions button {
    font-size: 12px;
    padding: 8px 12px;
}

.legal-page main,
.service-page main {
    padding: 120px 0 80px;
    max-width: 820px;
}

.legal-page h1,
.service-page h1 {
    font-family: var(--font-heading);
    margin-bottom: 16px;
}

.legal-page p,
.service-page p,
.legal-page li,
.service-page li {
    color: var(--text-secondary);
    line-height: 1.7;
}

.legal-page section,
.service-page section {
    margin-bottom: 32px;
}

/* Client file upload styles */
.client-upload-zone {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-normal), background-color var(--transition-normal);
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.client-upload-zone:hover, .client-upload-zone.is-dragover {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.05);
}
.client-upload-zone svg {
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    transition: color var(--transition-normal);
}
.client-upload-zone:hover svg, .client-upload-zone.is-dragover svg {
    color: var(--primary);
}
.client-upload-zone p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.client-upload-progress {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 15px;
    font-size: 13px;
}
.client-upload-progress.is-hidden {
    display: none;
}
.client-upload-progress span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-secondary);
}
.client-upload-progress .progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}
.client-upload-progress .progress-bar-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.3s ease;
}

.client-upload-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}