/* ============================================================
   APSARA CONCIERGE — Bioluminescent Terminal  v2.0
   Shares design language with company.css v2.0
   Deep Navy · Electric Cyan · Cobalt · Monospace Soul
   ============================================================ */

:root {
    --c-bg:          #030c18;
    --c-bg-2:        #040f1e;
    --c-panel:       rgba(5, 16, 38, 0.84);
    --c-border:      rgba(0, 170, 240, 0.18);
    --c-border-glow: rgba(0, 229, 255, 0.48);
    --c-cyan:        #00e5ff;
    --c-cyan-lo:     rgba(0, 229, 255, 0.1);
    --c-cobalt:      #1557e0;
    --c-text-1:      #dce8ff;
    --c-text-2:      #7898c2;
    --c-text-3:      #3d5878;
    --c-mono:        'JetBrains Mono', 'Courier New', monospace;
    --c-green:       #00e890;
}

/* ============================================================
   Global page dark canvas
   ============================================================ */
body {
    background: var(--c-bg) !important;
    color: var(--c-text-1) !important;
}

/* Tailwind utility overrides */
body .text-slate-900,
body .text-slate-800 { color: var(--c-text-1) !important; }
body .text-slate-600  { color: var(--c-text-2) !important; }
body .text-slate-500  { color: var(--c-text-2) !important; }
body .text-slate-400  { color: var(--c-text-3) !important; }
body .text-slate-300  { color: var(--c-text-2) !important; }
body .text-brand-700  { color: var(--c-cyan)   !important; }
body .text-brand-300  { color: var(--c-cyan)   !important; }

/* ============================================================
   Navigation — dark glass
   ============================================================ */
.glass-nav {
    background: rgba(2, 8, 20, 0.90) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    border-bottom: 1px solid rgba(0, 160, 230, 0.18) !important;
    box-shadow: 0 1px 0 rgba(0, 229, 255, 0.05) !important;
}

.glass-nav.nav-scrolled {
    background: rgba(2, 8, 20, 0.96) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
    border-bottom: 1px solid rgba(0, 160, 230, 0.22) !important;
}

.nav-links-row a,
.nav-more-trigger {
    color: var(--c-text-2) !important;
}
.nav-links-row a:hover,
.nav-more-trigger:hover,
.nav-more-wrap.is-open .nav-more-trigger {
    color: var(--c-cyan) !important;
}

.nav-more-menu {
    background: rgba(2, 8, 20, 0.98) !important;
    border-color: rgba(0, 160, 230, 0.22) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

.nav-more-item {
    color: var(--c-text-1) !important;
}
.nav-more-item:hover {
    background: rgba(0, 229, 255, 0.08) !important;
    color: var(--c-cyan) !important;
}

.nav-more-divider {
    background: rgba(0, 160, 230, 0.14) !important;
}

body:not(.editorial-page) .nav-icon-btn {
    background: rgba(0, 170, 240, 0.07) !important;
    border-color: rgba(0, 160, 230, 0.24) !important;
    color: var(--c-text-1) !important;
}
body:not(.editorial-page) .nav-icon-btn:hover {
    background: rgba(0, 229, 255, 0.12) !important;
    border-color: var(--c-cyan) !important;
    color: var(--c-cyan) !important;
}

.mobile-nav-group-label {
    color: var(--c-text-3) !important;
}
.mobile-nav-link--secondary {
    color: var(--c-text-2) !important;
}

body:not(.editorial-page) .nav-pill-ghost {
    background: rgba(0, 170, 240, 0.07) !important;
    border: 1px solid rgba(0, 160, 230, 0.24) !important;
    color: var(--c-text-1) !important;
}
body:not(.editorial-page) .nav-pill-ghost:hover {
    background: rgba(0, 229, 255, 0.12) !important;
    border-color: var(--c-cyan) !important;
    color: var(--c-cyan) !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.18) !important;
}

body:not(.editorial-page) .nav-pill-primary {
    background: var(--c-cyan) !important;
    color: #010d1a !important;
    font-weight: 700 !important;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.32) !important;
}
body:not(.editorial-page) .nav-pill-primary:hover {
    background: #22ecff !important;
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.52) !important;
}

.nav-menu-toggle {
    background: rgba(0, 170, 240, 0.07) !important;
    border-color: rgba(0, 160, 230, 0.22) !important;
    color: var(--c-text-1) !important;
}

.mobile-nav-drawer {
    background: rgba(2, 8, 20, 0.98) !important;
    border-top-color: rgba(0, 160, 230, 0.18) !important;
}
.mobile-nav-link {
    color: var(--c-text-1) !important;
}
.mobile-nav-link:hover {
    background: rgba(0, 229, 255, 0.07) !important;
    color: var(--c-cyan) !important;
}
.mobile-nav-divider {
    background: rgba(0, 160, 230, 0.12) !important;
}
.mobile-nav-social a {
    background: rgba(0, 28, 65, 0.4) !important;
    border-color: rgba(0, 160, 230, 0.18) !important;
    color: var(--c-text-2) !important;
}
.mobile-nav-social a:hover {
    color: var(--c-cyan) !important;
}

.brand-text {
    background: linear-gradient(135deg, #5a9fff 0%, #00d0ff 50%, var(--c-cyan) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ============================================================
   Hero Section — already dark, refine to match palette
   ============================================================ */
body:not(.editorial-page) section[class*="from-brand-900"],
body:not(.editorial-page) section[class*="bg-brand-900"],
body:not(.editorial-page) section[class*="bg-slate-900"],
body:not(.editorial-page) section[class*="from-slate-900"] {
    background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 100%) !important;
}

/* Hero background glow orbs: keep the blue, update to cyan-tinted */
.glow-bg {
    background: radial-gradient(circle, rgba(0, 130, 220, 0.22) 0%, rgba(16, 52, 141, 0) 70%) !important;
}

/* Hero eyebrow badge */
section.pt-28 .inline-flex.bg-white\/5 {
    background: rgba(0, 180, 255, 0.08) !important;
    border-color: rgba(0, 160, 230, 0.28) !important;
}

/* Hero CTA buttons */
section.pt-28 a.bg-white {
    background: transparent !important;
    border: 1.5px solid var(--c-cyan) !important;
    color: var(--c-cyan) !important;
    border-radius: 5px !important;
    font-family: var(--c-mono) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.2) !important;
    transition: all 0.12s ease !important;
}
section.pt-28 a.bg-white:hover {
    background: rgba(0, 229, 255, 0.1) !important;
    box-shadow: 0 0 36px rgba(0, 229, 255, 0.38) !important;
    color: #fff !important;
}

section.pt-28 button.bg-white\/10 {
    background: rgba(0, 170, 240, 0.07) !important;
    border-color: rgba(0, 160, 230, 0.3) !important;
    color: var(--c-text-1) !important;
    border-radius: 5px !important;
    font-family: var(--c-mono) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}
section.pt-28 button.bg-white\/10:hover {
    background: rgba(0, 229, 255, 0.1) !important;
    border-color: var(--c-cyan) !important;
}

/* Hero video embed */
.video-embed {
    border-color: rgba(0, 160, 230, 0.28) !important;
    box-shadow:
        0 0 50px rgba(0, 120, 220, 0.14),
        0 24px 60px rgba(0, 8, 30, 0.55) !important;
}

/* ============================================================
   Live Demo Section
   ============================================================ */
#demos {
    border-top: 1px solid rgba(0, 160, 230, 0.12);
}

#demos .glass-card {
    background: rgba(4, 16, 42, 0.72) !important;
    border-color: rgba(0, 160, 230, 0.18) !important;
    border-radius: 12px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    text-decoration: none !important;
    cursor: pointer;
}

#demos a.demo-card:hover,
#demos button.demo-card:hover {
    border-color: rgba(0, 229, 255, 0.42) !important;
    box-shadow: 0 0 36px rgba(0, 180, 255, 0.14), 0 16px 40px rgba(0, 5, 20, 0.45) !important;
    transform: translateY(-4px);
}

#demos button.demo-card {
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
    border: 1px solid transparent;
}

#demos .demo-card--disabled,
#demos .demo-card--disabled:hover {
    opacity: 0.52 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#demos .demo-card-unavailable:not(.hidden) {
    display: inline-block;
}

#demos .demo-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#demos .demo-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--c-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-cyan);
}

#demos .demo-token {
    font-family: var(--c-mono);
    font-size: 0.72rem;
    color: var(--c-cyan);
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
}

#demos .glass-card > * {
    position: relative;
    z-index: 1;
}

/* -- Live demo phone-frame modal -------------------------------- */
body.demo-launcher-open {
    overflow: hidden;
}

body.demo-launcher-open .back-to-top-btn,
body.demo-launcher-open #backToTopBtn,
body.demo-launcher-open #chatbot-widget {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.demo-launcher {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
}

.demo-launcher[hidden] {
    display: none !important;
}

.demo-launcher-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 48% at 50% 38%, rgba(76, 201, 240, 0.18), transparent 58%),
        #050505;
}

/* Phone-first layout — no wide dialog box; phone dominates viewport */
.demo-launcher--focus .demo-launcher-focus {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(100%, 520px);
    max-height: min(calc(100dvh - 1rem), calc(100vh - 1rem));
    gap: 0.65rem;
    pointer-events: none;
}

.demo-launcher--focus .demo-launcher-focus > * {
    pointer-events: auto;
}

.demo-launcher-focus-head {
    flex-shrink: 0;
    text-align: center;
    padding: 0 2.5rem;
}

.demo-launcher-focus-foot {
    flex-shrink: 0;
    width: 100%;
    max-width: 420px;
    text-align: center;
    padding: 0 0.5rem;
}

.demo-launcher-close {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    z-index: 10052;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(76, 201, 240, 0.45);
    border-radius: 999px;
    background: #111111;
    color: #4CC9F0;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 18px rgba(76, 201, 240, 0.18);
}

.demo-launcher-close:hover {
    background: rgba(76, 201, 240, 0.12);
    border-color: #4CC9F0;
    box-shadow: 0 0 22px rgba(76, 201, 240, 0.35);
}
.demo-launcher-close svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}

.demo-launcher-eyebrow {
    margin: 0 0 0.25rem;
    font-family: Outfit, var(--c-mono), sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #4CC9F0;
    text-align: center;
}

.demo-launcher-title {
    margin: 0;
    font-family: var(--c-display);
    font-size: clamp(1.1rem, 3.5vw, 1.35rem);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-align: center;
}

.demo-phone-shell {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-phone {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    margin: 0 auto;
    border-radius: 42px;
    padding: 10px 12px 12px;
    overflow: hidden;
    isolation: isolate;
    background: #050505;
    border: 1px solid rgba(76, 201, 240, 0.45);
    box-shadow:
        inset 0 0 0 1px rgba(76, 201, 240, 0.12),
        0 28px 70px rgba(0, 0, 0, 0.65),
        0 0 48px rgba(76, 201, 240, 0.22);
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.demo-phone-bezel {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    height: 22px;
    pointer-events: none;
}

.demo-phone-screen-wrap {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 28px;
    background: #050505;
    isolation: isolate;
    transform: translateZ(0);
    clip-path: inset(0 round 28px);
}

.demo-phone-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 390px;
    height: 844px;
    border: 0;
    margin: 0;
    transform-origin: center center;
    background: #050505;
    color-scheme: dark;
    display: block;
}

.demo-phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 20px;
    border-radius: 0 0 12px 12px;
    background: #050505;
    box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.2);
    pointer-events: none;
    z-index: 4;
}

.demo-phone-error {
    position: absolute;
    inset: 11px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 1.25rem;
    border-radius: 28px;
    background: #050505;
    text-align: center;
}

.demo-phone-error[hidden] {
    display: none;
}

.demo-phone-error-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
}

.demo-phone-error-body {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #A3A3A3;
}

.demo-phone-error-cmd {
    display: block;
    margin-top: 0.25rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.68rem;
    line-height: 1.5;
    color: #4CC9F0;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}

.demo-launcher-hint {
    flex: 0 0 auto;
    margin: 0;
    max-width: none;
    width: 100%;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #A3A3A3;
}

.demo-launcher-footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem 1.25rem;
    margin-top: 0.45rem;
}

.demo-launcher-telegram {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #38bdf8;
    text-decoration: none;
}

.demo-launcher-telegram:hover {
    color: #7dd3fc;
}

.demo-launcher-telegram[hidden] {
    display: none !important;
}

.demo-launcher:not([hidden]) .demo-launcher-telegram {
    display: none !important;
}

.demo-launcher-open-tab {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-cyan);
    text-decoration: none;
}

.demo-launcher-open-tab:hover {
    text-decoration: underline;
}

.demo-launcher-footer a.demo-launcher-open-tab {
    color: var(--c-cyan);
}

html[data-theme="light"] .demo-launcher-backdrop {
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(18, 82, 196, 0.16), transparent 60%),
        rgba(240, 247, 255, 0.94);
}

html[data-theme="light"] .demo-launcher-title {
    color: #0a1a38;
}

html[data-theme="light"] .demo-launcher-eyebrow {
    color: #1252c4;
}

html[data-theme="light"] .demo-launcher-close {
    color: #0a1a38;
    border-color: rgba(18, 82, 196, 0.18);
    background: rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .demo-launcher-hint {
    color: #4a6fa0;
}

html[data-theme="light"] .demo-launcher-focus-foot .demo-launcher-telegram {
    color: #0284c7;
}

html[data-theme="light"] .demo-launcher-focus-foot .demo-launcher-open-tab {
    color: #1252c4;
}

@media (max-width: 640px) {
    .demo-launcher--focus .demo-launcher-focus {
        width: 100%;
        max-height: calc(100dvh - 0.5rem);
        gap: 0.45rem;
    }

    .demo-launcher-focus-head {
        padding: 0 2.75rem 0 0.5rem;
    }

    .demo-launcher-close {
        top: max(0.65rem, env(safe-area-inset-top));
        right: max(0.65rem, env(safe-area-inset-right));
        width: 2.35rem;
        height: 2.35rem;
    }
}

/* ============================================================
   Features Section
   ============================================================ */
body:not(.editorial-page) #features {
    background: linear-gradient(180deg, var(--c-bg-2) 0%, var(--c-bg) 100%) !important;
    border-top: 1px solid rgba(0, 160, 230, 0.12);
}

/* Glass cards — features grid */
.glass-card {
    background: var(--c-panel) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 10px !important;
    box-shadow:
        0 20px 50px rgba(0, 5, 20, 0.45),
        inset 0 1px 0 rgba(0, 229, 255, 0.05) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.glass-card:hover {
    transform: none !important;
    background: rgba(6, 22, 52, 0.9) !important;
    border-color: rgba(0, 170, 240, 0.38) !important;
    box-shadow:
        0 0 30px rgba(0, 160, 240, 0.1),
        0 20px 50px rgba(0, 5, 20, 0.5) !important;
}

/* Motherboard traces — see styles.css (static PCB corners, no swoosh) */
#features .glass-card > *:not(.trace-container) {
    position: relative;
    z-index: 1;
}

/* Feature card icon blocks */
.glass-card .bg-brand-500\/10 {
    background: rgba(0, 170, 240, 0.09) !important;
    border-color: rgba(0, 160, 230, 0.22) !important;
}

.glass-card .text-brand-700 {
    color: var(--c-cyan) !important;
}

/* Feature card heading hover */
.glass-card h3.group-hover\\:text-brand-700 {
    transition: color 0.12s ease;
}
.glass-card:hover h3 {
    color: var(--c-cyan) !important;
}

/* ============================================================
   Calculator Section — refine existing dark
   ============================================================ */
body:not(.editorial-page) #calculator {
    background: rgba(2, 7, 17, 0.97) !important;
    border-top: 1px solid rgba(0, 160, 230, 0.12);
    border-bottom: 1px solid rgba(0, 160, 230, 0.12);
}

#calculator .bg-white\/5 {
    background: var(--c-panel) !important;
    border-color: rgba(0, 160, 230, 0.18) !important;
    border-radius: 10px !important;
}

#calculator .bg-brand-500\/20 {
    background: rgba(0, 170, 240, 0.14) !important;
}

#calculator .text-brand-300 {
    color: var(--c-cyan) !important;
}

/* Range sliders — brand blue gradient thumbs */
/* Calculator — equal-height row; summary content vertically centred in right card */
#calculator .calc-layout-grid {
    align-items: stretch;
}

#calculator .calc-layout-grid > div {
    align-self: stretch;
    min-height: 0;
}

#calculator .calc-summary-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 100% !important;
    box-sizing: border-box;
}

/* Decorative glow must stay out of flex flow (styles.css z-index rule used to force relative) */
#calculator .calc-summary-panel > .absolute {
    position: absolute !important;
    pointer-events: none;
}

#calculator .calc-summary-body {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

#calculator .calc-roi-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    #calculator .calc-layout-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    #calculator .calc-summary-panel {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }
}

#calculator input[type="range"].calc-range,
#calculator input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 9999px;
    border: none;
    outline: none;
    cursor: pointer;
    background: linear-gradient(
        to right,
        rgba(37, 99, 235, 0.55) 0%,
        rgba(56, 189, 248, 0.45) var(--range-fill, 50%),
        rgba(8, 19, 43, 0.95) var(--range-fill, 50%),
        rgba(8, 19, 43, 0.95) 100%
    );
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.2s ease;
}

#calculator input[type="range"]:hover {
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(37, 99, 235, 0.15);
}

#calculator input[type="range"]:focus-visible {
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.35),
        0 0 0 2px rgba(56, 189, 248, 0.35);
}

#calculator input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border-radius: 50%;
    background: linear-gradient(145deg, #7dd3fc 0%, #2563eb 42%, #1e3a8a 100%);
    border: 2px solid rgba(224, 242, 254, 0.95);
    box-shadow:
        0 0 0 2px rgba(37, 99, 235, 0.3),
        0 2px 8px rgba(37, 99, 235, 0.45),
        0 0 18px rgba(56, 189, 248, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#calculator input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.08);
    box-shadow:
        0 0 0 3px rgba(56, 189, 248, 0.35),
        0 3px 12px rgba(37, 99, 235, 0.55),
        0 0 22px rgba(56, 189, 248, 0.45);
}

#calculator input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.02);
}

#calculator input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 9999px;
    background: transparent;
}

#calculator input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 9999px;
    background: transparent;
    border: none;
}

#calculator input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(145deg, #7dd3fc 0%, #2563eb 42%, #1e3a8a 100%);
    border: 2px solid rgba(224, 242, 254, 0.95);
    box-shadow:
        0 0 0 2px rgba(37, 99, 235, 0.3),
        0 2px 8px rgba(37, 99, 235, 0.45),
        0 0 18px rgba(56, 189, 248, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#calculator input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.08);
}

#calculator input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 9999px;
    background: linear-gradient(to right, rgba(37, 99, 235, 0.55), rgba(56, 189, 248, 0.45));
}

#calculator .bg-slate-800 {
    background: rgba(0, 20, 50, 0.8) !important;
}

/* Calculator results panel */
#calculator .bg-gradient-to-br {
    background: linear-gradient(135deg, rgba(3, 10, 28, 0.96) 0%, rgba(2, 7, 17, 0.99) 100%) !important;
}

#calculator .text-rose-400 {
    color: #ff6b8a !important;
    text-shadow: 0 0 16px rgba(255, 80, 120, 0.4);
}

#calculator .text-emerald-400 {
    color: var(--c-green) !important;
    text-shadow: 0 0 16px rgba(0, 232, 144, 0.4);
}

#calculator .bg-brand-500\/10 {
    background: rgba(0, 170, 240, 0.09) !important;
}

#calculator .border-brand-500\/20 {
    border-color: rgba(0, 160, 230, 0.2) !important;
}

#calculator .text-brand-300 {
    color: var(--c-cyan) !important;
    font-family: var(--c-mono) !important;
}

/* Pricing tier cards — summaries + feature groups */
#pricing .pricing-tier-summary {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--c-text-2);
    margin-bottom: 0.85rem;
}

#pricing .pricing-pill {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: rgba(0, 170, 240, 0.1);
    border: 1px solid rgba(0, 160, 230, 0.22);
    color: var(--c-cyan);
}

#pricing .gradient-border-wisdom .pricing-pill {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.28);
    color: #fcd34d;
}

#pricing .pricing-tier-details {
    margin-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.65rem;
}

#pricing .glass-card:not(.gradient-border-wisdom) .pricing-tier-details {
    border-top-color: rgba(0, 160, 230, 0.14);
}

#pricing .pricing-feature-group {
    margin-top: 0.65rem;
}

#pricing .pricing-feature-group-title {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-3);
    margin-bottom: 0.35rem;
}

#pricing .pricing-features-compact {
    list-style: none;
    padding: 0;
    margin: 0;
}

#pricing .pricing-features-compact li {
    font-size: 0.72rem;
    line-height: 1.45;
    padding: 0.2rem 0 0.2rem 1rem;
    position: relative;
    color: var(--c-text-2);
}

#pricing .pricing-features-compact li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--c-cyan);
    opacity: 0.75;
}

#pricing .gradient-border-wisdom .pricing-features-compact li {
    color: rgba(255, 255, 255, 0.88);
}

#pricing .gradient-border-wisdom .pricing-features-compact li::before {
    background: #fbbf24;
}

html[data-theme="light"] #pricing .pricing-tier-summary {
    color: #1e3d72;
}

html[data-theme="light"] #pricing .pricing-pill {
    background: rgba(18, 82, 196, 0.08);
    border-color: rgba(21, 87, 224, 0.18);
    color: #1252c4;
}

html[data-theme="light"] #pricing .pricing-feature-group-title {
    color: #6888aa;
}

html[data-theme="light"] #pricing .pricing-features-compact li {
    color: #1e3d72;
}

html[data-theme="light"] #pricing .gradient-border-wisdom .pricing-features-compact li {
    color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   Pricing Section — dark navy
   ============================================================ */
body:not(.editorial-page) #pricing {
    background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 100%) !important;
    border-top: 1px solid rgba(0, 160, 230, 0.1);
}

/* Pricing toggle badge */
#pricing .bg-brand-700\/10 {
    background: rgba(0, 170, 240, 0.09) !important;
    border-color: rgba(0, 160, 230, 0.22) !important;
    color: var(--c-cyan) !important;
}

/* Billing toggle — editorial page overrides (see styles.css) */
.editorial-page #billingToggle {
    background: #111111 !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}
.editorial-page #billingToggleKnob {
    background: #FFFFFF !important;
}

/* Billing labels */
#billingLabelMonthly.text-slate-900,
#billingLabelAnnually.text-slate-900 {
    color: var(--c-text-1) !important;
}
#billingLabelMonthly.text-slate-400,
#billingLabelAnnually.text-slate-400 {
    color: var(--c-text-3) !important;
}

/* Save 20% badge */
#pricing .bg-emerald-500\/10 {
    background: rgba(0, 232, 144, 0.09) !important;
    border-color: rgba(0, 200, 120, 0.22) !important;
    color: var(--c-green) !important;
}

/* Local & Global pricing cards */
#pricing .glass-card.border.border-slate-200.bg-white {
    background: var(--c-panel) !important;
    border-color: var(--c-border) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

#pricing .glass-card.border.border-slate-200.bg-white:hover {
    border-color: rgba(0, 170, 240, 0.45) !important;
    box-shadow: 0 0 45px rgba(0, 180, 255, 0.16), 0 20px 50px rgba(0, 5, 20, 0.5) !important;
    transform: translateY(-4px) !important;
}

/* Unified pricing CTAs — JetBrains Mono, rectangular, hover glow */
body:not(.editorial-page) #pricing .pricing-btn {
    position: relative;
    overflow: hidden;
    border-radius: 5px !important;
    font-family: var(--c-mono) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

body:not(.editorial-page) #pricing .pricing-btn--primary {
    background: transparent !important;
    border: 1.5px solid var(--c-cyan) !important;
    color: var(--c-cyan) !important;
}

body:not(.editorial-page) #pricing .pricing-btn--primary:hover {
    background: rgba(0, 229, 255, 0.1) !important;
    border-color: var(--c-cyan) !important;
    color: #fff !important;
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.22) !important;
    transform: translateY(-1px);
}

body:not(.editorial-page) #pricing .pricing-btn--featured {
    background: var(--c-cyan) !important;
    border: 1.5px solid var(--c-cyan) !important;
    color: #010d1a !important;
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.3) !important;
}

body:not(.editorial-page) #pricing .pricing-btn--featured:hover {
    background: #22ecff !important;
    color: #010d1a !important;
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.5) !important;
    transform: translateY(-1px);
}

body:not(.editorial-page) #pricing .pricing-btn--secondary {
    background: rgba(0, 28, 65, 0.3) !important;
    border: 1.5px solid rgba(0, 160, 230, 0.22) !important;
    color: var(--c-text-2) !important;
}

body:not(.editorial-page) #pricing .pricing-btn--secondary:hover {
    background: rgba(0, 50, 100, 0.4) !important;
    border-color: rgba(0, 229, 255, 0.4) !important;
    color: var(--c-text-1) !important;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.16) !important;
    transform: translateY(-1px);
}

body:not(.editorial-page) #pricing .gradient-border-wisdom .pricing-btn--secondary {
    border-color: rgba(0, 160, 230, 0.28) !important;
}

body:not(.editorial-page) #pricing .gradient-border-wisdom .pricing-btn--secondary:hover {
    background: rgba(0, 229, 255, 0.08) !important;
}

/* Pricing card tag lines */
#pricing .text-slate-400 { color: var(--c-text-3) !important; }

/* Price display numbers */
#localPriceDisplay,
#globalPriceDisplay {
    color: var(--c-text-1) !important;
    font-family: var(--c-mono) !important;
}

/* Setup fee text */
#pricing .text-slate-500.font-mono { color: var(--c-text-3) !important; }

/* Divider lines in pricing cards */
#pricing .border-slate-200 { border-color: rgba(0, 160, 230, 0.14) !important; }

/* List items text */
#pricing ul .text-slate-600 { color: var(--c-text-2) !important; }

/* Check icons */
#pricing .text-brand-500 { color: var(--c-cyan) !important; }

/* Western (gradient-border-wisdom) card — keep dark, update border to cyan */
.gradient-border-wisdom {
    background:
        radial-gradient(ellipse 65% 48% at 88% 12%, rgba(0, 229, 255, 0.1) 0%, transparent 46%),
        linear-gradient(155deg, rgba(4, 14, 40, 0.96) 0%, rgba(2, 8, 24, 0.99) 100%) padding-box,
        linear-gradient(135deg, var(--c-cyan) 0%, rgba(0, 130, 220, 0.6) 50%, var(--c-cobalt) 100%) border-box !important;
    border: 2px solid transparent !important;
}

.glass-card.gradient-border-wisdom:hover {
    background:
        radial-gradient(ellipse 65% 48% at 88% 12%, rgba(0, 229, 255, 0.15) 0%, transparent 46%),
        linear-gradient(155deg, rgba(5, 18, 50, 0.98) 0%, rgba(2, 8, 24, 1) 100%) padding-box,
        linear-gradient(135deg, var(--c-cyan) 0%, rgba(0, 200, 255, 0.8) 50%, var(--c-cobalt) 100%) border-box !important;
    box-shadow: 0 0 50px rgba(0, 180, 255, 0.18), 0 24px 60px rgba(0, 5, 20, 0.6) !important;
    transform: none !important;
}

/* Western "Most Popular" badge */
.gradient-border-wisdom [class*="bg-gradient-to-r from-amber"] {
    background: linear-gradient(90deg, var(--c-cyan) 0%, rgba(0, 200, 255, 0.8) 100%) !important;
    border-color: rgba(0, 229, 255, 0.5) !important;
    color: #010d1a !important;
}

/* Western price */
#westernPriceDisplay {
    color: var(--c-cyan) !important;
    font-family: var(--c-mono) !important;
    text-shadow: 0 0 22px rgba(0, 229, 255, 0.4);
}

/* Western label */
.gradient-border-wisdom .text-amber-200 { color: var(--c-cyan) !important; opacity: 0.7; }

/* Western check icons */
.gradient-border-wisdom .text-amber-400 { color: var(--c-cyan) !important; }

/* Western annual info */
#westernBilledAnnuallyInfo { color: var(--c-cyan) !important; }

/* Western card accent overrides — buttons use .pricing-btn classes */
/* Special Deal Banner */
#pricing .bg-gradient-to-r.from-emerald-500\/5 {
    background: var(--c-panel) !important;
    border-color: rgba(0, 170, 240, 0.2) !important;
}
#pricing .text-emerald-600 { color: var(--c-green) !important; }
#pricing .bg-emerald-500\/10 { background: rgba(0, 232, 144, 0.09) !important; }
#pricing .border-emerald-500\/20 { border-color: rgba(0, 200, 120, 0.2) !important; }
#pricing .text-slate-900.mt-2 { color: var(--c-text-1) !important; }

/* Promo stamp — JetBrains Mono, tight word spacing */
.promo-stamp {
    display: inline-block;
    font-family: var(--c-mono) !important;
    letter-spacing: normal;
    word-spacing: normal;
    white-space: nowrap;
    font-weight: 700;
    font-variant-ligatures: none;
}

:lang(km) .promo-stamp {
    word-spacing: normal !important;
    letter-spacing: normal !important;
}

/* "Claim Offer Now" banner button */
#pricing .promo-claim-btn {
    background: transparent !important;
    border: 1.5px solid var(--c-cyan) !important;
    color: var(--c-cyan) !important;
    border-radius: 5px !important;
    font-family: var(--c-mono) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
#pricing .promo-claim-btn:hover {
    background: rgba(0, 229, 255, 0.1) !important;
    color: #fff !important;
}

/* ============================================================
   Security Section
   ============================================================ */
body:not(.editorial-page) #why-us {
    background: linear-gradient(180deg, var(--c-bg-2) 0%, var(--c-bg) 100%) !important;
    border-top: 1px solid rgba(0, 160, 230, 0.1);
}

/* Security dark cards */
.glass-card-dark {
    background: var(--c-panel) !important;
    border-color: rgba(0, 160, 230, 0.16) !important;
    border-radius: 10px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.glass-card-dark:hover {
    border-color: rgba(0, 229, 255, 0.38) !important;
    box-shadow: 0 0 28px rgba(0, 160, 240, 0.12) !important;
}

/* Motherboard traces — see styles.css */
#why-us .glass-card-dark > *:not(.trace-container) {
    position: relative;
    z-index: 1;
}

/* Security icon rings */
.glass-card-dark .bg-brand-500\/10 {
    background: rgba(0, 170, 240, 0.09) !important;
    border-color: rgba(0, 160, 230, 0.22) !important;
}

.glass-card-dark .text-brand-300 { color: var(--c-cyan) !important; }
.glass-card-dark .text-emerald-400 { color: var(--c-green) !important; }
.glass-card-dark .text-purple-400 { color: #b070ff !important; }

/* Security section underline decoration */
#why-us strong.underline { text-decoration-color: var(--c-cyan) !important; }

/* Card body copy — text-slate-400 maps to --c-text-3 which is too dim here */
#why-us .glass-card-dark p,
#why-us .glass-card-dark .text-slate-400 {
    color: #a8c4e8 !important;
}

/* Motherboard traces — see styles.css */
#pricing .grid.md\\:grid-cols-3 > div > *,
#calculator .grid > div > *:not(.absolute),
#pricing .max-w-4xl.mx-auto.border > *,
#leadFormContainer > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   Contact Section
   ============================================================ */
body:not(.editorial-page) #contact {
    background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 100%) !important;
    border-top: 1px solid rgba(0, 160, 230, 0.1);
}

/* Contact form card */
#leadFormContainer {
    background: var(--c-panel) !important;
    border-color: rgba(0, 160, 230, 0.2) !important;
    border-radius: 12px !important;
}

/* Form inputs — already styled dark in HTML, just refine focus ring */
#leadForm input:focus,
#leadForm select:focus,
#leadForm input[type="time"]:focus {
    border-color: var(--c-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12) !important;
}

#leadForm input,
#leadForm select,
#leadForm input[type="time"] {
    background: rgba(2, 8, 22, 0.7) !important;
    border-color: rgba(0, 160, 230, 0.2) !important;
    color: var(--c-text-1) !important;
    border-radius: 7px !important;
}

#leadForm input[type="time"] {
    padding-right: 2.75rem;
}

/* ── Time: hide native clock, show custom FA icon ── */
.form-picker-wrap:not(.form-picker-wrap--date) input[type="time"],
#leadForm .form-picker-wrap:not(.form-picker-wrap--date) input[type="time"],
#chatbot-window .form-picker-wrap:not(.form-picker-wrap--date) input[type="time"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
    color-scheme: dark;
    background-image: none !important;
    position: relative;
    cursor: pointer;
    width: 100%;
}

.form-picker-wrap:not(.form-picker-wrap--date) input[type="time"]::-webkit-calendar-picker-indicator,
#leadForm .form-picker-wrap:not(.form-picker-wrap--date) input[type="time"]::-webkit-calendar-picker-indicator,
#chatbot-window .form-picker-wrap:not(.form-picker-wrap--date) input[type="time"]::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

.form-picker-wrap:not(.form-picker-wrap--date) input[type="time"]::-moz-calendar-picker-indicator,
#leadForm .form-picker-wrap:not(.form-picker-wrap--date) input[type="time"]::-moz-calendar-picker-indicator,
#chatbot-window .form-picker-wrap:not(.form-picker-wrap--date) input[type="time"]::-moz-calendar-picker-indicator {
    display: none !important;
}

/* ── Date: text facade + off-screen native input (impossible to show browser chrome) ── */
.form-picker-wrap--date {
    position: relative;
}

.form-picker-wrap--date .form-picker-date-facade {
    padding-right: 2.75rem !important;
    cursor: pointer;
    width: 100%;
}

.form-picker-wrap--date .form-picker-date-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Time: text facade + off-screen native input (same pattern as date) ── */
.form-picker-wrap--time {
    position: relative;
}

.form-picker-wrap--time .form-picker-time-facade {
    padding-right: 2.75rem !important;
    cursor: pointer;
    width: 100%;
}

.form-picker-wrap--time .form-picker-time-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#chatbot-window .form-picker-wrap--time .form-picker-time-facade {
    padding-right: 2.25rem !important;
    cursor: pointer;
}

#leadForm .form-picker-wrap--date .form-picker-date-facade {
    background: rgba(2, 8, 22, 0.7) !important;
    border-color: rgba(0, 160, 230, 0.2) !important;
    color: var(--c-text-1, #f1f5f9) !important;
    border-radius: 7px !important;
}

#leadForm .form-picker-wrap--time .form-picker-time-facade {
    background: rgba(2, 8, 22, 0.7) !important;
    border-color: rgba(0, 160, 230, 0.2) !important;
    color: var(--c-text-1, #f1f5f9) !important;
    border-radius: 7px !important;
}

#leadForm .form-picker-wrap--date:not(.has-value) .form-picker-date-facade {
    color: #64748b !important;
}

#leadForm .form-picker-wrap--time:not(.has-value) .form-picker-time-facade {
    color: #64748b !important;
}

html[data-theme="light"] #leadForm .form-picker-wrap--date .form-picker-date-facade {
    background: rgba(240, 247, 255, 0.8) !important;
    border-color: rgba(21, 87, 224, 0.16) !important;
}

html[data-theme="light"] #leadForm .form-picker-wrap--time .form-picker-time-facade {
    background: rgba(240, 247, 255, 0.8) !important;
    border-color: rgba(21, 87, 224, 0.16) !important;
}

html[data-theme="light"] #leadForm .form-picker-wrap--date.has-value .form-picker-date-facade {
    color: #0a1a38 !important;
}

html[data-theme="light"] #leadForm .form-picker-wrap--time.has-value .form-picker-time-facade {
    color: #0a1a38 !important;
}

html[data-theme="light"] #leadForm .form-picker-wrap--date:not(.has-value) .form-picker-date-facade {
    color: #94a3b8 !important;
}

html[data-theme="light"] #leadForm .form-picker-wrap--time:not(.has-value) .form-picker-time-facade {
    color: #94a3b8 !important;
}

#chatbot-window .form-picker-wrap--date .form-picker-date-facade {
    padding-right: 2.25rem !important;
    cursor: pointer;
}

.form-picker-wrap input[type="time"]::-webkit-inner-spin-button,
.form-picker-wrap input[type="time"]::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none !important;
}

.form-picker-wrap {
    position: relative;
    display: block;
    cursor: pointer;
}

.form-picker-wrap .form-picker-icon {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    margin: auto 0;
    color: rgba(0, 229, 255, 0.75);
    pointer-events: none;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
    z-index: 2;
}

.form-picker-wrap--date .form-picker-date-facade:focus,
.form-picker-wrap--time .form-picker-time-facade:focus {
    border-color: var(--c-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12) !important;
    outline: none !important;
}

html[data-theme="light"] .form-picker-wrap--date .form-picker-date-facade:focus,
html[data-theme="light"] .form-picker-wrap--time .form-picker-time-facade:focus {
    border-color: #1252c4 !important;
    box-shadow: 0 0 0 3px rgba(18, 82, 196, 0.1) !important;
}

#chatbot-window .form-picker-wrap .form-picker-icon {
    right: 0.75rem;
    color: rgba(125, 211, 252, 0.85);
}

/* Submit button */
#leadSubmitBtn {
    background: transparent !important;
    border: 1.5px solid var(--c-cyan) !important;
    color: var(--c-cyan) !important;
    border-radius: 5px !important;
    font-family: var(--c-mono) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.18) !important;
    transition: all 0.12s ease !important;
}
#leadSubmitBtn:hover {
    background: rgba(0, 229, 255, 0.1) !important;
    box-shadow: 0 0 36px rgba(0, 229, 255, 0.38) !important;
    color: #fff !important;
}

/* Contact direct link buttons */
#contact .bg-white\/5 {
    background: rgba(0, 28, 65, 0.32) !important;
    border-color: rgba(0, 160, 230, 0.18) !important;
}
#contact .bg-white\/5:hover {
    background: rgba(0, 48, 100, 0.42) !important;
    border-color: rgba(0, 229, 255, 0.36) !important;
}

/* Contact section divider */
#leadFormContainer .border-t.border-white\/10 {
    border-color: rgba(0, 160, 230, 0.14) !important;
}

/* ============================================================
   Footer
   ============================================================ */
footer {
    background: rgba(2, 7, 16, 0.98) !important;
    border-top-color: rgba(0, 160, 230, 0.14) !important;
    color: var(--c-text-3) !important;
}

footer .w-9.h-9 {
    background: rgba(0, 28, 65, 0.3) !important;
    border-color: rgba(0, 160, 230, 0.16) !important;
    color: var(--c-text-2) !important;
    border-radius: 5px !important;
    transition: all 0.12s ease !important;
}
footer .w-9.h-9:hover {
    background: rgba(0, 55, 115, 0.38) !important;
    border-color: rgba(0, 229, 255, 0.4) !important;
    color: var(--c-cyan) !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.2) !important;
}

.footer-copyright-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    max-width: 100%;
}

.footer-lotus-mark {
    height: 20px;
    width: 20px;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent;
    filter: drop-shadow(0 1px 4px rgba(0, 229, 255, 0.25));
}

/* ============================================================
   Back-to-top button — left side, lifts above footer when visible
   ============================================================ */
#backToTopBtn {
    position: fixed !important;
    bottom: var(--fab-bottom, 1.5rem) !important;
    left: 1.5rem !important;
    right: auto !important;
    background: rgba(2, 10, 28, 0.94) !important;
    border: 1.5px solid rgba(0, 229, 255, 0.38) !important;
    border-radius: 7px !important;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.18) !important;
}
#backToTopBtn:hover {
    box-shadow: 0 0 32px rgba(0, 229, 255, 0.38) !important;
    transform: translateY(-2px) !important;
}
#backToTopBtn.footer-visible:hover {
    box-shadow: 0 0 32px rgba(0, 229, 255, 0.38) !important;
    transform: translateY(-2px) scale(1.02) !important;
}
#backToTopBtn i { color: var(--c-cyan) !important; }

/* ============================================================
   Chatbot widget — theme-aware
   ============================================================ */
#chatbot-window {
    background: rgba(3, 12, 24, 0.96) !important;
    border: 1px solid rgba(0, 229, 255, 0.32) !important;
    box-shadow:
        0 0 0 1px rgba(0, 229, 255, 0.08),
        0 0 36px rgba(0, 229, 255, 0.12),
        0 24px 64px rgba(0, 0, 0, 0.62) !important;
    display: flex;
    flex-direction: column;
    max-height: var(--chat-max-height, calc(100dvh - var(--chat-safe-bottom, 7.5rem) - var(--chat-safe-top, 5rem)));
    min-height: 0;
}

#chatbot-window.hidden {
    display: none !important;
    pointer-events: none !important;
}

#chatbot-messages {
    background:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(0, 229, 255, 0.06) 0%, transparent 55%),
        rgba(2, 7, 18, 0.72) !important;
    flex: 1 1 auto;
    min-height: 0;
}

#chatbot-window > div:first-child {
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(0, 140, 180, 0.45) 0%, rgba(21, 87, 224, 0.5) 45%, rgba(3, 12, 28, 0.95) 100%) !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.22) !important;
    box-shadow: 0 4px 24px rgba(0, 229, 255, 0.08) !important;
}

#chatbot-window.bot-chat-active > div:first-child,
#chatbot-window:not(.live-chat-active) > div:first-child {
    background: linear-gradient(135deg, rgba(0, 140, 180, 0.45) 0%, rgba(21, 87, 224, 0.5) 45%, rgba(3, 12, 28, 0.95) 100%) !important;
}

#chatbot-window:not(.live-chat-active) #chatbot-status-dot {
    background: var(--c-cyan) !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.65) !important;
}

#chatbot-window:not(.live-chat-active) #chatbot-status-text {
    color: #b8f0ff !important;
}

.chatbot-avatar {
    padding: 0 !important;
    overflow: visible;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Message + header marks — icon IS the avatar (no outer box) */
.chatbot-header-title {
    gap: 6px;
}

.chatbot-header-mark,
.concierge-mark-header {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.chatbot-message-mark,
.chatbot-message.ai > .concierge-mark-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-top: auto;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.chatbot-bubble-ai {
    background: linear-gradient(145deg, rgba(5, 22, 48, 0.94) 0%, rgba(8, 32, 62, 0.9) 100%) !important;
    border: 1px solid rgba(0, 170, 240, 0.22) !important;
    border-left: 3px solid var(--c-cyan) !important;
    color: var(--c-text-1) !important;
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(0, 229, 255, 0.07) !important;
}

.chatbot-markdown {
    font-size: 13px;
    line-height: 1.55;
}

.chatbot-md-p {
    margin: 0 0 0.55rem;
}

#chatbot-welcome-markdown .chatbot-md-p {
    margin: 0 0 0.65rem;
}

#chatbot-welcome-markdown .chatbot-md-p:first-child {
    margin-bottom: 0.75rem;
}

.chatbot-md-feature {
    margin: 0.4rem 0 !important;
}

.chatbot-md-p:last-child {
    margin-bottom: 0;
}

.chatbot-md-h3 {
    margin: 0.75rem 0 0.45rem;
    font-size: 14px;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.35;
}

.chatbot-md-h4 {
    margin: 0.55rem 0 0.35rem;
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.35;
}

.chatbot-hr,
.chatbot-md-divider {
    border: none;
    height: 1px;
    margin: 0.75rem 0;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.5), transparent);
}

.chatbot-md-divider {
    height: auto;
    background: none;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(0, 229, 255, 0.45);
    margin: 0.85rem 0;
}

.chatbot-tier-card {
    margin: 0.55rem 0;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.09) 0%, rgba(21, 87, 224, 0.07) 100%);
    border: 1px solid rgba(0, 229, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(0, 229, 255, 0.06);
}

.chatbot-tier-card + .chatbot-tier-card {
    margin-top: 0.45rem;
}

.chatbot-tier-title {
    font-weight: 700;
    font-size: 12px;
    line-height: 1.4;
    color: var(--c-cyan);
    margin-bottom: 0.35rem;
}

.chatbot-tier-title strong {
    color: #a5f3fc !important;
}

.chatbot-lang-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.15rem;
}

.chatbot-lang-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    background: rgba(0, 30, 55, 0.65);
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: var(--c-text-1);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.06);
}

.chatbot-md-ul,
.chatbot-md-ol {
    margin: 0.3rem 0 0.45rem;
    padding-left: 0;
    list-style: none;
}

.chatbot-md-ul li,
.chatbot-md-ol li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.3rem;
    color: #cbd5e1;
}

.chatbot-md-ul li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.58em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.55);
}

.chatbot-md-ol {
    counter-reset: chat-ol;
}

.chatbot-md-ol li {
    counter-increment: chat-ol;
}

.chatbot-md-ol li::before {
    content: counter(chat-ol) '.';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 11px;
    font-weight: 700;
    color: #60a5fa;
}

.chatbot-markdown strong {
    color: #f8fafc;
    font-weight: 700;
}

.chatbot-markdown ol,
.chatbot-markdown ul {
    margin: 0.35rem 0;
}

.chatbot-bubble-user {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.16) 0%, rgba(21, 87, 224, 0.24) 100%) !important;
    border: 1px solid rgba(0, 229, 255, 0.28) !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(0, 229, 255, 0.1) !important;
}

.chatbot-live-banner {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0.25rem 0;
    animation: chatbot-live-banner-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.chatbot-live-banner-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.35);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.12);
}

.chatbot-live-banner-inner i {
    font-size: 0.75rem;
    opacity: 0.9;
}

.chatbot-message.live-agent .chatbot-avatar-live {
    background: rgba(16, 185, 129, 0.18) !important;
    border-color: rgba(52, 211, 153, 0.45) !important;
    color: #6ee7b7 !important;
}

.chatbot-bubble-live {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
    color: #ecfdf5 !important;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.08) !important;
}

.chatbot-live-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6ee7b7;
    margin-bottom: 0.35rem;
    opacity: 0.95;
}

#chatbot-window.live-chat-active {
    border: 2px solid rgba(52, 211, 153, 0.8) !important;
    box-shadow:
        0 0 0 1px rgba(16, 185, 129, 0.45),
        0 0 32px rgba(16, 185, 129, 0.32),
        0 0 64px rgba(16, 185, 129, 0.12),
        0 20px 60px rgba(0, 0, 0, 0.55) !important;
    animation: chatbot-live-glow 2.8s ease-in-out infinite;
}

#chatbot-window.live-chat-active #chatbot-messages {
    background: rgba(4, 47, 46, 0.42) !important;
}

#chatbot-window.live-chat-active #chatbot-suggestions,
#chatbot-window.live-chat-active .chatbot-reply-buttons {
    display: none !important;
}

.chatbot-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ecfdf5;
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid rgba(110, 231, 183, 0.55);
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.25);
}

.chatbot-live-badge.hidden {
    display: none !important;
}

.chatbot-live-badge-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: #fcd34d;
    box-shadow: 0 0 8px rgba(252, 211, 77, 0.75);
    animation: chatbot-live-dot-pulse 1.4s ease-in-out infinite;
}

@keyframes chatbot-live-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

@keyframes chatbot-live-glow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(52, 211, 153, 0.45),
            0 0 28px rgba(16, 185, 129, 0.28),
            0 0 56px rgba(16, 185, 129, 0.1),
            0 20px 60px rgba(0, 0, 0, 0.55);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(110, 231, 183, 0.75),
            0 0 40px rgba(16, 185, 129, 0.42),
            0 0 72px rgba(16, 185, 129, 0.18),
            0 20px 60px rgba(0, 0, 0, 0.55);
    }
}

#chatbot-widget.bot-chat-active #chatbot-toggle,
#chatbot-widget:not(.live-chat-active) #chatbot-toggle {
    border-color: rgba(59, 130, 246, 0.55) !important;
    box-shadow: 0 0 22px rgba(37, 99, 235, 0.28) !important;
}

#chatbot-widget.live-chat-active #chatbot-toggle {
    border-color: rgba(52, 211, 153, 0.72) !important;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.38) !important;
}

#chatbot-window.live-chat-active > div:first-child {
    background: linear-gradient(to right, #047857, #065f46) !important;
}

#chatbot-window.live-chat-active #chatbot-status-dot {
    background: #34d399 !important;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.75) !important;
    animation: chatbot-live-dot-pulse 1.4s ease-in-out infinite;
}

#chatbot-window.live-chat-active #chatbot-status-text {
    color: #d1fae5 !important;
}

@keyframes chatbot-live-banner-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chatbot-live-ended-inner {
    color: #93c5fd !important;
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.1) !important;
}

.chatbot-reply-buttons {
    margin-top: 0.15rem;
    margin-bottom: 0.35rem;
}

.chatbot-reply-btn {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    font-weight: 500;
}

.chatbot-reply-btn.suggestion-pill {
    background: rgba(0, 35, 65, 0.6) !important;
    border: 1px solid rgba(0, 170, 240, 0.3) !important;
    color: var(--c-text-1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(0, 229, 255, 0.05) !important;
}

.chatbot-reply-btn.suggestion-pill:hover {
    background: rgba(0, 229, 255, 0.12) !important;
    border-color: var(--c-cyan) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.22) !important;
    transform: translateY(-1px);
}

.chatbot-table-wrap {
    overflow-x: auto;
    margin: 0.5rem 0 0.65rem;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.chatbot-table {
    width: 100%;
    min-width: 240px;
    border-collapse: collapse;
    font-size: 11px;
    line-height: 1.35;
}

.chatbot-table th,
.chatbot-table td {
    padding: 7px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    vertical-align: top;
}

.chatbot-table th {
    background: rgba(37, 99, 235, 0.2);
    color: #e2e8f0;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chatbot-table tbody tr:last-child td {
    border-bottom: none;
}

.chatbot-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
}

.suggestion-pill {
    background: rgba(0, 35, 65, 0.55) !important;
    border: 1px solid rgba(0, 170, 240, 0.28) !important;
    color: var(--c-text-1) !important;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(0, 229, 255, 0.04) !important;
}
.suggestion-pill:hover {
    background: rgba(0, 229, 255, 0.11) !important;
    border-color: var(--c-cyan) !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.2) !important;
}

.chatbot-input-area {
    background: rgba(8, 14, 20, 0.92) !important;
    border-top-color: rgba(76, 201, 240, 0.28) !important;
    flex-shrink: 0;
}

#chatbot-widget.chatbot-open .chatbot-input-area {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
}

#chatbot-form {
    width: 100%;
}

.chatbot-send-btn {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
}

.chatbot-voice-btn {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    background: rgba(76, 201, 240, 0.1);
    border: 1px solid rgba(76, 201, 240, 0.45);
    color: #4CC9F0;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.chatbot-voice-btn:hover:not(:disabled) {
    color: #fff;
    border-color: rgba(76, 201, 240, 0.85);
    background: rgba(76, 201, 240, 0.2);
}

.chatbot-voice-btn.is-recording {
    color: #fff;
    background: rgba(239, 68, 68, 0.85);
    border-color: rgba(252, 165, 165, 0.6);
    animation: chatbot-voice-pulse 1.1s ease-in-out infinite;
}

.chatbot-voice-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@keyframes chatbot-voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.chatbot-voice-hint {
    text-align: center;
    font-size: 10px;
    color: rgba(76, 201, 240, 0.85);
    margin-top: 6px;
    min-height: 14px;
}

html[data-theme="light"] .chatbot-voice-btn {
    background: rgba(18, 82, 196, 0.06);
    border-color: rgba(18, 82, 196, 0.14);
    color: #64748b;
}

html[data-theme="light"] .chatbot-voice-btn:hover:not(:disabled) {
    color: #1252c4;
    border-color: rgba(18, 82, 196, 0.28);
    background: rgba(18, 82, 196, 0.1);
}

html[data-theme="light"] .chatbot-voice-hint {
    color: #64748b;
}

#chatbot-input {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(76, 201, 240, 0.45) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.08) !important;
}
#chatbot-input::placeholder {
    color: rgba(255, 255, 255, 0.72) !important;
}
#chatbot-input:focus {
    border-color: rgba(76, 201, 240, 0.9) !important;
    background: rgba(76, 201, 240, 0.08) !important;
    box-shadow: 0 0 0 2px rgba(76, 201, 240, 0.22) !important;
}

.chatbot-powered-by-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.chatbot-powered-by-logo {
    width: 0.875rem;
    height: 0.875rem;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.9;
}

.chatbot-powered-by {
    color: #64748b !important;
}

#chatbot-window .booking-card,
#chatbot-window .callback-card {
    margin-top: 14px;
    padding: 18px;
    border-radius: 12px;
    font-size: 13px;
    box-sizing: border-box;
    width: 100%;
    background: linear-gradient(145deg, rgba(0, 229, 255, 0.07) 0%, rgba(21, 87, 224, 0.05) 100%) !important;
    border: 1px solid rgba(0, 229, 255, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(0, 229, 255, 0.08), 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

#chatbot-window .booking-card-title {
    margin: 0 0 14px 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--c-cyan) !important;
}

#chatbot-window .booking-card-wrap {
    margin-top: 10px;
    width: 100%;
}

#chatbot-window .chat-booking-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

#chatbot-window .chat-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

#chatbot-window .chat-form-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

#chatbot-window .chat-form-row .chat-form-field {
    flex: 1 1 0;
    min-width: 0;
}

#chatbot-window .chat-form-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8 !important;
    text-align: left;
    line-height: 1.3;
}

#chatbot-window .chat-form-input,
#chatbot-window .chat-booking-form input,
#chatbot-window .chat-booking-form select {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px !important;
    font-size: 13px;
    line-height: 1.4;
    text-align: left !important;
    outline: none;
    cursor: text;
    background: rgba(2, 8, 24, 0.65) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    color: #f1f5f9 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#chatbot-window .chat-form-input::placeholder,
#chatbot-window .chat-booking-form input::placeholder {
    color: #64748b !important;
    opacity: 1;
}

#chatbot-window .chat-form-input:focus,
#chatbot-window .chat-booking-form input:focus,
#chatbot-window .chat-booking-form select:focus {
    border-color: rgba(56, 189, 248, 0.65) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(56, 189, 248, 0.15);
}

#chatbot-window .chat-form-select {
    cursor: pointer;
    padding-right: 2rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 12px;
}

#chatbot-window .chatbot-bubble-form {
    flex: 1 1 0%;
    min-width: 0;
    max-width: calc(100% - 2.75rem);
    width: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

#chatbot-window .chatbot-bubble-form .booking-card-wrap,
#chatbot-window .chatbot-bubble-form .booking-card {
    overflow-x: hidden;
    max-width: 100%;
}

#chatbot-window .chat-form-field-packages {
    position: relative;
    isolation: isolate;
}

#chatbot-window .chat-package-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
    position: relative;
}

#chatbot-window .chat-package-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(2, 8, 24, 0.65);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#chatbot-window .chat-package-row:hover {
    border-color: rgba(56, 189, 248, 0.45);
}

#chatbot-window .chat-package-row:has(.chat-package-radio:checked) {
    border-color: rgba(0, 229, 255, 0.55);
    background: rgba(0, 229, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.12);
}

#chatbot-window .chat-package-radio {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: auto;
    margin: 0;
    align-self: center;
    accent-color: #0ea5e9;
    cursor: pointer;
}

#chatbot-window .chat-package-row-label {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 10px 0;
    margin: 0;
    cursor: pointer;
    box-sizing: border-box;
}

#chatbot-window .chat-package-row-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chatbot-window .chat-package-row-price {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-cyan);
    line-height: 1.35;
    white-space: nowrap;
}

#chatbot-window .chat-form-submit {
    width: 100%;
    margin-top: 4px;
    padding: 11px 14px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

#chatbot-window .chat-booking-form input[type="date"],
#chatbot-window .chat-booking-form input[type="time"] {
    color: #e2e8f0 !important;
    padding-right: 2.25rem;
}

#chatbot-window .chat-booking-form input[type="date"]::-webkit-datetime-edit,
#chatbot-window .chat-booking-form input[type="time"]::-webkit-datetime-edit {
    color: #e2e8f0;
}
#chatbot-window .chat-booking-form select option {
    background: #0f172a !important;
    color: #fff !important;
}

.chatbot-booking-btn {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
}


.chatbot-typing-dot {
    background: #94a3b8 !important;
}

.chatbot-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 14px;
    padding: 2px 0;
}

.chatbot-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b8924a;
    animation: chatbot-typing-bounce 1.4s infinite ease-in-out;
    opacity: 0.4;
}

.chatbot-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.chatbot-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes chatbot-typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* Chat widget — pinned bottom-right */
#chatbot-widget {
    left: auto !important;
    right: 1.5rem !important;
    bottom: var(--fab-bottom, 1.5rem) !important;
    max-height: calc(100dvh - var(--chat-safe-top, 5rem));
}

#chatbot-widget.chatbot-open {
    z-index: 100 !important;
}

#chatbot-widget.chatbot-open #chatbot-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    height: 100svh;
}

#chatbot-widget.chatbot-open #chatbot-window {
    margin-bottom: 0 !important;
}

#chatbot-widget.chatbot-open #chatbot-toggle {
    display: none !important;
}

#chatbot-widget.chatbot-open .chatbot-powered-by-wrap {
    display: none;
}

#chatbot-widget.chatbot-open .chatbot-voice-hint {
    margin-top: 0.15rem;
    font-size: 0.625rem;
    line-height: 1.2;
}

/* Chat FAB — icon IS the button (full-bleed circular PNG) */
#chatbot-toggle.chatbot-fab {
    background: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 20px rgba(18, 82, 196, 0.22) !important;
    padding: 0 !important;
}

#chatbot-toggle.chatbot-fab:hover {
    border: none !important;
    box-shadow: 0 6px 28px rgba(18, 82, 196, 0.32) !important;
}

.chatbot-fab-icon {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

#chatbot-toggle:not(.chatbot-fab) {
    background: rgba(2, 10, 28, 0.94) !important;
    border: 1.5px solid rgba(0, 229, 255, 0.38) !important;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}
#chatbot-toggle:not(.chatbot-fab):hover {
    box-shadow: 0 0 32px rgba(0, 229, 255, 0.38) !important;
    border-color: var(--c-cyan) !important;
}

/* ============================================================
   Shared reveal animations — unchanged
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
}
.reveal.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .glow-bg,
    #chatbot-toggle {
        animation: none !important;
    }
}

/* ============================================================
   LIGHT MODE — "Lotus Daylight" (Lotus Concierge)  v1.6
   Warm ivory + cobalt precision · Siem Reap gold accents
   ============================================================ */

html[data-theme="light"] body {
    background: var(--daylight-bg, #f0f7ff) !important;
    color: var(--daylight-text-1, #0a1a38) !important;
}
html[data-theme="light"] body .text-slate-900,
html[data-theme="light"] body .text-slate-800 { color: #0a1a38 !important; }
html[data-theme="light"] body .text-slate-600 { color: #1e3d72 !important; }
html[data-theme="light"] body .text-slate-500 { color: #4a6fa0 !important; }
html[data-theme="light"] body .text-slate-400 { color: #6888aa !important; }
html[data-theme="light"] body .text-slate-300 { color: #4a6fa0 !important; }
html[data-theme="light"] body .text-brand-700 { color: #1252c4 !important; }
html[data-theme="light"] body .text-brand-300 { color: #1252c4 !important; }

/* -- Nav ----------------------------------------------------- */
html[data-theme="light"] .glass-nav {
    background: rgba(244, 250, 255, 0.96) !important;
    border-bottom: 1px solid rgba(21, 87, 224, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 40, 120, 0.06) !important;
}
html[data-theme="light"] .glass-nav.nav-scrolled {
    background: rgba(244, 250, 255, 0.99) !important;
    box-shadow: 0 4px 24px rgba(18, 82, 196, 0.1) !important;
}
html[data-theme="light"] .nav-links-row a,
html[data-theme="light"] .nav-more-trigger       { color: #2d4f80 !important; }
html[data-theme="light"] .nav-links-row a:hover,
html[data-theme="light"] .nav-more-trigger:hover,
html[data-theme="light"] .nav-more-wrap.is-open .nav-more-trigger { color: #1252c4 !important; }
html[data-theme="light"] .nav-more-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(21, 87, 224, 0.12) !important;
    box-shadow: 0 12px 36px rgba(18, 82, 196, 0.1) !important;
}
html[data-theme="light"] .nav-more-item { color: #1e3d72 !important; }
html[data-theme="light"] .nav-more-item:hover {
    background: rgba(18, 82, 196, 0.06) !important;
    color: #1252c4 !important;
}
html[data-theme="light"] .nav-icon-btn {
    background: rgba(18, 82, 196, 0.06) !important;
    border-color: rgba(21, 87, 224, 0.2) !important;
    color: #1e3d72 !important;
}
html[data-theme="light"] .nav-icon-btn:hover {
    background: rgba(18, 82, 196, 0.1) !important;
    border-color: #1252c4 !important;
    color: #1252c4 !important;
}
html[data-theme="light"] .mobile-nav-group-label { color: #6888aa !important; }
html[data-theme="light"] .mobile-nav-link--secondary { color: #4a6fa0 !important; }
html[data-theme="light"] .brand-text {
    background: linear-gradient(135deg, #1252c4 0%, #0a70cc 55%, #007acc 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
html[data-theme="light"] .nav-pill-ghost {
    background: rgba(18, 82, 196, 0.06) !important;
    border-color: rgba(21, 87, 224, 0.2) !important;
    color: #1e3d72 !important;
}
html[data-theme="light"] .nav-pill-ghost:hover {
    background: rgba(18, 82, 196, 0.1) !important;
    border-color: #1252c4 !important;
    color: #1252c4 !important;
    box-shadow: 0 0 12px rgba(18, 82, 196, 0.12) !important;
}
html[data-theme="light"] .nav-pill-primary {
    background: #1252c4 !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(18, 82, 196, 0.3) !important;
}
html[data-theme="light"] .nav-pill-primary:hover {
    background: #0a3b96 !important;
    box-shadow: 0 4px 20px rgba(18, 82, 196, 0.4) !important;
}
html[data-theme="light"] .nav-menu-toggle {
    background: rgba(18, 82, 196, 0.06) !important;
    border-color: rgba(21, 87, 224, 0.18) !important;
    color: #1e3d72 !important;
}
html[data-theme="light"] .mobile-nav-drawer {
    background: rgba(248, 252, 255, 0.99) !important;
    border-top-color: rgba(21, 87, 224, 0.12) !important;
}
html[data-theme="light"] .mobile-nav-link       { color: #0a1a38 !important; }
html[data-theme="light"] .mobile-nav-link:hover { background: rgba(18, 82, 196, 0.06) !important; color: #1252c4 !important; }
html[data-theme="light"] .mobile-nav-divider    { background: rgba(21, 87, 224, 0.1) !important; }
html[data-theme="light"] .mobile-nav-social a     { background: rgba(220, 236, 255, 0.6) !important; border-color: rgba(21, 87, 224, 0.14) !important; color: #4a6fa0 !important; }
html[data-theme="light"] .mobile-nav-social a:hover { color: #1252c4 !important; }

/* -- Hero ---------------------------------------------------- */
html[data-theme="light"] section[class*="from-brand-900"],
html[data-theme="light"] section[class*="bg-brand-900"],
html[data-theme="light"] section[class*="bg-slate-900"],
html[data-theme="light"] section[class*="from-slate-900"] {
    --tw-gradient-from: #dceeff;
    --tw-gradient-via: #edf5ff;
    --tw-gradient-to: #f0f7ff;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
    background-color: #f0f7ff !important;
    background-image:
        radial-gradient(ellipse 70% 55% at 88% 8%, rgba(184, 146, 74, 0.10) 0%, transparent 52%),
        radial-gradient(ellipse 55% 45% at 8% 92%, rgba(18, 82, 196, 0.09) 0%, transparent 58%),
        linear-gradient(180deg, #dceeff 0%, #f4f9ff 52%, #faf7f0 100%) !important;
}
html[data-theme="light"] .glow-bg {
    background: radial-gradient(circle, rgba(160, 196, 255, 0.38) 0%, rgba(184, 146, 74, 0.06) 45%, rgba(180, 212, 255, 0) 72%) !important;
}
/* Hero text — override text-white to dark navy for readability */
html[data-theme="light"] section[class*="from-brand-900"] .text-white,
html[data-theme="light"] section[class*="from-brand-900"] h2,
html[data-theme="light"] section[class*="from-brand-900"] h3 {
    color: #0a1a38 !important;
    -webkit-text-fill-color: #0a1a38 !important;
}
html[data-theme="light"] section[class*="from-brand-900"] .text-slate-300,
html[data-theme="light"] section[class*="from-brand-900"] .text-slate-200,
html[data-theme="light"] section[class*="from-brand-900"] p {
    color: #1e3d72 !important;
}
html[data-theme="light"] section.pt-28 h1 > span:first-child:not(#otaRotator) {
    display: block;
    background: linear-gradient(135deg, #0a1a38 0%, #1252c4 52%, #0a3b96 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
html[data-theme="light"] section.pt-28 strong.text-white,
html[data-theme="light"] section.pt-28 .font-medium.text-white {
    color: #0a1a38 !important;
    font-weight: 600 !important;
}
html[data-theme="light"] section.pt-28 .text-emerald-400 {
    color: #059669 !important;
}
html[data-theme="light"] section.pt-28 .inline-flex.bg-white\/5 {
    background: linear-gradient(135deg, rgba(18, 82, 196, 0.07) 0%, rgba(184, 146, 74, 0.08) 100%) !important;
    border-color: rgba(184, 146, 74, 0.28) !important;
    box-shadow: 0 2px 12px rgba(18, 82, 196, 0.06) !important;
}
html[data-theme="light"] section.pt-28 a.bg-white {
    background: #1252c4 !important;
    border: 1.5px solid #1252c4 !important;
    color: #fff !important;
    box-shadow: 0 2px 16px rgba(18, 82, 196, 0.25) !important;
}
html[data-theme="light"] section.pt-28 a.bg-white:hover {
    background: #0a3b96 !important; border-color: #0a3b96 !important;
    box-shadow: 0 4px 24px rgba(18, 82, 196, 0.4) !important; color: #fff !important;
}
html[data-theme="light"] section.pt-28 button.bg-white\/10 {
    background: rgba(18, 82, 196, 0.06) !important;
    border-color: rgba(21, 87, 224, 0.22) !important;
    color: #1e3d72 !important;
}
html[data-theme="light"] section.pt-28 button.bg-white\/10:hover {
    background: rgba(18, 82, 196, 0.1) !important; border-color: #1252c4 !important;
}
html[data-theme="light"] .video-embed {
    border-color: rgba(21, 87, 224, 0.22) !important;
    box-shadow:
        0 0 0 1px rgba(184, 146, 74, 0.08),
        0 0 40px rgba(18, 82, 196, 0.10),
        0 24px 60px rgba(18, 82, 196, 0.12) !important;
}
html[data-theme="light"] .video-embed .absolute.inset-0.bg-gradient-to-t {
    background: linear-gradient(to top, rgba(240, 247, 255, 0.42), transparent 45%, rgba(220, 238, 255, 0.12)) !important;
}
html[data-theme="light"] #otaRotator {
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* -- Live Demo Sandbox --------------------------------------- */
html[data-theme="light"] #demos {
    background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 55%, #e8f2ff 100%) !important;
    border-top: 1px solid rgba(21, 87, 224, 0.08) !important;
    color: #0a1a38 !important;
}
html[data-theme="light"] #demos h2,
html[data-theme="light"] #demos h3 { color: #0a1a38 !important; }
html[data-theme="light"] #demos .text-white { color: #0a1a38 !important; }
html[data-theme="light"] #demos .text-slate-300 { color: #1e3d72 !important; }
html[data-theme="light"] #demos .text-slate-400 { color: #4a6fa0 !important; }
html[data-theme="light"] #demos .text-emerald-300 { color: #059669 !important; }
html[data-theme="light"] #demos .bg-emerald-500\/10 {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(5, 150, 105, 0.22) !important;
}
html[data-theme="light"] #demos .glass-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(21, 87, 224, 0.12) !important;
    box-shadow: 0 4px 20px rgba(18, 82, 196, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html[data-theme="light"] #demos a.demo-card:hover,
html[data-theme="light"] #demos button.demo-card:hover {
    border-color: rgba(18, 82, 196, 0.28) !important;
    box-shadow: 0 8px 32px rgba(18, 82, 196, 0.12), 0 0 0 1px rgba(184, 146, 74, 0.08) !important;
    transform: translateY(-4px);
}
html[data-theme="light"] #demos .demo-card-cta { color: #1252c4 !important; }
html[data-theme="light"] #demos .demo-token {
    color: #1252c4 !important;
    background: rgba(18, 82, 196, 0.08) !important;
    border-color: rgba(21, 87, 224, 0.18) !important;
}
html[data-theme="light"] #demos .group:hover h3.text-white,
html[data-theme="light"] #demos .group:hover h3 { color: #1252c4 !important; }
html[data-theme="light"] #demos .demo-card-icon.text-brand-200 { color: #1252c4 !important; }
html[data-theme="light"] #demos .demo-card-icon.text-violet-200 { color: #6d28d9 !important; }
html[data-theme="light"] #demos .demo-card-icon.text-sky-200 { color: #0284c7 !important; }

/* -- Features ------------------------------------------------ */
html[data-theme="light"] #features {
    background: linear-gradient(180deg, #e8f2ff 0%, #f0f7ff 100%) !important;
    border-top: 1px solid rgba(21, 87, 224, 0.08) !important;
}
html[data-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(21, 87, 224, 0.1) !important;
    box-shadow: 0 4px 20px rgba(18, 82, 196, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
html[data-theme="light"] .glass-card:hover {
    background: rgba(248, 252, 255, 0.99) !important;
    border-color: rgba(18, 82, 196, 0.22) !important;
    box-shadow: 0 8px 32px rgba(18, 82, 196, 0.12) !important;
}
html[data-theme="light"] .glass-card .bg-brand-500\/10 {
    background: rgba(18, 82, 196, 0.08) !important;
    border-color: rgba(21, 87, 224, 0.14) !important;
}
html[data-theme="light"] .glass-card .text-brand-700 { color: #1252c4 !important; }
html[data-theme="light"] .glass-card h3             { color: #0a1a38 !important; }
html[data-theme="light"] .glass-card p              { color: #1e3d72 !important; }
html[data-theme="light"] .glass-card:hover h3        { color: #1252c4 !important; }

/* -- Calculator ---------------------------------------------- */
html[data-theme="light"] #calculator {
    background: #ffffff !important;
    border-top: 1px solid rgba(21, 87, 224, 0.08) !important;
    border-bottom: 1px solid rgba(21, 87, 224, 0.08) !important;
}
html[data-theme="light"] #calculator .bg-white\/5 {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(21, 87, 224, 0.12) !important;
}
html[data-theme="light"] #calculator .text-slate-300  { color: #1e3d72 !important; }
html[data-theme="light"] #calculator .bg-brand-500\/20 { background: rgba(18, 82, 196, 0.1) !important; }
html[data-theme="light"] #calculator .text-brand-300   { color: #1252c4 !important; }
html[data-theme="light"] #calculator .bg-slate-800     { background: rgba(200, 220, 245, 0.8) !important; }
html[data-theme="light"] #calculator input[type="range"] {
    background: linear-gradient(
        to right,
        rgba(18, 82, 196, 0.45) 0%,
        rgba(29, 117, 179, 0.35) var(--range-fill, 50%),
        rgba(200, 220, 245, 0.85) var(--range-fill, 50%),
        rgba(200, 220, 245, 0.85) 100%
    );
    box-shadow: inset 0 1px 2px rgba(18, 82, 196, 0.08);
}
html[data-theme="light"] #calculator input[type="range"]::-webkit-slider-thumb {
    background: linear-gradient(145deg, #5c8fdb 0%, #1252c4 45%, #0d277b 100%);
    border-color: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 0 0 2px rgba(18, 82, 196, 0.2),
        0 2px 8px rgba(18, 82, 196, 0.35),
        0 0 14px rgba(18, 82, 196, 0.2);
}
html[data-theme="light"] #calculator input[type="range"]::-moz-range-thumb {
    background: linear-gradient(145deg, #5c8fdb 0%, #1252c4 45%, #0d277b 100%);
    border-color: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 0 0 2px rgba(18, 82, 196, 0.2),
        0 2px 8px rgba(18, 82, 196, 0.35),
        0 0 14px rgba(18, 82, 196, 0.2);
}
html[data-theme="light"] #calculator input[type="range"]::-moz-range-progress {
    background: linear-gradient(to right, rgba(18, 82, 196, 0.45), rgba(29, 117, 179, 0.35));
}
html[data-theme="light"] #calculator .bg-gradient-to-br {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(21, 87, 224, 0.14) !important;
}
html[data-theme="light"] #calculator .text-rose-400    { color: #c0245a !important; text-shadow: none !important; }
html[data-theme="light"] #calculator .text-emerald-400 { color: #008a3e !important; text-shadow: none !important; }
html[data-theme="light"] #calculator .bg-brand-500\/10 { background: rgba(18, 82, 196, 0.07) !important; }

/* -- Pricing ------------------------------------------------- */
html[data-theme="light"] #pricing {
    background: linear-gradient(180deg, #faf7f0 0%, #fffbf5 48%, #f5f0e8 100%) !important;
    border-top: 1px solid rgba(184, 146, 74, 0.12) !important;
}
html[data-theme="light"] #pricing .bg-brand-700\/10 {
    background: rgba(18, 82, 196, 0.07) !important;
    border-color: rgba(21, 87, 224, 0.18) !important;
    color: #1252c4 !important;
}
html[data-theme="light"] #billingToggle   { background: rgba(200, 220, 255, 0.7) !important; border-color: rgba(21, 87, 224, 0.18) !important; }
html[data-theme="light"] #billingToggleKnob { background: #1252c4 !important; }
html[data-theme="light"] #billingLabelMonthly.text-slate-900,
html[data-theme="light"] #billingLabelAnnually.text-slate-900 { color: #0a1a38 !important; }
html[data-theme="light"] #billingLabelMonthly.text-slate-400,
html[data-theme="light"] #billingLabelAnnually.text-slate-400 { color: #6888aa !important; }
html[data-theme="light"] #pricing .bg-emerald-500\/10 {
    background: rgba(0, 148, 74, 0.08) !important;
    border-color: rgba(0, 148, 74, 0.18) !important;
    color: #008a3e !important;
}
html[data-theme="light"] #pricing .glass-card.border.border-slate-200.bg-white {
    background: rgba(255, 255, 255, 0.99) !important;
    border-color: rgba(21, 87, 224, 0.1) !important;
    box-shadow: 0 4px 20px rgba(18, 82, 196, 0.07) !important;
}
html[data-theme="light"] #pricing .glass-card:hover   { border-color: rgba(18, 82, 196, 0.22) !important; }
html[data-theme="light"] #localPriceDisplay,
html[data-theme="light"] #globalPriceDisplay          { color: #0a1a38 !important; }
html[data-theme="light"] #pricing .text-slate-900.mt-2,
html[data-theme="light"] #pricing h3.text-slate-900   { color: #0a1a38 !important; }
html[data-theme="light"] #pricing .text-slate-400      { color: #4a6fa0 !important; }
html[data-theme="light"] #pricing .text-slate-500.font-mono { color: #6888aa !important; }
html[data-theme="light"] #pricing .border-slate-200   { border-color: rgba(21, 87, 224, 0.1) !important; }
html[data-theme="light"] #pricing ul .text-slate-600  { color: #1e3d72 !important; }
html[data-theme="light"] #pricing .text-brand-500     { color: #1252c4 !important; }
html[data-theme="light"] #pricing .pricing-btn--primary {
    background: #1252c4 !important;
    border-color: #1252c4 !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(18, 82, 196, 0.25) !important;
}
html[data-theme="light"] #pricing .pricing-btn--primary:hover {
    background: #0a3b96 !important;
    border-color: #0a3b96 !important;
    color: #fff !important;
}
html[data-theme="light"] #pricing .pricing-btn--featured {
    background: #1252c4 !important;
    border-color: #1252c4 !important;
    color: #fff !important;
}
html[data-theme="light"] #pricing .pricing-btn--featured:hover {
    background: #0a3b96 !important;
    border-color: #0a3b96 !important;
}
html[data-theme="light"] #pricing .pricing-btn--secondary {
    background: rgba(240, 247, 255, 0.7) !important;
    border-color: rgba(21, 87, 224, 0.18) !important;
    color: #1e3d72 !important;
}
html[data-theme="light"] #pricing .pricing-btn--secondary:hover {
    background: rgba(224, 239, 255, 0.9) !important;
    border-color: rgba(18, 82, 196, 0.3) !important;
    color: #1252c4 !important;
}
html[data-theme="light"] #pricing .glass-card.border.border-slate-200.bg-white:hover {
    box-shadow: 0 8px 36px rgba(18, 82, 196, 0.14) !important;
}
html[data-theme="light"] .gradient-border-wisdom {
    background:
        radial-gradient(ellipse 65% 48% at 88% 12%, rgba(251, 191, 36, 0.14) 0%, transparent 46%),
        linear-gradient(155deg, rgba(255, 251, 235, 0.98) 0%, rgba(255, 255, 255, 1) 100%) padding-box,
        linear-gradient(135deg, #d97706 0%, #f59e0b 42%, #1252c4 100%) border-box !important;
    box-shadow: 0 8px 36px rgba(217, 119, 6, 0.10), 0 4px 20px rgba(18, 82, 196, 0.08) !important;
}
html[data-theme="light"] .glass-card.gradient-border-wisdom:hover {
    box-shadow: 0 12px 44px rgba(217, 119, 6, 0.14), 0 8px 32px rgba(18, 82, 196, 0.12) !important;
}
html[data-theme="light"] .gradient-border-wisdom [class*="bg-gradient-to-r from-amber"] {
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%) !important;
    border-color: rgba(217, 119, 6, 0.42) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.22) !important;
}
html[data-theme="light"] .gradient-border-wisdom h3,
html[data-theme="light"] .gradient-border-wisdom .text-white,
html[data-theme="light"] .gradient-border-wisdom ul,
html[data-theme="light"] .gradient-border-wisdom ul li,
html[data-theme="light"] .gradient-border-wisdom ul li span,
html[data-theme="light"] .gradient-border-wisdom ul li strong { color: #1e3d72 !important; }
html[data-theme="light"] .gradient-border-wisdom h3 { color: #0a1a38 !important; }
html[data-theme="light"] .gradient-border-wisdom ul li strong { color: #0a1a38 !important; font-weight: 600; }
html[data-theme="light"] #westernPriceDisplay {
    color: #b45309 !important;
    text-shadow: none !important;
    font-family: var(--c-mono) !important;
}
html[data-theme="light"] .gradient-border-wisdom .text-amber-200,
html[data-theme="light"] .gradient-border-wisdom .text-brand-200,
html[data-theme="light"] .gradient-border-wisdom #westernBillingLabel { color: #92400e !important; opacity: 0.85; }
html[data-theme="light"] .gradient-border-wisdom .text-amber-400 { color: #d97706 !important; }
html[data-theme="light"] #westernBilledAnnuallyInfo { color: #b45309 !important; }
html[data-theme="light"] .gradient-border-wisdom .border-white\/10 { border-color: rgba(217, 119, 6, 0.14) !important; }
html[data-theme="light"] #pricing .bg-gradient-to-r.from-emerald-500\/5 {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(21, 87, 224, 0.14) !important;
}
html[data-theme="light"] #pricing .text-emerald-600 { color: #008a3e !important; }

/* -- Calculator --------------------------------------------- */
html[data-theme="light"] #calculator h2,
html[data-theme="light"] #calculator h3 { color: #0a1a38 !important; }
html[data-theme="light"] #calculator .text-white { color: #1e3d72 !important; }

/* -- Security ------------------------------------------------ */
html[data-theme="light"] #why-us {
    background: linear-gradient(180deg, #e8f2ff 0%, #dceeff 100%) !important;
    border-top: 1px solid rgba(21, 87, 224, 0.08) !important;
}
html[data-theme="light"] #why-us h2,
html[data-theme="light"] #why-us h4 { color: #0a1a38 !important; }
html[data-theme="light"] #why-us .text-white { color: #1e3d72 !important; }
html[data-theme="light"] #why-us .text-slate-300 { color: #4a6fa0 !important; }
html[data-theme="light"] .glass-card-dark {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(21, 87, 224, 0.1) !important;
    box-shadow: 0 4px 20px rgba(18, 82, 196, 0.07) !important;
}
html[data-theme="light"] .glass-card-dark:hover {
    border-color: rgba(18, 82, 196, 0.22) !important;
    box-shadow: 0 8px 32px rgba(18, 82, 196, 0.12) !important;
}
html[data-theme="light"] .glass-card-dark h4              { color: #0a1a38 !important; }
html[data-theme="light"] .glass-card-dark .bg-brand-500\/10 { background: rgba(18, 82, 196, 0.08) !important; border-color: rgba(21, 87, 224, 0.14) !important; }
html[data-theme="light"] .glass-card-dark .bg-emerald-500\/10 { background: rgba(0, 148, 74, 0.08) !important; border-color: rgba(0, 148, 74, 0.18) !important; }
html[data-theme="light"] .glass-card-dark .bg-purple-500\/10 { background: rgba(102, 0, 204, 0.06) !important; border-color: rgba(102, 0, 204, 0.16) !important; }
html[data-theme="light"] .glass-card-dark .text-brand-300   { color: #1252c4 !important; }
html[data-theme="light"] .glass-card-dark .text-emerald-400 { color: #008a3e !important; }
html[data-theme="light"] .glass-card-dark .text-purple-400  { color: #6600cc !important; }
html[data-theme="light"] #why-us strong.underline         { text-decoration-color: #1252c4 !important; }
html[data-theme="light"] #why-us p                        { color: #1e3d72 !important; }

/* -- Contact ------------------------------------------------- */
html[data-theme="light"] #contact {
    background: linear-gradient(180deg, #f0f7ff 0%, #e4efff 100%) !important;
    border-top: 1px solid rgba(21, 87, 224, 0.08) !important;
}
html[data-theme="light"] #leadFormContainer {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(21, 87, 224, 0.12) !important;
}
html[data-theme="light"] #leadForm input,
html[data-theme="light"] #leadForm select,
html[data-theme="light"] #leadForm input[type="date"],
html[data-theme="light"] #leadForm input[type="time"] {
    background: rgba(240, 247, 255, 0.8) !important;
    border-color: rgba(21, 87, 224, 0.16) !important;
    color: #0a1a38 !important;
}

html[data-theme="light"] #leadForm .form-picker-wrap:not(.form-picker-wrap--date) input[type="time"]::-webkit-calendar-picker-indicator {
    display: none !important;
}
html[data-theme="light"] .form-picker-wrap .form-picker-icon {
    color: #1252c4;
}
html[data-theme="light"] #chatbot-window .form-picker-wrap .form-picker-icon {
    color: #1252c4;
}
html[data-theme="light"] #leadForm input:focus,
html[data-theme="light"] #leadForm select:focus {
    border-color: #1252c4 !important;
    box-shadow: 0 0 0 3px rgba(18, 82, 196, 0.1) !important;
}
html[data-theme="light"] #leadSubmitBtn {
    background: #1252c4 !important;
    border-color: #1252c4 !important;
    color: #fff !important;
    box-shadow: 0 2px 16px rgba(18, 82, 196, 0.25) !important;
}
html[data-theme="light"] #leadSubmitBtn:hover {
    background: #0a3b96 !important;
    box-shadow: 0 4px 24px rgba(18, 82, 196, 0.4) !important;
}
html[data-theme="light"] #contact .bg-white\/5 {
    background: rgba(240, 247, 255, 0.7) !important;
    border-color: rgba(21, 87, 224, 0.12) !important;
}
html[data-theme="light"] #contact .bg-white\/5:hover {
    background: rgba(224, 239, 255, 0.9) !important;
    border-color: rgba(18, 82, 196, 0.26) !important;
}
html[data-theme="light"] #contact a.text-white,
html[data-theme="light"] #contact .text-white { color: #1e3d72 !important; }
html[data-theme="light"] #contact a.text-white:hover { color: #1252c4 !important; }
html[data-theme="light"] #leadFormContainer .border-t.border-white\/10 { border-color: rgba(21, 87, 224, 0.1) !important; }
html[data-theme="light"] #contact p,
html[data-theme="light"] #contact h2 { color: #0a1a38 !important; }
html[data-theme="light"] #contact .text-slate-300 { color: #1e3d72 !important; }

/* -- Footer -------------------------------------------------- */
html[data-theme="light"] footer {
    background: #e4efff !important;
    border-top-color: rgba(21, 87, 224, 0.12) !important;
    color: #6888aa !important;
}
html[data-theme="light"] footer .w-9.h-9 {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(21, 87, 224, 0.14) !important;
    color: #6888aa !important;
}
html[data-theme="light"] footer .w-9.h-9:hover {
    background: rgba(224, 236, 255, 0.9) !important;
    border-color: rgba(18, 82, 196, 0.3) !important;
    color: #1252c4 !important;
    box-shadow: 0 0 10px rgba(18, 82, 196, 0.14) !important;
}

/* -- Back to top --------------------------------------------- */
html[data-theme="light"] #backToTopBtn {
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1.5px solid rgba(18, 82, 196, 0.28) !important;
    box-shadow: 0 4px 16px rgba(18, 82, 196, 0.14) !important;
}
html[data-theme="light"] #backToTopBtn:hover { box-shadow: 0 6px 24px rgba(18, 82, 196, 0.22) !important; }
html[data-theme="light"] #backToTopBtn i { color: #1252c4 !important; }

/* -- Chatbot ------------------------------------------------- */
html[data-theme="light"] #chatbot-window {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 2px solid rgba(18, 82, 196, 0.35) !important;
    border-color: rgba(18, 82, 196, 0.35) !important;
    box-shadow:
        0 0 0 1px rgba(18, 82, 196, 0.12),
        0 0 24px rgba(18, 82, 196, 0.1),
        0 20px 60px rgba(18, 82, 196, 0.14),
        0 4px 24px rgba(0, 40, 120, 0.08) !important;
}
html[data-theme="light"] #chatbot-window.bot-chat-active > div:first-child,
html[data-theme="light"] #chatbot-window:not(.live-chat-active) > div:first-child {
    background: linear-gradient(to right, #1252c4, #1e40af) !important;
}
html[data-theme="light"] #chatbot-widget.bot-chat-active #chatbot-toggle,
html[data-theme="light"] #chatbot-widget:not(.live-chat-active) #chatbot-toggle {
    border-color: rgba(18, 82, 196, 0.45) !important;
    box-shadow: 0 0 20px rgba(18, 82, 196, 0.22) !important;
}
html[data-theme="light"] #chatbot-messages {
    background: #f4f9ff !important;
}
html[data-theme="light"] .chatbot-message-mark,
html[data-theme="light"] .concierge-mark-header,
html[data-theme="light"] .concierge-mark-avatar {
    box-shadow: 0 2px 8px rgba(18, 82, 196, 0.18);
}
html[data-theme="light"] .chatbot-bubble-ai {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(21, 87, 224, 0.12) !important;
    color: #0a1a38 !important;
    box-shadow: 0 2px 8px rgba(18, 82, 196, 0.06) !important;
}
html[data-theme="light"] .chatbot-bubble-user {
    background: #1252c4 !important;
    color: #fff !important;
}
html[data-theme="light"] .chatbot-live-banner-inner {
    color: #047857 !important;
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(5, 150, 105, 0.28) !important;
}
html[data-theme="light"] .chatbot-message.live-agent .chatbot-avatar-live {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(5, 150, 105, 0.3) !important;
    color: #047857 !important;
}
html[data-theme="light"] .chatbot-bubble-live {
    background: rgba(236, 253, 245, 0.95) !important;
    border-color: rgba(5, 150, 105, 0.28) !important;
    color: #064e3b !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.08) !important;
}
html[data-theme="light"] .chatbot-live-label {
    color: #047857 !important;
}
html[data-theme="light"] #chatbot-window.live-chat-active {
    border-color: rgba(5, 150, 105, 0.65) !important;
    box-shadow:
        0 0 0 1px rgba(5, 150, 105, 0.35),
        0 0 28px rgba(16, 185, 129, 0.22),
        0 20px 60px rgba(18, 82, 196, 0.14) !important;
}
html[data-theme="light"] #chatbot-window.live-chat-active #chatbot-messages {
    background: rgba(236, 253, 245, 0.65) !important;
}
html[data-theme="light"] .chatbot-live-badge {
    color: #065f46 !important;
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: rgba(5, 150, 105, 0.4) !important;
}
html[data-theme="light"] #chatbot-widget.live-chat-active #chatbot-toggle {
    border-color: rgba(5, 150, 105, 0.55) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.28) !important;
}
html[data-theme="light"] #chatbot-window.live-chat-active > div:first-child {
    background: linear-gradient(to right, #059669, #047857) !important;
}
html[data-theme="light"] .chatbot-tier-card {
    background: linear-gradient(135deg, rgba(18, 82, 196, 0.08) 0%, rgba(0, 122, 204, 0.05) 100%);
    border-color: rgba(21, 87, 224, 0.18);
}

html[data-theme="light"] .chatbot-tier-title,
html[data-theme="light"] .chatbot-tier-title strong {
    color: #1252c4 !important;
}

html[data-theme="light"] .chatbot-lang-chip {
    background: #fff;
    border-color: rgba(21, 87, 224, 0.16);
    color: #334155;
}

html[data-theme="light"] .chatbot-md-h3,
html[data-theme="light"] .chatbot-md-h4 {
    color: #0a1a38;
}

html[data-theme="light"] .chatbot-hr {
    background: linear-gradient(90deg, transparent, rgba(18, 82, 196, 0.25), transparent);
}

html[data-theme="light"] .chatbot-markdown strong {
    color: #0a1a38 !important;
}

html[data-theme="light"] .chatbot-table-wrap {
    border-color: rgba(21, 87, 224, 0.14);
}

html[data-theme="light"] .chatbot-table th {
    background: rgba(18, 82, 196, 0.1);
    color: #1252c4;
}

html[data-theme="light"] .chatbot-table th,
html[data-theme="light"] .chatbot-table td {
    border-bottom-color: rgba(21, 87, 224, 0.1);
}

html[data-theme="light"] .chatbot-table tbody tr:nth-child(even) td {
    background: rgba(18, 82, 196, 0.04);
}

html[data-theme="light"] .chatbot-live-ended-inner {
    color: #1d4ed8 !important;
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(37, 99, 235, 0.25) !important;
}
html[data-theme="light"] .suggestion-pill {
    background: rgba(18, 82, 196, 0.06) !important;
    border-color: rgba(21, 87, 224, 0.18) !important;
    color: #1e3d72 !important;
}
html[data-theme="light"] .suggestion-pill:hover {
    background: rgba(18, 82, 196, 0.1) !important;
    border-color: rgba(18, 82, 196, 0.3) !important;
    color: #1252c4 !important;
}
html[data-theme="light"] .chatbot-input-area {
    background: #eef4ff !important;
    border-top-color: rgba(21, 87, 224, 0.1) !important;
}
html[data-theme="light"] #chatbot-input {
    background: #fff !important;
    border-color: rgba(21, 87, 224, 0.2) !important;
    color: #0a1a38 !important;
}
html[data-theme="light"] #chatbot-input::placeholder {
    color: #6888aa !important;
}
html[data-theme="light"] #chatbot-input:focus {
    border-color: #1252c4 !important;
    box-shadow: 0 0 0 1px rgba(18, 82, 196, 0.25) !important;
}
html[data-theme="light"] .chatbot-powered-by {
    color: #6888aa !important;
}
html[data-theme="light"] #chatbot-window .booking-card {
    background: linear-gradient(135deg, rgba(18, 82, 196, 0.06) 0%, rgba(0, 122, 204, 0.03) 100%) !important;
    border-color: rgba(21, 87, 224, 0.14) !important;
    box-shadow: 0 4px 16px rgba(18, 82, 196, 0.08) !important;
}
html[data-theme="light"] #chatbot-window .booking-card-title,
html[data-theme="light"] #chatbot-window .booking-card > p {
    color: #1252c4 !important;
}
html[data-theme="light"] #chatbot-window .chat-form-label {
    color: #64748b !important;
}
html[data-theme="light"] #chatbot-window .chat-form-input,
html[data-theme="light"] #chatbot-window .chat-booking-form input,
html[data-theme="light"] #chatbot-window .chat-booking-form select {
    background: #fff !important;
    border: 1px solid rgba(21, 87, 224, 0.18) !important;
    color: #0a1a38 !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] #chatbot-window .chat-booking-form input[type="date"],
html[data-theme="light"] #chatbot-window .chat-booking-form input[type="time"] {
    color: #4a6fa0 !important;
    color-scheme: light;
}

html[data-theme="light"] #chatbot-window .form-picker-wrap:not(.form-picker-wrap--date) input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] #chatbot-window .chat-booking-form input[type="time"]::-webkit-calendar-picker-indicator {
    display: none !important;
}
html[data-theme="light"] #chatbot-window .chat-booking-form select option {
    background: #fff !important;
    color: #0a1a38 !important;
}
html[data-theme="light"] #chatbot-window .chat-package-row {
    background: #fff !important;
    border-color: rgba(21, 87, 224, 0.16) !important;
}
html[data-theme="light"] #chatbot-window .chat-package-row:has(.chat-package-radio:checked) {
    border-color: rgba(21, 87, 224, 0.45) !important;
    background: rgba(21, 87, 224, 0.06) !important;
    box-shadow: inset 0 0 0 1px rgba(21, 87, 224, 0.1);
}
html[data-theme="light"] #chatbot-window .chat-package-row-name {
    color: #0a1a38 !important;
}
html[data-theme="light"] #chatbot-window .chat-package-row-price {
    color: #1252c4 !important;
}
html[data-theme="light"] .chatbot-booking-btn {
    background: linear-gradient(135deg, #1252c4 0%, #0a70cc 100%) !important;
    color: #fff !important;
}
html[data-theme="light"] #chatbot-window .chatbot-typing-dot,
html[data-theme="light"] #chatbot-window .chatbot-typing-dots span {
    background: #6888aa !important;
}
html[data-theme="light"] #chatbot-toggle.chatbot-fab {
    background: none !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(18, 82, 196, 0.2) !important;
}
html[data-theme="light"] #chatbot-toggle.chatbot-fab:hover {
    box-shadow: 0 6px 28px rgba(18, 82, 196, 0.3) !important;
    border: none !important;
}
html[data-theme="light"] #chatbot-toggle:not(.chatbot-fab) {
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1.5px solid rgba(18, 82, 196, 0.28) !important;
    box-shadow: 0 4px 16px rgba(18, 82, 196, 0.14) !important;
}
html[data-theme="light"] #chatbot-toggle:not(.chatbot-fab):hover {
    box-shadow: 0 6px 24px rgba(18, 82, 196, 0.22) !important;
    border-color: #1252c4 !important;
}

/* -- Theme toggle button ------------------------------------- */
html[data-theme="light"] .glass-nav {
    box-shadow: 0 1px 0 rgba(184, 146, 74, 0.07), 0 4px 20px rgba(0, 40, 120, 0.06) !important;
}
html[data-theme="light"] .glass-card:hover {
    box-shadow: 0 8px 32px rgba(18, 82, 196, 0.12), inset 0 1px 0 rgba(184, 146, 74, 0.10) !important;
}
html[data-theme="light"] footer {
    background: linear-gradient(180deg, #e4efff 0%, #dce8f9 100%) !important;
}

.theme-toggle-btn {
    width: 36px;
    height: 34px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    flex-shrink: 0;
}

/* Package picker — must beat Tailwind CDN preflight */
#chatbot-window .chat-package-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    position: relative !important;
}
#chatbot-window .chat-package-row-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    width: auto !important;
    float: none !important;
}
#chatbot-window .chat-package-row-name,
#chatbot-window .chat-package-row-price {
    display: block !important;
    position: relative !important;
    float: none !important;
}
#chatbot-window .chat-package-radio {
    display: block !important;
    position: relative !important;
    float: none !important;
}

/* —— Product showcase (demo videos + info cards) —— */
.product-showcase-rows {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 5rem);
}

.product-showcase-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

@media (min-width: 768px) {
    .product-showcase-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 4rem);
    }

    .product-showcase-row--reverse .product-showcase-media {
        order: 2;
    }

    .product-showcase-row--reverse .product-showcase-copy {
        order: 1;
    }
}

@media (max-width: 767px) {
    .product-showcase-row--reverse .product-showcase-media {
        order: 2;
    }

    .product-showcase-row--reverse .product-showcase-copy {
        order: 1;
    }
}

.product-showcase-media {
    margin-inline: auto;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #060d1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 160, 255, 0.06);
    /* Stop browser scroll-anchoring when looped videos seek back to 0 */
    overflow-anchor: none;
    contain: layout paint;
}

.product-showcase-media--phone {
    width: min(391px, 88%);
    max-width: min(391px, 88%);
    aspect-ratio: 782 / 1110;
}

.product-showcase-media--desktop {
    max-width: min(520px, 100%);
    aspect-ratio: 16 / 10;
}

.product-showcase-media--phone .product-showcase-video {
    object-fit: contain;
    object-position: center center;
}

.product-showcase-media--desktop .product-showcase-video {
    object-fit: cover;
}

.product-showcase-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background: #060d1a;
    overflow-anchor: none;
}

.product-showcase-copy {
    border-radius: 16px !important;
    padding: clamp(1.5rem, 3vw, 2.25rem) !important;
}

.product-showcase-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Showcase rows: children slide in from sides (parent .reveal only triggers) */
.product-showcase-row.reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

.product-showcase-row .product-showcase-media,
.product-showcase-row .product-showcase-copy {
    opacity: 0;
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.product-showcase-row .product-showcase-media {
    transform: translateX(-56px);
}

.product-showcase-row .product-showcase-copy {
    transform: translateX(56px);
    transition-delay: 0.14s;
}

.product-showcase-row.reveal-active .product-showcase-media,
.product-showcase-row.reveal-active .product-showcase-copy {
    opacity: 1;
    transform: translateX(0);
}

/* Reverse layout: copy left, media right */
.product-showcase-row--reverse .product-showcase-media {
    transform: translateX(56px);
    transition-delay: 0.14s;
}

.product-showcase-row--reverse .product-showcase-copy {
    transform: translateX(-56px);
    transition-delay: 0s;
}

.product-showcase-row.reveal-delay-100 .product-showcase-media { transition-delay: 0.1s; }
.product-showcase-row.reveal-delay-100 .product-showcase-copy { transition-delay: 0.24s; }
.product-showcase-row.reveal-delay-100.product-showcase-row--reverse .product-showcase-media { transition-delay: 0.24s; }
.product-showcase-row.reveal-delay-100.product-showcase-row--reverse .product-showcase-copy { transition-delay: 0.1s; }

.product-showcase-row.reveal-delay-200 .product-showcase-media { transition-delay: 0.2s; }
.product-showcase-row.reveal-delay-200 .product-showcase-copy { transition-delay: 0.34s; }
.product-showcase-row.reveal-delay-200.product-showcase-row--reverse .product-showcase-media { transition-delay: 0.34s; }
.product-showcase-row.reveal-delay-200.product-showcase-row--reverse .product-showcase-copy { transition-delay: 0.2s; }

@media (max-width: 767px) {
    .product-showcase-row .product-showcase-media,
    .product-showcase-row .product-showcase-copy,
    .product-showcase-row--reverse .product-showcase-media,
    .product-showcase-row--reverse .product-showcase-copy {
        transform: translateY(28px);
    }

    .product-showcase-row.reveal-active .product-showcase-media,
    .product-showcase-row.reveal-active .product-showcase-copy {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-showcase-row .product-showcase-media,
    .product-showcase-row .product-showcase-copy {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* —— Gated sandbox journey —— */
.sandbox-page .glass-card {
    background: rgba(4, 16, 42, 0.82) !important;
    border: 1px solid rgba(0, 160, 230, 0.2) !important;
    border-radius: 16px !important;
}

.sandbox-journey-card {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(0, 160, 230, 0.18);
    background: rgba(4, 16, 42, 0.72);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

.sandbox-journey-card:hover {
    border-color: rgba(0, 229, 255, 0.38);
    box-shadow: 0 0 32px rgba(0, 180, 255, 0.12);
    transform: translateY(-2px);
}

.sandbox-step-num {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(24, 82, 196, 0.25);
    border: 1px solid rgba(0, 160, 230, 0.35);
    color: #a3cfee;
    margin-top: 0.25rem;
}

.sandbox-journey-shot {
    flex-shrink: 0;
    width: 120px;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
    object-position: top center;
    align-self: center;
}

.sandbox-journey-shot--wide {
    width: 160px;
    max-height: 100px;
}

@media (max-width: 640px) {
    .sandbox-journey-card {
        flex-wrap: wrap;
    }
    .sandbox-journey-shot {
        width: 100%;
        max-height: 200px;
    }
    .sandbox-journey-shot--wide {
        width: 100%;
        max-height: 140px;
    }
}


/* Editorial Product — force dark marketing canvas; leave chatbot widget intact */
html { color-scheme: dark; }
html[data-theme="light"] {
  /* light theme disabled on marketing pages */
}
body {
  background: #050505 !important;
}