/*
 * ================================================================
 * HUNDESALON NIKA — Main Stylesheet
 * ================================================================
 * Core visual styles for the grooming salon website.
 * Includes: layout, typography, colors, components, animations,
 *           responsive breakpoints, light/dark theme support.
 *
 * Structure:
 *   1. Root Variables & Base
 *   2. Typography & Layout
 *   3. Header & Navigation
 *   4. Hero Section
 *   5. About, Services, Gallery, Reviews
 *   6. Footer
 *   7. Components (cards, buttons, modals)
 *   8. Animations & Effects
 *   9. Responsive / Media Queries
 *
 * Version: 2026-04-20
 * ================================================================
 */

@import url("https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@400;700&family=Old+Standard+TT:wght@400;700&display=swap");

/* Социальные иконки в мобильном меню */

.mobile-social-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-right: 10px;
}

.mobile-social-icons .social-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}

.mobile-social-icons .social-icon i {
    width: 100%;
    height: 100%;
    font-size: 22px !important;
    transform-style: preserve-3d;
    backface-visibility: visible;
    animation: iconMetalShimmer var(--icon-sheen-duration) ease-in-out infinite;
}

.mobile-social-icons .social-icon:hover i {
    animation:
        iconSocialBounceFlip 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
        iconMetalShimmer var(--icon-sheen-duration) ease-in-out infinite;
}

@media (width <= 900px) {

    .mobile-social-icons {
        gap: 14px;
        padding-right: 4px;
    }

    .mobile-social-icons .social-icon {
        width: 24px;
        height: 24px;
    }

    .mobile-social-icons .social-icon i {
        font-size: 18px !important;
    }
}

/* Shared mobile navigation styling lives in the dedicated MOBILE NAV section below. */

/* ===== ROOT / BASE ===== */

:root {
    /* Deep natural-emerald palette (Colombian Muzo-style: very dark forest
       green with a cool blue-cyan undertone). The base is intentionally
       very dark so the highlight gradients in `body` look like real internal
       reflections on a polished gemstone, not a flat tinted page. */
    --bg-dark: #010301;
    --bg-light: #faf8f4;
    --text-dark: #ece8df;
    --text-light: #2c2822;

    /* Absolute dark — pure natural emerald crystal interior.
       Base and deep are functionally black; only the faintest warm-green
       cast distinguishes them from pure #000000.
       mid   = #010502  cave shadow
       core  = #020806  deep crystal body
       vein  = #041006  one barely-lit cleavage plane  */
    --emerald-deep: #010101;
    --emerald-mid:  #010502;
    --emerald-core: #020806;
    --emerald-vein: #041006;

    /* Crystal facet colours — purely warm green, varying brightness.
       Natural crystals have uneven facets: some catch light sharply,
       most stay nearly invisible. Alpha is intentionally asymmetric. */
    --emerald-facet-a: rgb(55 150  82 / 15%);   /* main bright facet   */
    --emerald-facet-b: rgb(35 110  60 / 7%);   /* secondary dim facet */
    --emerald-facet-c: rgb(70 175 100 / 10%);   /* highlight edge      */
    --emerald-facet-d: rgb(25  88  48 / 5%);   /* near-invisible vein */
    --emerald-facet-e: rgb(45 130  72 / 8%);   /* mid-tone plane      */
    --accent-gold: #c6a15b;
    --accent-gold-dark: #9e7a46;
    --glass-bg: rgb(6 9 8 / 88%);
    --glass-border: rgb(214 231 220 / 12%);
    --panel-grad-a: rgb(255 255 255 / 18%);
    --panel-grad-b: rgb(255 255 255 / 12%);
    --panel-grad-c: rgb(255 255 255 / 12%);
    --panel-grad-d: rgb(4 8 7 / 88%);
    --liquid-edge: 24px;
    --liquid-panel-bg: rgb(6 11 9 / 84%);
    --liquid-panel-stroke: rgb(216 235 224 / 12%);
    --liquid-panel-highlight: rgb(240 255 246 / 16%);
    --liquid-panel-shadow: 0 24px 60px rgb(0 0 0 / 52%);
    --scrollbar-track: rgb(6 12 10 / 22%);
    --scrollbar-thumb-a: rgb(170 198 182 / 14%);
    --scrollbar-thumb-b: rgb(108 86 34 / 18%);
    --scrollbar-thumb-border: rgb(132 158 144 / 14%);
    --scrollbar-thumb-shadow: 0 14px 28px rgb(0 0 0 / 22%);
    --font-body: "Segoe UI Variable Text", "Montserrat", "Inter", system-ui, sans-serif;
    --font-display: "Segoe UI Variable Display", "Aptos Display", "Montserrat", "Inter", system-ui, sans-serif;
    --premium-letter-tight: 0.008em;
    --premium-letter-wide: 0.012em;
    --logo-mark-width: 72px;
    --home-label-size: calc(var(--logo-mark-width) * 0.245);
    --shadow-sm: 0 8px 20px rgb(0 0 0 / 20%);
    --transition-smooth: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1);
    --motion-sync-line: 15.2s;
    --motion-sync-flow: 7.6s;
    --motion-sync-breath: 5.7s;
    --motion-sync-pulse: 3.8s;
    --motion-sync-sheen: 9.5s;
    --motion-sync-micro: 1.9s;
    --motion-sync-luxury: cubic-bezier(0.4, 0, 0.2, 1);
    --nav-pill-gap-x: 34px;
    --nav-pill-gap-y: 18px;
    --nav-pill-pad-x: 14px;
    --nav-pill-pad-y: 7px;
    --nav-pill-radius: 16px;
    --nav-pill-blur: 20px;
    --icon-coin-duration: 4.9s;
    --icon-sheen-duration: 2.35s;
    --icon-bounce-duration: 2.85s;
    --icon-menu-bounce-duration: calc(var(--icon-bounce-duration) / 2);

    /* Gem-rotation angles — updated by JS (initGemRotation) on scroll.
       Base values match the static facet layout; JS offsets them ±28deg. */
    --gem-a1:   122deg;
    --gem-a2:   158deg;
    --gem-a3:    98deg;
    --gem-a4:    38deg;
    --gem-a5:   178deg;
    --gem-base: 132deg;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);

    /* Real-stone emerald — many overlapping layers mimic the way light bounces
       inside a polished gem. We deliberately keep the BASE almost black so the
       coloured highlight pools really pop and read as internal reflections,
       not as a uniform tint. Order, top → bottom in the stack:
       (1) bright cyan-green corner sparkle  (top-right)
       (2) deep-green core glow              (bottom-left)
       (3) warm shine catchlight             (top-left)
       (4) cool cyan band                    (sweeping diagonal)
       (5) soft cool shadow pool             (centre-right)
       (6) low warm under-glow               (bottom-centre)
       (7) main diagonal stone gradient      (very dark → mid → very dark) */
    background:
        /* FACET A — primary cleavage plane */
        linear-gradient(var(--gem-a1),
            transparent            0%,
            transparent           22%,
            var(--emerald-facet-d) 27%,
            var(--emerald-facet-a) 31%,
            var(--emerald-facet-c) 33%,
            var(--emerald-facet-a) 36%,
            var(--emerald-facet-d) 40%,
            transparent           46%,
            transparent          100%),
        /* FACET B — secondary plane */
        linear-gradient(var(--gem-a2),
            transparent            0%,
            transparent           14%,
            var(--emerald-facet-d) 18%,
            var(--emerald-facet-b) 21%,
            var(--emerald-facet-d) 24%,
            transparent           28%,
            transparent          100%),
        /* FACET C — hair-thin edge */
        linear-gradient(var(--gem-a3),
            transparent            0%,
            transparent           61%,
            var(--emerald-facet-e) 63%,
            var(--emerald-facet-c) 64.5%,
            var(--emerald-facet-e) 66%,
            transparent           69%,
            transparent          100%),
        /* FACET D — back reflection */
        linear-gradient(var(--gem-a4),
            transparent            0%,
            transparent           55%,
            var(--emerald-facet-d) 59%,
            var(--emerald-facet-e) 62%,
            var(--emerald-facet-d) 65%,
            transparent           69%,
            transparent          100%),
        /* FACET E — micro-cleavage */
        linear-gradient(var(--gem-a5),
            transparent            0%,
            transparent           74%,
            var(--emerald-facet-d) 76%,
            var(--emerald-facet-e) 77.5%,
            var(--emerald-facet-d) 79%,
            transparent           82%,
            transparent          100%),
        /* BASE stone gradient */
        linear-gradient(var(--gem-base),
            var(--emerald-deep)  0%,
            var(--emerald-deep)  6%,
            var(--bg-dark)      18%,
            var(--emerald-mid)  36%,
            var(--emerald-core) 50%,
            var(--emerald-vein) 54%,
            var(--emerald-core) 59%,
            var(--emerald-mid)  72%,
            var(--bg-dark)      86%,
            var(--emerald-deep) 94%,
            var(--emerald-deep) 100%);
    background-attachment: fixed;
    color: var(--text-dark);
    transition: background 0.3s, color 0.3s;
    line-height: 1.5;
    font-size: 17px;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    text-rendering: optimizelegibility;
    overflow-x: hidden;
}

/* Light theme keeps the original solid background — the emerald layers are
   only intended for the dark/jewel theme. */

body.light {
    background: var(--bg-dark);
}

html,
body {
    height: 100%;
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none !important;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    display: none !important;
    background: transparent !important;
}

.site-scroll-root {
    position: fixed;
    inset: 0;
    overflow: hidden auto;
    -ms-overflow-style: none;
    scrollbar-width: none !important;
}

.site-scroll-root::-webkit-scrollbar,
.site-scroll-root::-webkit-scrollbar-thumb,
.site-scroll-root::-webkit-scrollbar-track,
.site-scroll-root::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.service-list,
.table-wrapper,
[data-custom-scrollbar-host] {
    -ms-overflow-style: none;
    scrollbar-width: none !important;
}

.service-list::-webkit-scrollbar,
.service-list::-webkit-scrollbar-thumb,
.service-list::-webkit-scrollbar-track,
.service-list::-webkit-scrollbar-corner,
.table-wrapper::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-corner,
[data-custom-scrollbar-host]::-webkit-scrollbar,
[data-custom-scrollbar-host]::-webkit-scrollbar-thumb,
[data-custom-scrollbar-host]::-webkit-scrollbar-track,
[data-custom-scrollbar-host]::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

body.light {
    --bg-dark: #e8dece;
    --bg-light: #efe5d6;
    --text-dark: #3a3228;
    --text-light: #5c4f3e;
    --accent-gold: #9e7c4e;
    --accent-gold-dark: #7a5c36;
    --glass-bg: rgb(235 224 205 / 50%);
    --glass-border: rgb(180 155 115 / 20%);
    --shadow-sm: 0 8px 20px rgb(80 60 30 / 7%);
    --panel-grad-a: rgb(220 205 178 / 14%);
    --panel-grad-b: rgb(230 215 188 / 12%);
    --panel-grad-c: rgb(238 225 200 / 10%);
    --panel-grad-d: rgb(248 240 225 / 88%);
    --liquid-panel-bg: rgb(240 230 210 / 80%);
    --liquid-panel-stroke: rgb(175 150 110 / 18%);
    --liquid-panel-highlight: rgb(255 250 238 / 55%);
    --liquid-panel-shadow: 0 20px 40px rgb(80 60 30 / 10%);
    --scrollbar-track: rgb(140 110 60 / 3%);
    --scrollbar-thumb-a: rgb(248 238 218 / 12%);
    --scrollbar-thumb-b: rgb(175 150 110 / 6%);
    --scrollbar-thumb-border: rgb(175 150 110 / 8%);
    --scrollbar-thumb-shadow: 0 10px 20px rgb(80 60 30 / 4%);

    background:
        linear-gradient(135deg,
            rgb(235 222 200 / 100%) 0%,
            rgb(228 214 190 / 100%) 18%,
            rgb(238 226 205 / 100%) 32%,
            rgb(230 216 192 / 100%) 50%,
            rgb(236 224 202 / 100%) 68%,
            rgb(225 212 188 / 100%) 82%,
            rgb(235 222 200 / 100%) 100%);
    background-size: 400% 400%;
    animation: pearlShimmer 12s ease-in-out infinite;
}

@keyframes pearlShimmer {
    0%   { background-position: 0% 0%; }
    25%  { background-position: 100% 50%; }
    50%  { background-position: 50% 100%; }
    75%  { background-position: 0% 50%; }
    100% { background-position: 0% 0%; }
}

body.light::before {
    display: none;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 650;
    letter-spacing: -0.015em;
    font-kerning: normal;
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    transition: var(--transition-smooth);
}

body.nav-open {
    overflow: hidden;
    position: fixed;
    inset: 0;
    touch-action: none;
}

body.nav-open .site-scroll-root {
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

/* =========================================================
   HEADER
   ========================================================= */

.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgb(6 9 8 / 88%);
    -webkit-backdrop-filter: blur(9px) saturate(1.4);
    backdrop-filter: blur(9px) saturate(1.4);
    border-bottom: none;
    z-index: 1600;
    display: flex;
    flex-direction: column;
    padding: 8px 34px;
    gap: 8px;
    transition:
        transform 0.45s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
    box-shadow: 0 14px 32px rgb(0 0 0 / 34%);
}

.header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgb(255 255 255 / 0%) 0%,
        rgb(144 114 56 / 8%) 10%,
        rgb(193 155 84 / 26%) 24%,
        rgb(255 232 176 / 78%) 50%,
        rgb(193 155 84 / 26%) 76%,
        rgb(144 114 56 / 8%) 90%,
        rgb(255 255 255 / 0%) 100%
    );
    background-size: 220% 100%;
    background-position: 48% 50%;
    box-shadow:
        0 0 12px rgb(214 178 96 / 15%),
        0 0 24px rgb(255 227 160 / 8%);
    opacity: 0.92;
    will-change: background-position, opacity, transform, box-shadow;
    animation: siriGoldLineIdle 6.8s cubic-bezier(0.42, 0, 0.2, 1) infinite;
    pointer-events: none;
    z-index: 2;
}

.header.header-social-visible::before {
    display: none;
}

.header::after {
    display: none;
}

body.light .header {
    background: rgb(248 242 232 / 90%);
    box-shadow: 0 12px 24px rgb(80 60 30 / 8%);
}

body.light .header::before {
    background: linear-gradient(
        90deg,
        rgb(255 255 255 / 0%) 0%,
        rgb(190 165 115 / 10%) 10%,
        rgb(200 175 120 / 24%) 24%,
        rgb(215 190 140 / 50%) 50%,
        rgb(200 175 120 / 24%) 76%,
        rgb(190 165 115 / 10%) 90%,
        rgb(255 255 255 / 0%) 100%
    );
    box-shadow:
        0 0 8px rgb(180 155 100 / 12%),
        0 0 16px rgb(200 175 120 / 6%);
    opacity: 0.88;
}

body.light .header::after {
    display: none;
}

body.player-active .header::before {
    background-size: 240% 100%;
    animation: siriGoldLineSpeaking 1.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    box-shadow:
        0 0 14px rgb(214 178 96 / 22%),
        0 0 28px rgb(255 227 160 / 14%);
}

body.light.player-active .header::before {
    box-shadow:
        0 0 12px rgb(180 155 100 / 20%),
        0 0 24px rgb(200 175 120 / 12%);
}

@keyframes siriGoldLineIdle {

    0%, 100% {
        opacity: 0.74;
        background-position: 16% 50%;
        transform: scaleX(0.972) scaleY(0.96);
    }

    35% {
        opacity: 0.96;
        background-position: 50% 50%;
        transform: scaleX(1) scaleY(1.02);
    }

    65% {
        opacity: 0.82;
        background-position: 76% 50%;
        transform: scaleX(0.988) scaleY(0.98);
    }
}

@keyframes siriGoldLineSpeaking {

    0% {
        opacity: 0.84;
        background-position: 12% 50%;
        transform: scaleX(0.96) scaleY(0.9);
    }

    22% {
        opacity: 1;
        background-position: 38% 50%;
        transform: scaleX(1.015) scaleY(1.9);
    }

    48% {
        opacity: 0.92;
        background-position: 64% 50%;
        transform: scaleX(0.985) scaleY(1.2);
    }

    74% {
        opacity: 1;
        background-position: 82% 50%;
        transform: scaleX(1.01) scaleY(1.75);
    }

    100% {
        opacity: 0.84;
        background-position: 112% 50%;
        transform: scaleX(0.96) scaleY(0.9);
    }
}

.top-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 82px;
    position: relative;
    overflow: visible;
    z-index: 5;
    transition: transform 0.45s ease, opacity 0.45s ease;
}

@media (width >= 900px) {

    .header {
        padding-top: 8px;
        padding-bottom: 8px;
        gap: 0;
    }

    .top-row {
        display: grid;
        width: 100%;
        max-width: none;
        margin: 0;

        /* 5 columns: [logo] [widget centered] [nav]  [1fr spacer]  [controls]. */
        grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) max-content;
        align-items: center;
        justify-content: stretch;
        gap: 12px;
        min-height: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .logo-wrapper,
    .header-weather-shell,
    .nav-main,
    .header-controls {
        align-self: center;
    }

    .logo-wrapper {
        grid-column: 1;
        justify-self: start;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding-right: 0;
        min-height: 0;
    }

    .header-weather-shell {
        grid-column: 2;
        justify-self: center;
    }

    .nav-main {
        grid-column: 3;
        justify-self: start;
        margin-right: 0;
        transform: none;
    }

    .header-controls {
        grid-column: 5;
        justify-self: end;
        justify-content: center;
        margin-left: 0;
        transform: none;
    }

    .social-bar {
        padding-top: 8px;
    }
}

.logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    justify-self: start;
    width: max-content;
    padding-right: 50px;
    position: relative;
}

@media (width >= 900px) {

    .top-row > .logo-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding-right: 0;
        min-height: 0;
    }

    .top-row > .logo-wrapper .premium-burger {
        margin-top: 4px;
    }
}

.logo a {
    display: inline-block;
    transition: transform 0.3s ease;
}

.logo a:hover {
    transform: scale(1.02);
}

.logo-img {
    width: 72px;
    max-width: 100%;
    height: auto;
    display: block;
    transition: all 0.3s ease;
    animation: glassGlow 6.8s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgb(198 161 91 / 20%));
}

body.site-loaded .logo-img {
    animation-duration: 4.2s;
    filter: drop-shadow(0 0 6px rgb(198 161 91 / 28%));
}

@keyframes glassGlow {

    0% {
        filter: drop-shadow(0 0 3px rgb(198 161 91 / 14%));
        opacity: 0.96;
    }

    50% {
        filter: drop-shadow(0 0 10px rgb(198 161 91 / 34%));
        opacity: 0.99;
    }

    100% {
        filter: drop-shadow(0 0 3px rgb(198 161 91 / 14%));
        opacity: 0.96;
    }
}

@media (width <= 900px) {

    :root {
        --logo-mark-width: 54px;
        --home-label-size: calc(var(--logo-mark-width) * 0.245);
        --nav-pill-gap-x: 18px;
        --nav-pill-gap-y: 12px;
        --nav-pill-pad-x: 11px;
        --nav-pill-pad-y: 6px;
        --nav-pill-radius: 14px;
        --nav-pill-blur: 18px;
    }

    .logo-img {
        width: 54px;
    }
}

.social-home {
    font-size: var(--home-label-size);
    font-weight: 680;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 0.88;
    place-self: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Grenze Gotisch", "Old Standard TT", "Palatino Linotype", Georgia, serif;
    width: 100%;
    min-width: var(--logo-mark-width);
    padding-inline: 0;
    overflow: visible;
}

.social-home a {
    --home-language-scale: 1;
    --home-fit-scale: 1;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-height: 0;
    padding: 0;
    color: #d9b06a;
    font-size: calc(var(--home-label-size) * var(--home-language-scale) * var(--home-fit-scale));
    text-decoration: none;
    transition:
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.34s ease,
        opacity 0.34s ease;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    font-family: "Grenze Gotisch", "Old Standard TT", "Palatino Linotype", Georgia, serif;
    background: none;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: visible;
    isolation: auto;
    transform: translateY(0);
    font-weight: 700;
    letter-spacing: 0.045em;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    text-rendering: geometricprecision;
    text-shadow: none;
    filter: saturate(1.04);
}

.social-home a::before,
.social-home a::after {
    content: none;
}

.home-icon-img {
    width: 22px;
    height: 22px;
    display: block;
    flex: 0 0 22px;
    object-fit: contain;
    filter:
        drop-shadow(0 2px 4px rgb(0 0 0 / 28%))
        drop-shadow(0 0 6px rgb(198 161 91 / 14%));
    transition: transform 0.3s ease, filter 0.3s ease;
    animation: containedGoldBreath var(--motion-sync-breath) ease-in-out infinite;
}

.social-home a:hover .home-icon-img {
    transform: scale(1.08);
    filter:
        drop-shadow(0 3px 6px rgb(0 0 0 / 32%))
        drop-shadow(0 0 8px rgb(198 161 91 / 22%));
}

.social-home a > span {
    position: relative;
    display: inline-block;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgb(255 246 224 / 96%) 0%,
            rgb(229 194 121 / 94%) 18%,
            rgb(182 135 58 / 92%) 44%,
            rgb(114 78 24 / 94%) 74%,
            rgb(76 50 14 / 96%) 100%);
    background-size: 220% 100%;
    background-position: 100% 50%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.22px rgb(41 24 5 / 34%);
    transform: scaleX(0.98) scaleY(1.08);
    transform-origin: center;
    filter:
        drop-shadow(0 1px 0 rgb(28 16 3 / 48%))
        drop-shadow(0 1px 3px rgb(130 92 36 / 12%));
    animation:
        socialHomeGoldShimmer var(--motion-sync-sheen) linear infinite reverse,
        containedGoldBreath var(--motion-sync-breath) ease-in-out infinite;
}

@keyframes socialHomeGoldShimmer {

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

    100% {
        background-position: 240% 50%;
    }
}

html[lang="ru"] .social-home a,
html[lang="uk"] .social-home a {
    font-family: "Old Standard TT", "Palatino Linotype", Georgia, serif;

    --home-language-scale: 1.14;

    letter-spacing: 0.04em;
}

html[lang="en"] .social-home a {
    --home-language-scale: 1.52;

    letter-spacing: 0.025em;
}

html[lang="de"] .social-home a {
    --home-language-scale: 1.2;

    letter-spacing: 0.03em;
}

html[lang="ru"] .social-home a > span,
html[lang="uk"] .social-home a > span {
    transform: scaleX(0.96) scaleY(1.14);
}

html[lang="en"] .social-home a > span {
    transform: scaleX(1.01) scaleY(1.04);
}

html[lang="de"] .social-home a > span {
    transform: scaleX(0.99) scaleY(1.06);
}

@keyframes premiumTextSheen {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes livingHighlight {

    0% {
        transform: translateX(-34%);
        opacity: 0.09;
    }

    48% {
        transform: translateX(24%);
        opacity: 0.52;
    }

    100% {
        transform: translateX(68%);
        opacity: 0.09;
    }
}

@keyframes luxuryButtonBreath {

    0%, 100% {
        box-shadow: 0 10px 20px rgb(0 0 0 / 8%);
        filter: brightness(1) saturate(1);
    }

    50% {
        box-shadow: 0 14px 28px rgb(198 161 91 / 12%);
        filter: brightness(1.025) saturate(1.03);
    }
}

@keyframes navPillCouture {

    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgb(255 240 208 / 12%),
            inset 0 -1px 0 rgb(62 42 12 / 36%),
            0 10px 18px rgb(0 0 0 / 18%),
            0 0 0 1px rgb(255 236 194 / 2%);
        filter: saturate(0.94) brightness(0.94);
    }

    28% {
        box-shadow:
            inset 0 1px 0 rgb(255 244 220 / 14%),
            inset 0 -1px 0 rgb(76 52 18 / 38%),
            0 12px 22px rgb(0 0 0 / 20%),
            0 0 12px rgb(122 90 36 / 8%);
        filter: saturate(0.99) brightness(0.99);
    }

    54% {
        box-shadow:
            inset 0 1px 0 rgb(255 248 230 / 20%),
            inset 0 -1px 0 rgb(92 64 22 / 42%),
            0 14px 26px rgb(0 0 0 / 22%),
            0 0 16px rgb(146 108 42 / 14%),
            0 0 24px rgb(212 177 112 / 5%);
        filter: saturate(1.04) brightness(1.03);
    }
}

@keyframes navPillSurface {

    0%, 100% {
        opacity: 0.6;
        filter: brightness(0.96);
    }

    50% {
        opacity: 0.9;
        filter: brightness(1.06);
    }
}

@keyframes navPillJewelSweep {

    0% {
        transform: translateX(-16%) rotate(-16deg) scaleX(0.94);
        opacity: 0;
    }

    16% {
        opacity: 0.1;
    }

    38% {
        opacity: 0.34;
    }

    54% {
        opacity: 0.52;
    }

    72% {
        opacity: 0.16;
    }

    100% {
        transform: translateX(300%) rotate(-16deg) scaleX(1.04);
        opacity: 0;
    }
}

@keyframes containedGoldSweep {

    0% {
        transform: translateX(-135%) rotate(-18deg) scaleX(0.9);
        opacity: 0;
    }

    16% {
        opacity: 0.08;
    }

    40% {
        opacity: 0.28;
    }

    58% {
        opacity: 0.42;
    }

    82% {
        opacity: 0.14;
    }

    100% {
        transform: translateX(235%) rotate(-18deg) scaleX(1.02);
        opacity: 0;
    }
}

@keyframes containedGoldBreath {

    0%, 100% {
        filter: saturate(0.98) brightness(0.98);
        opacity: 0.72;
    }

    50% {
        filter: saturate(1.06) brightness(1.04);
        opacity: 1;
    }
}

@keyframes navGoldThreadFlow {

    0%, 100% {
        opacity: 0.72;
        filter: saturate(0.96) brightness(0.94);
        box-shadow:
            0 0 8px rgb(158 118 48 / 16%),
            0 0 16px rgb(214 179 108 / 4%);
    }

    50% {
        opacity: 1;
        filter: saturate(1.06) brightness(1.05);
        box-shadow:
            0 0 10px rgb(178 136 56 / 28%),
            0 0 22px rgb(226 196 132 / 8%);
    }
}

/* === ICON COIN SPIN & SHIMMER ANIMATIONS === */
@keyframes iconCoinSpinVertical {

    0% {
        transform: perspective(1280px) translateZ(10px) rotateX(10deg) rotateY(0deg) scale3d(1, 1, 1);
    }

    25% {
        transform: perspective(1280px) translateZ(2px) rotateX(5deg) rotateY(90deg) scale3d(0.92, 1, 0.92);
    }

    50% {
        transform: perspective(1280px) translateZ(10px) rotateX(10deg) rotateY(180deg) scale3d(1, 1, 1);
    }

    75% {
        transform: perspective(1280px) translateZ(2px) rotateX(5deg) rotateY(270deg) scale3d(0.92, 1, 0.92);
    }

    100% {
        transform: perspective(1280px) translateZ(10px) rotateX(10deg) rotateY(360deg) scale3d(1, 1, 1);
    }
}

@keyframes iconCoinSpinHorizontal {

    0% {
        transform: perspective(1280px) translateZ(10px) rotateY(8deg) rotateX(0deg) scale3d(1, 1, 1);
    }

    25% {
        transform: perspective(1280px) translateZ(2px) rotateY(4deg) rotateX(90deg) scale3d(1, 0.92, 0.92);
    }

    50% {
        transform: perspective(1280px) translateZ(10px) rotateY(8deg) rotateX(180deg) scale3d(1, 1, 1);
    }

    75% {
        transform: perspective(1280px) translateZ(2px) rotateY(4deg) rotateX(270deg) scale3d(1, 0.92, 0.92);
    }

    100% {
        transform: perspective(1280px) translateZ(10px) rotateY(8deg) rotateX(360deg) scale3d(1, 1, 1);
    }
}

/* Реалистичное вращение монеты (как в YouTube: Spinning Coin) —
   непрерывный оборот по Y, лёгкий wobble, видна «толщина» ребра */
@keyframes iconCoinFlip {

    0% {
        transform: perspective(600px) rotateY(0deg) rotateZ(0deg);
    }

    100% {
        transform: perspective(600px) rotateY(360deg) rotateZ(0deg);
    }
}

@keyframes iconGlassBounce {

    0%, 100% {
        transform: perspective(1200px) translateY(0) translateZ(8px) scale(1);
    }

    30% {
        transform: perspective(1200px) translateY(-3px) translateZ(15px) scale(1.05);
    }

    58% {
        transform: perspective(1200px) translateY(1px) translateZ(10px) scale(0.985);
    }

    76% {
        transform: perspective(1200px) translateY(-1px) translateZ(12px) scale(1.015);
    }
}

/* Мягкий bounce для социальных/навигационных иконок (низкий, не пропадает при повороте) */
@keyframes iconMenuBounce {

    0%, 100% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-2.5px);
    }

    40% {
        transform: translateY(0.5px);
    }

    60% {
        transform: translateY(-1px);
    }

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

/* Горизонтальный coin-flip + подпрыгивание с учащающимися отскоками при приземлении.
   Вращение по оси X (как монета катится «от себя»), вертикальный bounce затухает */
@keyframes iconSocialBounceFlip {
    /* --- Покой: сжатие перед прыжком --- */

    0% {
        transform: perspective(600px) translateY(0) rotateX(0deg) scaleX(1.04) scaleY(0.94);
    }

    /* --- Толчок: резкий отрыв, вытяжка вверх --- */

    3% {
        transform: perspective(600px) translateY(-1px) rotateX(30deg) scaleX(0.97) scaleY(1.06);
    }

    /* --- Набор высоты: гравитация замедляет подъём --- */

    8% {
        transform: perspective(600px) translateY(-6px) rotateX(280deg) scaleX(0.99) scaleY(1.03);
    }

    /* --- Пик: максимальная высота, замедление вращения --- */

    15% {
        transform: perspective(600px) translateY(-10px) rotateX(680deg) scale(1);
    }

    /* --- Падение: гравитация ускоряет, вращение разгоняется --- */

    22% {
        transform: perspective(600px) translateY(-5px) rotateX(1120deg) scaleX(0.99) scaleY(1.02);
    }

    27% {
        transform: perspective(600px) translateY(-1px) rotateX(1380deg) scaleX(1.01) scaleY(0.98);
    }

    /* --- Удар 1: сплющивание при ударе о землю --- */

    30% {
        transform: perspective(600px) translateY(0) rotateX(1440deg) scaleX(1.06) scaleY(0.92);
    }

    /* --- Отскок 1: вытяжка вверх, высота ~45% от основной --- */

    33% {
        transform: perspective(600px) translateY(-2px) rotateX(1440deg) scaleX(0.98) scaleY(1.04);
    }

    37% {
        transform: perspective(600px) translateY(-4.5px) rotateX(1440deg) scale(1);
    }

    41% {
        transform: perspective(600px) translateY(-2px) rotateX(1440deg) scaleX(0.99) scaleY(1.02);
    }

    /* --- Удар 2: сплющивание слабее --- */

    44% {
        transform: perspective(600px) translateY(0) rotateX(1440deg) scaleX(1.04) scaleY(0.95);
    }

    /* --- Отскок 2: ~20% высоты --- */

    48% {
        transform: perspective(600px) translateY(-2px) rotateX(1440deg) scale(1);
    }

    /* --- Удар 3: почти незаметное сплющивание --- */

    52% {
        transform: perspective(600px) translateY(0) rotateX(1440deg) scaleX(1.02) scaleY(0.97);
    }

    /* --- Отскок 3: микро дрожь --- */

    55% {
        transform: perspective(600px) translateY(-0.8px) rotateX(1440deg) scale(1);
    }

    /* --- Финальное касание --- */

    58% {
        transform: perspective(600px) translateY(0) rotateX(1440deg) scaleX(1.01) scaleY(0.99);
    }

    /* --- Успокоение --- */

    62% {
        transform: perspective(600px) translateY(0) rotateX(1440deg) scale(1);
    }

    100% {
        transform: perspective(600px) translateY(0) rotateX(1440deg) scale(1);
    }
}

/* Hover — стеклянный мяч: прыжок вверх + затухающие отскоки */
@keyframes iconGlassBallHover {

    0% {
        transform: translateY(0) scale(1);
    }

    18% {
        transform: translateY(-8px) scale(1.06);
    }

    36% {
        transform: translateY(0) scale(0.97);
    }

    50% {
        transform: translateY(-4px) scale(1.03);
    }

    66% {
        transform: translateY(0) scale(0.99);
    }

    80% {
        transform: translateY(-1.5px) scale(1.01);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes iconMetalShimmer {

    0%, 100% {
        filter:
            drop-shadow(0 1px 0 rgb(255 255 255 / 12%))
            drop-shadow(0 7px 12px rgb(0 0 0 / 20%))
            drop-shadow(0 0 8px rgb(255 223 171 / 16%))
            contrast(1.04)
            brightness(0.98)
            saturate(1.04);
        opacity: 0.96;
    }

    50% {
        filter:
            drop-shadow(0 1px 0 rgb(255 255 255 / 20%))
            drop-shadow(0 10px 16px rgb(0 0 0 / 28%))
            drop-shadow(0 0 14px rgb(255 234 190 / 30%))
            contrast(1.08)
            brightness(1.14)
            saturate(1.18);
        opacity: 1;
    }
}

@keyframes iconSurfaceRefraction {

    0%, 100% {
        filter:
            drop-shadow(0 2px 4px rgb(0 0 0 / 18%))
            contrast(1.04)
            brightness(0.98)
            saturate(1.04);
        opacity: 0.97;
    }

    50% {
        filter:
            drop-shadow(0 3px 6px rgb(0 0 0 / 22%))
            contrast(1.08)
            brightness(1.08)
            saturate(1.1);
        opacity: 1;
    }
}

@keyframes navLiquidMatteBreath {

    0%, 100% {
        opacity: 0.4;
        filter: saturate(0.96) brightness(0.97);
    }

    50% {
        opacity: 0.65;
        filter: saturate(1.04) brightness(1.03);
    }
}

@keyframes navPillBreath {

    0%, 100% {
        box-shadow:
            0 4px 20px rgb(0 0 0 / 12%),
            inset 0 0.5px 0 rgb(255 255 255 / 4%);
        transform: translateY(0) scale(1);
    }

    50% {
        box-shadow:
            0 6px 28px rgb(0 0 0 / 16%),
            inset 0 0.5px 0 rgb(255 255 255 / 7%);
        transform: translateY(-0.3px) scale(1.004);
    }
}

@keyframes navClickFlash {

    0% {
        filter: brightness(1.0);
    }

    30% {
        filter: brightness(1.4);
        box-shadow:
            0 0 24px rgb(255 222 148 / 30%),
            inset 0 0 10px rgb(255 232 186 / 15%);
    }

    100% {
        filter: brightness(1.0);
    }
}

/* Дыхание активной плитки — мягкий пульс */
@keyframes navPillBreathActive {

    0%, 100% {
        box-shadow:
            0 4px 24px rgb(0 0 0 / 14%),
            0 0 12px rgb(226 190 116 / 6%),
            inset 0 0.5px 0 rgb(255 255 255 / 6%);
        transform: translateY(0) scale(1.01);
    }

    50% {
        box-shadow:
            0 8px 32px rgb(0 0 0 / 18%),
            0 0 20px rgb(226 190 116 / 12%),
            inset 0 0.5px 0 rgb(255 255 255 / 10%);
        transform: translateY(-0.4px) scale(1.016);
    }
}

@keyframes navLiquidRefraction {

    0% {
        transform: translateX(-16%) skewX(-18deg) scaleX(0.86);
        opacity: 0.08;
    }

    20% {
        opacity: 0.16;
    }

    52% {
        transform: translateX(126%) skewX(-18deg) scaleX(1.08);
        opacity: 0.42;
    }

    100% {
        transform: translateX(238%) skewX(-18deg) scaleX(0.92);
        opacity: 0.1;
    }
}

@keyframes headerOnlinePulse {

    0%, 100% {
        transform: translateY(0);
        box-shadow:
            0 2px 8px rgb(0 0 0 / 20%),
            10px 14px 28px rgb(40 94 72 / 28%);
        filter: brightness(1) saturate(1);
    }

    50% {
        transform: translateY(-1px);
        box-shadow:
            0 8px 18px rgb(198 161 91 / 34%),
            12px 18px 32px rgb(40 94 72 / 36%);
        filter: brightness(1.03) saturate(1.04);
    }
}

@keyframes promoRoyalPulse {

    0%, 100% {
        box-shadow:
            0 18px 34px rgb(0 0 0 / 28%),
            inset 0 1px 0 rgb(255 255 255 / 28%),
            inset 0 -10px 18px rgb(84 57 18 / 22%);
        filter: saturate(1) brightness(1);
    }

    50% {
        box-shadow:
            0 24px 42px rgb(0 0 0 / 34%),
            0 0 34px rgb(198 161 91 / 24%),
            inset 0 1px 0 rgb(255 255 255 / 34%),
            inset 0 -12px 20px rgb(84 57 18 / 18%);
        filter: saturate(1.07) brightness(1.04);
    }
}

.social-home a:hover {
    transform: translateY(-1px);
    filter: saturate(1.04) brightness(1.03);
}

.social-home a:hover > span {
    filter:
        drop-shadow(0 1px 0 rgb(28 16 3 / 48%))
        drop-shadow(0 1px 3px rgb(144 104 42 / 14%));
}

@media (width <= 900px) {

    .social-home {
        font-size: 9px;
    }
}

/* BURGER */

.premium-burger {
    position: absolute;
    top: 50%;
    right: 0;
    left: auto;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 58px;
    height: 58px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    cursor: pointer;
    isolation: isolate;
    overflow: visible;
    z-index: 1300;
    transform: translateY(-50%);
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        filter 0.35s ease,
        opacity 0.35s ease;
}

@media (width >= 900px) {

    .premium-burger {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        margin: 0;
        align-self: center;
        transform: none;
    }

    .premium-burger:hover {
        transform: translateY(-2px) scale(1.018);
    }

    .premium-burger.active {
        transform: none;
    }

    .premium-burger.active:hover {
        transform: translateY(-2px) scale(1.01);
    }
}

.premium-burger:hover {
    transform: translateY(calc(-50% - 2px)) scale(1.018);
    filter: saturate(1.08) brightness(1.04);
    box-shadow: none;
}

.premium-burger:focus-visible {
    outline: none;
    box-shadow: none;
}

.premium-burger span {
    position: relative;
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgb(255 244 218 / 44%) 0%, rgb(255 244 218 / 8%) 20%, rgb(0 0 0 / 0%) 100%),
        linear-gradient(90deg, rgb(70 46 14 / 98%) 0%, rgb(106 75 26 / 98%) 28%, rgb(166 128 62 / 96%) 58%, rgb(221 190 130 / 90%) 100%);
    background-size: 100% 100%, 180% 100%;
    transform-origin: center;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, width 0.3s ease;
    box-shadow:
        inset 0 1px 0 rgb(255 244 218 / 32%),
        inset 0 -1px 0 rgb(62 40 10 / 38%),
        0 1px 0 rgb(28 16 0 / 28%),
        0 0 5px rgb(166 128 62 / 16%),
        0 0 8px rgb(221 190 130 / 6%);
    animation: burgerLineGoldPulse 3.1s ease-in-out infinite;
}

.premium-burger span:nth-child(2) {
    width: 20px;
    animation-delay: 0.16s;
}

.premium-burger span:nth-child(3) {
    animation-delay: 0.32s;
}

.premium-burger.active {
    transform: translateY(-50%);
    box-shadow:
        0 0 8px rgb(166 128 62 / 12%),
        0 0 12px rgb(118 84 30 / 8%);
}

.premium-burger.active:hover {
    transform: translateY(calc(-50% - 2px)) scale(1.01);
}

.premium-burger.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.premium-burger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
}

.premium-burger.active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

@media (width >= 900px) {

    .premium-burger,
    .premium-burger.active {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        transform: none;
    }

    .premium-burger:hover {
        transform: translateY(-2px) scale(1.018);
    }

    .premium-burger.active:hover {
        transform: translateY(-2px) scale(1.01);
    }
}

body.light .premium-burger span {
    background:
        linear-gradient(180deg, rgb(245 238 220 / 54%) 0%, rgb(245 238 220 / 12%) 22%, rgb(0 0 0 / 0%) 100%),
        linear-gradient(90deg, rgb(140 110 60 / 96%) 0%, rgb(160 130 75 / 96%) 30%, rgb(180 150 95 / 94%) 62%, rgb(200 175 120 / 88%) 100%);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgb(255 248 230 / 42%),
        inset 0 -1px 0 rgb(120 90 40 / 24%),
        0 1px 0 rgb(255 255 250 / 24%),
        0 0 5px rgb(180 155 100 / 14%);
}

@keyframes burgerLineGoldPulse {

    0%, 100% {
        filter: saturate(0.98) brightness(0.98);
        box-shadow:
            inset 0 1px 0 rgb(255 244 218 / 28%),
            inset 0 -1px 0 rgb(62 40 10 / 32%),
            0 1px 0 rgb(32 18 0 / 24%),
            0 0 4px rgb(166 128 62 / 12%),
            0 0 6px rgb(221 190 130 / 4%);
    }

    50% {
        filter: saturate(1.05) brightness(1.05);
        box-shadow:
            inset 0 1px 0 rgb(255 246 222 / 36%),
            inset 0 -1px 0 rgb(74 48 12 / 34%),
            0 1px 0 rgb(32 18 0 / 28%),
            0 0 6px rgb(166 128 62 / 18%),
            0 0 10px rgb(221 190 130 / 8%);
    }
}

/* MAIN NAV + PROGRESS */

.nav-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nav-pill-gap-y) var(--nav-pill-gap-x);
    grid-column: 3;
    place-self: center end;
    position: relative;
    margin-top: 0;
    min-width: 0;
    flex-wrap: wrap;
    margin-right: 24px;
    transform: translateY(4px);
}

.nav-main > a,
.nav-main > .dropdown > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 13px;
    text-transform: uppercase;
    min-height: 42px;
    padding: var(--nav-pill-pad-y) var(--nav-pill-pad-x);
    margin-top: 0;
    border-radius: var(--nav-pill-radius);
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.32s ease,
        background 0.32s ease,
        box-shadow 0.32s ease,
        opacity 0.32s ease;
    font-weight: 650;
    letter-spacing: 0.04em;
    font-kerning: normal;
    color: rgb(241 201 120 / 88%);
    border: none;
    outline: none;
    background: rgb(255 255 255 / 2%);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    box-shadow:
        0 2px 10px rgb(0 0 0 / 8%),
        inset 0 0.5px 0 rgb(255 255 255 / 3%);
    text-shadow:
        0 1px 0 rgb(14 10 4 / 36%),
        0 0 12px rgb(226 190 116 / 8%);
    animation: navPillBreath var(--motion-sync-breath) ease-in-out infinite;
    will-change: transform, box-shadow;
    isolation: isolate;
}

.nav-main > a::before,
.nav-main > .dropdown > a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 30% 0%, rgb(255 255 255 / 4%) 0%, transparent 60%);
    opacity: 0.18;
    animation: navLiquidMatteBreath var(--motion-sync-breath) ease-in-out infinite;
    animation-delay: calc(var(--motion-sync-breath) * -0.25);
    pointer-events: none;
}

.nav-main > a::after,
.nav-main > .dropdown > a::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -30%;
    width: 50%;
    border-radius: inherit;
    background: linear-gradient(105deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 3%) 30%, rgb(255 255 255 / 1.5%) 50%, rgb(255 255 255 / 0%) 70%);
    opacity: 0.10;
    filter: blur(6px);
    transform: skewX(-20deg);
    animation: navLiquidRefraction 10.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    pointer-events: none;
}

.nav-main > a:focus-visible,
.nav-main > .dropdown > a:focus-visible {
    outline: none;
    transform: translateY(-1px) scale(1.01);
    color: rgb(255 242 209 / 95%);
    background: rgb(255 255 255 / 3%);
    box-shadow:
        0 4px 16px rgb(0 0 0 / 10%),
        inset 0 0.5px 0 rgb(255 255 255 / 4%);
    text-decoration: none;
}

.nav-main > a:hover,
.dropdown:hover > a,
.dropdown:focus-within > a {
    transform: translateY(-1px) scale(1.012);
    color: rgb(255 230 168 / 95%);
    background: rgb(255 255 255 / 6%);
    box-shadow:
        0 6px 28px rgb(0 0 0 / 16%),
        inset 0 0.5px 0 rgb(255 255 255 / 7%);
    text-shadow:
        0 1px 0 rgb(14 10 4 / 36%),
        0 0 14px rgb(226 190 116 / 10%);
    filter: brightness(1.04);
}

/* Активная навигационная плитка — мягкое золотое свечение внутри стекла */

.nav-main > a.active,
.nav-main > a[aria-current="page"],
.nav-main > .dropdown > a.active,
.nav-main > .dropdown > a[aria-current="page"] {
    transform: translateY(0) scale(1.01);
    color: rgb(255 232 176 / 100%);
    background: linear-gradient(180deg, rgb(226 190 116 / 2%) 0%, rgb(226 190 116 / 0.8%) 100%);
    -webkit-backdrop-filter: blur(44px) saturate(1.8) brightness(0.84);
    backdrop-filter: blur(44px) saturate(1.8) brightness(0.84);
    box-shadow:
        0 4px 24px rgb(0 0 0 / 8%),
        0 0 14px rgb(226 190 116 / 4%),
        inset 0 0.5px 0 rgb(255 255 255 / 2%);
    text-shadow:
        0 1px 0 rgb(14 10 4 / 36%),
        0 0 18px rgb(226 190 116 / 18%);
    filter: brightness(1.04);
    animation: navPillBreathActive var(--motion-sync-breath) ease-in-out infinite;
}

/* Click flash */

.nav-main > a:active,
.btn-neon:active,
.header-online-btn:active,
.btn-map:active,
#mobileNav a:active,
.mobile-dropdown-btn:active,
.promo-burger-btn:active,
.social-link:active {
    animation: navClickFlash 0.25s ease-out;
}

/* ===== Плазменный шар Тесла — эффект при нажатии ===== */

.nav-plasma {
    position: absolute;
    inset: -20%;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    mix-blend-mode: screen;
    animation: navPlasmaLifecycle 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ===== Постоянная плазма на активной плитке — эффект плазменного шара ===== */

.nav-plasma--active {
    position: absolute;
    inset: -5%;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
    animation: navPlasmaActiveBreath 6s ease-in-out infinite;

    /* Центр притяжения лучей — смещение к курсору (в %) */
    --plasma-x: 0;
    --plasma-y: 0;
}

/* Слой 1: электрические разряды-нити от центра к стеклу */

.nav-plasma--active::before {
    content: "";
    position: absolute;
    inset: -80%;
    background:
        /* Основные разряды — 6 ярких нитей, чуть шире для турбулентности */
        conic-gradient(
            from 0deg at 50% 50%,
            transparent 0deg,
            rgb(255 230 170 / 15%)  1deg,
            rgb(255 230 170 / 55%)  3deg,
            rgb(255 230 170 / 15%)  5deg,
            transparent 7deg,
            transparent 55deg,
            rgb(255 245 210 / 12%)  57deg,
            rgb(255 245 210 / 48%)  60deg,
            rgb(255 245 210 / 12%)  63deg,
            transparent 66deg,
            transparent 115deg,
            rgb(255 225 155 / 14%)  117deg,
            rgb(255 225 155 / 52%)  120deg,
            rgb(255 225 155 / 14%)  123deg,
            transparent 126deg,
            transparent 182deg,
            rgb(255 240 190 / 13%)  184deg,
            rgb(255 240 190 / 50%)   187deg,
            rgb(255 240 190 / 13%)  190deg,
            transparent 193deg,
            transparent 242deg,
            rgb(255 235 175 / 12%)  244deg,
            rgb(255 235 175 / 46%)  247deg,
            rgb(255 235 175 / 12%)  250deg,
            transparent 253deg,
            transparent 307deg,
            rgb(255 242 200 / 13%)  309deg,
            rgb(255 242 200 / 50%)   312deg,
            rgb(255 242 200 / 13%)  315deg,
            transparent 318deg,
            transparent 360deg
        ),
        /* Вторичные тусклые — 4 нити, смещённый центр */
        conic-gradient(
            from 30deg at 55% 45%,
            transparent 0deg,
            rgb(255 225 160 / 6%)  2deg,
            rgb(255 225 160 / 20%)   4deg,
            rgb(255 225 160 / 6%)  6deg,
            transparent 8deg,
            transparent 86deg,
            rgb(255 235 180 / 5%)  88deg,
            rgb(255 235 180 / 17%)  90deg,
            rgb(255 235 180 / 5%)  92deg,
            transparent 95deg,
            transparent 175deg,
            rgb(255 228 165 / 7%)  177deg,
            rgb(255 228 165 / 22%)  180deg,
            rgb(255 228 165 / 7%)  183deg,
            transparent 186deg,
            transparent 265deg,
            rgb(255 240 190 / 5%)  267deg,
            rgb(255 240 190 / 18%)  270deg,
            rgb(255 240 190 / 5%)  273deg,
            transparent 276deg,
            transparent 360deg
        );
    filter: blur(1.5px) url("#plasma-warp");
    animation: navPlasmaActiveSpin 50s linear infinite;

    /* Лучи тянутся к курсору (::before = 260% родителя, поэтому 0.42%) */
    translate: calc(var(--plasma-x) * 0.42%) calc(var(--plasma-y) * 0.42%);
    transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Слой 2: яркое ядро + свечение от разрядов */

.nav-plasma--active::after {
    content: "";
    position: absolute;
    inset: -10%;
    border-radius: inherit;
    background:
        /* Яркое центральное ядро */
        radial-gradient(circle at 50% 50%,
            rgb(255 248 225 / 50%) 0%,
            rgb(255 235 185 / 35%) 8%,
            rgb(255 220 155 / 15%) 22%,
            transparent 40%),
        /* Ореол вокруг ядра */
        radial-gradient(circle at 50% 50%,
            rgb(255 230 170 / 12%) 0%,
            rgb(255 215 140 / 6%) 35%,
            transparent 60%);
    filter: blur(3px);
    animation: navPlasmaActivePulse 8s ease-in-out infinite;

    /* Ядро тоже смещается к курсору (::after = 120% родителя) */
    translate: calc(var(--plasma-x) * 0.7%) calc(var(--plasma-y) * 0.7%);
    transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Блуждающие точки касания лучей о стекло */

.nav-plasma-touch {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgb(255 245 210 / 60%) 0%,
        rgb(255 230 170 / 25%) 40%,
        transparent 70%);
    filter: blur(4px);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    z-index: 1;
    will-change: left, top, opacity, width, height;
}

/* Лапка-курсор — яркая точка касания на стекле */

.nav-plasma-touch--cursor {
    background: radial-gradient(circle,
        rgb(255 255 240 / 100%) 0%,
        rgb(255 245 200 / 70%) 20%,
        rgb(255 230 160 / 30%) 45%,
        rgb(255 215 130 / 8%) 65%,
        transparent 80%);
    filter: blur(2px);
    opacity: 0;
    transition: opacity 0.12s ease-out;
}

.nav-plasma-touch--cursor.active {
    opacity: 0.9;
}

.nav-plasma::before {
    content: "";
    position: absolute;
    inset: -50%;
    background:
        conic-gradient(
            from 0deg at 50% 50%,
            rgb(226 190 116 / 0%)    0deg,
            rgb(255 220 150 / 50%)  25deg,
            rgb(226 190 116 / 0%)    50deg,
            rgb(255 200 100 / 35%) 90deg,
            rgb(226 190 116 / 0%)    120deg,
            rgb(255 235 180 / 45%) 160deg,
            rgb(226 190 116 / 0%)    190deg,
            rgb(240 200 120 / 40%)  230deg,
            rgb(226 190 116 / 0%)    260deg,
            rgb(255 225 160 / 38%) 300deg,
            rgb(226 190 116 / 0%)    330deg,
            rgb(255 210 140 / 30%)  350deg,
            rgb(226 190 116 / 0%)    360deg
        );
    filter: blur(6px);
    animation: navPlasmaRotate 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nav-plasma::after {
    content: "";
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 50%, rgb(255 235 190 / 45%) 0%, rgb(255 220 150 / 15%) 40%, transparent 70%),
        radial-gradient(ellipse at 25% 35%, rgb(226 190 116 / 30%) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 65%, rgb(255 215 140 / 25%) 0%, transparent 55%);
    filter: blur(4px);
    animation: navPlasmaPulse 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes navPlasmaLifecycle {

    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 0.9;
        transform: scale(0.95);
    }

    25% {
        opacity: 1;
        transform: scale(1);
    }

    60% {
        opacity: 0.85;
        transform: scale(1.02);
    }

    85% {
        opacity: 0.4;
        transform: scale(1.04);
    }

    100% {
        opacity: 0;
        transform: scale(1.06);
    }
}

@keyframes navPlasmaRotate {

    0% {
        transform: rotate(0deg) scale(0.7);
        opacity: 0.3;
    }

    15% {
        opacity: 1;
        transform: rotate(40deg) scale(1);
    }

    40% {
        opacity: 0.95;
        transform: rotate(120deg) scale(1.08);
    }

    70% {
        opacity: 0.7;
        transform: rotate(220deg) scale(1.12);
    }

    100% {
        transform: rotate(340deg) scale(1.15);
        opacity: 0;
    }
}

@keyframes navPlasmaPulse {

    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    12% {
        transform: scale(0.9);
        opacity: 0.9;
    }

    30% {
        transform: scale(1.05);
        opacity: 1;
    }

    55% {
        transform: scale(1.12);
        opacity: 0.75;
    }

    80% {
        transform: scale(1.18);
        opacity: 0.35;
    }

    100% {
        transform: scale(1.22);
        opacity: 0;
    }
}

/* ===== Keyframes: постоянная плазма Тесла на активной плитке ===== */

/* Мерцание контейнера — мягкое плавное дыхание */
@keyframes navPlasmaActiveBreath {
    0%   { opacity: 0.74; }
    25%  { opacity: 0.68; }
    50%  { opacity: 0.78; }
    75%  { opacity: 0.65; }
    100% { opacity: 0.74; }
}

/* Плавное равномерное вращение + мягкие волны масштаба */
@keyframes navPlasmaActiveSpin {
    0%    { transform: rotate(0deg)   scale(1);    }
    12.5% { transform: rotate(45deg)  scale(1.06); }
    25%   { transform: rotate(90deg)  scale(1.02); }
    37.5% { transform: rotate(135deg) scale(1.08); }
    50%   { transform: rotate(180deg) scale(1);    }
    62.5% { transform: rotate(225deg) scale(1.07); }
    75%   { transform: rotate(270deg) scale(1.03); }
    87.5% { transform: rotate(315deg) scale(1.09); }
    100%  { transform: rotate(360deg) scale(1);    }
}

/* Мягкая пульсация ядра */
@keyframes navPlasmaActivePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    25% {
        transform: scale(1.04);
        opacity: 0.72;
    }

    50% {
        transform: scale(0.98);
        opacity: 0.58;
    }

    75% {
        transform: scale(1.05);
        opacity: 0.74;
    }
}

/* Светлая тема — плазма в бежевых тонах */

body.light .nav-plasma::before {
    background:
        conic-gradient(
            from 0deg at 50% 50%,
            rgb(180 155 100 / 0%)    0deg,
            rgb(200 175 120 / 35%) 25deg,
            rgb(180 155 100 / 0%)    50deg,
            rgb(190 165 110 / 25%) 90deg,
            rgb(180 155 100 / 0%)    120deg,
            rgb(210 185 130 / 30%)  160deg,
            rgb(180 155 100 / 0%)    190deg,
            rgb(195 170 115 / 28%) 230deg,
            rgb(180 155 100 / 0%)    260deg,
            rgb(205 180 125 / 25%) 300deg,
            rgb(180 155 100 / 0%)    330deg,
            rgb(200 175 120 / 20%)  350deg,
            rgb(180 155 100 / 0%)    360deg
        );
    filter: blur(8px);
}

body.light .nav-plasma::after {
    background:
        radial-gradient(ellipse at 50% 50%, rgb(210 185 130 / 30%) 0%, rgb(190 165 110 / 10%) 40%, transparent 70%),
        radial-gradient(ellipse at 25% 35%, rgb(185 160 105 / 18%) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 65%, rgb(200 175 120 / 15%) 0%, transparent 55%);
    filter: blur(6px);
}

/* Светлая тема — постоянная плазма бежевая */

body.light .nav-plasma--active::before {
    background:
        conic-gradient(
            from 0deg at 50% 50%,
            transparent 0deg,
            rgb(190 165 110 / 10%)   1deg,
            rgb(190 165 110 / 30%)   3deg,
            rgb(190 165 110 / 10%)   5deg,
            transparent 7deg,
            transparent 55deg,
            rgb(200 175 120 / 8%) 57deg,
            rgb(200 175 120 / 28%) 60deg,
            rgb(200 175 120 / 8%) 63deg,
            transparent 66deg,
            transparent 115deg,
            rgb(185 160 105 / 10%)  117deg,
            rgb(185 160 105 / 30%)  120deg,
            rgb(185 160 105 / 10%)  123deg,
            transparent 126deg,
            transparent 182deg,
            rgb(195 170 115 / 9%) 184deg,
            rgb(195 170 115 / 28%) 187deg,
            rgb(195 170 115 / 9%) 190deg,
            transparent 193deg,
            transparent 242deg,
            rgb(192 167 112 / 8%) 244deg,
            rgb(192 167 112 / 26%) 247deg,
            rgb(192 167 112 / 8%) 250deg,
            transparent 253deg,
            transparent 307deg,
            rgb(188 163 108 / 9%) 309deg,
            rgb(188 163 108 / 28%) 312deg,
            rgb(188 163 108 / 9%) 315deg,
            transparent 318deg,
            transparent 360deg
        ),
        conic-gradient(
            from 30deg at 55% 45%,
            transparent 0deg,
            rgb(185 160 105 / 4%) 2deg,
            rgb(185 160 105 / 12%) 4deg,
            rgb(185 160 105 / 4%) 6deg,
            transparent 8deg,
            transparent 86deg,
            rgb(190 165 110 / 4%) 88deg,
            rgb(190 165 110 / 10%)  90deg,
            rgb(190 165 110 / 4%) 92deg,
            transparent 95deg,
            transparent 175deg,
            rgb(188 163 108 / 5%) 177deg,
            rgb(188 163 108 / 14%) 180deg,
            rgb(188 163 108 / 5%) 183deg,
            transparent 186deg,
            transparent 265deg,
            rgb(195 170 115 / 4%) 267deg,
            rgb(195 170 115 / 11%) 270deg,
            rgb(195 170 115 / 4%) 273deg,
            transparent 276deg,
            transparent 360deg
        );
    filter: blur(2px) url("#plasma-warp");
}

body.light .nav-plasma--active::after {
    background:
        radial-gradient(circle at 50% 50%,
            rgb(210 185 130 / 30%) 0%,
            rgb(200 175 120 / 18%) 8%,
            rgb(190 165 110 / 7%) 22%,
            transparent 40%),
        radial-gradient(circle at 50% 50%,
            rgb(195 170 115 / 7%) 0%,
            rgb(185 160 105 / 4%) 35%,
            transparent 60%);
    filter: blur(4px);
}

/* Светлая тема — блуждающие точки касания */

body.light .nav-plasma-touch {
    background: radial-gradient(circle,
        rgb(200 175 120 / 45%) 0%,
        rgb(185 160 105 / 18%) 40%,
        transparent 70%);
    filter: blur(5px);
}

body.light .nav-plasma-touch--cursor {
    background: radial-gradient(circle,
        rgb(210 185 130 / 100%) 0%,
        rgb(200 175 120 / 55%) 20%,
        rgb(190 165 110 / 22%) 45%,
        rgb(175 150 95 / 6%) 65%,
        transparent 80%);
    filter: blur(2px);
}

/* прогресс‑линия под меню */

.nav-progress {
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 1px;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background:
        linear-gradient(90deg, rgb(104 74 24 / 0%) 0%, rgb(168 126 52 / 24%) 14%, rgb(214 181 116 / 94%) 48%, rgb(168 126 52 / 24%) 84%, rgb(104 74 24 / 0%) 100%);
    box-shadow:
        0 0 8px rgb(158 118 48 / 22%),
        0 0 18px rgb(214 179 108 / 8%);
    transition: transform 0.2s ease-out;
    animation: navGoldThreadFlow var(--motion-sync-breath) ease-in-out infinite;
    pointer-events: none;
}

.dropdown {
    position: relative;
    z-index: 30;

    /* fit-content ensures the container is exactly as wide as the trigger
       button — so left:50% on .dropdown-menu is always the button's midpoint. */
    width: fit-content;
}

.dropdown::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 110%;
    height: 18px;
    transform: translateX(-50%);
    pointer-events: auto;
}

.dropdown-menu {
    position: absolute;

    /* Exactly below and horizontally centred under the trigger button.
       .dropdown is position:relative and wraps only the <a> button,
       so left:50% + translateX(-50%) always centres the menu on it. */
    top: calc(100% + 8px);
    left: 50%;
    background:
        linear-gradient(180deg, rgb(16 11 5 / 96%) 0%, rgb(9 6 3 / 99%) 100%),
        radial-gradient(circle at 18% 14%, rgb(255 244 216 / 7%) 0%, rgb(255 244 216 / 0%) 34%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(114 82 28 / 82%);
    border-radius: 20px;
    padding: 10px 9px;
    min-width: 194px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-4px) scale(0.985);
    box-shadow:
        0 22px 42px rgb(0 0 0 / 38%),
        0 0 22px rgb(146 108 42 / 8%),
        inset 0 1px 0 rgb(255 244 216 / 7%);
    z-index: 2100;
    transition:
        opacity 0.28s ease,
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.68s;
}

.dropdown-menu::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    width: 72px;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgb(214 181 116 / 22%) 0%, rgb(214 181 116 / 4%) 56%, rgb(214 181 116 / 0%) 100%);
    filter: blur(2px);
    opacity: 0.9;
    pointer-events: none;
}

.dropdown:hover,
.dropdown:focus-within {
    z-index: 2100;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    transition-delay: 0s, 0s, 0s;
}

.dropdown-menu a {
    position: relative;
    width: 100%;
    padding: 10px 14px;
    font-size: 12.5px;
    margin: 0;
    border-radius: 14px;
    border: 1px solid rgb(114 82 28 / 46%);
    background:
        linear-gradient(180deg, rgb(30 21 10 / 42%) 0%, rgb(14 10 5 / 18%) 100%),
        linear-gradient(135deg, rgb(255 242 214 / 5%) 0%, rgb(255 242 214 / 1.5%) 24%, rgb(255 242 214 / 0%) 52%);
    color: #c8994a;
    text-shadow: 0 1px 0 rgb(40 24 6 / 48%);
    transition: var(--transition-smooth);
    letter-spacing: 0.035em;
    text-transform: uppercase;
    overflow: hidden;
    isolation: isolate;
}

.dropdown-menu a::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
        linear-gradient(118deg, rgb(255 248 232 / 0%) 0%, rgb(255 248 232 / 8%) 24%, rgb(255 244 214 / 28%) 48%, rgb(255 248 232 / 6%) 64%, rgb(255 248 232 / 0%) 100%);
    opacity: 0.26;
    filter: blur(6px);
    animation: containedGoldSweep 7.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

.dropdown-menu a:hover {
    background:
        linear-gradient(180deg, rgb(40 29 14 / 54%) 0%, rgb(16 11 5 / 24%) 100%),
        linear-gradient(135deg, rgb(255 242 214 / 8%) 0%, rgb(255 242 214 / 3%) 24%, rgb(255 242 214 / 0%) 52%);
    color: #e5bc70;
    border-color: rgb(178 136 56 / 68%);
    box-shadow:
        0 10px 20px rgb(0 0 0 / 18%),
        0 0 14px rgb(146 108 42 / 12%);
}

body.light .nav-main > a,
body.light .nav-main > .dropdown > a {
    /* Lighter glass keeps the light-theme menu aligned with the warm site palette. */
    color: rgb(90 70 35 / 90%);
    border: none;
    outline: none;
    background:
        linear-gradient(135deg, rgb(255 252 245 / 24%) 0%, rgb(244 233 212 / 14%) 100%);
    -webkit-backdrop-filter: blur(28px) saturate(1.12) brightness(1.03);
    backdrop-filter: blur(28px) saturate(1.12) brightness(1.03);
    box-shadow:
        0 2px 14px rgb(80 60 30 / 4.5%),
        inset 0 0.5px 0 rgb(255 255 250 / 42%);
    text-shadow:
        0 1px 0 rgb(255 255 250 / 34%),
        0 0 6px rgb(180 155 100 / 6%);
}

body.light .nav-main > a::before,
body.light .nav-main > .dropdown > a::before {
    background:
        radial-gradient(ellipse at 30% 0%, rgb(255 255 255 / 34%) 0%, transparent 60%);
}

body.light .nav-main > a:hover,
body.light .dropdown:hover > a,
body.light .dropdown:focus-within > a,
body.light .nav-main > a:focus-visible,
body.light .nav-main > .dropdown > a:focus-visible {
    color: rgb(100 78 38 / 95%);
    background:
        linear-gradient(135deg, rgb(255 252 245 / 31%) 0%, rgb(244 233 212 / 18%) 100%);
    box-shadow:
        0 4px 18px rgb(80 60 30 / 6%),
        inset 0 0.5px 0 rgb(255 255 250 / 50%);
    filter: brightness(1.02);
}

body.light .nav-main > a.active,
body.light .nav-main > a[aria-current="page"],
body.light .nav-main > .dropdown > a.active,
body.light .nav-main > .dropdown > a[aria-current="page"] {
    color: rgb(110 85 40 / 100%);
    background:
        linear-gradient(180deg, rgb(200 175 120 / 8.5%) 0%, rgb(200 175 120 / 2.8%) 100%),
        rgb(255 252 245 / 18%);
    box-shadow:
        0 4px 18px rgb(80 60 30 / 5%),
        0 0 10px rgb(180 155 100 / 6%),
        inset 0 0.5px 0 rgb(255 255 250 / 34%);
    text-shadow:
        0 1px 0 rgb(255 255 250 / 32%),
        0 0 14px rgb(180 155 100 / 14%);
    filter: saturate(1.05);
}

/* Светлая тема - glassmorphism эффекты для всех кнопок */

body.light .btn-neon,
body.light .header-online-btn,
body.light .btn-map,
body.light #mobileNav a,
body.light .mobile-dropdown-btn,
body.light .promo-burger-btn,
body.light .social-link {
    color: rgb(90 70 35 / 90%);
    background: rgb(255 252 245 / 35%);
    -webkit-backdrop-filter: blur(32px) saturate(1.2) brightness(1.04);
    backdrop-filter: blur(32px) saturate(1.2) brightness(1.04);
    box-shadow:
        0 2px 16px rgb(80 60 30 / 6%),
        inset 0 0.5px 0 rgb(255 255 250 / 55%);
    text-shadow:
        0 1px 0 rgb(255 255 250 / 40%),
        0 0 6px rgb(180 155 100 / 6%);
}

body.light .btn-neon::before,
body.light .header-online-btn::before,
body.light .btn-map::before,
body.light #mobileNav a::before,
body.light .mobile-dropdown-btn::before,
body.light .promo-burger-btn::before,
body.light .social-link::before {
    background:
        radial-gradient(ellipse at 30% 0%, rgb(255 255 255 / 50%) 0%, transparent 60%);
}

body.light .btn-neon:hover,
body.light .header-online-btn:hover,
body.light .btn-map:hover,
body.light #mobileNav a:hover,
body.light .mobile-dropdown-btn:hover,
body.light .promo-burger-btn:hover,
body.light .social-link:hover {
    color: rgb(100 78 38 / 95%);
    background: rgb(255 252 245 / 45%);
    box-shadow:
        0 4px 20px rgb(80 60 30 / 8%),
        inset 0 0.5px 0 rgb(255 255 250 / 60%);
    filter: brightness(1.02);
}

/* Active состояние для всех кнопок в светлой теме */

body.light .btn-neon.active,
body.light .header-online-btn.active,
body.light .btn-map.active,
body.light #mobileNav a.active,
body.light .mobile-dropdown-btn.active,
body.light .promo-burger-btn.active,
body.light .social-link.active {
    color: rgb(110 85 40 / 100%);
    background: linear-gradient(180deg, rgb(200 175 120 / 10%) 0%, rgb(200 175 120 / 4%) 100%);
    box-shadow:
        0 4px 20px rgb(80 60 30 / 6%),
        0 0 12px rgb(180 155 100 / 8%),
        inset 0 0.5px 0 rgb(255 255 250 / 40%);
    text-shadow:
        0 1px 0 rgb(255 255 250 / 40%),
        0 0 14px rgb(180 155 100 / 14%);
    filter: saturate(1.05);
}

body.light .nav-progress {
    background:
        linear-gradient(90deg, rgb(160 130 70 / 0%) 0%, rgb(160 130 70 / 20%) 14%, rgb(190 165 110 / 82%) 48%, rgb(160 130 70 / 20%) 84%, rgb(160 130 70 / 0%) 100%);
    box-shadow:
        0 0 8px rgb(160 130 70 / 14%),
        0 0 18px rgb(190 165 110 / 4%);
}

body.light .dropdown-menu {
    background:
        linear-gradient(180deg, rgb(252 248 240 / 97%) 0%, rgb(248 242 230 / 98%) 100%),
        radial-gradient(circle at 18% 14%, rgb(255 255 252 / 56%) 0%, rgb(255 255 252 / 0%) 34%);
    border-color: rgb(180 155 115 / 22%);
    box-shadow:
        0 18px 34px rgb(80 60 30 / 8%),
        0 0 18px rgb(180 155 115 / 4%),
        inset 0 1px 0 rgb(255 255 250 / 66%);
}

body.light .dropdown-menu::before {
    background:
        linear-gradient(180deg, rgb(200 175 120 / 14%) 0%, rgb(200 175 120 / 4%) 56%, rgb(200 175 120 / 0%) 100%);
}

body.light .dropdown-menu a {
    color: #6b5530;
    border-color: rgb(180 155 115 / 16%);
    background:
        linear-gradient(180deg, rgb(255 255 250 / 56%) 0%, rgb(252 248 238 / 72%) 100%),
        linear-gradient(135deg, rgb(200 175 120 / 4%) 0%, rgb(200 175 120 / 1%) 24%, rgb(200 175 120 / 0%) 52%);
    text-shadow: 0 1px 0 rgb(255 255 250 / 44%);
}

body.light .dropdown-menu a:hover {
    color: #7a6238;
    border-color: rgb(180 155 115 / 28%);
    background:
        linear-gradient(180deg, rgb(255 255 250 / 84%) 0%, rgb(252 248 235 / 94%) 100%),
        linear-gradient(135deg, rgb(200 175 120 / 6%) 0%, rgb(200 175 120 / 2%) 24%, rgb(200 175 120 / 0%) 52%);
}

/* HEADER CONTROLS */

.header-controls {
    display: flex;
    align-items: center;
    gap: 3px;
    row-gap: 3px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
    z-index: 60;
    position: relative;
    isolation: isolate;
    overflow: visible;
    place-self: center end;
    margin-top: 0;
    padding-right: 0;
    max-width: 100%;
    transform: translateY(6px);
}

.header-controls .language-dropdown {
    overflow: visible;
}

@media (width >= 1281px) {

    .top-row {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;

        /* 5-column model:
           [logo] [widget centered] [nav] [1fr spacer] [controls]. */
        grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) max-content;
        justify-content: stretch;
        column-gap: 18px;
    }

    .top-row > .logo-wrapper,
    .top-row > .header-weather-shell,
    .top-row > .nav-main,
    .top-row > .header-controls {
        align-self: center;
    }

    .top-row > .logo-wrapper {
        grid-column: 1;
        justify-self: start;
    }

    .top-row > .header-weather-shell {
        grid-column: 2;
        justify-self: center;
    }

    .top-row > .nav-main {
        grid-column: 3;
        justify-self: start;
        width: max-content;
        margin-right: 0;
        transform: none;
    }

    .top-row > .header-controls {
        grid-column: 5;
        justify-self: end;
        width: max-content;
        justify-content: center;
        margin-left: 0;
        transform: none;
    }
}

.header-controls > * {
    flex-shrink: 0;
}

.header-online-btn {
    background:
        linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-dark) 100%);
    border: none;
    color: #fff;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease,
        filter 0.28s ease;
    box-shadow:
        0 4px 16px rgb(0 0 0 / 18%),
        inset 0 1px 0 rgb(255 255 255 / 15%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: none;
    text-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

.header-online-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgb(255 255 255 / 25%) 0%, rgb(255 255 255 / 6%) 30%, rgb(255 255 255 / 0%) 50%);
    pointer-events: none;
}

/* Убираем старый ::after у header-online-btn, заменяем на glassmorphism эффект */

.header-online-btn::after {
    top: -30%;
    bottom: -30%;
    left: -30%;
    width: 50%;
    background: linear-gradient(105deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 7%) 30%, rgb(255 255 255 / 4%) 50%, rgb(255 255 255 / 0%) 70%);
    opacity: 0.3;
    filter: blur(6px);
    transform: skewX(-20deg);
    animation: navLiquidRefraction 10.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.header-online-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 24px rgb(0 0 0 / 22%),
        inset 0 1px 0 rgb(255 255 255 / 20%);
    filter: brightness(1.08);
}

.theme-btn {
    position: relative;
    overflow: visible;
    background: transparent;
    border: none;
    color: var(--accent-gold);
    width: 45px;
    min-width: 45px;
    height: 45px;
    min-height: 45px;
    padding: 0;
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: var(--transition-smooth);
}

.theme-btn::before {
    content: "";
    position: relative;
    z-index: 1;
    width: 45px;
    height: 45px;
    background: url("../images/icon-pak/ready_icons_for_site/sunrise.png") center/contain no-repeat;
    filter:
        drop-shadow(0 3px 6px rgb(0 0 0 / 28%))
        saturate(1.06)
        brightness(1.04);
    animation:
        iconGlassBounce var(--icon-bounce-duration) ease-in-out infinite,
        iconSurfaceRefraction var(--icon-sheen-duration) ease-in-out infinite;
}

body.light .theme-btn::before {
    background-image: url("../images/icon-pak/ready_icons_for_site/moon_reader.png");
    filter:
        drop-shadow(0 3px 6px rgb(0 0 0 / 28%))
        saturate(1.06)
        brightness(1.04);
}

.theme-btn::after,
.header-controls .lang-dropdown-btn::after,
.promo-burger-btn i::after {
    content: none;
}

.theme-btn:hover {
    transform: translateY(-1px) scale(1.015);
    box-shadow: none;
}

/* LANGUAGE DROPDOWN */

.header-controls .language-dropdown {
    position: relative;
    z-index: 60;
}

.lang-flags {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 3px;
}

.flag-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(255 255 255 / 5%);
    color: var(--accent-gold);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--premium-letter-tight);
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.flag-item:hover,
.flag-item.active {
    background: rgb(198 161 91 / 14%);
    border-color: rgb(255 226 166 / 24%);
    transform: translateY(-1px);
}

.flag-item .flag {
    font-size: 18px;
    line-height: 1;
}

.header-controls .lang-dropdown-btn {
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
    color: var(--accent-gold);
    min-width: 88px;
    width: 88px;
    height: 88px;
    min-height: 88px;
    padding: 0 14px;
    border-radius: 30px;
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: var(--premium-letter-tight);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
    z-index: 100;
}

.header-controls .lang-dropdown-btn::after {
    content: none;
}

.header-controls .lang-dropdown-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: 0 0 auto;
    transition: transform 0.24s ease, opacity 0.24s ease;
    pointer-events: none;
}

.header-controls .lang-dropdown-btn i:first-child {
    order: 2;
    width: 23px;
    min-width: 23px;
    height: 23px;
    font-size: 0;
    background: url("../images/icon-pak/ready_icons_for_site/globus-lang.png") center/contain no-repeat;
    filter:
        drop-shadow(0 6px 12px rgb(0 0 0 / 26%))
        saturate(1.04)
        brightness(1.03);
    animation:
        iconGlassBounce var(--icon-bounce-duration) ease-in-out infinite,
        iconSurfaceRefraction var(--icon-sheen-duration) ease-in-out infinite;
}

.header-controls .lang-dropdown-btn i:first-child::before {
    content: none !important;
    display: none !important;
}

.header-controls .lang-dropdown-btn i:last-child {
    order: 1;
    width: 16px;
    min-width: 16px;
    height: 16px;
    font-size: 0;
    margin-left: 0;
    margin-right: 2px;
    opacity: 0.9;
    background: url("../images/ui/chevron-emerald-gold.svg") center/contain no-repeat;
    filter:
        drop-shadow(0 2px 4px rgb(0 0 0 / 28%))
        drop-shadow(0 0 5px rgb(247 199 68 / 18%));
}

.header-controls .lang-dropdown-btn i:last-child::before {
    content: none !important;
    display: none !important;
}

.header-controls .lang-dropdown-btn:hover {
    transform: translateY(-2px) scale(1.01);
    opacity: 0.94;
    filter: none;
}

.header-controls .language-dropdown.open .lang-dropdown-btn {
    transform: translateY(-1px);
    opacity: 1;
    filter: none;
}

.header-controls .language-dropdown.open .lang-dropdown-btn i:last-child {
    transform: rotate(180deg);
}

.header-controls .lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 4%) 18%, rgb(13 15 21 / 42%) 58%, rgb(10 12 18 / 56%) 100%),
        radial-gradient(circle at 14% 10%, rgb(255 243 210 / 14%) 0%, rgb(255 243 210 / 4%) 18%, rgb(255 243 210 / 0%) 38%),
        radial-gradient(circle at 82% 16%, rgb(197 238 255 / 8%) 0%, rgb(197 238 255 / 2.5%) 20%, rgb(197 238 255 / 0%) 42%),
        linear-gradient(140deg, rgb(255 236 184 / 5%) 0%, rgb(255 255 255 / 1.6%) 28%, rgb(0 0 0 / 8%) 100%);
    -webkit-backdrop-filter: blur(26px) saturate(1.34);
    backdrop-filter: blur(26px) saturate(1.34);
    border: none;
    border-radius: 22px;
    padding: 8px;
    min-width: 132px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.98);
    transition: opacity 0.3s cubic-bezier(0.2, 0.9, 0.4, 1), visibility 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
    pointer-events: none;
    box-shadow:
        0 28px 64px rgb(0 0 0 / 34%),
        inset 0 1px 0 rgb(255 255 255 / 12%),
        inset 0 -14px 32px rgb(0 0 0 / 8%);
    z-index: 2100;
    overflow: hidden;
}

.header-controls .lang-dropdown-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 4.5%) 22%, rgb(255 255 255 / 0%) 44%),
        linear-gradient(180deg, rgb(255 255 255 / 4%) 0%, rgb(255 255 255 / 1.2%) 28%, rgb(255 255 255 / 0%) 58%);
    pointer-events: none;
}

.header-controls .lang-dropdown-menu::after {
    content: "";
    position: absolute;
    inset: auto 10% -28%;
    height: 48%;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 235 182 / 12%) 0%, rgb(255 235 182 / 3.5%) 32%, rgb(255 235 182 / 0%) 68%);
    filter: blur(16px);
    pointer-events: none;
}

.header-controls .language-dropdown.open .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.header-controls .language-dropdown.open {
    z-index: 2600;
}

.header-controls .lang-dropdown-menu li {
    list-style: none;
    position: relative;
    padding: 9px 11px;
    cursor: pointer;
    border-radius: 14px;
    transition: background 0.24s ease, transform 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 540;
    color: var(--text-dark);
    border: none;
    background: linear-gradient(135deg, rgb(255 255 255 / 3%) 0%, rgb(255 255 255 / 1.2%) 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 2.8%);
}

.header-controls .lang-dropdown-menu li:hover {
    background:
        linear-gradient(135deg, rgb(255 244 216 / 8%) 0%, rgb(255 244 216 / 2.8%) 28%, rgb(255 244 216 / 1.2%) 100%),
        rgb(198 161 91 / 6%);
    color: var(--accent-gold);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 8%),
        0 8px 20px rgb(0 0 0 / 12%);
    transform: translateX(2px) translateY(-1px);
}

.header-controls .lang-dropdown-menu li + li {
    margin-top: 3px;
}

.header-controls .lang-dropdown-menu .flag {
    position: relative;
    display: inline-block;
    width: 24px;
    min-width: 24px;
    height: 16px;
    font-size: 0;
    color: transparent;
    line-height: 0;
    border-radius: 5px;
    overflow: hidden;
    border: none;
    box-shadow: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: 8% 50%;
    transition: transform 0.28s ease, filter 0.28s ease, opacity 0.28s ease;
    filter:
        drop-shadow(0 4px 8px rgb(0 0 0 / 22%))
        drop-shadow(0 0 8px rgb(255 232 176 / 8%));
    animation: flagWave3d 4.8s cubic-bezier(0.42, 0.08, 0.22, 0.98) infinite;
}

.header-controls .lang-dropdown-menu .flag::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(108deg, rgb(255 255 255 / 34%) 0%, rgb(255 255 255 / 14%) 18%, rgb(255 255 255 / 2%) 36%, rgb(255 255 255 / 0%) 58%),
        linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(0 0 0 / 4%) 100%);
    mix-blend-mode: screen;
    opacity: 0.92;
    pointer-events: none;
    animation: flagHighlightDrift 5.2s ease-in-out infinite;
}

.header-controls .lang-dropdown-menu .flag::after {
    content: "";
    position: absolute;
    inset: -6% -12% -10% 18%;
    background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 8.5%) 42%, rgb(0 0 0 / 16%) 72%, rgb(0 0 0 / 2%) 100%);
    mix-blend-mode: multiply;
    opacity: 0.5;
    pointer-events: none;
    animation: flagShadowDrift 4.8s ease-in-out infinite;
}

.header-controls .lang-dropdown-menu li[data-lang="de"] .flag {
    background-image: linear-gradient(180deg, #0e0e10 0 33.33%, #c11f26 33.33% 66.66%, #f1c93c 66.66% 100%);
}

.header-controls .lang-dropdown-menu li[data-lang="ru"] .flag {
    background-image: linear-gradient(180deg, #fff 0 33.33%, #2f63d8 33.33% 66.66%, #d9404a 66.66% 100%);
}

.header-controls .lang-dropdown-menu li[data-lang="uk"] .flag {
    background-image: linear-gradient(180deg, #2f7df4 0 50%, #f4d43d 50% 100%);
}

.header-controls .lang-dropdown-menu li[data-lang="en"] .flag {
    background-image:
        linear-gradient(180deg, #3c3b6e 0 100%),
        repeating-linear-gradient(
            180deg,
            #b22234 0 7.69%,
            #fff 7.69% 15.38%
        );
    background-size: 42% 54%, 100% 100%;
    background-position: top left, center;
    background-repeat: no-repeat;
}

.header-controls .lang-dropdown-menu li:nth-child(2n) .flag {
    animation-delay: 0.55s;
}

.header-controls .lang-dropdown-menu li:nth-child(3n) .flag {
    animation-delay: 1.1s;
}

.header-controls .lang-dropdown-menu li:nth-child(4n) .flag {
    animation-delay: 1.65s;
}

.header-controls .lang-dropdown-menu li:hover .flag {
    transform: perspective(260px) rotateY(-18deg) rotateX(7deg) skewY(-1.4deg) translateY(-1px) scale(1.08);
    filter:
        drop-shadow(0 9px 14px rgb(0 0 0 / 24%))
        drop-shadow(0 0 12px rgb(255 226 166 / 16%));
}

@keyframes flagWave3d {

    0%, 100% {
        transform: perspective(280px) rotateY(-2deg) rotateX(0deg) skewY(0deg) scaleX(1) scaleY(1);
    }

    18% {
        transform: perspective(280px) rotateY(-9deg) rotateX(2.2deg) skewY(-1.2deg) scaleX(1.018) scaleY(1);
    }

    36% {
        transform: perspective(280px) rotateY(3deg) rotateX(-0.4deg) skewY(0.55deg) scaleX(0.994) scaleY(1.01);
    }

    58% {
        transform: perspective(280px) rotateY(7deg) rotateX(0.4deg) skewY(1deg) scaleX(1.012) scaleY(0.996);
    }

    78% {
        transform: perspective(280px) rotateY(-4deg) rotateX(-0.8deg) skewY(-0.7deg) scaleX(0.998) scaleY(1.004);
    }
}

@keyframes flagHighlightDrift {

    0%, 100% {
        transform: translateX(-6%) skewX(-7deg);
        opacity: 0.84;
    }

    50% {
        transform: translateX(8%) skewX(-11deg);
        opacity: 1;
    }
}

@keyframes flagShadowDrift {

    0%, 100% {
        transform: translateX(-6%) skewX(5deg);
        opacity: 0.4;
    }

    50% {
        transform: translateX(10%) skewX(10deg);
        opacity: 0.56;
    }
}

@media (width <= 900px) {

    .header-controls .lang-dropdown-btn {
        min-width: 68px;
        width: 68px;
        height: 68px;
        min-height: 68px;
        padding: 0 10px;
        font-size: 20px;
        border-radius: 24px;
    }

    .header-controls .lang-dropdown-btn i:first-child {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    .header-controls .lang-dropdown-btn i:last-child {
        width: 20px;
        min-width: 20px;
        height: 20px;
        font-size: 0;
    }

    .theme-btn::before {
        width: 38px;
        height: 38px;
    }

    .header-controls .lang-dropdown-menu {
        right: auto;
        left: 0;
        min-width: 124px;
    }
}

.footer-socials .social-link--icon:active {
    animation: socialCoinToss 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

.social-bar {
    display: block;
    padding-top: 4px;
    border-top: none;
    margin-top: 6px;
    position: relative;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px);
    overflow: visible;
    transition:
        transform 0.45s ease,
        opacity 0.45s ease,
        visibility 0.45s ease;
}

.social-bar-inner {
    display: grid;
    grid-template-columns: var(--logo-mark-width) minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 16px;
    width: 100%;
    overflow: visible;
}

.social-bar-start {
    grid-column: 1 / 2;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.social-home {
    grid-column: auto;
}

.social-player-divider {
    width: 1px;
    height: 28px;
    flex: 0 0 1px;
    margin: 0 6px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        rgb(255 255 255 / 0%) 0%,
        rgb(197 160 91 / 20%) 18%,
        rgb(242 214 151 / 74%) 50%,
        rgb(197 160 91 / 20%) 82%,
        rgb(255 255 255 / 0%) 100%
    );
    box-shadow:
        0 0 8px rgb(205 168 97 / 10%),
        0 0 16px rgb(255 227 160 / 4%);
    opacity: 0.92;
}

.social-player-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.social-player-toggle {
    width: 56px;
    height: 56px;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.social-player-toggle:hover,
.social-player-toggle.is-open {
    transform: translateY(-1px) scale(1.06);
    opacity: 0.96;
    filter: saturate(1.06);
}

.social-player-icon {
    width: 96px;
    height: 96px;
    display: inline-block;
    background: url("../images/icon-pak/ready_icons_for_site/musicplayer_alt16.png") center/contain no-repeat;
    filter:
        drop-shadow(0 2px 4px rgb(0 0 0 / 32%))
        drop-shadow(0 0 8px rgb(212 176 102 / 16%));
}

/* Music service submenu */

.social-music-menu {
    /* Positioned relative to .social-player-wrap (position: relative),
       so it always appears exactly below the gramophone toggle button,
       horizontally centred on it — no JS positioning needed. */
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    display: grid;
    grid-template-columns: repeat(2, minmax(96px, 1fr));
    gap: 10px;
    min-width: 220px;
    max-width: calc(100vw - 24px);
    padding: 12px;
    border-radius: 28px;
    background:
        linear-gradient(160deg, rgb(24 28 24 / 52%) 0%, rgb(10 12 10 / 34%) 100%),
        radial-gradient(circle at top left, rgb(255 246 224 / 14%) 0%, rgb(255 246 224 / 3%) 32%, transparent 62%);
    border: 1px solid rgb(214 231 220 / 16%);
    box-shadow:
        0 18px 44px rgb(0 0 0 / 28%),
        0 8px 24px rgb(8 15 11 / 16%),
        0 0 0 1px rgb(255 248 230 / 5%),
        inset 0 1px 0 rgb(255 255 255 / 12%),
        inset 0 -12px 26px rgb(8 12 9 / 16%);
    -webkit-backdrop-filter: blur(26px) saturate(1.22) brightness(1.02);
    backdrop-filter: blur(26px) saturate(1.22) brightness(1.02);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* translateX(-50%) centres the menu on its own left:50% anchor.
       -6px / scale(0.96) are the opening animation's initial state. */
    transform: translate3d(-50%, -6px, 0) scale(0.96);
    transform-origin: 50% top;
    transition:
        opacity 0.24s ease,
        visibility 0.24s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1400;
}

.social-music-menu::before {
    /* Top glass bloom. */
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 0%, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 4%) 30%, transparent 58%),
        linear-gradient(180deg, rgb(255 255 255 / 8%) 0%, rgb(255 255 255 / 1.5%) 34%, transparent 68%);
    opacity: 0.9;
}

.social-music-menu::after {
    /* Moving refraction band for the morphism feel. */
    content: "";
    position: absolute;
    top: -24%;
    bottom: -24%;
    left: -28%;
    width: 44%;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(108deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 10%) 34%, rgb(255 255 255 / 4%) 52%, rgb(255 255 255 / 0%) 72%);
    opacity: 0.36;
    filter: blur(8px);
    transform: skewX(-20deg);
    animation: navLiquidRefraction 10.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.social-music-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    /* Keep the -50% X translate so the menu stays centred on left:50%. */
    transform: translate3d(-50%, 0, 0) scale(1);
}

.social-music-menu[hidden] {
    display: none !important;
}

.social-music-item {
    width: 100%;
    min-height: auto;
    padding: 10px 8px 8px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    overflow: visible;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    text-align: center;
    appearance: none;
    opacity: 0.92;
    transition:
        transform 0.24s ease,
        opacity 0.24s ease;
}

.social-music-item::before {
    content: none;
}

.social-music-item::after {
    content: none;
}

.social-music-item > * {
    position: relative;
    z-index: 1;
}

.social-music-item:hover {
    transform: translateY(-3px);
    opacity: 1;
}

.social-music-item:focus-visible {
    transform: translateY(-3px);
    opacity: 1;
    outline: 2px solid rgb(245 214 138 / 36%);
    outline-offset: 3px;
}

.social-music-item-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter:
        drop-shadow(0 2px 4px rgb(0 0 0 / 28%));
    transition: transform 0.28s ease, filter 0.28s ease;
}

.social-music-item-icon--spotify {
    background-image: url("../images/icon-pak/ready_icons_for_site/spotify.png");
}

.social-music-item-icon--apple {
    background-image: url("../images/icon-pak/ready_icons_for_site/apple_music.png");
}

.social-music-item-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.03em;
    color: rgb(255 236 194 / 94%);
    white-space: normal;
    text-align: center;
    text-shadow: 0 1px 0 rgb(14 11 8 / 42%);
}

.social-music-item:hover .social-music-item-icon,
.social-music-item:focus-visible .social-music-item-icon {
    transform: translateY(-2px) scale(1.06);
    filter:
        drop-shadow(0 4px 8px rgb(0 0 0 / 26%))
        drop-shadow(0 0 10px rgb(216 177 90 / 20%));
}

body.light .social-music-menu {
    /* Light theme keeps the same glass language, only warmer and airier. */
    background:
        linear-gradient(160deg, rgb(255 251 242 / 50%) 0%, rgb(243 232 210 / 24%) 100%),
        radial-gradient(circle at top left, rgb(255 255 255 / 42%) 0%, rgb(255 255 255 / 8%) 34%, transparent 62%);
    border-color: rgb(184 151 85 / 16%);
    box-shadow:
        0 18px 34px rgb(96 73 36 / 12%),
        0 8px 20px rgb(96 73 36 / 6%),
        0 0 0 1px rgb(255 255 249 / 18%),
        inset 0 1px 0 rgb(255 255 255 / 52%),
        inset 0 -10px 18px rgb(174 149 103 / 8%);
}

body.light .social-music-menu::before {
    background:
        radial-gradient(circle at 18% 0%, rgb(255 255 255 / 58%) 0%, rgb(255 255 255 / 14%) 32%, transparent 58%),
        linear-gradient(180deg, rgb(255 255 255 / 22%) 0%, rgb(255 255 255 / 6%) 38%, transparent 70%);
}

body.light .social-music-menu::after {
    background: linear-gradient(108deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 18%) 34%, rgb(255 255 255 / 8%) 52%, rgb(255 255 255 / 0%) 72%);
    opacity: 0.34;
}

body.light .social-music-item {
    background: transparent;
}

body.light .social-music-item:hover,
body.light .social-music-item:focus-visible {
    outline-color: rgb(184 151 85 / 32%);
}

body.light .social-music-item-label {
    color: rgb(92 71 34 / 94%);
    text-shadow: 0 1px 0 rgb(255 255 255 / 42%);
}

body.light .social-music-item-icon {
    filter: drop-shadow(0 2px 4px rgb(96 73 36 / 16%));
}

.social-player-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: clamp(320px, 30vw, 380px);
    max-width: calc(100vw - 24px);
    padding: 10px;
    border-radius: 24px;
    background:
        linear-gradient(160deg, rgb(24 20 14 / 88%) 0%, rgb(12 11 10 / 82%) 100%);
    border: 1px solid rgb(214 181 109 / 18%);
    box-shadow:
        0 18px 38px rgb(0 0 0 / 34%),
        0 0 0 1px rgb(255 236 194 / 5%),
        inset 0 1px 0 rgb(255 246 224 / 8%);
    -webkit-backdrop-filter: blur(12px) saturate(1.04);
    backdrop-filter: blur(12px) saturate(1.04);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transform: translate3d(0, -8px, 0) scale(0.985);
    transform-origin: var(--spotify-origin-x, 28px) top;
    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1400;
}

.social-player-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

.social-player-panel[hidden] {
    display: none !important;
}

.social-player-panel iframe {
    width: 100%;
    height: 152px;
    border: 0;
    border-radius: 16px;
    display: block;
}

.social-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgb(255 255 255 / 0%) 0%,
        rgb(155 124 67 / 4%) 18%,
        rgb(225 193 126 / 16%) 50%,
        rgb(155 124 67 / 4%) 82%,
        rgb(255 255 255 / 0%) 100%
    );
    background-size: 220% 100%;
    background-position: 50% 50%;
    box-shadow: none;
    opacity: 0.16;
    animation: siriHeaderLineFlow 7.8s ease-in-out infinite;
    pointer-events: none;
}

.social-bar::after {
    display: none;
}

.social-bar,
.social-bar-inner {
    box-shadow: none;
    border-bottom: none;
}

.social-bar.show-social {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

@media (width >= 900px) {

    .social-bar {
        margin-top: 3px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .social-bar-inner {
        min-height: 26px;
        align-items: center;
        align-content: center;
        column-gap: 10px;
    }

    .social-bar-start {
        align-self: center;
        gap: 10px;
    }

    .social-player-divider {
        height: 20px;
        align-self: center;
    }

    .social-player-wrap,
    .social-icons,
    .social-home,
    .social-home a {
        align-self: center;
    }

    .social-home a {
        min-height: 20px;
    }

    .social-player-toggle {
        width: 40px;
        height: 40px;
    }

    .social-player-icon {
        width: 40px;
        height: 40px;
    }

    .social-music-menu {
        grid-template-columns: repeat(2, minmax(82px, 1fr));
        min-width: 188px;
        padding: 8px;
        gap: 8px;
    }

    .social-music-item {
        min-height: auto;
        padding: 6px 4px 4px;
        border-radius: 12px;
    }

    .social-music-item-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .social-music-item-label {
        font-size: 0.68rem;
    }

    .social-icons {
        gap: 14px;
        transform: none;
    }

    .social-bar .social-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }
}

@keyframes siriHeaderLineFlow {

    0% {
        background-position: 18% 50%;
        opacity: 0.4;
    }

    50% {
        background-position: 50% 50%;
        opacity: 0.52;
    }

    100% {
        background-position: 82% 50%;
        opacity: 0.4;
    }
}

@keyframes siriHeaderAuraShift {

    0% {
        transform: translateY(0) translateX(-2%) scaleX(0.94) scaleY(0.72);
    }

    50% {
        transform: translateY(0) translateX(2%) scaleX(1.04) scaleY(1.12);
    }

    100% {
        transform: translateY(0) translateX(-2%) scaleX(0.94) scaleY(0.72);
    }
}

@keyframes siriHeaderAuraPulse {

    0%, 100% {
        opacity: 0.46;
        filter: blur(22px) saturate(1.04);
    }

    50% {
        opacity: 0.58;
        filter: blur(30px) saturate(1.08);
    }
}

.social-icons {
    grid-column: 3 / 4;
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 18px;
    transform: translateX(12px);
}

.social-bar .social-icon,
.header-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-decoration: none;
    position: relative;
    margin-inline: 0;
    transform-origin: center;
    transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.social-bar .social-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.header-social-link {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

.social-bar .social-icon::after,
.header-social-link::after {
    content: none;
}

.social-bar .social-icon i,
.header-social-link i,
.footer-socials .social-link--icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0 !important;
    color: transparent;
    line-height: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform-style: preserve-3d;
    backface-visibility: visible;
    animation: iconMetalShimmer var(--icon-sheen-duration) ease-in-out infinite;
    filter:
        drop-shadow(0 1px 2px rgb(0 0 0 / 26%))
        drop-shadow(0 0 4px rgb(255 223 171 / 10%));
}

.social-bar .social-icon:hover i,
.header-social-link:hover i {
    animation:
        iconSocialBounceFlip 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
        iconMetalShimmer var(--icon-sheen-duration) ease-in-out infinite;
}

/* Входная анимация при загрузке страницы */

.social-bar .social-icon.social-entrance i,
.header-social-link.social-entrance i,
.footer-socials .social-link--icon.social-entrance i,
.mobile-social-icons .social-icon.social-entrance i {
    animation:
        iconSocialBounceFlip 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
        iconMetalShimmer var(--icon-sheen-duration) ease-in-out infinite !important;
}

.footer-socials .social-link--primary i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    font-size: 0 !important;
    color: transparent;
    line-height: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter:
        drop-shadow(0 1px 2px rgb(0 0 0 / 26%))
        drop-shadow(0 0 4px rgb(255 223 171 / 10%));
}

.social-bar .social-icon i::before,
.header-social-link i::before,
.footer-socials .social-link--icon i::before,
.footer-socials .social-link--primary i::before {
    content: none !important;
    display: none !important;
}

.social-bar .social-icon:hover,
.header-social-link:hover {
    animation: iconGlassBallHover 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: saturate(1.08) brightness(1.06);
}

/* Per-icon shimmer delay */
.social-bar .social-icon:nth-child(1) i { animation-delay: 0s; }
.social-bar .social-icon:nth-child(2) i { animation-delay: 0.2s; }
.social-bar .social-icon:nth-child(3) i { animation-delay: 0.4s; }
.social-bar .social-icon:nth-child(4) i { animation-delay: 0.6s; }
.social-bar .social-icon:nth-child(5) i { animation-delay: 0.8s; }
.social-bar .social-icon:nth-child(6) i { animation-delay: 1.0s; }

.header-socials {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    margin-right: 0;
}

.header-social-link .fa-share-alt,
.social-bar .social-icon .fa-share-alt,
.footer-socials .social-link--primary .fa-share-alt {
    background-image: url("../images/icon-pak/ready_icons_for_site/sozial-links.png");
}

.social-bar .social-icon:has(.fa-share-alt) {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.header-social-link .fa-instagram,
.social-bar .social-icon .fa-instagram,
.footer-socials .social-link--icon .fa-instagram {
    background-image: url("../images/icon-pak/ready_icons_for_site/instagram.png");
}

.header-social-link .fa-telegram,
.header-social-link .fa-telegram-plane,
.social-bar .social-icon .fa-telegram,
.social-bar .social-icon .fa-telegram-plane,
.footer-socials .social-link--icon .fa-telegram,
.footer-socials .social-link--icon .fa-telegram-plane {
    background-image: url("../images/icon-pak/ready_icons_for_site/Telegram.png");
}

.header-social-link .fa-whatsapp,
.social-bar .social-icon .fa-whatsapp,
.footer-socials .social-link--icon .fa-whatsapp {
    background-image: url("../images/icon-pak/ready_icons_for_site/whatsapp_alt3.png");
}

.header-social-link .fa-envelope,
.social-bar .social-icon .fa-envelope,
.footer-socials .social-link--icon .fa-envelope {
    background-image: url("../images/icon-pak/ready_icons_for_site/mail.png");
}

.header-social-link .fa-phone,
.social-bar .social-icon .fa-phone,
.footer-socials .social-link--icon .fa-phone {
    background-image: url("../images/icon-pak/ready_icons_for_site/phone_alt5.png");
}

.header-social-link .fa-facebook,
.header-social-link .fa-facebook-f,
.social-bar .social-icon .fa-facebook,
.social-bar .social-icon .fa-facebook-f,
.footer-socials .social-link--icon .fa-facebook,
.footer-socials .social-link--icon .fa-facebook-f {
    background-image: url("../images/icon-pak/ready_icons_for_site/Facebook.png");
}

.header-social-link .fa-tiktok,
.social-bar .social-icon .fa-tiktok,
.footer-socials .social-link--icon .fa-tiktok {
    background-image: url("../images/icon-pak/ready_icons_for_site/tiktok.png");
}

.header-social-link .fa-youtube,
.social-bar .social-icon .fa-youtube,
.footer-socials .social-link--icon .fa-youtube {
    background-image: url("../images/icon-pak/ready_icons_for_site/youtube_alt1.png");
}

.header-social-link .fa-viber,
.social-bar .social-icon .fa-viber,
.footer-socials .social-link--icon .fa-viber {
    background-image: url("../images/icon-pak/ready_icons_for_site/Viber.png");
}

@media (width >= 900px) {

    .social-bar {
        --social-band-base-shift: 2px;
        --social-band-item-shift: 1px;

        display: flex;
        align-items: center;
        min-height: 36px;
        margin-top: 4px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .social-bar-inner {
        width: 100%;
        min-height: 36px;
        align-items: center;
        align-content: center;
        column-gap: 10px;
        transform: translateY(var(--social-band-base-shift));
    }

    .social-bar-start,
    .social-player-wrap,
    .social-home,
    .social-home a,
    .social-icons {
        align-self: center;
    }

    .social-home a {
        min-height: 20px;
    }

    .social-player-divider {
        height: 20px;
        transform: translateY(var(--social-band-item-shift));
    }

    .social-player-toggle {
        width: 40px;
        height: 40px;
    }

    .social-player-icon {
        width: 40px;
        height: 40px;
    }

    .social-music-item {
        min-height: auto;
        padding: 6px 4px 4px;
    }

    .social-music-item-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .social-music-item-label {
        font-size: 0.68rem;
    }

    .social-icons {
        gap: 14px;
        transform: translateY(var(--social-band-item-shift));
    }

    .social-bar .social-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    .social-bar .social-home a > span {
        transform: translateY(var(--social-band-item-shift)) scaleX(0.98) scaleY(1.08);
    }

    html[lang="ru"] .social-bar .social-home a > span,
    html[lang="uk"] .social-bar .social-home a > span {
        transform: translateY(var(--social-band-item-shift)) scaleX(0.96) scaleY(1.11);
    }

    html[lang="en"] .social-bar .social-home a > span {
        transform: translateY(var(--social-band-item-shift)) scaleX(1.01) scaleY(1.03);
    }

    html[lang="de"] .social-bar .social-home a > span {
        transform: translateY(var(--social-band-item-shift)) scaleX(0.99) scaleY(1.05);
    }

    .social-player-wrap {
        transform: translateY(var(--social-band-item-shift));
    }
}

@media (width <= 900px) {

    .header-controls {
        gap: 4px;
    }

    .header-socials {
        gap: 4px;
        margin-right: 0;
    }

    .header-social-link {
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
        margin-inline: 0;
        transform: none;
    }

    .header-social-link i {
        font-size: 0 !important;
        transform: none;
    }

    .social-bar {
        padding-top: 8px;
        margin-top: 12px;
    }

    .social-bar-inner {
        grid-template-columns: var(--logo-mark-width) minmax(0, 1fr) max-content;
        column-gap: 10px;
    }

    .social-bar-start {
        gap: 12px;
    }

    .social-icons {
        gap: 14px;
        transform: translateX(8px);
    }

    .social-home {
        font-size: 10px;
    }

    .social-player-divider {
        height: 22px;
    }

    .social-player-toggle {
        width: 36px;
        height: 36px;
    }

    .social-player-icon {
        width: 36px;
        height: 36px;
    }

    .social-music-menu {
        grid-template-columns: repeat(2, minmax(78px, 1fr));
        min-width: 176px;
        padding: 8px;
        gap: 8px;
    }

    .social-music-item {
        min-height: auto;
        padding: 6px 4px 4px;
        border-radius: 12px;
    }

    .social-music-item-icon {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    .social-music-item-label {
        font-size: 0.66rem;
    }

    .social-player-panel {
        width: min(88vw, 340px);
        max-width: calc(100vw - 20px);
        padding: 8px;
    }

    .social-player-panel iframe {
        height: 132px;
    }

    .flag-item {
        min-height: 38px;
        padding: 7px 10px;
    }

    .theme-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        font-size: 24px;
    }

    .header-controls .lang-dropdown-btn {
        min-width: 56px;
        width: 56px;
        height: 56px;
        min-height: 56px;
        padding: 0 8px;
        font-size: 18px;
        border-radius: 20px;
    }

    .header-controls .lang-dropdown-btn i:first-child {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .header-controls .lang-dropdown-btn i:last-child {
        width: 18px;
        min-width: 18px;
        height: 18px;
        font-size: 0;
    }

    .theme-btn::before {
        width: 34px;
        height: 34px;
    }
}

/* =========================================================
   MOBILE NAV
   ========================================================= */

#mobileNavOverlay {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 14% 18%, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 4%) 18%, rgb(255 255 255 / 0%) 42%),
        linear-gradient(120deg, rgb(6 7 11 / 40%) 0%, rgb(7 7 11 / 76%) 100%);
    -webkit-backdrop-filter: blur(4px) saturate(1.02);
    backdrop-filter: blur(4px) saturate(1.02);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1490;
}

#mobileNavOverlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#mobileNav {
    --mobile-nav-offset: 0px;
    --mobile-nav-height: calc(100vh - var(--mobile-nav-offset));

    position: fixed;
    top: var(--mobile-nav-offset);
    left: 10px;
    width: min(328px, calc(100vw - 20px));
    height: min(var(--mobile-nav-height), calc(100dvh - var(--mobile-nav-offset) - 8px));
    max-height: calc(100dvh - var(--mobile-nav-offset) - 8px);
    padding: 12px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    scrollbar-gutter: stable;
    scrollbar-width: none;
    background:
        linear-gradient(180deg, rgb(23 16 8 / 90%) 0%, rgb(10 7 4 / 96%) 100%),
        radial-gradient(circle at 16% 10%, rgb(255 245 220 / 9%) 0%, rgb(255 245 220 / 2%) 18%, rgb(255 245 220 / 0%) 40%),
        radial-gradient(circle at 84% 90%, rgb(198 161 91 / 14%) 0%, rgb(198 161 91 / 4%) 24%, rgb(198 161 91 / 0%) 56%);
    border: 1px solid rgb(176 136 64 / 18%);
    border-radius: 24px;
    box-shadow:
        0 24px 48px rgb(0 0 0 / 42%),
        0 0 0 1px rgb(255 244 216 / 3%),
        inset 0 1px 0 rgb(255 244 216 / 8%),
        inset 0 -1px 0 rgb(84 56 18 / 18%);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    backdrop-filter: blur(16px) saturate(1.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(calc(-100% - 24px), 0, 0) scale(0.98);
    transform-origin: left center;
    transition:
        opacity 0.38s ease,
        visibility 0.38s ease,
        transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.38s ease;
    z-index: 1500;
}

#mobileNav::before,
#mobileNav::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

#mobileNav::before {
    background:
        linear-gradient(132deg, rgb(255 248 232 / 10%) 0%, rgb(255 248 232 / 3%) 18%, rgb(255 248 232 / 0%) 42%),
        linear-gradient(180deg, rgb(255 248 232 / 4%) 0%, rgb(255 248 232 / 0%) 36%);
    opacity: 0.72;
}

#mobileNav::after {
    inset: 1px;
    border: 1px solid rgb(255 244 216 / 4%);
}

#mobileNav.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

#mobileNav > * {
    position: relative;
    z-index: 1;
}

.mobile-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-nav-group--primary {
    margin-bottom: 2px;
}

.mobile-nav-group--secondary {
    gap: 0;
}

.custom-scrollbar-track {
    width: 6px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgb(4 8 7 / 8%) 0%, rgb(7 14 11 / 22%) 18%, rgb(6 10 8 / 30%) 100%);
    border: none;
    box-shadow:
        inset 0 0 0 1px rgb(120 146 132 / 8%),
        inset 0 8px 16px rgb(255 242 214 / 1.5%);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    pointer-events: none;
}

.custom-scrollbar-track,
.custom-scrollbar-thumb,
.custom-scrollbar-track--page,
.custom-scrollbar-track--panel,
.custom-scrollbar-track--inline-x,
.custom-scrollbar-thumb--page,
.custom-scrollbar-thumb--panel,
.custom-scrollbar-thumb--inline-x {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.custom-scrollbar-track--nav {
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 2px;
    z-index: 9;
    width: 6px;
    pointer-events: none;
}

.custom-scrollbar-track--page {
    position: fixed;
    top: 14px;
    bottom: 14px;
    right: 9px;
    z-index: 1390;
    transition:
        top 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.custom-scrollbar-track--panel {
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 6px;
    z-index: 8;
    width: 6px;
}

.custom-scrollbar-track--inline-x {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 6px;
    width: auto;
    z-index: 8;
}

.custom-scrollbar-thumb {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 4px;
    min-height: 72px;
    background:
        linear-gradient(180deg, rgb(196 212 201 / 16%) 0%, rgb(96 123 110 / 18%) 18%, rgb(76 58 24 / 22%) 58%, rgb(188 170 112 / 14%) 100%),
        radial-gradient(circle at 34% 18%, rgb(250 252 248 / 16%) 0%, rgb(178 210 193 / 6%) 22%, rgb(255 255 255 / 0%) 58%),
        linear-gradient(135deg, rgb(16 24 20 / 32%) 0%, rgb(255 255 255 / 0%) 60%);
    border: 1px solid rgb(158 182 169 / 16%);
    border-radius: 999px;
    box-shadow:
        0 10px 22px rgb(0 0 0 / 18%),
        0 0 14px rgb(95 126 110 / 8%),
        inset 0 1px 0 rgb(248 252 246 / 12%),
        inset 0 -6px 12px rgb(26 34 29 / 26%);
    -webkit-backdrop-filter: blur(18px) saturate(1.22);
    backdrop-filter: blur(18px) saturate(1.22);
    opacity: 0;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease,
        width 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
    will-change: transform, width, opacity, box-shadow, filter;
    z-index: 10;
    cursor: pointer;
    pointer-events: auto;
}

.custom-scrollbar-thumb--nav,
.custom-scrollbar-thumb--page {
    position: absolute;
}

.custom-scrollbar-thumb--nav {
    left: auto;
    right: 0;
    transform: none;
    width: 3px;
    min-height: 36px;
    border-width: 1px;
    opacity: 0;
    visibility: visible;
    pointer-events: auto;
    box-shadow:
        0 8px 16px rgb(0 0 0 / 16%),
        0 0 8px rgb(92 120 108 / 6%),
        inset 0 1px 0 rgb(255 255 255 / 6%);
    transition:
        opacity 0.4s ease,
        width 0.3s ease,
        top 0.15s ease,
        height 0.15s ease;
}

.custom-scrollbar-thumb--panel {
    left: auto;
    right: 0;
    transform: none;
    width: 3px;
    min-height: 34px;
    opacity: 0.22;
}

.custom-scrollbar-thumb--inline-x {
    left: 0;
    top: 0;
    transform: none;
    width: 72px;
    height: 3px;
    min-height: 0;
    min-width: 72px;
    opacity: 0.22;
}

.custom-scrollbar-thumb--nav.active,
.custom-scrollbar-thumb--nav.scrolling,
.custom-scrollbar-thumb--nav.dragging,
.custom-scrollbar-thumb--nav:active,
.custom-scrollbar-thumb--panel.active,
.custom-scrollbar-thumb--panel.scrolling,
.custom-scrollbar-thumb--panel.dragging,
.custom-scrollbar-thumb--panel:active {
    width: 3px;
    animation: none !important;
    transform: none !important;
}

.custom-scrollbar-thumb--nav.active {
    opacity: 0.32;
    width: 4px;
    transition: opacity 0.15s ease, width 0.15s ease;
}

.custom-scrollbar-thumb--nav.scrolling {
    opacity: 0.38;
    width: 3px;
    transition: opacity 0.12s ease, width 0.12s ease;
}

.custom-scrollbar-thumb--nav.dragging {
    opacity: 0.46;
    width: 5px;
    transition: opacity 0.1s ease, width 0.1s ease;
}

.custom-scrollbar-thumb--panel.active {
    opacity: 0.26 !important;
}

.custom-scrollbar-thumb--panel.scrolling {
    opacity: 0.28 !important;
}

.custom-scrollbar-thumb--panel.dragging {
    opacity: 0.32 !important;
}

.custom-scrollbar-thumb--nav.scrolling.scrolling-down,
.custom-scrollbar-thumb--nav.scrolling.scrolling-up,
.custom-scrollbar-thumb--nav.dragging.scrolling-down,
.custom-scrollbar-thumb--nav.dragging.scrolling-up,
.custom-scrollbar-thumb--nav.dragging:not(.scrolling-up, .scrolling-down),
.custom-scrollbar-thumb--panel.scrolling.scrolling-down,
.custom-scrollbar-thumb--panel.scrolling.scrolling-up,
.custom-scrollbar-thumb--panel.dragging.scrolling-down,
.custom-scrollbar-thumb--panel.dragging.scrolling-up,
.custom-scrollbar-thumb--panel.dragging:not(.scrolling-up, .scrolling-down) {
    animation: none !important;
}

.custom-scrollbar-thumb--inline-x.active,
.custom-scrollbar-thumb--inline-x.scrolling,
.custom-scrollbar-thumb--inline-x.dragging,
.custom-scrollbar-thumb--inline-x:active {
    height: 4px;
    width: auto;
    animation: none !important;
    transform: none !important;
}

.custom-scrollbar-thumb.active {
    width: 5px;
    opacity: 0.28 !important;
    box-shadow:
        0 14px 24px rgb(0 0 0 / 24%),
        0 0 16px rgb(84 120 102 / 9%),
        0 0 22px rgb(176 145 74 / 7%),
        inset 0 1px 0 rgb(250 252 246 / 14%),
        inset 0 -5px 10px rgb(20 26 22 / 28%);
    background:
        linear-gradient(180deg, rgb(214 226 219 / 20%) 0%, rgb(116 142 130 / 22%) 20%, rgb(92 70 30 / 24%) 60%, rgb(216 190 116 / 16%) 100%),
        radial-gradient(circle at 34% 18%, rgb(255 255 255 / 20%) 0%, rgb(226 236 230 / 8%) 26%, rgb(255 255 255 / 0%) 54%),
        linear-gradient(135deg, rgb(20 30 24 / 20%) 0%, rgb(255 255 255 / 0%) 52%);
    animation: liquid-glass-idle 2.6s ease-in-out infinite;
}

.custom-scrollbar-thumb.scrolling {
    width: 5px;
    opacity: 0.32 !important;
    animation-duration: 1.15s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
    box-shadow:
        0 14px 26px rgb(0 0 0 / 22%),
        0 0 18px rgb(98 132 114 / 10%),
        0 0 26px rgb(190 156 82 / 8%),
        0 0 0 1px rgb(214 226 218 / 10%),
        inset 0 1px 0 rgb(255 255 255 / 16%),
        inset 0 -8px 14px rgb(22 28 24 / 30%);
    border-color: rgb(182 198 188 / 18%);
    -webkit-backdrop-filter: blur(20px) saturate(1.28);
    backdrop-filter: blur(20px) saturate(1.28);
    filter: saturate(1.14) brightness(1.05);
    background:
        linear-gradient(180deg, rgb(228 236 232 / 22%) 0%, rgb(124 152 138 / 22%) 22%, rgb(108 80 34 / 24%) 60%, rgb(222 198 126 / 18%) 100%),
        radial-gradient(circle at 34% 18%, rgb(255 255 255 / 24%) 0%, rgb(232 240 236 / 10%) 26%, rgb(255 255 255 / 0%) 54%),
        linear-gradient(135deg, rgb(18 28 22 / 22%) 0%, rgb(255 255 255 / 0%) 52%);
}

.custom-scrollbar-thumb.scrolling.scrolling-down {
    animation-name: liquid-drop-down;
}

.custom-scrollbar-thumb.scrolling.scrolling-up {
    animation-name: liquid-drop-up;
}

.custom-scrollbar-thumb.dragging {
    width: 6px;
    opacity: 0.36 !important;
    box-shadow:
        0 16px 30px rgb(0 0 0 / 26%),
        0 0 20px rgb(108 140 122 / 12%),
        0 0 28px rgb(196 164 92 / 10%),
        0 0 0 1px rgb(214 226 216 / 12%),
        inset 0 1px 0 rgb(255 255 255 / 18%),
        inset 0 -10px 18px rgb(18 24 21 / 34%);
    border-color: rgb(196 210 201 / 18%);
    animation-duration: 0.75s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    -webkit-backdrop-filter: blur(22px) saturate(1.34);
    backdrop-filter: blur(22px) saturate(1.34);
    filter: saturate(1.12) brightness(1.08);
    background:
        linear-gradient(180deg, rgb(236 242 238 / 24%) 0%, rgb(134 162 148 / 24%) 22%, rgb(112 84 36 / 26%) 58%, rgb(228 202 128 / 20%) 100%),
        radial-gradient(circle at 34% 18%, rgb(255 255 255 / 26%) 0%, rgb(236 242 238 / 12%) 24%, rgb(255 255 255 / 0%) 52%),
        linear-gradient(135deg, rgb(18 28 22 / 24%) 0%, rgb(255 255 255 / 0%) 48%);
}

.custom-scrollbar-thumb.dragging.scrolling-down {
    animation-name: liquid-drag-down;
}

.custom-scrollbar-thumb.dragging.scrolling-up {
    animation-name: liquid-drag-up;
}

.custom-scrollbar-thumb.dragging:not(.scrolling-up, .scrolling-down) {
    animation-name: liquid-drag-hold;
}

.custom-scrollbar-thumb--panel.active,
.custom-scrollbar-thumb--panel.scrolling,
.custom-scrollbar-thumb--panel.dragging {
    width: 3px;
}

.custom-scrollbar-thumb--inline-x.active,
.custom-scrollbar-thumb--inline-x.scrolling,
.custom-scrollbar-thumb--inline-x.dragging {
    height: 3px;
    min-width: 72px;
}

.custom-scrollbar-thumb:active {
    width: 4px;
    opacity: 0.17;
}

.custom-scrollbar-thumb--panel:active {
    width: 3px;
}

.custom-scrollbar-thumb--inline-x:active {
    width: inherit;
    height: 3px;
    min-width: 72px;
}

#mobileNav::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    background: transparent;
}

@keyframes liquid-glass-idle {

    0%, 100% {
        transform: translateX(-50%) scaleX(1) scaleY(1);
        border-radius: 999px;
        opacity: 0.92;
    }

    50% {
        transform: translateX(-50%) scaleX(1.06) scaleY(0.97);
        border-radius: 999px;
        opacity: 1;
    }
}

@keyframes liquid-drop-down {

    0% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
        width: 16px;
        border-radius: 999px;
    }

    26% {
        transform: translateX(-50%) scaleY(1.42) scaleX(0.72);
        width: 11px;
        border-radius: 999px 999px 520px 520px / 999px 999px 1580px 1580px;
    }

    58% {
        transform: translateX(-50%) scaleY(0.42) scaleX(2.08);
        width: 28px;
        border-radius: 360px 360px 999px 999px / 1760px 1760px 999px 999px;
    }

    100% {
        transform: translateX(-50%) scaleY(1.06) scaleX(0.96);
        width: 16px;
        border-radius: 999px;
    }
}

@keyframes liquid-drop-up {

    0% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
        width: 16px;
        border-radius: 999px;
    }

    26% {
        transform: translateX(-50%) scaleY(1.42) scaleX(0.72);
        width: 11px;
        border-radius: 520px 520px 999px 999px / 1580px 1580px 999px 999px;
    }

    58% {
        transform: translateX(-50%) scaleY(0.42) scaleX(2.08);
        width: 28px;
        border-radius: 999px 999px 360px 360px / 999px 999px 1760px 1760px;
    }

    100% {
        transform: translateX(-50%) scaleY(1.06) scaleX(0.96);
        width: 16px;
        border-radius: 999px;
    }
}

@keyframes liquid-drag-hold {

    0%, 100% {
        transform: translateX(-50%) scaleX(1.18) scaleY(0.9);
        width: 18px;
        border-radius: 999px;
    }

    50% {
        transform: translateX(-50%) scaleX(2.36) scaleY(0.34);
        width: 34px;
        border-radius: 420px / 1820px;
    }
}

@keyframes liquid-drag-down {

    0% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
        width: 18px;
        border-radius: 999px;
    }

    24% {
        transform: translateX(-50%) scaleY(1.64) scaleX(0.58);
        width: 12px;
        border-radius: 999px 999px 320px 320px / 999px 999px 1940px 1940px;
    }

    56% {
        transform: translateX(-50%) scaleY(0.26) scaleX(2.68);
        width: 36px;
        border-radius: 260px 260px 999px 999px / 1920px 1920px 999px 999px;
    }

    100% {
        transform: translateX(-50%) scaleY(1.12) scaleX(0.94);
        width: 18px;
        border-radius: 999px;
    }
}

@keyframes liquid-drag-up {

    0% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
        width: 18px;
        border-radius: 999px;
    }

    24% {
        transform: translateX(-50%) scaleY(1.64) scaleX(0.58);
        width: 12px;
        border-radius: 320px 320px 999px 999px / 1940px 1940px 999px 999px;
    }

    56% {
        transform: translateX(-50%) scaleY(0.26) scaleX(2.68);
        width: 36px;
        border-radius: 999px 999px 260px 260px / 999px 999px 1920px 1920px;
    }

    100% {
        transform: translateX(-50%) scaleY(1.12) scaleX(0.94);
        width: 18px;
        border-radius: 999px;
    }
}

body.nav-open .custom-scrollbar-track--page,
body.nav-open .custom-scrollbar-thumb--page {
    opacity: 0 !important;
    pointer-events: none;
}

body.scrollbar-dragging {
    -webkit-user-select: none;
    user-select: none;
}

#mobileNav a,
.mobile-dropdown-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--text-dark);
    background:
        linear-gradient(180deg, rgb(41 29 13 / 48%) 0%, rgb(16 11 5 / 30%) 100%),
        linear-gradient(135deg, rgb(255 244 216 / 5%) 0%, rgb(255 244 216 / 1.5%) 26%, rgb(255 244 216 / 0%) 52%);
    border: 1px solid rgb(168 126 52 / 14%);
    border-radius: 15px;
    text-align: left;
    font-family: var(--font-display);
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 7px 16px rgb(0 0 0 / 18%),
        inset 0 1px 0 rgb(255 244 216 / 7%);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.28s ease,
        background 0.28s ease,
        color 0.28s ease,
        box-shadow 0.28s ease;
    white-space: normal;
    word-break: normal;
    isolation: isolate;
    animation: navPillBreath var(--motion-sync-breath) ease-in-out infinite;
}

.mobile-dropdown-btn {
    justify-content: space-between;
    gap: 7px;
}

.mobile-dropdown-btn::after {
    content: "";
    width: 15px;
    height: 15px;
    margin-left: auto;
    background: url("../images/ui/chevron-emerald-gold.svg") center/contain no-repeat;
    filter:
        drop-shadow(0 2px 4px rgb(0 0 0 / 28%))
        drop-shadow(0 0 5px rgb(247 199 68 / 18%));
    transform: rotate(0deg);
    transition: transform 0.28s ease, opacity 0.28s ease;
    opacity: 0.82;
}

.mobile-dropdown-btn.is-open::after {
    transform: rotate(180deg);
}

#mobileNav .mobile-nav-link--secondary {
    min-height: 32px;
    padding: 7px 10px;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgb(232 224 210 / 76%);
    background:
        linear-gradient(180deg, rgb(30 21 10 / 30%) 0%, rgb(12 8 4 / 22%) 100%),
        linear-gradient(135deg, rgb(255 244 216 / 3.5%) 0%, rgb(255 244 216 / 1%) 24%, rgb(255 244 216 / 0%) 50%);
    border-color: rgb(168 126 52 / 8%);
    box-shadow:
        0 6px 14px rgb(0 0 0 / 14%),
        inset 0 1px 0 rgb(255 244 216 / 4%);
}

.promo-burger-btn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 7px 0 9px !important;
    padding: 14px 18px !important;
    color: #f8efd8 !important;
    font-family: var(--font-display) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    background:
        linear-gradient(135deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 8%) 14%, rgb(198 161 91 / 26%) 52%, rgb(102 71 24 / 94%) 100%) !important;
    border: 1px solid rgb(255 233 188 / 32%) !important;
    border-radius: 16px !important;
    box-shadow:
        0 7px 16px rgb(0 0 0 / 18%),
        inset 0 1px 0 rgb(255 255 255 / 28%),
        inset 0 -10px 18px rgb(84 57 18 / 22%) !important;
    text-shadow: 0 1px 10px rgb(255 220 150 / 22%) !important;
    overflow: visible !important;
    isolation: isolate;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        filter 0.35s ease !important;
    animation: promoRoyalPulse var(--motion-sync-pulse) ease-in-out infinite;
}

.promo-burger-btn::before,
.promo-burger-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.promo-burger-btn::before {
    background:
        linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 4%) 26%, rgb(255 255 255 / 0%) 58%),
        radial-gradient(circle at 50% 112%, rgb(255 223 156 / 20%) 0%, rgb(255 223 156 / 8%) 24%, rgb(255 223 156 / 0%) 50%);
    opacity: 0.84;
    animation: containedGoldBreath var(--motion-sync-breath) ease-in-out infinite;
}

.promo-burger-btn::after {
    content: "";
    inset: 8% auto 8% -30%;
    width: 32%;
    border-radius: 999px;
    background:
        linear-gradient(118deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 8%) 24%, rgb(255 244 214 / 32%) 48%, rgb(255 255 255 / 6%) 64%, rgb(255 255 255 / 0%) 100%);
    opacity: 0.28;
    filter: blur(7px);
    animation: containedGoldSweep var(--motion-sync-line) var(--motion-sync-luxury) infinite;
}

.promo-burger-btn:hover {
    transform: translateY(-3px) scale(1.01) !important;
    border-color: rgb(255 241 207 / 56%) !important;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 20%),
        inset 0 -8px 14px rgb(84 57 18 / 12%) !important;
    filter: saturate(1.08) brightness(1.04) !important;
}

.promo-burger-btn i {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    font-size: 1rem;
    color: #fff4d3;
    filter: drop-shadow(0 0 10px rgb(255 225 163 / 28%));
}

.promo-burger-btn i::after {
    width: 22px;
    height: 10px;
    bottom: -6px;
    opacity: 0.88;
}

.promo-burger-btn span,
.promo-burger-btn strong,
.promo-burger-btn {
    z-index: 1;
}

.promo-btn-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 1;
    position: relative;
}

.promo-btn-label {
    line-height: 1;
}

#mobileNav a::before,
.mobile-dropdown-btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
        linear-gradient(118deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 8%) 24%, rgb(255 244 214 / 24%) 48%, rgb(255 255 255 / 6%) 64%, rgb(255 255 255 / 0%) 100%);
    opacity: 0.3;
    pointer-events: none;
    filter: blur(6px);
    animation: containedGoldSweep 7.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

#mobileNav a:hover,
.mobile-dropdown-btn.is-open,
.mobile-dropdown-btn:hover {
    transform: translateY(-1px) scale(1.012);
    color: rgb(255 230 168 / 95%);
    background: rgb(255 255 255 / 6%);
    border-color: rgb(198 161 91 / 40%);
    box-shadow:
        0 6px 28px rgb(0 0 0 / 16%),
        inset 0 0.5px 0 rgb(255 255 255 / 7%);
    text-shadow:
        0 1px 0 rgb(14 10 4 / 36%),
        0 0 14px rgb(226 190 116 / 10%);
    filter: brightness(1.04);
}

.menu-separator {
    width: 100%;
    height: 28px;
    margin: 8px 4px 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-radius: 999px;
    box-shadow: none;
    isolation: isolate;
}

.menu-separator--bottom {
    margin: 12px 4px 8px;
}

.menu-separator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
    background:
        linear-gradient(90deg,
            rgb(255 255 255 / 0%) 0%,
            rgb(255 248 232 / 8%) 10%,
            rgb(126 92 34 / 28%) 22%,
            rgb(166 128 62 / 52%) 36%,
            rgb(221 190 130 / 78%) 50%,
            rgb(166 128 62 / 52%) 64%,
            rgb(126 92 34 / 28%) 78%,
            rgb(255 248 232 / 8%) 90%,
            rgb(255 255 255 / 0%) 100%);
    background-size: 220% 100%;
    border-radius: 999px;
    filter: blur(0.2px) saturate(1.06);
    opacity: 0.86;
    box-shadow:
        0 0 8px rgb(166 128 62 / 14%),
        0 0 14px rgb(221 190 130 / 12%),
        0 0 18px rgb(255 227 168 / 8%);
    animation: siriHeaderLineFlow var(--motion-sync-line) ease-in-out infinite;
    will-change: opacity, filter;
    pointer-events: none;
}

.menu-separator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 12px;
    transform: translateY(-50%);
    border-radius: 999px;
    background:
        radial-gradient(circle at 16% 50%, rgb(126 92 34 / 20%) 0%, rgb(126 92 34 / 0%) 18%),
        radial-gradient(circle at 36% 50%, rgb(166 128 62 / 22%) 0%, rgb(166 128 62 / 0%) 20%),
        radial-gradient(circle at 50% 50%, rgb(221 190 130 / 30%) 0%, rgb(221 190 130 / 0%) 22%),
        radial-gradient(circle at 64% 50%, rgb(255 227 168 / 22%) 0%, rgb(255 227 168 / 0%) 20%),
        radial-gradient(circle at 84% 50%, rgb(166 128 62 / 20%) 0%, rgb(166 128 62 / 0%) 18%);
    filter: blur(6px) saturate(1.08);
    opacity: 0.88;
    box-shadow:
        0 0 12px rgb(166 128 62 / 12%),
        0 0 20px rgb(221 190 130 / 12%),
        0 0 26px rgb(255 227 168 / 10%);
    animation:
        siriHeaderAuraShift var(--motion-sync-flow) ease-in-out infinite,
        siriHeaderAuraPulse var(--motion-sync-pulse) ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    will-change: opacity, filter;
}

.menu-separator span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    background:
        linear-gradient(145deg, rgb(255 255 255 / 6%) 0%, rgb(255 255 255 / 1.5%) 100%),
        linear-gradient(180deg, rgb(10 11 16 / 42%) 0%, rgb(14 15 20 / 20%) 100%);
    border: 1px solid rgb(255 255 255 / 4%);
    color: rgb(236 232 223 / 50%);
    font-family: var(--font-display);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow:
        0 6px 14px rgb(0 0 0 / 8%),
        inset 0 1px 0 rgb(255 255 255 / 4%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.mobile-dropdown {
    position: relative;
    width: 100%;
}

.mobile-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, transform 0.28s ease, border-color 0.28s ease;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 6%) 0%, rgb(11 12 17 / 34%) 100%);
    border: 1px solid rgb(255 255 255 / 7%);
    border-radius: 14px;
    margin: -1px 0 8px;
    opacity: 0;
    transform: translateY(-8px);
    box-shadow:
        0 14px 24px rgb(0 0 0 / 16%),
        inset 0 1px 0 rgb(255 255 255 / 5%);
}

.mobile-dropdown-menu.open {
    max-height: 176px;
    opacity: 1;
    transform: translateY(0);
    border-color: rgb(198 161 91 / 12%);
}

.mobile-dropdown-menu a {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 9px 12px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: none;
    border-bottom: 1px solid rgb(255 255 255 / 5%);
    background: transparent;
    text-transform: none;
    border-radius: 0;
    box-shadow: none;
}

.mobile-dropdown-menu a:last-child {
    border-bottom: none;
}

.mobile-dropdown-menu a:hover {
    transform: translateX(0);
    background: rgb(198 161 91 / 8%);
    color: var(--accent-gold);
    box-shadow: none;
}

body.light #mobileNavOverlay {
    background:
        radial-gradient(circle at 14% 18%, rgb(255 255 250 / 54%) 0%, rgb(255 255 250 / 16%) 18%, rgb(255 255 250 / 0%) 42%),
        linear-gradient(120deg, rgb(245 238 222 / 42%) 0%, rgb(240 232 215 / 70%) 100%);
}

body.light #mobileNav {
    background:
        linear-gradient(165deg, rgb(252 248 240 / 94%) 0%, rgb(250 245 235 / 84%) 20%, rgb(248 242 230 / 94%) 58%, rgb(245 238 225 / 98%) 100%),
        radial-gradient(circle at 16% 12%, rgb(255 255 250 / 74%) 0%, rgb(255 255 250 / 18%) 18%, rgb(255 255 250 / 0%) 42%),
        radial-gradient(circle at 86% 92%, rgb(200 175 120 / 10%) 0%, rgb(200 175 120 / 4%) 26%, rgb(200 175 120 / 0%) 56%);
    border-color: rgb(180 155 115 / 16%);
    box-shadow:
        0 26px 50px rgb(80 60 30 / 14%),
        0 0 0 1px rgb(255 255 250 / 42%),
        inset 0 1px 0 rgb(255 255 250 / 85%);
}

body.light #mobileNav a,
body.light .mobile-dropdown-btn {
    background:
        linear-gradient(145deg, rgb(255 255 250 / 74%) 0%, rgb(255 252 245 / 44%) 100%),
        linear-gradient(180deg, rgb(252 248 238 / 92%) 0%, rgb(248 242 230 / 76%) 100%);
    border-color: rgb(180 155 115 / 10%);
    box-shadow:
        0 10px 20px rgb(80 60 30 / 7%),
        inset 0 1px 0 rgb(255 255 250 / 72%);
}

body.light #mobileNav .mobile-nav-link--secondary {
    color: rgb(90 75 45 / 82%);
    background:
        linear-gradient(145deg, rgb(255 255 250 / 66%) 0%, rgb(255 252 245 / 34%) 100%),
        linear-gradient(180deg, rgb(252 248 238 / 86%) 0%, rgb(248 242 230 / 66%) 100%);
    border-color: rgb(180 155 115 / 8%);
    box-shadow:
        0 8px 16px rgb(80 60 30 / 6%),
        inset 0 1px 0 rgb(255 255 250 / 72%);
}

body.light .menu-separator span {
    background:
        linear-gradient(145deg, rgb(255 255 250 / 86%) 0%, rgb(255 252 245 / 46%) 100%),
        linear-gradient(180deg, rgb(252 248 238 / 94%) 0%, rgb(248 242 230 / 82%) 100%);
    border-radius: 999px;
    color: rgb(120 95 55 / 66%);
}

body.light .menu-separator::before {
    opacity: 0.78;
    filter: blur(5px) saturate(1.08);
}

body.light .menu-separator::after {
    opacity: 0.72;
}

@media (width <= 640px) {

    #mobileNav {
        left: 10px;
        width: calc(100vw - 20px);
        padding: 12px 10px 14px;
        border-radius: 18px;
    }

    #mobileNav a,
    .mobile-dropdown-btn,
    .promo-burger-btn {
        font-size: 12px !important;
    }

    #mobileNav .mobile-nav-link--secondary {
        font-size: 10px !important;
    }

    .menu-separator span {
        font-size: 7px;
        letter-spacing: 0.12em;
    }

    .menu-separator {
        height: 24px;
        margin-inline: 2px;
    }
}

/* =========================================================
   HERO (с параллаксом)
   ========================================================= */

.hero {
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(420px, 0.95fr);
    align-items: center;
    column-gap: clamp(40px, 6vw, 110px);
    padding: 168px 60px 96px;
    min-height: calc(100vh - 132px);
    position: relative;
    margin-top: 40px;
    will-change: transform, filter;
    transition: transform 0.2s ease-out, filter 0.2s ease-out;
}

.hero-left {
    max-width: 680px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-title {
    margin: 0;
    font-size: clamp(60px, 5.3vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-wrap: balance;
    background: linear-gradient(120deg, rgb(255 255 255 / 96%) 0%, rgb(243 231 201 / 95%) 28%, rgb(198 161 91 / 100%) 58%, rgb(255 248 230 / 96%) 82%, rgb(255 255 255 / 94%) 100%);
    background-size: 220% 100%;
    background-clip: text;
    color: transparent;
    animation: premiumTextSheen var(--motion-sync-sheen) linear infinite;
}

body.light .hero-title {
    background: linear-gradient(120deg, rgb(180 190 240 / 96%) 0%, rgb(60 80 180 / 95%) 28%, rgb(40 55 160 / 100%) 58%, rgb(120 140 230 / 96%) 82%, rgb(180 195 255 / 94%) 100%);
    background-size: 220% 100%;
    background-clip: text;
    color: transparent;
}

.hero-subtitle {
    margin-top: 14px;
    font-size: clamp(19px, 1.5vw, 23px);
    line-height: 1.5;
    max-width: 31ch;
    opacity: 0.85;
    letter-spacing: 0.005em;
}

.btn-neon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin-top: 24px;
    padding: 15px 40px;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 650;
    letter-spacing: var(--premium-letter-tight);
    color: rgb(241 201 120 / 88%);
    border: none;
    border-radius: 60px;
    background: rgb(255 255 255 / 6%);
    -webkit-backdrop-filter: blur(32px) saturate(1.5) brightness(0.92);
    backdrop-filter: blur(32px) saturate(1.5) brightness(0.92);
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.32s ease,
        background 0.32s ease,
        box-shadow 0.32s ease;
    cursor: pointer;
    animation: navPillBreath var(--motion-sync-breath) ease-in-out infinite;
    box-shadow:
        0 4px 20px rgb(0 0 0 / 14%),
        inset 0 0.5px 0 rgb(255 255 255 / 6%);
    text-shadow:
        0 1px 0 rgb(14 10 4 / 36%),
        0 0 12px rgb(226 190 116 / 8%);
    will-change: transform, box-shadow;
    isolation: isolate;
}

.site-icon-arrow {
    display: inline-block;
    width: 1em;
    min-width: 1em;
    height: 1em;
    vertical-align: -0.14em;
    background: url("../images/ui/chevron-emerald-gold.svg") center/contain no-repeat;
    filter:
        drop-shadow(0 2px 4px rgb(0 0 0 / 28%))
        drop-shadow(0 0 5px rgb(247 199 68 / 18%));
    flex: 0 0 auto;
}

.site-icon--after {
    margin-left: 0.38em;
}

.site-icon--before {
    margin-right: 0.38em;
}

.site-icon--arrow-right {
    transform: rotate(-90deg);
}

.site-icon--arrow-left {
    transform: rotate(90deg);
}

/* Символ евро — золотой с эффектом свечения */

.site-icon--euro,
.currency-inline {
    display: inline;
    font-family: var(--font-display);
    font-weight: 700;
    color: #f1c960;
    text-shadow:
        0 1px 0 rgb(14 10 4 / 36%),
        0 0 8px rgb(226 190 116 / 35%),
        0 0 16px rgb(247 199 68 / 22%);
    animation: euroGoldBreath var(--motion-sync-breath) ease-in-out infinite;
}

body.light .site-icon--euro,
body.light .currency-inline {
    color: #9e7c4e;
    text-shadow:
        0 1px 0 rgb(255 255 250 / 40%),
        0 0 8px rgb(180 150 90 / 28%),
        0 0 16px rgb(160 130 70 / 18%);
    animation: euroGoldBreath var(--motion-sync-breath) ease-in-out infinite;
}

@keyframes euroGoldBreath {

    0%, 100% {
        text-shadow:
            0 1px 0 rgb(14 10 4 / 36%),
            0 0 8px rgb(226 190 116 / 28%),
            0 0 16px rgb(247 199 68 / 15%);
    }

    50% {
        text-shadow:
            0 1px 0 rgb(14 10 4 / 36%),
            0 0 12px rgb(226 190 116 / 48%),
            0 0 22px rgb(247 199 68 / 32%);
    }
}

.btn-neon::after {
    content: none;
}

.btn-neon:hover {
    transform: translateY(-1px) scale(1.012);
    color: rgb(255 230 168 / 95%);
    background: rgb(255 255 255 / 6%);
    box-shadow:
        0 6px 28px rgb(0 0 0 / 16%),
        inset 0 0.5px 0 rgb(255 255 255 / 7%);
    text-shadow:
        0 1px 0 rgb(14 10 4 / 36%),
        0 0 14px rgb(226 190 116 / 10%);
    filter: brightness(1.04);
}

/* Общие эффекты glassmorphism для всех кнопок сайта */

.btn-neon::before,
.btn-neon::after,
.header-online-btn::before,
.header-online-btn::after,
.btn-map::before,
.btn-map::after,
#mobileNav a::before,
#mobileNav a::after,
.mobile-dropdown-btn::before,
.mobile-dropdown-btn::after,
.promo-burger-btn::before,
.promo-burger-btn::after,
.social-link::before,
.social-link::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
}

/* ::before - верхний градиентный блик */

.btn-neon::before,
.header-online-btn::before,
.btn-map::before,
#mobileNav a::before,
.mobile-dropdown-btn::before,
.promo-burger-btn::before,
.social-link::before {
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 0%, rgb(255 255 255 / 8%) 0%, transparent 60%);
    opacity: 0.5;
    animation: navLiquidMatteBreath var(--motion-sync-breath) ease-in-out infinite;
    animation-delay: calc(var(--motion-sync-breath) * -0.25);
}

/* ::after - бликовая полоса с анимацией */

.btn-neon::after,
.header-online-btn::after,
.btn-map::after,
#mobileNav a::after,
.mobile-dropdown-btn::after,
.promo-burger-btn::after,
.social-link::after {
    top: -30%;
    bottom: -30%;
    left: -30%;
    width: 50%;
    background: linear-gradient(105deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 7%) 30%, rgb(255 255 255 / 4%) 50%, rgb(255 255 255 / 0%) 70%);
    opacity: 0.3;
    filter: blur(6px);
    transform: skewX(-20deg);
    animation: navLiquidRefraction 10.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Исключение для ::after у кнопок, где он уже используется для других целей */

.mobile-dropdown-btn::after {
    content: "";
    width: 15px;
    height: 15px;
    margin-left: auto;
    background: url("../images/ui/chevron-emerald-gold.svg") center/contain no-repeat;
    filter:
        drop-shadow(0 2px 4px rgb(0 0 0 / 28%))
        drop-shadow(0 0 5px rgb(247 199 68 / 18%));
    transform: rotate(0deg);
    transition: transform 0.28s ease, opacity 0.28s ease;
    opacity: 0.82;
    position: static;
    animation: none;
    border-radius: 0;
    top: auto;
    bottom: auto;
    left: auto;
}

.mobile-dropdown-btn.is-open::after {
    transform: rotate(180deg);
}

.hero-right {
    position: relative;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hero-photo {
    width: min(100%, clamp(500px, 36vw, 620px));
    aspect-ratio: 10 / 13;
    height: auto;
    background:
        linear-gradient(135deg, rgb(0 0 0 / 18%), rgb(0 0 0 / 46%)),
        url('../../assets/images/hero-dog.jpg') center/cover no-repeat;
    border-radius: 34px;
    box-shadow: 0 24px 48px rgb(0 0 0 / 34%);
    transition: var(--transition-smooth);
}

.hero-glow {
    position: absolute;
    width: min(100%, clamp(540px, 40vw, 660px));
    aspect-ratio: 10 / 13;
    height: auto;
    border-radius: 42px;

    /* top и height задаются через JS для избежания перекрытия шапки */
    z-index: -1;
    animation: softPulse 6s infinite alternate;
}

@keyframes softPulse {

    0% {
        opacity: 0.3;
        transform: scale(0.95);
    }

    100% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* =========================================================
   SECTIONS
   ========================================================= */

.section {
    padding: 72px 0;
}

.section + .section {
    padding-top: 0;
    margin-top: -8px;
}

.section-cta {
    text-align: center;
    margin-top: 2rem;
}

.section-title {
    font-size: 40px;
    text-align: center;
    margin-bottom: 48px;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--text-dark), var(--accent-gold));
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.018em;
    animation: premiumTextSheen 11s linear infinite;
}

.about-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-photo {
    flex: 0 0 50%;
    max-width: 50%;
    min-height: 480px;
    background: url('https://picsum.photos/500/700') center/cover no-repeat;
    border-radius: 32px;
    box-shadow: 0 20px 30px rgb(0 0 0 / 20%);
}

.about-text {
    flex: 1 1 0%;
    min-width: 0;
}

.about-text p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0.9;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.service-card {
    background:
        linear-gradient(145deg, rgb(255 255 255 / 8%) 0%, rgb(255 255 255 / 2%) 100%),
        rgb(14 18 16 / 92%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: none;
    border-radius: 32px;
    padding: 32px 24px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 12px 32px rgb(0 0 0 / 28%),
        inset 0 1px 0 rgb(255 255 255 / 6%),
        inset 0 -1px 0 rgb(0 0 0 / 20%);
    transform-style: preserve-3d;
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.15s ease-out, box-shadow 0.35s ease;
    will-change: transform;
}

.promotions {
    position: relative;
}

/* Removed decorative ::before halo — it produced a visible glow ("засвет")
   behind the cards that didn't match the new emerald background. */

.promotions .container {
    position: relative;
    z-index: 1;
}

.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.promo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 32px 36px;
    min-height: 240px;
    border-radius: 26px;
    border: none;
    background:
        linear-gradient(150deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 6%) 22%, rgb(18 20 28 / 78%) 100%),
        radial-gradient(circle at 88% 12%, rgb(198 161 91 / 24%) 0%, rgb(198 161 91 / 0%) 44%);
    box-shadow:
        0 16px 28px rgb(0 0 0 / 26%),
        inset 0 1px 0 rgb(255 255 255 / 16%);
    clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
    transform-style: preserve-3d;
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.15s ease-out, box-shadow 0.3s ease;
    will-change: transform;
    overflow: hidden;
}

.promo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgb(255 226 162 / 22%), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.promo-card:hover {
    box-shadow:
        0 22px 34px rgb(0 0 0 / 32%),
        0 0 22px rgb(198 161 91 / 18%),
        inset 0 1px 0 rgb(255 255 255 / 20%);
}

.promo-card:hover::before {
    opacity: 1;
}

.promo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 5px 10px;
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1a150b;
    background: linear-gradient(135deg, #f4deb0, #cfa054);
    border-radius: 999px;
}

.promo-card h3 {
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 1.3;
}

.promo-card p {
    opacity: 0.94;
    margin-bottom: 20px;
    line-height: 1.55;
    max-width: 26ch;
}

.promo-card .price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 20px;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
    background: rgb(198 161 91 / 16%);
    border: 1px solid rgb(198 161 91 / 40%);
    margin-top: auto;
}

body.light .promo-card {
    background:
        linear-gradient(150deg, rgb(245 235 215 / 97%) 0%, rgb(240 228 205 / 95%) 62%, rgb(232 218 192 / 93%) 100%),
        radial-gradient(circle at 88% 12%, rgb(195 170 115 / 18%) 0%, rgb(195 170 115 / 0%) 44%);
    box-shadow:
        0 10px 28px rgb(110 90 50 / 14%),
        inset 0 1px 0 rgb(255 248 232 / 85%);
}

body.light .service-card,
body.light .review-card {
    background:
        linear-gradient(145deg, rgb(248 240 222 / 65%) 0%, rgb(242 232 210 / 35%) 100%),
        rgb(240 228 208 / 96%);
    box-shadow:
        0 10px 28px rgb(110 90 50 / 14%),
        inset 0 1px 0 rgb(255 248 232 / 85%);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgb(198 161 91 / 25%), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.service-card:hover {
    box-shadow:
        0 20px 40px rgb(0 0 0 / 22%),
        14px 22px 36px rgb(40 94 72 / 26%);
}

.service-card:hover::before {
    opacity: 1;
}

.service-card h3 {
    font-size: 24px;
    margin-bottom: 12px;
    color: var(--accent-gold);
}

.service-card p {
    margin-bottom: 16px;
}

.price {
    font-size: 20px;
    font-weight: 600;
    color: var(--accent-gold);
}

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

.gallery-intro {
    text-align: center;
    margin-bottom: 2rem;
}

.gallery-cta {
    text-align: center;
    margin-top: 2rem;
}

.gallery-item {
    position: relative;
    padding-bottom: 70%;
    border-radius: 28px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-shadow:
        0 16px 28px rgb(0 0 0 / 18%),
        12px 18px 30px rgb(40 94 72 / 22%);
    transform-style: preserve-3d;
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.15s ease-out, box-shadow 0.35s ease;
    will-change: transform;
}

.gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgb(255 255 255 / 22%), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 40%), transparent);
    transition: opacity 0.3s;
}

.gallery-item:hover {
    box-shadow:
        0 24px 40px rgb(0 0 0 / 28%),
        14px 22px 36px rgb(40 94 72 / 28%);
}

.gallery-item:hover::before {
    opacity: 1;
}

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

.review-card {
    background:
        linear-gradient(145deg, rgb(255 255 255 / 8%) 0%, rgb(255 255 255 / 2%) 100%),
        rgb(14 18 16 / 92%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: none;
    border-radius: 28px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 12px 32px rgb(0 0 0 / 28%),
        inset 0 1px 0 rgb(255 255 255 / 6%),
        inset 0 -1px 0 rgb(0 0 0 / 20%);
    transform-style: preserve-3d;
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.15s ease-out, box-shadow 0.35s ease;
    will-change: transform;
}

.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgb(198 161 91 / 20%), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.review-card:hover {
    box-shadow:
        0 20px 35px rgb(0 0 0 / 20%),
        14px 22px 36px rgb(40 94 72 / 26%);
}

.review-card:hover::before {
    opacity: 1;
}

.review-text {
    font-style: italic;
    margin-bottom: 20px;
}

.review-author {
    font-weight: 600;
    color: var(--accent-gold);
}

.contacts-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.contacts-info {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    padding: 32px;
}

.contact-item {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-item i {
    width: 28px;
    color: var(--accent-gold);
}

.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.social-link {
    position: relative;
    overflow: hidden;
    padding: 10px 18px;
    border-radius: 40px;
    border: 1px solid rgb(168 126 52 / 24%);
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.32s ease,
        background 0.32s ease,
        box-shadow 0.32s ease,
        border-color 0.32s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: var(--premium-letter-tight);
    background:
        linear-gradient(180deg, rgb(41 29 13 / 48%) 0%, rgb(16 11 5 / 30%) 100%),
        linear-gradient(135deg, rgb(255 244 216 / 8%) 0%, rgb(255 244 216 / 2%) 26%, rgb(255 244 216 / 0%) 52%);
    color: rgb(241 201 120 / 88%);
    -webkit-backdrop-filter: blur(32px) saturate(1.5) brightness(0.92);
    backdrop-filter: blur(32px) saturate(1.5) brightness(0.92);
    box-shadow:
        0 4px 20px rgb(0 0 0 / 14%),
        inset 0 0.5px 0 rgb(255 255 255 / 6%);
    text-shadow:
        0 1px 0 rgb(14 10 4 / 36%),
        0 0 12px rgb(226 190 116 / 8%);
    isolation: isolate;
    animation: navPillBreath var(--motion-sync-breath) ease-in-out infinite;
}

.social-home,
.social-home a,
.nav-main a,
.header-online-btn,
.header-controls .lang-dropdown-btn,
#mobileNav a,
.mobile-dropdown-btn,
.promo-burger-btn,
.btn-neon,
.social-link {
    word-spacing: normal;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.social-link:hover {
    transform: translateY(-1px) scale(1.012);
    color: rgb(255 230 168 / 95%);
    background: rgb(255 255 255 / 6%);
    border-color: rgb(198 161 91 / 40%);
    box-shadow:
        0 6px 28px rgb(0 0 0 / 16%),
        inset 0 0.5px 0 rgb(255 255 255 / 7%);
    text-shadow:
        0 1px 0 rgb(14 10 4 / 36%),
        0 0 14px rgb(226 190 116 / 10%);
    filter: brightness(1.04);
}

.contact-form {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    padding: 32px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 14px;
    margin-bottom: 16px;
    background: rgb(0 0 0 / 20%);
    border: 1px solid var(--glass-border);
    border-radius: 60px;
    color: var(--text-dark);
    font-family: inherit;
    transition: var(--transition-smooth);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--accent-gold);
}

.map-frame {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 15px 25px rgb(0 0 0 / 20%);
    position: relative;
}

.map-actions {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    z-index: 2;
}

.btn-map {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 18px;
    border: 1px solid rgb(168 126 52 / 24%);
    background:
        linear-gradient(180deg, rgb(41 29 13 / 48%) 0%, rgb(16 11 5 / 30%) 100%),
        linear-gradient(135deg, rgb(255 244 216 / 8%) 0%, rgb(255 244 216 / 2%) 26%, rgb(255 244 216 / 0%) 52%);
    color: rgb(241 201 120 / 88%);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    -webkit-backdrop-filter: blur(32px) saturate(1.5) brightness(0.92);
    backdrop-filter: blur(32px) saturate(1.5) brightness(0.92);
    box-shadow:
        0 4px 20px rgb(0 0 0 / 14%),
        inset 0 0.5px 0 rgb(255 255 255 / 6%);
    text-shadow:
        0 1px 0 rgb(14 10 4 / 36%),
        0 0 12px rgb(226 190 116 / 8%);
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.32s ease,
        background 0.32s ease,
        box-shadow 0.32s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    animation: navPillBreath var(--motion-sync-breath) ease-in-out infinite;
}

.btn-map-primary {
    background: linear-gradient(135deg, #f3c77f, #d9a148);
    color: #0c0c0f;
    box-shadow: 0 10px 24px rgb(217 161 72 / 40%);
}

.btn-map:hover {
    transform: translateY(-1px) scale(1.012);
    color: rgb(255 230 168 / 95%);
    background: rgb(255 255 255 / 6%);
    border-color: rgb(198 161 91 / 40%);
    box-shadow:
        0 6px 28px rgb(0 0 0 / 16%),
        inset 0 0.5px 0 rgb(255 255 255 / 7%);
    text-shadow:
        0 1px 0 rgb(14 10 4 / 36%),
        0 0 14px rgb(226 190 116 / 10%);
    filter: brightness(1.04);
}

.btn-map i {
    font-size: 14px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    margin-top: 60px;
    min-height: 190px;
    padding: 26px 0 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgb(245 214 138 / 12%);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    background:
        radial-gradient(circle at 18% -20%, rgb(255 224 154 / 16%) 0%, rgb(255 224 154 / 0%) 38%),
        radial-gradient(circle at 82% 120%, rgb(120 82 24 / 20%) 0%, rgb(120 82 24 / 0%) 42%),
        linear-gradient(135deg, rgb(7 7 9 / 94%) 0%, rgb(20 17 14 / 92%) 36%, rgb(39 29 16 / 88%) 68%, rgb(10 10 12 / 96%) 100%);
    box-shadow:
        0 -14px 32px rgb(0 0 0 / 24%),
        inset 0 1px 0 rgb(255 243 214 / 8%);
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    width: min(100% - 32px, 980px);
    padding: 0 8px;
}

.footer-nav {
    display: flex;
    gap: 18px 24px;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0.78;
}

.footer-nav a {
    font-size: 14px;
    font-weight: 500;
    padding: 4px 8px;
    text-transform: uppercase;
    color: rgb(255 242 219 / 84%);
    transition: var(--transition-smooth);
    letter-spacing: 0.05em;
    text-shadow: 0 0 10px rgb(214 169 82 / 8%);
}

.footer-nav a:hover {
    color: var(--accent-gold);
}

.footer-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 36px;
    padding: 12px 16px;
    border: 1px solid rgb(245 214 138 / 14%);
    background:
        linear-gradient(135deg, rgb(255 250 238 / 8%) 0%, rgb(255 250 238 / 2%) 16%, rgb(255 216 120 / 6%) 56%, rgb(255 216 120 / 2%) 100%),
        linear-gradient(135deg, rgb(10 10 12 / 88%) 0%, rgb(21 18 14 / 82%) 44%, rgb(44 31 14 / 72%) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    border-radius: 22px;
    box-shadow:
        0 18px 36px rgb(0 0 0 / 24%),
        0 0 22px rgb(214 169 82 / 8%),
        inset 0 1px 0 rgb(255 244 220 / 8%),
        inset 0 -10px 18px rgb(105 76 22 / 12%);
}

.footer-socials .social-link {
    min-height: 46px;
    padding: 11px 18px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 3%) 100%),
        linear-gradient(135deg, rgb(12 12 14 / 88%) 0%, rgb(24 20 16 / 82%) 44%, rgb(56 40 18 / 58%) 100%);
    border: 1px solid rgb(245 214 138 / 20%);
    box-shadow:
        0 12px 26px rgb(0 0 0 / 20%),
        0 0 18px rgb(214 169 82 / 12%),
        inset 0 1px 0 rgb(255 240 210 / 14%);
    color: rgb(255 247 233 / 96%);
    letter-spacing: 0.04em;
    animation: luxuryButtonBreath var(--motion-sync-breath) ease-in-out infinite;
}

.footer-socials .social-link:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgb(245 214 138 / 42%);
    background:
        linear-gradient(135deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 5%) 100%),
        linear-gradient(135deg, rgb(18 18 20 / 92%) 0%, rgb(38 28 18 / 88%) 40%, rgb(86 62 26 / 56%) 100%);
    box-shadow:
        0 16px 30px rgb(0 0 0 / 24%),
        0 0 30px rgb(214 169 82 / 22%),
        inset 0 1px 0 rgb(255 244 220 / 22%);
}

.footer-socials .social-link--icon {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    justify-content: center;
    gap: 0;
    font-size: 12px;
    border-radius: 50%;
    overflow: visible;
    isolation: auto;
    transform-style: preserve-3d;
    transform-origin: center center;
    perspective: 1600px;
    animation: none;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    will-change: transform, filter;
}

.footer-socials .social-link--icon::after {
    content: none;
}

.footer-socials .social-link--icon::before {
    content: none;
}

.footer-socials .social-link--icon i {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 30px;
    transform-style: preserve-3d;
    backface-visibility: visible;
    animation: iconMetalShimmer var(--icon-sheen-duration) ease-in-out infinite;
    filter:
        drop-shadow(0 12px 22px rgb(0 0 0 / 44%))
        drop-shadow(0 0 24px rgb(255 226 164 / 28%))
        drop-shadow(0 0 12px rgb(102 184 139 / 16%));
    z-index: 1;
}

.footer-socials .social-link--icon:hover i {
    animation:
        iconSocialBounceFlip 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
        iconMetalShimmer var(--icon-sheen-duration) ease-in-out infinite;
}

.footer-socials .social-link--icon:hover {
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    border-color: transparent;
    filter: brightness(1.08) saturate(1.08);
}


.footer-socials .social-link--icon:hover i {
    filter:
        drop-shadow(0 14px 24px rgb(0 0 0 / 46%))
        drop-shadow(0 0 30px rgb(255 231 178 / 42%))
        drop-shadow(0 0 16px rgb(112 196 149 / 24%));
}

@media (width <= 1280px) and (width >= 900px) {

    .top-row {
        width: 100%;
        max-width: none;
        margin: 0;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        row-gap: 16px;
        justify-content: stretch;
    }

    .logo-wrapper {
        grid-column: 1;
        justify-self: start;
    }

    .nav-main {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        justify-self: stretch;
        justify-content: center;
        transform: none;
        padding-left: 0;
        margin-right: 0;
        gap: var(--nav-pill-gap-y) var(--nav-pill-gap-x);
    }

    .header-controls {
        grid-column: 3;
        margin-left: 0;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        justify-self: end;
    }

    .hero-photo,
    .about-photo {
        max-width: 100%;
    }
}

@media (width <= 960px) {

    .section {
        padding: 72px 0;
    }

    .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .about-container,
    .contacts-container {
        grid-template-columns: 1fr;
        flex-direction: column;
        gap: 28px;
    }

    .hero-photo {
        width: min(100%, 420px);
        height: auto;
        aspect-ratio: 21 / 31;
    }

    .about-photo {
        width: min(100%, 420px);
        height: auto;
        aspect-ratio: 21 / 26;
    }

    .services-grid,
    .gallery-grid,
    .reviews-grid,
    .cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
        gap: 20px;
    }
}

@media (width <= 640px) {

    .top-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 12px;
    }

    .header-controls {
        grid-column: 2;
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    .nav-main {
        gap: 10px 12px;
    }

    .btn-neon,
    .header-online-btn {
        width: 100%;
        justify-content: center;
    }

    .footer-socials {
        padding: 10px 12px;
        gap: 8px;
    }
}

.footer-socials .social-link--primary {
    padding-inline: 20px;
    font-weight: 600;
    margin-left: 78px;
    position: relative;
}

.footer-socials .social-link--primary::after {
    content: "";
    position: absolute;
    left: -44px;
    top: 50%;
    width: 1px;
    height: 42px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(245 214 138 / 42%) 50%, rgb(255 255 255 / 0%) 100%);
    opacity: 0.75;
}

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.7;
}

.footer-legal a {
    color: rgb(255 242 219 / 78%);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color 0.25s ease;
}

.footer-legal a:hover {
    color: var(--accent-gold);
}

.footer-legal-sep {
    color: rgb(255 242 219 / 32%);
    font-size: 11px;
}

body.light .footer-legal a {
    color: rgb(100 80 50 / 70%);
}

body.light .footer-legal a:hover {
    color: var(--accent-gold);
}

body.light .footer-legal-sep {
    color: rgb(100 80 50 / 30%);
}

.footer-copy {
    font-size: 12px;
    opacity: 0.62;
    margin-top: 2px;
    color: rgb(255 239 210 / 72%);
}

/* =========================================================
   LEGAL PAGES (Impressum, Datenschutz)
   ========================================================= */

.legal-page {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.legal-content {
    line-height: 1.75;
    font-size: 15px;
    color: var(--text-light);
}

.legal-content h2 {
    margin-top: 2.2rem;
    margin-bottom: 0.6rem;
    font-size: 1.35rem;
    color: var(--text-dark);
}

.legal-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.4rem;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.legal-content p {
    margin-bottom: 0.8rem;
}

.legal-content a {
    color: var(--accent-gold);
    text-decoration: underline;
    text-decoration-color: rgb(198 161 91 / 30%);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.25s ease;
}

.legal-content a:hover {
    text-decoration-color: var(--accent-gold);
}

@keyframes socialCoinToss {

    0% {
        transform: translate3d(0, 0, 0) rotateX(10deg) rotateY(0deg) rotateZ(0deg) scale(0.98);
    }

    18% {
        transform: translate3d(0, -8px, 22px) rotateX(22deg) rotateY(168deg) rotateZ(4deg) scale(1.02);
    }

    42% {
        transform: translate3d(0, -18px, 42px) rotateX(36deg) rotateY(326deg) rotateZ(-3deg) scale(1.08);
    }

    66% {
        transform: translate3d(0, -6px, 18px) rotateX(18deg) rotateY(496deg) rotateZ(2deg) scale(1.01);
    }

    84% {
        transform: translate3d(0, -2px, 6px) rotateX(12deg) rotateY(620deg) rotateZ(0deg) scale(0.99);
    }

    100% {
        transform: translate3d(0, 0, 0) rotateX(10deg) rotateY(720deg) rotateZ(0deg) scale(0.98);
    }
}

@keyframes socialIconPulse {

    0%, 100% {
        transform: scale(0.98);
        filter:
            drop-shadow(0 10px 18px rgb(0 0 0 / 40%))
            drop-shadow(0 0 18px rgb(255 215 132 / 26%))
            drop-shadow(0 0 8px rgb(100 182 136 / 12%));
    }

    50% {
        transform: scale(1.06);
        filter:
            drop-shadow(0 12px 22px rgb(0 0 0 / 44%))
            drop-shadow(0 0 26px rgb(255 224 158 / 38%))
            drop-shadow(0 0 12px rgb(106 192 145 / 20%));
    }
}

/* =========================================================
   REVEAL / CURSOR / PRELOADER
   ========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s cubic-bezier(0.2, 0.9, 0.4, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Natural, professional cursor halo:
   a soft circular spot of warm light that follows the cursor.
   No clip-path "tear-drop" / Prince-Rupert shape, no rotation.
   Two concentric radial layers give a smooth core → soft outer falloff. */

.cursor-glow {
    position: fixed;
    width: 220px;
    height: 220px;
    pointer-events: none;
    z-index: 5;

    /* Centre the halo on the cursor coordinates set by JS via translate(). */
    transform-origin: 50% 50%;
    margin: -110px 0 0 -110px;
    filter: blur(8px) saturate(1.05);
    opacity: 0;
    will-change: transform, opacity;
    mix-blend-mode: soft-light;
    transition: opacity 0.32s ease;
    border-radius: 50%;
}

.cursor-glow::before,
.cursor-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 50%;
}

/* Outer soft halo — wide warm spread that fades out gracefully. */

.cursor-glow::before {
    background: radial-gradient(circle at 50% 50%,
        rgb(255 232 182 / 16%) 0%,
        rgb(255 220 158 / 10%) 22%,
        rgb(255 205 112 / 5%) 46%,
        rgb(255 205 112 / 0%) 72%);
}

/* Inner brighter core — small bright centre, like a focused light source. */

.cursor-glow::after {
    background: radial-gradient(circle at 50% 50%,
        rgb(255 250 232 / 20%) 0%,
        rgb(255 244 210 / 10%) 18%,
        rgb(255 244 210 / 0%) 42%);
    opacity: 0.85;
}

.cursor-glow.is-active {
    opacity: 0.7;
}

.cursor-glow.is-idle {
    opacity: 0;
}

#preloader {
    position: fixed;
    inset: 0;
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 24px;
    z-index: 100000;
    transition: opacity 0.35s ease;
}

.loader {
    position: relative;
    width: 57px;
    height: 57px;
    background: url("../images/logo.png") center/contain no-repeat;
    filter:
        drop-shadow(0 8px 18px rgb(0 0 0 / 34%))
        drop-shadow(0 0 16px rgb(198 161 91 / 18%));
    animation: preloaderLogoReveal var(--motion-sync-pulse) var(--motion-sync-luxury) infinite;
}

.loader::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 74px;
    height: 74px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 32%, rgb(255 240 204 / 24%) 0%, rgb(255 240 204 / 8%) 18%, rgb(255 240 204 / 0%) 42%),
        radial-gradient(circle at 66% 64%, rgb(214 179 108 / 24%) 0%, rgb(214 179 108 / 10%) 18%, rgb(214 179 108 / 0%) 44%),
        radial-gradient(circle at 50% 50%, rgb(124 84 22 / 16%) 0%, rgb(124 84 22 / 0%) 64%);
    filter: blur(10px);
    opacity: 0.66;
    pointer-events: none;
    animation: preloaderMoltenAura var(--motion-sync-pulse) var(--motion-sync-luxury) infinite;
}

.loader::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 108px;
    height: 42px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background:
        radial-gradient(circle at 18% 50%, rgb(255 236 186 / 4%) 0%, rgb(255 236 186 / 0%) 24%),
        radial-gradient(circle at 34% 50%, rgb(255 226 162 / 26%) 0%, rgb(255 226 162 / 8%) 16%, rgb(255 226 162 / 0%) 34%),
        radial-gradient(circle at 52% 50%, rgb(214 179 108 / 52%) 0%, rgb(214 179 108 / 18%) 18%, rgb(214 179 108 / 0%) 38%),
        radial-gradient(circle at 68% 50%, rgb(255 205 120 / 22%) 0%, rgb(255 205 120 / 8%) 14%, rgb(255 205 120 / 0%) 30%),
        radial-gradient(circle at 84% 50%, rgb(255 236 186 / 4%) 0%, rgb(255 236 186 / 0%) 24%);
    filter: blur(12px) saturate(1.08);
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: preloaderTrailFlash var(--motion-sync-pulse) var(--motion-sync-luxury) infinite;
}

#preloader.preloader-has-message {
    gap: 24px;
}

.preloader-message {
    width: min(100%, 580px);
    padding: 18px 20px;
    border: 1px solid rgb(190 154 92 / 22%);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgb(24 18 10 / 88%) 0%, rgb(14 10 6 / 92%) 100%),
        radial-gradient(circle at 18% 0%, rgb(255 246 224 / 7%) 0%, rgb(255 246 224 / 1.5%) 24%, rgb(255 246 224 / 0%) 42%);
    box-shadow:
        0 18px 36px rgb(0 0 0 / 28%),
        inset 0 1px 0 rgb(255 244 216 / 6%);
    color: #ead9b7;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    animation: preloaderMessageReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.preloader-message strong,
.preloader-message span,
.preloader-message button {
    display: block;
}

.preloader-message strong {
    margin-bottom: 8px;
    color: #edd2a0;
    font-family: var(--font-display);
    font-size: clamp(15px, 2vw, 19px);
    font-weight: 650;
    letter-spacing: 0.01em;
}

.preloader-message span {
    color: rgb(236 230 221 / 74%);
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.55;
}

.preloader-message-reload {
    margin: 16px auto 0;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid rgb(200 161 88 / 42%);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgb(58 40 14 / 88%) 0%, rgb(24 16 7 / 96%) 100%),
        radial-gradient(circle at 24% 0%, rgb(255 244 216 / 14%) 0%, rgb(255 244 216 / 0%) 36%);
    box-shadow:
        inset 0 1px 0 rgb(255 246 224 / 16%),
        inset 0 -1px 0 rgb(88 60 20 / 32%),
        0 10px 22px rgb(0 0 0 / 24%);
    color: #f1d79f;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

.preloader-message-reload:hover {
    transform: translateY(-1px);
    border-color: rgb(221 183 112 / 58%);
    box-shadow:
        inset 0 1px 0 rgb(255 248 232 / 22%),
        inset 0 -1px 0 rgb(100 70 24 / 34%),
        0 12px 24px rgb(0 0 0 / 26%),
        0 0 16px rgb(214 179 108 / 10%);
    filter: saturate(1.05) brightness(1.03);
}

.preloader-message-reload:focus-visible {
    outline: none;
    border-color: rgb(234 202 141 / 64%);
    box-shadow:
        0 0 0 1px rgb(234 202 141 / 18%),
        0 0 0 4px rgb(178 136 56 / 8%),
        0 12px 24px rgb(0 0 0 / 26%);
}

@keyframes preloaderLogoReveal {

    0% {
        transform: translateY(20px) scale(0.4) rotate(-28deg);
        opacity: 0.08;
        filter:
            drop-shadow(0 2px 6px rgb(0 0 0 / 14%))
            drop-shadow(0 0 3px rgb(198 161 91 / 4%));
    }

    10% {
        transform: translateY(5px) scale(0.9) rotate(10deg);
        opacity: 0.72;
        filter:
            drop-shadow(0 8px 18px rgb(0 0 0 / 28%))
            drop-shadow(0 0 14px rgb(214 179 108 / 16%));
    }

    18% {
        transform: translateY(-10px) scale(1.52) rotate(62deg);
        opacity: 1;
        filter:
            drop-shadow(0 20px 40px rgb(0 0 0 / 46%))
            drop-shadow(0 0 48px rgb(214 179 108 / 46%));
    }

    34% {
        transform: translateY(2px) scale(0.88) rotate(136deg);
        opacity: 0.96;
        filter:
            drop-shadow(0 11px 24px rgb(0 0 0 / 36%))
            drop-shadow(0 0 22px rgb(198 161 91 / 24%));
    }

    50% {
        transform: translateY(-2px) scale(1.02) rotate(180deg);
        opacity: 1;
        filter:
            drop-shadow(0 13px 26px rgb(0 0 0 / 38%))
            drop-shadow(0 0 24px rgb(214 179 108 / 26%));
    }

    68% {
        transform: translateY(0) scale(0.98) rotate(252deg);
        opacity: 0.92;
        filter:
            drop-shadow(0 10px 20px rgb(0 0 0 / 32%))
            drop-shadow(0 0 16px rgb(198 161 91 / 18%));
    }

    100% {
        transform: translateY(0) scale(0.96) rotate(360deg);
        opacity: 0.84;
        filter:
            drop-shadow(0 8px 18px rgb(0 0 0 / 30%))
            drop-shadow(0 0 12px rgb(198 161 91 / 14%));
    }
}

@keyframes preloaderTrailFlash {

    0% {
        transform: translate(-50%, -50%) scale(0.3, 0.44) rotate(-22deg);
        opacity: 0;
    }

    9% {
        opacity: 0.16;
    }

    18% {
        transform: translate(-50%, -50%) scale(1.34, 1.02) rotate(20deg);
        opacity: 0.88;
    }

    26% {
        transform: translate(-50%, -50%) scale(1.08, 0.88) rotate(30deg);
        opacity: 0.42;
    }

    34%, 100% {
        transform: translate(-50%, -50%) scale(0.7, 0.62) rotate(36deg);
        opacity: 0;
    }
}

@keyframes preloaderMoltenAura {

    0% {
        transform: translate(-50%, -50%) scale(0.58);
        opacity: 0.18;
    }

    18% {
        transform: translate(-50%, -50%) scale(1.14);
        opacity: 0.74;
    }

    34% {
        transform: translate(-50%, -50%) scale(0.92);
        opacity: 0.44;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.82);
        opacity: 0.22;
    }
}

@keyframes preloaderMessageReveal {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (width <= 899px) {

    .top-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px 10px;
        min-height: 56px;
    }

    .logo-wrapper {
        grid-column: 1;
        justify-self: start;
        padding-right: 48px;
    }

    .premium-burger {
        width: 46px;
        height: 46px;
        top: 50%;
        right: 0;
        left: auto;
        transform: translateY(-50%);
    }

    .header {
        padding: 8px 18px;
    }

    .nav-main {
        display: none;
        margin-top: 0;
        transform: none;
    }

    .header-controls {
        grid-column: 2;
        place-self: center end;
        margin-top: 0;
        padding-right: 0;
        max-width: none;
        transform: none;
    }

    .hero {
        flex-direction: column;
        display: flex;
        padding: 136px 20px 60px;
        gap: 28px;
        text-align: center;
    }

    .hero-left {
        max-width: 100%;
        align-items: center;
    }

    .hero-right {
        order: -1;
        justify-content: center;
    }

    .about-container {
        flex-direction: column;
    }

    .contacts-container {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 60px 0;
    }

    .hero-photo {
        width: min(100%, 360px);
        aspect-ratio: 10 / 13;
        height: auto;
    }

    .hero-glow {
        width: min(100%, 400px);
        aspect-ratio: 10 / 13;
        height: auto;
    }

    .footer-nav {
        gap: 20px;
    }
}

/* =========================================================
   CONTENT OFFSET
   ========================================================= */

.section, .booking-container, .rating-section, .partner-section, .social-page {
    margin-top: 132px;
}

.hero {
    margin-top: 104px;
}

@media (width <= 899px) {

    .section, .booking-container, .rating-section, .partner-section, .social-page {
        margin-top: 112px;
    }

    .hero {
        margin-top: 88px;
    }
}

@media (width <= 600px) {

    .section, .booking-container, .rating-section, .partner-section, .social-page {
        margin-top: 94px;
    }

    .hero {
        margin-top: 72px;
    }
}

/* =========================================================
   HEADER SCROLL BEHAVIOR (HIDE + SOCIAL LAST)
   ========================================================= */

body.hide-header .header {
    transform: translateY(calc(-100% + 16px));
    box-shadow: 0 0 0 rgb(0 0 0 / 0%);
    -webkit-backdrop-filter: blur(4px) saturate(1.1);
    backdrop-filter: blur(4px) saturate(1.1);
}

body.hide-header .top-row {
    transform: translateY(-28px);
    opacity: 0;
}

body.hide-header .social-bar {
    transform: translateY(-20px);
    opacity: 0;
}

body:not(.hide-header) .top-row {
    transform: translateY(0);
    opacity: 1;
}

/* ========== NIKA TOOLTIP — iPhone Liquid Glass ========== */

@keyframes nikaTipTextIn {

    from {
        opacity: 0;
        transform: translateX(-5px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes nikaTipGlow {
    0%   { opacity: 0.55; }
    50%  { opacity: 0.85; }
    100% { opacity: 0.55; }
}

.nika-tooltip {
    position: fixed;
    top: 0; left: 0;
    z-index: 100000;
    pointer-events: none;
    max-width: 220px;
    width: max-content;
    padding: 7px 14px 8px;

    /* сглаженная "таблетка" как у iOS */
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: 0.69rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.022em;
    color: #ece8df;
    text-shadow:
        0 1px 5px rgb(0 0 0 / 55%),
        0 0 14px rgb(198 161 91 / 18%);

    /* жидкое стекло: почти полностью прозрачный фон + сильный blur */
    background:
        linear-gradient(
            160deg,
            rgb(255 255 255 / 0.5%) 0%,
            rgb(255 255 255 / 0.2%) 45%,
            rgb(10  20  16 /  0.4%) 100%
        );
    -webkit-backdrop-filter: blur(18px) saturate(1.1) brightness(0.98);
    backdrop-filter: blur(18px) saturate(1.1) brightness(0.98);

    /* контур: переливающийся градиент по кругу как у Dynamic Island */
    border: 1px solid transparent;
    background-clip: padding-box;
    outline: 1px solid rgb(255 255 255 / 6%);

    /* свечение — фирменный iPhone glow */
    box-shadow:
        /* внешнее мягкое голубоватое свечение */
        0 0 0 1px rgb(255 255 255 / 18%),
        0 0 18px 2px rgb(160 220 255 / 12%),
        /* тень */
        0 8px 32px rgb(0 0 0 / 32%),
        0 2px  8px rgb(0 0 0 / 18%),
        /* внутренний блик */
        inset 0 1px 0 rgb(255 255 255 / 28%),
        inset 0 -1px 0 rgb(0 0 0 / 14%);
    white-space: normal;
    word-break: break-word;
    text-align: center;
    transform: translateY(-1px) scale(0.99);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity    0.22s ease,
        visibility 0.22s ease,
        transform  0.30s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.30s ease;
    will-change: opacity, transform;
}

/* верхний блик — эффект стеклянной линзы */

.nika-tooltip::before {
    content: '';
    position: absolute;
    top: 0; left: 8px; right: 8px;
    height: 45%;
    border-radius: 20px 20px 50% 50%;
    background: linear-gradient(
        180deg,
        rgb(255 255 255 / 2%) 0%,
        rgb(255 255 255 / 0.7%) 60%,
        rgb(255 255 255 / 0%)    100%
    );
    pointer-events: none;
}

/* стрелка — над элементом */

.nika-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: calc(50% + var(--arrow-shift, 0));
    transform: translateX(-50%);
    width: 10px; height: 6px;
    background: rgb(255 255 255 / 12%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / 30%));
}

/* без стрелки (подсказка у логотипа) */
.nika-tooltip[data-no-arrow="1"]::after { display: none; }

.nika-tooltip[data-compact="1"] {
    max-width: 180px;
    padding: 5px 11px 6px;
    border-radius: 16px;
    font-size: 0.58rem;
}

/* СНИЗУ */
.nika-tooltip--below { transform: translateY(1px) scale(0.99); }

.nika-tooltip--below::after {
    bottom: auto; top: -5px;
    left: calc(50% + var(--arrow-shift, 0));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* СПРАВА */
.nika-tooltip--right { transform: translateX(-1px) scale(0.99); }

.nika-tooltip--right::after {
    bottom: auto; top: 50%; left: -5px;
    transform: translateY(-50%);
    width: 6px; height: 10px;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* СЛЕВА */
.nika-tooltip--left { transform: translateX(1px) scale(0.99); }

.nika-tooltip--left::after {
    inset: 50% -5px auto auto;
    transform: translateY(-50%);
    width: 6px; height: 10px;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* видимое состояние */

.nika-tooltip--visible {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0) scale(1);

    /* пульсирующее свечение после появления */
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 8%),
        0 0 14px 2px rgb(160 220 255 / 6%),
        0 6px 22px rgb(0 0 0 / 18%),
        0 2px  6px rgb(0 0 0 / 10%),
        inset 0 1px 0 rgb(255 255 255 / 10%),
        inset 0 -1px 0 rgb(0 0 0 / 5%);
}

/* светлая тема — молочное жидкое стекло */

body.light .nika-tooltip {
    color: #1a1e3a;
    text-shadow: 0 1px 4px rgb(255 255 255 / 60%), 0 0 12px rgb(90 110 200 / 12%);
    background:
        linear-gradient(
            160deg,
            rgb(240 242 255 / 2.3%) 0%,
            rgb(230 234 252 / 1.3%) 50%,
            rgb(220 226 248 / 0.9%) 100%
        );
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 28%),
        0 0 10px 1px rgb(90 130 255 / 7%),
        0 6px 18px rgb(0 0 0 / 7%),
        0 2px  6px rgb(0 0 0 / 4%),
        inset 0 1px 0 rgb(255 255 255 / 40%),
        inset 0 -1px 0 rgb(0 0 0 / 2%);
}

body.light .nika-tooltip::before {
    background: linear-gradient(
        180deg,
        rgb(255 255 255 / 4.7%) 0%,
        rgb(255 255 255 / 1.3%) 60%,
        rgb(255 255 255 / 0%)    100%
    );
}

body.light .nika-tooltip::after {
    background: rgb(255 255 255 / 50%);
}

/* анимация только текста — скользит слева направо, стартует после появления окошка */

.nika-tip-text {
    display: inline-block;
    animation: nikaTipTextIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.16s; /* ждём пока окошко появится (transition 0.22s) */
}

body.light .nika-tooltip--visible {
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 65%),
        0 0 22px 4px rgb(90 130 255 / 18%),
        0 8px 32px rgb(0 0 0 / 10%),
        inset 0 1px 0 rgb(255 255 255 / 85%),
        inset 0 -1px 0 rgb(0 0 0 / 4%);
}

.promo-btn-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
    margin-right: 4px;
    animation: promoIconAlive 2.4s ease-in-out infinite;
    transform-origin: center bottom;
    filter: drop-shadow(0 0 8px rgb(255 200 60 / 55%));
}

@keyframes promoIconAlive {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 8px rgb(255 200 60 / 55%));
    }

    15% {
        transform: scale(1.18) rotate(-8deg);
        filter: drop-shadow(0 0 16px rgb(255 220 80 / 85%));
    }

    30% {
        transform: scale(1.12) rotate(6deg);
        filter: drop-shadow(0 0 12px rgb(255 200 60 / 70%));
    }

    45% {
        transform: scale(1.2) rotate(-5deg);
        filter: drop-shadow(0 0 18px rgb(255 230 100 / 90%));
    }

    60% {
        transform: scale(1.1) rotate(4deg);
        filter: drop-shadow(0 0 10px rgb(255 200 60 / 65%));
    }

    75% {
        transform: scale(1.15) rotate(-3deg);
        filter: drop-shadow(0 0 14px rgb(255 215 70 / 75%));
    }
}

/* ===== ACCESSIBILITY: REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== HEADER WEATHER WIDGET ===== */

.header-weather-shell {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    overflow: visible;
    z-index: 32;
    transition: all 0.3s ease;
}

/* --- Bokeh border glow removed per request: no rectangular outline around the widget. --- */

.header-weather-shell::before,
.header-weather-shell::after {
    content: none !important;
}

.header-weather-widget {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    /* NOTE: edge-fade mask is applied INSIDE the shadow DOM only on
       .weather-app__scene / canvas elements (see HEADER_WEATHER_TRANSPARENT_STYLES
       in site-shell.js). This keeps text content (temperature, city, chips) fully
       visible and leaves the dropdown menu unclipped. */
}

@media (width >= 900px) {

    .header-weather-shell {
        position: relative;
        grid-column: 2;
        place-self: center start;

        /* Tightly packed in its max-content column right after the logo so
           there is no empty space between the widget and the nav buttons.
           The exact column geometry is set by the higher-specificity
           .header .top-row rules further below. */
        width: clamp(220px, 22vw, 320px);
        min-width: 200px;
        height: 66px;
        min-height: 66px;
        z-index: 32;
    }

    .header-weather-widget {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: inherit;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        border: none;
        outline: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .header-weather-widget::before {
        content: none;
    }

    .header-weather-widget.is-mounted::before {
        opacity: 0;
    }

    .header-weather-widget[data-weather-expanded="true"] {
        z-index: 48;
    }
}

@media (width >= 1281px) {

    .header .top-row {
        /* 5 columns:
           [logo] [widget centered] [nav]  [1fr spacer]  [controls] */
        grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) max-content;
        column-gap: 16px;
    }

    .header .top-row > .logo-wrapper {
        grid-column: 1;
        justify-self: start;
    }

    .header .top-row > .header-weather-shell {
        grid-column: 2;
        justify-self: center;
        width: clamp(220px, 22vw, 320px);
        min-width: 200px;
        height: 66px;
        min-height: 66px;
        margin-right: 0;
    }

    .header .top-row > .nav-main {
        grid-column: 3;
        justify-self: start;
        width: max-content;
        margin-right: 0;
        transform: none;
    }

    .header .top-row > .header-controls {
        grid-column: 5;
        justify-self: end;
        width: max-content;
        margin-left: 0;
        transform: none;
    }
}

@media (width <= 1280px) and (width >= 900px) {

    .header .top-row {
        /* Mid-size desktop: nav wraps onto row 2, so the widget on row 1 sits
           in a flexible 1fr column and is centred between the logo (col 1) and
           the controls (col 3). It will adapt automatically as either side grows
           or shrinks. */
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        gap: 16px 12px;
    }

    .header .top-row > .logo-wrapper {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .header .top-row > .header-weather-shell {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        width: clamp(200px, 24vw, 280px);
        min-width: 180px;
        height: 62px;
        min-height: 62px;
        margin-right: 0;
    }

    .header .top-row > .header-controls {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        transform: none;
    }

    .header .top-row > .nav-main {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        width: 100%;
        margin-right: 0;
        transform: none;
    }
}

@media (width <= 899px) {

    .top-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 10px;
        min-height: auto;
    }

    .header {
        padding: 8px 14px 10px;
    }

    .logo-wrapper {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        padding-right: 48px;
    }

    .header-controls {
        grid-column: 2;
        grid-row: 1;
        place-self: center end;
        margin-top: 0;
        padding-right: 0;
        max-width: none;
        transform: none;
    }

    .header-weather-shell {
        display: block !important;
        position: relative;
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        width: 100%;
        min-width: 0;
        height: 82px;
        min-height: 82px;
        margin-top: 2px;
        z-index: 32;
    }

    .header-weather-widget {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: inherit;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        border: none;
        outline: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .header-weather-widget::before {
        content: none;
    }

    .header-weather-widget.is-mounted::before {
        opacity: 0;
    }

    .header-weather-widget[data-weather-expanded="true"] {
        z-index: 48;
    }
}

@media (width <= 600px) {

    .header-weather-shell {
        height: 76px;
        min-height: 76px;
    }
}

/* =========================================================
   HOME GALLERY + HEADER WEATHER LAYOUT OVERRIDES
   ========================================================= */

.gallery-item--1 {
    background-image: url("../images/gallery1.jpg");
}

.gallery-item--2 {
    background-image: url("../images/gallery2.jpg");
}

.gallery-item--3 {
    background-image: url("../images/gallery3.jpg");
}

.gallery-item--4 {
    background-image: url("../images/gallery4.jpg");
}

.gallery-item--5 {
    background-image: url("../images/gallery5.jpg");
}

.gallery-item--6 {
    background-image: url("../images/gallery6.jpg");
}

.header-weather-shell,
.header-weather-widget {
    max-width: 100%;
    border-radius: 0 !important;
}

.mobile-social-icons--secondary {
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 2px 0 12px;
    padding-right: 0;
}

.mobile-social-icons--secondary .social-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

.mobile-social-icons--secondary .social-icon i {
    font-size: 20px !important;
}

@media (width <= 899px) {

    .top-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
    }

    .logo-wrapper {
        min-width: 0;
        max-width: 100%;
        padding-right: 56px;
    }

    .header-controls {
        width: auto;
        max-width: min(100%, 222px);
        gap: 6px;
        justify-content: flex-end;
    }

    .header-online-btn {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
    }

    .header-weather-shell {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        height: 95px;
        min-height: 95px;
        margin-top: 0;
    }
}

@media (width <= 560px) {

    .top-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .logo-wrapper {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
    }

    .header-controls {
        grid-column: 1;
        grid-row: 2;
        justify-self: stretch;
        width: 100%;
        max-width: none;
        justify-content: flex-end;
    }

    .header-weather-shell {
        grid-column: 1;
        grid-row: 3;
    }
}

/* Header shell reflow overrides for the full weather widget */

.header .top-row > .logo-wrapper,
.header .top-row > .header-weather-shell,
.header .top-row > .nav-main,
.header .top-row > .header-controls {
    min-width: 0;
    max-width: 100%;
}

.header .top-row > .header-weather-shell {
    width: 100%;
    min-width: 0;
    overflow: visible;
    isolation: isolate;
}

.header .top-row > .nav-main {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    transform: none;
    place-self: center stretch;
}

.header .top-row > .header-controls {
    /* Rule: header action controls always stay packed against the right edge,
       regardless of viewport width. The responsive layout may move the whole
       group to another row, but never recenters or stretches the buttons. */
    width: max-content;
    max-width: 100%;
    margin-left: 0;
    transform: none;
    display: grid;
    grid-template-areas: "lang booking theme";
    grid-template-columns: repeat(3, max-content);
    place-items: center end;
    place-self: center end;
    justify-content: end;
    gap: 10px;
}

.header .top-row > .header-controls > * {
    min-width: 0;
    justify-self: end;
}

.header .top-row > .header-controls .language-dropdown {
    grid-area: lang;
    place-self: center end;
}

.header .top-row > .header-controls .header-online-btn {
    grid-area: booking;
    width: auto;
    min-width: 0;
    min-height: 36px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    font-size: 13px;
    border-radius: 999px;
}

.header .top-row > .header-controls .theme-btn {
    grid-area: theme;
    place-self: center end;
    flex: none;
    width: 45px;
    min-width: 45px;
    height: 45px;
    min-height: 45px;
    border-radius: 0;
}

.header .top-row > .header-controls .theme-btn,
.header .top-row > .header-controls .lang-dropdown-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.header .top-row > .header-controls .theme-btn:hover,
.header .top-row > .header-controls .lang-dropdown-btn:hover {
    transform: translateY(-1px) scale(1.02);
    filter: saturate(1.06) brightness(1.03);
}

.header .top-row > .header-controls .lang-dropdown-btn {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 6px 8px;
    border-radius: 14px;
    gap: 3px;
}

.header .top-row > .header-controls .lang-dropdown-btn i:first-child {
    width: 36px;
    min-width: 36px;
    height: 36px;
    filter: none;
    animation: iconGlassBounce var(--icon-bounce-duration) ease-in-out infinite;
}

.header .top-row > .header-controls .lang-dropdown-btn i:last-child {
    width: 12px;
    min-width: 12px;
    height: 12px;
    margin-top: 0;
    filter: none;
}

.header .top-row > .header-controls .theme-btn::before {
    filter: none;
    animation: iconGlassBounce var(--icon-bounce-duration) ease-in-out infinite;
}

.mobile-social-icons .social-icon .mobile-menu-euro-icon {
    width: 100%;
    height: 100%;
    font-size: 0 !important;
    color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform-style: preserve-3d;
    backface-visibility: visible;
    animation: iconMetalShimmer var(--icon-sheen-duration) ease-in-out infinite;
    filter:
        drop-shadow(0 1px 2px rgb(0 0 0 / 26%))
        drop-shadow(0 0 4px rgb(255 223 171 / 10%));
}

.mobile-social-icons .social-icon:hover .mobile-menu-euro-icon,
.mobile-social-icons .social-icon:focus-visible .mobile-menu-euro-icon {
    animation:
        iconSocialBounceFlip 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
        iconMetalShimmer var(--icon-sheen-duration) ease-in-out infinite;
}

@media (width >= 1281px) {

    .header .top-row {
        grid-template-areas: "logo weather nav controls";
        grid-template-columns: max-content clamp(236px, 21vw, 340px) minmax(0, 1fr) minmax(188px, auto);
        gap: 12px 14px;
        align-items: center;
    }

    .header .top-row > .logo-wrapper {
        grid-area: logo;
        justify-self: start;
    }

    .header .top-row > .header-weather-shell {
        grid-area: weather;
        place-self: stretch stretch;
        width: 100%;
        min-width: 0;
        height: 132px;
        min-height: 132px;
    }

    .header .top-row > .nav-main {
        grid-area: nav;
        justify-content: center;
    }

    .header .top-row > .header-controls {
        grid-area: controls;
        justify-self: end;
        width: max-content;
        max-width: 100%;
    }

    .header .top-row > .header-controls .header-online-btn {
        min-width: 156px;
    }
}

@media (width <= 1280px) and (width >= 900px) {

    .header .top-row {
        grid-template-areas:
            "logo weather controls"
            "nav nav nav";
        grid-template-columns: max-content minmax(220px, 1fr) minmax(190px, auto);
        gap: 14px 12px;
        align-items: center;
    }

    .header .top-row > .logo-wrapper {
        grid-area: logo;
        justify-self: start;
    }

    .header .top-row > .header-weather-shell {
        grid-area: weather;
        justify-self: stretch;
        width: 100%;
        min-width: 0;
        height: 132px;
        min-height: 132px;
    }

    .header .top-row > .nav-main {
        grid-area: nav;
        justify-content: center;
    }

    .header .top-row > .header-controls {
        grid-area: controls;
        justify-self: end;
        width: max-content;
        max-width: 100%;
    }

    .header .top-row > .header-controls .header-online-btn {
        min-width: 146px;
    }
}

@media (width <= 899px) {

    .header .top-row {
        grid-template-areas:
            "logo controls"
            "weather weather";
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
    }

    .header .top-row > .logo-wrapper {
        grid-area: logo;
        width: 100%;
        padding-right: 56px;
    }

    .header .top-row > .header-controls {
        grid-area: controls;
        place-self: start end;
        width: max-content;
        max-width: 100%;
        grid-template-areas: "lang booking theme";
        grid-template-columns: repeat(3, max-content);
        justify-content: end;
        justify-items: end;
        gap: 8px;
    }

    .header .top-row > .header-controls .header-online-btn {
        min-width: 0;
        width: auto;
        justify-content: center;
    }

    .header .top-row > .header-weather-shell {
        grid-area: weather;
        width: 100%;
        min-width: 0;
        height: 118px;
        min-height: 118px;
        margin-top: 0;
    }
}

@media (width <= 560px) {

    .header .top-row {
        grid-template-areas:
            "logo"
            "controls"
            "weather";
        grid-template-columns: minmax(0, 1fr);
    }

    .header .top-row > .logo-wrapper {
        grid-area: logo;
        width: 100%;
    }

    .header .top-row > .header-controls {
        grid-area: controls;
        justify-self: end;
        width: max-content;
        max-width: 100%;
        grid-template-areas: "lang booking theme";
        grid-template-columns: repeat(3, max-content);
        justify-content: end;
        justify-items: end;
        gap: 8px;
    }

    .header .top-row > .header-weather-shell {
        grid-area: weather;
    }
}

/* ===== HEADER WEATHER COMPACT SIZE OVERRIDES ===== */
@media (width >= 900px) {

    .header-weather-shell {
        width: clamp(220px, 18vw, 260px);
        min-width: 220px;
        height: 66px;
        min-height: 66px;
    }
}

@media (width >= 1281px) {

    .header .top-row {
        grid-template-columns: max-content clamp(220px, 18vw, 260px) minmax(0, 1fr) max-content;
    }

    .header .top-row > .header-weather-shell {
        width: clamp(220px, 18vw, 260px);
        min-width: 220px;
        height: 66px;
        min-height: 66px;
    }
}

@media (width <= 1280px) and (width >= 900px) {

    .header .top-row {
        grid-template-columns: max-content minmax(220px, 260px) max-content;
    }

    .header .top-row > .header-weather-shell {
        width: min(100%, 260px);
        height: 62px;
        min-height: 62px;
    }
}

@media (width <= 899px) {

    .header-weather-shell {
        height: 82px;
        min-height: 82px;
    }
}

@media (width <= 600px) {

    .header-weather-shell {
        height: 76px;
        min-height: 76px;
    }
}

body.header-weather-expanded .header,
body.header-weather-expanded .header-weather-shell,
body.header-weather-expanded .header-weather-widget {
    z-index: 9999;
}