/* ==========================================================================
   LEXLUTHER — PREMIUM LAYER
   Loaded AFTER style.css. Upgrades the existing design system in place:
   tokens, depth, glass, aurora, motion. No markup dependencies removed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN OVERRIDES  (re-skins every existing component automatically)
   -------------------------------------------------------------------------- */
:root {
    --lx-primary: #5B5CFF;
    --lx-accent: #7C3AED;
    --lx-glow: #00E5FF;
    --lx-bg: #050505;
    --lx-bg-2: #111111;

    --lx-primary-rgb: 91, 92, 255;
    --lx-accent-rgb: 124, 58, 237;
    --lx-glow-rgb: 0, 229, 255;

    /* Easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Depth ladder */
    --lx-shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --lx-shadow-2: 0 8px 24px -8px rgba(0,0,0,.7);
    --lx-shadow-3: 0 24px 60px -16px rgba(0,0,0,.85);
    --lx-shadow-float: 0 40px 90px -30px rgba(0,0,0,.95),
                       0 0 0 1px rgba(255,255,255,.04);
    --lx-shadow-glow: 0 0 40px -8px rgba(var(--lx-primary-rgb), .5);

    /* Fluid type scale */
    --lx-display: clamp(2.75rem, 7.2vw, 6.5rem);
    --lx-h2: clamp(2.1rem, 4.6vw, 4rem);
    --lx-h3: clamp(1.25rem, 1.9vw, 1.75rem);
    --lx-body: clamp(1rem, 1.05vw, 1.125rem);

    /* Rhythm */
    --lx-section-y: clamp(88px, 12vw, 190px);
    --lx-radius: 22px;
    --lx-radius-lg: 30px;
}

body {
    --bg-color: #050505;
    --bg-grid: #0a0a0f;
    --text-color: #F4F5FF;
    --text-secondary: #8E90A8;
    --primary-color: #5B5CFF;
    --primary-hover: #4B4CE8;
    --accent-color: #8B8CFF;
    --accent-rgb: 91, 92, 255;
    --border-color: rgba(255, 255, 255, 0.07);
    --card-bg: rgba(17, 17, 17, 0.55);
    --card-hover-border: rgba(91, 92, 255, 0.45);
    --grid-color: rgba(255, 255, 255, 0.022);
    --modal-bg: rgba(5, 5, 5, 0.82);
    --glow-1: radial-gradient(circle, rgba(91, 92, 255, .22) 0%, rgba(124, 58, 237, .07) 45%, transparent 72%);
    --glow-2: radial-gradient(circle, rgba(0, 229, 255, .14) 0%, rgba(91, 92, 255, .05) 45%, transparent 72%);
    --input-bg: rgba(255, 255, 255, 0.035);
    --input-border: rgba(255, 255, 255, 0.09);
    --header-bg: rgba(5, 5, 5, 0.55);
    --badge-bg: rgba(91, 92, 255, 0.1);
    --badge-text: #A9AAFF;
    --glass-blur: 22px;
    --glass-saturate: 170%;
}

/* --------------------------------------------------------------------------
   2. GLOBAL SURFACE — aurora, mesh, noise, grain
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
    background: var(--lx-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Aurora field — fixed, GPU-composited, never triggers layout */
.lx-aurora {
    position: fixed;
    inset: -20%;
    z-index: -3;
    pointer-events: none;
    filter: blur(70px);
    opacity: .85;
    will-change: transform;
    contain: layout paint style;
}
.lx-aurora span {
    position: absolute;
    display: block;
    border-radius: 50%;
    mix-blend-mode: screen;
    will-change: transform;
    transform: translate3d(0,0,0);
}
.lx-aurora .a1 {
    width: 46vw; height: 46vw; top: -6%; left: -4%;
    background: radial-gradient(circle at 30% 30%, rgba(91,92,255,.55), transparent 68%);
    animation: lxDrift1 26s var(--ease-in-out-quint) infinite alternate;
}
.lx-aurora .a2 {
    width: 40vw; height: 40vw; top: 22%; right: -6%;
    background: radial-gradient(circle at 60% 40%, rgba(124,58,237,.48), transparent 68%);
    animation: lxDrift2 32s var(--ease-in-out-quint) infinite alternate;
}
.lx-aurora .a3 {
    width: 34vw; height: 34vw; bottom: 6%; left: 22%;
    background: radial-gradient(circle at 50% 50%, rgba(0,229,255,.3), transparent 66%);
    animation: lxDrift3 38s var(--ease-in-out-quint) infinite alternate;
}
.lx-aurora .a4 {
    width: 30vw; height: 30vw; bottom: -8%; right: 14%;
    background: radial-gradient(circle at 40% 60%, rgba(91,92,255,.32), transparent 66%);
    animation: lxDrift1 30s var(--ease-in-out-quint) infinite alternate-reverse;
}
@keyframes lxDrift1 { to { transform: translate3d(9vw, 7vh, 0) scale(1.18); } }
@keyframes lxDrift2 { to { transform: translate3d(-11vw, 9vh, 0) scale(1.12); } }
@keyframes lxDrift3 { to { transform: translate3d(8vw, -8vh, 0) scale(1.22); } }

/* Film grain — pure CSS, no image request */
.lx-noise {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .038;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    contain: layout paint style;
}

/* Vignette to push edges back and center attention */
.lx-vignette {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, transparent 40%, rgba(5,5,5,.55) 100%);
    contain: layout paint style;
}

/* Existing decorative orbs get retuned rather than removed */
.glow-orb { opacity: .5; filter: blur(90px); }
.grid-overlay {
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY — bigger, tighter, more expensive
   -------------------------------------------------------------------------- */
.hero-title {
    font-size: var(--lx-display);
    line-height: .95;
    letter-spacing: -.04em;
    font-weight: 700;
}
.section-title {
    font-size: var(--lx-h2);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 700;
}
.section-desc, .hero-subtitle {
    font-size: var(--lx-body);
    line-height: 1.65;
    letter-spacing: -.01em;
    color: var(--text-secondary);
}
.hero-subtitle { max-width: 34ch; }
.section-desc { max-width: 58ch; margin-inline: auto; }

.section-subtitle {
    font-size: .7rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--badge-text);
}

.highlight-gradient,
.lx-grad-text {
    background: linear-gradient(105deg, #FFFFFF 0%, #A9AAFF 38%, var(--lx-glow) 78%, #FFFFFF 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lxShimmer 9s linear infinite;
}
@keyframes lxShimmer { to { background-position: 220% 0; } }

/* Section rhythm — massive breathing room */
.deliverables-section,
.campaigns-section,
.team-section,
.motto-section,
.lx-section { padding-block: var(--lx-section-y); }

.section-header { margin-bottom: clamp(48px, 6vw, 88px); }
.title-divider {
    background: linear-gradient(90deg, transparent, var(--lx-primary), var(--lx-glow), transparent);
    height: 1px;
    box-shadow: 0 0 18px rgba(var(--lx-primary-rgb), .8);
}

/* --------------------------------------------------------------------------
   4. GLASS + GLOW BORDER SYSTEM
   -------------------------------------------------------------------------- */
.lx-glass {
    position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow-3);
}

/* Animated conic gradient border — one pseudo-element, GPU rotation only */
.lx-glow-border { position: relative; isolation: isolate; }
.lx-glow-border::before {
    content: "";
    position: absolute;
    inset: 0; /* inset:0 (not -1px) so it survives overflow:hidden parents */
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--lx-angle, 0deg),
        transparent 0deg, rgba(var(--lx-primary-rgb), .9) 60deg,
        rgba(var(--lx-glow-rgb), .9) 120deg, transparent 200deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .45s var(--ease-out-expo);
    pointer-events: none;
    z-index: 2;
}
.lx-glow-border:hover::before { opacity: 1; animation: lxSpin 4s linear infinite; }

@property --lx-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes lxSpin { to { --lx-angle: 360deg; } }

/* Mouse-reactive spotlight on any card */
.lx-spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
                rgba(var(--lx-primary-rgb), .16), transparent 62%);
    opacity: 0;
    transition: opacity .4s var(--ease-out-expo);
    pointer-events: none;
    z-index: 1;
}
.lx-spotlight:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   5. CARDS — float, tilt, lift
   -------------------------------------------------------------------------- */
.card-3d {
    transform-style: preserve-3d;
    transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo),
                border-color .4s ease;
    will-change: transform;
}

.deliv-card,
.team-card,
.tab-visual,
.cs-content-card,
.motto-wrapper,
.cs-stat-card {
    background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid rgba(255,255,255,.075);
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow-2);
    position: relative;
    overflow: hidden;
}

.deliv-card, .team-card { border-radius: var(--lx-radius-lg); }

.deliv-card:hover,
.team-card:hover {
    border-color: var(--card-hover-border);
    box-shadow: var(--lx-shadow-float), 0 0 60px -22px rgba(var(--lx-primary-rgb), .7);
}

/* Top edge light on every card */
.deliv-card::before,
.team-card::before,
.cs-content-card::before {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--lx-glow-rgb), .65), transparent);
    opacity: .45;
    transition: opacity .45s ease;
}
.deliv-card:hover::before,
.team-card:hover::before { opacity: 1; }

.deliv-icon,
.cs-panel-icon {
    background: linear-gradient(145deg, rgba(var(--lx-primary-rgb), .22), rgba(var(--lx-accent-rgb), .12));
    border: 1px solid rgba(var(--lx-primary-rgb), .3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 24px -10px rgba(var(--lx-primary-rgb), .9);
    color: #C9CAFF;
    transition: transform .5s var(--ease-spring), box-shadow .5s ease;
}
.deliv-card:hover .deliv-icon {
    transform: translateY(-4px) scale(1.06) rotate(-4deg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 40px -12px rgba(var(--lx-primary-rgb), 1);
}

/* Ambient float for cards flagged in markup */
.lx-float { animation: lxFloat 7s ease-in-out infinite; }
.lx-float-slow { animation: lxFloat 11s ease-in-out infinite; }
.lx-float-delay { animation: lxFloat 8.5s ease-in-out infinite; animation-delay: -3s; }
@keyframes lxFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -14px, 0); }
}

/* --------------------------------------------------------------------------
   6. BUTTONS — magnetic, glowing, gradient-bordered
   -------------------------------------------------------------------------- */
.btn {
    position: relative;
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: -.01em;
    isolation: isolate;
    overflow: hidden;
    transition: transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo),
                background .35s ease, color .35s ease;
    will-change: transform;
}

.btn-primary {
    background: linear-gradient(120deg, var(--lx-primary), var(--lx-accent));
    border: none;
    color: #fff;
    box-shadow: 0 10px 30px -12px rgba(var(--lx-primary-rgb), .95),
                inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover {
    box-shadow: 0 18px 48px -14px rgba(var(--lx-primary-rgb), 1),
                0 0 34px -6px rgba(var(--lx-glow-rgb), .55),
                inset 0 1px 0 rgba(255,255,255,.35);
}

/* Sheen sweep */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .85s var(--ease-out-expo);
    pointer-events: none;
    z-index: 0;
}
.btn:hover::before { transform: translateX(120%); }

.btn-secondary {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--text-color);
}
.btn-secondary:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(var(--lx-primary-rgb), .55);
    box-shadow: 0 14px 40px -16px rgba(var(--lx-primary-rgb), .8);
}

.btn-lg { padding: 17px 34px; font-size: 1rem; }

/* Ripple injected by premium.js */
.lx-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.42);
    transform: scale(0);
    animation: lxRipple .62s var(--ease-out-expo);
    pointer-events: none;
    z-index: 1;
}
@keyframes lxRipple { to { transform: scale(3.2); opacity: 0; } }

/* Focus visibility (a11y) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--lx-glow);
    outline-offset: 3px;
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   7. NAVBAR — floating glass pill
   -------------------------------------------------------------------------- */
.navbar-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    transition: padding .5s var(--ease-out-expo);
    padding-top: 14px;
}
.nav-container {
    border-radius: 100px;
    padding: 12px 14px 12px 22px;
    border: 1px solid transparent;
    transition: background .5s var(--ease-out-expo), border-color .5s var(--ease-out-expo),
                box-shadow .5s var(--ease-out-expo), backdrop-filter .5s ease;
}
.navbar-header.scrolled { padding-top: 10px; }
.navbar-header.scrolled .nav-container {
    background: rgba(10,10,14,.62);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 18px 50px -22px rgba(0,0,0,.95);
}
.nav-item::after {
    background: linear-gradient(90deg, var(--lx-primary), var(--lx-glow));
    height: 1.5px;
    box-shadow: 0 0 10px rgba(var(--lx-glow-rgb), .8);
}
.nav-phone-link { transition: color .3s ease, transform .4s var(--ease-out-expo); }
.nav-phone-link:hover { transform: translateY(-1px); color: var(--lx-glow); }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero-section {
    padding-top: clamp(140px, 17vh, 210px);
    padding-bottom: clamp(70px, 10vh, 130px);
    position: relative;
    overflow: visible;
}

.badge-container {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 100px;
    box-shadow: 0 6px 22px -12px rgba(var(--lx-primary-rgb), .9);
}
.pulse-dot { background: var(--lx-glow); box-shadow: 0 0 12px var(--lx-glow); }

/* Word-by-word reveal */
.lx-reveal-line { display: block; overflow: hidden; padding-bottom: .08em; }
.lx-word {
    display: inline-block;
    transform: translate3d(0, 110%, 0) rotate(4deg);
    opacity: 0;
    will-change: transform, opacity;
}
.lx-in .lx-word {
    animation: lxWordUp .95s var(--ease-out-expo) forwards;
    animation-delay: calc(var(--i, 0) * 65ms);
}
@keyframes lxWordUp {
    to { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
}

/* Gradient + word-reveal must not fight each other: a transformed inline-block
   child can escape a parent's background-clip:text. So once JS has split the
   line into words, move the gradient down onto the words themselves.
   Browsers without :has() simply keep the original line-level gradient. */
.lx-reveal-line.highlight-gradient:has(.lx-word) {
    background: none;
    -webkit-text-fill-color: initial;
    animation: none;
}
.lx-reveal-line.highlight-gradient .lx-word {
    background: linear-gradient(105deg, #FFFFFF 0%, #A9AAFF 40%, var(--lx-glow) 82%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-buttons { gap: 16px; flex-wrap: wrap; }

/* Hero trust strip */
.lx-hero-proof {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 38px);
    margin-top: 42px;
    flex-wrap: wrap;
}
.lx-proof-item { display: flex; flex-direction: column; gap: 2px; }
.lx-proof-num {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 700;
    letter-spacing: -.03em;
    background: linear-gradient(120deg, #fff, #A9AAFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lx-proof-label {
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.lx-proof-sep { width: 1px; height: 34px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent); }

/* Hero visual staging */
.hero-visual { position: relative; }
.mockup-frame {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(165deg, rgba(20,20,28,.9), rgba(8,8,12,.92));
    box-shadow: var(--lx-shadow-float), 0 0 90px -40px rgba(var(--lx-primary-rgb), .9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.db-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
}
.db-card-val { color: #fff; letter-spacing: -.03em; }
.graph-bar {
    background: linear-gradient(180deg, var(--lx-glow), var(--lx-primary));
    box-shadow: 0 0 18px -4px rgba(var(--lx-glow-rgb), .7);
    border-radius: 6px 6px 2px 2px;
}

/* Floating glass satellites around the hero mockup */
.lx-satellite {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 17px;
    border-radius: 16px;
    background: rgba(16,16,22,.72);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--lx-shadow-3), 0 0 42px -18px rgba(var(--lx-primary-rgb), .9);
    white-space: nowrap;
    pointer-events: none;
}
.lx-satellite i {
    font-size: .95rem;
    color: var(--lx-glow);
    filter: drop-shadow(0 0 8px rgba(var(--lx-glow-rgb), .8));
}
.lx-sat-val { font-family: var(--font-heading); font-weight: 700; font-size: .95rem; letter-spacing: -.02em; color: #fff; line-height: 1.1; }
.lx-sat-label { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.lx-sat-1 { top: 4%; left: -6%; }
.lx-sat-2 { bottom: 14%; right: -4%; }
.lx-sat-3 { bottom: -2%; left: 6%; }

/* Orbital network ring behind the hero visual */
.lx-orbit {
    position: absolute;
    inset: -14% -8%;
    z-index: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
}
.lx-orbit span {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.055);
}
.lx-orbit .r1 { width: 62%; aspect-ratio: 1; animation: lxRotate 34s linear infinite; }
.lx-orbit .r2 { width: 84%; aspect-ratio: 1; animation: lxRotate 52s linear infinite reverse; border-style: dashed; border-color: rgba(255,255,255,.045); }
.lx-orbit .r3 { width: 104%; aspect-ratio: 1; animation: lxRotate 76s linear infinite; }
.lx-orbit .r1::after,
.lx-orbit .r3::after {
    content: "";
    position: absolute;
    top: -3px; left: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lx-glow);
    box-shadow: 0 0 16px 3px rgba(var(--lx-glow-rgb), .85);
}
.lx-orbit .r3::after { background: var(--lx-primary); box-shadow: 0 0 16px 3px rgba(var(--lx-primary-rgb), .9); }
@keyframes lxRotate { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   9. MOTTO
   -------------------------------------------------------------------------- */
.motto-wrapper { border-radius: var(--lx-radius-lg); padding-block: clamp(48px, 6vw, 78px); }
.motto-text {
    font-size: clamp(1.65rem, 3.6vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -.035em;
}
.quote-mark { color: rgba(var(--lx-primary-rgb), .3); }

/* --------------------------------------------------------------------------
   10. NEW SECTION — WHY CHOOSE US (stat timeline)
   -------------------------------------------------------------------------- */
.lx-why { position: relative; }
.lx-stat-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    border-radius: var(--lx-radius-lg);
    overflow: hidden;
    background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.075);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: var(--lx-shadow-3);
}
/* Glowing connective line running through the stats */
.lx-stat-rail::before {
    content: "";
    position: absolute;
    top: 50%; left: 6%; right: 6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--lx-primary-rgb), .55),
                rgba(var(--lx-glow-rgb), .55), rgba(var(--lx-primary-rgb), .55), transparent);
    box-shadow: 0 0 22px rgba(var(--lx-primary-rgb), .55);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.4s var(--ease-out-expo);
}
.lx-stat-rail.animate-in::before { transform: scaleX(1); }

.lx-stat-cell {
    position: relative;
    padding: clamp(34px, 4vw, 54px) clamp(18px, 2.4vw, 34px);
    text-align: center;
    transition: background .45s ease, transform .5s var(--ease-out-expo);
}
.lx-stat-cell + .lx-stat-cell { border-left: 1px solid rgba(255,255,255,.055); }
.lx-stat-cell:hover { background: rgba(var(--lx-primary-rgb), .07); transform: translateY(-4px); }
.lx-stat-cell i {
    font-size: 1.1rem;
    color: var(--lx-glow);
    margin-bottom: 14px;
    display: block;
    filter: drop-shadow(0 0 10px rgba(var(--lx-glow-rgb), .6));
}
.lx-stat-value {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
    background: linear-gradient(120deg, #fff 20%, #A9AAFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lx-stat-name {
    margin-top: 12px;
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   11. NEW SECTION — HORIZONTAL PROCESS TIMELINE
   -------------------------------------------------------------------------- */
.lx-process-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 30px);
}
/* Animated connecting line */
.lx-process-track::before {
    content: "";
    position: absolute;
    top: 42px; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--lx-primary-rgb), .1), rgba(var(--lx-primary-rgb), .6),
                rgba(var(--lx-glow-rgb), .6), rgba(var(--lx-primary-rgb), .1));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.6s var(--ease-out-expo);
    z-index: 0;
}
.lx-process-track.animate-in::before { transform: scaleX(1); }

.lx-step {
    position: relative;
    z-index: 1;
    padding: 30px 26px 34px;
    border-radius: var(--lx-radius);
    background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.075);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: var(--lx-shadow-2);
    transition: transform .55s var(--ease-out-expo), box-shadow .55s var(--ease-out-expo),
                border-color .4s ease;
    overflow: hidden;
}
.lx-step:hover {
    transform: translateY(-10px);
    border-color: rgba(var(--lx-primary-rgb), .45);
    box-shadow: var(--lx-shadow-float), 0 0 60px -24px rgba(var(--lx-primary-rgb), .9);
}
.lx-step-num {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 14px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
    color: #C9CAFF;
    background: linear-gradient(145deg, rgba(var(--lx-primary-rgb), .28), rgba(var(--lx-accent-rgb), .14));
    border: 1px solid rgba(var(--lx-primary-rgb), .38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px -12px rgba(var(--lx-primary-rgb), 1);
    margin-bottom: 22px;
    transition: transform .5s var(--ease-spring);
}
.lx-step:hover .lx-step-num { transform: scale(1.08) rotate(-5deg); }
.lx-step h3 { font-family: var(--font-heading); font-size: 1.12rem; letter-spacing: -.02em; margin-bottom: 10px; }
.lx-step p { font-size: .92rem; color: var(--text-secondary); line-height: 1.62; }

/* --------------------------------------------------------------------------
   12. NEW SECTION — TRUST (marquee + testimonials)
   -------------------------------------------------------------------------- */
.lx-marquee {
    position: relative;
    overflow: hidden;
    padding-block: 22px;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.lx-marquee-track {
    display: flex;
    gap: clamp(38px, 5vw, 76px);
    width: max-content;
    animation: lxMarquee 36s linear infinite;
    will-change: transform;
}
.lx-marquee:hover .lx-marquee-track { animation-play-state: paused; }
@keyframes lxMarquee { to { transform: translate3d(-50%, 0, 0); } }

.lx-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(.95rem, 1.3vw, 1.18rem);
    letter-spacing: -.015em;
    color: rgba(255,255,255,.42);
    transition: color .4s ease, filter .4s ease;
    white-space: nowrap;
}
.lx-chip i { color: rgba(var(--lx-primary-rgb), .7); font-size: .95em; }
.lx-marquee-track:hover .lx-chip { color: rgba(255,255,255,.3); }
.lx-chip:hover { color: #fff; filter: drop-shadow(0 0 14px rgba(var(--lx-glow-rgb), .55)); }

.lx-testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.2vw, 28px);
    margin-top: clamp(48px, 6vw, 78px);
}
.lx-testi {
    padding: 34px 30px;
    border-radius: var(--lx-radius);
    background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.075);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: var(--lx-shadow-2);
    transition: transform .55s var(--ease-out-expo), box-shadow .55s var(--ease-out-expo), border-color .4s ease;
    position: relative;
    overflow: hidden;
}
.lx-testi:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--lx-primary-rgb), .4);
    box-shadow: var(--lx-shadow-float), 0 0 56px -26px rgba(var(--lx-primary-rgb), .85);
}
.lx-testi-stars { color: var(--lx-glow); font-size: .82rem; letter-spacing: 3px; margin-bottom: 18px; filter: drop-shadow(0 0 8px rgba(var(--lx-glow-rgb), .6)); }
.lx-testi blockquote { font-size: 1.02rem; line-height: 1.66; letter-spacing: -.012em; color: #E4E5F5; margin-bottom: 24px; }
.lx-testi-meta { display: flex; align-items: center; gap: 13px; }
.lx-testi-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .88rem;
    color: #fff;
    background: linear-gradient(140deg, var(--lx-primary), var(--lx-accent));
    box-shadow: 0 8px 22px -10px rgba(var(--lx-primary-rgb), 1);
    flex-shrink: 0;
}
.lx-testi-name { font-weight: 600; font-size: .92rem; letter-spacing: -.01em; }
.lx-testi-role { font-size: .76rem; color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   13. TABS / CAMPAIGNS refinement
   -------------------------------------------------------------------------- */
.tabs-nav {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 100px;
    padding: 6px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    gap: 4px;
}
.tab-btn { border-radius: 100px; transition: all .4s var(--ease-out-expo); border: none; }
.tab-btn.active {
    background: linear-gradient(120deg, var(--lx-primary), var(--lx-accent));
    color: #fff;
    box-shadow: 0 10px 28px -14px rgba(var(--lx-primary-rgb), 1);
}
.cs-sub-tab { border-radius: 100px; transition: all .4s var(--ease-out-expo); }
.cs-sub-tab.active {
    background: linear-gradient(120deg, rgba(var(--lx-primary-rgb), .9), rgba(var(--lx-accent-rgb), .85));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 26px -14px rgba(var(--lx-primary-rgb), 1);
}
.cs-stat-num, .stat-num {
    background: linear-gradient(120deg, #fff, #A9AAFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.04em;
}
.cs-content-card { border-radius: var(--lx-radius-lg); }

/* --------------------------------------------------------------------------
   14. TEAM
   -------------------------------------------------------------------------- */
.team-photo {
    border: 2px solid rgba(255,255,255,.1);
    box-shadow: 0 14px 36px -16px rgba(0,0,0,1);
    transition: transform .6s var(--ease-out-expo), border-color .4s ease, box-shadow .5s ease;
}
.team-card:hover .team-photo {
    border-color: rgba(var(--lx-primary-rgb), .6);
    box-shadow: 0 18px 46px -14px rgba(var(--lx-primary-rgb), .8);
}
.card-badge {
    background: linear-gradient(120deg, var(--lx-primary), var(--lx-accent));
    box-shadow: 0 8px 22px -10px rgba(var(--lx-primary-rgb), 1);
    border: 1px solid rgba(255,255,255,.16);
}
.team-quote { border-left: 2px solid rgba(var(--lx-primary-rgb), .45); }

/* --------------------------------------------------------------------------
   15. MODALS / FORMS
   -------------------------------------------------------------------------- */
.modal-backdrop { backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.modal-container {
    background: linear-gradient(165deg, rgba(20,20,28,.96), rgba(8,8,12,.97));
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--lx-radius-lg);
    box-shadow: var(--lx-shadow-float), 0 0 110px -40px rgba(var(--lx-primary-rgb), .8);
}
.modal-form input,
.modal-form select,
.modal-form textarea {
    border-radius: 14px;
    transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus {
    border-color: rgba(var(--lx-primary-rgb), .7);
    box-shadow: 0 0 0 4px rgba(var(--lx-primary-rgb), .14);
    outline: none;
    background: rgba(255,255,255,.055);
}
.success-icon { color: var(--lx-glow); filter: drop-shadow(0 0 20px rgba(var(--lx-glow-rgb), .7)); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer-section { border-top: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, transparent, rgba(255,255,255,.014)); }
.footer-email:hover, .footer-phone:hover { color: var(--lx-glow); }

/* --------------------------------------------------------------------------
   17. SECTION TRANSITIONS — cinematic reveal
   -------------------------------------------------------------------------- */
.scroll-animate,
.lx-reveal {
    opacity: 0;
    transform: translate3d(0, 42px, 0) scale(.985);
    filter: blur(9px);
    transition: opacity 1s var(--ease-out-expo),
                transform 1.05s var(--ease-out-expo),
                filter .9s var(--ease-out-expo);
    will-change: opacity, transform, filter;
}
.scroll-animate.animate-in,
.lx-reveal.animate-in {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}
.stagger-1 { transition-delay: .06s; }
.stagger-2 { transition-delay: .14s; }
.stagger-3 { transition-delay: .22s; }
.stagger-4 { transition-delay: .30s; }
.stagger-5 { transition-delay: .38s; }
.stagger-6 { transition-delay: .46s; }
.stagger-7 { transition-delay: .54s; }
.stagger-8 { transition-delay: .62s; }

/* Section divider softening */
.section-divider svg path { fill: rgba(255,255,255,.02); }

/* --------------------------------------------------------------------------
   18. PREMIUM CURSOR
   -------------------------------------------------------------------------- */
.lx-cursor,
.lx-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 99999;
    border-radius: 50%;
    mix-blend-mode: difference;
    will-change: transform;
}
.lx-cursor {
    width: 7px; height: 7px;
    background: #fff;
    margin: -3.5px 0 0 -3.5px;
}
.lx-cursor-ring {
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    border: 1px solid rgba(255,255,255,.55);
    transition: width .35s var(--ease-out-expo), height .35s var(--ease-out-expo),
                margin .35s var(--ease-out-expo), background .35s ease, border-color .35s ease;
}
.lx-cursor-ring.is-hover {
    width: 72px; height: 72px;
    margin: -36px 0 0 -36px;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.9);
}
.lx-cursor-ring.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
body.lx-has-cursor,
body.lx-has-cursor a,
body.lx-has-cursor button { cursor: none; }
/* Never hide the caret on real inputs — usability beats the effect */
body.lx-has-cursor input,
body.lx-has-cursor textarea,
body.lx-has-cursor select,
body.lx-has-cursor label { cursor: auto; }

/* --------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .lx-stat-rail { grid-template-columns: repeat(2, 1fr); }
    .lx-stat-cell:nth-child(3) { border-left: none; }
    .lx-stat-cell:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.055); }
    .lx-stat-rail::before { display: none; }
    .lx-process-track { grid-template-columns: repeat(2, 1fr); }
    .lx-process-track::before { display: none; }
    .lx-testi-grid { grid-template-columns: 1fr; }
    .lx-satellite { display: none; }
}

@media (max-width: 768px) {
    :root { --lx-section-y: clamp(70px, 14vw, 110px); }
    .lx-stat-rail { grid-template-columns: 1fr; }
    .lx-stat-cell + .lx-stat-cell { border-left: none; border-top: 1px solid rgba(255,255,255,.055); }
    .lx-process-track { grid-template-columns: 1fr; }
    .lx-cursor, .lx-cursor-ring { display: none; }
    .nav-container { padding: 10px 12px 10px 16px; }
}

/* Touch devices: kill hover-dependent motion, keep the look */
@media (hover: none) {
    .lx-cursor, .lx-cursor-ring { display: none !important; }
    body.lx-has-cursor, body.lx-has-cursor a, body.lx-has-cursor button { cursor: auto; }
    .card-3d { transform: none !important; }
}

/* ==========================================================================
   19b. DEVICE COMPATIBILITY & MOBILE PERFORMANCE
   The desktop build leans on backdrop-filter, large blur filters and
   continuous background animation. Those are the three most expensive
   things you can ask a phone GPU to do, and together they are what makes
   a site like this stutter on mobile. Below we progressively strip them
   while keeping the visual language intact.
   ========================================================================== */

/* --- Viewport & overflow safety ------------------------------------------ */
html { overflow-x: hidden; }
body { overflow-x: hidden; width: 100%; position: relative; }

/* Never let a decorative layer create a scrollbar */
.lx-aurora, .lx-noise, .lx-vignette, .grid-overlay, .glow-orb { max-width: 100vw; }

/* Dynamic viewport units: 100vh on mobile includes the address bar, which
   makes the hero jump as the bar hides. svh/dvh track the real viewport. */
.hero-section { min-height: 100svh; }
.mobile-nav-overlay { height: 100svh; height: 100dvh; }
.modal-backdrop { min-height: 100svh; }
@supports not (height: 100svh) {
    .hero-section { min-height: 100vh; }
    .mobile-nav-overlay { height: 100vh; }
}

/* Notch / rounded-corner safe areas.
   max() keeps the existing desktop gutter and only grows it on notched
   devices — it must never shrink the 40px desktop padding. */
.section-container,
.hero-container {
    padding-left: max(40px, env(safe-area-inset-left));
    padding-right: max(40px, env(safe-area-inset-right));
}
.footer-section { padding-bottom: env(safe-area-inset-bottom); }

/* iOS zooms the page when a focused input is under 16px. Lock to 16px. */
@media (max-width: 900px) {
    .form-group input,
    .form-group select,
    .form-group textarea { font-size: 16px; }
}

/* --- Tablet and below ---------------------------------------------------- */
@media (max-width: 1024px) {
    /* Flatten the hero mockup: the 3D rotation overflows narrow viewports
       and forces an expensive off-axis composite. */
    .mockup-container-3d,
    .mockup-container-3d:hover {
        transform: none !important;
        max-width: 100%;
    }
    .mockup-frame { transform: none; }
    .hero-container, .hero-visual { perspective: none; }

    /* Fewer promoted layers = less GPU memory */
    .card-3d, .deliv-card, .team-card, .lx-step, .lx-testi { will-change: auto; }
    .card-3d { transform-style: flat; }

    /* Horizontal tab rows must scroll rather than overflow */
    .tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs-nav::-webkit-scrollbar { display: none; }
    .tab-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* --- Phones -------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Hero: commit to left alignment instead of half-inheriting centring */
    .hero-section { padding-top: 118px; padding-bottom: 64px; text-align: left; }
    .hero-container { text-align: left; gap: 44px; }
    .hero-info { align-items: flex-start; }
    .hero-subtitle { max-width: 100%; }
    .hero-buttons { max-width: 100%; }
    .btn-lg { width: 100%; justify-content: center; }

    .lx-orbit, .lx-satellite { display: none; }

    /* Proof strip: 3 across is too tight under ~420px, so let it wrap evenly */
    .lx-hero-proof { gap: 18px 26px; margin-top: 30px; }
    .lx-proof-sep { display: none; }
    .lx-proof-item { flex: 1 0 auto; min-width: 88px; }

    /* Restore comfortable tap targets (WCAG 2.5.8 -> 24px min, 44px ideal) */
    .mobile-item { padding: 10px 4px; min-height: 44px; display: flex; align-items: center; }
    .nav-phone-link { min-height: 44px; }
    .mobile-menu-toggle { min-width: 44px; min-height: 44px; }
    .modal-close { width: 44px; height: 44px; display: grid; place-items: center; top: 12px; right: 12px; }
    .tab-btn, .cs-sub-tab { min-height: 40px; }

    /* Modals: full-height sheets that never trap content off-screen */
    .modal-backdrop { padding: 12px; align-items: flex-start; }
    .modal-container {
        max-height: calc(100dvh - 24px);
        padding: 28px 20px;
        margin-top: 12px;
        border-radius: 22px;
    }
    .modal-header h2 { font-size: 22px; }

    .section-divider svg { height: 24px; }
    .lx-marquee { padding-block: 14px; }
    .lx-testi { padding: 26px 22px; }
    .lx-step { padding: 26px 22px 28px; }

    /* Tighter gutters on phones, still notch-aware */
    .section-container,
    .hero-container {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    .footer-container { padding-inline: max(20px, env(safe-area-inset-left)); }
}

@media (max-width: 480px) {
    /* The global clamp bottoms out at 44px, which is too wide for a 320px
       screen once "Contracts" is on one line. Re-clamp for small phones. */
    .hero-title { font-size: clamp(2.1rem, 9.4vw, 3rem); letter-spacing: -.03em; }
    .lx-hero-proof { gap: 16px 22px; }
    .lx-proof-item { min-width: 78px; }
    .lx-proof-num { font-size: 1.35rem; }
    .cs-sub-tab { font-size: 12px; }
    .lx-chip { font-size: .9rem; }
    .section-title { letter-spacing: -.03em; }
    .modal-container { padding: 24px 16px; }
}

/* Small phones: the hero dashboard mockup keeps its 2-up grid but needs
   tighter internals so nothing clips at 320-380px. */
@media (max-width: 400px) {
    .mockup-frame { padding: 12px; border-radius: 18px; }
    .db-card { padding: 11px; border-radius: 12px; }
    .db-card-val { font-size: 15px; }
    .db-card-label { font-size: 10px; }
    .dashboard-grid { gap: 9px; }
    .graph-bar-container { height: 56px; }
    .mockup-url { font-size: 9px; }
}

/* Landscape phones: a full-height hero leaves no room for content */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section { min-height: auto; padding-top: 104px; padding-bottom: 56px; }
    .mobile-nav-overlay { align-items: flex-start; padding-top: 80px; overflow-y: auto; }
    .mobile-links { gap: 14px; }
}

/* Momentum scrolling inside modals on iOS */
.modal-container { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mobile-nav-overlay { overscroll-behavior: contain; }

/* --------------------------------------------------------------------------
   19c. LITE MODE
   Applied by the inline script in <head> for coarse-pointer devices and
   low-core / low-memory hardware. This is the switch that stops the phone
   from doing continuous full-screen blur work.
   -------------------------------------------------------------------------- */
html.lx-lite .lx-noise { display: none; }
html.lx-lite .glow-orb { display: none; }

/* Replace the animated 4-blob blurred aurora with a static painted gradient.
   Same palette and mood, zero per-frame cost. */
html.lx-lite .lx-aurora {
    filter: none;
    opacity: 1;
    inset: 0;
    background:
        radial-gradient(58% 42% at 12% 4%,  rgba(91,92,255,.26),  transparent 70%),
        radial-gradient(52% 40% at 92% 26%, rgba(124,58,237,.22), transparent 70%),
        radial-gradient(50% 38% at 30% 78%, rgba(0,229,255,.10),  transparent 70%);
}
html.lx-lite .lx-aurora span { display: none; }

/* backdrop-filter is the single most expensive property here: every glass
   surface forces the compositor to re-sample everything behind it on each
   frame. Swap to flat translucent fills. */
html.lx-lite .lx-glass,
html.lx-lite .deliv-card,
html.lx-lite .team-card,
html.lx-lite .tab-visual,
html.lx-lite .cs-content-card,
html.lx-lite .motto-wrapper,
html.lx-lite .cs-stat-card,
html.lx-lite .lx-stat-rail,
html.lx-lite .lx-step,
html.lx-lite .lx-testi,
html.lx-lite .lx-satellite,
html.lx-lite .badge-container,
html.lx-lite .tabs-nav,
html.lx-lite .btn-secondary,
html.lx-lite .mockup-frame,
html.lx-lite .modal-container,
html.lx-lite .modal-backdrop,
html.lx-lite .mobile-nav-overlay,
html.lx-lite .navbar-header.scrolled .nav-container,
html.lx-lite .form-group input,
html.lx-lite .form-group select,
html.lx-lite .form-group textarea {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.lx-lite .deliv-card,
html.lx-lite .team-card,
html.lx-lite .lx-step,
html.lx-lite .lx-testi,
html.lx-lite .lx-stat-rail,
html.lx-lite .cs-content-card,
html.lx-lite .motto-wrapper,
html.lx-lite .tab-visual { background: #0E0E14; }

html.lx-lite .navbar-header.scrolled .nav-container { background: rgba(8,8,12,.94); }
html.lx-lite .mobile-nav-overlay { background: #08080C; }
html.lx-lite .modal-container { background: #0C0C12; }
html.lx-lite .modal-backdrop { background: rgba(3,3,6,.85); }
html.lx-lite .tabs-nav { background: rgba(255,255,255,.05); }

/* Drop ambient motion that nobody is looking at but every frame pays for */
html.lx-lite .lx-float,
html.lx-lite .lx-float-slow,
html.lx-lite .lx-float-delay,
html.lx-lite .animate-float,
html.lx-lite .animate-float-delayed,
html.lx-lite .lx-orbit span,
html.lx-lite .lx-grad-text { animation: none !important; }
/* NB: .highlight-gradient is deliberately NOT in that list. It sits on a
   .lx-reveal-line, and an !important animation:none would also cancel the
   lxLineIn fade below — leaving that hero line stuck at opacity 0. Its
   shimmer is already neutralised by the :has(.lx-word) rule further up. */

/* Reveal transitions stay, but without the blur filter (expensive to animate) */
html.lx-lite .scroll-animate,
html.lx-lite .lx-reveal {
    filter: none;
    transform: translate3d(0, 26px, 0);
    transition: opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo);
}
html.lx-lite .scroll-animate.animate-in,
html.lx-lite .lx-reveal.animate-in { transform: none; }

/* Word-by-word reveal is fussy on small type that wraps: fade the line */
html.lx-lite .lx-word {
    transform: none;
    opacity: 1;
    animation: none !important;
}
html.lx-lite .lx-reveal-line {
    opacity: 0;
    animation: lxLineIn .7s var(--ease-out-expo) forwards;
}
html.lx-lite .lx-reveal-line:nth-child(2) { animation-delay: .1s; }
html.lx-lite .lx-reveal-line:nth-child(3) { animation-delay: .2s; }
@keyframes lxLineIn { to { opacity: 1; } }

/* Release compositor layers. Scoped to the elements that actually declare
   will-change — a universal selector here would cost more than it saves. */
html.lx-lite .card-3d,
html.lx-lite .lx-aurora,
html.lx-lite .lx-aurora span,
html.lx-lite .glow-orb,
html.lx-lite .btn,
html.lx-lite .lx-marquee-track,
html.lx-lite .scroll-animate,
html.lx-lite .lx-reveal,
html.lx-lite .lx-word,
html.lx-lite .lx-satellite { will-change: auto; }

/* NOTE: content-visibility:auto was tried here and deliberately removed.
   It does cut render cost on a long page, but the placeholder height it
   reserves makes the scrollbar shift as sections come into view — which
   reads as exactly the jank we're trying to eliminate. The wins above
   (no backdrop-filter, no animated blur) are the ones that actually matter. */

/* --------------------------------------------------------------------------
   20. ACCESSIBILITY — honour reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .lx-word { transform: none; opacity: 1; }
    .scroll-animate, .lx-reveal { opacity: 1; transform: none; filter: none; }
    .lx-aurora span, .lx-orbit span, .lx-marquee-track { animation: none !important; }
    .lx-float, .lx-float-slow, .lx-float-delay { animation: none !important; }
}

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