/* ==========================================================================
   MIM Agency — core design system
   Dark slate surface, Plus Jakarta Sans display / Inter UI.
   One stylesheet serves all four core pages; page-specific blocks are
   namespaced (.dx- diagnostics, .wa- whatsapp) so they never collide.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surface ramp */
  --bg:            #0F172A;
  --bg-deep:       #0A1020;
  --surface:       #1E293B;
  --surface-2:     #243349;
  --surface-3:     #2C3B54;

  /* Ink */
  --ink:           #F1F5F9;
  --ink-soft:      #CBD5E1;
  --ink-mute:      #94A3B8;
  --ink-faint:     #64748B;

  /* Accent */
  --cyan:          #22D3EE;
  --cyan-deep:     #06B6D4;
  --indigo:        #6366F1;
  --indigo-deep:   #4F46E5;
  --green:         #34D399;
  --amber:         #FBBF24;
  --rose:          #FB7185;

  /* Lines and glows */
  --line:          rgba(148, 163, 184, 0.14);
  --line-strong:   rgba(148, 163, 184, 0.26);
  --glow-cyan:     rgba(34, 211, 238, 0.30);
  --glow-indigo:   rgba(99, 102, 241, 0.30);

  --grad-accent:   linear-gradient(115deg, var(--cyan) 0%, var(--indigo) 100%);
  --grad-text:     linear-gradient(100deg, #67E8F9 0%, #A5B4FC 55%, #C7D2FE 100%);
  --grad-surface:  linear-gradient(165deg, rgba(36, 51, 73, 0.92) 0%, rgba(30, 41, 59, 0.86) 100%);

  /* Type */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rhythm */
  --shell:   1180px;
  --shell-n: 900px;
  --r-sm:    10px;
  --r-md:    16px;
  --r-lg:    22px;
  --r-full:  999px;

  --pad-section: clamp(64px, 8vw, 118px);
  --gap:         clamp(18px, 2.4vw, 28px);

  --shadow-card:  0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -24px rgba(2, 6, 23, 0.9);
  --shadow-lift:  0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 28px 60px -28px rgba(2, 6, 23, 1);
  --shadow-cta:   0 12px 32px -12px var(--glow-cyan), 0 8px 24px -14px var(--glow-indigo);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }

/* The UA rule for [hidden] is display:none at the lowest precedence, so any
   author `display` (notably .btn's inline-flex) silently defeats it. Several
   controls here are toggled by the hidden attribute alone, so it has to win. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

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

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(34, 211, 238, 0.28); color: #fff; }

/* Scrollbars stay in the dark palette — a default light bar inside the modal
   or the chat log reads as a rendering bug on a theme this dark. */
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.34) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--r-full);
  background: rgba(148, 163, 184, 0.34);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.55); background-clip: content-box; }

/* Headings — Plus Jakarta Sans, tight tracking as specified. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 { font-weight: 800; font-size: clamp(2.2rem, 5.4vw, 3.85rem); }
h2 { font-weight: 800; font-size: clamp(1.75rem, 3.7vw, 2.75rem); }
h3 { font-weight: 700; font-size: clamp(1.12rem, 1.7vw, 1.32rem); line-height: 1.26; }
h4 { font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; }

p { margin: 0; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--cyan);
  color: #06212B;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(18px, 4.5vw, 34px);
}

.section {
  position: relative;
  padding-block: var(--pad-section);
}

.section-alt {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(30, 41, 59, 0.75) 0%, transparent 70%),
    var(--bg-deep);
  border-block: 1px solid var(--line);
}

.head {
  max-width: 760px;
  margin-bottom: clamp(36px, 5vw, 58px);
}
.head-center { margin-inline: auto; text-align: center; }
.head p.lede { margin-top: 18px; font-size: clamp(1rem, 1.35vw, 1.08rem); color: var(--ink-mute); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 6px 14px 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: rgba(30, 41, 59, 0.7);
  font-family: var(--font-ui);
  font-size: 0.735rem;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}
.head-center .eyebrow { margin-inline: auto; }

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: none;
  font-family: var(--font-ui);
  font-size: 0.945rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary {
  background: var(--grad-accent);
  color: #06182A;
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { box-shadow: 0 16px 42px -12px var(--glow-cyan), 0 12px 32px -14px var(--glow-indigo); }

.btn-ghost {
  border-color: var(--line-strong);
  background: rgba(30, 41, 59, 0.6);
  color: var(--ink);
}
.btn-ghost:hover {
  border-color: rgba(34, 211, 238, 0.55);
  background: rgba(34, 211, 238, 0.08);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.18), 0 14px 34px -22px var(--glow-cyan);
}

.btn-wa { background: #25D366; color: #052E16; box-shadow: 0 12px 30px -14px rgba(37, 211, 102, 0.6); }
.btn-wa:hover { box-shadow: 0 16px 38px -12px rgba(37, 211, 102, 0.7); }

.btn-lg { padding: 16px 30px; font-size: 1rem; }
.btn-sm { padding: 9px 17px; font-size: 0.86rem; }
.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
}
.head-center .btn-row { justify-content: center; }

.micro {
  margin-top: 16px;
  font-size: 0.83rem;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.micro span { display: inline-flex; align-items: center; gap: 6px; }
.micro span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
}
.head-center .micro { justify-content: center; }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background-color 0.3s;
}
.masthead.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(10, 16, 32, 0.9);
}

.masthead-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.04rem;
  color: var(--ink);
}
.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}
.brand em { font-style: normal; font-weight: 500; color: var(--ink-mute); }

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.nav a {
  padding: 8px 13px;
  border-radius: var(--r-full);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-mute);
  transition: color 0.2s, background-color 0.2s;
}
.nav a:hover { color: var(--ink); background: rgba(148, 163, 184, 0.09); }
.nav a.is-current { color: var(--ink); }
.nav a.is-current::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--grad-accent);
}

/* Solutions dropdown. The trigger is a real <button> so keyboard and screen
   reader users get the disclosure semantics; JS toggles [data-open] and the
   panel also opens on hover for pointer users. */
.nav-group { position: relative; display: flex; align-items: center; }

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.nav-trigger:hover,
.nav-group:hover .nav-trigger,
.nav-trigger[aria-expanded="true"] { color: var(--ink); background: rgba(148, 163, 184, 0.09); }

.nav-trigger svg {
  width: 11px;
  height: 11px;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 70;
  display: grid;
  gap: 2px;
  width: 268px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(10, 16, 32, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav-group:hover .nav-panel,
.nav-group:focus-within .nav-panel,
.nav-panel[data-open] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Bridges the gap between trigger and panel so the pointer can travel down
   without the hover state dropping out from under it. */
.nav-group::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 0.885rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.nav-panel a small {
  display: block;
  margin-top: 2px;
  font-size: 0.755rem;
  color: var(--ink-faint);
}
.nav-panel a:hover { background: rgba(62, 157, 255, 0.12); color: var(--ink); }
.nav-panel a:hover small { color: var(--ink-mute); }

.masthead .btn { margin-left: 6px; }

.burger {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: rgba(30, 41, 59, 0.8);
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1.8px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 23px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px clamp(18px, 4.5vw, 34px) 22px;
  border-top: 1px solid var(--line);
  background: rgba(10, 16, 32, 0.98);
}
.mobile-nav[data-open] { display: flex; }
.mobile-nav a {
  padding: 13px 4px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.mobile-nav a.is-current { color: var(--cyan); }
.mobile-nav .btn { margin-top: 14px; border-bottom: 0; }

/* The drawer has room to show the Solutions children inline, so it labels the
   group rather than nesting a second disclosure inside an open one. */
.mobile-nav-label {
  margin: 16px 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mobile-nav a.is-sub { padding-left: 14px; font-size: 0.95rem; color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(58px, 8vw, 104px) clamp(56px, 7vw, 96px);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-bg::before {
  /* Faint engineering mesh — structure, not decoration. */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(90% 70% at 50% 24%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 24%, #000 0%, transparent 78%);
}
.hero-bg i {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}
.hero-bg i:nth-child(1) {
  width: 520px; height: 520px;
  top: -190px; left: -110px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.55), transparent 68%);
}
.hero-bg i:nth-child(2) {
  width: 560px; height: 560px;
  top: -140px; right: -160px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.55), transparent 68%);
}
.hero-bg i:nth-child(3) {
  width: 620px; height: 340px;
  bottom: -220px; left: 32%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.38), transparent 70%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(30px, 4vw, 52px);
  align-items: center;
}

/* Hero CTA pair. Labels differ in length from page to page, so the buttons
   share the row width instead of measuring to their text: they sit flush on
   one line when both fit, and stack to equal full-width blocks when they do
   not. Either way the edges line up. */
.hero .btn-row > .btn { flex: 1 1 auto; }
.hero .btn-row > .btn-lg { padding-inline: 24px; }
.hero-grid.is-narrow {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--shell-n);
  margin-inline: auto;
  text-align: center;
}
.hero-grid.is-narrow .eyebrow,
.hero-grid.is-narrow .btn-row,
.hero-grid.is-narrow .micro { justify-content: center; }
.hero-grid.is-narrow .eyebrow { display: inline-flex; }
.hero-grid.is-narrow .hero-lede { margin-inline: auto; }

.hero h1 { margin-bottom: 22px; }

.hero-lede {
  max-width: 56ch;
  margin-bottom: 30px;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.66;
  color: var(--ink-mute);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(36px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--line);
  overflow: hidden;
}
.hero-stats div {
  padding: 20px 18px;
  background: rgba(30, 41, 59, 0.6);
}
.hero-stats b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hero-stats span {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-surface);
  box-shadow: var(--shadow-card);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card::after {
  /* Sleek glowing edge on hover. */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-accent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card:hover::after { opacity: 0.55; }

.card h3 { margin-bottom: 9px; }
.card p { font-size: 0.945rem; color: var(--ink-mute); }

.icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(34, 211, 238, 0.16), rgba(99, 102, 241, 0.13));
  color: var(--cyan);
}
.icon svg { width: 21px; height: 21px; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Numbered process steps */
.step { position: relative; padding-top: 30px; }
.step-no {
  position: absolute;
  top: -6px;
  left: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(148, 163, 184, 0.34);
}

/* Tick list */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.ticks li::before {
  content: "";
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.6 8.3 2.9 2.9 5.9-6.1' fill='none' stroke='%2306182A' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--grad-accent);
}

/* Split feature row */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4.6vw, 58px);
  align-items: center;
}
.split-media {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-surface);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

/* Comparison: leaking vs fixed */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.versus-col { padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--line); border-radius: var(--r-lg); }
.versus-col.is-bad { background: rgba(251, 113, 133, 0.05); border-color: rgba(251, 113, 133, 0.2); }
.versus-col.is-good { background: rgba(52, 211, 153, 0.05); border-color: rgba(52, 211, 153, 0.22); }
.versus-col h3 { margin-bottom: 16px; font-size: 1.05rem; }
.versus-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.versus-col li { display: flex; gap: 10px; font-size: 0.93rem; }
.versus-col li::before { flex: none; font-weight: 700; }
.versus-col.is-bad li::before { content: "\00d7"; color: var(--rose); }
.versus-col.is-good li::before { content: "\2713"; color: var(--green); }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-inline: auto; }
.price { display: flex; flex-direction: column; }
.price.is-featured { border-color: rgba(34, 211, 238, 0.4); }
.price.is-featured::after { opacity: 0.4; }
.price-tag {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cyan);
}
.price-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.3rem);
  letter-spacing: -0.035em;
  color: var(--ink);
}
.price-sub { margin-bottom: 22px; font-size: 0.9rem; color: var(--ink-faint); }
.price .ticks { margin-bottom: 26px; }
.price .btn { margin-top: auto; }

/* FAQ — also the AEO answer surface, mirrored in FAQPage JSON-LD. */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(30, 41, 59, 0.6);
  transition: border-color 0.25s;
}
.faq details[open] { border-color: rgba(34, 211, 238, 0.32); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1rem;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-body { padding: 0 20px 20px; font-size: 0.95rem; color: var(--ink-mute); }

/* Closing CTA */
.closer {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(70px, 9vw, 124px);
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
}
.closer::before {
  content: "";
  position: absolute;
  width: 760px; height: 420px;
  left: 50%; top: -160px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(34, 211, 238, 0.24), transparent 66%);
  filter: blur(80px);
}
.closer .shell { position: relative; }
.closer p { max-width: 58ch; margin: 18px auto 30px; color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   7a. TESTIMONIALS (social proof — home)
   Horizontal grid of glass cards on the same slate/blue system as the offer
   cards below them, so proof and CTA read as one continuous block.
   -------------------------------------------------------------------------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}

.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(24px, 2.8vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(36, 51, 73, 0.66) 0%, rgba(15, 23, 42, 0.74) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.quote-card::before {
  /* Oversized opening quote, sunk into the glass rather than sitting on it. */
  content: "\201C";
  position: absolute;
  top: -26px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(62, 157, 255, 0.12);
  pointer-events: none;
}
.quote-card:hover {
  transform: translateY(-4px);
  border-color: rgba(62, 157, 255, 0.34);
  box-shadow: var(--shadow-lift), 0 20px 54px -32px rgba(62, 157, 255, 0.5);
}

.quote-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
  color: var(--amber);
}
.quote-stars svg { width: 15px; height: 15px; }

.quote-card blockquote {
  position: relative;
  margin: 0 0 24px;
  font-size: 0.975rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.quote-who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.quote-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(62, 157, 255, 0.3);
  background: linear-gradient(150deg, rgba(62, 157, 255, 0.2), rgba(99, 102, 241, 0.16));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #9CCDFF;
}
.quote-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.quote-who b { display: block; font-size: 0.925rem; color: var(--ink); }
.quote-who span { display: block; margin-top: 1px; font-size: 0.8rem; color: var(--ink-faint); }

/* Placeholder state: until a real quote replaces it, the card must LOOK
   unfinished so nothing invented can ship by accident. Delete .is-placeholder
   from the article once the copy is real. */
.quote-card.is-placeholder {
  border-style: dashed;
  border-color: var(--line-strong);
}
.quote-card.is-placeholder blockquote { color: var(--ink-mute); font-style: italic; }
.quote-card.is-placeholder .quote-stars { opacity: 0.4; }

/* --------------------------------------------------------------------------
   7b. PATH CARDS (dual CTA — home)
   Two routes into the business, side by side. Electric blue accent sits on
   top of the slate surface rather than replacing the cyan/indigo system, so
   the pair reads as one deliberate decision point on the page.
   -------------------------------------------------------------------------- */
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
  margin-inline: auto;
}

.path-card {
  --path-blue: #3E9DFF;
  --path-glow: rgba(62, 157, 255, 0.34);

  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid rgba(62, 157, 255, 0.18);
  border-radius: var(--r-lg);
  background:
    linear-gradient(165deg, rgba(36, 51, 73, 0.72) 0%, rgba(15, 23, 42, 0.78) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}

/* Soft blue bloom bleeding in from the top corner of the glass. */
.path-card::before {
  content: "";
  position: absolute;
  width: 340px; height: 240px;
  top: -140px; right: -90px;
  background: radial-gradient(circle, var(--path-glow), transparent 68%);
  filter: blur(46px);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

/* Masked 1px border that lights up on hover. */
.path-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--path-blue), rgba(99, 102, 241, 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

.path-card:hover {
  transform: translateY(-4px);
  border-color: rgba(62, 157, 255, 0.4);
  box-shadow: var(--shadow-lift), 0 22px 60px -30px var(--path-glow);
}
.path-card:hover::after  { opacity: 0.7; }
.path-card:hover::before { opacity: 1; }

/* The primary offer carries the accent at rest, not only on hover. */
.path-card.is-primary {
  border-color: rgba(62, 157, 255, 0.42);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(62, 157, 255, 0.1),
              0 24px 60px -34px var(--path-glow);
}
.path-card.is-primary::after { opacity: 0.45; }

.path-card > * { position: relative; }

.path-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-bottom: 20px;
  padding: 6px 14px 6px 11px;
  border: 1px solid rgba(62, 157, 255, 0.34);
  border-radius: var(--r-full);
  background: rgba(62, 157, 255, 0.1);
  font-family: var(--font-ui);
  font-size: 0.715rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-align: left;
  text-transform: uppercase;
  color: #9CCDFF;
}
.path-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--path-blue);
  box-shadow: 0 0 0 3px rgba(62, 157, 255, 0.2);
}

/* Reserve two lines of title in every card so a 1-line and a 2-line offer
   name occupy identical vertical space, keeping the price row level.
   2 lines x the 1.26 heading line-height = 2.52em, and because the unit is
   em it tracks the clamped font-size at every breakpoint. */
.path-card h3 {
  margin-bottom: 12px;
  font-size: clamp(1.16rem, 1.7vw, 1.38rem);
  min-height: 2.52em;
}

.path-card p {
  margin-bottom: 28px;
  font-size: 0.945rem;
  line-height: 1.68;
  color: var(--ink-mute);
}

/* Scoped to .path-card so it outranks `.path-card p` (0,1,1). As a bare
   `.path-price` (0,1,0) every one of these declarations lost to the
   description rule above and the price rendered small and muted. */
.path-card .path-price {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}
.path-card .path-price small {
  display: block;
  margin-top: 5px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.815rem;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink-faint);
}

/* The action block is pinned to the card base by margin-top:auto. The
   bottom padding reserves a sub-link line in EVERY card - occupied in the
   diagnostics card, empty in the other two - so all three primary CTAs
   land on the same horizontal plane instead of card 1 riding higher. */
.path-actions {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-bottom: 30px;
}
.path-card .btn { margin-top: auto; }
.path-actions .btn { margin-top: 0; }

/* Secondary step as a quiet text link, so it costs one line instead of a
   full second button. Absolutely placed into the reserved strip above. */
.path-sublink {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  color: var(--ink-faint);
  transition: color 0.2s var(--ease);
}
.path-sublink:hover,
.path-sublink:focus-visible {
  color: #9CCDFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Blue-forward CTA so the pair stays on the requested accent. */
.btn-electric {
  background: linear-gradient(120deg, #3E9DFF 0%, #6366F1 100%);
  color: #04142B;
  box-shadow: 0 12px 32px -12px rgba(62, 157, 255, 0.55);
}
.btn-electric:hover { box-shadow: 0 18px 44px -12px rgba(62, 157, 255, 0.7); }

.btn-electric-ghost {
  border-color: rgba(62, 157, 255, 0.38);
  background: rgba(62, 157, 255, 0.07);
  color: var(--ink);
}
.btn-electric-ghost:hover {
  border-color: rgba(62, 157, 255, 0.7);
  background: rgba(62, 157, 255, 0.13);
  box-shadow: 0 0 0 1px rgba(62, 157, 255, 0.2), 0 14px 34px -20px rgba(62, 157, 255, 0.6);
}

/* --------------------------------------------------------------------------
   8. CHAT PREVIEW (Lexi mock — premium + home)
   -------------------------------------------------------------------------- */
.chat-mock {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, rgba(36, 51, 73, 0.95), rgba(15, 23, 42, 0.95));
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.chat-mock-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.7);
}
.chat-mock-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.chat-mock-head b { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 0.96rem; }
.chat-mock-head small { display: block; font-size: 0.76rem; color: var(--green); }
.chat-mock-body { display: grid; gap: 12px; padding: 20px 18px; }
.bubble {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.55;
}
.bubble-bot {
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  background: rgba(30, 41, 59, 0.9);
  color: var(--ink-soft);
}
.bubble-user {
  margin-left: auto;
  border-bottom-right-radius: 5px;
  background: var(--grad-accent);
  color: #06182A;
  font-weight: 500;
}
.chat-mock-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.chat-mock-foot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16);
}

/* CRM log strip — the "6-column logging" proof */
.crm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
  min-width: 660px;
}
.crm-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.crm-table th, .crm-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.crm-table th {
  background: rgba(15, 23, 42, 0.8);
  font-weight: 600;
  font-size: 0.73rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.crm-table td { color: var(--ink-soft); background: rgba(30, 41, 59, 0.45); }
.crm-table tr:last-child td { border-bottom: 0; }
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 0.73rem;
  font-weight: 600;
}
.pill-hot { background: rgba(251, 113, 133, 0.14); color: var(--rose); }
.pill-warm { background: rgba(251, 191, 36, 0.14); color: var(--amber); }
.pill-new { background: rgba(52, 211, 153, 0.14); color: var(--green); }

/* --------------------------------------------------------------------------
   9. DIAGNOSTICS PAGE (.dx-)
   -------------------------------------------------------------------------- */
.dx-scan {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-surface);
  box-shadow: var(--shadow-lift);
}
.dx-row { display: grid; gap: 7px; }
.dx-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.88rem; }
.dx-row-top b { font-weight: 600; color: var(--ink); }
.dx-row-top span { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; }
.dx-meter { height: 7px; border-radius: var(--r-full); background: rgba(148, 163, 184, 0.14); overflow: hidden; }
.dx-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  width: 0;
  transition: width 1.1s var(--ease);
}
.dx-meter i.is-bad { background: linear-gradient(90deg, #FB7185, #F43F5E); }
.dx-meter i.is-mid { background: linear-gradient(90deg, #FBBF24, #F59E0B); }
.dx-meter i.is-good { background: linear-gradient(90deg, #34D399, #10B981); }

.dx-score {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.dx-score b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: -0.04em;
  color: var(--rose);
}
.dx-score p { font-size: 0.86rem; color: var(--ink-faint); }

/* Five-slide audit form */
.slides {
  max-width: 660px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-surface);
  box-shadow: var(--shadow-lift);
}
.slides-bar { display: flex; gap: 6px; margin-bottom: 8px; }
.slides-bar i {
  flex: 1;
  height: 4px;
  border-radius: var(--r-full);
  background: rgba(148, 163, 184, 0.16);
  transition: background-color 0.35s var(--ease);
}
.slides-bar i.is-on { background: var(--cyan); }
.slides-count { margin-bottom: 22px; font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); }

.slide { display: none; }
.slide.is-active { display: block; animation: slide-in 0.4s var(--ease); }
@keyframes slide-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.slide h3 { margin-bottom: 7px; }
.slide > p { margin-bottom: 20px; font-size: 0.92rem; color: var(--ink-mute); }

.field { display: grid; gap: 7px; margin-bottom: 15px; }
.field label { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(15, 23, 42, 0.75);
  color: var(--ink);
  font-size: 0.94rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6.5 4 4 4-4' fill='none' stroke='%2394A3B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  padding-right: 40px;
}

.choices { display: grid; gap: 9px; }
.choice {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(15, 23, 42, 0.55);
  cursor: pointer;
  font-size: 0.92rem;
  transition: border-color 0.2s, background-color 0.2s;
}
.choice:hover { border-color: rgba(34, 211, 238, 0.42); }
.choice input { accent-color: var(--cyan); width: 17px; height: 17px; flex: none; }
.choice:has(input:checked) { border-color: var(--cyan); background: rgba(34, 211, 238, 0.08); }

.slide-actions { display: flex; gap: 10px; margin-top: 24px; }
.slide-actions .btn { flex: 1; }

.form-note { margin-top: 14px; font-size: 0.8rem; color: var(--ink-faint); text-align: center; }
.form-status { margin-top: 14px; font-size: 0.88rem; }
.form-status[data-state="error"] { color: var(--rose); }
.form-status[data-state="ok"] { color: var(--green); }

/* --------------------------------------------------------------------------
   10. WHATSAPP PAGE (.wa-)
   -------------------------------------------------------------------------- */
.wa-phone {
  max-width: 360px;
  margin-inline: auto;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 34px;
  background: #0B1424;
  box-shadow: var(--shadow-lift);
}
.wa-screen { border-radius: 24px; overflow: hidden; background: #0B141A; }
.wa-top {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  background: #1F2C34;
}
.wa-top img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.wa-top b { font-size: 0.92rem; color: #E9EDEF; font-family: var(--font-display); font-weight: 700; }
.wa-top small { display: block; font-size: 0.72rem; color: #8696A0; }
.wa-thread {
  display: grid;
  gap: 9px;
  padding: 18px 14px;
  min-height: 330px;
  align-content: start;
  background:
    radial-gradient(circle at 20% 20%, rgba(37, 211, 102, 0.05), transparent 45%),
    #0B141A;
}
.wa-msg {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #E9EDEF;
}
.wa-msg-in { background: #1F2C34; border-top-left-radius: 2px; }
.wa-msg-out { margin-left: auto; background: #005C4B; border-top-right-radius: 2px; }
.wa-msg time { display: block; margin-top: 3px; font-size: 0.66rem; color: #8696A0; text-align: right; }

/* --------------------------------------------------------------------------
   11. LEAD MODAL
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal[data-open] { display: grid; animation: fade 0.25s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(24px, 3.4vw, 36px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, #223047 0%, #16203A 100%);
  box-shadow: 0 40px 90px -30px rgba(2, 6, 23, 1);
  animation: pop 0.3s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  color: var(--ink-mute);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.modal-close:hover { color: var(--ink); border-color: var(--line-strong); }

.modal-card h3 { margin-bottom: 8px; font-size: 1.3rem; }
.modal-card > p { margin-bottom: 22px; font-size: 0.93rem; color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   12. LEXI LIVE CHAT WIDGET
   -------------------------------------------------------------------------- */
.lexi-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 1px solid rgba(34, 211, 238, 0.45);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(2, 6, 23, 0.9), 0 0 0 4px rgba(34, 211, 238, 0.1);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.lexi-launcher:hover { transform: scale(1.06); }
.lexi-launcher img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lexi-launcher i {
  position: absolute;
  right: 3px; bottom: 3px;
  width: 13px; height: 13px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--green);
}

.lexi-panel {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 101;
  width: min(370px, calc(100vw - 40px));
  max-height: min(600px, calc(100vh - 130px));
  display: none;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(175deg, #223047, #131C31);
  box-shadow: 0 34px 70px -24px rgba(2, 6, 23, 1);
  overflow: hidden;
}
.lexi-panel[data-open] { display: flex; animation: pop 0.28s var(--ease); }

.lexi-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.6);
}
.lexi-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.lexi-head b { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.lexi-head small { display: block; font-size: 0.74rem; color: var(--green); }
.lexi-head button {
  margin-left: auto;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  color: var(--ink-mute);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.lexi-head button:hover { color: var(--ink); }

.lexi-body { padding: 16px; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.lexi-body .field { margin-bottom: 0; }
.lexi-log { display: grid; gap: 10px; max-height: 300px; overflow-y: auto; }
.lexi-msg {
  max-width: 88%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: rgba(30, 41, 59, 0.85);
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.lexi-msg-user {
  margin-left: auto;
  border: 0;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
  background: var(--grad-accent);
  color: #06182A;
  font-weight: 500;
}
.lexi-note { font-size: 0.76rem; color: var(--ink-faint); }
.lexi-note a { color: var(--cyan); }

.lexi-typing { display: none; gap: 4px; padding-left: 6px; }
.lexi-typing[data-on] { display: flex; }
.lexi-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: blip 1.2s infinite;
}
.lexi-typing span:nth-child(2) { animation-delay: 0.16s; }
.lexi-typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes blip { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.lexi-row { display: flex; gap: 8px; }
.lexi-row input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: rgba(15, 23, 42, 0.8);
  color: var(--ink);
  font-size: 0.9rem;
}
.lexi-row input:focus { outline: none; border-color: var(--cyan); }

.lexi-teaser {
  position: fixed;
  right: 92px;
  bottom: 30px;
  z-index: 99;
  max-width: 270px;
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 18px 40px -20px rgba(2, 6, 23, 1);
  font-size: 0.84rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.lexi-teaser[data-on] { display: flex; animation: pop 0.3s var(--ease); }
.lexi-teaser button {
  flex: none;
  border: 0;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.foot {
  padding-block: clamp(42px, 5vw, 62px) 34px;
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 48px);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.foot-grid p { margin-top: 14px; max-width: 34ch; font-size: 0.9rem; color: var(--ink-faint); }
.foot h4 { margin-bottom: 14px; color: var(--ink-mute); font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot ul a { font-size: 0.9rem; color: var(--ink-soft); transition: color 0.2s; }
.foot ul a:hover { color: var(--cyan); }
.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   14. MOTION
   -------------------------------------------------------------------------- */
/* Scoped to .js, which the inline head script sets. If scripting is blocked or
   agency.js fails to load, the hidden state is never applied and every section
   renders as plain visible content rather than a blank page. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .hero-grid .hero-media { order: 2; }
  /* Three offer cards do not survive a tablet width side by side: the copy
     turns to ribbons. Stack to a single readable column instead. */
  .path-grid { grid-template-columns: minmax(0, 1fr); max-width: 580px; }
  /* Stacked, there is no neighbouring card to line up with, so the title
     and sub-link reservations are pure dead space. Collapse them. */
  .path-card h3 { min-height: 0; }
  .path-card:not(:has(.path-sublink)) .path-actions { padding-bottom: 0; }
  .quote-grid { grid-template-columns: minmax(0, 1fr); max-width: 580px; margin-inline: auto; }
  .price-grid { grid-template-columns: minmax(0, 1fr); max-width: 580px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* Scoped to the bar itself. The mobile drawer also lives inside .masthead
     and carries its own copy of the CTA, which must stay visible. */
  .nav, .masthead-inner .btn { display: none; }
  .burger { display: block; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4,
  .versus, .price-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-stats { grid-template-columns: minmax(0, 1fr); }
  .btn-row .btn { width: 100%; }
  .slide-actions { flex-direction: column-reverse; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .lexi-teaser { right: 20px; bottom: 92px; max-width: calc(100vw - 40px); }
  .lexi-panel { right: 12px; left: 12px; width: auto; bottom: 88px; }
}