/* ==========================================================================
   VENTRO ADS — Corporate Performance Agency Design System
   Refined, Clean & Institutional Corporate Dark Theme
   ========================================================================== */

:root {
    --bg-main: #0B0F19;
    --bg-surface: #111827;
    --bg-card: #151D30;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(37, 99, 235, 0.4);
    --accent-blue: #2563EB;
    --accent-blue-hover: #1D4ED8;
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    overflow-x: hidden;
    position: relative;
    max-width: 100vw;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0B0F19;
}
::-webkit-scrollbar-thumb {
    background: #1F2937;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #374151;
}

/* Custom Slider */
.custom-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #1F2937;
    border-radius: 4px;
    outline: none;
}

.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2563EB;
    cursor: pointer;
    border: 2px solid #FFFFFF;
    transition: transform 0.15s ease, background 0.15s ease;
}

.custom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: #3B82F6;
}

.custom-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2563EB;
    cursor: pointer;
    border: 2px solid #FFFFFF;
}

/* Active Button States */
.platform-btn.active-strat {
    border-color: #2563EB !important;
    background-color: rgba(37, 99, 235, 0.15) !important;
    color: #FFFFFF !important;
}

/* Smooth Accordion */
.faq-content {
    transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   FROSTED GLASS & FLUID MOTION DESIGN SYSTEM (Apple & Glassmorphism)
   ========================================================================== */

/* Frosted Glass Master Card */
.frosted-glass {
    background: rgba(17, 24, 39, 0.72) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36), inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
}

html.light .frosted-glass {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04), inset 0 1px 0 0 #FFFFFF !important;
}

/* Frosted Sub-Container (Metric Boxes, Inputs, Sliders) */
.frosted-sub {
    background: rgba(11, 15, 25, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.light .frosted-sub {
    background: #F8FAFC !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), inset 0 1px 0 0 #FFFFFF !important;
}

/* Frosted Interactive Option Pills & Buttons */
.frosted-option {
    background: rgba(21, 29, 48, 0.65) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, box-shadow, border-color;
}

.frosted-option:hover {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(37, 99, 235, 0.5) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

.frosted-option:active {
    transform: translateY(0px) scale(0.98) !important;
}

html.light .frosted-option {
    background: #FFFFFF !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid #CBD5E1 !important;
    color: #1E293B;
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05), inset 0 1px 0 0 #FFFFFF !important;
}

html.light .frosted-option:hover {
    background: #F1F5F9 !important;
    border-color: #2563EB !important;
    color: #0F172A !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 16px -3px rgba(37, 99, 235, 0.18), inset 0 1px 0 0 #FFFFFF !important;
}

/* Active State for Frosted Options */
.frosted-option.active-strat,
.frosted-option.active-filter,
.platform-btn.active-strat {
    background: rgba(37, 99, 235, 0.3) !important;
    border-color: #3B82F6 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 25px rgba(37, 99, 235, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) scale(1.02) !important;
}

html.light .frosted-option.active-strat,
html.light .frosted-option.active-filter,
html.light .platform-btn.active-strat {
    background: #2563EB !important;
    border-color: #2563EB !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 18px 0 rgba(37, 99, 235, 0.35) !important;
}

/* Frosted High-Impact Primary CTA Buttons */
.frosted-btn-primary {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(29, 78, 216, 0.98)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, box-shadow;
}

.frosted-btn-primary:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.98), rgba(37, 99, 235, 1)) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 14px 30px -4px rgba(37, 99, 235, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.45) !important;
}

.frosted-btn-primary:active {
    transform: translateY(0px) scale(0.98) !important;
}

html.light .frosted-btn-primary,
html.light .frosted-btn-primary.text-white,
html.light button.frosted-btn-primary,
html.light a.frosted-btn-primary {
    background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 6px 18px -3px rgba(37, 99, 235, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.4) !important;
}

html.light .frosted-btn-primary:hover,
html.light .frosted-btn-primary.text-white:hover,
html.light button.frosted-btn-primary:hover,
html.light a.frosted-btn-primary:hover {
    background: linear-gradient(135deg, #1D4ED8, #1E40AF) !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 24px -3px rgba(37, 99, 235, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.5) !important;
}

html.light .frosted-btn-primary *,
html.light .frosted-btn-primary span,
html.light .frosted-btn-primary i,
html.light .frosted-btn-primary svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Fluid Card Physics (Hover Lift & Subtle Border Glow) */
.fluid-hover {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s ease !important;
    will-change: transform, box-shadow;
}

.fluid-hover:hover {
    transform: translateY(-5px) scale(1.008);
    border-color: rgba(37, 99, 235, 0.45) !important;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 
                0 0 25px -5px rgba(37, 99, 235, 0.22), 
                inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

html.light .fluid-hover:hover {
    transform: translateY(-5px) scale(1.008);
    border-color: rgba(37, 99, 235, 0.5) !important;
    box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.12), 
                0 0 20px -5px rgba(37, 99, 235, 0.18), 
                inset 0 1px 0 0 rgba(255, 255, 255, 1) !important;
}

/* ==========================================================================
   VENTRO ADS — Comprehensive Light & Dark Mode System
   High-contrast, institutional corporate light theme inspired by Apple/Stripe
   ========================================================================== */

/* Smooth, Lightweight Surface Transition (Zero Lag) */
body {
    transition: background-color 0.2s ease, color 0.15s ease;
}

header#main-header {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#theme-ripple-portal {
    will-change: opacity;
}

#theme-ripple-wave {
    will-change: transform;
    transform-origin: center center;
}

/* Light Theme Variables */
html.light {
    --bg-main: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-card: #FFFFFF;
    --border-color: #E2E8F0;
    --border-hover: rgba(37, 99, 235, 0.4);
    --accent-blue: #2563EB;
    --accent-blue-hover: #1D4ED8;
    --text-primary: #0F172A;
    --text-secondary: #475569;
}

/* Body & Backgrounds in Light Mode - Pristine Corporate Canvas */
html.light body {
    background-color: #F8FAFC !important;
    background-image: none !important;
    color: #1E293B !important;
}

/* Scrollbar in Light Mode */
html.light ::-webkit-scrollbar-track {
    background: #F1F5F9;
}
html.light ::-webkit-scrollbar-thumb {
    background: #CBD5E1;
}
html.light ::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Top Legal Corporate Bar */
html.light .bg-\[\#080C14\] {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    color: #475569 !important;
}
html.light .bg-\[\#080C14\] strong {
    color: #0F172A !important;
}

/* Maintain Crisp Executive Contrast for Official Brand Logo Badges */
html.light img.bg-\[\#080C14\],
html.light img.bg-\[\#0B0F19\] {
    background-color: #080C14 !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
}

/* Main Navigation Sticky Header */
html.light header#main-header {
    background-color: rgba(255, 255, 255, 0.94) !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}
html.light header#main-header nav a {
    color: #334155 !important;
}
html.light header#main-header nav a:hover {
    color: #2563EB !important;
}

/* Mobile Dropdown Menu */
html.light #mobile-menu {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
html.light #mobile-menu a {
    color: #334155 !important;
}
html.light #mobile-menu a:hover {
    color: #2563EB !important;
}

/* Core Card and Surface Hierarchy in Light Mode */
html.light .bg-\[\#0B0F19\] {
    background-color: #F8FAFC !important;
}

html.light .bg-\[\#111827\] {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.02);
}

html.light .bg-\[\#151D30\] {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    color: #334155 !important;
}

html.light .bg-\[\#0D1322\] {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

html.light .bg-\[\#0F172A\] {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

html.light .bg-\[\#1E293B\] {
    background-color: #E2E8F0 !important;
    color: #1E293B !important;
}

/* Universal Borders in Light Mode */
html.light .border-white\/10,
html.light .border-white\/5,
html.light .border-white\/20,
html.light .border-white\/8,
html.light .border-white\/15 {
    border-color: #E2E8F0 !important;
}

/* Text Hierarchy in Light Mode */
html.light .text-white {
    color: #0F172A !important;
}

html.light .text-slate-100,
html.light .text-slate-200,
html.light .text-slate-300 {
    color: #334155 !important;
}

html.light .text-slate-400 {
    color: #475569 !important;
}

html.light .text-slate-500 {
    color: #64748B !important;
}

/* Accent Text Legibility in Light Mode (WCAG AAA High Contrast) */
html.light .text-emerald-400,
html.light .text-emerald-300 {
    color: #047857 !important;
}
html.light .text-blue-500,
html.light .text-blue-400 {
    color: #1D4ED8 !important;
}
html.light .text-cyan-400 {
    color: #0E7490 !important;
}
html.light .text-indigo-400 {
    color: #4338CA !important;
}
html.light .text-amber-400 {
    color: #B45309 !important;
}

/* Pill Badges and Feature Containers in Light Mode */
html.light .bg-emerald-500\/20,
html.light .bg-emerald-500\/10 {
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
}
html.light .bg-blue-600\/10,
html.light .bg-blue-500\/10 {
    background-color: #EFF6FF !important;
    border-color: #BFDBFE !important;
}
html.light .bg-cyan-500\/10 {
    background-color: #ECFEFF !important;
    border-color: #A5F3FC !important;
}
html.light .bg-indigo-600\/10,
html.light .bg-indigo-500\/10 {
    background-color: #EEF2FF !important;
    border-color: #C7D2FE !important;
}

/* Soft Ambient Light Cones in Light Mode */
html.light .fixed.inset-0 .bg-blue-600\/10 {
    background-color: rgba(37, 99, 235, 0.06) !important;
}
html.light .fixed.inset-0 .bg-cyan-500\/8 {
    background-color: rgba(6, 182, 212, 0.06) !important;
}
html.light .fixed.inset-0 .bg-indigo-600\/8 {
    background-color: rgba(99, 102, 241, 0.06) !important;
}
html.light .fixed.inset-0 .bg-blue-500\/10 {
    background-color: rgba(59, 130, 246, 0.06) !important;
}

/* Maintain Crisp Pure White Text & Icons for Primary CTAs and Active Buttons Only */
html.light .frosted-btn-primary,
html.light .frosted-btn-primary *,
html.light .frosted-btn-primary span,
html.light .frosted-btn-primary i,
html.light .frosted-btn-primary svg,
html.light button.frosted-btn-primary,
html.light a.frosted-btn-primary,
html.light .platform-btn.active-strat,
html.light .platform-btn.active-strat *,
html.light .case-filter-btn.active-filter,
html.light .case-filter-btn.active-filter *,
html.light #curr-usd.bg-blue-600,
html.light #curr-bdt.bg-blue-600,
html.light a[href*="wa.me"],
html.light a[href*="wa.me"] *,
html.light .bg-blue-600.rounded-full,
html.light .bg-blue-600.rounded-full * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Interactive Controls & Inputs */
html.light input,
html.light select,
html.light textarea {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}
html.light select option {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
}
html.light input::placeholder,
html.light textarea::placeholder {
    color: #94A3B8 !important;
}
html.light input:focus,
html.light select:focus,
html.light textarea:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Sliders */
html.light .custom-slider {
    background: #CBD5E1 !important;
}
html.light .custom-slider::-webkit-slider-thumb {
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ROAS Calculator Platform Buttons */
html.light .platform-btn {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
}
html.light .platform-btn:hover {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}
html.light .platform-btn.active-strat {
    background-color: #2563EB !important;
    border-color: #2563EB !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.3) !important;
}
html.light .platform-btn.active-strat * {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}



/* Case Study Cards Equal Height & Alignment */
.case-study-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Live Ticker Box in Hero */
html.light #live-ticker {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    color: #334155 !important;
}

/* Official License Card in Credentials */
html.light #credentials .lg\:col-span-7 {
    background-color: #FFFFFF !important;
    border-color: #A7F3D0 !important;
    box-shadow: 0 4px 15px -1px rgba(16, 185, 129, 0.08) !important;
}
html.light #credentials .lg\:col-span-5 {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.04) !important;
}

/* Official Brand Seal Banner - Executive Contrast Card */
html.light #credentials .mt-8.bg-\[\#0D1322\] {
    background-color: #0F172A !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
html.light #credentials .mt-8.bg-\[\#0D1322\] h4,
html.light #credentials .mt-8.bg-\[\#0D1322\] span.font-mono {
    color: #FFFFFF !important;
}
html.light #credentials .mt-8.bg-\[\#0D1322\] p {
    color: #94A3B8 !important;
}

/* Modals */
html.light #auditModal,
html.light #caseStudyModal {
    background-color: rgba(15, 23, 42, 0.65) !important;
}
html.light #auditModal > div,
html.light #caseStudyModal > div {
    color: #0F172A !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* FAQ Items */
html.light #faq .faq-item {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03);
}

/* Footer */
html.light footer {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #475569 !important;
}
html.light footer a {
    color: #475569 !important;
}
html.light footer a:hover {
    color: #2563EB !important;
}

/* Theme Toggles in Light Mode */
html.light #theme-toggle-btn {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    color: #334155 !important;
}
html.light #theme-toggle-btn:hover {
    color: #0F172A !important;
}
html.light #theme-toggle-mobile-btn {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    color: #334155 !important;
}

/* Secondary Buttons & Hover States in Light Mode */
html.light button.bg-\[\#0B0F19\],
html.light a.bg-\[\#151D30\] {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

html.light button.bg-\[\#0B0F19\]:hover,
html.light a.bg-\[\#151D30\]:hover,
html.light .hover\:bg-slate-800:hover {
    background-color: #E2E8F0 !important;
    color: #0F172A !important;
}

html.light .hover\:text-white:hover {
    color: #0F172A !important;
}

html.light .hover\:text-blue-300:hover {
    color: #1D4ED8 !important;
}

/* Color accents in Light Mode for high contrast */
html.light .text-rose-500,
html.light .text-rose-400 {
    color: #BE123C !important;
}
html.light .text-amber-500,
html.light .text-amber-400 {
    color: #B45309 !important;
}

/* ==========================================================================
   LIQUID GLASS NAVIGATION ENGINE (Pointer-Reactive Fluid Glassmorphism)
   ========================================================================== */
.liquid-glass-dock {
    position: relative;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
    isolation: isolate;
}

html.light .liquid-glass-dock {
    background: rgba(248, 250, 252, 0.75) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), inset 0 1px 0 0 #FFFFFF !important;
}

.liquid-nav-link {
    position: relative;
    z-index: 2;
    transition: color 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #94A3B8;
    text-decoration: none;
    user-select: none;
}

.liquid-nav-link:hover {
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

html.light .liquid-nav-link {
    color: #475569 !important;
}

html.light .liquid-nav-link:hover {
    color: #0F172A !important;
}

/* Specific styling for Compliance link */
.liquid-nav-link.nav-compliance {
    color: #34D399;
}
.liquid-nav-link.nav-compliance:hover {
    color: #6EE7B7 !important;
}
html.light .liquid-nav-link.nav-compliance {
    color: #059669 !important;
}
html.light .liquid-nav-link.nav-compliance:hover {
    color: #047857 !important;
}

/* Floating Liquid Glass Follower Pill */
.liquid-pill {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 9999px;
    will-change: transform, width, height, opacity;
    transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1),
                width 0.32s cubic-bezier(0.25, 1, 0.5, 1),
                height 0.25s ease,
                opacity 0.22s ease;
    overflow: hidden;
}

.liquid-pill-blur {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(37, 99, 235, 0.18) 100%);
    backdrop-filter: blur(14px) saturate(200%);
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.35), 
                0 0 16px 0 rgba(59, 130, 246, 0.25),
                inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
}

html.light .liquid-pill-blur {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 246, 255, 0.92) 100%);
    border: 1px solid rgba(37, 99, 235, 0.3);
    box-shadow: 0 4px 16px -2px rgba(37, 99, 235, 0.2), 
                0 1px 3px 0 rgba(15, 23, 42, 0.06),
                inset 0 1px 1px 0 #FFFFFF;
}

/* Glass Specular Curved Highlight (Top refraction reflection) */
.liquid-pill-specular {
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 48%;
    border-radius: 9999px 9999px 0 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.02));
    pointer-events: none;
}

html.light .liquid-pill-specular {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.05));
}

/* Dynamic Radial Cursor Glow inside the Pill */
.liquid-pill-glow {
    position: absolute;
    inset: -15px;
    background: radial-gradient(circle at var(--pill-x, 50%) var(--pill-y, 50%), rgba(59, 130, 246, 0.45) 0%, transparent 65%);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

html.light .liquid-pill-glow {
    background: radial-gradient(circle at var(--pill-x, 50%) var(--pill-y, 50%), rgba(37, 99, 235, 0.22) 0%, transparent 65%);
}

/* Compliance pill special tint */
.liquid-pill.is-compliance .liquid-pill-blur {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(16, 185, 129, 0.2) 100%);
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 8px 24px -4px rgba(16, 185, 129, 0.4), 
                0 0 16px 0 rgba(16, 185, 129, 0.25), 
                inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
}

html.light .liquid-pill.is-compliance .liquid-pill-blur {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 253, 245, 0.94) 100%);
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 4px 16px -2px rgba(16, 185, 129, 0.22), inset 0 1px 1px 0 #FFFFFF;
}

.liquid-pill.is-compliance .liquid-pill-glow {
    background: radial-gradient(circle at var(--pill-x, 50%) var(--pill-y, 50%), rgba(16, 185, 129, 0.45) 0%, transparent 65%);
}

html.light .liquid-pill.is-compliance .liquid-pill-glow {
    background: radial-gradient(circle at var(--pill-x, 50%) var(--pill-y, 50%), rgba(16, 185, 129, 0.22) 0%, transparent 65%);
}

/* ==========================================================================
   LIQUID GLASS INTERACTIVE CARD SYSTEM (Universal Across All Sections)
   ========================================================================== */
.liquid-glass-card,
.fluid-hover {
    position: relative;
    border-radius: 1.25rem;
    isolation: isolate;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.3s ease !important;
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform, box-shadow;
    cursor: default;
}

.liquid-glass-card:hover,
.fluid-hover:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 20px 45px -12px rgba(37, 99, 235, 0.3), 
                0 0 25px -4px rgba(37, 99, 235, 0.15), 
                inset 0 1px 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html.light .liquid-glass-card:hover,
html.light .fluid-hover:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: #3B82F6 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 24px 50px -12px rgba(37, 99, 235, 0.18), 
                0 10px 24px -4px rgba(15, 23, 42, 0.08), 
                0 0 0 1px rgba(59, 130, 246, 0.25),
                inset 0 1px 1px 0 #FFFFFF !important;
}

/* Liquid Pointer-Following Radial Glow (Dark Mode) */
.liquid-card-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    background: radial-gradient(
        460px circle at var(--card-x, 50%) var(--card-y, 50%),
        var(--card-glow-color, rgba(59, 130, 246, 0.24)) 0%,
        rgba(255, 255, 255, 0.04) 45%,
        transparent 70%
    );
}

/* Liquid Pointer-Following Radial Glow (Light Mode - Vivid Iridescent pool) */
html.light .liquid-card-glow {
    background: radial-gradient(
        480px circle at var(--card-x, 50%) var(--card-y, 50%),
        var(--card-glow-color, rgba(37, 99, 235, 0.24)) 0%,
        rgba(59, 130, 246, 0.12) 35%,
        rgba(255, 255, 255, 0) 70%
    ) !important;
    mix-blend-mode: multiply !important;
}

.liquid-glass-card:hover .liquid-card-glow,
.fluid-hover:hover .liquid-card-glow,
.trust-mini-card:hover .liquid-card-glow {
    opacity: 1;
}

/* Liquid Specular Curved Highlight (Dark Mode) */
.liquid-card-specular {
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease, left 0.35s ease, right 0.35s ease;
    z-index: 2;
}

/* Liquid Specular Curved Highlight (Light Mode - Prismatic Refraction Ray) */
html.light .liquid-card-specular {
    height: 2px !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(59, 130, 246, 0.3) 20%,
        rgba(37, 99, 235, 0.85) 50%,
        rgba(6, 182, 212, 0.65) 75%,
        transparent 100%
    ) !important;
    filter: drop-shadow(0 1px 4px rgba(37, 99, 235, 0.35)) !important;
    opacity: 0.85;
}

.liquid-glass-card:hover .liquid-card-specular,
.fluid-hover:hover .liquid-card-specular {
    opacity: 1;
    left: 5%;
    right: 5%;
}

/* Section & Category Glow Color Themes (Dark & Light) */
/* Services Channel Colors */
.liquid-glass-card[data-channel="meta"] { --card-glow-color: rgba(37, 99, 235, 0.28); }
.liquid-glass-card[data-channel="tiktok"] { --card-glow-color: rgba(6, 182, 212, 0.28); }
.liquid-glass-card[data-channel="google"] { --card-glow-color: rgba(245, 158, 11, 0.28); }
.liquid-glass-card[data-channel="pinterest"] { --card-glow-color: rgba(244, 63, 94, 0.28); }
.liquid-glass-card[data-channel="creative"] { --card-glow-color: rgba(99, 102, 241, 0.28); }
.liquid-glass-card[data-channel="data"] { --card-glow-color: rgba(16, 185, 129, 0.28); }

html.light .liquid-glass-card[data-channel="meta"] { --card-glow-color: rgba(37, 99, 235, 0.22); }
html.light .liquid-glass-card[data-channel="tiktok"] { --card-glow-color: rgba(6, 182, 212, 0.22); }
html.light .liquid-glass-card[data-channel="google"] { --card-glow-color: rgba(217, 119, 6, 0.22); }
html.light .liquid-glass-card[data-channel="pinterest"] { --card-glow-color: rgba(225, 29, 72, 0.22); }
html.light .liquid-glass-card[data-channel="creative"] { --card-glow-color: rgba(99, 102, 241, 0.22); }
html.light .liquid-glass-card[data-channel="data"] { --card-glow-color: rgba(16, 185, 129, 0.22); }

/* Process Steps (4 phases) */
#process .grid > div:nth-child(1) { --card-glow-color: rgba(37, 99, 235, 0.26); }
#process .grid > div:nth-child(2) { --card-glow-color: rgba(6, 182, 212, 0.26); }
#process .grid > div:nth-child(3) { --card-glow-color: rgba(99, 102, 241, 0.26); }
#process .grid > div:nth-child(4) { --card-glow-color: rgba(16, 185, 129, 0.26); }

html.light #process .grid > div:nth-child(1) { --card-glow-color: rgba(37, 99, 235, 0.2); }
html.light #process .grid > div:nth-child(2) { --card-glow-color: rgba(6, 182, 212, 0.2); }
html.light #process .grid > div:nth-child(3) { --card-glow-color: rgba(99, 102, 241, 0.2); }
html.light #process .grid > div:nth-child(4) { --card-glow-color: rgba(16, 185, 129, 0.2); }

/* Case Studies (4 categories) */
.case-study-card[data-category="ecommerce"] { --card-glow-color: rgba(37, 99, 235, 0.26); }
.case-study-card[data-category="fashion"] { --card-glow-color: rgba(6, 182, 212, 0.26); }
.case-study-card[data-category="leadgen"] { --card-glow-color: rgba(16, 185, 129, 0.26); }
.case-study-card[data-category="home"] { --card-glow-color: rgba(244, 63, 94, 0.26); }

html.light .case-study-card[data-category="ecommerce"] { --card-glow-color: rgba(37, 99, 235, 0.2); }
html.light .case-study-card[data-category="fashion"] { --card-glow-color: rgba(6, 182, 212, 0.2); }
html.light .case-study-card[data-category="leadgen"] { --card-glow-color: rgba(16, 185, 129, 0.2); }
html.light .case-study-card[data-category="home"] { --card-glow-color: rgba(244, 63, 94, 0.2); }

/* Pricing Plans (3 tiers) */
#pricing .grid > div:nth-child(1) { --card-glow-color: rgba(59, 130, 246, 0.26); }
#pricing .grid > div:nth-child(2) { --card-glow-color: rgba(37, 99, 235, 0.36); }
#pricing .grid > div:nth-child(3) { --card-glow-color: rgba(16, 185, 129, 0.26); }

html.light #pricing .grid > div:nth-child(1) { --card-glow-color: rgba(59, 130, 246, 0.2); }
html.light #pricing .grid > div:nth-child(2) { --card-glow-color: rgba(37, 99, 235, 0.28); }
html.light #pricing .grid > div:nth-child(3) { --card-glow-color: rgba(16, 185, 129, 0.2); }

/* Hero Metrics & Right Column */
.hero-chart-card { --card-glow-color: rgba(37, 99, 235, 0.26); }
#live-conversion-ticker { --card-glow-color: rgba(6, 182, 212, 0.24); }

html.light .hero-chart-card { --card-glow-color: rgba(37, 99, 235, 0.2); }
html.light #live-conversion-ticker { --card-glow-color: rgba(6, 182, 212, 0.2); }

/* Financial Simulator */
#calculator .frosted-glass { --card-glow-color: rgba(37, 99, 235, 0.22); }
html.light #calculator .frosted-glass { --card-glow-color: rgba(37, 99, 235, 0.18); }

/* Trust Mini Cards Dynamic Glow Colors */
.trust-mini-card[data-color="blue"] { --card-glow-color: rgba(37, 99, 235, 0.35); }
.trust-mini-card[data-color="emerald"] { --card-glow-color: rgba(16, 185, 129, 0.35); }
.trust-mini-card[data-color="cyan"] { --card-glow-color: rgba(6, 182, 212, 0.35); }
.trust-mini-card[data-color="indigo"] { --card-glow-color: rgba(99, 102, 241, 0.35); }
.trust-mini-card[data-color="amber"] { --card-glow-color: rgba(245, 158, 11, 0.35); }
.trust-mini-card[data-color="rose"] { --card-glow-color: rgba(244, 63, 94, 0.35); }

html.light .trust-mini-card[data-color="blue"] { --card-glow-color: rgba(37, 99, 235, 0.28); }
html.light .trust-mini-card[data-color="emerald"] { --card-glow-color: rgba(16, 185, 129, 0.28); }
html.light .trust-mini-card[data-color="cyan"] { --card-glow-color: rgba(6, 182, 212, 0.28); }
html.light .trust-mini-card[data-color="indigo"] { --card-glow-color: rgba(99, 102, 241, 0.28); }
html.light .trust-mini-card[data-color="amber"] { --card-glow-color: rgba(245, 158, 11, 0.28); }
html.light .trust-mini-card[data-color="rose"] { --card-glow-color: rgba(244, 63, 94, 0.28); }

/* Floating Liquid Icon Badges */
.liquid-icon-badge {
    background: rgba(21, 29, 48, 0.7) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

html.light .liquid-icon-badge {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: inset 0 1px 1px 0 #FFFFFF, 0 4px 10px rgba(15, 23, 42, 0.05) !important;
}

.liquid-glass-card:hover .liquid-icon-badge,
.fluid-hover:hover .liquid-icon-badge {
    transform: scale(1.1) translateY(-2px) !important;
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4), 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

html.light .liquid-glass-card:hover .liquid-icon-badge,
html.light .fluid-hover:hover .liquid-icon-badge {
    box-shadow: inset 0 1px 1px 0 #FFFFFF, 0 8px 16px rgba(15, 23, 42, 0.08) !important;
}

/* Interactive Sheen for Primary CTA Buttons */
.frosted-btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.frosted-btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -70%;
    width: 45%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    transform: rotate(25deg);
    transition: all 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    pointer-events: none;
}
.frosted-btn-primary:hover::after {
    left: 130%;
    opacity: 1;
}

/* ==========================================================================
   EXECUTIVE CORPORATE FAQ FLUID ACCORDION
   ========================================================================== */
.faq-accordion-item {
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease !important;
}

.faq-accordion-item.is-open {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 14px 34px -8px rgba(37, 99, 235, 0.28), inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}

html.light .faq-accordion-item.is-open {
    border-color: #2563EB !important;
    box-shadow: 0 12px 28px -6px rgba(37, 99, 235, 0.18), 0 0 0 1px rgba(37, 99, 235, 0.15), inset 0 1px 0 0 #FFFFFF !important;
}

.faq-accordion-item.faq-emerald.is-open {
    border-color: rgba(16, 185, 129, 0.55) !important;
    box-shadow: 0 14px 34px -8px rgba(16, 185, 129, 0.28), inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}

html.light .faq-accordion-item.faq-emerald.is-open {
    border-color: #059669 !important;
    box-shadow: 0 12px 28px -6px rgba(16, 185, 129, 0.18), inset 0 1px 0 0 #FFFFFF !important;
}

/* Fluid Height via CSS Grid */
.faq-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-accordion-item.is-open .faq-collapse {
    grid-template-rows: 1fr;
}

.faq-collapse-inner {
    overflow: hidden;
}

/* Spring icon rotation */
.faq-accordion-item .faq-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease !important;
    will-change: transform;
}

.faq-accordion-item.is-open .faq-icon {
    transform: rotate(180deg) !important;
    color: #3B82F6 !important;
}

html.light .faq-accordion-item.is-open .faq-icon {
    color: #2563EB !important;
}

.faq-accordion-item.faq-emerald.is-open .faq-icon {
    color: #10B981 !important;
}

/* Expanding Corporate Divider Line */
.faq-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.45) 50%, transparent 100%);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-accordion-item.is-open .faq-divider {
    transform: scaleX(1);
}

.faq-accordion-item.faq-emerald .faq-divider {
    background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.5) 50%, transparent 100%);
}

/* Fluid Content Entrance (Slide & Fade) */
.faq-accordion-item .faq-content {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-accordion-item.is-open .faq-content {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   LIQUID GLASS CURRENCY SWITCH ENGINE (HYPER-FLUID SLIDER & GLASSMORPHISM)
   ========================================================================== */
.liquid-currency-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.14) !important;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.liquid-currency-switch:hover {
    border-color: rgba(59, 130, 246, 0.45) !important;
    box-shadow: 0 6px 20px -2px rgba(37, 99, 235, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.25) !important;
}

/* Light Mode Liquid Capsule */
html.light .liquid-currency-switch {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 2px 10px -1px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 #FFFFFF !important;
}

html.light .liquid-currency-switch:hover {
    border-color: #3B82F6 !important;
    box-shadow: 0 4px 16px -2px rgba(37, 99, 235, 0.18), inset 0 1px 0 0 #FFFFFF !important;
}

/* Sliding Pill Track & Liquid Momentum */
.liquid-currency-pill {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 9999px;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    will-change: transform;
}

.liquid-currency-mobile .liquid-currency-pill {
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px);
}

.liquid-pill-body {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
    box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

html.light .liquid-pill-body {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
    box-shadow: 0 4px 12px 0 rgba(37, 99, 235, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Pill positions by currency */
.liquid-currency-switch[data-currency="USD"] .liquid-currency-pill {
    transform: translateX(0);
}

.liquid-currency-switch[data-currency="BDT"] .liquid-currency-pill {
    transform: translateX(100%);
}

/* Squish & stretch liquid droplet momentum */
.liquid-currency-switch.is-switching .liquid-pill-body {
    animation: liquidDropletSquish 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes liquidDropletSquish {
    0% {
        transform: scale(1, 1);
    }
    30% {
        transform: scale(1.15, 0.88);
    }
    65% {
        transform: scale(0.94, 1.06);
    }
    100% {
        transform: scale(1, 1);
    }
}

/* Internal Specular Highlight & Glass Glow */
.liquid-pill-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.45), transparent 70%);
    pointer-events: none;
}

/* Interactive Option Buttons */
.curr-btn {
    position: relative;
    z-index: 2;
    flex: 1;
    padding: 5px 12px;
    border-radius: 9999px;
    background: transparent !important;
    border: none !important;
    color: #94A3B8 !important;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: color 0.28s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    white-space: nowrap;
}

.liquid-currency-mobile .curr-btn {
    padding: 3px 8px;
    font-size: 11px;
}

.curr-btn:hover:not(.is-active) {
    color: #F8FAFC !important;
    transform: translateY(-0.5px);
}

.curr-btn.is-active {
    color: #FFFFFF !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.curr-btn .curr-symbol {
    display: inline-block;
    font-size: 11px;
    opacity: 0.8;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.curr-btn.is-active .curr-symbol {
    opacity: 1;
    transform: scale(1.2);
    color: #93C5FD !important;
}

/* Light mode button contrast */
html.light .curr-btn {
    color: #64748B !important;
}

html.light .curr-btn:hover:not(.is-active) {
    color: #0F172A !important;
}

html.light .curr-btn.is-active {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

html.light .curr-btn.is-active .curr-symbol {
    color: #BFDBFE !important;
}

/* Dynamic Price Numbers Flip Animation */
.price-pulse {
    animation: priceFluidFlip 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes priceFluidFlip {
    0% {
        transform: translateY(-5px) scale(0.95);
        opacity: 0.35;
        filter: blur(3px);
    }
    60% {
        transform: translateY(2px) scale(1.04);
        opacity: 0.95;
        filter: blur(0px);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0px);
    }
}

/* ==========================================================================
   LIQUID GLASS CASE STUDY FILTER DOCK & FLUID CARDS TRANSITION ENGINE
   ========================================================================== */
.liquid-filter-dock {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.14) !important;
    gap: 4px;
    user-select: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.liquid-filter-dock:hover {
    border-color: rgba(59, 130, 246, 0.35) !important;
    box-shadow: 0 10px 36px -4px rgba(37, 99, 235, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}

/* Light Mode Dock Capsule */
html.light .liquid-filter-dock {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 #FFFFFF !important;
}

html.light .liquid-filter-dock:hover {
    border-color: #3B82F6 !important;
    box-shadow: 0 6px 24px -2px rgba(37, 99, 235, 0.18), inset 0 1px 0 0 #FFFFFF !important;
}

/* Sliding Pill Track */
.liquid-filter-pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                height 0.35s ease,
                opacity 0.25s ease !important;
    will-change: transform, width, height;
}

.liquid-filter-pill.is-squishing .liquid-pill-body {
    animation: filterPillSquish 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes filterPillSquish {
    0% {
        transform: scale(1, 1);
    }
    30% {
        transform: scale(1.12, 0.88);
    }
    65% {
        transform: scale(0.95, 1.05);
    }
    100% {
        transform: scale(1, 1);
    }
}

/* Filter Button */
.case-filter-btn {
    position: relative;
    z-index: 2;
    padding: 8px 18px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #94A3B8 !important;
    transition: color 0.28s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.case-filter-btn:hover:not(.is-active) {
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.case-filter-btn.is-active {
    color: #FFFFFF !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.case-filter-btn:active {
    transform: scale(0.96);
}

/* Light Mode Buttons */
html.light .case-filter-btn {
    color: #64748B !important;
}

html.light .case-filter-btn:hover:not(.is-active) {
    color: #0F172A !important;
}

html.light .case-filter-btn.is-active {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Fluid Card Transitions */
.case-study-card {
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
    will-change: opacity, transform, filter;
}

.case-study-card.card-hiding {
    opacity: 0 !important;
    transform: scale(0.92) translateY(12px) !important;
    filter: blur(4px) !important;
    pointer-events: none;
}

.case-study-card.card-hidden {
    display: none !important;
}

.case-study-card.card-entering {
    opacity: 0 !important;
    transform: scale(0.94) translateY(16px) !important;
    filter: blur(4px) !important;
}

.case-study-card.card-visible {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    filter: blur(0px) !important;
}

/* ==========================================================================
   COMPLIANCE TRUST BANNER & MINI CARDS LIQUID MOTION ENGINE
   ========================================================================== */
#compliance-trust-banner {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease !important;
}

#compliance-trust-banner:hover {
    border-color: rgba(16, 185, 129, 0.6) !important;
    box-shadow: 0 20px 48px -10px rgba(16, 185, 129, 0.22), inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}

html.light #compliance-trust-banner {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), inset 0 1px 0 0 #FFFFFF !important;
}

html.light #compliance-trust-banner:hover {
    border-color: #10B981 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(236, 253, 245, 0.45) 100%) !important;
    box-shadow: 0 20px 48px -10px rgba(16, 185, 129, 0.22), 0 0 0 1px rgba(16, 185, 129, 0.25), inset 0 1px 0 0 #FFFFFF !important;
}

/* Individual Trust Mini Cards (Harmonized Baseline & Fixed Leveling) */
.trust-mini-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    min-height: 106px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.28s ease,
                background 0.28s ease !important;
    will-change: transform, box-shadow;
}

.trust-mini-card:hover {
    transform: translateY(-5px) !important;
    z-index: 20;
}

/* Light Mode Base Style for Trust Mini Cards */
html.light .trust-mini-card {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(16px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.05), inset 0 1px 0 0 #FFFFFF !important;
}

/* Dedicated Icon Box Capsule (Guarantees identical baseline height) */
.trust-icon-box {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 8px;
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.28s ease,
                border-color 0.28s ease,
                box-shadow 0.28s ease !important;
    will-change: transform;
}

html.light .trust-icon-box {
    background: #F1F5F9;
    border-color: #E2E8F0;
    box-shadow: inset 0 1px 0 0 #FFFFFF;
}

.trust-mini-card:hover .trust-icon-box {
    transform: scale(1.15) translateY(-2px);
}

/* Glowing Border, Shadow & Icon Box per Color Variant on Hover (Dark Mode) */
.trust-mini-card[data-color="blue"]:hover {
    border-color: rgba(59, 130, 246, 0.65) !important;
    box-shadow: 0 14px 28px -6px rgba(37, 99, 235, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.25) !important;
}
.trust-mini-card[data-color="blue"]:hover .trust-icon-box {
    background: rgba(37, 99, 235, 0.16);
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.35);
}

/* Glowing Border, Shadow & Icon Box per Color Variant on Hover (Light Mode - Vivid Liquid Glass) */
html.light .trust-mini-card[data-color="blue"]:hover {
    background: linear-gradient(145deg, #FFFFFF 0%, #EFF6FF 50%, #DBEAFE 100%) !important;
    border-color: #3B82F6 !important;
    box-shadow: 0 16px 36px -8px rgba(37, 99, 235, 0.28), 0 0 0 1px rgba(59, 130, 246, 0.35), inset 0 1px 0 0 #FFFFFF !important;
}
html.light .trust-mini-card[data-color="blue"]:hover .trust-icon-box {
    background: #DBEAFE !important;
    border-color: #60A5FA !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25) !important;
}
html.light .trust-mini-card[data-color="blue"] .trust-icon {
    color: #2563EB !important;
}

.trust-mini-card[data-color="emerald"]:hover {
    border-color: rgba(16, 185, 129, 0.65) !important;
    box-shadow: 0 14px 28px -6px rgba(16, 185, 129, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.25) !important;
}
.trust-mini-card[data-color="emerald"]:hover .trust-icon-box {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}
html.light .trust-mini-card[data-color="emerald"]:hover {
    background: linear-gradient(145deg, #FFFFFF 0%, #ECFDF5 50%, #D1FAE5 100%) !important;
    border-color: #10B981 !important;
    box-shadow: 0 16px 36px -8px rgba(16, 185, 129, 0.28), 0 0 0 1px rgba(16, 185, 129, 0.35), inset 0 1px 0 0 #FFFFFF !important;
}
html.light .trust-mini-card[data-color="emerald"]:hover .trust-icon-box {
    background: #D1FAE5 !important;
    border-color: #34D399 !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25) !important;
}
html.light .trust-mini-card[data-color="emerald"] .trust-icon {
    color: #059669 !important;
}

.trust-mini-card[data-color="cyan"]:hover {
    border-color: rgba(6, 182, 212, 0.65) !important;
    box-shadow: 0 14px 28px -6px rgba(6, 182, 212, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.25) !important;
}
.trust-mini-card[data-color="cyan"]:hover .trust-icon-box {
    background: rgba(6, 182, 212, 0.16);
    border-color: rgba(6, 182, 212, 0.45);
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.35);
}
html.light .trust-mini-card[data-color="cyan"]:hover {
    background: linear-gradient(145deg, #FFFFFF 0%, #ECFEFF 50%, #CFFAFE 100%) !important;
    border-color: #06B6D4 !important;
    box-shadow: 0 16px 36px -8px rgba(6, 182, 212, 0.28), 0 0 0 1px rgba(6, 182, 212, 0.35), inset 0 1px 0 0 #FFFFFF !important;
}
html.light .trust-mini-card[data-color="cyan"]:hover .trust-icon-box {
    background: #CFFAFE !important;
    border-color: #22D3EE !important;
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.25) !important;
}
html.light .trust-mini-card[data-color="cyan"] .trust-icon {
    color: #0891B2 !important;
}

.trust-mini-card[data-color="indigo"]:hover {
    border-color: rgba(99, 102, 241, 0.65) !important;
    box-shadow: 0 14px 28px -6px rgba(99, 102, 241, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.25) !important;
}
.trust-mini-card[data-color="indigo"]:hover .trust-icon-box {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.35);
}
html.light .trust-mini-card[data-color="indigo"]:hover {
    background: linear-gradient(145deg, #FFFFFF 0%, #EEF2FF 50%, #E0E7FF 100%) !important;
    border-color: #6366F1 !important;
    box-shadow: 0 16px 36px -8px rgba(99, 102, 241, 0.28), 0 0 0 1px rgba(99, 102, 241, 0.35), inset 0 1px 0 0 #FFFFFF !important;
}
html.light .trust-mini-card[data-color="indigo"]:hover .trust-icon-box {
    background: #E0E7FF !important;
    border-color: #818CF8 !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25) !important;
}
html.light .trust-mini-card[data-color="indigo"] .trust-icon {
    color: #4F46E5 !important;
}

.trust-mini-card[data-color="amber"]:hover {
    border-color: rgba(245, 158, 11, 0.65) !important;
    box-shadow: 0 14px 28px -6px rgba(245, 158, 11, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.25) !important;
}
.trust-mini-card[data-color="amber"]:hover .trust-icon-box {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
}
html.light .trust-mini-card[data-color="amber"]:hover {
    background: linear-gradient(145deg, #FFFFFF 0%, #FFFBEB 50%, #FEF3C7 100%) !important;
    border-color: #F59E0B !important;
    box-shadow: 0 16px 36px -8px rgba(245, 158, 11, 0.28), 0 0 0 1px rgba(245, 158, 11, 0.35), inset 0 1px 0 0 #FFFFFF !important;
}
html.light .trust-mini-card[data-color="amber"]:hover .trust-icon-box {
    background: #FEF3C7 !important;
    border-color: #FBBF24 !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25) !important;
}
html.light .trust-mini-card[data-color="amber"] .trust-icon {
    color: #D97706 !important;
}

.trust-mini-card[data-color="rose"]:hover {
    border-color: rgba(244, 63, 94, 0.65) !important;
    box-shadow: 0 14px 28px -6px rgba(244, 63, 94, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.25) !important;
}
.trust-mini-card[data-color="rose"]:hover .trust-icon-box {
    background: rgba(244, 63, 94, 0.16);
    border-color: rgba(244, 63, 94, 0.45);
    box-shadow: 0 0 16px rgba(244, 63, 94, 0.35);
}
html.light .trust-mini-card[data-color="rose"]:hover {
    background: linear-gradient(145deg, #FFFFFF 0%, #FFF1F2 50%, #FFE4E6 100%) !important;
    border-color: #F43F5E !important;
    box-shadow: 0 16px 36px -8px rgba(244, 63, 94, 0.28), 0 0 0 1px rgba(244, 63, 94, 0.35), inset 0 1px 0 0 #FFFFFF !important;
}
html.light .trust-mini-card[data-color="rose"]:hover .trust-icon-box {
    background: #FFE4E6 !important;
    border-color: #FB7185 !important;
    box-shadow: 0 4px 16px rgba(244, 63, 94, 0.25) !important;
}
html.light .trust-mini-card[data-color="rose"] .trust-icon {
    color: #E11D48 !important;
}

/* Icon Spring Transitions */
.trust-mini-card .trust-icon {
    position: relative;
    z-index: 10;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.28s ease !important;
    will-change: transform;
}

.trust-mini-card:hover .trust-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Liquid Sheen Sweep Effect on Hover (z-index 5: behind icon and text, above glow) */
.trust-mini-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 200%;
    height: 200%;
    z-index: 5;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 45%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.06) 55%,
        transparent 100%
    );
    transform: rotate(25deg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-mini-card:hover::after {
    opacity: 1;
    transform: rotate(25deg) translate(30%, 30%);
}

/* Vivid Refractive Sheen Sweep for Light Mode */
html.light .trust-mini-card::after {
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 32%,
        rgba(255, 255, 255, 0.85) 44%,
        #FFFFFF 50%,
        rgba(255, 255, 255, 0.85) 56%,
        rgba(255, 255, 255, 0) 68%,
        transparent 100%
    ) !important;
    mix-blend-mode: overlay;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
}

html.light .trust-mini-card[data-color="blue"]::after {
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.7) 35%, rgba(59, 130, 246, 0.4) 48%, #FFFFFF 50%, rgba(59, 130, 246, 0.4) 52%, rgba(255, 255, 255, 0.7) 65%, transparent 100%) !important;
}
html.light .trust-mini-card[data-color="emerald"]::after {
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.7) 35%, rgba(16, 185, 129, 0.4) 48%, #FFFFFF 50%, rgba(16, 185, 129, 0.4) 52%, rgba(255, 255, 255, 0.7) 65%, transparent 100%) !important;
}
html.light .trust-mini-card[data-color="cyan"]::after {
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.7) 35%, rgba(6, 182, 212, 0.4) 48%, #FFFFFF 50%, rgba(6, 182, 212, 0.4) 52%, rgba(255, 255, 255, 0.7) 65%, transparent 100%) !important;
}
html.light .trust-mini-card[data-color="indigo"]::after {
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.7) 35%, rgba(99, 102, 241, 0.4) 48%, #FFFFFF 50%, rgba(99, 102, 241, 0.4) 52%, rgba(255, 255, 255, 0.7) 65%, transparent 100%) !important;
}
html.light .trust-mini-card[data-color="amber"]::after {
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.7) 35%, rgba(245, 158, 11, 0.4) 48%, #FFFFFF 50%, rgba(245, 158, 11, 0.4) 52%, rgba(255, 255, 255, 0.7) 65%, transparent 100%) !important;
}
html.light .trust-mini-card[data-color="rose"]::after {
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.7) 35%, rgba(244, 63, 94, 0.4) 48%, #FFFFFF 50%, rgba(244, 63, 94, 0.4) 52%, rgba(255, 255, 255, 0.7) 65%, transparent 100%) !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & TOUCH ERGONOMICS (max-width: 640px)
   ========================================================================== */
@media (max-width: 640px) {
    /* Prevent sticky hover effects & tap flicker on mobile touch screens */
    button, a, input, select, textarea {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Smooth touch scrolling */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* Slider thumb touch targets */
    .custom-slider::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
    }
    .custom-slider::-moz-range-thumb {
        width: 22px;
        height: 22px;
    }

    /* Liquid Filter Dock horizontal scroll padding */
    .liquid-filter-dock {
        padding: 4px 6px;
    }

    /* Case studies card adjustments */
    .case-card {
        transform: none !important;
    }

    /* Ensure chart container responsive height */
    #heroRoasChart {
        max-height: 180px !important;
    }

    /* Header action buttons & currency switch compact layout on mobile */
    .liquid-currency-switch {
        padding: 2px !important;
    }
    .liquid-currency-switch .curr-btn {
        padding: 3.5px 7px !important;
        font-size: 11px !important;
        gap: 2.5px !important;
    }
    .liquid-currency-switch .liquid-currency-pill {
        top: 2px !important;
        bottom: 2px !important;
        left: 2px !important;
        width: calc(50% - 2px) !important;
    }
}

/* ==========================================================================
   FLUID LIQUID GLASS MOBILE MENU ENGINE (EXPANSION, STAGGER & MORPH)
   ========================================================================== */
#mobile-menu {
    display: block !important;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    pointer-events: none;
    transition: 
        max-height 0.44s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.44s ease !important;
    will-change: max-height, opacity, transform;
}

#mobile-menu.is-open {
    max-height: 540px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Stagger entrance for menu items */
#mobile-menu .mobile-nav-item {
    opacity: 0;
    transform: translateY(12px);
    transition: 
        opacity 0.32s ease, 
        transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), 
        background-color 0.2s ease,
        color 0.2s ease !important;
    will-change: opacity, transform;
}

#mobile-menu.is-open .mobile-nav-item {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Waterfall Delay */
#mobile-menu.is-open .mobile-nav-item:nth-child(1) { transition-delay: 0.04s; }
#mobile-menu.is-open .mobile-nav-item:nth-child(2) { transition-delay: 0.08s; }
#mobile-menu.is-open .mobile-nav-item:nth-child(3) { transition-delay: 0.12s; }
#mobile-menu.is-open .mobile-nav-item:nth-child(4) { transition-delay: 0.16s; }
#mobile-menu.is-open .mobile-nav-item:nth-child(5) { transition-delay: 0.20s; }
#mobile-menu.is-open .mobile-nav-item:nth-child(6) { transition-delay: 0.24s; }
#mobile-menu.is-open .mobile-nav-item:nth-child(7) { transition-delay: 0.28s; }

#mobile-menu .mobile-cta-btn {
    opacity: 0;
    transform: translateY(14px);
    transition: 
        opacity 0.35s ease 0.30s, 
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.30s, 
        box-shadow 0.25s ease !important;
}

#mobile-menu.is-open .mobile-cta-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Morphing Hamburger <-> Close Icon Animation */
#mobile-menu-btn {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease !important;
}
#mobile-menu-btn #menu-icon-bars,
#mobile-menu-btn #menu-icon-close {
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease !important;
}
#mobile-menu-btn.is-active #menu-icon-bars {
    transform: rotate(90deg) scale(0) !important;
    opacity: 0 !important;
}
#mobile-menu-btn.is-active #menu-icon-close {
    transform: rotate(0deg) scale(1) !important;
    opacity: 1 !important;
}

/* Light Mode Glass Sheet for Mobile Menu */
html.light #mobile-menu {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    border-color: rgba(203, 213, 225, 0.9) !important;
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.12) !important;
}
html.light #mobile-menu .mobile-nav-item {
    color: #334155 !important;
}
html.light #mobile-menu .mobile-nav-item:hover,
html.light #mobile-menu .mobile-nav-item:active {
    background-color: rgba(241, 245, 249, 0.9) !important;
    color: #0F172A !important;
}

/* TikTok Logo Adaptive Brand Note */
html.light .tiktok-core-note {
    fill: #0F172A !important;
}
html.dark .tiktok-core-note,
html:not(.light) .tiktok-core-note {
    fill: #FFFFFF !important;
}