/* ==========================================================================
   LB Automations — visual reskin layer ("theme")
   Loaded AFTER each page's inline <style> and after motion.css, so its
   equal-specificity rules win the cascade. Pure restyling: it never changes
   display/visibility semantics the page scripts rely on ([hidden],
   .modal-overlay.show, .form-body.hide, .form-success.show, .field.invalid,
   .mobile-open) and no HTML ids/classes are added or removed.

   Direction: "deep-space glass" — layered indigo/teal atmosphere instead of
   flat black, a floating glass capsule nav, blue-tinted glass cards with a
   lit top edge, chip-style labels, brighter brand gradient.
   ========================================================================== */

/* ---- 1. Design tokens (cascade into every component that uses them) ---- */
:root{
  --bg:#04060D;
  --bg-2:#0A0F22;
  --surface:rgba(124,149,255,.055);          /* blue-tinted glass */
  --surface-2:rgba(124,149,255,.10);
  --border:rgba(124,149,255,.14);
  --border-strong:rgba(124,149,255,.28);
  --text:#F2F5FF;
  --text-dim:#A9B4D6;
  --text-faint:#6E7AA3;
  --grad:linear-gradient(100deg,#3E8BFF 0%,#27B9D6 50%,#1FE0A6 100%);
  --grad-soft:linear-gradient(100deg,#6CA8FF,#35E6BC);
  --radius:20px;
}

/* ---- 1b. Fix: restore .wrap side padding ---------------------------------
   The inline styles declare `.wrap{padding:0 24px}` but later section
   shorthands (`.hero{padding:84px 0 70px}`, `.sec{padding:96px 0}`, …) zero
   the sides again on the same elements. Desktop hides it behind max-width
   centering; on mobile, content touched the screen edge. Declared here
   (after the inline sheet) so padding-left/right win per-property. */
.wrap{padding-left:24px;padding-right:24px}

/* ---- 2. Page atmosphere: layered colour instead of flat black ---------- */
body{
  background:
    radial-gradient(ellipse 120% 60% at 50% -12%, rgba(62,99,255,.14), transparent 60%),
    radial-gradient(ellipse 80% 50% at 100% 30%, rgba(31,224,166,.05), transparent 65%),
    radial-gradient(ellipse 90% 55% at 0% 75%, rgba(124,58,237,.05), transparent 60%),
    linear-gradient(180deg,#04060D 0%,#060A18 45%,#04060C 100%);
  background-attachment:fixed;
}
.glow{opacity:.5}

/* ---- 3. Floating glass capsule nav -------------------------------------- */
html{scroll-padding-top:104px}
header{
  background:transparent;
  border-bottom:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:14px 0 10px;
}
header.scrolled{background:transparent;border-color:transparent}
.lb-motion header.scrolled{box-shadow:none}
.nav{
  height:64px;
  background:rgba(9,13,28,.62);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--border);
  border-radius:999px;
  padding:0 12px 0 22px;
  box-shadow:0 8px 30px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s, box-shadow .3s, background .3s;
}
header.scrolled .nav{
  background:rgba(8,12,26,.85);
  border-color:var(--border-strong);
  box-shadow:0 14px 40px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
}
.brand{font-size:18px}
.brand svg{width:32px;height:32px}
.nav-links a{font-size:14px}
.lb-motion .nav-links a:not(.active)::after{bottom:-5px}
/* mobile dropdown sits just below the capsule, as its own glass card */
@media(max-width:680px){
  .mobile-open .nav-links{
    top:76px;
    background:rgba(9,13,28,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:0 24px 60px -24px rgba(0,0,0,.9);
  }
}

/* ---- 4. Typography: bigger, tighter, more confident --------------------- */
h1,h2,h3,h4{letter-spacing:-.03em}
.hero h1{font-size:clamp(42px,5.8vw,74px)}
.page-hero h1{font-size:clamp(38px,5.4vw,64px)}
.hero p.lead{font-size:19px}
/* gradient accent bar under section headings */
.sec-head h2{position:relative;padding-bottom:18px}
.sec-head h2::after{
  content:"";position:absolute;left:0;bottom:0;width:58px;height:3px;
  border-radius:3px;background:var(--grad);
}
.sec-head.center h2::after{left:50%;transform:translateX(-50%)}

/* ---- 5. Chips: tags + eyebrows ------------------------------------------ */
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.08em;
  color:#35E6BC;
  background:rgba(31,224,166,.08);
  border:1px solid rgba(31,224,166,.22);
  padding:6px 14px;border-radius:999px;
}
.eyebrow{
  background:rgba(124,149,255,.07);
  border-color:rgba(124,149,255,.2);
}

/* ---- 6. Glass 2.0 cards: lit top edge + layered depth ------------------- */
.card{
  background:linear-gradient(165deg,rgba(124,149,255,.10),rgba(124,149,255,.02) 55%);
  border-color:var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -34px rgba(0,0,0,.85);
}
.svc,.case,.plan,.step,.metric,.vrow,.faq-item,.panel{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.svc:hover,.case:hover{
  background:linear-gradient(165deg,rgba(124,149,255,.13),rgba(124,149,255,.04) 60%);
}
.plan.featured{
  background:linear-gradient(165deg,rgba(62,139,255,.16),rgba(31,224,166,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 36px 80px -44px rgba(62,139,255,.8);
}
.metric .v{background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc .ic,.panel .ic{
  background:linear-gradient(150deg,rgba(62,139,255,.22),rgba(31,224,166,.16));
  border-color:rgba(124,149,255,.22);
  border-radius:14px;
}
.flow-node{border-radius:16px}
.dash,.glass-call{border-radius:22px}

/* ---- 7. Buttons: inner light + glow ------------------------------------- */
.btn-primary{
  box-shadow:0 10px 30px -10px rgba(48,150,230,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{
  box-shadow:0 18px 44px -12px rgba(48,170,220,.8), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-ghost{
  background:rgba(124,149,255,.05);
  border-color:var(--border-strong);
}
.btn-ghost:hover{
  background:rgba(124,149,255,.12);
  border-color:rgba(124,149,255,.45);
}

/* ---- 8. Forms: inset glass + brand focus ring ---------------------------- */
.field input,.field select,.field textarea{
  background:rgba(7,11,24,.55);
  border-color:var(--border);
  border-radius:13px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:#27B9D6;
  box-shadow:0 0 0 3px rgba(39,185,214,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.field label{letter-spacing:.01em}

/* ---- 9. Hero + CTA band -------------------------------------------------- */
.hero{padding-top:64px}
.hero-stats .num{font-size:32px}
.cta-inner{
  border-radius:30px;
  background:linear-gradient(135deg,rgba(62,139,255,.18),rgba(31,224,166,.10));
  border-color:rgba(124,149,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 40px 90px -50px rgba(62,139,255,.7);
}
.bubble.caller{background:rgba(62,139,255,.2);border-color:rgba(98,160,255,.3)}
.float-card{border-radius:16px;background:rgba(9,13,28,.92)}

/* ---- 10. Trust band + timeline + footer ---------------------------------- */
.trust{
  border-radius:20px;
  border:1px solid var(--border);
  background:rgba(124,149,255,.03);
  padding:30px 22px;
}
.timeline::before{background:linear-gradient(#3E8BFF,#1FE0A6);width:2px}
.tl-item::before{box-shadow:0 0 0 4px var(--bg), 0 0 14px rgba(39,185,214,.8)}
footer{
  border-top:1px solid transparent;
  background:linear-gradient(180deg,rgba(124,149,255,.05),transparent 70%);
  position:relative;
}
footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,149,255,.35),rgba(31,224,166,.3),transparent);
}
.foot-soc a{border-radius:12px}

/* ---- 11. Modal + dashboard ----------------------------------------------- */
.modal{border-radius:22px}
.modal-overlay{background:rgba(3,4,10,.78)}
.status-pill{border:1px solid rgba(31,224,166,.25)}

/* ---- 11b. "Coming soon" / "Live" status colours ---------------------------
   Only the AI receptionist (+ its booking/email/SMS automations) is live;
   every other offering is badged as in development. ORANGE = unavailable /
   coming soon, GREEN = live & available — instant visual status read.
   Cards keep their links (capture interest). */
.case{position:relative}
.plan{position:relative}
.soon-badge{
  position:absolute;top:14px;right:14px;z-index:2;
  font-family:'Space Grotesk',sans-serif;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#FF9D45;background:rgba(255,140,50,.14);
  border:1px solid rgba(255,140,50,.5);
  padding:4px 11px;border-radius:999px;white-space:nowrap;
}
.soon-badge--inline{position:static;display:inline-flex;align-items:center;margin-left:10px;vertical-align:2px}
/* dim the not-yet-available content slightly — badge stays full strength */
.svc.soon .ic{opacity:.55}
.svc.soon h3,.svc.soon p,.svc.soon .more{opacity:.68}
.plan .pop--soon{
  background:rgba(40,26,10,.92);
  border:1px solid rgba(255,140,50,.55);
  color:#FF9D45;letter-spacing:.06em;
}
/* live/available badge — green so it reads as "go" next to the orange ones */
.live{
  color:#3DDC84;background:rgba(61,220,132,.13);
  border:1px solid rgba(61,220,132,.45);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.status-pill{color:#FF9D45;border-color:rgba(255,140,50,.45);background:rgba(255,140,50,.10)}
.plan:has(.pop--soon) h3,.plan:has(.pop--soon) .desc,.plan:has(.pop--soon) .price,
.plan:has(.pop--soon) .from,.plan:has(.pop--soon) ul{opacity:.62}
.case:has(.soon-badge) h3,.case:has(.soon-badge) p,.case:has(.soon-badge) .big{opacity:.68}

/* ---- 12. FAQ ------------------------------------------------------------- */
.faq-item{border-radius:16px}
.faq-item.open{
  border-color:rgba(124,149,255,.3);
  background:rgba(124,149,255,.07);
}

/* ---- 13. Small screens: keep the capsule comfortable --------------------- */
@media(max-width:680px){
  header{padding:10px 0 8px}
  .nav{height:58px;padding:0 8px 0 16px}
  html{scroll-padding-top:88px}
  .hero h1{font-size:clamp(36px,9vw,46px)}
}

/* ---- 14. Mobile performance (≤680px) --------------------------------------
   Phones were dropping frames. The killers on mobile GPUs:
   - body background-attachment:fixed → full-page repaint on every scroll frame
   - .glow filter:blur(110px) on 560–680px elements inside a fixed wrap →
     constant re-rasterisation while scrolling
   - backdrop-filter on the sticky nav / cards / animated float-cards → a
     viewport readback per frame (animated backdrop-filter is the worst case)
   Each gets a cheap visual stand-in: the radial-gradients already fade softly
   without the blur, and near-opaque backgrounds read as glass without the
   readback. Desktop keeps the full effect. */
@media(max-width:680px){
  body{background-attachment:scroll}
  .glow{filter:none;opacity:.28}
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,13,28,.94)}
  header.scrolled .nav{background:rgba(8,12,26,.96)}
  .mobile-open .nav-links{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,13,28,.97)}
  .card,.float-card{backdrop-filter:none;-webkit-backdrop-filter:none}
  .modal-overlay{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(3,4,10,.88)}
  .cta-inner::before,.cta-inner::after{filter:none;opacity:.6}
}