@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --bg: #05090d;
    --bg-2: #08111a;
    --bg-3: #0b1620;
    --surface: rgba(255,255,255,0.045);
    --surface-strong: rgba(255,255,255,0.07);
    --surface-blue: rgba(56,189,248,0.08);

    --cyan: #38bdf8;
    --cyan-bright: #67d5ff;
    --cyan-soft: #a5e8ff;
    --blue: #0ea5e9;
    --blue-deep: #075985;

    --white: #f7fbff;
    --text: #e9f4fa;
    --muted: #8fa5b4;
    --muted-2: #637684;

    --border: rgba(255,255,255,0.09);
    --border-blue: rgba(56,189,248,0.22);

    --success: #2dd4bf;

    --container: 1240px;

    --shadow-sm: 0 12px 35px rgba(0,0,0,0.22);
    --shadow-lg: 0 35px 90px rgba(0,0,0,0.42);
    --shadow-blue: 0 18px 55px rgba(14,165,233,0.18);

    --radius-sm: 12px;
    --radius: 22px;
    --radius-lg: 32px;

    --ease: cubic-bezier(.2,.8,.2,1);
}

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

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

/* =========================================================
   GLOBAL ACCESSIBILITY & FOCUS ENHANCEMENTS (WCAG 2.1 AA)
========================================================= */
:focus-visible {
    outline: 3px solid #38bdf8;
    outline-offset: 3px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html {
    overflow-x: clip;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

body {
    font-family: 'Heebo', sans-serif;
    background:
        radial-gradient(circle at 15% 10%, rgba(14,165,233,0.06), transparent 26%),
        radial-gradient(circle at 85% 28%, rgba(56,189,248,0.045), transparent 28%),
        var(--bg);
    color: var(--text);
    direction: rtl;
    overflow-x: clip;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    position: relative;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open,
body.lightbox-open {
    overflow: hidden;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}

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

::selection {
    background: rgba(56,189,248,0.25);
    color: #fff;
}

/* =========================================================
   BACKGROUND
========================================================= */

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

.page-glow {
    position: fixed;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: -1;
    opacity: .08;
}

.page-glow-one {
    top: 0;
    right: -180px;
    background: var(--cyan);
}

.page-glow-two {
    bottom: 15%;
    left: -220px;
    background: var(--blue);
}

.container {
    width: min(var(--container), calc(100% - 48px));
    margin-inline: auto;
}

.section-space {
    padding: 125px 0;
}

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

.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    padding: 18px 20px;
    transition: .4s var(--ease);
}

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

.nav-shell {
    width: min(1240px, calc(100% - 0px));
    min-height: 74px;
    margin-inline: auto;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(5,9,13,.62);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 15px 45px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.035);
    transition: .4s var(--ease);
}

.site-header.scrolled .nav-shell {
    background: rgba(5,9,13,.86);
    border-color: rgba(56,189,248,.16);
    box-shadow: 0 15px 45px rgba(0,0,0,.34);
}

.brand,
.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-mark {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #00121b;
    background: linear-gradient(145deg, #8ce7ff, #1fa7e8);
    box-shadow:
        0 0 0 1px rgba(103,213,255,.3),
        0 10px 28px rgba(56,189,248,.24);
    position: relative;
    overflow: hidden;
}

.brand-mark::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 35%;
    transform: rotate(-45deg) translateX(-80%);
    background: rgba(255,255,255,.45);
    transition: transform .7s var(--ease);
}

.brand:hover .brand-mark::after {
    transform: rotate(-45deg) translateX(100%);
}

.brand-mark i {
    position: relative;
    z-index: 2;
    font-size: 1.05rem;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-copy strong {
    color: #fff;
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.brand-copy small {
    color: var(--muted-2);
    font-size: .52rem;
    margin-top: 5px;
    letter-spacing: .22em;
    direction: ltr;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-link {
    position: relative;
    padding: 10px 12px;
    color: #aabdc9;
    text-decoration: none;
    font-size: .91rem;
    font-weight: 600;
    transition: .25s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    right: 50%;
    bottom: 3px;
    width: 0;
    height: 2px;
    transform: translateX(50%);
    border-radius: 999px;
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(56,189,248,.8);
    transition: width .3s var(--ease);
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 20px;
}

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

.nav-call {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px 7px 13px;
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    transition: .3s ease;
}

.nav-call:hover {
    border-color: var(--border-blue);
    background: var(--surface-blue);
    transform: translateY(-1px);
}

.nav-call-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(56,189,248,.11);
    color: var(--cyan);
}

.nav-call span:nth-child(2) {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.nav-call small {
    color: var(--muted-2);
    font-size: .62rem;
    margin-bottom: 4px;
}

.nav-call strong {
    direction: ltr;
    color: #fff;
    font-size: .86rem;
}

.nav-request {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 17px;
    border-radius: 13px;
    background: linear-gradient(135deg, #67d5ff, #17a8ea);
    color: #03131a;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 900;
    box-shadow: 0 10px 30px rgba(56,189,248,.18);
    transition: .3s var(--ease);
}

.nav-request:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 36px rgba(56,189,248,.3);
}

.mobile-menu-trigger {
    display: none;
    width: 47px;
    height: 47px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.045);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.mobile-menu-trigger span {
    width: 19px;
    height: 2px;
    border-radius: 99px;
    background: #fff;
    transition: .3s var(--ease);
}

.mobile-menu-trigger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-trigger.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-trigger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
    display: none;
}

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
}

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

/* =========================================================
   HERO
   MANOLAN-RAN — PREMIUM SECURITY HERO
========================================================= */

.hero-section {
    position: relative;

    min-height: 100svh;

    padding:
        clamp(125px, 11vw, 165px)
        0
        clamp(70px, 8vw, 100px);

    display: flex;
    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 78% 28%,
            rgba(14,165,233,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 72%,
            rgba(56,189,248,.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(56,189,248,.035),
            transparent 40%
        );
}

/* =========================================================
   HERO ATMOSPHERE
========================================================= */

.hero-section::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -3;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.012),
            transparent 35%,
            rgba(56,189,248,.018)
        );

    pointer-events: none;
}

.hero-section::after {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -220px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(56,189,248,.09),
            rgba(56,189,248,.018) 35%,
            transparent 70%
        );

    filter:
        blur(15px);

    opacity: .85;

    pointer-events: none;

    z-index: -2;
}

/* =========================================================
   CONTAINER
========================================================= */

.hero-grid {
    position: relative;
    z-index: 3;

    width:
        min(
            1260px,
            calc(100% - 48px)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(470px, .92fr);

    gap:
        clamp(45px, 5.5vw, 85px);

    align-items: center;
}

/* =========================================================
   CONTENT
========================================================= */

.hero-content {
    position: relative;

    max-width: 720px;

    z-index: 4;
}

/* =========================================================
   EYEBROW
========================================================= */

.eyebrow,
.section-kicker,
.emergency-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        var(--cyan-soft);

    text-transform:
        uppercase;

    letter-spacing:
        .055em;

    font-size:
        .72rem;

    font-weight:
        800;
}

.eyebrow {
    position: relative;

    padding:
        9px 13px;

    border:
        1px solid
        rgba(56,189,248,.20);

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,.085),
            rgba(56,189,248,.025)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035),
        0 8px 25px
        rgba(56,189,248,.035);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.eyebrow::before {
    content: "";

    position: absolute;

    inset: 1px;

    border-radius: inherit;

    border:
        1px solid
        rgba(255,255,255,.018);

    pointer-events: none;
}

.eyebrow-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 0 4px
        rgba(56,189,248,.055),
        0 0 17px
        rgba(56,189,248,.85);

    animation:
        pulseDot 1.8s ease-in-out infinite;
}

/* =========================================================
   H1
========================================================= */

.hero h1,
.hero-main-title {
    position: relative;
    margin-top: 14px;
    max-width: 780px;
    color: #f7fbff;
    font-size: clamp(1.75rem, 3.2vw, 2.7rem);
    line-height: 1.24;
    letter-spacing: -0.02em;
    font-weight: 800;
    text-wrap: balance;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hero-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.hero-title-text {
    color: inherit;
    font-weight: 800;
}

/* Keyword 1: גישה (Access) */
.hero-keyword-access {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.hero-keyword-access .hero-keyword-inner {
    background: linear-gradient(135deg, #ffffff 0%, #a5f3fc 45%, #38bdf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    text-shadow: 0 0 28px rgba(56, 189, 248, 0.25);
    position: relative;
    z-index: 2;
}

/* Keyword 2: ביטחון (Security) - Premium Highlight */
.hero-keyword-security {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 14px 4px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.20), rgba(2, 132, 199, 0.08));
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow:
        0 10px 30px rgba(14, 165, 233, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    overflow: hidden;
    vertical-align: middle;
}

.hero-security-badge-icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 0.74rem;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

.hero-keyword-security .hero-keyword-inner {
    background: linear-gradient(135deg, #e0f2fe 0%, #38bdf8 50%, #34d399 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 35px rgba(56, 189, 248, 0.35);
}

.hero-security-aura {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.28), transparent 70%);
    pointer-events: none;
    animation: auraPulse 4s ease-in-out infinite alternate;
}

@keyframes auraPulse {
    0% { transform: scale(0.9); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 0.9; }
}

/* Light Theme Overrides for Hero Title */
body.light-theme .hero h1,
body.light-theme .hero-main-title {
    color: #0d222e !important;
}

body.light-theme .hero-title-text {
    color: #0d222e !important;
}

body.light-theme .hero-keyword-access .hero-keyword-inner {
    background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: 0 2px 14px rgba(2, 132, 199, 0.15) !important;
}

body.light-theme .hero-keyword-security {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(255, 255, 255, 0.92)) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    box-shadow:
        0 12px 30px rgba(15, 62, 85, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body.light-theme .hero-security-badge-icon {
    color: #0284c7 !important;
    background: rgba(14, 165, 233, 0.12) !important;
    border-color: rgba(14, 165, 233, 0.25) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.16) !important;
}

body.light-theme .hero-keyword-security .hero-keyword-inner {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 45%, #059669 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: 0 2px 16px rgba(2, 132, 199, 0.14) !important;
}

body.light-theme .hero-security-aura {
    background: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.18), transparent 70%) !important;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {
    max-width:
        665px;

    margin-top:
        30px;

    color:
        #93a8b7;

    font-size:
        clamp(
            .98rem,
            1.25vw,
            1.08rem
        );

    line-height:
        1.95;

    text-wrap:
        pretty;
}

/* =========================================================
   ACTIONS
========================================================= */

.hero-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        33px;
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

.primary-button,
.secondary-button {
    text-decoration:
        none;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .3s ease,
        background .3s ease;
}

.primary-button {
    position:
        relative;

    isolation:
        isolate;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    min-height:
        66px;

    padding:
        8px 12px 8px 17px;

    border:
        1px solid
        rgba(255,255,255,.26);

    border-radius:
        17px;

    color:
        #03131a;

    background:
        linear-gradient(
            135deg,
            #d9f8ff 0%,
            #9feaff 34%,
            #35bdf2 100%
        );

    box-shadow:
        0 18px 50px
        rgba(56,189,248,.18),

        0 0 0 1px
        rgba(255,255,255,.04),

        inset 0 1px 0
        rgba(255,255,255,.70);

    overflow:
        hidden;
}

.primary-button::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,255,255,.55) 50%,
            transparent 75%
        );

    transform:
        translateX(-120%);

    transition:
        transform .7s ease;
}

.primary-button:hover::before {
    transform:
        translateX(120%);
}

.primary-button:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 26px 65px
        rgba(56,189,248,.30),

        0 0 30px
        rgba(56,189,248,.08),

        inset 0 1px 0
        rgba(255,255,255,.85);
}

.primary-button:active {
    transform:
        translateY(-1px)
        scale(.99);
}

/* =========================================================
   BUTTON ICON
========================================================= */

.button-icon {
    width:
        46px;

    height:
        46px;

    flex:
        0 0 46px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(0,18,27,.08);

    border-radius:
        13px;

    background:
        rgba(0,18,27,.12);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.18);
}

/* =========================================================
   BUTTON COPY
========================================================= */

.button-copy {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.08;

    text-align:
        right;
}

.button-copy strong {
    font-size:
        .92rem;

    font-weight:
        900;
}

.button-copy small {
    margin-top:
        5px;

    font-size:
        .65rem;

    font-weight:
        700;

    opacity:
        .62;
}

.button-arrow {
    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    margin-inline-start:
        auto;

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.32);

    transition:
        transform .25s ease,
        background .25s ease;
}

.button-arrow i {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    line-height:
        1;

    font-size:
        .82rem;

    margin:
        0;

    padding:
        0;
}

.primary-button:hover .button-arrow {
    transform:
        translateX(-3px);
}

/* =========================================================
   SECONDARY BUTTON
========================================================= */

.secondary-button {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        56px;

    padding:
        0 20px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

    color:
        #fff;

    font-weight:
        800;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025),

        0 10px 30px
        rgba(0,0,0,.12);

    backdrop-filter:
        blur(12px);
}

.secondary-button:hover {
    border-color:
        rgba(37,211,102,.35);

    background:
        linear-gradient(
            145deg,
            rgba(37,211,102,.10),
            rgba(37,211,102,.035)
        );

    color:
        #7ef0a9;

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.20),

        0 0 25px
        rgba(37,211,102,.055);
}

.secondary-button i {
    font-size:
        1.1rem;
}

/* =========================================================
   PROOF
========================================================= */

.hero-proof {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        20px;

    margin-top:
        36px;
}

.proof-item {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #7e95a4;

    font-size:
        .72rem;
}

.proof-item > i {
    color:
        var(--cyan);

    font-size:
        .85rem;

    filter:
        drop-shadow(
            0 0 7px
            rgba(56,189,248,.20)
        );
}

.proof-item span {
    display:
        flex;

    flex-direction:
        column;
}

.proof-item strong {
    color:
        #dcecf4;

    font-size:
        .75rem;
}

.proof-divider {
    width:
        1px;

    height:
        29px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.11),
            transparent
        );
}

/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 480px;
    isolation: isolate;
}

.hero-ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(520px, 92vw);
    height: min(390px, 75vw);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(56, 189, 248, 0.22) 0%,
        rgba(14, 165, 233, 0.12) 40%,
        transparent 70%
    );
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    animation: ambientPulse 5s ease-in-out infinite;
}

@keyframes ambientPulse {
    0%, 100% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

.hero-cert-showcase {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 490px;
    animation: heroCardFloat 5s ease-in-out infinite;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* =========================================================
   TOP STATUS BAR
========================================================= */

.hero-cert-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(8, 22, 34, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cert-pulse-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.cert-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}

.cert-pulse-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(16, 185, 129, 0.65);
    animation: certPulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes certPulse {
    0% {
        transform: scale(0.7);
        opacity: 1;
    }
    70%, 100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.cert-topbar-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e0f2fe;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cert-topbar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    font-size: 1.05rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5));
}

/* =========================================================
   CERTIFICATE IMAGE FRAME
========================================================= */

.hero-image-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 608 / 382;
    border-radius: 20px;
    overflow: hidden;
    background: #091724;
    border: 1px solid rgba(56, 189, 248, 0.32);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.52),
        0 0 45px rgba(56, 189, 248, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateZ(0);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.3s ease;
}

.hero-cert-showcase:hover .hero-image-frame {
    border-color: rgba(103, 213, 255, 0.55);
    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.62),
        0 0 55px rgba(56, 189, 248, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.hero-image-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(1.04) contrast(1.06) brightness(1.01);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-cert-showcase:hover .hero-image-frame img {
    transform: scale(1.025);
}

/* =========================================================
   HOLOGRAPHIC SECURITY SHEEN
========================================================= */

.hero-security-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background: linear-gradient(
        115deg,
        transparent 20%,
        rgba(255, 255, 255, 0.02) 35%,
        rgba(56, 189, 248, 0.22) 48%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(56, 189, 248, 0.22) 52%,
        rgba(255, 255, 255, 0.02) 65%,
        transparent 80%
    );
    transform: translateX(-150%) skewX(-20deg);
    animation: securitySheen 5.5s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}

@keyframes securitySheen {
    0%, 15% {
        transform: translateX(-150%) skewX(-20deg);
        opacity: 0;
    }
    25% {
        opacity: 0.85;
    }
    45%, 100% {
        transform: translateX(200%) skewX(-20deg);
        opacity: 0;
    }
}

/* =========================================================
   INTEGRATED TRUST BAR
========================================================= */

.hero-trust-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}

.hero-trust-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    background: rgba(8, 22, 34, 0.82);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 12px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #e0f2fe;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.hero-trust-pill:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(12, 30, 46, 0.92);
}

.hero-trust-pill i {
    color: #38bdf8;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* =========================================================
   LIVE DOT
========================================================= */

.live-dot,
.hours-live i,
.map-live-dot {
    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        #3ce6c1;

    box-shadow:
        0 0 0 4px
        rgba(60,230,193,.055),

        0 0 15px
        #3ce6c1;

    animation:
        pulseDot
        1.8s
        ease-in-out
        infinite;
}

.live-dot {
    margin-right:
        2px;
}

/* =========================================================
   ORBITS
========================================================= */

.hero-orbit {
    position:
        absolute;

    border:
        1px solid
        rgba(56,189,248,.085);

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        drop-shadow(
            0 0 14px
            rgba(56,189,248,.025)
        );
}

.hero-orbit-one {
    width:
        720px;

    height:
        720px;

    animation:
        orbitRotate
        30s
        linear
        infinite;
}

.hero-orbit-two {
    width:
        560px;

    height:
        560px;

    border-style:
        dashed;

    opacity:
        .60;

    animation:
        orbitRotate
        22s
        linear
        infinite
        reverse;
}

/* =========================================================
   SCROLL INDICATOR
========================================================= */

.hero-scroll-indicator {
    position:
        absolute;

    bottom:
        26px;

    left:
        50%;

    transform:
        translateX(-50%);

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.015);

    backdrop-filter:
        blur(10px);

    color:
        #526b78;

    font-size:
        .64rem;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}

.hero-scroll-indicator i {
    color:
        var(--cyan);

    filter:
        drop-shadow(
            0 0 8px
            rgba(56,189,248,.30)
        );

    animation:
        scrollBounce
        1.7s
        ease-in-out
        infinite;
}

/* =========================================================
   GRID LINES
========================================================= */

.hero-grid-lines {
    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    opacity:
        .20;

    pointer-events:
        none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.022) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.022) 1px,
            transparent 1px
        );

    background-size:
        120px 120px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(0,0,0,.7) 45%,
            transparent 94%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(0,0,0,.7) 45%,
            transparent 94%
        );
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {

    .hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, .88fr);

        gap:
            42px;
    }

    .hero h1 {
        font-size:
            clamp(
                3rem,
                6vw,
                5rem
            );
    }

    .hero-orbit-one {
        width:
            600px;

        height:
            600px;
    }

    .hero-orbit-two {
        width:
            470px;

        height:
            470px;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 800px) {

    .hero-section {
        min-height:
            auto;

        padding:
            125px 0 85px;
    }

    .hero-grid {
        width:
            min(
                100%,
                calc(100% - 30px)
            );

        grid-template-columns:
            1fr;

        gap:
            55px;
    }

    .hero-content {
        max-width:
            none;

        text-align:
            center;
    }

    .eyebrow {
        justify-content:
            center;
    }

    .hero h1 {
        margin-top:
            22px;

        font-size:
            clamp(
                2.8rem,
                13vw,
                4.2rem
            );

        line-height:
            .96;
    }

    .hero-description {
        margin-inline:
            auto;

        max-width:
            600px;

        font-size:
            .95rem;

        line-height:
            1.85;
    }

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

    .hero-proof {
        justify-content:
            center;
    }

    .hero-visual {
        min-height: auto;
        padding: 10px 0;
    }

    .hero-orbit-one {
        width:
            520px;

        height:
            520px;
    }

    .hero-orbit-two {
        width:
            400px;

        height:
            400px;
    }

    .hero-scroll-indicator {
        display:
            none;
    }
}

/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

    .hero-section {
        padding:
            112px 0 65px;
    }

    .hero-grid {
        width:
            calc(100% - 22px);
    }

    .eyebrow {
        font-size:
            .62rem;

        padding:
            8px 11px;
    }

    .hero h1 {
        font-size:
            clamp(
                2.45rem,
                14vw,
                3.5rem
            );
    }

    .hero-description {
        font-size:
            .88rem;
    }

    .hero-actions {
        flex-direction:
            column;

        align-items:
            stretch;

        width:
            100%;
    }

    .primary-button,
    .secondary-button {
        width:
            100%;

        justify-content:
            center;
    }

    .hero-proof {
        gap:
            13px;

        justify-content:
            center;
    }

    .proof-divider {
        height:
            23px;
    }

    .hero-visual {
        min-height: auto;
        padding: 8px 0;
        width: 100%;
    }

    .hero-cert-showcase {
        max-width: 100%;
        gap: 10px;
    }

    .hero-cert-topbar {
        padding: 8px 12px;
    }

    .cert-topbar-title {
        font-size: 0.76rem;
    }

    .hero-trust-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .hero-trust-pill {
        padding: 8px 6px;
        font-size: 0.72rem;
        gap: 5px;
    }

    .hero-trust-pill i {
        font-size: 0.75rem;
    }

    .hero-orbit-one {
        width:
            420px;

        height:
            420px;
    }

    .hero-orbit-two {
        width:
            330px;

        height:
            330px;
    }
}

/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .hero-grid {
        width:
            calc(100% - 18px);
    }

    .hero h1 {
        font-size:
            2.25rem;
    }

    .hero-description {
        font-size:
            .84rem;
    }

    .hero-image-frame {
        width:
            calc(100% - 28px);

        height:
            390px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-section *,
    .hero-section *::before,
    .hero-section *::after {
        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;
    }
}

/* =========================================================
   STATS
========================================================= */

.stats-section {
    padding: 16px 0 50px;
    background: linear-gradient(to bottom, transparent, rgba(56,189,248,.015));
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255,255,255,.025);
}

.stat-box {
    min-height: 160px;
    padding: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.stat-box:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 0;
    width: 1px;
    background: var(--border);
}

.stat-number {
    color: #eefaff;
    font-size: 2.7rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.06em;
}

.stat-plus {
    color: var(--cyan);
    font-weight: 900;
}

.stat-box p {
    margin-top: 10px;
    color: #647b89;
    font-size: .78rem;
}

/* =========================================================
   HEADINGS
========================================================= */

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 55px;
}

.section-heading.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 780px;
    margin-inline: auto;
    text-align: center;
}

.section-heading.centered .section-kicker {
    margin-inline: auto;
    justify-content: center;
}

.section-heading.centered h2 {
    margin-inline: auto;
    text-align: center;
    width: 100%;
}

.section-heading.centered p {
    max-width: 620px;
    margin-inline: auto !important;
    margin-top: 14px;
    text-align: center !important;
    width: 100%;
}

.section-heading h2,
.process-header h2,
.contact-copy h2 {
    margin-top: 15px;
    color: #f5fbff;
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.06em;
}

.section-heading h2 span,
.process-header h2 span,
.contact-copy h2 span {
    color: var(--cyan);
}

.section-heading p {
    max-width: 450px;
    color: #7f96a5;
    font-size: .98rem;
    line-height: 1.9;
}

/* =========================================================
   INTRO
========================================================= */

.intro-section {
    padding-top: 80px;
    padding-bottom: 35px;
}

/* =========================================================
   SERVICES
========================================================= */

.services-section {
    position: relative;
}

.services-layout {
    display: grid;
    grid-template-columns: 360px minmax(0,1fr);
    gap: 24px;
    align-items: stretch;
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-selector {
    width: 100%;
    min-height: 91px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 44px 1fr 26px;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 17px;
    background: rgba(255,255,255,.025);
    color: #fff;
    text-align: right;
    cursor: pointer;
    transition: .35s var(--ease);
}

.service-selector:hover {
    transform: translateX(-4px);
    border-color: rgba(56,189,248,.18);
    background: rgba(56,189,248,.045);
}

.service-selector.active {
    border-color: rgba(56,189,248,.26);
    background:
        linear-gradient(90deg, rgba(56,189,248,.07), rgba(56,189,248,.015));
    box-shadow: inset 0 0 30px rgba(56,189,248,.025);
}

.service-selector-number {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #668290;
    border: 1px solid rgba(255,255,255,.07);
    font-size: .65rem;
    font-weight: 900;
    direction: ltr;
}

.service-selector.active .service-selector-number {
    color: #03131a;
    border-color: transparent;
    background: linear-gradient(135deg, #a8ecff, #28b4ed);
}

.service-selector-content {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.service-selector-content strong {
    color: #dfeef5;
    font-size: .86rem;
}

.service-selector-content small {
    margin-top: 6px;
    color: #617885;
    font-size: .65rem;
}

.service-selector > i {
    color: #526d7b;
    font-size: .7rem;
    transition: .3s ease;
}

.service-selector.active > i {
    color: var(--cyan);
    transform: translateX(-3px);
}

.service-showcase {
    position: relative;
    min-height: 590px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 30px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(56,189,248,.04), rgba(255,255,255,.012)),
        #081119;
    box-shadow: var(--shadow-lg);
}

.service-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: .5s var(--ease);
}

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

.service-panel-image {
    min-height: 590px;
    position: relative;
    overflow: hidden;
}

.service-panel-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 35%, #081119 100%),
        linear-gradient(180deg, rgba(8,17,25,.05), rgba(8,17,25,.35));
}

.service-panel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-panel-content {
    padding: 65px 50px 50px 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-panel-index {
    color: #4d6876;
    font-size: .68rem;
    font-weight: 900;
    direction: ltr;
}

.service-panel-content h3 {
    margin-top: 17px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: .98;
    letter-spacing: -.05em;
}

.service-panel-content p {
    margin-top: 25px;
    max-width: 440px;
    color: #7f95a3;
    font-size: .92rem;
    line-height: 1.9;
}

.service-features {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 25px;
}

.service-features span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #b6c9d4;
    font-size: .76rem;
}

.service-features i {
    color: var(--cyan);
    font-size: .65rem;
}

.panel-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
    margin-top: 30px;
    color: var(--cyan);
    font-size: .8rem;
    font-weight: 900;
    text-decoration: none;
}

.panel-link i {
    transition: .3s ease;
}

.panel-link:hover i {
    transform: translateX(-5px);
}

/* =========================================================
   WHY
========================================================= */

.why-section {
    background:
        linear-gradient(180deg, transparent, rgba(255,255,255,.012), transparent);
}

.split-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.split-heading p {
    align-self: flex-end;
    margin-bottom: 6px;
    max-width: 480px;
}

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

.why-card {
    min-height: 350px;
    position: relative;
    overflow: hidden;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
    transition: .4s var(--ease);
}

.why-card:hover {
    transform: translateY(-8px);
    border-color: rgba(56,189,248,.22);
    box-shadow: var(--shadow-blue);
}

.why-card.featured {
    background:
        radial-gradient(circle at 100% 0%, rgba(56,189,248,.14), transparent 45%),
        linear-gradient(145deg, rgba(56,189,248,.075), rgba(255,255,255,.015));
}

.why-card-number {
    color: #45606e;
    font-size: .67rem;
    font-weight: 900;
}

.why-icon {
    width: 58px;
    height: 58px;
    margin-top: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--cyan);
    border: 1px solid rgba(56,189,248,.15);
    background: rgba(56,189,248,.06);
    font-size: 1.25rem;
}

.why-card h3 {
    margin-top: 25px;
    color: #eff8fc;
    font-size: 1.15rem;
}

.why-card p {
    margin-top: 10px;
    color: #718793;
    font-size: .82rem;
    line-height: 1.85;
}

.why-line {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 45px;
    height: 2px;
    border-radius: 999px;
    background: var(--cyan);
    opacity: .55;
}

/* =========================================================
   PROCESS
========================================================= */

.process-section {
    position: relative;
}

.process-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 65px;
}

.process-header p {
    max-width: 360px;
    color: #7d93a0;
    font-size: .95rem;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    position: relative;
}

.process-line {
    height: 1px;
    margin-bottom: -34px;
    background:
        linear-gradient(90deg,
        transparent,
        rgba(56,189,248,.35),
        rgba(56,189,248,.35),
        transparent);
}

.process-card {
    position: relative;
    padding: 28px;
    min-height: 250px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(255,255,255,.022);
}

.process-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.process-top span {
    color: var(--cyan);
    font-size: .7rem;
    font-weight: 900;
}

.process-top i {
    color: #526f7e;
    font-size: 1.2rem;
}

.process-card h3 {
    margin-top: 48px;
    color: #fff;
    font-size: 1.1rem;
}

.process-card p {
    margin-top: 11px;
    color: #718794;
    font-size: .79rem;
    line-height: 1.85;
}

/* =========================================================
   GALLERY
========================================================= */

.gallery-section {
    background:
        radial-gradient(circle at 50% 40%, rgba(56,189,248,.035), transparent 35%);
}

.gallery-masonry {
    display: grid;
    grid-template-columns: 1.25fr .75fr .75fr;
    grid-auto-rows: 250px;
    gap: 12px;
}

.gallery-card {
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    cursor: zoom-in;
    background: #081018;
}

.gallery-card-large {
    grid-row: span 2;
}

.gallery-card-tall {
    grid-row: span 2;
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease), filter .5s ease;
}

.gallery-card:hover img {
    transform: scale(1.07);
    filter: saturate(1.08);
}

.gallery-overlay {
    position: absolute;
    inset: auto 12px 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px 11px 14px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 13px;
    background: rgba(4,10,15,.72);
    backdrop-filter: blur(15px);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    opacity: 0;
    transform: translateY(10px);
    transition: .4s var(--ease);
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
    transform: translateY(0);
}

.gallery-overlay i {
    color: var(--cyan);
}

.hidden-gallery-card {
    display: none;
}

.hidden-gallery-card.show {
    display: block;
    animation: galleryIn .6s var(--ease) both;
}

.gallery-expand-button {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px auto 0;
    padding: 12px 18px;
    border: 1px solid rgba(56,189,248,.18);
    border-radius: 14px;
    color: #d8f5ff;
    background: rgba(56,189,248,.045);
    cursor: pointer;
    font-size: .76rem;
    font-weight: 800;
    transition: .3s ease;
}

.gallery-expand-button:hover {
    border-color: rgba(56,189,248,.35);
    background: rgba(56,189,248,.08);
}

.button-symbol {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(56,189,248,.11);
    color: var(--cyan);
}

/* =========================================================
   REVIEWS
   Premium Infinite Seamless Marquee
========================================================= */

.reviews-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(56,189,248,.08),
            transparent 33%
        ),
        #050a0f;

    border-top:
        1px solid
        rgba(255,255,255,.03);

    border-bottom:
        1px solid
        rgba(255,255,255,.03);

    isolation: isolate;
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.reviews-bg-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    top: 20%;
    left: 50%;

    transform:
        translateX(-50%);

    background:
        rgba(56,189,248,.07);

    filter:
        blur(120px);

    pointer-events:
        none;

    opacity:
        .9;

    z-index:
        -1;
}


/* =========================================================
   HEADING
========================================================= */

.section-heading.light h2 {
    color:
        #fff;
}


/* =========================================================
   MARQUEE
========================================================= */

.reviews-marquee {
    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    margin-top:
        44px;

    padding:
        8px 0 14px;

    direction:
        ltr !important;

    /*
     * Fade edges
     */
    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            black 6%,
            black 94%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            black 6%,
            black 94%,
            transparent 100%
        );
}


/* =========================================================
   TRACK
   שתי קבוצות זהות לחלוטין.
   האנימציה מזיזה את כל הקבוצה הראשונה החוצה,
   ואז הקבוצה השנייה נמצאת בדיוק באותו מקום.
========================================================= */

.reviews-track {
    display:
        flex;

    align-items:
        stretch;

    width:
        max-content;

    min-width:
        max-content;

    margin:
        0;

    padding:
        0;

    direction:
        ltr !important;

    will-change:
        transform;

    backface-visibility:
        hidden;

    transform:
        translate3d(0,0,0);

    animation:
        reviewsMove
        75s
        linear
        infinite;
}


/* =========================================================
   LOOP GROUP
========================================================= */

.reviews-loop-group {
    display:
        flex;

    align-items:
        stretch;

    gap:
        16px;

    flex:
        0 0 auto;

    width:
        max-content;

    min-width:
        max-content;

    padding-inline:
        16px;

    box-sizing:
        border-box;

    direction:
        ltr !important;
}


/* =========================================================
   PAUSE ON HOVER & PAUSE STATE
========================================================= */

.reviews-marquee:hover .reviews-track,
.reviews-marquee.is-paused .reviews-track {
    animation-play-state:
        paused !important;
}


/* =========================================================
   TRUE INFINITE LOOP
========================================================= */

@keyframes reviewsMove {

    from {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    to {
        transform:
            translate3d(
                -50%,
                0,
                0
            );
    }
}


/* =========================================================
   REVIEW CARD
========================================================= */

.review-card {
    position:
        relative;

    direction:
        rtl !important;

    text-align:
        right !important;

    width:
        360px;

    min-width:
        360px;

    min-height:
        240px;

    padding:
        26px;

    flex:
        0 0 360px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.16);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

    backface-visibility:
        hidden;

    transform:
        translateZ(0);
}


/* =========================================================
   CARD GLOW
========================================================= */

.review-card::before {
    content:
        "";

    position:
        absolute;

    width:
        120px;

    height:
        120px;

    top:
        -70px;

    right:
        -60px;

    border-radius:
        50%;

    background:
        rgba(56,189,248,.08);

    filter:
        blur(35px);

    opacity:
        .6;

    pointer-events:
        none;
}


/* =========================================================
   CARD HOVER
========================================================= */

.review-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(56,189,248,.22);

    background:
        linear-gradient(
            145deg,
            rgba(56,189,248,.065),
            rgba(255,255,255,.022)
        );

    box-shadow:
        0 24px 60px
        rgba(0,0,0,.24),

        0 0 30px
        rgba(56,189,248,.045);
}


/* =========================================================
   REVIEW TOP
========================================================= */

.review-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


/* =========================================================
   STARS
========================================================= */

.review-stars {
    color:
        #72d7ff;

    font-size:
        .73rem;

    letter-spacing:
        .11em;

    text-shadow:
        0 0 12px
        rgba(56,189,248,.16);

    direction:
        ltr;
}


/* =========================================================
   NUMBER
========================================================= */

.review-top > span {
    color:
        #425966;

    font-size:
        .62rem;

    direction:
        ltr;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   REVIEW LABEL
========================================================= */

.review-card-label {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    margin-top:
        18px;

    padding:
        6px 9px;

    border:
        1px solid
        rgba(56,189,248,.08);

    border-radius:
        8px;

    color:
        #6d8794;

    background:
        rgba(56,189,248,.025);

    font-size:
        .52rem;

    font-weight:
        800;
}

.review-card-label i {
    color:
        #72d7ff;

    font-size:
        .48rem;
}


/* =========================================================
   TEXT
========================================================= */

.review-card p {
    margin-top:
        18px;

    color:
        #a6bbc5;

    font-size:
        .86rem;

    line-height:
        1.9;

    overflow-wrap:
        anywhere;
}


/* =========================================================
   AUTHOR
========================================================= */

.review-card strong {
    display:
        block;

    margin-top:
        25px;

    color:
        #e6f8ff;

    font-size:
        .76rem;

    font-weight:
        900;
}


/* =========================================================
   REVIEWS MARQUEE CONTROLS
========================================================= */

.reviews-marquee-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    padding: 0 16px;
    direction: rtl;
}

.reviews-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.reviews-ctrl-btn:hover {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
}

.reviews-ctrl-btn:active {
    transform: translateY(0);
}

.reviews-ctrl-btn.reviews-pause-btn {
    padding: 0 20px;
    border-color: rgba(56, 189, 248, 0.25);
    background: rgba(56, 189, 248, 0.06);
    color: #7dd3fc;
}

.reviews-ctrl-btn.reviews-pause-btn:hover {
    background: rgba(56, 189, 248, 0.18);
    color: #ffffff;
}

body.light-theme .reviews-ctrl-btn {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.9);
    color: #1e293b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

body.light-theme .reviews-ctrl-btn:hover {
    border-color: rgba(2, 132, 199, 0.4);
    background: rgba(2, 132, 199, 0.08);
    color: #0284c7;
}

body.light-theme .reviews-ctrl-btn.reviews-pause-btn {
    border-color: rgba(2, 132, 199, 0.25);
    background: rgba(2, 132, 199, 0.06);
    color: #0369a1;
}

/* =========================================================
   ACTIONS
========================================================= */

.reviews-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-top:
        42px;
}


/* =========================================================
   TRUST
========================================================= */

.review-trust {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}

.trust-stars {
    color:
        var(--cyan);

    letter-spacing:
        .1em;

    text-shadow:
        0 0 12px
        rgba(56,189,248,.12);
}

.review-trust span:nth-child(2) {
    display:
        flex;

    flex-direction:
        column;
}

.review-trust strong {
    color:
        #e8f8ff;

    font-size:
        .77rem;
}

.review-trust small {
    color:
        #556d7b;

    font-size:
        .62rem;
}


/* =========================================================
   BUTTONS
========================================================= */

.review-buttons {
    display:
        flex;

    gap:
        9px;
}

.review-button {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        13px 17px;

    border-radius:
        13px;

    text-decoration:
        none;

    font-size:
        .75rem;

    font-weight:
        800;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.review-button.primary {
    color:
        #03202c;

    background:
        var(--cyan);

    box-shadow:
        0 10px 25px
        rgba(56,189,248,.08);
}

.review-button.secondary {
    color:
        #c4dce6;

    border:
        1px solid
        rgba(255,255,255,.09);

    background:
        rgba(255,255,255,.015);
}

.review-button:hover {
    transform:
        translateY(-3px);
}

.review-button.primary:hover {
    box-shadow:
        0 15px 35px
        rgba(56,189,248,.15);
}

.review-button.secondary:hover {
    border-color:
        rgba(56,189,248,.18);

    background:
        rgba(56,189,248,.035);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .reviews-track {
        animation-duration:
            62s;
    }

    .reviews-loop-group {
        gap:
            14px;

        padding-inline:
            20px;
    }

    .review-card {
        width:
            320px;

        min-width:
            320px;

        flex-basis:
            320px;
    }

    .reviews-actions {
        flex-direction:
            column;

        align-items:
            flex-start;
    }
}


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

@media (max-width: 700px) {

    .reviews-marquee {
        margin-top:
            38px;

        padding:
            6px 0 12px;

        mask-image:
            linear-gradient(
                to right,
                transparent 0%,
                black 5%,
                black 95%,
                transparent 100%
            );

        -webkit-mask-image:
            linear-gradient(
                to right,
                transparent 0%,
                black 5%,
                black 95%,
                transparent 100%
            );
    }

    .reviews-track {
        animation-duration:
            76s;
    }

    .reviews-loop-group {
        gap:
            10px;

        padding-inline:
            14px;
    }

    .review-card {
        width:
            290px;

        min-width:
            290px;

        flex-basis:
            290px;

        min-height:
            230px;

        padding:
            21px;

        border-radius:
            18px;
    }

    .review-card p {
        font-size:
            .76rem;

        line-height:
            1.8;
    }

    .review-card strong {
        font-size:
            .70rem;
    }

    .reviews-actions {
        margin-top:
            30px;

        gap:
            20px;
    }

    .review-buttons {
        width:
            100%;

        flex-direction:
            column;
    }

    .review-button {
        justify-content:
            center;

        width:
            100%;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .reviews-track {
        animation:
            none !important;
    }

    .review-card,
    .review-button {
        transition:
            none !important;
    }
}

/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    background:
        linear-gradient(180deg, transparent, rgba(56,189,248,.018), transparent);
}

.contact-layout {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 28px;
    align-items: start;
}

.contact-copy,
.contact-map-wrap {
    padding: 40px;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: rgba(255,255,255,.025);
}

.contact-copy > p {
    max-width: 480px;
    margin-top: 20px;
    color: #7e95a3;
    line-height: 1.85;
}

.contact-detail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 32px;
}

.contact-detail {
    min-height: 72px;
    display: grid;
    grid-template-columns: 43px 1fr 18px;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 15px;
    text-decoration: none;
    transition: .3s ease;
}

.contact-detail:hover {
    background: rgba(255,255,255,.03);
}

.contact-detail-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(56,189,248,.065);
    color: var(--cyan);
}

.contact-detail > span:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.contact-detail small {
    color: #526a78;
    font-size: .6rem;
}

.contact-detail strong {
    margin-top: 2px;
    color: #e4f4fa;
    font-size: .78rem;
}

.contact-detail > i {
    color: #506d7b;
    font-size: .65rem;
    transition: .3s ease;
}

.contact-detail:hover > i {
    color: var(--cyan);
    transform: translateX(-3px);
}

/* =========================================================
   SERVICE HOURS CARD (Clear, High-Contrast Redesign)
========================================================= */

.service-hours-card {
    margin-top: 24px;
    padding: 22px;
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.04), rgba(255, 255, 255, 0.015));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hours-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hours-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hours-icon-badge {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    font-size: 1rem;
}

.hours-card-title strong {
    display: block;
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 800;
}

.hours-card-title small {
    display: block;
    color: #94a3b8;
    font-size: 0.74rem;
    margin-top: 1px;
}

.hours-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #34d399;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.35);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.hours-live-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px #34d399;
    animation: livePulse 1.8s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.85); opacity: 0.7; }
    50% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(0.85); opacity: 0.7; }
}

.hours-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.schedule-day {
    color: #e2e8f0;
    font-size: 0.88rem;
    font-weight: 700;
}

.schedule-time {
    direction: ltr;
    color: #38bdf8;
    font-size: 0.92rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    letter-spacing: 0.03em;
}

/* =========================================================
   SERVICE STANDARDS CARD
========================================================= */

.service-standards-card {
    margin-top: 20px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02);
}

.standards-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.standards-card-head i {
    color: #38bdf8;
    font-size: 1.25rem;
}

.standards-card-head strong {
    display: block;
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 800;
}

.standards-card-head small {
    display: block;
    color: #94a3b8;
    font-size: 0.74rem;
    margin-top: 1px;
}

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

.standard-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.04);
    border: 1px solid rgba(56, 189, 248, 0.15);
    color: #e2e8f0;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.standard-item:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.35);
    color: #ffffff;
    transform: translateY(-1px);
}

.standard-item i {
    color: #38bdf8;
    font-size: 0.88rem;
    flex-shrink: 0;
}

/* =========================================================
   RIGHT COLUMN: MAP & SERVICE AREAS
========================================================= */

.contact-map-wrap {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.map-frame {
    height: 420px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    user-select: none;
    -webkit-user-select: none;
}

.map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none !important;
    user-select: none;
    -webkit-user-select: none;
    filter: none;
    transition: filter 0.4s ease;
}

.map-touch-shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: auto;
    background: transparent;
    cursor: default;
}

.map-header-pill {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    color: #0f172a;
    font-size: 0.74rem;
    font-weight: 800;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
}

.map-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: livePulse 1.8s infinite;
}

/* Interactive Map Pins Layer */
.map-pins-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.map-city-pin {
    position: absolute;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    transform: translate(-50%, -50%);
    padding: 0;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    z-index: 5;
}

.map-pin-pulse {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(2, 132, 199, 0.22);
    animation: pinRadar 2.2s infinite ease-out;
    pointer-events: none;
}

@keyframes pinRadar {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(2.0); opacity: 0; }
}

.map-pin-dot {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0284c7;
    border: 2px solid #ffffff;
    color: #ffffff;
    font-size: 0.62rem;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.map-pin-dot i {
    font-size: 0.62rem;
    line-height: 1;
}

.map-pin-label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    height: 24px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
    transition: all 0.25s ease;
}

.pin-city-text {
    font-weight: 700;
    line-height: 1;
}

.pin-eta-tag {
    color: #0284c7;
    font-size: 0.6rem;
    font-weight: 800;
    background: #e0f2fe;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.1;
}

.map-city-pin:hover,
.map-city-pin.active {
    z-index: 12;
}

.map-city-pin:hover .map-pin-dot,
.map-city-pin.active .map-pin-dot {
    background: #0284c7;
    transform: scale(1.15);
    box-shadow: 0 0 14px rgba(2, 132, 199, 0.65);
}

.map-city-pin:hover .map-pin-label,
.map-city-pin.active .map-pin-label {
    border-color: #0284c7;
    background: #0284c7;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.map-city-pin:hover .pin-eta-tag,
.map-city-pin.active .pin-eta-tag {
    background: #ffffff;
    color: #0284c7;
}

/* Precise Positions on Gush Dan Map (Correct Land Quadrants, Non-colliding) */
.pin-tlv {
    top: 40%;
    left: 63%;
    flex-direction: row-reverse;
}
.pin-ramatgan {
    top: 27%;
    left: 72%;
    flex-direction: column-reverse;
}
.pin-givatayim {
    top: 38%;
    left: 71%;
    flex-direction: row;
}
.pin-ono {
    top: 33%;
    left: 81%;
    flex-direction: row;
}
.pin-yehud {
    top: 51%;
    left: 83%;
    flex-direction: row;
}
.pin-azor {
    top: 64%;
    left: 69%;
    flex-direction: row;
}
.pin-holon {
    top: 70%;
    left: 63%;
    flex-direction: column;
}
.pin-batyam {
    top: 66%;
    left: 56%;
    flex-direction: row-reverse;
}

/* =========================================================
   SERVICE AREAS INTERACTIVE PICKER & LIVE ETA BOX
========================================================= */

.service-areas-interactive {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.service-areas-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-areas-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.areas-title-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e0f2fe;
    color: #0284c7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12);
}

.service-areas-title strong {
    display: block;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.3;
}

.service-areas-subtitle {
    display: block;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 500;
    margin-top: 2px;
}

.area-chips-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.area-city-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #1e293b;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    text-align: right;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: all 0.25s ease;
}

.area-city-chip i {
    font-size: 0.75rem;
    color: #94a3b8;
    transition: color 0.25s ease;
}

.area-city-chip .chip-eta {
    font-size: 0.7rem;
    color: #0284c7;
    font-weight: 800;
    background: #f0f9ff;
    padding: 2px 7px;
    border-radius: 6px;
}

.area-city-chip:hover {
    border-color: #38bdf8;
    background: #f0f9ff;
    color: #0284c7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.1);
}

.area-city-chip.active {
    border-color: #0284c7;
    background: #f0f9ff;
    color: #0369a1;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.16);
}

.area-city-chip.active i {
    color: #0284c7;
}

/* Symmetrical City ETA Live Box */
.city-eta-livebox {
    padding: 24px;
    border-radius: 20px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.eta-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.eta-pulse-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
    font-size: 0.78rem;
    font-weight: 800;
}

.eta-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: livePulse 1.8s infinite;
}

.eta-target-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.eta-target-label {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 600;
}

.eta-target-city {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 900;
}

.eta-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.eta-metric-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    min-height: 72px;
}

.eta-metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #e0f2fe;
    color: #0284c7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.eta-metric-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.eta-metric-title {
    display: block;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 600;
}

.eta-metric-val {
    display: block;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 900;
}

.eta-dispatch-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
}

.eta-dispatch-note i {
    font-size: 1.1rem;
    color: #0284c7;
    flex-shrink: 0;
}

.eta-dispatch-note p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    font-weight: 600;
    color: #0369a1;
}

.eta-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.eta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.25s ease;
}

.eta-btn-call {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.25);
}

.eta-btn-call:hover {
    background: #0369a1;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.35);
}

.eta-btn-whatsapp {
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.25);
}

.eta-btn-whatsapp:hover {
    background: #15803d;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(22, 163, 74, 0.35);
}

/* =========================================================
   DARK MODE OVERRIDES FOR MAP & SERVICE AREAS (When NOT light-theme)
========================================================= */

body:not(.light-theme) .map-frame {
    border-color: rgba(56, 189, 248, 0.2);
    background: #09131a;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

body:not(.light-theme) .map-frame iframe {
    filter: grayscale(0.7) brightness(0.65) contrast(1.15);
}

body:not(.light-theme) .map-frame:hover iframe {
    filter: grayscale(0.5) brightness(0.72) contrast(1.1);
}

body:not(.light-theme) .map-header-pill {
    color: #f0fdf4;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(5, 11, 16, 0.88);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

body:not(.light-theme) .map-pin-pulse {
    background: rgba(56, 189, 248, 0.3);
}

body:not(.light-theme) .map-pin-dot {
    background: #0284c7;
    border-color: #ffffff;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.5);
}

body:not(.light-theme) .map-pin-label {
    background: rgba(8, 18, 27, 0.92);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #f1f5f9;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body:not(.light-theme) .map-pin-label .pin-eta-tag,
body:not(.light-theme) .map-pin-label small {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
}

body:not(.light-theme) .map-city-pin:hover .map-pin-label,
body:not(.light-theme) .map-city-pin.active .map-pin-label {
    border-color: #38bdf8;
    background: rgba(14, 165, 233, 0.95);
    color: #ffffff;
}

body:not(.light-theme) .map-city-pin:hover .pin-eta-tag,
body:not(.light-theme) .map-city-pin.active .pin-eta-tag,
body:not(.light-theme) .map-city-pin:hover .map-pin-label small,
body:not(.light-theme) .map-city-pin.active .map-pin-label small {
    background: #ffffff;
    color: #0369a1;
}

body:not(.light-theme) .service-areas-title strong {
    color: #f8fafc;
}

body:not(.light-theme) .areas-title-icon {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    box-shadow: none;
}

body:not(.light-theme) .service-areas-subtitle {
    color: #94a3b8;
}

body:not(.light-theme) .area-city-chip {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    color: #cbd5e1;
    box-shadow: none;
}

body:not(.light-theme) .area-city-chip i {
    color: #64748b;
}

body:not(.light-theme) .area-city-chip .chip-eta {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
}

body:not(.light-theme) .area-city-chip:hover {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.06);
    color: #f8fafc;
}

body:not(.light-theme) .area-city-chip.active {
    border-color: rgba(56, 189, 248, 0.6);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(2, 132, 199, 0.08));
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(14, 165, 233, 0.2);
}

body:not(.light-theme) .area-city-chip.active i {
    color: #38bdf8;
}

body:not(.light-theme) .city-eta-livebox {
    background: linear-gradient(145deg, rgba(14, 165, 233, 0.1), rgba(6, 182, 212, 0.03));
    border-color: rgba(56, 189, 248, 0.28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

body:not(.light-theme) .eta-pulse-badge {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(52, 211, 153, 0.35);
    color: #34d399;
}

body:not(.light-theme) .eta-target-badge {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

body:not(.light-theme) .eta-target-label {
    color: #94a3b8;
}

body:not(.light-theme) .eta-target-city {
    color: #f8fafc;
}

body:not(.light-theme) .eta-metric-card {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.06);
}

body:not(.light-theme) .eta-metric-icon {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
}

body:not(.light-theme) .eta-metric-title {
    color: #94a3b8;
}

body:not(.light-theme) .eta-metric-val {
    color: #f1f5f9;
}

body:not(.light-theme) .eta-dispatch-note {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.22);
    color: #bae6fd;
}

body:not(.light-theme) .eta-dispatch-note i {
    color: #38bdf8;
}

body:not(.light-theme) .eta-dispatch-note p {
    color: #e0f2fe;
}

body:not(.light-theme) .eta-btn-call {
    background: #0ea5e9;
    color: #03202c;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
}

body:not(.light-theme) .eta-btn-call:hover {
    background: #38bdf8;
    box-shadow: 0 12px 26px rgba(14, 165, 233, 0.45);
}

body:not(.light-theme) .eta-btn-whatsapp {
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #4ade80;
    box-shadow: none;
}

body:not(.light-theme) .eta-btn-whatsapp:hover {
    background: rgba(34, 197, 94, 0.25);
    color: #ffffff;
}

/* =========================================================
   COOL SERVICE PERKS (Fixes empty space & adds immense value)
========================================================= */

.service-cool-perks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cool-perk-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s ease;
}

.cool-perk-item:hover {
    background: rgba(56, 189, 248, 0.04);
    border-color: rgba(56, 189, 248, 0.2);
    transform: translateX(-3px);
}

.cool-perk-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #38bdf8;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.cool-perk-content strong {
    display: block;
    color: #f1f5f9;
    font-size: 0.85rem;
    font-weight: 800;
}

.cool-perk-content p {
    color: #94a3b8;
    font-size: 0.74rem;
    line-height: 1.6;
    margin-top: 3px;
    margin-bottom: 0;
}

/* =========================================================
   LIGHT THEME OVERRIDES FOR CONTACT & SERVICE AREAS
========================================================= */

body.light-theme .service-hours-card {
    border-color: rgba(14, 165, 233, 0.2);
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

body.light-theme .hours-card-title strong {
    color: #0f172a;
}

body.light-theme .schedule-row {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-theme .schedule-day {
    color: #1e293b;
}

body.light-theme .schedule-time {
    color: #0284c7;
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.2);
}

body.light-theme .service-standards-card {
    border-color: #e2e8f0;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

body.light-theme .standards-card-head strong {
    color: #0f172a;
}

body.light-theme .standard-item {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #1e293b;
}

body.light-theme .standard-item:hover {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.3);
    color: #0f172a;
}

body.light-theme .area-city-chip {
    border-color: #e2e8f0;
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

body.light-theme .area-city-chip:hover {
    border-color: #0284c7;
    background: #f0f9ff;
    color: #0369a1;
}

body.light-theme .area-city-chip.active {
    border-color: #0284c7;
    background: #e0f2fe;
    color: #0369a1;
}

body.light-theme .city-eta-livebox {
    border-color: rgba(14, 165, 233, 0.3);
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

body.light-theme .eta-city-target strong {
    color: #0f172a;
}

body.light-theme .eta-metric {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-theme .eta-metric strong {
    color: #0f172a;
}

body.light-theme .eta-city-desc {
    color: #475569;
}

body.light-theme .cool-perk-item {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-theme .cool-perk-content strong {
    color: #0f172a;
}

body.light-theme .cool-perk-content p {
    color: #64748b;
}

/* =========================================================
   FAQ
========================================================= */

.faq-section {
    background: #060c12;
}

.faq-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 45px;
    align-items: start;
}

.faq-side {
    position: relative;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    background:
        radial-gradient(circle at 0 0, rgba(56,189,248,.1), transparent 45%),
        rgba(255,255,255,.022);
}

.faq-side-icon {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: var(--cyan);
    background: rgba(56,189,248,.08);
    border: 1px solid rgba(56,189,248,.15);
    font-size: 1.2rem;
}

.faq-side h3 {
    margin-top: 25px;
    color: #fff;
    font-size: 1.2rem;
}

.faq-side p {
    margin-top: 9px;
    color: #708896;
    font-size: .79rem;
    line-height: 1.85;
}

.faq-call {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    padding: 12px 14px;
    border-radius: 13px;
    color: #03131a;
    background: linear-gradient(135deg, #a4ebff, #2eb4ed);
    text-decoration: none;
    font-weight: 900;
    font-size: .77rem;
}

.faq-call i {
    transition: .25s ease;
}

.faq-call:hover i {
    transform: translateX(-4px);
}

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

.faq-item {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.035);
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: rgba(56, 189, 248, 0.28);
    background: rgba(255, 255, 255, 0.05);
}

.faq-item.active {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.04);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.faq-question {
    width: 100%;
    min-height: 70px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #f3f9fc;
    background: transparent;
    cursor: pointer;
    text-align: right;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    border: none;
    transition: background 0.25s ease, color 0.25s ease;
}

.faq-question:focus {
    outline: none;
}

.faq-question:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: -2px;
    background: rgba(56, 189, 248, 0.09);
}

.faq-question i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    border-radius: 9px;
    color: #8bb5ca;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    transition: all 0.35s ease;
    font-size: 0.75rem;
}

.faq-item.active .faq-question i {
    color: #041d27;
    background: var(--cyan);
    border-color: var(--cyan);
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--ease);
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding: 0 22px 22px;
    color: #cde1ec;
    font-size: 0.92rem;
    line-height: 1.85;
}

/* =========================================================
   FAQ SEARCH BAR & CHIPS SYSTEM
========================================================= */

.faq-search-box {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.faq-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.faq-search-icon {
    position: absolute;
    right: 18px;
    font-size: 0.95rem;
    color: #648293;
    pointer-events: none;
    transition: color 0.25s ease;
}

.faq-search-input {
    width: 100%;
    height: 52px;
    padding: 0 46px 0 46px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: #f1f7fa;
    font-size: 0.94rem;
    font-family: inherit;
    transition: all 0.28s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.faq-search-input:focus {
    outline: none;
    border-color: rgba(56, 189, 248, 0.6);
    background: rgba(255, 255, 255, 0.07);
    box-shadow:
        0 0 0 4px rgba(56, 189, 248, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.18);
}

.faq-search-input-wrap:focus-within .faq-search-icon {
    color: var(--cyan);
}

.faq-search-input::placeholder {
    color: #829ca9;
    font-size: 0.9rem;
}

.faq-clear-search {
    position: absolute;
    left: 14px;
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #b0c6d2;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.faq-clear-search:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

.faq-clear-search:hover {
    color: #ffffff;
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.4);
}

/* Chips Row */
.faq-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    width: 100%;
}

.faq-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #a4becc;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    user-select: none;
    min-height: 40px;
}

.faq-filter-chip:focus {
    outline: none;
}

.faq-filter-chip:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
    border-color: rgba(56, 189, 248, 0.6);
}

.faq-filter-chip i {
    font-size: 0.8rem;
    color: #6d93a7;
    transition: color 0.25s ease;
}

.faq-filter-chip:hover {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.08);
    color: #e2f2fa;
}

.faq-filter-chip:hover i {
    color: var(--cyan);
}

.faq-filter-chip.active {
    border-color: rgba(56, 189, 248, 0.55);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.26), rgba(14, 165, 233, 0.12));
    color: #f0f9ff;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.22);
}

.faq-filter-chip.active i {
    color: #38bdf8;
}

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

    .faq-main {
        order: 1;
        width: 100%;
    }

    .faq-side {
        order: 2;
        width: 100%;
        margin-top: 14px;
        padding: 26px 22px;
        border-radius: 20px;
    }
}

@media (max-width: 768px) {
    .faq-section {
        padding-top: 50px;
        padding-bottom: 60px;
    }

    .faq-search-box {
        gap: 12px;
        margin-bottom: 18px;
    }

    .faq-search-input {
        font-size: 16px !important; /* Prevents auto zoom on iOS */
        height: 50px !important;
        border-radius: 14px !important;
        padding: 0 44px 0 44px !important;
    }

    .faq-search-icon {
        right: 16px !important;
        font-size: 0.9rem;
    }

    .faq-clear-search {
        left: 10px !important;
        width: 32px !important;
        height: 32px !important;
    }

    /* RTL Touch-Friendly Smooth Chips Row without Body Overflow */
    .faq-chips-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        gap: 8px;
        padding: 4px 2px 10px 2px;
        margin: 0;
        width: 100%;
        scrollbar-width: thin;
        scrollbar-color: rgba(56, 189, 248, 0.3) transparent;
    }

    .faq-chips-row::-webkit-scrollbar {
        height: 3px;
    }

    .faq-chips-row::-webkit-scrollbar-thumb {
        background: rgba(56, 189, 248, 0.3);
        border-radius: 3px;
    }

    .faq-filter-chip {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 15px;
        font-size: 0.86rem;
        min-height: 44px;
        border-radius: 12px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .faq-list {
        gap: 10px;
    }

    .faq-item {
        border-radius: 16px;
        touch-action: manipulation;
    }

    .faq-question {
        padding: 16px 18px;
        font-size: 0.98rem;
        font-weight: 700;
        line-height: 1.45;
        gap: 14px;
        min-height: 56px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .faq-question span {
        flex: 1;
        text-align: right;
    }

    .faq-question i {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
        border-radius: 10px;
    }

    .faq-question:active {
        background: rgba(56, 189, 248, 0.08);
    }

    .faq-answer p {
        padding: 0 18px 20px;
        font-size: 0.94rem;
        line-height: 1.8;
        color: #d2e4f0;
    }

    .faq-side {
        padding: 22px 18px;
        border-radius: 18px;
        margin-top: 12px;
    }

    .faq-side h3 {
        font-size: 1.15rem;
        margin-top: 14px;
    }

    .faq-side p {
        font-size: 0.88rem;
        line-height: 1.7;
        margin-top: 8px;
    }

    .faq-call {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 48px;
        margin-top: 18px;
        padding: 13px 18px;
        font-size: 0.92rem;
        border-radius: 13px;
        touch-action: manipulation;
    }
}

@media (max-width: 480px) {
    .faq-layout {
        gap: 20px;
    }

    .faq-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .faq-item {
        width: 100%;
        border-radius: 14px;
    }

    .faq-question {
        width: 100%;
        padding: 16px 16px;
        font-size: 0.96rem;
        font-weight: 700;
        gap: 12px;
        min-height: 56px !important;
        box-sizing: border-box;
    }

    .faq-question i {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .faq-answer p {
        padding: 0 16px 18px;
        font-size: 0.92rem;
        line-height: 1.8;
    }

    .faq-filter-chip {
        padding: 9px 14px;
        font-size: 0.84rem;
        min-height: 44px;
    }

    .faq-search-input {
        font-size: 15px !important;
        height: 48px !important;
        padding: 0 40px !important;
    }

    .faq-search-input::placeholder {
        font-size: 0.84rem;
    }
}

.faq-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

.faq-results-counter {
    font-size: 0.8rem;
    font-weight: 600;
    color: #7d9cb0;
}

/* FAQ Empty State */
.faq-empty-state {
    padding: 42px 24px;
    text-align: center;
    border-radius: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.faq-empty-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    color: var(--cyan);
    font-size: 1.3rem;
}

.faq-empty-state h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2eef4;
    margin: 4px 0 0;
}

.faq-empty-state p {
    font-size: 0.85rem;
    color: #7995a3;
    max-width: 420px;
    line-height: 1.6;
    margin: 0;
}

.faq-empty-call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    color: #03141f;
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.faq-empty-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.35);
}

/* Light Theme Overrides for FAQ Search & Chips */
body.light-theme .faq-search-input {
    border-color: rgba(15, 49, 66, 0.12) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #102633 !important;
    box-shadow: 0 6px 20px rgba(15, 49, 66, 0.05) !important;
}

body.light-theme .faq-search-input:focus {
    border-color: rgba(14, 165, 233, 0.45) !important;
    box-shadow:
        0 0 0 4px rgba(14, 165, 233, 0.12),
        0 8px 25px rgba(15, 49, 66, 0.08) !important;
    background: #ffffff !important;
}

body.light-theme .faq-search-input::placeholder {
    color: #7e96a4 !important;
}

body.light-theme .faq-search-icon {
    color: #627f8f !important;
}

body.light-theme .faq-clear-search {
    border-color: rgba(15, 49, 66, 0.12) !important;
    background: rgba(15, 49, 66, 0.05) !important;
    color: #516d7d !important;
}

body.light-theme .faq-filter-chip {
    border-color: rgba(15, 49, 66, 0.1) !important;
    background: rgba(255, 255, 255, 0.75) !important;
    color: #4a6877 !important;
}

body.light-theme .faq-filter-chip i {
    color: #648292 !important;
}

body.light-theme .faq-filter-chip:hover {
    border-color: rgba(14, 165, 233, 0.3) !important;
    background: rgba(14, 165, 233, 0.06) !important;
    color: #0f3445 !important;
}

body.light-theme .faq-filter-chip.active {
    border-color: rgba(14, 165, 233, 0.35) !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(255, 255, 255, 0.95)) !important;
    color: #0369a1 !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.12) !important;
}

body.light-theme .faq-filter-chip.active i {
    color: #0284c7 !important;
}

body.light-theme .faq-results-counter {
    color: #688494 !important;
}

body.light-theme .faq-empty-state {
    border-color: rgba(15, 49, 66, 0.15) !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

body.light-theme .faq-empty-state h3 {
    color: #153241 !important;
}

body.light-theme .faq-empty-state p {
    color: #607986 !important;
}

/* =========================================================
   EMERGENCY
========================================================= */

.emergency-section {
    position: relative;
    padding: 70px 0;
    overflow: hidden;
    background: #03070b;
    border-top: 1px solid rgba(56, 189, 248, 0.12);
    border-bottom: 1px solid rgba(56, 189, 248, 0.12);
}

.emergency-dispatch-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: 48px;
    align-items: center;
    padding: 42px;
    background:
        linear-gradient(135deg, rgba(14, 30, 46, 0.95), rgba(7, 18, 28, 0.98));
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 26px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.emergency-status-bar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.emergency-status-signal {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: livePulse 1.8s infinite ease-in-out;
}

.emergency-info-col h2 {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.04em;
    margin-bottom: 12px;
}

.emergency-title-sub {
    display: block;
    color: var(--cyan);
    font-size: 0.6em;
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: 0;
}

.emergency-desc {
    color: #94a3b8;
    font-size: 0.96rem;
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 620px;
}

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

.emergency-spec-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.emergency-spec-badge i {
    color: var(--cyan);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.emergency-spec-badge strong {
    display: block;
    color: #f1f5f9;
    font-size: 0.86rem;
    font-weight: 700;
}

.emergency-spec-badge span {
    display: block;
    color: #7995a5;
    font-size: 0.76rem;
}

.emergency-action-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}

.emergency-call-primary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    border-radius: 20px;
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    color: #03131c !important;
    text-decoration: none;
    box-shadow: 0 16px 36px rgba(2, 132, 199, 0.35);
    transition: all 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.emergency-call-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 45px rgba(56, 189, 248, 0.45);
    color: #03131c !important;
}

.emergency-call-primary:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.emergency-call-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(3, 19, 28, 0.15);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.emergency-call-data {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.emergency-call-data small {
    font-size: 0.74rem;
    font-weight: 700;
    opacity: 0.85;
}

.emergency-call-data strong {
    font-size: 1.35rem;
    font-weight: 900;
    direction: ltr;
    letter-spacing: 0.5px;
}

.emergency-call-arrow {
    font-size: 1.1rem;
    transition: transform 0.22s ease;
}

.emergency-call-primary:hover .emergency-call-arrow {
    transform: translateX(-4px);
}

.emergency-aux-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.emergency-whatsapp-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(37, 211, 102, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.32);
    color: #4ade80;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 800;
    transition: all 0.22s ease;
}

.emergency-whatsapp-action:hover {
    background: rgba(37, 211, 102, 0.24);
    border-color: rgba(37, 211, 102, 0.55);
    color: #86efac;
    transform: translateY(-2px);
}

.emergency-form-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.22s ease;
}

.emergency-form-action:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.35);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Light Theme Emergency */
body.light-theme .emergency-section {
    background: #edf4f8;
    border-color: rgba(15, 49, 66, 0.12);
}

body.light-theme .emergency-dispatch-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.07);
}

body.light-theme .emergency-info-col h2 {
    color: #0b2333;
}

body.light-theme .emergency-title-sub {
    color: #0284c7;
}

body.light-theme .emergency-desc {
    color: #334155;
}

body.light-theme .emergency-spec-badge {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-theme .emergency-spec-badge strong {
    color: #0b2333;
}

body.light-theme .emergency-spec-badge span {
    color: #475569;
}

body.light-theme .emergency-spec-badge i {
    color: #0284c7;
}

body.light-theme .emergency-call-primary {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(2, 132, 199, 0.28);
}

body.light-theme .emergency-call-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

body.light-theme .emergency-whatsapp-action {
    background: #f0fdf4;
    border-color: #86efac;
    color: #15803d;
}

body.light-theme .emergency-form-action {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

@media (max-width: 900px) {
    .emergency-dispatch-card {
        grid-template-columns: 1fr;
        padding: 26px 20px;
        gap: 28px;
    }

    .emergency-specs-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .emergency-aux-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   FOOTER (WCAG AAA CONTRAST & ACCESSIBILITY AUDITED)
========================================================= */

.site-footer {
    padding: 85px 0 25px;
    background: #04080c;
    color: #a3b8c6;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-main {
    display: grid;
    grid-template-columns: 1.3fr .7fr .7fr 1fr;
    gap: 55px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer-brand .brand-mark {
    width: 47px;
    height: 47px;
    flex-basis: 47px;
}

.footer-brand > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.footer-brand strong {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 900;
}

.footer-brand small {
    margin-top: 5px;
    color: #9cb1bf;
    font-size: .52rem;
    letter-spacing: .22em;
    direction: ltr;
}

.footer-brand-col p {
    max-width: 300px;
    margin-top: 20px;
    color: #a3b8c6;
    font-size: .84rem;
    line-height: 1.85;
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.social {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: #cce0ec;
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
    transition: all .25s ease;
    font-size: 1.05rem;
}

.social:hover {
    transform: translateY(-3px);
    color: #ffffff;
}

.social:focus-visible {
    outline: 2px solid #38bdf8 !important;
    outline-offset: 3px !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.4) !important;
}

.social.whatsapp:hover {
    border-color: rgba(37,211,102,.6);
    background: rgba(37,211,102,.15);
    color: #43e67f;
}

.social.phone:hover {
    border-color: rgba(56,189,248,.6);
    background: rgba(56,189,248,.15);
    color: var(--cyan);
}

.social.discord:hover {
    border-color: rgba(88,101,242,.6);
    background: rgba(88,101,242,.15);
    color: #9aa2ff;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column h3 {
    margin-bottom: 18px;
    color: #f1f7fa;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.footer-column a,
.footer-column .footer-cookie-link {
    margin-bottom: 6px;
    color: #a8bdcb;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 500;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 4px 0;
    transition: color .2s ease, transform .2s ease;
}

.footer-column a:hover,
.footer-column .footer-cookie-link:hover {
    color: #ffffff;
    transform: translateX(-3px);
}

.footer-column a:focus-visible,
.footer-column .footer-cookie-link:focus-visible,
.footer-brand:focus-visible {
    outline: 2px solid #38bdf8 !important;
    outline-offset: 3px !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    text-decoration: underline !important;
}

.footer-contact-link {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 12px !important;
    color: #a8bdcb !important;
    text-decoration: none;
    font-size: .84rem;
    min-height: 38px;
}

.footer-contact-link:hover {
    color: #ffffff !important;
}

.footer-contact-link:focus-visible {
    outline: 2px solid #38bdf8 !important;
    outline-offset: 3px !important;
    border-radius: 6px !important;
    color: #ffffff !important;
}

.footer-contact-link i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--cyan);
    background: rgba(56,189,248,.10);
    border: 1px solid rgba(56,189,248,.2);
    flex-shrink: 0;
}

/* =========================================================
/* =========================================================
   PWA INSTALLATION CARD
========================================================= */

.pwa-install-card {
    position: fixed;
    bottom: 80px;
    left: 20px;
    z-index: 2000;
    max-width: 360px;
    width: calc(100vw - 40px);
    background: #081b27;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(56, 189, 248, 0.15);
    color: #effbff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

body.light-theme .pwa-install-card {
    background: #ffffff;
    border-color: #bae6fd;
    color: #0f172a;
    box-shadow: 0 12px 32px rgba(2, 132, 199, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pwa-install-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.pwa-install-title {
    font-size: 1rem;
    font-weight: 700;
    color: #effbff;
    margin: 0;
}

body.light-theme .pwa-install-title {
    color: #0369a1;
}

.pwa-install-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.pwa-install-close:hover {
    color: #f87171;
}

.pwa-install-desc {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.45;
    margin-bottom: 14px;
}

body.light-theme .pwa-install-desc {
    color: #475569;
}

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

.pwa-btn-primary {
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pwa-btn-primary:hover {
    background: #0369a1;
}

.pwa-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

body.light-theme .pwa-btn-secondary {
    border-color: #cbd5e1;
    color: #475569;
}

.pwa-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .pwa-install-card {
        bottom: 90px;
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* =========================================================
   CLEAN PREMIUM FOOTER CTA BUTTON (MATCHING USER SPEC)
========================================================= */

.footer-cta {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    margin-top: 14px;
    padding: 11px 22px;
    border-radius: 14px;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;

    /* Crisp White Pill Matching Image 1 */
    background: #ffffff !important;
    border: 1px solid #dbeafe !important;
    color: #0b3251 !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                border-color 0.2s ease,
                background 0.2s ease;
}

.footer-cta span {
    color: #0b3251 !important;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    z-index: 2;
    transition: color 0.18s ease;
}

.footer-cta i {
    color: #0284c7 !important;
    font-size: 1.05rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-block;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.18s ease;
    z-index: 2;
}

/* Hover State */
.footer-cta:hover,
.footer-cta:focus {
    background: #ffffff !important;
    border-color: #38bdf8 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.footer-cta:hover span,
.footer-cta:focus span {
    color: #0284c7 !important;
}

.footer-cta:hover i,
.footer-cta:focus i {
    transform: translateX(-5px);
    color: #0369a1 !important;
}

/* Tactile Active Press */
.footer-cta:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.footer-cta:focus-visible {
    outline: 2px solid #0284c7 !important;
    outline-offset: 3px !important;
}

/* Light Theme 3D Tactile Button */
body.light-theme .footer-column a.footer-cta,
body.light-theme .footer-cta {
    background: #ffffff !important;
    border: 1.5px solid #0284c7 !important;
    border-top: 1.5px solid #38bdf8 !important;
    border-bottom: 3.5px solid #0369a1 !important;
    color: #0369a1 !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 4px 14px rgba(2, 132, 199, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .footer-column a.footer-cta span,
body.light-theme .footer-cta span {
    color: #0369a1 !important;
}

body.light-theme .footer-column a.footer-cta i,
body.light-theme .footer-cta i {
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    border: 1px solid #7dd3fc;
    color: #0284c7 !important;
}

body.light-theme .footer-column a.footer-cta:hover,
body.light-theme .footer-cta:hover,
body.light-theme .footer-cta:focus {
    background: #ffffff !important;
    border-color: #0284c7 !important;
    border-bottom: 4.5px solid #0369a1 !important;
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px rgba(2, 132, 199, 0.28),
        0 3px 6px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .footer-column a.footer-cta:hover i,
body.light-theme .footer-cta:hover i,
body.light-theme .footer-cta:focus i {
    transform: translateX(-4px);
    background: #0284c7;
    color: #ffffff !important;
}

body.light-theme .footer-column a.footer-cta:active,
body.light-theme .footer-cta:active {
    transform: translateY(2px) !important;
    border-bottom: 1.5px solid #0369a1 !important;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.2) inset,
        0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    color: #9ab0bd;
    font-size: .8rem;
}

.footer-bottom span {
    color: var(--cyan);
}

/* =========================================================
   FLOATING ACTIONS
========================================================= */

.floating-actions {
    position: fixed;
    left: 20px;
    bottom: 22px;
    z-index: 850;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.floating-actions a {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 17px 35px rgba(0,0,0,.26);
    transition: .3s var(--ease);
}

.floating-actions a:hover {
    transform: translateY(-4px) scale(1.03);
}

.floating-whatsapp {
    background: #1ab85b;
}

.floating-phone {
    background: #0d8fcb;
}

/* =========================================================
   LIGHTBOX
========================================================= */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147483645 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lightbox.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
}

.lightbox-content {
    position: relative;
    width: min(1100px, 94vw);
    max-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.lightbox-content img {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12);
    display: block;
}

.lightbox-close {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    font-size: 1.1rem;
    z-index: 2147483646;
    transition: transform 0.2s ease, background 0.2s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.08);
}

/* =========================================================
   3D PARALLAX SCROLL REVEAL (HIGH PERFORMANCE & DEPTH)
========================================================= */

main {
    perspective: 1200px;
    perspective-origin: 50% 25%;
    transform-style: preserve-3d;
}

.reveal {
    opacity: 0;
    transform: perspective(1200px) translate3d(0, 36px, -32px) rotateX(4.5deg);
    transform-origin: center bottom;
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.reveal.visible {
    opacity: 1;
    transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg);
}

.delay-1 {
    transition-delay: .09s;
}

.delay-2 {
    transition-delay: .18s;
}

.delay-3 {
    transition-delay: .27s;
}

/* Subtle 3D layer depth for key sections inside main */
.why-card,
.process-card,
.stat-box,
.service-showcase,
.review-card,
.faq-side,
.faq-item,
.contact-copy,
.contact-map-wrap,
.emergency-inner {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    main {
        perspective: none !important;
    }
    .reveal,
    .reveal.visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes pulseDot {
    0%,100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(.72);
        opacity: .55;
    }
}

@keyframes float {
    0%,100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-12px) rotate(1deg);
    }
}

@keyframes imageSweep {
    0% {
        transform: translateX(250px);
    }
    35%,100% {
        transform: translateX(-550px);
    }
}

@keyframes orbitRotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes scrollBounce {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
}

@keyframes reviewsMove {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes galleryIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {
    .desktop-nav {
        gap: 0;
    }

    .nav-call {
        display: none;
    }

    .hero-grid {
        grid-template-columns: 1fr .82fr;
        gap: 40px;
    }

    .hero h1 {
        font-size: clamp(3.2rem, 7vw, 5.5rem);
    }

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

    .hero-image-frame {
        height: 550px;
    }

    .services-layout {
        grid-template-columns: 310px 1fr;
    }

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

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

    .footer-contact {
        grid-column: 1 / -1;
    }
}

@media (max-width: 960px) {
    .desktop-nav,
    .nav-actions {
        display: none;
    }

    .mobile-menu-trigger {
        display: flex;
    }

    .mobile-nav {
        position: fixed;
        top: 98px;
        right: 20px;
        left: 20px;
        display: block;
        z-index: 1001;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 22px;
        background: rgba(5,11,16,.94);
        backdrop-filter: blur(24px);
        box-shadow: 0 30px 80px rgba(0,0,0,.5);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: .35s var(--ease);
    }

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

    .mobile-nav-inner {
        padding: 14px;
    }

    .mobile-nav-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 7px 15px;
        color: #72909d;
        font-size: .68rem;
        font-weight: 900;
    }

    .mobile-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #69dfbd;
    }

    .mobile-status i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #3ce6c1;
        box-shadow: 0 0 12px #3ce6c1;
    }

    .mobile-nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 13px;
        border-top: 1px solid rgba(255,255,255,.05);
        color: #dbeaf1;
        text-decoration: none;
        font-size: .88rem;
        font-weight: 700;
    }

    .mobile-nav-link span {
        color: #4c6673;
        font-size: .64rem;
        direction: ltr;
    }

    .mobile-nav-bottom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px 0 0;
    }

    .mobile-action {
        min-height: 47px;
        display: grid;
        place-items: center;
        gap: 5px;
        border-radius: 13px;
        text-decoration: none;
        font-size: .73rem;
        font-weight: 900;
    }

    .mobile-action-call {
        color: #04131a;
        background: var(--cyan);
    }

    .mobile-action-whatsapp {
        color: #7df0a4;
        border: 1px solid rgba(37,211,102,.22);
        background: rgba(37,211,102,.07);
    }

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

    .hero-content {
        max-width: 850px;
    }

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

    .hero-image-frame {
        width: min(600px, 100%);
        height: 510px;
    }

    .hero-scroll-indicator {
        display: none;
    }

    .services-layout {
        grid-template-columns: 1fr;
    }

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

    .service-selector {
        min-height: 82px;
    }

    .service-showcase {
        min-height: 620px;
    }

    .service-panel {
        grid-template-columns: 1fr;
    }

    .service-panel-image {
        min-height: 300px;
        max-height: 320px;
    }

    .service-panel-image::after {
        background:
            linear-gradient(180deg, transparent 35%, #081119 100%);
    }

    .service-panel-content {
        padding: 35px 30px;
    }

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

    .process-line {
        display: none;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

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

    .eta-livebox-actions {
        grid-template-columns: 1fr;
    }

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

    .faq-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .faq-side {
        position: static;
    }

    .emergency-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .emergency-actions {
        width: 100%;
        max-width: 460px;
    }
}

@media (max-width: 700px) {
    .container,
    .hero-grid {
        width: min(var(--container), calc(100% - 28px));
    }

    .site-header {
        padding: 10px 8px;
    }

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

    .nav-shell {
        min-height: 67px;
        border-radius: 17px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .brand-copy strong {
        font-size: 1rem;
    }

    .section-space {
        padding: 86px 0;
    }

    .hero-section {
        padding: 125px 0 65px;
    }

    .hero h1,
    .hero-main-title {
        font-size: clamp(1.4rem, 6.2vw, 2.05rem);
        letter-spacing: -0.015em;
        line-height: 1.25;
        gap: 5px;
    }

    .hero-keyword-security {
        padding: 2px 10px 3px;
        gap: 6px;
        border-radius: 10px;
    }

    .hero-security-badge-icon {
        width: 20px;
        height: 20px;
        font-size: 0.68rem;
    }

    .faq-search-input {
        height: 48px;
        font-size: 0.88rem;
    }

    .faq-chips-row {
        gap: 6px;
    }

    .faq-filter-chip {
        padding: 6px 11px;
        font-size: 0.74rem;
    }

    .hero-description {
        font-size: .9rem;
        line-height: 1.82;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .primary-button {
        width: 100%;
    }

    .secondary-button {
        width: 100%;
    }

    .hero-proof {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .proof-divider {
        display: none;
    }

    .proof-item {
        padding-bottom: 11px;
        border-bottom: 1px solid rgba(255,255,255,.05);
    }

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

    .hero-orbit-one {
        width: 480px;
        height: 480px;
    }

    .hero-orbit-two {
        width: 390px;
        height: 390px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        border-radius: 19px;
    }

    .stat-box {
        min-height: 125px;
        padding: 20px 10px;
    }

    .stat-box:nth-child(2)::after {
        display: none;
    }

    .stat-box:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }

    .stat-number {
        font-size: 2rem;
    }

    .section-heading,
    .process-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .section-heading.centered {
        text-align: center;
        align-items: center;
    }

    .section-heading h2,
    .process-header h2,
    .contact-copy h2 {
        font-size: clamp(2.35rem, 11vw, 3.4rem);
    }

    .services-list {
        grid-template-columns: 1fr;
    }

    .service-selector {
        min-height: 74px;
    }

    .service-showcase {
        min-height: 680px;
        border-radius: 24px;
    }

    .service-panel-image {
        min-height: 240px;
    }

    .service-panel-content {
        padding: 28px 22px;
    }

    .service-panel-content h3 {
        font-size: 2.45rem;
    }

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

    .why-card {
        min-height: 290px;
    }

    .why-icon {
        margin-top: 36px;
    }

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

    .process-card {
        min-height: auto;
    }

    .process-card h3 {
        margin-top: 35px;
    }

    .gallery-masonry {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 170px;
    }

    .gallery-card-large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-card-tall {
        grid-row: span 2;
    }

    .gallery-overlay {
        opacity: 1;
        transform: none;
    }

    .review-card {
        width: 290px;
        flex-basis: 290px;
        min-height: 230px;
    }

    .reviews-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .review-buttons {
        width: 100%;
        flex-direction: column;
    }

    .review-button {
        justify-content: center;
    }

    .contact-copy,
    .contact-map-wrap {
        padding: 22px;
        border-radius: 22px;
    }

    .map-frame {
        height: 320px;
    }

    .service-hours {
        padding: 16px;
    }

    .hours-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .emergency-section {
        padding: 70px 0;
    }

    .emergency-content h2 {
        font-size: 2.65rem;
    }

    .emergency-actions {
        min-width: 0;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 38px 20px;
    }

    .footer-brand-col {
        grid-column: 1 / -1;
    }

    .footer-contact {
        grid-column: 1 / -1;
    }

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

    .floating-actions {
        left: 12px;
        bottom: 12px;
    }

    .floating-actions a {
        width: 47px;
        height: 47px;
        border-radius: 14px;
    }
}

@media (max-width: 420px) {
    .gallery-masonry {
        grid-template-columns: 1fr;
        grid-auto-rows: 230px;
    }

    .gallery-card-large {
        grid-column: auto;
        grid-row: span 1;
    }

    .gallery-card-tall {
        grid-row: span 1;
    }

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

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

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   MANOLAN-RAN — DUAL THEME SYSTEM
   Dark = default
   Light = body.light-theme
========================================================= */

.theme-light-preload body {
    visibility: hidden;
}

body.theme-ready {
    visibility: visible;
}

html.theme-light-preload body {
    --bg: #f4f8fb;
    --bg-2: #edf4f8;
    --bg-3: #e7f0f5;
    --surface: rgba(15, 42, 58, .055);
    --surface-strong: rgba(15, 42, 58, .085);
    --surface-blue: rgba(14, 165, 233, .08);
    --white: #10202a;
    --text: #1f3440;
    --muted: #607987;
    --muted-2: #7c919d;
    --border: rgba(15, 43, 58, .12);
    --border-blue: rgba(14, 165, 233, .28);
    --shadow-sm: 0 12px 35px rgba(18, 50, 66, .10);
    --shadow-lg: 0 35px 90px rgba(18, 50, 66, .14);
}

/* =========================================================
   THEME TOGGLE
========================================================= */

.theme-toggle {
    min-height: 44px;
    padding: 5px 7px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    color: #dff7ff;
    background: rgba(255,255,255,.035);
    cursor: pointer;
    transition:
        transform .3s var(--ease),
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        color .3s ease;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    border-color: rgba(56,189,248,.28);
    background: rgba(56,189,248,.065);
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.theme-toggle:focus-visible {
    outline: 3px solid rgba(56,189,248,.35);
    outline-offset: 3px;
}

.theme-toggle-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #a8eaff;
    background: rgba(56,189,248,.09);
    transition: .3s ease;
}

.theme-toggle-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
}

.theme-toggle-copy strong {
    color: currentColor;
    font-size: .62rem;
    font-weight: 900;
}

.theme-toggle-copy small {
    margin-top: 3px;
    color: #6d8490;
    font-size: .46rem;
    font-weight: 700;
}

.theme-toggle-switch {
    width: 27px;
    height: 16px;
    padding: 2px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    transition: .3s ease;
}

.theme-toggle-switch span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #9feaff;
    box-shadow: 0 0 10px rgba(56,189,248,.35);
    transition: .3s var(--ease);
}

.theme-toggle.is-light {
    color: #203b4a;
    border-color: rgba(14,165,233,.20);
    background: rgba(255,255,255,.74);
}

.theme-toggle.is-light .theme-toggle-icon {
    color: #0e8fd0;
    background: rgba(14,165,233,.09);
}

.theme-toggle.is-light .theme-toggle-copy small {
    color: #728995;
}

.theme-toggle.is-light .theme-toggle-switch {
    justify-content: flex-end;
    background: rgba(14,165,233,.14);
}

.theme-toggle.is-light .theme-toggle-switch span {
    background: #0ea5e9;
}

/* =========================================================
   LIGHT THEME — BASE
========================================================= */

body.light-theme {
    --bg: #f4f8fb;
    --bg-2: #edf4f8;
    --bg-3: #e6eff4;
    --surface: rgba(20, 54, 70, .052);
    --surface-strong: rgba(20, 54, 70, .075);
    --surface-blue: rgba(14,165,233,.08);
    --white: #10212c;
    --text: #213744;
    --muted: #68808d;
    --muted-2: #7f939e;
    --border: rgba(16, 48, 64, .12);
    --border-blue: rgba(14,165,233,.25);
    --shadow-sm: 0 12px 35px rgba(23, 55, 69, .10);
    --shadow-lg: 0 35px 90px rgba(23, 55, 69, .14);
    background:
        radial-gradient(circle at 15% 10%, rgba(14,165,233,.085), transparent 26%),
        radial-gradient(circle at 85% 28%, rgba(56,189,248,.07), transparent 28%),
        linear-gradient(180deg, #f7fbfd, #edf4f8 100%);
    color: var(--text);
}

body.light-theme .site-noise {
    opacity: .018;
    mix-blend-mode: multiply;
}

body.light-theme .page-glow {
    opacity: .11;
}

body.light-theme ::selection {
    background: rgba(14,165,233,.20);
    color: #10232e;
}

body.light-theme .site-header {
    background: transparent;
}

body.light-theme .nav-shell,
body.light-theme .site-header.scrolled .nav-shell {
    background: rgba(255,255,255,.78) !important;
    border-color: rgba(15,49,66,.12) !important;
    box-shadow:
        0 14px 45px rgba(25,57,70,.10),
        inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(24px);
}

body.light-theme .brand-copy strong,
body.light-theme .nav-call strong,
body.light-theme .hero h1,
body.light-theme .section-heading h2,
body.light-theme .contact-copy h2,
body.light-theme .process-header h2,
body.light-theme .stat-number {
    color: #10232e !important;
}

body.light-theme .brand-copy small,
body.light-theme .nav-call small {
    color: #79909c !important;
}

body.light-theme .nav-link {
    color: #55707d !important;
}

body.light-theme .nav-link:hover,
body.light-theme .nav-link.active {
    color: #12313f !important;
}

body.light-theme .nav-call {
    background: rgba(255,255,255,.55);
    border-color: rgba(15,49,66,.10);
}

body.light-theme .nav-call:hover {
    border-color: rgba(14,165,233,.24);
    background: rgba(14,165,233,.07);
}

body.light-theme .mobile-menu-trigger {
    border-color: rgba(15,49,66,.12);
    background: rgba(255,255,255,.72);
}

body.light-theme .mobile-menu-trigger span {
    background: #163342;
}

body.light-theme .menu-overlay {
    background: rgba(19,43,56,.28);
}

body.light-theme .mobile-nav {
    background: rgba(249,253,255,.94) !important;
    border-color: rgba(15,49,66,.12) !important;
    box-shadow: 0 30px 80px rgba(26,58,73,.16);
}

body.light-theme .mobile-nav-top,
body.light-theme .mobile-nav-link {
    color: #274552 !important;
}

body.light-theme .mobile-nav-link span,
body.light-theme .mobile-status {
    color: #78909c !important;
}

/* =========================================================
   HERO / GENERAL SECTIONS
========================================================= */

body.light-theme .hero-section {
    background:
        radial-gradient(circle at 80% 30%, rgba(14,165,233,.10), transparent 30%),
        radial-gradient(circle at 25% 60%, rgba(56,189,248,.07), transparent 32%);
}

body.light-theme .hero-description,
body.light-theme .section-heading p,
body.light-theme .process-header p,
body.light-theme .service-panel-content p,
body.light-theme .why-card p,
body.light-theme .contact-copy > p,
body.light-theme .emergency-content p {
    color: #647d8a !important;
}

body.light-theme .faq-answer p {
    color: #1a3746 !important;
    font-size: 0.92rem !important;
    line-height: 1.85 !important;
}

body.light-theme .eyebrow {
    border-color: rgba(14,165,233,.18);
    background: rgba(14,165,233,.055);
    color: #178bc0;
}

body.light-theme .hero h1 span,
body.light-theme .hero h1 strong {
    background: linear-gradient(100deg, #1a3948 8%, #1598d4 50%, #0c75b8 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

body.light-theme .primary-button {
    color: #07202b;
    background: linear-gradient(135deg, #8ee2ff, #1ea7e7);
    box-shadow:
        0 18px 50px rgba(14,165,233,.16),
        inset 0 1px 0 rgba(255,255,255,.55);
}

body.light-theme .secondary-button {
    color: #244452 !important;
    border-color: rgba(15,49,66,.12);
    background: rgba(255,255,255,.70);
}

body.light-theme .secondary-button:hover {
    color: #15955e !important;
    background: rgba(37,211,102,.08);
}

body.light-theme .hero-proof .proof-item,
body.light-theme .hero-proof .proof-item strong {
    color: #56717e !important;
}

body.light-theme .hero-proof .proof-item strong {
    color: #294957 !important;
}

body.light-theme .proof-divider {
    background: rgba(15,49,66,.12);
}

body.light-theme .hero-image-frame {
    background: #eef5f8;
    border-color: rgba(14, 165, 233, 0.28);
    box-shadow:
        0 20px 50px rgba(18, 56, 72, 0.14),
        0 0 40px rgba(14, 165, 233, 0.08);
}

body.light-theme .hero-cert-topbar,
body.light-theme .hero-trust-pill {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(14, 165, 233, 0.22);
    box-shadow: 0 10px 30px rgba(18, 56, 72, 0.10);
    color: #0f2735;
}

body.light-theme .cert-topbar-title {
    color: #0c2331;
}

body.light-theme .hero-trust-pill {
    color: #1e3a4b;
}

body.light-theme .hero-trust-pill:hover {
    background: #ffffff;
    border-color: rgba(14, 165, 233, 0.4);
}

body.light-theme .hero-grid-lines {
    opacity: .18;
    background-image:
        linear-gradient(rgba(15,49,66,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,49,66,.06) 1px, transparent 1px);
}

body.light-theme .hero-scroll-indicator {
    color: #78909b;
}

body.light-theme .stats-section {
    background: linear-gradient(to bottom, transparent, rgba(14,165,233,.025));
}

body.light-theme .stats-grid {
    background: rgba(255,255,255,.65);
    border-color: rgba(15,49,66,.10);
    box-shadow: 0 18px 50px rgba(25,58,72,.07);
}

body.light-theme .stat-box {
    background: rgba(255,255,255,.35);
}

body.light-theme .stat-box:not(:last-child)::after {
    background: rgba(15,49,66,.10);
}

body.light-theme .stat-plus,
body.light-theme .stat-box p {
    color: #0b91cb;
}

body.light-theme .stat-box p {
    color: #708794;
}

/* =========================================================
   SERVICES
========================================================= */

body.light-theme .service-selector,
body.light-theme .service-showcase,
body.light-theme .service-panel,
body.light-theme .why-card,
body.light-theme .process-card,
body.light-theme .review-card,
body.light-theme .contact-detail,
body.light-theme .faq-item {
    background: rgba(255,255,255,.67) !important;
    border-color: rgba(15,49,66,.10) !important;
    box-shadow: 0 12px 35px rgba(26,58,72,.05);
}

body.light-theme .service-selector:hover,
body.light-theme .service-selector.active {
    background: linear-gradient(145deg, rgba(14,165,233,.10), rgba(255,255,255,.85)) !important;
    border-color: rgba(14,165,233,.24) !important;
}

body.light-theme .service-selector-content strong,
body.light-theme .why-card h3,
body.light-theme .process-card h3,
body.light-theme .review-card strong {
    color: #213b48 !important;
}

body.light-theme .faq-question {
    color: #0b222f !important;
    font-weight: 700 !important;
}

body.light-theme .service-selector-content small,
body.light-theme .process-card p,
body.light-theme .review-card p {
    color: #718792 !important;
}

body.light-theme .service-selector-number,
body.light-theme .why-card-number,
body.light-theme .service-panel-index {
    color: #198fc2 !important;
}

body.light-theme .service-panel-content h3 {
    color: #153441 !important;
}

body.light-theme .service-features span {
    color: #52707c !important;
}

body.light-theme .service-features i {
    color: #16a873 !important;
}

body.light-theme .panel-link {
    color: #138bc0 !important;
}

body.light-theme .why-line {
    background: linear-gradient(90deg, #38bdf8, transparent);
}

body.light-theme .why-icon,
body.light-theme .mini-icon,
body.light-theme .floating-card-icon,
body.light-theme .contact-detail-icon,
body.light-theme .faq-side-icon {
    color: #0f93cd !important;
    background: rgba(14,165,233,.08) !important;
    border-color: rgba(14,165,233,.13) !important;
}

/* =========================================================
   GALLERY / REVIEWS / CONTACT / FAQ
========================================================= */

body.light-theme .gallery-overlay {
    background: linear-gradient(180deg, transparent 25%, rgba(17,39,50,.68));
}

body.light-theme .gallery-expand-button {
    color: #23424f;
    border-color: rgba(15,49,66,.12);
    background: rgba(255,255,255,.78);
}

body.light-theme .review-card {
    background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(246,251,253,.72)) !important;
}

body.light-theme .review-stars {
    color: #e9a91a !important;
}

body.light-theme .review-top > span,
body.light-theme .review-trust span:nth-child(2),
body.light-theme .review-trust small {
    color: #6f8792 !important;
}

body.light-theme .contact-section,
body.light-theme .faq-section,
body.light-theme .intro-section {
    background: transparent !important;
}

body.light-theme .contact-detail strong,
body.light-theme .contact-detail small,
body.light-theme .faq-side h3,
body.light-theme .faq-side p,
body.light-theme .area-tags span,
body.light-theme .service-hours {
    color: #365563 !important;
}

body.light-theme .contact-detail small,
body.light-theme .faq-side p,
body.light-theme .area-title,
body.light-theme .service-hours {
    color: #728995 !important;
}

body.light-theme .map-frame {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

body.light-theme .map-label {
    background: rgba(255,255,255,.84);
    border-color: rgba(15,49,66,.10);
    color: #31505d;
}

body.light-theme .area-tags span {
    background: rgba(255,255,255,.76);
    border-color: rgba(15,49,66,.09);
}

body.light-theme .area-tags span:hover {
    background: rgba(14,165,233,.08);
    border-color: rgba(14,165,233,.18);
}

body.light-theme .faq-question i {
    color: #138fc4;
}

body.light-theme .faq-item.active {
    border-color: rgba(14,165,233,.20) !important;
    background: rgba(14,165,233,.055) !important;
}

/* =========================================================
   EMERGENCY
========================================================= */

body.light-theme .emergency-section {
    background:
        linear-gradient(135deg, #e6f7fd, #d8f0f7) !important;
    border-top-color: rgba(14,165,233,.14);
    border-bottom-color: rgba(14,165,233,.14);
}

body.light-theme .emergency-content h2,
body.light-theme .emergency-content h2 span {
    color: #143544 !important;
}

body.light-theme .emergency-content p,
body.light-theme .emergency-label {
    color: #5f7884 !important;
}

body.light-theme .emergency-phone,
body.light-theme .emergency-form-link {
    border-color: rgba(15,49,66,.11);
    background: rgba(255,255,255,.74);
    color: #244451;
}

body.light-theme .emergency-phone strong {
    color: #173744;
}

body.light-theme .emergency-phone small {
    color: #708894;
}

body.light-theme .emergency-live-pill {
    background: rgba(14,165,233,.09);
    border-color: rgba(14,165,233,.22);
    color: #0369a1;
}

body.light-theme .emergency-feature-item {
    color: #4b6674;
}

body.light-theme .emergency-feature-item i {
    color: #0284c7;
}

body.light-theme .emergency-whatsapp-btn {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

body.light-theme .emergency-whatsapp-btn:hover {
    background: #d1fae5;
    color: #065f46;
}

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

body.light-theme .site-footer {
    background:
        linear-gradient(180deg, #edf4f7, #e1ebf0) !important;
    border-top: 1px solid rgba(15,49,66,.14);
    color: #123447 !important;
}

body.light-theme .footer-brand strong,
body.light-theme .footer-column h3,
body.light-theme .footer-contact strong {
    color: #0c2736 !important;
}

body.light-theme .footer-brand small,
body.light-theme .footer-brand-col p,
body.light-theme .footer-column a:not(.footer-cta),
body.light-theme .footer-column .footer-cookie-link,
body.light-theme .footer-contact-link,
body.light-theme .footer-bottom,
body.light-theme .footer-credentials {
    color: #14384c !important;
}

body.light-theme .footer-column a:not(.footer-cta):hover,
body.light-theme .footer-column .footer-cookie-link:hover,
body.light-theme .footer-contact-link:hover {
    color: #0284c7 !important;
}

body.light-theme .site-footer a:focus-visible,
body.light-theme .site-footer button:focus-visible {
    outline: 2px solid #0284c7 !important;
    outline-offset: 3px !important;
    border-radius: 4px !important;
    color: #0284c7 !important;
}

body.light-theme .social,
body.light-theme .floating-actions a {
    border-color: rgba(15,49,66,.18);
    background: rgba(255,255,255,.9);
    color: #123649;
}

body.light-theme .social:hover {
    color: #0284c7;
    background: #ffffff;
    border-color: rgba(2, 132, 199, 0.4);
}

/* =========================================================
   LIGHTBOX
========================================================= */

body.light-theme .lightbox {
    background: rgba(232,243,248,.84) !important;
}

body.light-theme .lightbox-content {
    background: #fff;
    border-color: rgba(15,49,66,.10);
    box-shadow: 0 35px 90px rgba(25,58,72,.22);
}

body.light-theme .lightbox-close {
    background: rgba(255,255,255,.9);
    color: #35515e;
    border-color: rgba(15,49,66,.10);
}

/* =========================================================
   ACCESSIBILITY WIDGET / CHATBOT
   These are loaded from separate stylesheets, so selectors
   intentionally use the theme class for stronger precedence.
========================================================= */

body.light-theme #access-btn {
    color: #174252 !important;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(234,243,247,.96)) !important;
    border-color: rgba(14,165,233,.22) !important;
    box-shadow: 0 16px 45px rgba(30,62,76,.13), 0 0 28px rgba(14,165,233,.07) !important;
}

body.light-theme #access-menu {
    background: linear-gradient(145deg, rgba(253,255,255,.98), rgba(241,247,250,.98)) !important;
    border-color: rgba(15,49,66,.11) !important;
    box-shadow: 0 35px 90px rgba(25,58,72,.18) !important;
}

body.light-theme #access-menu * {
    border-color: rgba(15,49,66,.09);
}

body.light-theme .access-menu-brand-copy strong,
body.light-theme .access-option-label {
    color: #234551 !important;
}

body.light-theme .access-menu-brand-copy small,
body.light-theme .access-option-value {
    color: #718995 !important;
}

body.light-theme .access-option {
    color: #57727e !important;
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(15,49,66,.09) !important;
}

body.light-theme .access-option:hover,
body.light-theme .access-option.active {
    color: #143846 !important;
    background: rgba(14,165,233,.07) !important;
    border-color: rgba(14,165,233,.20) !important;
}

body.light-theme .ai-chat-panel {
    background: linear-gradient(145deg, rgba(252,255,255,.985), rgba(241,247,250,.99)) !important;
    border-color: rgba(15,49,66,.12) !important;
    box-shadow: 0 45px 110px rgba(23,56,71,.18) !important;
}

body.light-theme .ai-chat-header,
body.light-theme .ai-chat-form,
body.light-theme .ai-chat-status-bar {
    background: rgba(255,255,255,.62) !important;
    border-color: rgba(15,49,66,.08) !important;
}

body.light-theme .ai-chat-title strong,
body.light-theme .ai-message-bubble,
body.light-theme .ai-welcome-card h3 {
    color: #1d3947 !important;
}

body.light-theme .ai-chat-title > span,
body.light-theme .ai-message-meta,
body.light-theme .ai-welcome-card p,
body.light-theme .ai-chat-form-footer,
body.light-theme .ai-disclaimer-content p {
    color: #6f8691 !important;
}

body.light-theme .ai-message.assistant .ai-message-bubble {
    background: rgba(255,255,255,.78) !important;
    border-color: rgba(15,49,66,.08) !important;
    color: #36515e !important;
}

body.light-theme .ai-message.user .ai-message-bubble {
    background: rgba(14,165,233,.08) !important;
    border-color: rgba(14,165,233,.12) !important;
    color: #234552 !important;
}

body.light-theme .ai-chat-input-shell {
    background: rgba(255,255,255,.80) !important;
    border-color: rgba(15,49,66,.10) !important;
}

body.light-theme .ai-chat-input-shell textarea {
    color: #234552 !important;
}

body.light-theme .ai-chat-suggestions button {
    background: rgba(255,255,255,.78) !important;
    border-color: rgba(15,49,66,.09) !important;
    color: #5d7783 !important;
}

/* =========================================================
   ACCESSIBLE HIGH CONTRAST INTERACTION
========================================================= */

body.light-theme.acc-keyboard-focus *:focus-visible {
    outline-color: #087fba !important;
}

/* =========================================================
   THEME TRANSITION
========================================================= */

body.theme-transition,
body.theme-transition * {
    transition:
        background-color .45s ease,
        color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        fill .45s ease !important;
}

@media (max-width: 960px) {
    .theme-toggle-copy small {
        display: none;
    }

    .theme-toggle {
        padding-inline: 7px;
    }
}

@media (max-width: 700px) {
    .theme-toggle {
        min-width: 44px;
        width: 44px;
        padding: 0;
        justify-content: center;
    }

    .theme-toggle-copy,
    .theme-toggle-switch {
        display: none;
    }
}


/* =========================================================
   REVIEWS — CLARITY + LIGHT THEME UPGRADE
   Keeps the existing layout/animation while making the
   section much clearer and fully compatible with light mode.
========================================================= */

.reviews-section {
    isolation: isolate;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(56,189,248,.09),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #050a0f 0%,
            #071119 100%
        );
}

.reviews-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(56,189,248,.025) 50%,
            transparent
        );
}

.reviews-kicker {
    justify-content: center;
}

.section-heading.light .reviews-intro {
    max-width: 720px;
    margin: 16px auto 0;
    color: #8097a3;
    font-size: .88rem;
    line-height: 1.95;
}

.reviews-summary {
    width: fit-content;
    max-width: 100%;
    margin: 22px auto 0;
    padding: 9px 13px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    box-shadow:
        0 12px 30px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.reviews-summary-stars {
    color: #f0b323;
    font-size: .74rem;
    letter-spacing: .12em;
    direction: ltr;
}

.reviews-summary-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    line-height: 1.15;
}

.reviews-summary-copy strong {
    color: #eaf8fd;
    font-size: .64rem;
    font-weight: 900;
}

.reviews-summary-copy small {
    margin-top: 4px;
    color: #5d7581;
    font-size: .51rem;
}

.review-card {
    position: relative;
    min-height: 255px;
    padding: 26px 25px 23px;
    border-color: rgba(255,255,255,.075);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.042),
            rgba(255,255,255,.018)
        );
    box-shadow:
        0 18px 45px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 22px;
    left: 22px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(56,189,248,.38),
            transparent
        );
    opacity: .55;
}

.review-card:hover {
    transform: translateY(-5px);
    border-color: rgba(56,189,248,.20);
    background:
        linear-gradient(
            145deg,
            rgba(56,189,248,.07),
            rgba(255,255,255,.025)
        );
    box-shadow:
        0 24px 55px rgba(0,0,0,.22),
        0 0 35px rgba(56,189,248,.045);
}

.review-card-label {
    width: fit-content;
    margin-top: 15px;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(56,189,248,.10);
    border-radius: 8px;
    color: #73cfe9;
    background: rgba(56,189,248,.035);
    font-size: .5rem;
    font-weight: 800;
}

.review-card-label i {
    font-size: .47rem;
}

.review-card p {
    margin-top: 17px;
    color: #afc1c9;
    font-size: .84rem;
    line-height: 1.95;
}

.review-card strong {
    margin-top: 21px;
    color: #edf9fd;
    font-size: .75rem;
}

.reviews-actions {
    padding-top: 2px;
}

.review-trust {
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 14px;
    background: rgba(255,255,255,.018);
}

.review-buttons {
    align-items: center;
}

.review-button.secondary {
    background: rgba(255,255,255,.025);
    border-color: rgba(255,255,255,.09);
}

@media (max-width: 760px) {
    .section-heading.light .reviews-intro {
        font-size: .79rem;
    }

    .reviews-summary {
        justify-content: center;
    }

    .reviews-actions {
        gap: 18px;
    }

    .review-trust {
        width: 100%;
    }
}

/* =========================================================
   LIGHT MODE — REVIEWS
========================================================= */

body.light-theme .reviews-section {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(14,165,233,.11),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #f5fafc 0%,
            #eaf2f6 100%
        ) !important;
    border-top-color: rgba(15,49,66,.08) !important;
    border-bottom-color: rgba(15,49,66,.08) !important;
}

body.light-theme .reviews-section::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(14,165,233,.035) 50%,
            transparent
        );
}

body.light-theme .reviews-bg-glow {
    background: rgba(14,165,233,.075);
    opacity: .8;
}

body.light-theme .reviews-section .section-kicker {
    color: #0e8fcf !important;
    background: rgba(14,165,233,.07) !important;
    border-color: rgba(14,165,233,.16) !important;
}

body.light-theme .reviews-section .section-kicker i {
    color: #0e8fcf !important;
}

body.light-theme .reviews-section .section-heading h2,
body.light-theme .reviews-section .section-heading.light h2 {
    color: #102b39 !important;
}

body.light-theme .reviews-section .section-heading h2 span {
    color: #0e95cf !important;
}

body.light-theme .reviews-section .reviews-intro {
    color: #5f7682 !important;
}

body.light-theme .reviews-summary {
    border-color: rgba(15,49,66,.10);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(244,249,252,.80)
        );
    box-shadow:
        0 15px 35px rgba(26,58,72,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body.light-theme .reviews-summary-copy strong {
    color: #244352 !important;
}

body.light-theme .reviews-summary-copy small {
    color: #728a95 !important;
}

body.light-theme .reviews-marquee {
    mask-image:
        linear-gradient(
            to right,
            transparent,
            black 7%,
            black 93%,
            transparent
        );
}

body.light-theme .review-card {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(244,249,252,.86)
        ) !important;
    border-color: rgba(15,49,66,.10) !important;
    box-shadow:
        0 18px 45px rgba(29,65,80,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body.light-theme .review-card:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(238,248,252,.92)
        ) !important;
    border-color: rgba(14,165,233,.22) !important;
    box-shadow:
        0 25px 55px rgba(28,63,79,.12),
        0 0 35px rgba(14,165,233,.06);
}

body.light-theme .review-card::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(14,165,233,.34),
            transparent
        );
}

body.light-theme .review-stars,
body.light-theme .trust-stars {
    color: #e1a118 !important;
}

body.light-theme .review-card-label {
    color: #1687b8 !important;
    background: rgba(14,165,233,.055) !important;
    border-color: rgba(14,165,233,.12) !important;
}

body.light-theme .review-card p {
    color: #536c78 !important;
}

body.light-theme .review-card strong {
    color: #1d3b49 !important;
}

body.light-theme .review-top > span {
    color: #77909a !important;
}

body.light-theme .review-trust {
    background:
        rgba(255,255,255,.70) !important;
    border-color:
        rgba(15,49,66,.09) !important;
    box-shadow:
        0 12px 30px rgba(26,58,72,.06);
}

body.light-theme .review-trust strong {
    color: #244352 !important;
}

body.light-theme .review-trust small {
    color: #718893 !important;
}

body.light-theme .review-button.secondary {
    color: #2a4a58 !important;
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(15,49,66,.12) !important;
}

body.light-theme .review-button.secondary:hover {
    color: #0c85bb !important;
    background: rgba(14,165,233,.06) !important;
    border-color: rgba(14,165,233,.18) !important;
}

body.light-theme .review-button.primary {
    color: #06202b !important;
    box-shadow: 0 12px 30px rgba(14,165,233,.15);
}

/* Make the transition apply to the whole reviews system */
body.theme-transition .reviews-section,
body.theme-transition .review-card,
body.theme-transition .reviews-summary,
body.theme-transition .review-trust,
body.theme-transition .review-button,
body.theme-transition .review-card-label {
    transition:
        background .45s ease,
        color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        transform .35s var(--ease);
}

/* =========================================================
   LIGHT MODE — EXTRA READABILITY
========================================================= */

body.light-theme .hero-description,
body.light-theme .section-heading p,
body.light-theme .intro-section p,
body.light-theme .process-copy span,
body.light-theme .stat-box p {
    color: #627984;
}

body.light-theme .hero h1 span,
body.light-theme .hero h1 strong {
    background:
        linear-gradient(
            100deg,
            #183746 8%,
            #0f9fd4 48%,
            #087db1 92%
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Avoid oversized / low-contrast text in light mode */
body.light-theme .reviews-section .section-heading {
    margin-bottom: 46px;
}
/* =========================================================
   MANOLAN-RAN
   LIGHT DEFAULT / DARK OPTIONAL
   FINAL VISUAL OVERRIDES
========================================================= */

/* =========================================================
   LIGHT DEFAULT PRELOAD
========================================================= */

html.theme-light-preload {
    background: #f4f8fb;
}

html.theme-light-preload body {
    --bg: #f4f8fb;
    --bg-2: #edf6fa;
    --bg-3: #e4f0f5;

    background:
        radial-gradient(
            circle at 15% 8%,
            rgba(56,189,248,.11),
            transparent 27%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(14,165,233,.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fafdff 0%,
            #edf5f9 100%
        );

    color: #213744;
}


/* =========================================================
   LIGHT BODY
========================================================= */

body.light-theme {

    background:
        radial-gradient(
            circle at 15% 8%,
            rgba(56,189,248,.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(14,165,233,.065),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #eef6fa 100%
        );

    color:
        #203946;
}


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

body.light-theme .nav-shell {

    background:
        rgba(255,255,255,.86) !important;

    border-color:
        rgba(15,49,66,.10) !important;

    box-shadow:
        0 18px 50px rgba(28,65,81,.09),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.light-theme .site-header.scrolled .nav-shell {

    background:
        rgba(255,255,255,.93) !important;

    border-color:
        rgba(14,165,233,.14) !important;
}


/* =========================================================
   BRAND
========================================================= */

body.light-theme .brand-copy strong {
    color:
        #102c39 !important;
}

body.light-theme .brand-copy small {
    color:
        #78919d !important;
}


/* =========================================================
   NAV LINKS
========================================================= */

body.light-theme .nav-link {
    color:
        #57727f !important;
}

body.light-theme .nav-link:hover,
body.light-theme .nav-link.active {
    color:
        #102f3d !important;
}


/* =========================================================
   MOBILE THEME BUTTON
========================================================= */

.mobile-theme-toggle {

    width:
        100%;

    min-height:
        48px;

    margin-top:
        9px;

    justify-content:
        space-between;

    padding:
        6px 9px;

    border-radius:
        13px;
}

body.light-theme .mobile-theme-toggle {

    color:
        #f8fdff !important;

    background:
        linear-gradient(
            145deg,
            #101b22,
            #172b35
        ) !important;

    border-color:
        rgba(0,0,0,.15) !important;
}


/* =========================================================
   HERO
========================================================= */

body.light-theme .hero-section {

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(56,189,248,.11),
            transparent 31%
        ),
        radial-gradient(
            circle at 20% 65%,
            rgba(14,165,233,.065),
            transparent 33%
        ) !important;
}

body.light-theme .hero h1 {
    color:
        #153441 !important;
}

body.light-theme .hero-description {
    color:
        #617a87 !important;
}


/* =========================================================
   HERO IMAGE
========================================================= */

body.light-theme .hero-image-frame {
    background: #eef5f8 !important;
    border-color: rgba(14,165,233,.24) !important;
    box-shadow:
        0 24px 60px rgba(27,64,80,.14),
        0 0 45px rgba(14,165,233,.08) !important;
}


/* =========================================================
   STATS
========================================================= */

body.light-theme .stats-grid {

    background:
        rgba(255,255,255,.72) !important;

    border-color:
        rgba(15,49,66,.10) !important;

    box-shadow:
        0 18px 50px rgba(29,64,79,.07);
}

body.light-theme .stat-box {

    background:
        rgba(255,255,255,.34);
}

body.light-theme .stat-number {
    color:
        #163744 !important;
}

body.light-theme .stat-box p {
    color:
        #6c8490 !important;
}


/* =========================================================
   GENERIC CARDS
========================================================= */

body.light-theme .service-selector,
body.light-theme .service-showcase,
body.light-theme .why-card,
body.light-theme .process-card,
body.light-theme .contact-copy,
body.light-theme .contact-map-wrap,
body.light-theme .faq-side,
body.light-theme .faq-item {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            rgba(246,251,253,.82)
        ) !important;

    border-color:
        rgba(15,49,66,.10) !important;

    box-shadow:
        0 15px 42px rgba(27,62,77,.055) !important;
}


/* =========================================================
   SERVICES
========================================================= */

body.light-theme .service-selector:hover {

    transform:
        translateX(-3px);

    background:
        linear-gradient(
            145deg,
            rgba(14,165,233,.075),
            rgba(255,255,255,.95)
        ) !important;

    border-color:
        rgba(14,165,233,.20) !important;
}

body.light-theme .service-selector.active {

    background:
        linear-gradient(
            145deg,
            rgba(14,165,233,.10),
            rgba(255,255,255,.97)
        ) !important;

    border-color:
        rgba(14,165,233,.26) !important;

    box-shadow:
        0 16px 35px rgba(14,165,233,.08) !important;
}

body.light-theme .service-selector-content strong {
    color:
        #203d4a !important;
}

body.light-theme .service-selector-content small {
    color:
        #718995 !important;
}

body.light-theme .service-panel-content h3 {
    color:
        #183744 !important;
}

body.light-theme .service-panel-content p {
    color:
        #657d88 !important;
}


/* =========================================================
   WHY
========================================================= */

body.light-theme .why-card.featured {

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(56,189,248,.14),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(231,249,255,.95),
            rgba(255,255,255,.84)
        ) !important;
}


/* =========================================================
   PROCESS
========================================================= */

body.light-theme .process-line {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(14,165,233,.28),
            rgba(14,165,233,.28),
            transparent
        );
}


/* =========================================================
   GALLERY
========================================================= */

body.light-theme .gallery-section {

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(56,189,248,.055),
            transparent 40%
        ) !important;
}

body.light-theme .gallery-card {

    background:
        #eaf3f7;

    border-color:
        rgba(15,49,66,.10);
}

body.light-theme .gallery-overlay {

    background:
        rgba(255,255,255,.86) !important;

    border-color:
        rgba(15,49,66,.08);

    color:
        #274654;
}


/* =========================================================
   REVIEWS
========================================================= */

body.light-theme .reviews-section {

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(14,165,233,.11),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #fafdff 0%,
            #eaf3f7 100%
        ) !important;
}

body.light-theme .reviews-summary {

    background:
        rgba(255,255,255,.84) !important;

    border-color:
        rgba(15,49,66,.10) !important;
}


/* =========================================================
   CONTACT
========================================================= */

body.light-theme .contact-detail:hover {

    background:
        rgba(14,165,233,.045) !important;
}


/* =========================================================
   FAQ
========================================================= */

body.light-theme .faq-question {
    color: #0b222f !important;
    font-weight: 700 !important;
}


/* =========================================================
   EMERGENCY
========================================================= */

body.light-theme .emergency-section {

    background:
        linear-gradient(
            135deg,
            #eaf9fd,
            #dff2f7
        ) !important;
}


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

body.light-theme .site-footer {

    background:
        linear-gradient(
            180deg,
            #eef5f8,
            #e2edf2
        ) !important;

    border-top-color:
        rgba(15,49,66,.10) !important;
}


/* =========================================================
   FLOATING ACTIONS
========================================================= */

body.light-theme .floating-actions a {

    box-shadow:
        0 16px 38px rgba(21,55,69,.14);
}


/* =========================================================
   ACCESSIBILITY + CHATBOT
========================================================= */

body.light-theme #access-btn {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf5f8
        ) !important;

    color:
        #173b4a !important;

    border-color:
        rgba(14,165,233,.18) !important;
}

body.light-theme .ai-chat-panel {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0f7fa
        ) !important;
}


/* =========================================================
   THEME TRANSITION
========================================================= */

body.theme-transition,
body.theme-transition * {

    transition:
        background-color .45s ease,
        color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        fill .45s ease !important;
}


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

@media (max-width: 960px) {

    body.light-theme .mobile-nav {

        background:
            rgba(250,253,255,.96) !important;

        border-color:
            rgba(15,49,66,.11) !important;

        box-shadow:
            0 30px 80px rgba(27,63,78,.15) !important;
    }

    body.light-theme .mobile-nav-link {

        color:
            #294754 !important;
    }
}


@media (max-width: 700px) {

    body.light-theme {

        background:
            linear-gradient(
                180deg,
                #fbfdff,
                #edf5f9
            );
    }

    body.light-theme .theme-toggle {

        width:
            100%;

        min-width:
            0;

        min-height:
            46px;

        padding:
            0 10px;

        justify-content:
            space-between;
    }

    .mobile-theme-toggle .theme-toggle-copy {
        display:
            flex;
    }

    .mobile-theme-toggle .theme-toggle-switch {
        display:
            flex;
    }
}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.theme-transition,
    body.theme-transition * {

        transition:
            none !important;
    }
}
/* =========================================================
   MANOLAN-RAN — ACCESSIBILITY LIGHT THEME
========================================================= */

body.light-theme #access-btn {
    color: #164252 !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf7fb
        ) !important;

    border-color:
        rgba(14,165,233,.22) !important;

    box-shadow:
        0 16px 42px rgba(25,63,79,.14),
        0 0 28px rgba(14,165,233,.06),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.light-theme #access-btn:hover {
    color: #0d78a8 !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #e7f5fa
        ) !important;

    border-color:
        rgba(14,165,233,.38) !important;

    box-shadow:
        0 22px 52px rgba(25,63,79,.17),
        0 0 38px rgba(14,165,233,.09) !important;
}

body.light-theme #access-btn .access-trigger-pulse {
    background: #22b78e;
    box-shadow: 0 0 12px rgba(34,183,142,.55);
}

body.light-theme #access-menu {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.985),
            rgba(240,248,251,.99)
        ) !important;

    border-color:
        rgba(15,49,66,.11) !important;

    box-shadow:
        0 35px 90px rgba(27,63,79,.17),
        0 0 50px rgba(14,165,233,.05) !important;

    color: #244654 !important;
}

body.light-theme #access-menu::before {
    background: rgba(14,165,233,.055);
}

body.light-theme #access-menu::after {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);
}

body.light-theme .access-menu-header {
    border-bottom-color:
        rgba(15,49,66,.09);
}

body.light-theme .access-menu-brand-icon {
    color: #0e8fc9;

    background:
        linear-gradient(
            145deg,
            rgba(14,165,233,.10),
            rgba(14,165,233,.025)
        );

    border-color:
        rgba(14,165,233,.15);
}

body.light-theme .access-menu-brand-copy strong {
    color: #203e4b !important;
}

body.light-theme .access-menu-brand-copy small {
    color: #78919c !important;
}

body.light-theme .access-menu-close {
    color: #617b87;

    background: rgba(15,49,66,.025);

    border-color:
        rgba(15,49,66,.09);
}

body.light-theme .access-menu-close:hover {
    color: #183b4a;

    background:
        rgba(14,165,233,.055);

    border-color:
        rgba(14,165,233,.20);
}

body.light-theme .access-menu-status {
    color: #397c6d;

    background:
        rgba(45,212,191,.055);

    border-color:
        rgba(45,212,191,.15);
}

body.light-theme .access-section-label {
    color: #66818d;
}

body.light-theme .access-option {
    color: #55717d !important;

    background:
        rgba(255,255,255,.74) !important;

    border-color:
        rgba(15,49,66,.09) !important;
}

body.light-theme .access-option:hover {
    color: #173b4a !important;

    background:
        rgba(14,165,233,.055) !important;

    border-color:
        rgba(14,165,233,.20) !important;
}

body.light-theme .access-option.active {
    color: #163946 !important;

    background:
        linear-gradient(
            145deg,
            rgba(14,165,233,.10),
            rgba(255,255,255,.90)
        ) !important;

    border-color:
        rgba(14,165,233,.25) !important;

    box-shadow:
        0 8px 22px rgba(25,63,79,.07),
        inset 0 0 0 1px rgba(14,165,233,.025);
}

body.light-theme .access-option-icon {
    color: #0d91cb;

    background:
        rgba(14,165,233,.07);

    border-color:
        rgba(14,165,233,.12);
}

body.light-theme .access-option.active .access-option-icon {
    color: #087eb4;

    background:
        rgba(14,165,233,.11);

    border-color:
        rgba(14,165,233,.16);
}

body.light-theme .access-option-value {
    color: #79909b;
}

body.light-theme #btn-reset-all {
    color: #a04c4c;

    background:
        rgba(248,113,113,.035);

    border-color:
        rgba(190,70,70,.13);
}

body.light-theme #btn-reset-all:hover {
    color: #8e3030;

    background:
        rgba(248,113,113,.065);

    border-color:
        rgba(190,70,70,.24);
}

body.light-theme .access-language-button {
    color: #294b59;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(241,248,251,.86)
        );

    border-color:
        rgba(15,49,66,.09);
}

body.light-theme .access-language-button:hover {
    background:
        rgba(14,165,233,.055);

    border-color:
        rgba(14,165,233,.20);
}

body.light-theme .access-language-icon {
    color: #0d90c8;

    background:
        rgba(14,165,233,.07);

    border-color:
        rgba(14,165,233,.12);
}

body.light-theme .access-language-copy strong {
    color: #254653;
}

body.light-theme .access-language-copy small {
    color: #7a919b;
}

body.light-theme .access-language-arrow {
    color: #6b858f;
}

body.light-theme .access-language-menu {
    background:
        rgba(250,254,255,.99);

    border-color:
        rgba(15,49,66,.11);

    box-shadow:
        0 25px 65px rgba(27,63,79,.16);
}

body.light-theme .access-language-option {
    color: #58727d;

    background:
        rgba(255,255,255,.72);

    border-color:
        rgba(15,49,66,.07);
}

body.light-theme .access-language-option:hover,
body.light-theme .access-language-option.active {
    color: #173b4a;

    background:
        rgba(14,165,233,.065);

    border-color:
        rgba(14,165,233,.18);
}

body.light-theme .access-language-flag {
    background:
        rgba(15,49,66,.035);
}

body.light-theme .accessibility-toast,
body.light-theme .access-translation-toast {
    color: #284956;

    background:
        rgba(255,255,255,.97);

    border-color:
        rgba(14,165,233,.15);

    box-shadow:
        0 20px 50px rgba(27,63,79,.15);
}

body.light-theme .accessibility-toast i,
body.light-theme .access-translation-toast i {
    color: #0b9a72;
}
/* =========================================================
   THEME TOGGLE — LIGHT MODE
========================================================= */

body.light-theme .theme-toggle,
body.light-theme .mobile-theme-toggle {
    color: #234654 !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf7fb
        ) !important;

    border-color:
        rgba(14,165,233,.18) !important;

    box-shadow:
        0 10px 28px rgba(25,63,79,.10),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.light-theme .theme-toggle:hover,
body.light-theme .mobile-theme-toggle:hover {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #e8f5f9
        ) !important;

    border-color:
        rgba(14,165,233,.30) !important;
}

body.light-theme .theme-toggle-icon {
    color: #0b91c9 !important;

    background:
        rgba(14,165,233,.075) !important;
}

body.light-theme .theme-toggle-copy strong {
    color: #234654 !important;
}

body.light-theme .theme-toggle-copy small {
    color: #778f99 !important;
}

body.light-theme .theme-toggle-switch {
    background:
        rgba(14,165,233,.12) !important;
}

body.light-theme .theme-toggle-switch span {
    background: #0ea5e9 !important;

    box-shadow:
        0 0 10px rgba(14,165,233,.25) !important;
}
/* =========================================================
REVIEWS — EMPTY STATE
עיצוב בלעדי למצב שבו עדיין אין ביקורות
========================================================= */

.review-empty-card {
position: relative;

width: 520px;
min-height: 250px;

flex: 0 0 520px;

display: flex;
align-items: center;

gap: 24px;

padding: 30px 34px;

overflow: hidden;

border:
    1px solid
    rgba(56,189,248,.13);

border-radius: 24px;

background:
    linear-gradient(
        145deg,
        rgba(56,189,248,.055),
        rgba(255,255,255,.018)
    );

box-shadow:
    0 20px 55px
    rgba(0,0,0,.20),
    inset 0 1px 0
    rgba(255,255,255,.035);

}

/* =========================================================
EMPTY STATE GLOW
========================================================= */

.review-empty-card::before {
content: "";

position: absolute;

width: 190px;
height: 190px;

top: -90px;
right: -70px;

border-radius: 50%;

background:
    radial-gradient(
        circle,
        rgba(56,189,248,.14),
        transparent 68%
    );

filter:
    blur(20px);

pointer-events: none;

}

.review-empty-card::after {
content: "";

position: absolute;

inset: 0;

background:
    linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,.025) 45%,
        transparent 70%
    );

transform:
    translateX(-100%);

animation:
    reviewEmptyShine
    5s
    ease-in-out
    infinite;

pointer-events:
    none;

}

@keyframes reviewEmptyShine {

0%,
55% {
    transform:
        translateX(-100%);
}

75%,
100% {
    transform:
        translateX(100%);
}

}

/* =========================================================
EMPTY ICON
========================================================= */

.review-empty-icon {
position: relative;

width: 70px;
height: 70px;

flex: 0 0 70px;

display: grid;
place-items: center;

border:
    1px solid
    rgba(56,189,248,.16);

border-radius: 20px;

color:
    #7ddcff;

background:
    radial-gradient(
        circle at 50% 40%,
        rgba(56,189,248,.14),
        rgba(56,189,248,.035)
    );

box-shadow:
    0 0 30px
    rgba(56,189,248,.08);

font-size:
    1.25rem;

z-index:
    2;

}

.review-empty-icon::before {
content: "";

position: absolute;

inset: -6px;

border:
    1px solid
    rgba(56,189,248,.05);

border-radius: 24px;

animation:
    reviewEmptyPulse
    3s
    ease-in-out
    infinite;

}

@keyframes reviewEmptyPulse {

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

50% {
    opacity: 1;
    transform: scale(1.04);
}

}

/* =========================================================
EMPTY CONTENT
========================================================= */

.review-empty-content {
position:
relative;

z-index:
    2;

min-width:
    0;

display:
    flex;

flex-direction:
    column;

align-items:
    flex-start;

}

.review-empty-kicker {
color:
#63cff5;

font-size:
    .50rem;

font-weight:
    900;

letter-spacing:
    .08em;

text-transform:
    uppercase;

margin-bottom:
    7px;

}

.review-empty-content h3 {
margin:
0;

color:
    #eafaff;

font-size:
    1.02rem;

line-height:
    1.45;

font-weight:
    900;

}

.review-empty-content p {
margin:
8px 0 0;

max-width:
    390px;

color:
    #78929d;

font-size:
    .63rem;

line-height:
    1.85;

}

/* =========================================================
EMPTY BUTTON
========================================================= */

.review-empty-button {
margin-top:
16px;

display:
    inline-flex;

align-items:
    center;

gap:
    8px;

min-height:
    38px;

padding:
    0 13px;

border:
    1px solid
    rgba(56,189,248,.18);

border-radius:
    11px;

color:
    #06202b;

background:
    linear-gradient(
        135deg,
        #b9efff,
        #38bdf8
    );

text-decoration:
    none;

font-size:
    .57rem;

font-weight:
    900;

box-shadow:
    0 10px 28px
    rgba(56,189,248,.09);

transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;

}

.review-empty-button {
transform:
translateY(-2px);

box-shadow:
    0 14px 34px
    rgba(56,189,248,.17);

filter:
    brightness(1.04);

}

.review-empty-button i {
font-size:
.46rem;
}

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

@media (max-width: 700px) {

.review-empty-card {
    width:
        285px;

    flex-basis:
        285px;

    min-height:
        230px;

    padding:
        24px 20px;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    gap:
        15px;

    border-radius:
        19px;
}


.review-empty-icon {
    width:
        54px;

    height:
        54px;

    flex-basis:
        54px;

    border-radius:
        16px;

    font-size:
        1rem;
}


.review-empty-content h3 {
    font-size:
        .84rem;
}


.review-empty-content p {
    font-size:
        .55rem;

    line-height:
        1.75;
}


.review-empty-button {
    min-height:
        35px;

    font-size:
        .52rem;

    padding:
        0 11px;
}

}

/* =========================================================
LIGHT THEME
========================================================= */

body.light-theme .review-empty-card {
border-color:
rgba(14,165,233,.14);

background:
    linear-gradient(
        145deg,
        rgba(14,165,233,.055),
        rgba(255,255,255,.86)
    );

box-shadow:
    0 20px 55px
    rgba(27,63,79,.12),
    inset 0 1px 0
    rgba(255,255,255,.95);

}

body.light-theme .review-empty-icon {
color:
#0d86b4;

background:
    radial-gradient(
        circle at 50% 40%,
        rgba(14,165,233,.12),
        rgba(14,165,233,.025)
    );

border-color:
    rgba(14,165,233,.14);

}

body.light-theme .review-empty-kicker {
color:
#0c8cba;
}

body.light-theme .review-empty-content h3 {
color:
#183c4b;
}

body.light-theme .review-empty-content p {
color:
#718791;
}

body.light-theme .review-empty-button {
color:
#06202b;

background:
    linear-gradient(
        135deg,
        #b9efff,
        #38bdf8
    );

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

.review-empty-card::after,
.review-empty-icon::before {
    animation:
        none !important;
}

}

/* =========================================================
   MANOLAN-RAN — PREMIUM POLISH + PERFORMANCE LAYER
   Keeps the existing visual language and cyan/blue palette.
   Safe additive overrides.
========================================================= */

/* ---------- PERFORMANCE BASE ---------- */

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 320px;
    overflow-x: clip;
}

img,
picture,
video,
canvas {
    max-width: 100%;
}

img {
    content-visibility: auto;
    contain-intrinsic-size: 720px 520px;
}

.site-noise {
    opacity: .018;
    contain: strict;
    transform: translateZ(0);
}

.page-glow {
    contain: paint;
    transform: translateZ(0);
    will-change: opacity;
}

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

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

/* ---------- HEADER / NAV ---------- */

.site-header {
    padding: 14px 18px;
}

.nav-shell {
    min-height: 70px;
    padding-inline: 16px;
    border-radius: 18px;
    box-shadow:
        0 14px 38px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.045);
}

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

.site-header.scrolled .nav-shell {
    min-height: 64px;
    background: rgba(5,9,13,.92);
}

.brand-mark {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    border-radius: 13px;
}

.desktop-nav {
    gap: 3px;
}

.nav-link {
    border-radius: 10px;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(56,189,248,.045);
}

.nav-call,
.nav-request {
    transform: translateZ(0);
}

.nav-call {
    min-height: 44px;
}

.nav-request {
    min-height: 44px;
    box-shadow:
        0 10px 28px rgba(56,189,248,.16),
        inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---------- HERO ---------- */

.hero-section {
    min-height: min(920px, 100vh);
    padding-top: 148px;
    padding-bottom: 95px;
}

.hero-grid {
    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(410px, .88fr);
    gap: clamp(40px, 5vw, 78px);
}

.hero-content {
    position: relative;
}

.eyebrow {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 10px 28px rgba(56,189,248,.035);
}

.hero h1 {
    max-width: 760px;
    text-wrap: balance;
}

.hero-description {
    max-width: 620px;
    text-wrap: pretty;
}

.hero-actions {
    flex-wrap: wrap;
}

.primary-button,
.secondary-button,
.nav-request {
    will-change: transform;
}

.hero-visual {
    contain: layout paint;
}

.hero-cert-showcase {
    will-change: transform;
}

.hero-image-frame {
    contain: paint;
}

.hero-image-frame img {
    will-change: transform;
}

/* ---------- TRUST / STATS ---------- */

.stats-grid {
    box-shadow:
        0 20px 60px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.stat-box {
    transition:
        background .25s ease,
        transform .25s ease;
}

.stat-box:hover {
    background: rgba(56,189,248,.025);
}

.stat-number {
    text-shadow:
        0 0 24px rgba(56,189,248,.08);
}

/* ---------- SECTION HEADINGS ---------- */

.section-heading,
.process-header {
    scroll-margin-top: 120px;
}

.section-heading h2,
.process-header h2,
.contact-copy h2 {
    text-wrap: balance;
}

.section-heading p,
.process-header p,
.contact-copy p {
    text-wrap: pretty;
}

/* ---------- SERVICES ---------- */

.services-layout {
    grid-template-columns:
        minmax(300px, 350px)
        minmax(0, 1fr);
}

.service-selector {
    min-height: 88px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.service-selector.active {
    box-shadow:
        inset 0 0 0 1px rgba(56,189,248,.025),
        inset 0 0 30px rgba(56,189,248,.025),
        0 10px 25px rgba(0,0,0,.10);
}

.service-showcase {
    contain: layout paint;
}

.service-panel {
    contain: layout paint;
}

.service-panel-image img {
    will-change: transform;
    transform: translateZ(0);
}

/* ---------- WHY / PROCESS ---------- */

.why-card,
.process-card,
.gallery-card,
.review-card {
    contain: layout paint;
}

.why-card:hover {
    box-shadow:
        0 22px 58px rgba(0,0,0,.24),
        0 0 30px rgba(56,189,248,.035);
}

.process-card {
    transition:
        transform .3s var(--ease),
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.process-card:hover {
    transform: translateY(-5px);
    border-color: rgba(56,189,248,.17);
    background: rgba(56,189,248,.028);
    box-shadow: 0 18px 44px rgba(0,0,0,.18);
}

/* ---------- GALLERY ---------- */

.gallery-masonry {
    grid-auto-rows: 235px;
}

.gallery-card {
    isolation: isolate;
}

.gallery-card img {
    transform: translateZ(0);
    will-change: transform;
}

.gallery-overlay {
    pointer-events: none;
}

.gallery-card:hover .gallery-overlay {
    pointer-events: auto;
}

/* ---------- REVIEWS ---------- */

.reviews-section {
    contain: layout paint;
}

.reviews-bg-glow {
    contain: paint;
}

.reviews-track {
    will-change: transform;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
}

.review-card {
    isolation: isolate;
}

.review-card::before {
    filter: blur(24px);
}

.review-card:hover {
    transform: translate3d(0,-5px,0);
}

.review-button,
.review-empty-button {
    will-change: transform;
}

/* ---------- CONTACT / FAQ / EMERGENCY ---------- */

.contact-card,
.contact-box,
.faq-item,
.emergency-card,
.service-area-card,
.review-summary-card {
    contain: layout paint;
}

.contact-card,
.contact-box,
.faq-item,
.emergency-card,
.service-area-card {
    transition:
        transform .3s var(--ease),
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.contact-card:hover,
.contact-box:hover,
.emergency-card:hover,
.service-area-card:hover {
    transform: translateY(-4px);
    border-color: rgba(56,189,248,.16);
    box-shadow:
        0 20px 48px rgba(0,0,0,.18);
}

.faq-item {
    overflow: clip;
}

.faq-item summary {
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

/* ---------- BUTTON SYSTEM ---------- */

.primary-button,
.secondary-button,
.panel-link,
.review-button,
.gallery-expand-button,
.nav-request,
.mobile-action {
    -webkit-user-select: none;
    user-select: none;
}

.primary-button:hover,
.secondary-button:hover,
.review-button:hover,
.gallery-expand-button:hover,
.nav-request:hover {
    filter: brightness(1.03);
}

.primary-button:active,
.secondary-button:active,
.review-button:active,
.gallery-expand-button:active,
.nav-request:active {
    transform: translateY(0);
}

/* ---------- LIGHT THEME CONSISTENCY ---------- */

body.light-theme {
    --bg: #f4f8fb;
    --bg-2: #edf5f8;
    --bg-3: #e7f0f4;
    --surface: rgba(15,49,66,.045);
    --surface-strong: rgba(15,49,66,.07);
    --surface-blue: rgba(14,165,233,.065);
    --border: rgba(15,49,66,.10);
    --border-blue: rgba(14,165,233,.20);
    --text: #244654;
    --muted: #68818d;
    --muted-2: #8197a1;
}

body.light-theme .site-noise {
    opacity: .012;
}

body.light-theme .nav-shell {
    background: rgba(255,255,255,.80);
    border-color: rgba(15,49,66,.09);
    box-shadow:
        0 14px 38px rgba(27,63,79,.10),
        inset 0 1px 0 rgba(255,255,255,.90);
}

body.light-theme .site-header.scrolled .nav-shell {
    background: rgba(255,255,255,.93);
}

body.light-theme .nav-link {
    color: #597481;
}

body.light-theme .nav-link:hover,
body.light-theme .nav-link.active {
    color: #183c4b;
    background: rgba(14,165,233,.045);
}

body.light-theme .nav-call {
    border-color: rgba(15,49,66,.08);
}

body.light-theme .nav-call strong {
    color: #214653;
}

body.light-theme .nav-request {
    box-shadow:
        0 10px 28px rgba(14,165,233,.16),
        inset 0 1px 0 rgba(255,255,255,.65);
}

body.light-theme .hero-section {
    background:
        radial-gradient(circle at 80% 30%, rgba(14,165,233,.065), transparent 30%),
        radial-gradient(circle at 25% 60%, rgba(56,189,248,.04), transparent 32%);
}

body.light-theme .hero h1,
body.light-theme .section-heading h2,
body.light-theme .process-header h2,
body.light-theme .contact-copy h2 {
    color: #183c4b;
}

body.light-theme .hero-description,
body.light-theme .section-heading p,
body.light-theme .process-header p,
body.light-theme .contact-copy p {
    color: #6b838e;
}

body.light-theme .secondary-button {
    color: #294956;
    border-color: rgba(15,49,66,.09);
    background: rgba(255,255,255,.68);
}

body.light-theme .stats-grid,
body.light-theme .why-card,
body.light-theme .process-card,
body.light-theme .service-selector,
body.light-theme .service-showcase,
body.light-theme .gallery-card {
    border-color: rgba(15,49,66,.09);
}

body.light-theme .stat-box:hover,
body.light-theme .process-card:hover {
    background: rgba(14,165,233,.035);
}

/* ---------- EMPTY REVIEW FIX ---------- */

.review-empty-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 34px rgba(56,189,248,.17);
    filter: brightness(1.04);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1100px) {
    .hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, .82fr);
        gap: 42px;
    }

    .hero h1 {
        font-size: clamp(3.1rem, 6.2vw, 5.2rem);
    }

    .services-layout {
        grid-template-columns: 310px minmax(0,1fr);
    }
}

@media (max-width: 900px) {
    .site-header {
        padding-inline: 12px;
    }

    .nav-shell {
        min-height: 66px;
        padding-inline: 13px;
    }

    .desktop-nav,
    .nav-actions {
        display: none;
    }

    .mobile-menu-trigger {
        display: inline-flex;
    }

    .hero-section {
        padding-top: 125px;
        min-height: auto;
    }

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

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

    .hero-actions,
    .hero-proof {
        justify-content: center;
    }

    .hero-description {
        margin-inline: auto;
    }

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

    .hero-image-frame {
        width: min(100%, 560px);
        height: min(560px, 78vw);
    }

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

    .stat-box:not(:last-child)::after {
        display: none;
    }

    .services-layout {
        grid-template-columns: 1fr;
    }

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

    .service-showcase {
        min-height: 620px;
    }

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

    .gallery-masonry {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 220px;
    }
}

@media (max-width: 700px) {
    .container {
        width: min(var(--container), calc(100% - 28px));
    }

    .section-space {
        padding: 82px 0;
    }

    .site-header {
        padding: 9px 8px;
    }

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

    .nav-shell {
        min-height: 60px;
        border-radius: 16px;
    }

    .brand-mark {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        border-radius: 12px;
    }

    .brand-copy strong {
        font-size: 1rem;
    }

    .brand-copy small {
        font-size: .45rem;
    }

    .hero-section {
        padding:
            108px 0 66px;
    }

    .hero h1 {
        margin-top: 20px;
        font-size: clamp(2.7rem, 14vw, 4.3rem);
        line-height: 1;
    }

    .hero-description {
        margin-top: 20px;
        font-size: .92rem;
        line-height: 1.8;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: 25px;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
        justify-content: center;
    }

    .hero-proof {
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 25px;
    }

    .proof-divider {
        display: none;
    }

    .hero-visual {
        min-height: auto;
        margin-top: 14px;
    }

    .hero-orbit-one {
        width: 420px;
        height: 420px;
    }

    .hero-orbit-two {
        width: 330px;
        height: 330px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        border-radius: 18px;
    }

    .stat-box {
        min-height: 125px;
        padding: 18px 12px;
    }

    .stat-number {
        font-size: 2.05rem;
    }

    .stat-box p {
        font-size: .65rem;
    }

    .section-heading,
    .process-header {
        display: block;
        margin-bottom: 35px;
    }

    .section-heading h2,
    .process-header h2,
    .contact-copy h2 {
        font-size: clamp(2.2rem, 11vw, 3.3rem);
    }

    .section-heading p,
    .process-header p {
        margin-top: 16px;
        font-size: .86rem;
    }

    .services-list {
        grid-template-columns: 1fr;
    }

    .service-selector {
        min-height: 76px;
    }

    .service-showcase {
        min-height: 570px;
        border-radius: 22px;
    }

    .service-panel {
        grid-template-columns: 1fr;
        grid-template-rows: 240px minmax(0,1fr);
        overflow: auto;
    }

    .service-panel-image {
        min-height: 240px;
    }

    .service-panel-content {
        padding: 28px 22px 25px;
    }

    .service-panel-content h3 {
        font-size: 2.15rem;
    }

    .service-panel-content p {
        margin-top: 15px;
        font-size: .82rem;
    }

    .why-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }

    .why-card {
        min-height: 285px;
    }

    .why-icon {
        margin-top: 30px;
    }

    .gallery-masonry {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 170px;
        gap: 8px;
    }

    .gallery-card {
        border-radius: 15px;
    }

    .gallery-overlay {
        opacity: 1;
        transform: none;
        inset: auto 8px 8px;
        padding: 8px 9px;
        font-size: .56rem;
    }

    .reviews-marquee {
        mask-image:
            linear-gradient(
                to right,
                transparent 0%,
                black 4%,
                black 96%,
                transparent 100%
            );
        -webkit-mask-image:
            linear-gradient(
                to right,
                transparent 0%,
                black 4%,
                black 96%,
                transparent 100%
            );
    }

    .review-card {
        width: 300px;
        min-width: 300px;
        flex-basis: 300px;
        min-height: 225px;
        padding: 20px;
    }

    .reviews-track {
        animation-duration: 58s;
    }
}

@media (max-width: 420px) {
    .hero-proof {
        display: grid;
        grid-template-columns: 1fr;
        text-align: right;
    }

    .proof-item {
        justify-content: flex-start;
    }

    .hero-image-frame {
        height: 370px;
    }

    .gallery-masonry {
        grid-template-columns: 1fr;
        grid-auto-rows: 210px;
    }

    .gallery-card-large,
    .gallery-card-tall {
        grid-row: span 1;
    }

    .review-card {
        width: 280px;
        min-width: 280px;
        flex-basis: 280px;
    }
}

/* ---------- REDUCED MOTION / POWER SAVER ---------- */

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-security-sheen,
    .hero-cert-showcase,
    .hero-ambient-glow,
    .cert-pulse-ring,
    .hero-orbit,
    .live-dot,
    .hours-live i,
    .map-live-dot {
        animation: none !important;
    }
}

/* ---------- OPTIONAL LOW-POWER MODE ---------- */

@media (prefers-reduced-data: reduce) {
    .site-noise,
    .page-glow,
    .hero-orbit,
    .reviews-bg-glow {
        display: none !important;
    }

    .hero-image-frame::before {
        display: none !important;
    }
}

/* =========================================================
   MANOL-RAN
   HOLIDAY OFFERS POPUP
   LIGHT / PREMIUM / HIGH CONTRAST / RESPONSIVE
========================================================= */

:root {
    --qa-bg: #ffffff;
    --qa-bg-soft: #f7f9fc;
    --qa-bg-muted: #eef3f7;

    --qa-text: #14212b;
    --qa-text-soft: #42525e;
    --qa-text-muted: #667784;

    --qa-accent: #159fc4;
    --qa-accent-dark: #087d9f;
    --qa-accent-soft: rgba(21, 159, 196, 0.10);

    --qa-green: #159b5d;
    --qa-green-dark: #087748;
    --qa-green-soft: rgba(21, 155, 93, 0.10);

    --qa-gold: #c68c18;
    --qa-gold-dark: #95670c;
    --qa-gold-soft: rgba(198, 140, 24, 0.10);

    --qa-purple: #7652d8;
    --qa-purple-soft: rgba(118, 82, 216, 0.10);

    --qa-danger: #c23a3a;
    --qa-danger-soft: rgba(194, 58, 58, 0.09);

    --qa-border: rgba(18, 39, 52, 0.10);
    --qa-border-strong: rgba(18, 39, 52, 0.17);

    --qa-radius: 24px;

    --qa-shadow:
        0 40px 100px rgba(11, 31, 43, 0.24),
        0 12px 35px rgba(11, 31, 43, 0.12);
}


/* =========================================================
   GLOBAL
========================================================= */

.quick-assist,
.quick-assist *,
.quick-assist *::before,
.quick-assist *::after,
.holiday-image-lightbox,
.holiday-image-lightbox *,
.holiday-image-lightbox *::before,
.holiday-image-lightbox *::after {
    box-sizing: border-box;
}


/* =========================================================
   POPUP ROOT
========================================================= */

.quick-assist {
    position: fixed;
    inset: 0;

    z-index: 2147483000;

    width: 100%;
    height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.quick-assist.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   BACKDROP
========================================================= */

.quick-assist-backdrop {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(21, 159, 196, .14),
            transparent 36%
        ),
        rgba(10, 22, 30, .73);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    opacity: 0;

    transition:
        opacity .25s ease;
}

.quick-assist.is-open .quick-assist-backdrop {
    opacity: 1;
}


/* =========================================================
   MAIN CARD
========================================================= */

.quick-assist-card {
    position: relative;
    z-index: 5;

    width: min(760px, 100%);

    max-height:
        min(940px, calc(100dvh - 32px));

    overflow-x: hidden;
    overflow-y: auto;

    border:
        1px solid var(--qa-border-strong);

    border-radius:
        var(--qa-radius);

    background:
        #ffffff;

    box-shadow:
        var(--qa-shadow);

    opacity:
        0;

    transform:
        translateY(22px)
        scale(.975);

    transition:
        opacity .24s ease,
        transform .34s cubic-bezier(.2, .8, .2, 1);

    scrollbar-width: thin;
    scrollbar-color:
        rgba(21, 159, 196, .30)
        transparent;
}

.quick-assist.is-open .quick-assist-card {
    opacity: 1;

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


/* =========================================================
   CARD TOP LINE
========================================================= */

.quick-assist-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 9%;
    right: 9%;

    height: 3px;

    z-index: 30;

    border-radius:
        0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--qa-accent),
            var(--qa-gold),
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   CARD SIDE GLOW
========================================================= */

.quick-assist-card::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(21, 159, 196, .055),
            transparent 28%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(198, 140, 24, .045),
            transparent 28%
        );
}


/* =========================================================
   TOP BAR
========================================================= */

.holiday-popup-topbar {
    position: relative;
    z-index: 40;

    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 12px 16px;

    background:
        rgba(255,255,255,.98);

    border-bottom:
        1px solid rgba(18,39,52,.08);

    direction: rtl;
}


/* =========================================================
   OFFER BADGE
========================================================= */

.holiday-offer-badge {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 8px 11px;

    border:
        1px solid rgba(198,140,24,.23);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(198,140,24,.09),
            rgba(198,140,24,.035)
        );
}

.holiday-offer-badge-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        var(--qa-gold-soft);

    color:
        var(--qa-gold);

    font-size: 13px;
}

.holiday-offer-badge-text {
    color:
        #5c4310;

    font-size: 14px;

    font-weight: 900;

    line-height: 1.15;

    white-space: nowrap;
}

.holiday-offer-badge-live {
    min-height: 24px;

    display: inline-flex;
    align-items: center;

    padding: 0 9px;

    border:
        1px solid rgba(194,58,58,.20);

    border-radius: 8px;

    background:
        var(--qa-danger-soft);

    color:
        #a52d2d;

    font-size: 10px;

    font-weight: 900;

    white-space: nowrap;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.quick-assist-close {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid rgba(18,39,52,.12);

    border-radius: 12px;

    background:
        #f5f8fa;

    color:
        #50616d;

    font:
        inherit;

    cursor: pointer;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        color .16s ease;
}

.quick-assist-close:hover {
    transform:
        translateY(-1px);

    background:
        #edf2f5;

    border-color:
        rgba(18,39,52,.20);

    color:
        #182630;
}

.quick-assist-close:active {
    transform:
        scale(.96);
}

.quick-assist-close:focus-visible {
    outline:
        3px solid rgba(21,159,196,.28);

    outline-offset:
        3px;
}


/* =========================================================
   HERO
========================================================= */

.holiday-offer-hero {
    position: relative;
    z-index: 3;

    padding:
        16px 16px 0;

    background:
        #ffffff;
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.holiday-offer-image-wrap {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border:
        1px solid rgba(18,39,52,.10);

    border-radius:
        18px;

    background:
        #f5f7f9;

    box-shadow:
        0 14px 34px rgba(18,39,52,.10);
}


/* =========================================================
   MAIN IMAGE
   NO DARK OVERLAY
========================================================= */

.holiday-offer-image {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;

    max-height:
        430px;

    object-fit:
        contain;

    object-position:
        center;

    background:
        #ffffff;

    transform:
        scale(1);

    transition:
        transform .45s ease;
}

.quick-assist.is-open .holiday-offer-image {
    transform:
        scale(1);
}


/* =========================================================
   IMAGE SHADE
   DISABLED / TRANSPARENT
========================================================= */

.holiday-offer-image-shade {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        transparent !important;

    opacity:
        0 !important;
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.holiday-offer-image-top-label {
    position: absolute;

    left: 13px;
    bottom: 13px;

    z-index: 6;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 32px;

    padding:
        0 10px;

    border:
        1px solid rgba(18,39,52,.12);

    border-radius:
        9px;

    background:
        rgba(255,255,255,.93);

    color:
        #20323d;

    font-size:
        10px;

    font-weight:
        850;

    box-shadow:
        0 6px 18px rgba(18,39,52,.10);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}

.holiday-offer-image-top-label i {
    color:
        var(--qa-accent);
}


/* =========================================================
   IMAGE EXPAND
========================================================= */

.holiday-image-expand {
    position: absolute;

    right: 13px;
    bottom: 13px;

    z-index: 7;

    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        0 13px;

    border:
        1px solid rgba(21,159,196,.20);

    border-radius:
        10px;

    background:
        rgba(255,255,255,.96);

    color:
        #17313e;

    font:
        inherit;

    font-size:
        10px;

    font-weight:
        850;

    cursor:
        pointer;

    box-shadow:
        0 7px 20px rgba(18,39,52,.12);

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        color .16s ease;
}

.holiday-image-expand:hover {
    transform:
        translateY(-2px);

    background:
        #f2fbfe;

    border-color:
        rgba(21,159,196,.35);

    color:
        var(--qa-accent-dark);
}

.holiday-image-expand:active {
    transform:
        scale(.97);
}

.holiday-image-expand:focus-visible {
    outline:
        3px solid rgba(21,159,196,.22);

    outline-offset:
        3px;
}

.holiday-image-expand i {
    color:
        var(--qa-accent);
}


/* =========================================================
   CONTENT
========================================================= */

.quick-assist-content {
    position: relative;
    z-index: 4;

    min-width: 0;

    padding:
        24px 28px 28px;

    direction: rtl;

    color:
        var(--qa-text);
}


/* =========================================================
   KICKER ROW
========================================================= */

.holiday-kicker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin:
        0 0 9px;
}

.quick-assist-kicker {
    display: block;

    color:
        var(--qa-accent-dark);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .03em;
}


/* =========================================================
   CERTIFIED BADGE
========================================================= */

.holiday-certified-badge {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding:
        6px 9px;

    border:
        1px solid rgba(21,155,93,.18);

    border-radius:
        9px;

    background:
        var(--qa-green-soft);

    color:
        #087748;

    font-size:
        9px;

    font-weight:
        850;

    white-space:
        nowrap;
}

.holiday-certified-badge i {
    font-size:
        9px;
}


/* =========================================================
   TITLE
========================================================= */

.quick-assist-content h2 {
    max-width:
        650px;

    margin:
        0 0 14px;

    color:
        #111e27;

    font-size:
        clamp(30px, 5vw, 48px);

    font-weight:
        950;

    line-height:
        1.08;

    letter-spacing:
        -.035em;
}

.quick-assist-content h2 span {
    color:
        var(--qa-accent-dark);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.quick-assist-content > p {
    max-width:
        650px;

    margin:
        0 0 20px;

    color:
        #40525e;

    font-size:
        15px;

    font-weight:
        550;

    line-height:
        1.75;
}


/* =========================================================
   INFO STRIP
========================================================= */

.holiday-info-strip {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap:
        9px;

    margin:
        0 0 26px;
}

.holiday-info-item {
    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 10px;

    border:
        1px solid rgba(18,39,52,.09);

    border-radius:
        12px;

    background:
        #f8fafb;

    color:
        #344955;

    font-size:
        10px;

    font-weight:
        850;

    white-space:
        nowrap;
}

.holiday-info-icon {
    color:
        var(--qa-accent-dark);

    font-size:
        11px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.holiday-section-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin:
        0 0 13px;
}

.holiday-section-heading-text {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}

.holiday-section-heading-text > span {
    color:
        #72828d;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;
}

.holiday-section-heading strong {
    color:
        #172630;

    font-size:
        18px;

    font-weight:
        950;
}

.holiday-section-heading-icon {
    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(198,140,24,.19);

    border-radius:
        10px;

    background:
        var(--qa-gold-soft);

    color:
        var(--qa-gold-dark);

    font-size:
        12px;
}


/* =========================================================
   PRICE GRID
========================================================= */

.holiday-offer-prices {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:
        10px;

    margin:
        0 0 17px;
}


/* =========================================================
   PRICE CARD
========================================================= */

.holiday-price-card {
    position:
        relative;

    min-width:
        0;

    min-height:
        116px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        15px 14px 14px;

    border:
        1px solid rgba(18,39,52,.10);

    border-radius:
        15px;

    background:
        #ffffff;

    box-shadow:
        0 5px 18px rgba(18,39,52,.045);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

.holiday-price-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(21,159,196,.22);

    box-shadow:
        0 12px 28px rgba(18,39,52,.09);
}

.holiday-price-featured {
    border-color:
        rgba(21,159,196,.28);

    background:
        linear-gradient(
            145deg,
            #f2fbfe,
            #ffffff
        );
}

.holiday-price-new {
    border-color:
        rgba(21,155,93,.24);

    background:
        linear-gradient(
            145deg,
            #f3fcf7,
            #ffffff
        );
}


/* =========================================================
   PRICE ICON
========================================================= */

.holiday-price-card-icon {
    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(21,159,196,.14);

    border-radius:
        11px;

    background:
        var(--qa-accent-soft);

    color:
        var(--qa-accent-dark);

    font-size:
        14px;
}

.holiday-price-new .holiday-price-card-icon {
    border-color:
        rgba(21,155,93,.15);

    background:
        var(--qa-green-soft);

    color:
        var(--qa-green-dark);
}


/* =========================================================
   PRICE CONTENT
========================================================= */

.holiday-price-card-main {
    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding-top:
        1px;
}

.holiday-price-card-label {
    display:
        block;

    color:
        #253943;

    font-size:
        11px;

    font-weight:
        900;

    line-height:
        1.45;

    overflow-wrap:
        anywhere;
}

.holiday-price-card strong {
    display:
        block;

    color:
        #0d1e29;

    font-size:
        24px;

    font-weight:
        950;

    line-height:
        1;

    white-space:
        nowrap;
}

.holiday-price-featured .holiday-price-card-main strong {
    color:
        var(--qa-accent-dark);
}

.holiday-price-new .holiday-price-card-main strong {
    color:
        var(--qa-green-dark);
}

.holiday-price-card small {
    display:
        block;

    color:
        #687985;

    font-size:
        9px;

    font-weight:
        650;

    line-height:
        1.45;

    overflow-wrap:
        anywhere;
}


/* =========================================================
   CHECK ICON
========================================================= */

.holiday-price-card-check {
    position:
        absolute;

    top:
        10px;

    left:
        10px;

    width:
        23px;

    height:
        23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--qa-green-soft);

    color:
        var(--qa-green-dark);

    font-size:
        8px;
}


/* =========================================================
   NEW BADGE
========================================================= */

.holiday-new-label {
    position:
        absolute;

    top:
        10px;

    left:
        10px;

    min-height:
        23px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0 8px;

    border:
        1px solid rgba(21,155,93,.20);

    border-radius:
        7px;

    background:
        var(--qa-green-soft);

    color:
        var(--qa-green-dark);

    font-size:
        8px;

    font-weight:
        950;

    white-space:
        nowrap;
}


/* =========================================================
   MORE SERVICES
========================================================= */

.holiday-more-services {
    margin:
        0 0 18px;

    padding:
        15px;

    border:
        1px solid rgba(18,39,52,.09);

    border-radius:
        15px;

    background:
        #f8fafb;
}

.holiday-more-services-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin:
        0 0 10px;
}

.holiday-more-services-title {
    color:
        #263b46;

    font-size:
        11px;

    font-weight:
        900;
}

.holiday-more-services-icon {
    width:
        28px;

    height:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        #ffffff;

    border:
        1px solid rgba(18,39,52,.09);

    color:
        #687985;

    font-size:
        9px;
}

.holiday-more-services-list {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:
        8px 18px;
}

.holiday-more-services-list span {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        7px;

    min-width:
        0;

    color:
        #435661;

    font-size:
        10px;

    font-weight:
        750;

    line-height:
        1.45;
}

.holiday-more-services-list i {
    flex:
        0 0 auto;

    margin-top:
        3px;

    color:
        var(--qa-green-dark);

    font-size:
        8px;
}


/* =========================================================
   SMART LOCK BASE
========================================================= */

.holiday-smart-lock {
    position:
        relative;

    overflow:
        hidden;

    margin:
        0 0 18px;

    padding:
        18px;

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0 8px 25px rgba(18,39,52,.055);
}

.holiday-smart-lock-elock {
    border:
        1px solid rgba(198,140,24,.24);

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #ffffff 72%
        );
}

.holiday-smart-lock-linus {
    border:
        1px solid rgba(21,159,196,.23);

    background:
        linear-gradient(
            145deg,
            #f2fbfe,
            #ffffff 72%
        );
}


/* =========================================================
   SMART LOCK GLOW
========================================================= */

.holiday-smart-lock-glow,
.holiday-linus-glow {
    position:
        absolute;

    top:
        -90px;

    right:
        -90px;

    width:
        270px;

    height:
        190px;

    border-radius:
        50%;

    filter:
        blur(55px);

    pointer-events:
        none;
}

.holiday-smart-lock-glow {
    background:
        rgba(198,140,24,.12);
}

.holiday-linus-glow {
    background:
        rgba(21,159,196,.11);
}


/* =========================================================
   SMART LOCK TOP
========================================================= */

.holiday-smart-lock-top {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;
}

.holiday-smart-lock-brand {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}

.holiday-smart-lock-icon {
    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    font-size:
        17px;
}

.holiday-smart-lock-elock .holiday-smart-lock-icon {
    border:
        1px solid rgba(198,140,24,.22);

    background:
        var(--qa-gold-soft);

    color:
        var(--qa-gold-dark);
}

.holiday-smart-lock-linus .holiday-smart-lock-icon {
    border:
        1px solid rgba(21,159,196,.17);

    background:
        var(--qa-accent-soft);

    color:
        var(--qa-accent-dark);
}

.holiday-smart-lock-kicker {
    display:
        block;

    margin:
        0 0 3px;

    color:
        #7a858c;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .04em;
}

.holiday-smart-lock-brand h3 {
    margin:
        0;

    color:
        #1a2a33;

    font-size:
        22px;

    font-weight:
        950;

    line-height:
        1.08;
}

.holiday-smart-lock-offer {
    min-height:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0 10px;

    border:
        1px solid rgba(21,155,93,.17);

    border-radius:
        8px;

    background:
        var(--qa-green-soft);

    color:
        var(--qa-green-dark);

    font-size:
        9px;

    font-weight:
        900;

    white-space:
        nowrap;
}

.holiday-smart-lock-offer.holiday-linus-new {
    border-color:
        rgba(21,159,196,.18);

    background:
        var(--qa-accent-soft);

    color:
        var(--qa-accent-dark);
}


/* =========================================================
   SMART LOCK DESCRIPTION
========================================================= */

.holiday-smart-lock-description {
    position:
        relative;

    z-index:
        2;

    margin:
        13px 0 15px;

    color:
        #455762;

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1.7;
}


/* =========================================================
   SMART LOCK FEATURES
========================================================= */

.holiday-smart-lock-features {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap:
        7px;
}

.holiday-smart-lock-features span {
    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        7px;

    padding:
        7px 8px;

    border:
        1px solid rgba(18,39,52,.08);

    border-radius:
        9px;

    background:
        rgba(255,255,255,.82);

    color:
        #465964;

    font-size:
        8px;

    font-weight:
        800;

    line-height:
        1.25;

    text-align:
        right;

    overflow-wrap:
        anywhere;
}

.holiday-smart-lock-features i {
    flex:
        0 0 auto;

    color:
        var(--qa-gold-dark);

    font-size:
        9px;
}

.holiday-smart-lock-linus
.holiday-smart-lock-features i {
    color:
        var(--qa-accent-dark);
}


/* =========================================================
   SMART LOCK PRICE
========================================================= */

.holiday-smart-lock-price {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin:
        17px 0 0;

    padding:
        14px 0 0;

    border-top:
        1px solid rgba(198,140,24,.14);
}

.holiday-smart-lock-linus
.holiday-smart-lock-price {
    border-top-color:
        rgba(21,159,196,.13);
}

.holiday-smart-lock-price > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}

.holiday-smart-lock-price span {
    color:
        #74838d;

    font-size:
        9px;

    font-weight:
        800;
}

.holiday-smart-lock-price strong {
    color:
        var(--qa-gold-dark);

    font-size:
        28px;

    font-weight:
        950;

    line-height:
        1;

    white-space:
        nowrap;
}

.holiday-smart-lock-linus
.holiday-smart-lock-price strong {
    color:
        var(--qa-accent-dark);
}

.holiday-smart-lock-price-badge {
    min-height:
        31px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0 10px;

    border:
        1px solid rgba(198,140,24,.18);

    border-radius:
        8px;

    background:
        var(--qa-gold-soft);

    color:
        var(--qa-gold-dark) !important;

    font-size:
        9px !important;

    font-weight:
        900 !important;

    white-space:
        nowrap;
}

.holiday-smart-lock-price-badge.holiday-price-green {
    border-color:
        rgba(21,155,93,.18);

    background:
        var(--qa-green-soft);

    color:
        var(--qa-green-dark) !important;
}


/* =========================================================
   SMART LOCK NOTE
========================================================= */

.holiday-smart-lock-note {
    position:
        relative;

    z-index:
        2;

    margin:
        10px 0 0;

    color:
        #74808a;

    font-size:
        8px;

    line-height:
        1.55;
}


/* =========================================================
   LINUS KIT
========================================================= */

.holiday-linus-kit {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items:
        stretch;

    gap:
        7px;

    margin:
        0 0 13px;
}

.holiday-linus-kit-item {
    min-height:
        68px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        8px;

    border:
        1px solid rgba(21,159,196,.10);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.78);

    color:
        #415763;

    font-size:
        9px;

    font-weight:
        850;

    line-height:
        1.3;

    text-align:
        center;
}

.holiday-linus-kit-icon {
    width:
        27px;

    height:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        var(--qa-accent-soft);

    color:
        var(--qa-accent-dark);

    font-size:
        10px;
}

.holiday-linus-kit-plus {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #7d909c;

    font-size:
        15px;

    font-weight:
        900;
}


/* =========================================================
   LINUS BONUS
========================================================= */

.holiday-linus-bonus {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        0;

    padding:
        12px;

    border:
        1px solid rgba(21,155,93,.20);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #f2fcf6,
            #ffffff
        );
}

.holiday-linus-bonus-icon {
    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        var(--qa-green-soft);

    color:
        var(--qa-green-dark);

    font-size:
        13px;
}

.holiday-linus-bonus-content {
    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}

.holiday-linus-bonus-content span {
    color:
        #3c815e;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .04em;
}

.holiday-linus-bonus-content strong {
    color:
        #173426;

    font-size:
        10px;

    font-weight:
        950;

    line-height:
        1.35;
}

.holiday-linus-bonus-content small {
    color:
        #6c8175;

    font-size:
        8px;

    font-weight:
        650;

    line-height:
        1.35;
}

.holiday-linus-bonus-badge {
    min-height:
        27px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0 9px;

    border:
        1px solid rgba(21,155,93,.17);

    border-radius:
        8px;

    background:
        var(--qa-green-soft);

    color:
        var(--qa-green-dark);

    font-size:
        8px;

    font-weight:
        950;

    white-space:
        nowrap;
}


/* =========================================================
   MAIN WHATSAPP CTA
========================================================= */

.holiday-main-cta {
    display:
        grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    align-items:
        center;

    gap:
        12px;

    margin:
        0 0 12px;

    padding:
        15px;

    border:
        1px solid rgba(21,155,93,.20);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #f1fcf6,
            #ffffff
        );
}

.holiday-main-cta-icon {
    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(21,155,93,.18);

    border-radius:
        12px;

    background:
        var(--qa-green-soft);

    color:
        var(--qa-green-dark);

    font-size:
        21px;
}

.holiday-main-cta-content {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}

.holiday-main-cta-content span {
    color:
        #55816c;

    font-size:
        8px;

    font-weight:
        850;
}

.holiday-main-cta-content strong {
    color:
        #183527;

    font-size:
        12px;

    font-weight:
        950;

    line-height:
        1.35;
}

.holiday-main-cta-content small {
    color:
        #6b8174;

    font-size:
        8px;

    font-weight:
        650;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.holiday-main-cta-button {
    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 14px;

    border:
        1px solid rgba(21,155,93,.20);

    border-radius:
        11px;

    background:
        #159b5d;

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        950;

    text-decoration:
        none;

    box-shadow:
        0 8px 20px rgba(21,155,93,.15);

    transition:
        transform .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.holiday-main-cta-button:hover {
    transform:
        translateY(-2px);

    background:
        #0f8a51;

    box-shadow:
        0 12px 27px rgba(21,155,93,.22);
}

.holiday-main-cta-button:active {
    transform:
        scale(.97);
}

.holiday-main-cta-button:focus-visible {
    outline:
        3px solid rgba(21,155,93,.22);

    outline-offset:
        3px;
}


/* =========================================================
   CONTACT ACTIONS
========================================================= */

.quick-assist-actions {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap:
        9px;
}

.quick-assist-action {
    min-width:
        0;

    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        10px;

    border:
        1px solid rgba(18,39,52,.10);

    border-radius:
        14px;

    background:
        #ffffff;

    color:
        var(--qa-text);

    font:
        inherit;

    text-align:
        right;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.quick-assist-action:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(21,159,196,.19);

    background:
        #fbfdfe;

    box-shadow:
        0 10px 23px rgba(18,39,52,.08);
}

.quick-assist-action:focus-visible {
    outline:
        3px solid rgba(21,159,196,.22);

    outline-offset:
        3px;
}

.quick-assist-action-icon {
    width:
        39px;

    height:
        39px;

    flex:
        0 0 39px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(21,159,196,.12);

    border-radius:
        10px;

    background:
        var(--qa-accent-soft);

    color:
        var(--qa-accent-dark);

    font-size:
        13px;
}

.quick-assist-action-service .quick-assist-action-icon {
    border-color:
        rgba(198,140,24,.14);

    background:
        var(--qa-gold-soft);

    color:
        var(--qa-gold-dark);
}

.quick-assist-action-ai .quick-assist-action-icon {
    border-color:
        rgba(118,82,216,.14);

    background:
        var(--qa-purple-soft);

    color:
        var(--qa-purple);
}

.quick-assist-action > span:not(.quick-assist-action-icon) {
    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}

.quick-assist-action strong {
    display:
        block;

    color:
        #20323d;

    font-size:
        10px;

    font-weight:
        950;

    line-height:
        1.25;

    overflow-wrap:
        anywhere;
}

.quick-assist-action small {
    display:
        block;

    color:
        #70808a;

    font-size:
        8px;

    font-weight:
        650;

    line-height:
        1.35;

    overflow-wrap:
        anywhere;
}

.quick-assist-action-arrow {
    flex:
        0 0 auto;

    color:
        #8b9aa3;

    font-size:
        8px;
}


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

.quick-assist-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin:
        17px 0 0;

    padding:
        13px 0 0;

    border-top:
        1px solid rgba(18,39,52,.08);

    color:
        #74838d;

    font-size:
        8px;

    font-weight:
        750;
}

.quick-assist-emergency {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #38835e;

    white-space:
        nowrap;
}

.quick-assist-emergency i {
    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        var(--qa-green);

    box-shadow:
        0 0 10px rgba(21,155,93,.25);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.holiday-image-lightbox {
    position:
        fixed;

    inset:
        0;

    z-index:
        2147483640;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        18px;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.holiday-image-lightbox.open {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}

.holiday-image-lightbox-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(8,18,25,.78);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}

.holiday-image-lightbox-content {
    position:
        relative;

    z-index:
        2;

    width:
        min(1280px, 100%);

    height:
        min(920px, calc(100dvh - 28px));

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius:
        20px;

    overflow:
        hidden;

    background:
        #ffffff;

    box-shadow:
        0 50px 140px rgba(0,0,0,.35);

    transform:
        translateY(16px)
        scale(.985);

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1);
}

.holiday-image-lightbox.open
.holiday-image-lightbox-content {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   LIGHTBOX TOOLBAR
========================================================= */

.holiday-image-lightbox-toolbar {
    position:
        relative;

    z-index:
        5;

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        0 64px 0 17px;

    border-bottom:
        1px solid rgba(18,39,52,.08);

    background:
        #ffffff;

    color:
        #20323d;

    font-size:
        11px;

    font-weight:
        900;

    direction:
        rtl;
}

.holiday-image-lightbox-toolbar span {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;
}

.holiday-image-lightbox-toolbar i {
    color:
        var(--qa-accent-dark);
}

.holiday-image-lightbox-toolbar small {
    color:
        #7a8992;

    font-size:
        9px;

    font-weight:
        700;
}


/* =========================================================
   LIGHTBOX CLOSE
========================================================= */

.holiday-image-lightbox-close {
    position:
        absolute;

    top:
        9px;

    right:
        9px;

    z-index:
        20;

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(18,39,52,.11);

    border-radius:
        11px;

    background:
        #f4f7f9;

    color:
        #52646f;

    cursor:
        pointer;

    transition:
        transform .16s ease,
        background .16s ease,
        color .16s ease;
}

.holiday-image-lightbox-close:hover {
    transform:
        scale(1.04);

    background:
        #edf2f5;

    color:
        #172731;
}

.holiday-image-lightbox-close:focus-visible {
    outline:
        3px solid rgba(21,159,196,.22);

    outline-offset:
        3px;
}


/* =========================================================
   LIGHTBOX IMAGE AREA
========================================================= */

.holiday-image-lightbox-image-wrap {
    flex:
        1;

    min-height:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        18px;

    overflow:
        auto;

    background:
        #f6f8fa;
}

.holiday-image-lightbox-image {
    width:
        auto;

    height:
        auto;

    max-width:
        100%;

    max-height:
        100%;

    object-fit:
        contain;

    border-radius:
        8px;

    box-shadow:
        0 20px 55px rgba(18,39,52,.14);

    user-select:
        none;

    -webkit-user-drag:
        none;

    cursor:
        zoom-in;

    transition:
        transform .25s ease;
}


/* =========================================================
   LIGHTBOX BOTTOM
========================================================= */

.holiday-image-lightbox-bottom {
    min-height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        0 15px;

    border-top:
        1px solid rgba(18,39,52,.08);

    background:
        #ffffff;

    color:
        #73828b;

    font-size:
        9px;

    font-weight:
        700;

    direction:
        rtl;
}

.holiday-image-lightbox-bottom a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--qa-accent-dark);

    text-decoration:
        none;

    font-weight:
        850;

    white-space:
        nowrap;
}

.holiday-image-lightbox-bottom a:hover {
    text-decoration:
        underline;
}


/* =========================================================
   BODY LOCK
========================================================= */

body.quick-assist-open,
body.holiday-lightbox-open {
    overflow:
        hidden;
}


/* =========================================================
   FORCE HIGH CONTRAST
========================================================= */

.quick-assist .quick-assist-content,
.quick-assist .holiday-price-card,
.quick-assist .holiday-more-services,
.quick-assist .holiday-smart-lock,
.quick-assist .quick-assist-action {
    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width: 1100px) {

    .quick-assist-card {
        width:
            min(800px, 100%);
    }

    .quick-assist-content {
        padding:
            26px 32px 30px;
    }

    .holiday-offer-hero {
        padding:
            18px 18px 0;
    }

    .holiday-price-card {
        min-height:
            120px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .quick-assist {
        padding:
            14px;
    }

    .quick-assist-card {
        width:
            min(700px, 100%);
    }

    .holiday-offer-image {
        max-height:
            360px;
    }

    .holiday-smart-lock-features {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}


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

@media (max-width: 700px) {

    .quick-assist {
        padding:
            7px;
    }

    .quick-assist-card {
        width:
            100%;

        max-height:
            calc(100dvh - 14px);

        border-radius:
            19px;
    }

    .holiday-popup-topbar {
        min-height:
            60px;

        padding:
            9px 10px;
    }

    .holiday-offer-badge {
        gap:
            7px;

        padding:
            6px 8px;
    }

    .holiday-offer-badge-icon {
        width:
            28px;

        height:
            28px;

        flex-basis:
            28px;
    }

    .holiday-offer-badge-text {
        font-size:
            10px;
    }

    .holiday-offer-badge-live {
        min-height:
            21px;

        padding:
            0 6px;

        font-size:
            8px;
    }

    .quick-assist-close {
        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;
    }

    .holiday-offer-hero {
        padding:
            9px 9px 0;
    }

    .holiday-offer-image {
        max-height:
            300px;
    }

    .holiday-offer-image-top-label {
        left:
            8px;

        bottom:
            8px;

        min-height:
            29px;

        padding:
            0 8px;

        font-size:
            8px;
    }

    .holiday-image-expand {
        right:
            8px;

        bottom:
            8px;

        min-height:
            34px;

        padding:
            0 9px;

        font-size:
            8px;
    }

    .quick-assist-content {
        padding:
            19px 14px 17px;
    }

    .holiday-kicker-row {
        align-items:
            flex-start;

        gap:
            7px;
    }

    .quick-assist-kicker {
        font-size:
            8px;
    }

    .holiday-certified-badge {
        padding:
            5px 7px;

        font-size:
            7px;
    }

    .quick-assist-content h2 {
        font-size:
            clamp(26px, 8vw, 36px);

        line-height:
            1.1;
    }

    .quick-assist-content > p {
        font-size:
            12px;

        line-height:
            1.7;
    }

    .holiday-info-strip {
        gap:
            6px;

        margin-bottom:
            20px;
    }

    .holiday-info-item {
        min-height:
            40px;

        gap:
            5px;

        padding:
            0 6px;

        font-size:
            7px;
    }

    .holiday-section-heading strong {
        font-size:
            15px;
    }

    .holiday-section-heading-text > span {
        font-size:
            8px;
    }

    .holiday-section-heading-icon {
        width:
            34px;

        height:
            34px;

        flex-basis:
            34px;
    }

    .holiday-offer-prices {
        grid-template-columns:
            1fr;

        gap:
            8px;
    }

    .holiday-price-card {
        min-height:
            98px;

        padding:
            13px;
    }

    .holiday-price-card-icon {
        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;
    }

    .holiday-price-card-label {
        font-size:
            10px;
    }

    .holiday-price-card strong {
        font-size:
            22px;
    }

    .holiday-price-card small {
        font-size:
            8px;
    }

    .holiday-more-services-list {
        grid-template-columns:
            1fr;
    }

    .holiday-smart-lock {
        padding:
            14px;
    }

    .holiday-smart-lock-top {
        align-items:
            flex-start;
    }

    .holiday-smart-lock-brand h3 {
        font-size:
            18px;
    }

    .holiday-smart-lock-kicker {
        font-size:
            8px;
    }

    .holiday-smart-lock-offer {
        font-size:
            8px;
    }

    .holiday-smart-lock-features {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .holiday-smart-lock-features span {
        min-height:
            38px;

        font-size:
            7.5px;
    }

    .holiday-smart-lock-price {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .holiday-smart-lock-price strong {
        font-size:
            25px;
    }

    .holiday-linus-kit {
        grid-template-columns:
            1fr;
    }

    .holiday-linus-kit-plus {
        display:
            none;
    }

    .holiday-linus-kit-item {
        min-height:
            48px;

        flex-direction:
            row;

        justify-content:
            flex-start;

        text-align:
            right;
    }

    .holiday-linus-bonus {
        align-items:
            flex-start;
    }

    .holiday-linus-bonus-badge {
        align-self:
            center;
    }

    .holiday-main-cta {
        grid-template-columns:
            auto minmax(0,1fr);
    }

    .holiday-main-cta-button {
        grid-column:
            1 / -1;

        width:
            100%;
    }

    .quick-assist-actions {
        grid-template-columns:
            1fr;
    }

    .quick-assist-action {
        min-height:
            65px;
    }

    .holiday-image-lightbox {
        padding:
            7px;
    }

    .holiday-image-lightbox-content {
        width:
            100%;

        height:
            calc(100dvh - 14px);

        border-radius:
            15px;
    }

    .holiday-image-lightbox-toolbar {
        min-height:
            49px;

        padding:
            0 54px 0 10px;

        font-size:
            9px;
    }

    .holiday-image-lightbox-toolbar small {
        display:
            none;
    }

    .holiday-image-lightbox-bottom {
        min-height:
            44px;

        padding:
            0 10px;

        font-size:
            8px;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 430px) {

    .holiday-offer-badge-live {
        display:
            none;
    }

    .holiday-offer-badge-text {
        font-size:
            9px;
    }

    .holiday-offer-image {
        max-height:
            240px;
    }

    .holiday-offer-image-top-label {
        max-width:
            44%;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }

    .holiday-image-expand {
        width:
            36px;

        padding:
            0;
    }

    .holiday-image-expand span {
        display:
            none;
    }

    .quick-assist-content h2 {
        font-size:
            clamp(24px, 8vw, 31px);
    }

    .quick-assist-content > p {
        font-size:
            11px;
    }

    .holiday-info-item {
        min-height:
            37px;

        font-size:
            6.5px;
    }

    .holiday-smart-lock-features {
        grid-template-columns:
            1fr;
    }

    .holiday-linus-bonus-content strong {
        font-size:
            9px;
    }

    .holiday-linus-bonus-badge {
        display:
            none;
    }

    .quick-assist-footer {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            5px;
    }

    .holiday-image-lightbox-bottom span {
        max-width:
            52%;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 350px) {

    .holiday-offer-image {
        max-height:
            205px;
    }

    .quick-assist-content {
        padding:
            16px 11px 14px;
    }

    .quick-assist-content h2 {
        font-size:
            22px;
    }

    .holiday-info-strip {
        grid-template-columns:
            1fr;
    }

    .holiday-info-item {
        justify-content:
            flex-start;

        padding:
            0 10px;

        font-size:
            8px;
    }
}


/* =========================================================
   SHORT MOBILE SCREENS
========================================================= */

@media (max-width: 700px) and (max-height: 700px) {

    .quick-assist-card {
        max-height:
            calc(100dvh - 8px);
    }

    .holiday-offer-image {
        max-height:
            180px;
    }

    .quick-assist-content {
        padding-top:
            14px;

        padding-bottom:
            10px;
    }

    .quick-assist-content h2 {
        margin-bottom:
            7px;
    }

    .quick-assist-content > p {
        margin-bottom:
            9px;
    }

    .holiday-info-strip {
        margin-bottom:
            11px;
    }

    .holiday-smart-lock {
        margin-bottom:
            10px;

        padding:
            11px;
    }

    .holiday-smart-lock-description {
        margin:
            8px 0 10px;
    }
}


/* =========================================================
   FALLBACK
========================================================= */

@supports not (height: 100dvh) {

    .quick-assist {
        height:
            100vh;
    }

    .quick-assist-card {
        max-height:
            calc(100vh - 20px);
    }

    .holiday-image-lightbox-content {
        height:
            calc(100vh - 30px);
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .quick-assist,
    .quick-assist-backdrop,
    .quick-assist-card,
    .holiday-offer-image,
    .holiday-price-card,
    .quick-assist-action,
    .holiday-main-cta-button,
    .holiday-image-lightbox,
    .holiday-image-lightbox-content,
    .holiday-image-lightbox-image,
    .holiday-image-expand,
    .quick-assist-close,
    .holiday-image-lightbox-close {
        transition:
            none !important;

        animation:
            none !important;
    }
}
/* =========================================================
   PERMANENT HIDE BUTTON
   SUBTLE / PREMIUM / NON-INTRUSIVE
========================================================= */

.holiday-popup-topbar-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 7px;

    flex: 0 0 auto;

    direction: ltr;
}


/* =========================================================
   HIDE BUTTON
========================================================= */

.quick-assist-hide {
    min-height: 34px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 0 10px;

    border:
        1px solid rgba(18, 39, 52, .08);

    border-radius: 9px;

    background:
        rgba(247, 249, 251, .92);

    color:
        #74828b;

    font:
        inherit;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    white-space:
        nowrap;

    cursor:
        pointer;

    opacity:
        .82;

    box-shadow:
        none;

    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease,
        opacity .16s ease;
}


.quick-assist-hide:hover {

    transform:
        translateY(-1px);

    background:
        #f1f5f7;

    border-color:
        rgba(18, 39, 52, .14);

    color:
        #344651;

    opacity:
        1;

}


.quick-assist-hide:active {

    transform:
        scale(.96);

}


.quick-assist-hide:focus-visible {

    outline:
        3px solid rgba(21, 159, 196, .20);

    outline-offset:
        2px;

}


.quick-assist-hide i {

    font-size:
        9px;

    color:
        #82919a;

    transition:
        color .16s ease;
}


.quick-assist-hide:hover i {

    color:
        #556873;

}


/* =========================================================
   KEEP CLOSE BUTTON PREMIUM
========================================================= */

.holiday-popup-topbar-actions
.quick-assist-close {

    flex:
        0 0 42px;

}


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

@media (max-width: 700px) {

    .holiday-popup-topbar-actions {

        gap:
            5px;

    }


    .quick-assist-hide {

        min-height:
            32px;

        padding:
            0 8px;

        font-size:
            8px;

    }

}


@media (max-width: 430px) {

    .holiday-popup-topbar-actions {

        gap:
            4px;

    }


    .quick-assist-hide {

        width:
            34px;

        min-width:
            34px;

        padding:
            0;

        border:
            1px solid rgba(18, 39, 52, .07);

        background:
            transparent;

        opacity:
            .72;

    }


    .quick-assist-hide span {

        display:
            none;

    }


    .quick-assist-hide:hover {

        background:
            #f3f6f8;

        opacity:
            1;

    }


    .holiday-popup-topbar-actions
    .quick-assist-close {

        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .quick-assist-hide {

        transition:
            none !important;

    }

}

/* =========================================================
   FONT-DISPLAY SWAP ENFORCEMENT
========================================================= */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-display: swap;
}
@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-display: swap;
}

/* =========================================================
   KEYBOARD FOCUS VISIBLE ACCESSIBILITY AUDIT
========================================================= */
.nav-link:focus-visible,
.nav-call:focus-visible,
.nav-request:focus-visible,
.mobile-menu-trigger:focus-visible,
.mobile-nav-link:focus-visible,
.service-selector:focus-visible,
.faq-question:focus-visible,
.footer-cta:focus-visible,
.holiday-to-deals-btn:focus-visible,
.holiday-image-expand:focus-visible,
.quick-assist-close:focus-visible,
.quick-assist-hide:focus-visible,
.lightbox-close:focus-visible {
    outline: 2px solid var(--cyan) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.35) !important;
}

body.light-theme .nav-link:focus-visible,
body.light-theme .nav-call:focus-visible,
body.light-theme .nav-request:focus-visible,
body.light-theme .mobile-menu-trigger:focus-visible,
body.light-theme .mobile-nav-link:focus-visible,
body.light-theme .service-selector:focus-visible,
body.light-theme .faq-question:focus-visible,
body.light-theme .footer-cta:focus-visible,
body.light-theme .holiday-to-deals-btn:focus-visible,
body.light-theme .holiday-image-expand:focus-visible,
body.light-theme .quick-assist-close:focus-visible,
body.light-theme .quick-assist-hide:focus-visible,
body.light-theme .lightbox-close:focus-visible {
    outline: 2px solid #0284c7 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.25) !important;
}

/* =========================================================
   HOLIDAY DEALS PROMO BOX & BUTTON IN REDUCED POPUP
========================================================= */
.holiday-deals-promo-box {
    margin: 18px 0 20px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(14, 165, 233, 0.03));
    border: 1px solid rgba(56, 189, 248, 0.25);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

body.light-theme .holiday-deals-promo-box {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.06), #f8fafc);
    border-color: rgba(2, 132, 199, 0.22);
    box-shadow: 0 6px 20px rgba(15, 49, 66, 0.06);
}

.holiday-deals-promo-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.holiday-deals-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 208, 77, 0.16);
    border: 1px solid rgba(255, 208, 77, 0.35);
    color: #ffd96a;
    font-size: 0.8rem;
    font-weight: 800;
}

body.light-theme .holiday-deals-promo-badge {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.3);
    color: #b45309;
}

.holiday-deals-promo-sub {
    color: #bae6fd;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

body.light-theme .holiday-deals-promo-sub {
    color: #0369a1;
}

.holiday-to-deals-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #ffffff !important;
    font-size: 0.96rem;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(14, 165, 233, 0.38);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.holiday-to-deals-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.5);
    color: #ffffff !important;
}

.holiday-to-deals-btn i {
    transition: transform 0.2s ease;
}

.holiday-to-deals-btn:hover i {
    transform: translateX(-4px);
}

.holiday-deals-promo-note {
    color: #7e9bb0;
    font-size: 0.74rem;
    line-height: 1.4;
}

body.light-theme .holiday-deals-promo-note {
    color: #64748b;
}

/* =========================================================
   DEALS PAGE & SHARED BUTTONS
========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 14px;
    font-size: 0.96rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    border: 1px solid transparent;
    line-height: 1.2;
}

.btn-primary {
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #ffffff !important;
    border-color: rgba(37, 211, 102, 0.4);
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.28);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(37, 211, 102, 0.4);
    background: linear-gradient(135deg, #2ae06d, #149687);
    color: #ffffff !important;
}

.btn-secondary {
    background: rgba(56, 189, 248, 0.1);
    color: var(--cyan) !important;
    border-color: rgba(56, 189, 248, 0.25);
}

.btn-secondary:hover {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.45);
    transform: translateY(-2px);
    color: #ffffff !important;
}

body.light-theme .btn-secondary {
    background: rgba(2, 132, 199, 0.08);
    color: #0369a1 !important;
    border-color: rgba(2, 132, 199, 0.25);
}

body.light-theme .btn-secondary:hover {
    background: rgba(2, 132, 199, 0.15);
    color: #0284c7 !important;
}

.deals-page {
    min-height: 100vh;
    padding-top: 110px;
    background:
        radial-gradient(circle at 82% 10%, rgba(56,189,248,.07), transparent 30%),
        radial-gradient(circle at 15% 45%, rgba(14,165,233,.05), transparent 28%);
}

body.light-theme .deals-page {
    background:
        radial-gradient(circle at 82% 10%, rgba(2,132,199,.06), transparent 30%),
        radial-gradient(circle at 15% 45%, rgba(14,165,233,.04), transparent 28%);
}

.deals-hero {
    position: relative;
    padding: 40px 0 50px;
}

.deals-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.deals-hero-copy h1 {
    margin-top: 18px;
    color: #f6fbff;
    font-size: clamp(2.4rem, 4.8vw, 4.4rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 850;
}

body.light-theme .deals-hero-copy h1 {
    color: #0b1f28;
}

.deals-hero-copy h1 span {
    color: var(--cyan);
}

.deals-hero-copy p {
    max-width: 600px;
    margin-top: 20px;
    color: #8da6b6;
    font-size: 1.05rem;
    line-height: 1.85;
}

body.light-theme .deals-hero-copy p {
    color: #48616f;
}

.deals-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.deals-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.22);
    color: #aeeeff;
}

body.light-theme .deals-hero-badge {
    background: rgba(2, 132, 199, 0.07);
    border-color: rgba(2, 132, 199, 0.25);
    color: #0369a1;
}

.deals-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.deals-hero-media {
    position: relative;
    width: 100%;
}

.deals-image-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, 0.2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(56, 189, 248, 0.08);
    background: #09131a;
}

.deals-image-card picture,
.deals-image-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.deals-image-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(8, 19, 27, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 208, 77, 0.3);
    color: #ffd96a;
    font-size: 0.82rem;
    font-weight: 800;
}

.deals-section {
    padding: 70px 0;
}

.deals-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
    margin-top: 40px;
}

.deal-item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(13, 26, 36, 0.95), rgba(7, 16, 23, 0.98));
    border: 1px solid rgba(56, 189, 248, 0.14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

body.light-theme .deal-item-card {
    background: #ffffff;
    border-color: rgba(18, 39, 52, 0.1);
    box-shadow: 0 16px 40px rgba(18, 39, 52, 0.06);
}

.deal-item-card:hover {
    transform: translateY(-4px);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35), 0 0 30px rgba(56, 189, 248, 0.1);
}

.deal-item-card.deal-featured {
    border-color: rgba(255, 208, 77, 0.35);
    background: linear-gradient(145deg, rgba(35, 28, 11, 0.75), rgba(10, 20, 29, 0.95));
}

body.light-theme .deal-item-card.deal-featured {
    background: #fffdf5;
    border-color: rgba(234, 179, 8, 0.35);
}

.deal-card-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    background: rgba(255, 208, 77, 0.15);
    border: 1px solid rgba(255, 208, 77, 0.35);
    color: #f7d568;
}

.deal-item-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(56, 189, 248, 0.1);
    color: var(--cyan);
    font-size: 1.4rem;
    margin-bottom: 20px;
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.deal-item-card.deal-featured .deal-item-icon {
    background: rgba(255, 208, 77, 0.12);
    color: #ffd96a;
    border-color: rgba(255, 208, 77, 0.28);
}

.deal-item-title {
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 8px;
}

body.light-theme .deal-item-title {
    color: #0b1f28;
}

.deal-item-desc {
    color: #7e98a8;
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 22px;
    flex-grow: 1;
}

body.light-theme .deal-item-desc {
    color: #48616f;
}

.deal-item-pricing {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

body.light-theme .deal-item-pricing {
    border-top-color: rgba(18, 39, 52, 0.08);
}

.deal-item-price {
    font-size: 2.1rem;
    font-weight: 900;
    color: #f7d568;
    letter-spacing: -0.03em;
}

body.light-theme .deal-item-price {
    color: #b45309;
}

.deal-item-price small {
    font-size: 1rem;
    font-weight: 600;
    color: #a5b9c5;
    margin-right: 4px;
}

.deal-item-tag {
    font-size: 0.78rem;
    font-weight: 700;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.smart-locks-section {
    padding: 60px 0 80px;
}

.smart-locks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 28px;
    margin-top: 36px;
}

.smart-lock-card {
    position: relative;
    padding: 36px;
    border-radius: 28px;
    background: linear-gradient(145deg, #0b1822, #08121a);
    border: 1px solid rgba(56, 189, 248, 0.18);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

body.light-theme .smart-lock-card {
    background: #ffffff;
    border-color: rgba(18, 39, 52, 0.1);
    box-shadow: 0 16px 40px rgba(18, 39, 52, 0.06);
}

.smart-lock-card.linus {
    border-color: rgba(74, 222, 128, 0.25);
    background: linear-gradient(145deg, #091a18, #071314);
}

body.light-theme .smart-lock-card.linus {
    background: #f7fdfa;
    border-color: rgba(34, 197, 94, 0.28);
}

.smart-lock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.smart-lock-title-wrap h3 {
    color: #ffffff;
    font-size: 1.65rem;
    font-weight: 850;
    margin-top: 4px;
}

body.light-theme .smart-lock-title-wrap h3 {
    color: #0b1f28;
}

.smart-lock-title-wrap span {
    color: var(--cyan);
    font-size: 0.84rem;
    font-weight: 800;
}

.smart-lock-card.linus .smart-lock-title-wrap span {
    color: #4ade80;
}

.smart-lock-feature-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin: 24px 0;
}

.smart-lock-feature-chips span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #c8dce7;
}

body.light-theme .smart-lock-feature-chips span {
    background: #f4f8fa;
    border-color: rgba(18, 39, 52, 0.08);
    color: #243c49;
}

.smart-lock-feature-chips span i {
    color: var(--cyan);
    font-size: 0.85rem;
}

.smart-lock-card.linus .smart-lock-feature-chips span i {
    color: #4ade80;
}

.smart-lock-bonus-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 16px;
    margin: 22px 0;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.12), rgba(34, 197, 94, 0.06));
    border: 1px solid rgba(74, 222, 128, 0.28);
}

.smart-lock-bonus-box i {
    font-size: 1.5rem;
    color: #4ade80;
}

.smart-lock-bonus-box strong {
    display: block;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 800;
}

body.light-theme .smart-lock-bonus-box strong {
    color: #0b1f28;
}

.smart-lock-bonus-box small {
    color: #8ae4aa;
    font-size: 0.8rem;
}

.smart-lock-price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.light-theme .smart-lock-price-box {
    border-top-color: rgba(18, 39, 52, 0.08);
}

.smart-lock-price-box .price-num {
    font-size: 2.3rem;
    font-weight: 900;
    color: #ffd96a;
}

body.light-theme .smart-lock-price-box .price-num {
    color: #b45309;
}

.smart-lock-card.linus .smart-lock-price-box .price-num {
    color: #4ade80;
}

body.light-theme .smart-lock-card.linus .smart-lock-price-box .price-num {
    color: #15803d;
}

.emergency-strip {
    position: relative;
    padding: 40px;
    border-radius: 28px;
    overflow: hidden;
}

.emergency-content h2 {
    color: #ffffff;
    font-weight: 850;
    line-height: 1.15;
}

.emergency-content h2 span {
    color: #25d366;
}

body.light-theme .emergency-content h2 {
    color: #0b1f28;
}

.emergency-content p {
    color: #8da6b6;
    font-size: 1.02rem;
    line-height: 1.7;
}

body.light-theme .emergency-content p {
    color: #48616f;
}

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

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
}

.skip-link {
    position: absolute;
    top: -100px;
    right: 16px;
    z-index: 99999;
    padding: 10px 18px;
    background: #0284c7;
    color: #ffffff !important;
    font-weight: 800;
    border-radius: 10px;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 16px;
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
}

.overlay.is-active,
.overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 900px) {
    .deals-hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .smart-locks-grid {
        grid-template-columns: 1fr;
    }
    .emergency-strip {
        padding: 24px;
    }
}

/* =========================================================
   COMPREHENSIVE MOBILE REFINEMENT & ACCESSIBILITY OVERHAUL
   Tailored for seamless smartphone viewing, older adults,
   emergency calls, zero-overflow, and sexy modern UI.
========================================================= */

@media (max-width: 768px) {
    /* 1. Global Box-Sizing & Viewport Containment */
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    /* Hide off-screen glowing decorative elements that push the viewport on mobile */
    .page-glow,
    .hero-section::after,
    .hero-orbit-one,
    .hero-orbit-two,
    .hero-grid-lines,
    .hero-ambient-glow {
        display: none !important;
    }

    /* 2. Containers & Section Spacing */
    .container,
    .hero-grid,
    .deals-hero-grid,
    .stats-grid,
    .services-layout,
    .why-grid,
    .process-grid,
    .gallery-masonry,
    .reviews-grid,
    .contact-grid,
    .faq-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 16px !important;
        margin-inline: auto !important;
        box-sizing: border-box !important;
    }

    .section-space {
        padding: 55px 0 !important;
    }

    /* 3. Site Header & Nav on Mobile */
    .site-header {
        padding: 10px 12px !important;
    }

    .nav-shell {
        min-height: 60px !important;
        padding-inline: 14px !important;
        border-radius: 16px !important;
    }

    .brand-mark {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        border-radius: 12px !important;
    }

    .brand-copy strong {
        font-size: 1.05rem !important;
    }

    .mobile-menu-trigger {
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
    }

    /* 4. Hero Section — Mobile Perfection */
    .hero-section {
        min-height: auto !important;
        padding: 95px 0 50px !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Eyebrow Badge */
    .eyebrow {
        display: inline-flex !important;
        max-width: 100% !important;
        margin: 0 auto 12px !important;
        padding: 7px 14px !important;
        font-size: clamp(0.72rem, 3.2vw, 0.8rem) !important;
        line-height: 1.35 !important;
        text-align: center !important;
        white-space: normal !important;
        border-radius: 999px !important;
    }

    /* Hero Headline */
    .hero-main-title,
    .hero h1 {
        font-size: clamp(1.6rem, 7.2vw, 2.15rem) !important;
        line-height: 1.24 !important;
        text-align: center !important;
        margin: 0 auto 14px !important;
        max-width: 100% !important;
        gap: 6px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .hero-title-line {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .hero-keyword-security {
        padding: 3px 12px 4px !important;
        border-radius: 12px !important;
        gap: 6px !important;
    }

    .hero-security-badge-icon {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.72rem !important;
    }

    /* Hero Subtitle */
    .hero-description {
        font-size: clamp(0.92rem, 3.8vw, 1.02rem) !important;
        line-height: 1.65 !important;
        text-align: center !important;
        margin: 0 auto 20px !important;
        padding: 0 4px !important;
        max-width: 100% !important;
        color: #b9d0de !important;
    }

    body.light-theme .hero-description {
        color: #3b5362 !important;
    }

    /* 5. Mobile CTA Buttons — Big, Sexy, Finger-Friendly (Seniors & Emergency Friendly) */
    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        margin: 0 auto 22px !important;
        box-sizing: border-box !important;
    }

    .primary-button {
        width: 100% !important;
        min-height: 64px !important;
        padding: 10px 16px !important;
        border-radius: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        background: linear-gradient(135deg, #a5f3fc 0%, #38bdf8 50%, #0284c7 100%) !important;
        box-shadow: 0 14px 34px rgba(14, 165, 233, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
        text-decoration: none !important;
    }

    .primary-button .button-icon {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 12px !important;
        background: rgba(0, 18, 27, 0.16) !important;
        font-size: 1.25rem !important;
        color: #03131a !important;
    }

    .primary-button .button-copy {
        display: flex !important;
        flex-direction: column !important;
        text-align: right !important;
        flex: 1 !important;
        padding-inline: 12px !important;
        line-height: 1.2 !important;
    }

    .primary-button .button-copy strong {
        font-size: 1.1rem !important;
        font-weight: 900 !important;
        color: #03131a !important;
        letter-spacing: -0.01em !important;
    }

    .primary-button .button-copy small {
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        color: #0c4a6e !important;
        margin-top: 3px !important;
    }

    .primary-button .button-arrow {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.45) !important;
        color: #03131a !important;
        margin: 0 !important;
    }

    .secondary-button {
        width: 100% !important;
        min-height: 56px !important;
        padding: 10px 18px !important;
        border-radius: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        box-sizing: border-box !important;
        background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(18, 140, 126, 0.12)) !important;
        border: 1.5px solid rgba(37, 211, 102, 0.45) !important;
        color: #86efac !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
        text-decoration: none !important;
    }

    .secondary-button i {
        font-size: 1.35rem !important;
        color: #25d366 !important;
    }

    body.light-theme .secondary-button {
        background: #f0fdf4 !important;
        border-color: #86efac !important;
        color: #047857 !important;
    }

    /* 6. Hero Proof Bar — Clean 3 Badges with No Clipping */
    .hero-proof {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .proof-divider {
        display: none !important;
    }

    .proof-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 4px !important;
        padding: 9px 4px !important;
        border-radius: 12px !important;
        background: rgba(8, 22, 34, 0.75) !important;
        border: 1px solid rgba(56, 189, 248, 0.18) !important;
        box-sizing: border-box !important;
    }

    body.light-theme .proof-item {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(2, 132, 199, 0.16) !important;
    }

    .proof-item i {
        font-size: 1.15rem !important;
        color: #38bdf8 !important;
    }

    .proof-item span {
        font-size: 0.68rem !important;
        line-height: 1.25 !important;
        color: #94a3b8 !important;
    }

    .proof-item span strong {
        display: block !important;
        font-size: 0.8rem !important;
        font-weight: 800 !important;
        color: #f1f5f9 !important;
    }

    body.light-theme .proof-item span strong {
        color: #0f172a !important;
    }

    /* 7. Certificate Showcase Card on Mobile (Image 2 Fix) */
    .hero-visual {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 12px auto 0 !important;
        box-sizing: border-box !important;
        min-height: auto !important;
    }

    .hero-cert-showcase {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        animation: none !important;
        transform: none !important;
    }

    .hero-cert-topbar {
        padding: 9px 12px !important;
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .cert-topbar-title {
        font-size: clamp(0.72rem, 3.2vw, 0.82rem) !important;
        white-space: normal !important;
        line-height: 1.35 !important;
        text-align: right !important;
        flex: 1 !important;
    }

    .hero-image-frame {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        aspect-ratio: 608 / 382 !important;
        height: auto !important;
    }

    .hero-image-frame img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .hero-trust-bar {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 6px !important;
    }

    .hero-trust-pill {
        padding: 8px 4px !important;
        font-size: clamp(0.68rem, 2.7vw, 0.78rem) !important;
        border-radius: 10px !important;
        text-align: center !important;
        white-space: normal !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        line-height: 1.2 !important;
    }

    .hero-trust-pill i {
        font-size: 0.95rem !important;
    }

    /* 8. POPOUT (#quickAssist) Mobile Overhaul (Sexy, Senior-Friendly, Non-Stuck) */
    .quick-assist {
        padding: 12px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .quick-assist-card {
        width: 100% !important;
        max-width: 440px !important;
        max-height: calc(100dvh - 28px) !important;
        border-radius: 22px !important;
        margin: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(56, 189, 248, 0.12) !important;
    }

    .holiday-popup-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        padding: 10px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    body:not(.light-theme) .holiday-popup-topbar {
        background: #091722 !important;
        border-bottom-color: rgba(56, 189, 248, 0.2) !important;
    }

    .holiday-popup-topbar-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .quick-assist-close {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        font-size: 1.3rem !important;
        border-radius: 12px !important;
        display: grid !important;
        place-items: center !important;
        cursor: pointer !important;
        background: rgba(0, 0, 0, 0.07) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        color: #1e293b !important;
    }

    body:not(.light-theme) .quick-assist-close {
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
    }

    .quick-assist-hide {
        min-height: 36px !important;
        padding: 0 10px !important;
        font-size: 0.72rem !important;
        border-radius: 10px !important;
    }

    .holiday-offer-hero {
        width: 100% !important;
        margin: 0 !important;
    }

    .holiday-offer-image-wrap {
        width: 100% !important;
        border-radius: 0 !important;
    }

    .holiday-offer-image {
        width: 100% !important;
        height: auto !important;
        max-height: 220px !important;
        object-fit: cover !important;
    }

    .quick-assist-content {
        padding: 16px 14px 24px !important;
        box-sizing: border-box !important;
    }

    .holiday-kicker-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .quick-assist-kicker {
        font-size: 0.72rem !important;
    }

    .holiday-certified-badge {
        font-size: 0.7rem !important;
        padding: 4px 9px !important;
    }

    .quick-assist-content h2 {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        margin: 10px 0 8px !important;
        text-align: right !important;
    }

    .quick-assist-content p {
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
        text-align: right !important;
        margin-bottom: 12px !important;
    }

    .holiday-info-strip {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        margin: 12px 0 !important;
        width: 100% !important;
    }

    .holiday-info-item {
        padding: 8px 4px !important;
        font-size: 0.72rem !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 4px !important;
        border-radius: 10px !important;
    }

    .holiday-deals-promo-box {
        padding: 14px !important;
        border-radius: 16px !important;
        margin: 14px 0 !important;
    }

    .holiday-deals-promo-sub {
        font-size: 0.85rem !important;
        line-height: 1.45 !important;
    }

    .holiday-to-deals-btn {
        min-height: 50px !important;
        font-size: 0.95rem !important;
        border-radius: 14px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .quick-assist-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 14px !important;
        width: 100% !important;
    }

    .quick-assist-action {
        width: 100% !important;
        min-height: 56px !important;
        border-radius: 16px !important;
        padding: 8px 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .quick-assist-action-icon {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        font-size: 1.2rem !important;
        border-radius: 12px !important;
    }

    /* 9. Extra Bottom Clearance for Floating Widgets */
    main {
        padding-bottom: 70px !important;
    }

    .site-footer {
        padding-bottom: 120px !important;
    }
}

/* =========================================================
   COOKIE CONSENT BANNER (ANTI-AI-SLOP / WCAG 2.1 AA)
========================================================= */

.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    margin: 0 auto;
    max-width: 860px;
    z-index: 2147483640;
    background: rgba(9, 23, 34, 0.96);
    border: 1px solid rgba(56, 189, 248, 0.32);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 16px 20px;
    animation: cookieSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

body.light-theme .cookie-banner {
    background: rgba(255, 255, 255, 0.98);
    border-color: #cbd5e1;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.cookie-banner.cookie-banner-hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

@keyframes cookieSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cookie-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-banner-text {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 420px;
}

.cookie-banner-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    background: rgba(56, 189, 248, 0.15);
    border-radius: 12px;
    color: #38bdf8;
    font-size: 1.15rem;
}

.cookie-banner-text p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #cbd5e1;
}

body.light-theme .cookie-banner-text p {
    color: #0f172a;
}

.cookie-banner-text a {
    color: #38bdf8;
    text-decoration: underline;
    font-weight: 700;
}

body.light-theme .cookie-banner-text a {
    color: #0369a1;
}

.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 9px 18px;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.cookie-btn-accept {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.cookie-btn-accept:hover {
    background: #0369a1;
    transform: translateY(-1px);
}

.cookie-btn-reject {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #f8fafc;
}

body.light-theme .cookie-btn-reject {
    background: #f1f5f9;
    border: 1.5px solid #0284c7;
    color: #0369a1;
}

.cookie-btn-reject:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

body.light-theme .cookie-btn-reject:hover {
    background: #e2e8f0;
    color: #0284c7;
}

.cookie-link {
    color: #38bdf8;
    font-size: 0.82rem;
    text-decoration: none;
    padding: 6px 10px;
    font-weight: 600;
}

body.light-theme .cookie-link {
    color: #0369a1;
}

.cookie-link:hover {
    color: #7ddcff;
}

body.light-theme .cookie-link:hover {
    color: #0284c7;
}

@media (max-width: 768px) {
    .cookie-banner {
        bottom: 12px;
        left: 12px;
        right: 12px;
        padding: 14px 16px;
        border-radius: 16px;
    }
    .cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .cookie-banner-text {
        flex: 1 1 auto;
    }
    .cookie-banner-actions {
        width: 100%;
        justify-content: stretch;
        display: flex;
        gap: 8px;
    }
    .cookie-btn {
        flex: 1;
        text-align: center;
        padding: 10px 8px;
        font-size: 0.82rem;
    }
}

/* =========================================================
   COOKIE PREFERENCES MODAL (ANTI-DARK-PATTERN)
========================================================= */

.cookie-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: rgba(3, 10, 18, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: cookieModalFadeIn 0.25s ease-out;
}

@keyframes cookieModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cookie-modal-card {
    background: #091724;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 24px;
    max-width: 620px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.12);
    overflow: hidden;
    animation: cookieModalScaleUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cookieModalScaleUp {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.cookie-modal-header {
    padding: 24px 26px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cookie-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cookie-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}

.cookie-modal-header h2 {
    font-size: 1.25rem;
    font-weight: 850;
    color: #ffffff;
    margin: 0 0 2px;
}

.cookie-modal-header small {
    color: #94a3b8;
    font-size: 0.82rem;
}

.cookie-modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    transition: all 0.2s;
}

.cookie-modal-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.cookie-modal-body {
    padding: 24px 26px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cookie-modal-lead {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 8px;
}

.cookie-category-card {
    background: rgba(14, 30, 46, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 16px;
    padding: 16px 18px;
}

.cookie-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.cookie-cat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 0.94rem;
}

.cookie-cat-title i {
    color: #38bdf8;
}

.cookie-always-on-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.cookie-category-card p {
    color: #94a3b8;
    font-size: 0.84rem;
    line-height: 1.55;
    margin: 0;
}

/* Custom Toggle Switch - High Contrast Visible States */
.cookie-switch-label {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    cursor: pointer;
    touch-action: manipulation;
}

.cookie-switch-label input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.cookie-switch-slider {
    position: absolute;
    inset: 0;
    background-color: #334155;
    border: 2px solid #94a3b8;
    border-radius: 26px;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset;
}

.cookie-switch-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: #f8fafc;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark Mode Checked (ON) */
.cookie-switch-label input:checked + .cookie-switch-slider {
    background-color: #0284c7;
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}

.cookie-switch-label input:checked + .cookie-switch-slider::before {
    transform: translateX(22px);
    background-color: #ffffff;
}

.cookie-switch-label input:focus-visible + .cookie-switch-slider {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

/* Light Theme Cookie Switch Slider - High Contrast Visible OFF State */
body.light-theme .cookie-switch-slider {
    background-color: #cbd5e1 !important;
    border: 2px solid #475569 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
}

body.light-theme .cookie-switch-slider::before {
    background-color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.4) !important;
}

/* Light Theme Checked (ON) */
body.light-theme .cookie-switch-label input:checked + .cookie-switch-slider {
    background-color: #0284c7 !important;
    border-color: #0369a1 !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.4) !important;
}

body.light-theme .cookie-switch-label input:focus-visible + .cookie-switch-slider {
    outline: 2px solid #0284c7 !important;
    outline-offset: 2px !important;
}

.cookie-modal-footer {
    padding: 18px 26px;
    border-top: 1px solid rgba(56, 189, 248, 0.15);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    background: rgba(7, 18, 28, 0.7);
}

.cookie-btn-primary {
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cookie-btn-primary:hover {
    background: #0369a1;
}

.cookie-btn-secondary {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cookie-btn-secondary:hover {
    background: rgba(56, 189, 248, 0.25);
}

.cookie-btn-outline {
    background: transparent;
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cookie-btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
}

.cookie-btn-custom {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.cookie-btn-custom:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* Light theme for modal */
body.light-theme .cookie-modal-card {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

body.light-theme .cookie-modal-header h2 {
    color: #0f172a;
}

body.light-theme .cookie-category-card {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-theme .cookie-cat-title {
    color: #0f172a;
}

body.light-theme .cookie-modal-lead {
    color: #334155;
}

body.light-theme .cookie-modal-footer {
    background: #f8fafc;
    border-top-color: #e2e8f0;
}

/* =========================================================
   CLEAN FOOTER COPYRIGHT & REFINED LEGAL LINE
========================================================= */

.footer-copyright {
    color: #9ab0bd;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

body.light-theme .footer-copyright {
    color: #1e3a4c !important;
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column !important;
        text-align: center;
        gap: 10px !important;
        padding-top: 20px !important;
    }

    .footer-copyright {
        font-size: 0.82rem;
        line-height: 1.55;
    }
}

.footer-cookie-link {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-align: right;
    font-size: 0.88rem;
    color: #94a3b8;
    transition: color 0.2s;
    margin-top: 4px;
}

.footer-cookie-link:hover {
    color: var(--cyan);
}

/* =========================================================
   3D DEPTH ON FAQ ITEMS & SERVICE CARDS
========================================================= */

.faq-item {
    perspective: 1000px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.08);
}

.faq-item.active {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 25px rgba(56, 189, 248, 0.12);
}

/* =========================================================
   MOBILE AREA CHIPS REFINEMENT
========================================================= */

@media (max-width: 640px) {
    .area-chips-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .area-city-chip {
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    .area-city-chip span:nth-child(2) {
        font-size: 0.84rem !important;
    }

    .city-eta-livebox {
        padding: 18px 16px !important;
        border-radius: 16px !important;
    }

    .eta-metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .eta-actions-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   SCROLL PROGRESS BAR
========================================================= */

.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3.5px;
    background: linear-gradient(90deg, #0284c7, #38bdf8, #0ea5e9, #38bdf8);
    background-size: 200% 100%;
    z-index: 2147483640;
    pointer-events: none;
    transition: width 0.08s ease-out;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
}

/* =========================================================
   SUB-PAGES (PRIVACY, TERMS, IMPORTANT-INFO, ACCESSIBILITY) THEME HARMONY
========================================================= */

/* Light Theme overrides for subpages */
body.light-theme .legal-page-new,
body.light-theme .accessibility-page {
    background: radial-gradient(circle at 85% 8%, rgba(14,165,233,.10), transparent 28%),
                radial-gradient(circle at 10% 52%, rgba(45,212,191,.06), transparent 24%),
                linear-gradient(180deg, #f8fcfd 0%, #eff7f9 100%) !important;
}

body.light-theme .legal-page-new *,
body.light-theme .accessibility-page * {
    --legal-text: #1b4351;
}

body.light-theme .legal-sidebar {
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,248,250,.94)) !important;
    border: 1px solid rgba(15,49,66,.12) !important;
    box-shadow: 0 20px 50px rgba(27,63,79,.08) !important;
}

body.light-theme .legal-sidebar-head strong {
    color: #14384c !important;
}

body.light-theme .legal-sidebar-head small {
    color: #64818e !important;
}

body.light-theme .legal-nav a {
    color: #486574 !important;
}

body.light-theme .legal-nav a:hover,
body.light-theme .legal-nav a.active {
    color: #0369a1 !important;
    background: rgba(14,165,233,.08) !important;
    border-color: rgba(14,165,233,.2) !important;
}

body.light-theme .legal-document,
body.light-theme .access-card {
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(15,49,66,.10) !important;
    box-shadow: 0 25px 70px rgba(27,63,79,.08) !important;
    color: #1b4351 !important;
}

body.light-theme .legal-document h1,
body.light-theme .legal-document h2,
body.light-theme .legal-document h3,
body.light-theme .access-card h2,
body.light-theme .access-card h3 {
    color: #0d2838 !important;
}

body.light-theme .legal-document p,
body.light-theme .legal-document li,
body.light-theme .access-card p,
body.light-theme .access-card li {
    color: #244b5c !important;
}

body.light-theme .legal-box,
body.light-theme .legal-card,
body.light-theme .access-item {
    background: #f4f9fc !important;
    border: 1px solid rgba(15,49,66,.08) !important;
    color: #244b5c !important;
}

/* Dark Theme overrides for subpages */
body:not(.light-theme) .legal-page-new,
body:not(.light-theme) .accessibility-page {
    background: radial-gradient(circle at 85% 8%, rgba(56,189,248,.08), transparent 28%),
                radial-gradient(circle at 10% 52%, rgba(45,212,191,.04), transparent 24%),
                linear-gradient(180deg, #050e15 0%, #081724 100%) !important;
}

body:not(.light-theme) .legal-sidebar {
    background: linear-gradient(145deg, rgba(9, 24, 36, 0.96), rgba(5, 15, 23, 0.98)) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}

body:not(.light-theme) .legal-sidebar-head strong {
    color: #f1f8fc !important;
}

body:not(.light-theme) .legal-sidebar-head small {
    color: #8da4b1 !important;
}

body:not(.light-theme) .legal-nav a {
    color: #9ab4c2 !important;
}

body:not(.light-theme) .legal-nav a:hover,
body:not(.light-theme) .legal-nav a.active {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.28) !important;
}

body:not(.light-theme) .legal-document,
body:not(.light-theme) .access-card {
    background: rgba(8, 22, 33, 0.95) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5) !important;
    color: #d8ecf5 !important;
}

body:not(.light-theme) .legal-document h1,
body:not(.light-theme) .legal-document h2,
body:not(.light-theme) .legal-document h3,
body:not(.light-theme) .access-card h2,
body:not(.light-theme) .access-card h3 {
    color: #ffffff !important;
}

body:not(.light-theme) .legal-document p,
body:not(.light-theme) .legal-document li,
body:not(.light-theme) .access-card p,
body:not(.light-theme) .access-card li {
    color: #cbe3ee !important;
}

body:not(.light-theme) .legal-box,
body:not(.light-theme) .legal-card,
body:not(.light-theme) .access-item {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #d8ecf5 !important;
}

/* =========================================================
   PHONE NUMBER LONG-PRESS COPY TOAST
========================================================= */

.phone-copy-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translate(-50%, 36px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    z-index: 2147483647;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    background: rgba(8, 24, 36, 0.96);
    color: #ffffff;
    border: 1px solid #38bdf8;
    border-radius: 9999px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 25px rgba(56, 189, 248, 0.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.24s ease;
    direction: rtl;
}

.phone-copy-toast.is-visible {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.phone-copy-toast-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    font-size: 0.8rem;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    flex-shrink: 0;
}

.phone-copy-toast-body {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}

.phone-copy-toast-title {
    font-weight: 800;
    color: #ffffff;
}

.phone-copy-toast-number {
    font-family: monospace, system-ui, -apple-system;
    color: #38bdf8;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

body.light-theme .phone-copy-toast {
    background: rgba(255, 255, 255, 0.98);
    color: #0b2d42;
    border-color: #0284c7;
    box-shadow: 0 12px 35px rgba(2, 132, 199, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.light-theme .phone-copy-toast-title {
    color: #0b2d42;
}

body.light-theme .phone-copy-toast-number {
    color: #0284c7;
}

/* Phone link feedback on touch/hold */
a[href^="tel:"],
.mobile-action-call,
.nav-call,
[data-phone] {
    -webkit-touch-callout: none;
}

a[href^="tel:"].is-pressing,
[data-phone].is-pressing {
    transform: scale(0.96);
    filter: brightness(1.15);
    transition: transform 0.12s ease, filter 0.12s ease;
}

@media (max-width: 768px) {
    .phone-copy-toast {
        bottom: 84px;
        padding: 10px 18px;
        font-size: 0.88rem;
        max-width: calc(100vw - 32px);
        width: max-content;
    }
}

/* =========================================================
   SERVICE PANELS GENTLE REVEAL ANIMATION (SCROLL REVEAL)
========================================================= */

.service-showcase {
    perspective: 1200px;
}

.service-panel {
    will-change: transform, opacity;
}

.service-panel.active {
    animation: servicePanelGlideIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes servicePanelGlideIn {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.service-panel.active .service-panel-image img {
    animation: serviceImageZoomIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes serviceImageZoomIn {
    0% {
        transform: scale(1.04);
    }
    100% {
        transform: scale(1);
    }
}

.service-panel.active .service-panel-content > * {
    animation: serviceContentFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.service-panel.active .service-panel-content > *:nth-child(1) { animation-delay: 0.04s; }
.service-panel.active .service-panel-content > *:nth-child(2) { animation-delay: 0.10s; }
.service-panel.active .service-panel-content > *:nth-child(3) { animation-delay: 0.16s; }
.service-panel.active .service-panel-content > *:nth-child(4) { animation-delay: 0.22s; }
.service-panel.active .service-panel-content > *:nth-child(5) { animation-delay: 0.28s; }

@keyframes serviceContentFadeUp {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .phone-copy-toast,
    .service-panel,
    .service-panel.active,
    .service-panel.active .service-panel-image img,
    .service-panel.active .service-panel-content > * {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}