:root {
    /* ══════════════════════════  BASE VALUES  ══════════════════════════ */

    /* palette — dark theme (default) */
    --color1:            #152c52;   /* brand navy (logo) */
    --bg:                #2c2c2c;
    --surface:           #14203a;   /* dropdown / card bg */
    --surface-2:         #1b2b49;   /* hovered row */
    --text:              #eaf0fb;
    --text-muted:        #93a4c4;
    --border:            rgba(255, 255, 255, .10);
    --accent:            #fff600;
    --accent-2:          #0fd0e1;

    /* services sub-menu prefix hues */
    --c-red:             #ff5a5f;
    --c-blue:            #0fd0e1;
    --c-orange:          #ffb020;

    /* header bar */
    --content-width:     1920px;    /* max width of every <section> + the SiteRain lines */
    --menu-height:       88px;
    --menu-height-sm:    62px;      /* compact / scrolled */
    --menu-pad-x:        40px;      /* bar side padding */
    --section-px:        5px;      /* side padding of every <section> — shrinks per breakpoint */
    --section-gap:       120px;     /* vertical rhythm between stacked sections */
    --menu-gap:          6px;       /* gap between top-level items */
    --menu-bg:           rgba(13, 21, 38, .72);
    --menu-bg-alpha:     81%;       /* translucency of the header bar (dark) */
    --menu-blur:         12px;
    --menu-z:            50;

    /* top-level links */
    --link-pad-y:        10px;
    --link-pad-x:        14px;
    --link-radius:       10px;
    --link-size:         15px;
    --link-weight:       500;
    --link-hover-bg:     rgba(255, 255, 255, .06);

    /* dropdowns */
    --submenu-min-width: 240px;
    --submenu-offset:    10px;      /* gap item ↔ its dropdown */
    --submenu-pad:       8px;
    --submenu-radius:    14px;
    --submenu-shadow:    0 18px 50px -12px rgba(0, 0, 0, .55);
    --submenu-row-pad-y: 9px;
    --submenu-row-pad-x: 12px;
    --submenu-row-radius: 9px;

    /* language switcher */
    --lang-min-width:    88px;

    /* CTA "order" button */
    --cta-pad-y:         11px;
    --cta-pad-x:         20px;
    --cta-radius:        999px;
    --cta-bg:            var(--accent);
    --cta-text:          #06222a;

    /* .btn / .btn-2 — shared sizing */
    --btn-pad-y:          13px;
    --btn-pad-x:          24px;
    --btn-radius:         12px;
    --btn-gap:            10px;      /* icon ↔ label */
    --btn-font-size:      15px;
    --btn-font-weight:    600;
    --btn-border:         2px;
    --btn-ease:           cubic-bezier(.22, 1, .36, 1);
    /* primary: the dot that runs the edge */
    --btn-dot-size:       7px;
    --btn-dot-color:      #ffffff;
    --btn-dot-speed:      18s;       /* one lap, idle — a very slow crawl */
    --btn-dot-speed-hover: 0.9s;     /* one lap, hovered — snappy */

    /* day / night toggle */
    --toggle-size:       38px;

    /* motion */
    --ease:              cubic-bezier(.22, 1, .36, 1);
    --dur:               .28s;
    --dur-fast:          .16s;

    /* typography */
    --font-sans:         "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media(max-width: 1950px) {
    :root {
         --content-width:     1620px;
         --section-px: 45px;
    }
}
/* palette — light theme */
body.light-theme {
    --bg:                #f5f7fb;
    --surface:           #ffffff;
    --surface-2:         #eef2f9;
    --text:              #152c52;
    --text-muted:        #63739a;
    --border:            rgba(21, 44, 82, .12);
    --menu-bg:           rgba(255, 255, 255, .78);
    --menu-bg-alpha:     48%;       /* translucency of the header bar (light) */
    --link-hover-bg:     rgba(21, 44, 82, .06);
    --submenu-shadow:    0 18px 50px -14px rgba(21, 44, 82, .22);
}

/* ══════════════════════  MONTSERRAT (self-hosted)  ══════════════════════ */
/* cyrillic + cyrillic-ext + latin + latin-ext bundled per weight */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/montserrat/montserrat-v31-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/montserrat/montserrat-v31-cyrillic_cyrillic-ext_latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/montserrat/montserrat-v31-cyrillic_cyrillic-ext_latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/montserrat/montserrat-v31-cyrillic_cyrillic-ext_latin_latin-ext-700.woff2") format("woff2");
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/montserrat/montserrat-v31-cyrillic_cyrillic-ext_latin_latin-ext-900.woff2") format("woff2");
}

#loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: var(--bg, #0d1526);
    transition: opacity .7s ease;
}
#loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255,255,255,.12);
    border-top-color: var(--accent, #0fd0e1);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

#progress-bar {
    width: 220px;
    height: 3px;
    background: rgba(255,255,255,.1);
    border-radius: 2px;
    overflow: hidden;
}
#progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent, #0fd0e1);
    border-radius: 2px;
    transition: width .2s ease;
}
/* The preloader paints before JS adds the theme class, and its bg defaults to
   the dark --bg — so the text defaults to light and only flips for light theme. */
#progress-text {
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .04em;
}
body.light-theme #progress-text {
    color: rgba(0, 0, 0, .4);
}
html {
    overflow-x: clip;      /* scattered SVG shards / the 3D canvas may spill sideways —
                              clip the page instead of showing a horizontal scrollbar
                              (clip, not hidden: keeps position: sticky working) */
}
/* Make the theme background colour itself animate. Everything that reads --bg
   (the page, the translucent header bar) then interpolates from the very same
   value, in lockstep — so no seam can open between them mid-toggle. A plain
   custom-property swap is instant; @property is what lets it transition. */
@property --bg {
    syntax: "<color>";
    inherits: true;
    initial-value: #0d1526;
}
body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--text);
    transition: --bg .3s ease, color .3s;
    min-height: 120vh;
    overflow-x: clip;
}

svg#logo {
    overflow: visible;
    width: auto;
    height: auto;
    max-width: 100%;       /* never let a wide baked title stretch the layout */
    max-height: 30vh;
}
/* ...and the dissolve-wave clone the route transition spawns (id stripped,
   marked data-logo-clone) — without this the outgoing headline animates in its
   raw navy fill and vanishes against the dark bg. */
.dark-theme svg#logo,
.dark-theme svg[data-logo-clone] {
    filter: brightness(0) invert(1);
}
/* real page <h1> — kept for SEO / a11y, the visible title is svg#logo */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
div#viewer {
    width: 100%;
    height: 100%;
    overflow: visible;
}
svg#logo path {
    fill: var(--color1);
}

section#home {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: stretch;
    width: 100%;
    height: calc(100vh - 148px);
    gap: clamp(12px, 3vw, 48px);
    min-height:600px;
}
.notebook {
    position: relative;
    isolation: isolate;
    overflow: visible;
    min-height: 100%;
    min-width: 0;
    cursor: grab;
}
#viewer { min-height: 0; }

section {
    position: relative;
    max-width: var(--content-width);
    margin: 0 auto;
    padding-inline: var(--section-px);
    box-sizing: border-box;
    display: block;
}
/* the hero manages its own edges (grid + the 3D canvas bleeds) */
section#home { padding-inline: var(--section-px); }
.zag {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 28px;                 /* space between the title and the buttons */
}

/* site wordmark sitting above the per-page SVG headline (#logo) */
.zag .brand-kicker {
    margin: 0px 5px -14px;
    color: #878787;
    /* JS (TheLaptopScene.vue) FLIP-animates this via transform on route change,
       exactly like .zag-btns — without this it would snap instead of glide. */
    transition: transform .5s var(--ease, cubic-bezier(.22, 1, .36, 1));
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .zag .brand-kicker { transition: none; }
}

.zag-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;                 /* space between the two buttons */
    margin-top: 8px;
    /* JS (TheLaptopScene.vue) FLIP-animates this via transform on route change */
    transition: transform .5s var(--ease, cubic-bezier(.22, 1, .36, 1));
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .zag-btns { transition: none; }
}


.logo circle {
    transition: .4s
}

.logo:hover circle {
    animation: rotate_alogo .2s linear infinite
}

ul.main-menu.scroll-down .logo:hover circle {
    filter: brightness(1) invert(0)
}

@keyframes rotate_alogo {
    0% {
        transform: rotate(0) translate(8px) rotate(0)
    }

    to {
        transform: rotate(360deg) translate(8px) rotate(-360deg)
    }
}

.logo:hover g circle {
    animation: rotate_alogo .5s linear infinite
}

.logo:hover g>:nth-child(2n) circle {
    animation: rotate_alogo .4s linear infinite
}

.logo svg {
    width: 153px;
    height: 60px;
    padding: 0 8px;
    margin: 11px 0
}

body.light-theme header .logo svg>g>:nth-child(1), body.light-theme header .logo svg>g>:nth-child(3), body.light-theme header .logo svg>g>:nth-child(4), body.light-theme header .logo svg>g>:nth-child(5) {
    fill: #152c52
}

body.light-theme header .logo svg g {
    filter: none
}
body.light-theme footer .footer-brand svg path~g path,
body.light-theme header .logo svg path~g path {
    stroke-width: 24px;
    filter: brightness(0)
}
body.light-theme footer .footer-brand svg g {
    filter: none;
}
/* ═══════════════════════════════  BUTTONS  ════════════════════════════════ */
/*
   Two styles, both take a Font Awesome icon as the first child:

     <a class="btn"><i class="fa-solid fa-paper-plane"></i><span>Залишити заявку</span></a>
     <a class="btn-2"><i class="fa-solid fa-arrow-right"></i><span>Наші роботи</span></a>

   .btn   — primary / filled. A dot runs along the edge; on :hover it speeds up.
   .btn-2 — secondary / outlined. Fills in on :hover, the icon nudges forward.
*/
.btn,
.btn-2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--btn-gap);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--btn-radius);
    font: var(--btn-font-weight) var(--btn-font-size) / 1 var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: var(--btn-border) solid transparent;
    transition: background-color var(--dur) var(--btn-ease),
                color var(--dur) var(--btn-ease),
                border-color var(--dur) var(--btn-ease),
                box-shadow var(--dur) var(--btn-ease),
                transform var(--dur-fast) var(--btn-ease);
    -webkit-tap-highlight-color: transparent;
}
.btn i,
.btn-2 i {
    font-size: .95em;
    line-height: 0;
    transition: transform var(--dur) var(--btn-ease);
}
.btn:active,
.btn-2:active { transform: translateY(1px); }

/* ── primary ─────────────────────────────────────────────────────────────── */
.btn {
    isolation: isolate;
    color: var(--cta-text);
    background: var(--accent);
    box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn:hover {
    background: color-mix(in srgb, var(--accent) 88%, #fff);
    box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--accent) 90%, transparent);
}
.btn:hover i { transform: translateX(2px); }

/* the travelling dot — a real element injected by resources/js/btnDot.js and
   driven with the Web Animations API so :hover only changes its *speed*
   (playbackRate), never its position. It drags a comet tail behind it:
   offset-rotate:auto aligns the dot to the path tangent, so the ::before
   streak simply points along local -x (opposite the direction of travel).
   btnDot.js ramps --btn-tail (0..~2.6) on hover for the "brighter/longer
   when faster" feel; the flicker keyframes give it the living-comet shimmer. */
@property --btn-tail {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}
@media (max-width: 768px), (hover: none), (pointer: coarse) {
    .btn > .btn-dot { display: none; }
}
.btn > .btn-dot {
    --btn-tail: 1;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: var(--btn-dot-size);
    height: var(--btn-dot-size);
    border-radius: 50%;
    background: var(--color1);
    box-shadow: 0px 0px 6px var(--accent);
    offset-path: inset(0 round var(--btn-radius));
    offset-distance: 0%;
    offset-rotate: auto;
    pointer-events: none;
    transition: --btn-tail .35s var(--btn-ease, ease);
}


/* ── secondary ───────────────────────────────────────────────────────────── */
.btn-2 {
    color: var(--color1);
    background: transparent;
    border-color: var(--accent);
}
.dark-theme .btn-2 {
    color: var(--color2);
}
.btn-2:hover {
    color: var(--cta-text);
    background: var(--accent);
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 85%, transparent);
}
.btn-2:hover i { transform: translateX(3px); }

/* ═══════════════════════════════  SITE MENU  ═══════════════════════════════ */

.site-header {
    position: relative;
    z-index: var(--menu-z);
}

/* ── top bar ─────────────────────────────────────────────────────────────── */
ul.main-menu {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--content-width);
    min-height: var(--menu-height);
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: var(--menu-gap);
    margin: 0;
    padding: 0 var(--menu-pad-x);
    list-style: none;
    z-index: var(--menu-z);
    /* Derived from the SAME animating --bg as <body>, so during a theme toggle
       the bar's colour and the page's colour are never a frame apart — the
       hairline seam that showed along the bar's edge is gone. Only the alpha
       differs per theme, and an instant alpha step is invisible because the
       backdrop it sits on is that same --bg. */
    background-color: color-mix(in srgb, var(--bg) var(--menu-bg-alpha), transparent);
    -webkit-backdrop-filter: blur(var(--menu-blur));
    backdrop-filter: blur(var(--menu-blur));
    transition: min-height var(--dur) var(--ease);
}
ul.main-menu > li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* logo pushes everything else to the right edge */
li.lilogo {
    margin-right: auto;
}
li.lilogo .menu-link {
    padding: 0;
}
.logo svg {
    transition: width var(--dur) var(--ease), height var(--dur) var(--ease);
}

/* ── top-level links ─────────────────────────────────────────────────────── */
.menu-link,
.lang-current {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--link-pad-y) var(--link-pad-x);
    border-radius: var(--link-radius);
    font-size: var(--link-size);
    font-weight: var(--link-weight);
    line-height: 1;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* active route — colour only; the moving .nav-dot marks the active item */
.menu-link.active,
.menu-link.router-link-exact-active,
.menu-link.is-active {
    color: var(--color1);
}
.dark-theme .menu-link.active, 
.dark-theme .menu-link.router-link-exact-active, 
.dark-theme .menu-link.is-active {
    color: var(--accent);
}
.dark-theme .submenu-link.active, 
.dark-theme .submenu-link.router-link-active {
    background: var(--surface-2);
    color: var(--accent);
}
/* a single dot that slides along the bottom of the bar to the active item,
   and jumps to whichever top-level item the pointer is over */
.nav-dot {
    position: absolute;
    left: 0;
    bottom: 16px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 8px 1px var(--accent-2), 0 0 3px 0 var(--accent-2);
    pointer-events: none;
    opacity: 0;
    transition: transform .34s var(--ease), opacity .18s var(--ease);
}
.nav-dot.on {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .nav-dot { transition: none; }
}

/* wrapper <span> around link + caret in has-children items */
.menu-item.has-children > span {
    display: inline-flex;
    align-items: center;
}

/* dropdown caret */
.arrow-icon {
    font-size: 11px;
    margin-left: -11px;
    color: var(--text-muted);
    transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
    margin-top: 4px;
}
.menu-item.has-children:hover .arrow-icon {
    transform: rotate(180deg);
}

/* ── dropdowns ───────────────────────────────────────────────────────────── */
ul.main-menu ul.submenu {
    position: absolute;
    top: 81%;
    left: -9px;
    margin: 0;
    padding: var(--submenu-pad);
    min-width: var(--submenu-min-width);
    list-style: none;
    background: var(--surface);
    border-radius: var(--submenu-radius);
    box-shadow: var(--submenu-shadow);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    z-index: 1;
}
.menu-item.has-children:hover > ul.submenu {
    opacity: 1;
    transform: translateY(var(--submenu-offset));
    pointer-events: auto;
}
/* invisible bridge so the pointer can cross the gap into the dropdown */
.menu-item.has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--submenu-offset);
}

.submenu-item {
    margin: 0;
}
.submenu-link {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: var(--submenu-row-pad-y) var(--submenu-row-pad-x);
    border-radius: var(--submenu-row-radius);
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    margin-top: 3px;
}
.submenu-link:hover {
    background: var(--surface-2);
}
.submenu-link.active, .submenu-link.router-link-active {
    background: var(--surface-2);
    color: var(--accent-2);
}

/* coloured prefixes in the services dropdown */
.submenu-link b {
    font-weight: 700;
}
.submenu-link b.c-red    { color: var(--c-red); }
.submenu-link b.c-blue   { color: var(--c-blue); }
.submenu-link b.c-orange { color: var(--c-orange); }

ul.main-menu li.langs ul.submenu {
    position: absolute;
    top: 81%;
    left: -4px;
    margin: 0;
    min-width: auto;
}

/* ── language switcher ───────────────────────────────────────────────────── */
li.langs .lang-current {
    min-width: auto;
    justify-content: center;
    font-weight: 600;
    letter-spacing: .04em;
}
ul.submenu.lang-drop {
    min-width: var(--lang-min-width);
}
.lang-drop .submenu-link {
    justify-content: center;
    font-weight: 600;
    letter-spacing: .04em;
}
/* desktop dropdown lists only the OTHER languages */
.lang-drop .submenu-item.lang-is-current { display: none; }

/* ── CTA "order" button ──────────────────────────────────────────────────── */
li.zakaz {
    justify-content: center;
    margin-left: 8px;
}
.a21 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--cta-pad-y) var(--cta-pad-x);
    border: 0;
    border-radius: var(--btn-radius);
    background: var(--cta-bg);
    color: var(--cta-text);
    font-family: inherit;
    font-size: var(--link-size);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 65%, transparent);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur-fast) var(--ease);
}
.a21:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.a21 i {
    font-size: 13px;
}

/* ── day / night toggle ──────────────────────────────────────────────────── */
ul.main-menu > li.day-night-toggle {
    position: absolute;
    left: calc(var(--menu-pad-x) * -1 + 8px);   /* just outside the bar's left padding */
    top: 50%;
    transform: translateY(-50%);
    width: var(--toggle-size);
    height: var(--toggle-size);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
li.day-night-toggle:hover {
    color: var(--accent);
}
li.day-night-toggle i {
    position: absolute;
    font-size: 16px;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* dark theme → offer the sun (go light); light theme → offer the moon */
body.dark-theme  .day-night-toggle .fa-moon { opacity: 0; transform: scale(.6) rotate(-40deg); }
body.dark-theme  .day-night-toggle .fa-sun  { opacity: 1; transform: none; }
body.light-theme .day-night-toggle .fa-sun  { opacity: 0; transform: scale(.6) rotate(40deg); }
body.light-theme .day-night-toggle .fa-moon { opacity: 1; transform: none; }

/* ── scrolled / compact bar ──────────────────────────────────────────────── */
ul.main-menu.scroll-down {
    min-height: var(--menu-height-sm);
}
ul.main-menu.scroll-down .logo svg {
    width: 120px;
    height: 46px;
}

/* ── mobile drawer chrome (hidden until the ≤900px breakpoint) ───────────── */
.mobile-topbar,
.nav-scrim { display: none; }
html.nav-locked { overflow: hidden; }

.nav-burger {
    --bw: 22px;
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-content: center;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.nav-burger span {
    display: block;
    width: var(--bw);
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.active span:nth-child(2) { opacity: 0; }
.nav-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1440px) {
    :root { --section-px: 40px; }
}
@media (max-width: 1180px) {
    :root {
        --menu-pad-x: 24px;
        --section-px: 32px;
        --section-gap: 96px;
        --link-pad-x: 10px;
        --link-size: 14px;
    }
}
@media (max-width: 820px) {
    :root {
        --section-px: 22px;
        --section-gap: 72px;
    }
}
@media (max-width: 480px) {
    :root {
        --section-px: 16px;
        --section-gap: 56px;
    }
}

@media (max-width: 900px) {
    /* the fixed strip: [logo] .......... [theme] [заявка ▪] [burger]  */
    .mobile-topbar {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: calc(var(--menu-z) + 2);
        box-sizing: border-box;
        height: var(--menu-height-sm);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px max(14px, var(--section-px));
        background-color: color-mix(in srgb, var(--bg) var(--menu-bg-alpha), transparent);
        -webkit-backdrop-filter: blur(var(--menu-blur));
        backdrop-filter: blur(var(--menu-blur));
        border-bottom: 1px solid var(--border);
    }
    .mobile-topbar__logo {
        display: block;
        flex: none;
        width: clamp(104px, 32vw, 140px);
        color: var(--text);
    }
    /* same orbiting-dots animation as the desktop / footer logo */
    .mobile-topbar__logo .brand-logo__svg circle { transition: .4s; }
    .mobile-topbar__logo:hover .brand-logo__svg circle,
    .mobile-topbar__logo:active .brand-logo__svg circle { animation: rotate_alogo .2s linear infinite; }
    .mobile-topbar__logo:hover .brand-logo__svg g circle,
    .mobile-topbar__logo:active .brand-logo__svg g circle { animation: rotate_alogo .5s linear infinite; }
    .mobile-topbar__logo:hover .brand-logo__svg g > :nth-child(2n) circle,
    .mobile-topbar__logo:active .brand-logo__svg g > :nth-child(2n) circle { animation: rotate_alogo .4s linear infinite; }
    .mobile-topbar__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: none;
    }
    .mobile-theme {
        position: relative;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        background: none;
        border: 0;
        color: var(--text-muted);
        cursor: pointer;
    }
    .mobile-theme i { position: absolute; font-size: 16px; transition: opacity .25s var(--ease), transform .25s var(--ease); }
    body.dark-theme  .mobile-theme .fa-moon { opacity: 0; transform: scale(.6) rotate(-40deg); }
    body.light-theme .mobile-theme .fa-sun  { opacity: 0; transform: scale(.6) rotate(40deg); }

    /* square CTA that opens the request modal, right next to the burger */
    .mobile-cta {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        font-size: 15px;
        color: var(--cta-text);
        background: var(--accent);
        border: 0;
        border-radius: 11px;
        cursor: pointer;
        box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent);
        transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    }
    .mobile-cta:active { transform: translateY(1px); }

    .mobile-topbar { z-index: calc(var(--menu-z) + 3); }

    /* dim layer — starts under the top-bar, so the bar stays clean */
    .nav-scrim {
        display: block;
        position: fixed;
        inset: var(--menu-height-sm) 0 0 0;
        z-index: calc(var(--menu-z) + 1);
        background: rgba(6, 10, 20, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s var(--ease);
    }
    .nav-scrim.on { opacity: 1; pointer-events: auto; }

    /* the drawer — the existing <ul> slides in from the right, opening
       *below* .mobile-topbar and painted in the same colour as the bar */
    ul.main-menu {
        left: auto;
        right: 0;
        top: var(--menu-height-sm);
        bottom: 0;
        transform: translateX(100%);
        box-sizing: border-box;
        width: min(82vw, 340px);
        max-width: none;
        height: auto;
        min-height: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        padding: 18px 22px 28px;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* same hue as the top-bar, but half as see-through */
        background-color: color-mix(in srgb, var(--bg)
            calc(var(--menu-bg-alpha) + (100% - var(--menu-bg-alpha)) * .5), transparent);
        -webkit-backdrop-filter: blur(var(--menu-blur));
        backdrop-filter: blur(var(--menu-blur));
        border-left: 1px solid var(--border);
        box-shadow: -24px 0 48px -24px rgba(0, 0, 0, .45);
        z-index: calc(var(--menu-z) + 2);
        transition: transform .38s var(--ease);
    }
    ul.main-menu.is-open { transform: translateX(0); }
    /* light theme: mostly-white drawer, a touch of translucency */
    body.light-theme ul.main-menu {
        background-color: color-mix(in srgb, #ffffff 87%, transparent);
    }

    /* the top-bar-only items live in .mobile-topbar on phones
       (selectors specific enough to beat `ul.main-menu > li{display:flex}`) */
    ul.main-menu > .nav-dot,
    ul.main-menu > li.day-night-toggle,
    ul.main-menu > li.lilogo { display: none; }

    ul.main-menu > li {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        border-bottom: 1px solid var(--border);
    }
    ul.main-menu > li:last-child { border-bottom: 0; }
    ul.main-menu .menu-link,
    ul.main-menu .lang-current {
        padding: 14px 4px;
        font-size: 16px;
        white-space: normal;
    }
    ul.main-menu li.menu-item > span {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* submenus are permanently expanded on phones → the caret is meaningless,
       and removing it kills every arrow-rotate "shift" on tap/hover */
    ul.main-menu .arrow-icon { display: none; }

    /* submenus are always expanded inline on phones — no hover shift/anim */
    ul.main-menu ul.submenu,
    ul.main-menu .menu-item.has-children:hover > ul.submenu {
        position: static;
        opacity: 1;
        transform: none;
        transition: none;
        pointer-events: auto;
        box-shadow: none;
        border: 0;
        background: transparent;
        padding: 0 0 10px 14px;
        min-width: 0;
    }
    ul.main-menu .submenu-link { padding: 9px 4px; font-size: 14px; }

    /* languages: the "UK ▾" toggle is dropped; all three sit on one row,
       the active one highlighted */
    ul.main-menu li.langs > span { display: none; }
    ul.main-menu li.langs ul.submenu,
    ul.main-menu li.langs.menu-item.has-children:hover > ul.submenu {
        position: static;          /* was absolute from the desktop rule -> caused the shift */
        top: auto;
        left: auto;
        transform: none;
        transition: none;
        opacity: 1;
        pointer-events: auto;
        box-shadow: none;
        background: transparent;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 14px 0 4px;
    }
    ul.main-menu li.langs .submenu-item { display: block; flex: 1 1 0; margin: 0; }
    ul.main-menu li.langs .submenu-link {
        justify-content: center;
        padding: 7px 9px;
        border: 1px solid var(--border);
        border-radius: 9px;
        color: var(--text-muted);
    }
    ul.main-menu li.langs .lang-is-current .submenu-link {
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 55%, transparent);
        background: color-mix(in srgb, var(--accent) 14%, transparent);
    }

    li.zakaz { padding: 16px 0 8px; }
    li.zakaz .a21 { width: 100%; justify-content: center; padding: 14px; }

    /* per-item entrance: fade + slide, staggered, gated on .is-open */
    ul.main-menu > li {
        opacity: 0;
        transform: translateX(18px);
        transition: opacity .3s var(--ease), transform .3s var(--ease);
    }
    ul.main-menu.is-open > li { opacity: 1; transform: none; }
    ul.main-menu.is-open > li:nth-child(3)  { transition-delay: .06s; }
    ul.main-menu.is-open > li:nth-child(4)  { transition-delay: .10s; }
    ul.main-menu.is-open > li:nth-child(5)  { transition-delay: .14s; }
    ul.main-menu.is-open > li:nth-child(6)  { transition-delay: .18s; }
    ul.main-menu.is-open > li:nth-child(7)  { transition-delay: .22s; }
    ul.main-menu.is-open > li:nth-child(8)  { transition-delay: .26s; }
    ul.main-menu.is-open > li:nth-child(9)  { transition-delay: .30s; }
    ul.main-menu.is-open > li:nth-child(10) { transition-delay: .34s; }

    .menu-item.has-children:hover .arrow-icon { transform: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    ul.main-menu, ul.main-menu > li, .nav-scrim { transition: none; }
    ul.main-menu.is-open > li { transition-delay: 0s; }
    .mobile-topbar__logo:hover .brand-logo__svg circle,
    .mobile-topbar__logo:active .brand-logo__svg circle { animation: none; }
}

/* ── hero + 3D laptop on small screens ──────────────────────────────────── */
@media (max-width: 1024px) {
    section#home { grid-template-columns: .95fr 1.05fr; }
}
@media (max-width: 900px) {
    .notebook {
        overflow: visible;
        min-height: 500px;
        min-width: 0;
        aspect-ratio: 1 / 1;
        margin-top: -14%;
        pointer-events: none;
        margin-bottom: -14%;
    }
    section#home {
        grid-template-columns: 1fr;
        min-height: fit-content;
        gap: 6px;
        padding-top: calc(var(--menu-height-sm) + 26px);
        padding-bottom: 30px;
    }
    .zag { height: auto; gap: 18px; }
    .zag .brand-kicker { margin-bottom: -8px; }
    .zag-btns { margin-top: 4px; }
    #viewer { height: 46vh; min-height: 46vh; }
    svg#logo { max-height: 24vh; }
}
@media (max-width: 560px) {
    .notebook, #viewer {
        height: 40vh;
        min-height: 40vh;
        margin: 0 auto;
        margin-top: -29px;
        margin-bottom: -78px;
    }
    .about-stats__partner {
    grid-column: span 2;
}
    svg#logo { max-height: 19vh; }
    #home .zag-btns { flex-direction: column; align-items: stretch; }
    #home .zag-btns .btn,
        #home .zag-btns .btn, #home .zag-btns .btn-2 {
        justify-content: center;
        width: fit-content;
    }
}
@media (max-width: 380px) {
    .notebook, #viewer { height: 36vh; min-height: 36vh; }
}

/* ═══════════════════════════════  FOOTER  ═════════════════════════════════ */
.site-footer {
    position: relative;
    z-index: 1;
    margin-top: var(--section-gap);
    padding: clamp(44px, 7vw, 72px) var(--section-px);
    background: var(--surface);
    color: var(--text);
}
body.dark-theme .site-footer {
    background: #212121;
}
.footer-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: max-content minmax(210px, 300px) clamp(250px, 34vw, 520px) minmax(190px, 240px);
    justify-content: space-between;
    gap: 40px 56px;
    align-items: start;
}

/* brand — vertically centred against the tall menu column, like the reference */
.footer-brand {
    grid-column: 1;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.footer-logo { display: block; width: 150px; }
/* hover: same orbiting-dots animation as the header logo (shared keyframe) */
.footer-logo .brand-logo__svg circle { transition: .4s; }
.footer-logo:hover .brand-logo__svg circle { animation: rotate_alogo .2s linear infinite; }
.footer-logo:hover .brand-logo__svg g circle { animation: rotate_alogo .5s linear infinite; }
.footer-logo:hover .brand-logo__svg g > :nth-child(2n) circle { animation: rotate_alogo .4s linear infinite; }
@media (prefers-reduced-motion: reduce) {
    .footer-logo:hover .brand-logo__svg circle { animation: none; }
}
.footer-copy {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* menu — one flat column, rules between the three groups */
.footer-menu { grid-column: 2; }
.footer-menu ul { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin: 12px 0; }
.footer-menu hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 18px 0;
}
.footer-menu a {
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    transition: color var(--dur-fast) var(--ease);
}
.footer-menu a:hover { color: var(--accent-2); }
.footer-menu a b { font-weight: inherit; }

/* paint-the-map — the middle column: 520px, shrinking to 250px */
.footer-map {
    grid-column: 3;
    align-self: center;
    justify-self: center;
    width: clamp(250px, 34vw, 520px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.footer-map__host {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.footer-map__host svg {
    width: 100%;
    height: auto;
    display: block;
    cursor: crosshair;
}
.footer-map__host circle { transition: fill .12s linear; }
.footer-map__counter {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.footer-map__counter b {
    color: var(--accent-2);
    font-variant-numeric: tabular-nums;
}
.footer-map__pct b { color: var(--accent-2); }
.dark-theme .footer-map__counter b,
.dark-theme .footer-map__pct b { color: var(--accent); }

/* promo code revealed once the whole map is painted */
.footer-map__promo {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 999px;
    animation: footer-promo-in .4s var(--ease) both;
}
.footer-map__promo i { color: var(--color1); }
.footer-map__promo b {
    color: var(--color1);
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
}

.dark-theme .footer-map__promo i,
.dark-theme .footer-map__promo b {
    color: #fff;
}

@keyframes footer-promo-in {
    from { opacity: 0; transform: translateY(6px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .footer-map__promo { animation: none; }
}

/* contacts — right column */
.footer-contacts {
    grid-column: 4;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-contacts li { margin: 12px 0; }
.footer-contacts a,
.footer-contacts__addr {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    transition: color var(--dur-fast) var(--ease);
}
.footer-contacts a:hover { color: var(--accent-2); }
.footer-contacts i { width: 16px; color: var(--color1); flex: none; }
.dark-theme .footer-contacts a i { color: var(--accent); }
.footer-contacts__addr { color: var(--text-muted); }
.footer-contacts__addr i { color: var(--text-muted); }
.footer-req-link { font-weight: 600; }

@media (max-width: 1180px) {
    .footer-inner {
        grid-template-columns: max-content 1fr minmax(190px, 240px);
        gap: 36px 48px;
    }
    .footer-brand { grid-column: 1; grid-row: 1; }
    .footer-menu  { grid-column: 2; grid-row: 1; }
    .footer-contacts { grid-column: 3; grid-row: 1; }
    .footer-map {
        grid-column: 1 / -1;
        grid-row: 2;
        width: clamp(250px, 90vw, 520px);
        margin: 8px auto 0;
    }
}
@media (max-width: 720px) {
    .footer-inner { grid-template-columns: 1fr; justify-content: stretch; }
    .footer-brand, .footer-menu, .footer-contacts, .footer-map {
        grid-column: 1;
        grid-row: auto;
        max-width: 290px;
        margin: 0 auto;
    }
    .footer-map { justify-self: start; width: clamp(250px, 100%, 520px); }
    .footer-brand {
        align-items: flex-start;
        text-align: center;
        margin: 0 auto;
    }
    .footer-copy {
    margin: 0 auto;
}
    .site-footer { margin-top: 72px; padding: 48px var(--menu-pad-x); }
}
@media (prefers-reduced-motion: reduce) {
    .footer-map__host circle { transition: none; }
}
/* the footer "Залишити заявку" reuses the hero primary button (.btn) verbatim */
.footer-contacts__cta-li { margin-bottom: 18px !important; }
.footer-contacts__cta-li .btn { font-size: 14px; }

/* ══════════════════════  HOME — "ПРО НАС" / stats  ═════════════════════ */
.about-stats {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0;
}
.about-stats__title {
    margin: 0 0 clamp(28px, 4vw, 48px);
    font-size: clamp(26px, 3.6vw, 44px);
    font-weight: 900;
    letter-spacing: .01em;
}
.about-stats__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px) 0;
}
.about-stats__grid > li {
    min-width: 0;
    padding-inline: clamp(14px, 1.3vw, 25px);
    border-left: 2px solid var(--accent);
}
.about-stats__grid > li:first-child { border-left-color: transparent; }
@media(max-width:1650px){
    .about-stats__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .about-stats__grid > li:nth-child(4n + 1) { border-left-color: transparent; }
}
.about-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 18px;
}

.about-stat ~ .about-stat{    border-left: 2px solid var(--accent);}
.about-stat__num {
    font-size: clamp(34px, 4.4vw, 56px);
    font-weight: 100;
    line-height: 1;
    color: var(--color1);
    font-variant-numeric: tabular-nums;
}
.dark-theme .about-stat__num { color: var(--accent); }
.about-stat__label {
    font-size: clamp(13px, 1.1vw, 15px);
    color: var(--text-muted);
    max-width: 22ch;
}

.about-stats__partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    border-left: 2px solid var(--accent);
    padding-left: 25px;
}
.about-stats__partner-img { height: auto; max-height: 92px; max-width: 100%; width: auto; }
.about-stats__partner-cap { margin: 0; font-size: 13px; color: var(--text-muted); }

/* CSS fallback badge until /img/google-partner.png is supplied */
.gpartner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    font-family: var(--font-sans);
}
.dark-theme .gpartner {
    background: #ffffff;
}
.gpartner__word { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.gpartner__word b { font-weight: 700; }
.gpartner__tag {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-muted);
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

@media (max-width: 900px) {
    .about-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-stats__grid > li:nth-child(2n + 1) { border-left-color: transparent; }
}
@media (max-width: 520px) {
    .gpartner { padding: 12px 16px; gap: 9px; }
    .gpartner__word { font-size: 22px; }
    .gpartner__tag { font-size: 17px; padding-left: 9px; }
}

/* ═══════════════════════════  REQUEST FORM / MODAL  ══════════════════════ */
.request-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    background: rgba(6, 10, 20, .62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* full-bleed JOIE watermark behind the panel */
.request-modal::before {
    content: "JOIE";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 900 min(48vw, 52vh) / 1 var(--font-sans);
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}
.request-modal__panel {
    position: relative;
    z-index: 1;
    margin: auto;          /* centres, and never clips when taller than the viewport */
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px 30px 24px;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
    outline: none;
}
/* the request popup keeps the LIGHT palette in both themes — so the panel,
   fields, selects and phone input look identical regardless of the site theme */
.request-modal {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #eef2f9;
    --text: #152c52;
    --text-muted: #63739a;
    --border: rgba(21, 44, 82, .12);
    --submenu-shadow: 0 18px 50px -14px rgba(21, 44, 82, .22);
    color-scheme: light;
}
.request-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.request-modal__close:hover { color: var(--text); border-color: var(--text-muted); }
.request-modal__title {
    margin: 0;
    font-size: 22px;
    text-align: center;
}
.request-modal__subtitle {
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
    margin-bottom: 36px;
    margin-top: 1px;
}
.phone-input input {
    border: none;
}
.request-modal-enter-active,
.request-modal-leave-active { transition: opacity .22s var(--ease); }
.request-modal-enter-active .request-modal__panel,
.request-modal-leave-active .request-modal__panel { transition: transform .26s var(--ease), opacity .22s var(--ease); }
.request-modal-enter-from,
.request-modal-leave-to { opacity: 0; }
.request-modal-enter-from .request-modal__panel,
.request-modal-leave-to .request-modal__panel { opacity: 0; transform: translateY(14px) scale(.97); }

/* form */
.request-form { display: flex; flex-direction: column; gap: 14px; }
.request-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.request-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.request-field > span { font-size: 12px; color: var(--text-muted); letter-spacing: .02em; }
.request-field > span i { color: var(--accent); font-style: normal; }
.request-field input,
.request-field select,
.request-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease);
}
.request-field textarea { resize: vertical; min-height: 68px; }
.request-field input:focus,
.request-field select:focus,
.request-field textarea:focus { border-color: var(--accent-2); }
.request-field input:disabled,
.request-field select:disabled,
.request-field textarea:disabled { opacity: .6; cursor: not-allowed; }
.request-field.has-error input,
.request-field.has-error textarea { border-color: #ff5a5f; }
.request-field em { font-style: normal; font-size: 11px; color: #ff7a7e; }
.request-field--file input { padding: 8px; font-size: 12px; }

/* fully custom select — native <select> replaced by a styled listbox */
.cselect { position: relative; }
.cselect__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    text-align: left;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease);
}
.cselect__btn:focus-visible { outline: none; border-color: var(--accent-2); }
.cselect.open .cselect__btn { border-color: var(--accent-2); }
.cselect.is-disabled { opacity: .6; pointer-events: none; }
.cselect__ph { color: var(--text-muted); }
.cselect__chev {
    font-size: 11px;
    color: var(--text-muted);
    transition: transform .2s var(--ease);
    flex: none;
}
.cselect.open .cselect__chev { transform: rotate(180deg); color: var(--accent-2); }
.cselect__menu {
    position: absolute;
    z-index: 6;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--submenu-shadow);
}
.cselect__menu li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
}
.cselect__menu li.active { background: var(--surface-2); }
.cselect__menu li.sel { color: var(--accent-2); }
.cselect__menu li.sel i { font-size: 11px; }

/* country phone input with flag / dial-code prefix */
.phone-input {
    display: flex;
    align-items: stretch;
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color var(--dur-fast) var(--ease);
}
.phone-input:focus-within { border-color: var(--accent-2); }
.request-field.has-error .phone-input { border-color: #ff5a5f; }
.phone-input.is-disabled { opacity: .6; pointer-events: none; }
.phone-input__flag {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px 0 11px;
    background: none;
    border: 0;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
}
.phone-input__flag i { font-size: 9px; transition: transform .2s var(--ease); }
.phone-input.open .phone-input__flag i { transform: rotate(180deg); }
.phone-input__emoji { font-size: 16px; line-height: 1; }
.phone-input__prefix {
    display: flex;
    align-items: center;
    padding: 0 2px 0 10px;
    color: var(--text-muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.phone-input__field {
    flex: 1;
    min-width: 0;
    padding: 10px 12px 10px 6px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
}
.phone-input__menu {
    position: absolute;
    z-index: 6;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 244px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--submenu-shadow);
}
.phone-input__menu li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
}
.phone-input__menu li:hover,
.phone-input__menu li.sel { background: var(--surface-2); }
.phone-input__cname { flex: 1; }
.phone-input__cdial { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.request-form__submit {
    margin-top: 4px;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
}
.request-form.is-done .request-form__submit { opacity: .55; pointer-events: none; }
.request-form__spinner {
    width: 15px;
    height: 15px;
    border: 2px solid color-mix(in srgb, var(--cta-text) 35%, transparent);
    border-top-color: var(--cta-text);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.request-form__status {
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.request-form__status.is-ok  { color: var(--accent-2); }
.request-form__status.is-err { color: #ff7a7e; }
.request-form__legal { margin: 0; font-size: 11px; color: var(--text-muted); text-align: center; }

@media (max-width: 520px) {
    .request-modal__panel { padding: 26px 18px 20px; }
    .request-form__row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .request-modal-enter-active, .request-modal-leave-active,
    .request-modal-enter-active .request-modal__panel,
    .request-modal-leave-active .request-modal__panel { transition: none; }
}