/* ============================================================
   XSENSE DETECTORS GROUP — Landing Page Styles
   Structure:
     1. Design tokens (light / dark themes)
     2. Base & utilities
     3. Header, nav, drawer, language & theme switchers
     4. Hero (radar animation + slider)
     5. Banners
     6. Videos
     7. Before / After comparison
     8. Products carousel
     9. Reviews carousel
    10. Newsletter
    11. Features
    12. Footer
    13. Mobile bottom toolbar, toast, back-to-top
    14. Reveal animations
    15. RTL overrides
    16. Responsive & reduced motion
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
    /* Brand */
    --accent: #e63946;
    --accent-strong: #c92a36;
    --accent-soft: rgba(230, 57, 70, .12);
    --gold: #f5b223;

    /* Surfaces (light) */
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-2: #eef0f6;
    --text: #171a23;
    --muted: #5d6475;
    --border: #e4e7ef;
    --header-bg: rgba(246, 247, 251, .82);

    /* Dark constant areas (hero / footer / posters) */
    --dark-0: #0b0e14;
    --dark-1: #12161f;
    --dark-text: #eef1f6;
    --dark-muted: #97a0b4;

    /* Elevation */
    --shadow-sm: 0 2px 10px rgba(16, 20, 32, .06);
    --shadow-md: 0 12px 32px rgba(16, 20, 32, .10);
    --shadow-lg: 0 28px 64px rgba(16, 20, 32, .16);

    /* Shape & type */
    --radius: 18px;
    --radius-sm: 12px;
    --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-head: 'Montserrat', 'Segoe UI', sans-serif;
    --font-rtl: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
    --header-height: 76px;
    --toolbar-height: 62px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

html[data-theme="dark"] {
    --bg: #0b0e14;
    --surface: #12161f;
    --surface-2: #181f2b;
    --text: #eef1f6;
    --muted: #97a0b4;
    --border: #232b3a;
    --header-bg: rgba(11, 14, 20, .82);
    --accent: #ff5a5f;
    --accent-strong: #ff6b70;
    --accent-soft: rgba(255, 90, 95, .14);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .45);
    --shadow-lg: 0 28px 64px rgba(0, 0, 0, .55);
}

/* ---------- 2. BASE ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 14px);
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    transition: background-color .35s var(--ease), color .35s var(--ease);
}

html[data-theme="dark"] body {
    background: var(--bg);
    color: var(--text);
}

img {
    max-width: 100%;
    display: block;
}

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

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input {
    font-family: inherit;
}

.container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: clamp(64px, 9vw, 108px) 0;
}

.section--alt {
    background: var(--surface-2);
}

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(36px, 5vw, 56px);
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.section-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    line-height: 1.2;
    letter-spacing: -.02em;
}

.section-head-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--accent);
    transition: gap .25s var(--ease), color .25s var(--ease);
}

.section-head-action:hover {
    color: var(--accent-strong);
    gap: 12px;
}

html[dir="rtl"] .section-head-action i {
    transform: scaleX(-1);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease),
        background-color .25s var(--ease), border-color .25s var(--ease);
    will-change: transform;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    box-shadow: 0 12px 28px var(--accent-soft);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px var(--accent-soft);
}

.btn-ghost {
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(6px);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .6);
    transform: translateY(-2px);
}

/* Skip link */
.skip-link {
    position: fixed;
    top: -48px;
    left: 16px;
    z-index: 2000;
    background: var(--accent);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 10px 10px;
    font-weight: 600;
    transition: top .25s var(--ease);
}

.skip-link:focus {
    top: 0;
}

/* Focus visible */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- 3. HEADER ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}

.site-header.scrolled {
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
}

/* ============================================================
   HEADER MODES (admin-configurable)
   Modes: default | transparent | sticky | parallax | entrance
   All modes are direction-agnostic (vertical motion only) so they
   behave identically in LTR and RTL.
   ============================================================ */

/* Shared: the inner bar height is driven by --header-height so the
   sticky-shrink mode can animate it. */
.site-header .header-inner {
    transition: height .3s var(--ease);
}

/* ---------- 3a. TRANSPARENT MODE ---------- */
/* Sits over the hero with no background, then gains the DEFAULT header color
   once the page is scrolled past the configured threshold.
   NOTE: the header is taken out of flow in BOTH states (absolute before
   the threshold, fixed after) so switching states never shifts the page.

   IMPORTANT: these selectors are intentionally doubled up
   (.site-header.site-header--transparent) so they outrank the base
   `.site-header` rule above regardless of source order. A single-class
   selector would tie on specificity and the solid background could win. */
.site-header.site-header--transparent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    /* Fully colorless: no fill, no blur, no border, no shadow. The bar is
       invisible until the scroll threshold is passed. */
    background: transparent;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-bottom: 0;
    border-bottom-color: transparent;
    box-shadow: none;
    color: var(--header-transparent-text, #fff);
    transition: background-color .35s var(--ease), color .35s var(--ease),
                border-color .35s var(--ease), box-shadow .35s var(--ease);
}

/* --- Transparent state: text + controls ---
   While the bar floats over the hero it uses the configured light text color.
   The controls (language switcher, cart, theme toggle, menu) keep their pill
   shape but switch to a translucent white surface so they stay legible over
   any slide artwork. */
.site-header.site-header--transparent .brand,
.site-header.site-header--transparent .brand-mark,
.site-header.site-header--transparent .brand-name,
.site-header.site-header--transparent .brand-tag,
.site-header.site-header--transparent .nav-link,
.site-header.site-header--transparent .lang-btn,
.site-header.site-header--transparent .cart-btn-header,
.site-header.site-header--transparent .theme-toggle,
.site-header.site-header--transparent .menu-toggle {
    color: var(--header-transparent-text, #fff);
}

.site-header.site-header--transparent .nav-link:hover,
.site-header.site-header--transparent .nav-link:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: var(--header-transparent-text, #fff);
}

.site-header.site-header--transparent .lang-switcher {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}

/* The cart button and theme toggle carry their own solid surface from
   cart.css / styles.css, which would look like a bright blob over the hero.
   Give them the same translucent treatment as the language switcher. */
.site-header.site-header--transparent .cart-btn-header,
.site-header.site-header--transparent .theme-toggle {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}

.site-header.site-header--transparent .cart-btn-header:hover,
.site-header.site-header--transparent .theme-toggle:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .38);
}

/* The active language pill keeps the accent fill, but its inactive siblings
   must not fall back to the muted theme color (which is dark in light mode). */
.site-header.site-header--transparent .lang-btn:not(.active) {
    color: rgba(255, 255, 255, .82);
}

.site-header.site-header--transparent .lang-btn:not(.active):hover {
    color: #fff;
}

/* --- Solid state: the bar fades into the DEFAULT header color ---
   We reuse --header-bg (the same token the default header uses) so the
   scrolled look matches the rest of the site in both light and dark themes.
   The blur is kept subtle and the border/shadow mirror the default header. */
.site-header.site-header--transparent.is-solid {
    position: fixed;
    background: var(--header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--text);
}

/* Once solid, every control returns to its normal theme-aware styling so the
   theme toggle, language switcher and cart button react to light/dark mode
   exactly like they do in the default header. */
.site-header.site-header--transparent.is-solid .brand,
.site-header.site-header--transparent.is-solid .brand-mark,
.site-header.site-header--transparent.is-solid .brand-name,
.site-header.site-header--transparent.is-solid .brand-tag,
.site-header.site-header--transparent.is-solid .nav-link,
.site-header.site-header--transparent.is-solid .menu-toggle {
    color: var(--text);
}

.site-header.site-header--transparent.is-solid .nav-link:hover,
.site-header.site-header--transparent.is-solid .nav-link:focus-visible {
    background: var(--surface-2);
    color: var(--text);
}

.site-header.site-header--transparent.is-solid .lang-switcher {
    background: var(--surface-2);
    border-color: var(--border);
}

.site-header.site-header--transparent.is-solid .lang-btn {
    color: var(--muted);
}

.site-header.site-header--transparent.is-solid .lang-btn:hover {
    color: var(--text);
}

.site-header.site-header--transparent.is-solid .lang-btn.active {
    color: #fff;
}

.site-header.site-header--transparent.is-solid .cart-btn-header {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

.site-header.site-header--transparent.is-solid .theme-toggle {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--muted);
}

.site-header.site-header--transparent.is-solid .theme-toggle:hover {
    color: var(--accent);
}

/* The header is out of flow in transparent mode, so the hero must reach the
   very top of the page and slide UNDER the bar — the slider background and
   media stay flush with the viewport edge while the header floats on top.

   We therefore do NOT pad the hero itself (that would push the slider down and
   leave a visible gap above it). Instead we pad only the slide's inner content
   so the text never hides behind the header. */
body.has-transparent-header .hero {
    padding-top: 0;
}

/* Transparent mode gets a taller hero: the bar floats over the slide, so the
   artwork needs extra vertical room to stay balanced. The admin-configured
   height is used as a base and boosted, with a matching cap so very tall
   screens do not produce an oversized hero.

   `dvh` (dynamic viewport height) is used first so mobile browser chrome
   (address bar / bottom toolbar) never leaves a gap or clips the artwork;
   the `vh` value is kept as a fallback for older engines. */
body.has-transparent-header .hero,
body.has-transparent-header .hero-slider {
    min-height: min(calc(var(--hero-h, 72vh) + 12vh), calc(var(--hero-h-max, 680px) + 120px));
    min-height: min(calc(var(--hero-h, 72dvh) + 12dvh), calc(var(--hero-h-max, 680px) + 120px));
}

/* Keep the slide copy clear of the floating header. The slide is a flex
   container that centers its content, so we add the header height to the
   inner wrapper's top padding instead of shifting the whole slider. */
body.has-transparent-header .hero .slide-inner {
    padding-top: calc(var(--header-height) + 24px);
}

/* NOTE: transparent mode is a HOMEPAGE-ONLY effect (see includes/header.php).
   On every other page the header falls back to the default solid header, so
   no inner-page clearance rules are needed here — the normal document flow
   already places the content below the sticky bar.

   The rules above only ever apply on the home page, where the full-bleed
   .hero slider sits under the floating bar. */

/* Pages without a hero: fall back to the solid sticky look. */
.site-header.site-header--transparent.header-no-hero {
    position: sticky;
    background: var(--header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--border);
    color: var(--text);
}

.site-header.site-header--transparent.header-no-hero .brand,
.site-header.site-header--transparent.header-no-hero .brand-mark,
.site-header.site-header--transparent.header-no-hero .brand-name,
.site-header.site-header--transparent.header-no-hero .brand-tag,
.site-header.site-header--transparent.header-no-hero .nav-link,
.site-header.site-header--transparent.header-no-hero .lang-btn,
.site-header.site-header--transparent.header-no-hero .cart-btn-header,
.site-header.site-header--transparent.header-no-hero .theme-toggle,
.site-header.site-header--transparent.header-no-hero .menu-toggle {
    color: var(--text);
}

.site-header.site-header--transparent.header-no-hero .lang-switcher {
    background: var(--surface-2);
    border-color: var(--border);
}

/* ---------- 3b. STICKY MODE ---------- */
/* Fixed at the top with a configurable offset and optional shrink. */
.site-header--sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-sticky-offset, 0px);
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
}

body.has-sticky-header {
    padding-top: calc(var(--header-height) + var(--header-sticky-offset, 0px));
}

.site-header--sticky.is-shrunk .header-inner {
    height: var(--header-sticky-shrink-height, 60px);
}

.site-header--sticky.is-shrunk .brand-tag {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .25s var(--ease), max-height .25s var(--ease);
}

/* ---------- 3c. PARALLAX MODE ---------- */
/* The header drifts and optionally fades as the page scrolls.
   JS writes --header-parallax-y / --header-parallax-opacity. */
.site-header--parallax {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    border-bottom-color: var(--border);
    transform: translate3d(0, var(--header-parallax-y, 0px), 0);
    opacity: var(--header-parallax-opacity, 1);
    will-change: transform, opacity;
}

body.has-parallax-header {
    padding-top: var(--header-height);
}

/* ---------- 3d. ENTRANCE MODE ---------- */
/* The header is pre-hidden by PHP (header-entrance-pending) and revealed
   by JS once the entrance animation is ready to run. */
.site-header--entrance {
    position: sticky;
    top: 0;
}

.site-header.header-entrance-pending {
    opacity: 0;
}

/* Whole-bar entrance models */
.site-header--entrance.header-entrance-run[data-entrance-model="fade-down"] {
    animation: xs-header-fade-down var(--header-entrance-duration, 600ms) var(--ease) var(--header-entrance-delay, 0ms) both;
}

.site-header--entrance.header-entrance-run[data-entrance-model="slide-down"] {
    animation: xs-header-slide-down var(--header-entrance-duration, 600ms) var(--ease) var(--header-entrance-delay, 0ms) both;
}

.site-header--entrance.header-entrance-run[data-entrance-model="zoom-in"] {
    animation: xs-header-zoom-in var(--header-entrance-duration, 600ms) var(--ease) var(--header-entrance-delay, 0ms) both;
}

.site-header--entrance.header-entrance-run[data-entrance-model="blur-in"] {
    animation: xs-header-blur-in var(--header-entrance-duration, 600ms) var(--ease) var(--header-entrance-delay, 0ms) both;
}

/* Per-group stagger model: each group animates in sequence. */
.site-header--entrance.header-entrance-run[data-entrance-model="stagger-groups"] {
    animation: xs-header-fade-down var(--header-entrance-duration, 600ms) var(--ease) var(--header-entrance-delay, 0ms) both;
}

.site-header--entrance.header-entrance-run[data-entrance-model="stagger-groups"] [data-header-group] {
    animation: xs-header-group-in var(--header-entrance-duration, 600ms) var(--ease) both;
}

.site-header--entrance.header-entrance-run[data-entrance-model="stagger-groups"] [data-header-group="brand"] {
    animation-delay: calc(var(--header-entrance-delay, 0ms) + var(--header-entrance-stagger, 120ms) * 0);
}

.site-header--entrance.header-entrance-run[data-entrance-model="stagger-groups"] [data-header-group="nav"] {
    animation-delay: calc(var(--header-entrance-delay, 0ms) + var(--header-entrance-stagger, 120ms) * 1);
}

.site-header--entrance.header-entrance-run[data-entrance-model="stagger-groups"] [data-header-group="actions"] {
    animation-delay: calc(var(--header-entrance-delay, 0ms) + var(--header-entrance-stagger, 120ms) * 2);
}

/* Entrance keyframes */
@keyframes xs-header-fade-down {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes xs-header-slide-down {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes xs-header-zoom-in {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes xs-header-blur-in {
    from { opacity: 0; filter: blur(12px); }
    to   { opacity: 1; filter: blur(0); }
}

@keyframes xs-header-group-in {
    from { opacity: 0; transform: translate3d(0, -14px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Reduced motion: neutralize every header mode animation. */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header .header-inner,
    .site-header--transparent,
    .site-header--parallax {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .site-header.header-entrance-pending {
        opacity: 1 !important;
    }

    .site-header--entrance.header-entrance-run [data-header-group] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: var(--header-height);
}

/* Brand */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--text);
}

.brand-mark {
    display: inline-flex;
    color: var(--text);
    transition: transform .4s var(--ease);
}

.brand:hover .brand-mark {
    transform: rotate(90deg);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.28rem;
    letter-spacing: -.01em;
}

.brand-tag {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Nav */
.main-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-link {
    position: relative;
    padding: 10px 14px;
    font-size: .95rem;
    font-weight: 500;
    color: var(--muted);
    border-radius: 10px;
    transition: color .25s var(--ease), background-color .25s var(--ease);
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--text);
    background: var(--surface-2);
}

.nav-link:hover::after {
    transform: scaleX(1);
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Language switcher */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px;
}

.lang-btn {
    min-width: 38px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--muted);
    transition: background-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}

.lang-btn:hover {
    color: var(--text);
}

.lang-btn.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    box-shadow: 0 4px 14px var(--accent-soft);
}

/* Theme toggle */
.theme-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.theme-toggle:hover {
    color: var(--accent);
    transform: rotate(20deg);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    display: inline-flex;
}

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

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

/* Menu toggle (mobile) */
.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.15rem;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    align-items: center;
    justify-content: center;
}

/* Drawer (mobile menu) */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(5, 7, 12, .55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.drawer-backdrop.open {
    opacity: 1;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    width: min(340px, 86vw);
    background: var(--surface);
    border-left: 1px solid var(--border);
    padding: 96px 26px 32px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    transform: translateX(105%);
    transition: transform .38s var(--ease);
    box-shadow: var(--shadow-lg);
}

.mobile-drawer.open {
    transform: translateX(0);
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.drawer-link {
    padding: 14px 16px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--text);
    border-radius: 12px;
    transition: background-color .25s var(--ease), color .25s var(--ease);
}

.drawer-link:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.drawer-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* ---------- 4. HERO ---------- */
.hero {
    position: relative;
    /* Height is admin-configurable (Settings → Slider). Falls back to a
       balanced 72vh / 680px when the variables are not injected. */
    min-height: min(var(--hero-h, 72vh), var(--hero-h-max, 680px));
    display: flex;
    align-items: center;
    background: var(--dark-0);
    color: #fff;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}

/* Radar visual */
.hero-radar {
    position: absolute;
    width: min(74vmin, 620px);
    aspect-ratio: 1;
    right: 7%;
    top: 50%;
    transform: translateY(-50%);
    opacity: .9;
    pointer-events: none;
}

.radar-cross::before,
.radar-cross::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, .06);
}

.radar-cross::before {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
}

.radar-cross::after {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
}

.radar-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
}

.radar-ring.ring-2 {
    inset: 17%;
}

.radar-ring.ring-3 {
    inset: 34%;
}

.radar-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(230, 57, 70, 0) 0deg,
        rgba(230, 57, 70, .55) 38deg,
        rgba(230, 57, 70, 0) 76deg);
    animation: radar-spin 4.6s linear infinite;
}

.radar-core {
    position: absolute;
    inset: 47%;
    border-radius: 50%;
    background: var(--dark-0);
    border: 1px solid rgba(255, 255, 255, .12);
    z-index: 2;
}

.radar-blip {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-soft);
    animation: blip 2.8s var(--ease) infinite;
    z-index: 3;
}

.radar-blip.b1 {
    top: 21%;
    left: 61%;
    animation-delay: .2s;
}

.radar-blip.b2 {
    top: 68%;
    left: 33%;
    animation-delay: 1.1s;
}

.radar-blip.b3 {
    top: 44%;
    left: 74%;
    animation-delay: 1.9s;
}

@keyframes radar-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes blip {
    0% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, .55);
        opacity: 1;
    }
    70% {
        box-shadow: 0 0 0 22px rgba(230, 57, 70, 0);
        opacity: .4;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
        opacity: 1;
    }
}

/* Slider */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: min(var(--hero-h, 72vh), var(--hero-h-max, 680px));
}

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: var(--slide-grad, linear-gradient(135deg, #0b0e14, #131a2b));
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s var(--ease), visibility .9s var(--ease);
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 14, 20, .30), transparent 42%, rgba(11, 14, 20, .62));
    pointer-events: none;
}

/* Slide media (image / GIF / video) */
.slide-media,
.slide-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.slide-video {
    background: #000;
}

/* Promotional overlay layer (foreground image independent of background media) */
.slide-overlay {
    position: absolute;
    z-index: 1;
    display: block;
    line-height: 0;
    will-change: transform, opacity;
}
.slide-overlay img.slide-overlay-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    pointer-events: none;
}
/* Position presets */
.slide-overlay--left {
    left: clamp(16px, 6vw, 90px);
    top: 50%;
    transform: translateY(-50%);
}
.slide-overlay--right {
    right: clamp(16px, 6vw, 90px);
    top: 50%;
    transform: translateY(-50%);
}
.slide-overlay--center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.slide-overlay--custom {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Default width when not custom-sized */
.slide-overlay:not([style*="width"]) {
    width: clamp(160px, 30vw, 420px);
}
/* Appear animations (applied when the slide becomes active) */
.slide-overlay {
    opacity: 0;
    transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
.slide.active .slide-overlay.ov-appear-fade-in {
    opacity: 1;
}
.slide.active .slide-overlay.ov-appear-slide-left {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.slide.active .slide-overlay.ov-appear-slide-right {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.slide.active .slide-overlay.ov-appear-zoom-in {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
.slide.active .slide-overlay.ov-appear-fade-zoom {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
/* Initial states for appear animations */
.slide .slide-overlay.ov-appear-slide-left {
    transform: translateY(-50%) translateX(-80px);
}
.slide .slide-overlay.ov-appear-slide-right {
    transform: translateY(-50%) translateX(80px);
}
.slide .slide-overlay.ov-appear-zoom-in {
    transform: translateY(-50%) scale(.6);
}
.slide .slide-overlay.ov-appear-fade-zoom {
    transform: translateY(-50%) scale(.8);
}
/* Center/custom overlays: appear animations must not fight the centering transform */
.slide-overlay--center.ov-appear-slide-left,
.slide-overlay--custom.ov-appear-slide-left {
    transform: translate(-50%, -50%) translateX(-80px);
}
.slide-overlay--center.ov-appear-slide-right,
.slide-overlay--custom.ov-appear-slide-right {
    transform: translate(-50%, -50%) translateX(80px);
}
.slide-overlay--center.ov-appear-zoom-in,
.slide-overlay--custom.ov-appear-zoom-in {
    transform: translate(-50%, -50%) scale(.6);
}
.slide-overlay--center.ov-appear-fade-zoom,
.slide-overlay--custom.ov-appear-fade-zoom {
    transform: translate(-50%, -50%) scale(.8);
}
.slide.active .slide-overlay--center.ov-appear-slide-left,
.slide.active .slide-overlay--center.ov-appear-slide-right,
.slide.active .slide-overlay--center.ov-appear-zoom-in,
.slide.active .slide-overlay--center.ov-appear-fade-zoom,
.slide.active .slide-overlay--custom.ov-appear-slide-left,
.slide.active .slide-overlay--custom.ov-appear-slide-right,
.slide.active .slide-overlay--custom.ov-appear-zoom-in,
.slide.active .slide-overlay--custom.ov-appear-fade-zoom {
    transform: translate(-50%, -50%);
}
/* Hover animations */
.slide-overlay.ov-hover-zoom:hover img { transform: scale(1.08); }
.slide-overlay.ov-hover-rotate:hover img { transform: rotate(4deg) scale(1.04); }
.slide-overlay.ov-hover-glow:hover img { filter: drop-shadow(0 0 22px rgba(230,57,70,.55)); }
.slide-overlay.ov-hover-fade:hover img { opacity: .75; }
.slide-overlay.ov-hover-slide-up:hover img { transform: translateY(-10px); }
.slide-overlay.ov-hover-zoom-rotate:hover img { transform: scale(1.1) rotate(-3deg); }
.slide-overlay img {
    transition: transform .45s var(--ease), translate .25s ease-out, filter .45s var(--ease), opacity .45s var(--ease);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .slide-overlay { transition: none; }
    .slide-overlay img { transition: none; }
}

/* RTL: mirror the overlay so a "left" placement sits on the logical start
   (right side) for right-to-left languages, and vice-versa. */
[dir="rtl"] .slide-overlay--left {
    left: auto;
    right: clamp(16px, 6vw, 90px);
}
[dir="rtl"] .slide-overlay--right {
    right: auto;
    left: clamp(16px, 6vw, 90px);
}
/* Flip the horizontal appear-slide direction in RTL */
[dir="rtl"] .slide .slide-overlay.ov-appear-slide-left {
    transform: translateY(-50%) translateX(80px);
}
[dir="rtl"] .slide .slide-overlay.ov-appear-slide-right {
    transform: translateY(-50%) translateX(-80px);
}
[dir="rtl"] .slide-overlay--center.ov-appear-slide-left,
[dir="rtl"] .slide-overlay--custom.ov-appear-slide-left {
    transform: translate(-50%, -50%) translateX(80px);
}
[dir="rtl"] .slide-overlay--center.ov-appear-slide-right,
[dir="rtl"] .slide-overlay--custom.ov-appear-slide-right {
    transform: translate(-50%, -50%) translateX(-80px);
}

.slide-inner {
    position: relative;
    z-index: 2;
    padding-top: 20px;
    padding-bottom: 60px;
}

.slide-content {
    max-width: 700px;
}

.slide-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(8px);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffd7d9;
    margin-bottom: 22px;
}

.slide-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(2.1rem, 5.6vw, 4.1rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin-bottom: 18px;
    text-wrap: balance;
}

.slide-sub {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: #c9d0dd;
    max-width: 560px;
    margin-bottom: 32px;
}

.slide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Hero controls */
.hero-controls {
    position: absolute;
    inset: auto 0 26px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.slider-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s var(--ease), transform .25s var(--ease);
}

.slider-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.08);
}

.slider-dots {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    transition: background-color .3s var(--ease), transform .3s var(--ease), width .3s var(--ease);
}

.dot.active {
    width: 28px;
    border-radius: 999px;
    background: var(--accent);
}

/* ---------- 5. BANNERS ---------- */
.banner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.banner-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.banner-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.banner-media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.banner-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.banner-card:hover .banner-media img {
    transform: scale(1.07);
}

.banner-content {
    padding: 22px 20px 24px;
    text-align: center;
}

.banner-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.06rem;
    margin-bottom: 14px;
}

.banner-cta {
    display: inline-block;
    padding: 9px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: 0 8px 20px var(--accent-soft);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.banner-cta:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 26px var(--accent-soft);
}

/* ---------- 6. VIDEOS ---------- */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.video-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.video-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.video-poster {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--poster-grad, linear-gradient(150deg, #151a2c, #0b0e17));
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-poster::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .18);
}

.video-play {
    position: relative;
    z-index: 2;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .4);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s var(--ease), background-color .3s var(--ease);
}

.video-play i {
    margin-left: 4px;
}

.video-card:hover .video-play {
    transform: scale(1.12);
    background: var(--accent);
    border-color: var(--accent);
}

.video-chip {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(11, 14, 20, .55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.video-body {
    padding: 18px 20px 20px;
}

.video-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.02rem;
}

/* Video lightbox (opened by .video-play[data-video-url]) */
.video-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(5, 7, 12, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.video-lightbox[hidden] {
    display: none !important;
}

.video-lightbox-frame {
    position: relative;
    width: min(92vw, 960px);
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-lg);
}

.video-lightbox-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s var(--ease), transform .25s var(--ease);
}

.video-lightbox-close:hover {
    background: var(--accent);
    transform: rotate(90deg);
}

/* ---------- 7. COMPARISON ---------- */
.compare-box {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.compare-layer {
    position: absolute;
    inset: 0;
}

/* Uploaded before/after comparison images fill their layer. When no image is
   set the layer keeps its gradient fallback (no <img> is rendered). */
.compare-layer .compare-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.compare-before {
    background:
        radial-gradient(1100px 500px at 18% 8%, rgba(255, 255, 255, .05), transparent 62%),
        repeating-linear-gradient(35deg, rgba(255, 255, 255, .02) 0 10px, transparent 10px 22px),
        linear-gradient(160deg, #171c27, #0c1017);
}

.compare-after {
    background:
        radial-gradient(150px 150px at 30% 62%, rgba(255, 90, 95, .5), transparent 72%),
        radial-gradient(120px 120px at 66% 34%, rgba(56, 189, 248, .42), transparent 72%),
        radial-gradient(150px 150px at 76% 70%, rgba(245, 178, 35, .36), transparent 72%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px),
        linear-gradient(160deg, #0e1a2b, #071019);
    clip-path: inset(0 0 0 var(--pos, 50%));
}

.compare-after::after {
    content: '';
    position: absolute;
    left: 30%;
    top: 62%;
    width: 74px;
    height: 74px;
    border: 2px solid rgba(255, 90, 95, .75);
    border-radius: 50%;
    box-shadow: 0 0 34px rgba(255, 90, 95, .55), inset 0 0 20px rgba(255, 90, 95, .25);
    transform: translate(-50%, -50%);
    animation: crosshair 2.6s ease-in-out infinite;
}

@keyframes crosshair {
    0%, 100% {
        opacity: .75;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 46px rgba(255, 90, 95, .7), inset 0 0 26px rgba(255, 90, 95, .35);
    }
}

.compare-chip {
    position: absolute;
    z-index: 6; /* keep labels above the divider handle (z-index: 5) */
    /* Labels are direct children of .compare-box so they are never clipped by
       the .compare-after clip-path and always overlay their respective image. */
    pointer-events: none; /* never block the drag handle's pointer area */
    white-space: nowrap;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(11, 14, 20, .62);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.compare-chip--top {
    top: 16px;
    left: 16px;
}

.compare-chip--top.compare-chip--alt {
    left: auto;
    right: 16px;
}

.compare-chip--sub {
    top: 52px;
    left: 16px;
    font-weight: 400;
    opacity: .85;
    font-size: .72rem;
}

.compare-chip--sub.compare-chip--alt {
    left: auto;
    right: 16px;
}

.compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos, 50%);
    width: 3px;
    background: #fff;
    transform: translateX(-50%);
    z-index: 5;
    cursor: ew-resize;
}

.compare-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

.compare-hint {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(11, 14, 20, .6);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .85);
    font-size: .76rem;
    letter-spacing: .04em;
    white-space: nowrap;
    pointer-events: none;
}

/* ---------- 8. PRODUCTS CAROUSEL ---------- */
.carousel {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel-track {
    display: flex;
    gap: 22px;
}

.carousel-track > * {
    scroll-snap-align: start;
    flex: 0 0 calc(25% - 16.5px);
    min-width: 0;
}

.product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.product-media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.product-card:hover .product-media img {
    transform: scale(1.06);
}

.product-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.product-cat {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

.product-name {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

.product-rating {
    color: var(--gold);
    font-size: .92rem;
    letter-spacing: 2px;
}

.product-stock {
    font-size: .82rem;
    font-weight: 600;
    color: #16a34a;
}

html[data-theme="dark"] .product-stock {
    color: #4ade80;
}

.product-price {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.25rem;
    margin-top: 2px;
}

.product-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 11px 18px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    font-size: .9rem;
    transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.product-cta:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    transform: translateY(-2px);
}

.carousel-controls {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.ctrl-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}

.ctrl-btn:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
}

/* ---------- 9. REVIEWS ---------- */
#reviewCarousel .carousel-track > * {
    flex-basis: calc(33.333% - 14.67px);
}

.review-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 26px 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.review-quote {
    color: var(--accent);
    opacity: .5;
    font-size: 1.4rem;
}

.review-stars {
    color: var(--gold);
    letter-spacing: 2px;
    font-size: .95rem;
}

.review-text {
    font-size: .95rem;
    color: var(--muted);
    line-height: 1.7;
    flex: 1;
}

.review-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.review-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .95rem;
}

/* ---------- 10. NEWSLETTER ---------- */
.newsletter-wrap {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 60px);
    border-radius: 24px;
    background:
        radial-gradient(700px 300px at 15% 0%, rgba(230, 57, 70, .28), transparent 62%),
        radial-gradient(700px 320px at 88% 100%, rgba(37, 99, 235, .3), transparent 62%),
        linear-gradient(135deg, #10141f, #141b30);
    color: #fff;
    box-shadow: var(--shadow-lg);
}

.newsletter-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(1.35rem, 2.8vw, 1.9rem);
    margin-bottom: 26px;
    text-wrap: balance;
}

.newsletter-form {
    display: flex;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
}

.newsletter-input {
    flex: 1;
    min-width: 0;
    padding: 15px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: .95rem;
    transition: border-color .25s var(--ease), background-color .25s var(--ease);
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, .55);
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, .12);
}

/* ---------- 11. FEATURES ---------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* Card — same language as .banner-card / .why-box for visual consistency */
.feature-item {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 34px 26px 30px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease),
                border-color .45s var(--ease);
}

/* Hover lift is driven by the 3D tilt JS; keep the shadow/border change here */
.feature-item:hover {
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* Mouse-following spotlight (driven by --xs-mx / --xs-my from the tilt JS) */
.feature-item.xs-tilt::after {
    background: radial-gradient(
        320px circle at var(--xs-mx, 50%) var(--xs-my, 50%),
        rgba(255, 255, 255, .16),
        rgba(255, 255, 255, .05) 32%,
        transparent 58%
    );
}

/* ---- Icon tile ---- */
.feature-icon {
    position: relative;
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    animation: featureFloat 6s ease-in-out infinite;
    transition: transform .45s var(--ease), background-color .45s var(--ease),
                color .45s var(--ease), box-shadow .45s var(--ease);
}

/* Gentle floating motion, staggered per card for a living, premium feel */
.feature-item:nth-child(1) .feature-icon { animation-delay: 0s; }
.feature-item:nth-child(2) .feature-icon { animation-delay: .6s; }
.feature-item:nth-child(3) .feature-icon { animation-delay: 1.2s; }
.feature-item:nth-child(4) .feature-icon { animation-delay: 1.8s; }

@keyframes featureFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Soft accent glow that breathes behind the icon */
.feature-icon::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--accent) 38%, transparent) 0%,
        color-mix(in srgb, var(--accent) 14%, transparent) 45%,
        transparent 72%);
    filter: blur(14px);
    opacity: .35;
    transform: scale(.9);
    pointer-events: none;
    animation: featureGlow 6s ease-in-out infinite;
    transition: opacity .45s var(--ease), transform .45s var(--ease);
    z-index: -1;
}

.feature-item:nth-child(1) .feature-icon::before { animation-delay: 0s; }
.feature-item:nth-child(2) .feature-icon::before { animation-delay: .6s; }
.feature-item:nth-child(3) .feature-icon::before { animation-delay: 1.2s; }
.feature-item:nth-child(4) .feature-icon::before { animation-delay: 1.8s; }

@keyframes featureGlow {
    0%, 100% { opacity: .30; transform: scale(.9); }
    50%      { opacity: .60; transform: scale(1.05); }
}

/* A thin rotating accent ring that appears on hover */
.feature-icon::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 24px;
    padding: 1.5px;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        var(--accent) 90deg,
        transparent 180deg,
        var(--accent) 270deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s var(--ease);
    z-index: 2;
}

.feature-item:hover .feature-icon {
    animation: none;
    transform: translateY(-4px) scale(1.06);
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    box-shadow: 0 14px 30px var(--accent-soft);
}

.feature-item:hover .feature-icon::before {
    animation: none;
    opacity: 1;
    transform: scale(1.1);
}

.feature-item:hover .feature-icon::after {
    opacity: 1;
    animation: featureRing 2.4s linear infinite;
}

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

/* ---- Icon image (uploaded artwork replaces the FontAwesome glyph) ----
   The uploaded artwork is pre-processed server-side into a clean white
   transparent glyph (see glyph_white_url()), so no CSS filter is needed
   here. Applying filters in CSS produced aliased / low-quality edges. */
.feature-icon-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    padding: 12px;
    background: transparent;
    box-shadow: none;
    filter: none;
    transition: transform .45s var(--ease), filter .45s var(--ease);
}

.feature-item:hover .feature-icon-img {
    transform: scale(1.08) rotate(-3deg);
}

/* ---- Text ---- */
.feature-title {
    position: relative;
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.08rem;
    margin-bottom: 10px;
    transition: color .35s var(--ease);
}

/* Accent underline that grows from the center on hover */
.feature-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    transform: translateX(-50%);
    transition: width .4s var(--ease);
}

.feature-item:hover .feature-title {
    color: var(--accent);
}

.feature-item:hover .feature-title::after {
    width: 100%;
}

.feature-desc {
    font-size: .92rem;
    color: var(--muted);
    line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
    .feature-icon,
    .feature-icon::before,
    .feature-icon::after { animation: none; }
    .feature-icon { transform: none; }
}

/* ---------- 12. FOOTER ---------- */
.site-footer {
    background: var(--dark-0);
    color: var(--dark-text);
    padding: clamp(56px, 7vw, 80px) 0 28px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 44px;
    margin-bottom: 44px;
}

.brand--footer {
    color: #fff;
    margin-bottom: 18px;
}

.brand--footer .brand-tag {
    color: var(--accent);
}

.footer-tagline {
    color: var(--dark-muted);
    font-size: .95rem;
    line-height: 1.7;
    max-width: 300px;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.social-link {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background-color .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}

.social-link:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-3px);
}

.footer-col h4 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.02rem;
    color: #fff;
    margin-bottom: 18px;
}

.footer-links li,
.footer-contact li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--dark-muted);
    font-size: .92rem;
    transition: color .25s var(--ease), padding-left .25s var(--ease);
}

.footer-links a:hover {
    color: #fff;
    padding-left: 5px;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.contact-label {
    display: inline-block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .45);
    margin-bottom: 2px;
}

.footer-contact a {
    color: var(--dark-text);
    font-size: .92rem;
    transition: color .25s var(--ease);
}

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

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding-top: 24px;
}

.copyright {
    color: var(--dark-muted);
    font-size: .88rem;
}

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

/* Footer theme toggle (light knob on dark footer) */
.theme-toggle--footer {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}

/* ---------- 13. TOOLBAR / TOAST / BACK-TO-TOP ---------- */
/* The toolbar IS the grid — buttons are direct children (no wrapper div).
   Fixes the broken mobile nav layout (was targeting .container that doesn't exist).
   display:grid is applied only inside the <=768px media query below. */
.bottom-toolbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 800;
    min-height: var(--toolbar-height);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(16, 20, 32, .08);
    /* iOS home-indicator safe area */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tb-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 56px;
    padding: 8px 4px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--muted);
    transition: color .25s var(--ease), background-color .25s var(--ease);
    -webkit-tap-highlight-color: transparent;
}

/* Active-section indicator (scrollspy) */
.tb-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s var(--ease);
}

.tb-btn i {
    font-size: 1.15rem;
    line-height: 1;
}

.tb-btn span {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-btn:hover,
.tb-btn:focus-visible,
.tb-btn.active {
    color: var(--accent);
    background: var(--accent-soft);
}

.tb-btn.active::before {
    transform: scaleX(1);
}

/* Theme toggle inside the bottom toolbar keeps the toolbar item look */
.bottom-toolbar .theme-toggle {
    width: auto;
    height: auto;
    min-height: 56px;
    border-radius: 0;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 1.15rem;
}

.bottom-toolbar .theme-toggle:hover {
    color: var(--accent);
    background: var(--accent-soft);
    transform: none;
}

.toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translate(-50%, 24px);
    z-index: 1100;
    max-width: min(92vw, 480px);
    padding: 14px 24px;
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 4px solid #16a34a;
    box-shadow: var(--shadow-lg);
    font-size: .92rem;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}

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

.toast.error {
    border-left-color: var(--accent);
}

.back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 850;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 10px 26px var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-3px);
}

/* ---------- Live chat widget ----------
   The launcher bubble, panel and all chat styling now live in
   assets/css/chat-widget.css. Only the shared floating-button rail
   positioning is kept in responsive.css. */

/* Respect the hidden attribute even when components use flex/grid */
.mobile-drawer[hidden],
.drawer-backdrop[hidden],
.toast[hidden] {
    display: none !important;
}

/* ---------- 14. REVEAL ANIMATIONS ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

[data-reveal].revealed {
    opacity: 1;
    transform: none;
}

/* ---------- 15. RTL OVERRIDES ---------- */
html[dir="rtl"] body {
    font-family: var(--font-rtl), var(--font-body);
}

html[dir="rtl"] .brand-tag,
html[dir="rtl"] .section-kicker,
html[dir="rtl"] .slide-kicker,
html[dir="rtl"] .product-cat,
html[dir="rtl"] .video-chip,
html[dir="rtl"] .compare-chip {
    letter-spacing: 0;
}

html[dir="rtl"] .hero-radar {
    right: auto;
    left: 7%;
}

/* Mirror chevrons in RTL */
html[dir="rtl"] .slider-arrow i,
html[dir="rtl"] .ctrl-btn i {
    transform: scaleX(-1);
}

html[dir="rtl"] .mobile-drawer {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid var(--border);
    transform: translateX(-105%);
}

html[dir="rtl"] .mobile-drawer.open {
    transform: translateX(0);
}

html[dir="rtl"] .toast {
    text-align: right;
}

html[dir="rtl"] .footer-contact li {
    text-align: right;
}

/* ---------- 16. RESPONSIVE ---------- */
@media (max-width: 1200px) {
    .banner-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .carousel-track > * {
        flex-basis: calc(33.333% - 14.67px);
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #reviewCarousel .carousel-track > * {
        flex-basis: calc(50% - 11px);
    }

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

@media (max-width: 992px) {
    .main-nav {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .video-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin: 0 auto;
    }

    .hero-radar {
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: .55;
        width: min(92vmin, 560px);
    }

    html[dir="rtl"] .hero-radar {
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }

    .slide-content {
        text-align: center;
        margin: 0 auto;
    }

    .slide-actions {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 64px;
    }

    body {
        padding-bottom: calc(var(--toolbar-height) + env(safe-area-inset-bottom, 0px));
    }

    .bottom-toolbar {
        display: grid;
    }

    .site-header .header-actions .lang-switcher {
        display: none;
    }

    .banner-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .carousel-track > * {
        flex-basis: calc(50% - 11px);
    }

    #reviewCarousel .carousel-track > * {
        flex-basis: calc(100% - 0px);
    }

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

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-input,
    .newsletter-form .btn {
        width: 100%;
    }

    .back-to-top {
        bottom: calc(var(--toolbar-height) + 16px);
        right: 16px;
        width: 44px;
        height: 44px;
    }

    .toast {
        bottom: calc(var(--toolbar-height) + 14px);
    }

    .hero-controls {
        bottom: 18px;
        gap: 14px;
    }

    /* NOTE: the mobile hero-slider layout (flow-based copy + overlay stacking)
       lives in responsive.css §19, which loads after this file and therefore
       owns all small-screen slider positioning. Keeping those rules in one
       place avoids the two stylesheets fighting over the overlay transform. */

    .compare-hint {
        display: none;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 18px;
    }

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

    .carousel-track > * {
        flex-basis: calc(100% - 0px);
    }

    .brand-tag {
        display: none;
    }

    .slider-arrow {
        width: 42px;
        height: 42px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001s !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .radar-sweep,
    .radar-blip,
    .compare-after::after {
        animation: none;
    }
}

/* ---------- 17. PWA INSTALL BUTTON ---------- */
/* Desktop: a compact circular FAB that expands into a labelled pill on hover
   or keyboard focus. This keeps it out of the way of page content while still
   being discoverable.

   RAIL POSITIONING: the three floating buttons (back-to-top, chat bubble,
   install FAB) share one right-edge rail. Their exact `bottom` offsets are
   owned by assets/css/responsive.css, which loads after this file and stacks
   them with a fixed gap. The value below is only the fallback for the narrow
   window between the mobile and desktop breakpoints. */
.pwa-install-btn {
    position: fixed;
    right: 28px;
    /* Third slot on the rail: clears the chat bubble (bottom: 90px, 58px tall). */
    bottom: 162px;
    z-index: 860;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--accent, #e63946);
    color: #fff;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(230, 57, 70, .38);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.96);
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease),
                box-shadow .2s ease, width .3s var(--ease),
                padding .3s var(--ease), visibility .3s;
}

.pwa-install-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* The label is collapsed to zero width until the button is hovered/focused. */
.pwa-install-btn span {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .3s var(--ease), opacity .25s var(--ease),
                margin-left .3s var(--ease);
}

.pwa-install-btn:hover,
.pwa-install-btn:focus-visible {
    width: auto;
    padding: 0 20px;
    gap: 8px;
    box-shadow: 0 16px 38px rgba(230, 57, 70, .5);
}

.pwa-install-btn:hover span,
.pwa-install-btn:focus-visible span {
    max-width: 140px;
    opacity: 1;
    margin-left: 8px;
}

.pwa-install-btn i {
    font-size: 1rem;
    flex: 0 0 auto;
}

/* While the user is actively scrolling the button fades out so it never sits
   on top of content the user is reading. It returns as soon as scrolling
   stops. */
.pwa-install-btn.is-scrolling {
    opacity: 0;
    transform: translateY(16px) scale(.96);
    pointer-events: none;
}

html[dir="rtl"] .pwa-install-btn {
    right: auto;
    left: 28px;
}

/* RTL: the label grows to the left, so the margin flips. */
html[dir="rtl"] .pwa-install-btn:hover span,
html[dir="rtl"] .pwa-install-btn:focus-visible span {
    margin-left: 0;
    margin-right: 8px;
}

@media (max-width: 640px) {
    /* NOTE: `bottom` is intentionally NOT set here. The mobile rail offsets
       (back-to-top / chat bubble / install FAB) are owned by responsive.css,
       which loads after this file. Setting a value here previously collided
       with the chat bubble. */
    .pwa-install-btn {
        right: 14px;
        width: 46px;
        height: 46px;
    }

    /* Touch devices have no hover, so the label stays hidden and the button
       remains a clean circular FAB. */
    .pwa-install-btn:hover,
    .pwa-install-btn:focus-visible {
        width: 46px;
        padding: 0;
        gap: 0;
    }

    .pwa-install-btn:hover span,
    .pwa-install-btn:focus-visible span {
        max-width: 0;
        opacity: 0;
        margin-left: 0;
    }

    html[dir="rtl"] .pwa-install-btn {
        left: 14px;
    }
}

/* Reduced motion: no scale/slide transitions, just a simple fade. */
@media (prefers-reduced-motion: reduce) {
    .pwa-install-btn,
    .pwa-install-btn span {
        transition: opacity .2s ease, visibility .2s ease;
        transform: none !important;
    }
}