/* ==========================================================================
   Omega Telesolutions — Design System
   Modern SaaS / Telecom-tech
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Typography helpers
   5.  Buttons & badges
   6.  Navbar (glass, mega menu, mobile drawer)
   7.  Hero (animated mesh gradient)
   8.  Marquee
   9.  Cards & bento grid
   10. Split feature sections
   11. Process / steps
   12. Stats & counters
   13. Pricing
   14. FAQ accordion
   15. Tables & factsheet
   16. Forms
   17. CTA band
   18. Footer
   19. Utilities: breadcrumbs, page hero, blog, industries
   20. Floating actions & back-to-top
   21. Scroll-reveal animations
   22. Responsive
   23. Reduced motion & print
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand — sampled from the Omega Telesolutions logo (#e85518 omega glyph).
     The dark scale is a warm charcoal rather than navy so it sits under the
     orange the same way the logo's black wordmark does. */
  --navy-950: #0c0a09;
  --navy-900: #16110f;
  --navy-850: #1e1815;
  --navy-800: #2a211c;
  --navy-700: #3d2f27;

  --brand-700: #b8400f;
  --brand-600: #e85518;
  /* #e85518 is the logo orange, but it only reaches 3.7:1 on white.
     --brand-ink is the same hue darkened for small text (5.6:1) and
     --brand-fill is the lightest orange that still carries white
     button text at 4.7:1. Use those two for anything with a label on it. */
  --brand-ink: #b8400f;
  --brand-fill: #cc4510;
  --brand-500: #f4703a;
  --brand-400: #fb9a6b;
  --brand-100: #ffe1d1;
  --brand-50: #fff5ef;

  --cyan-500: #f59e0b;
  --cyan-400: #fab03c;
  --cyan-300: #fdd18a;

  --violet-500: #c2410c;

  /* Neutrals — warm greys, so nothing reads blue next to the orange */
  --ink-900: #1c1917;
  --ink-800: #292524;
  --ink-700: #44403c;
  --ink-600: #57534e;
  --ink-500: #78716c;
  --ink-400: #a8a29d;
  --ink-300: #d6d3d1;
  --ink-200: #e7e5e4;
  --ink-100: #f5f4f2;
  --ink-50: #faf9f8;
  --white: #ffffff;

  /* Semantic */
  --bg: var(--white);
  --bg-soft: #faf7f5;
  --text: var(--ink-800);
  --heading: var(--navy-900);
  --muted: var(--ink-600);
  --line: rgba(40, 28, 22, 0.10);
  --line-strong: rgba(40, 28, 22, 0.16);

  /* Gradients */
  --grad-brand: linear-gradient(120deg, #b8400f 0%, var(--brand-fill) 55%, #c94a0e 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(232, 85, 24, .12) 0%, rgba(250, 176, 60, .12) 100%);
  --grad-deep: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, #4a2a18 100%);
  --grad-text: linear-gradient(100deg, #fb923c 0%, #fbbf24 55%, #fde68a 100%);

  /* Elevation */
  --sh-xs: 0 1px 2px rgba(28, 20, 16, .06);
  --sh-sm: 0 2px 8px rgba(28, 20, 16, .06), 0 1px 2px rgba(28, 20, 16, .04);
  --sh-md: 0 10px 30px -10px rgba(28, 20, 16, .14), 0 2px 8px rgba(28, 20, 16, .05);
  --sh-lg: 0 24px 60px -18px rgba(28, 20, 16, .22), 0 6px 16px rgba(28, 20, 16, .06);
  --sh-glow: 0 18px 45px -14px rgba(232, 85, 24, .42);

  /* Geometry */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Rhythm */
  --container: 1200px;
  --gutter: 24px;
  --nav-h: 76px;
  --section-y: clamp(64px, 8vw, 116px);

  /* Type */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t: .32s;
  --t-slow: .6s;
}

/* ---------- 2. Reset & base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

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

a { color: var(--brand-ink); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--brand-700); }

h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  color: var(--heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.65rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.45rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--heading); font-weight: 700; }
small { font-size: .84rem; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.15em; }
li { margin-bottom: .5em; }
li::marker { color: var(--brand-500); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: rgba(232, 85, 24, .18); }

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- 3. Layout primitives ---------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 860px; }
.container--wide { max-width: 1340px; }

/* Scroll-reveal offsets elements horizontally (see [data-animate="left|right"])
   before they animate in. Clip the x-axis here so a not-yet-revealed element can
   never produce a page-wide horizontal scrollbar. `clip` rather than `hidden`
   so no scroll container is created and position:sticky keeps working. */
main { overflow-x: clip; }
@supports not (overflow-x: clip) {
  main { overflow-x: hidden; }
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--grad-deep); color: rgba(255, 255, 255, .82); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark strong { color: #fff; }

.section--soft-top { border-top: 1px solid var(--line); }

/* Decorative grid / glow backdrops */
.bg-grid::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(232, 85, 24, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 85, 24, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}
.bg-grid > * { position: relative; z-index: 1; }

.grid { display: grid; gap: clamp(18px, 2.2vw, 30px); }
/* Grid and flex children must be allowed to shrink below their content's
   min-content width, otherwise wide children (tables, long unbroken
   strings) push the whole page sideways. */
.grid > *, .bento > *, .split > *, .stats > *, .local-panel > *, .steps > * { min-width: 0; }
.form__row > *, .stat-strip > div, .footer__top > *, .checks > li, .plan__list > li,
.faq > *, .industry > *, .mega__grid > * { min-width: 0; }
.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)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

/* ---------- 4. Typography helpers --------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}
.section--dark .eyebrow { color: var(--cyan-300); }

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section--dark .grad-text, .hero .grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: var(--muted);
  line-height: 1.68;
}
.section--dark .lead { color: rgba(255, 255, 255, .76); }

.section-head { max-width: 720px; margin-bottom: clamp(34px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p:last-child { margin-bottom: 0; }

/* ---------- 5. Buttons & badges ----------------------------------------- */
.btn {
  --btn-bg: var(--grad-brand);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--sh-glow);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), filter var(--t) var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
  z-index: -1;
}
.btn:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 24px 55px -16px rgba(232, 85, 24, .6); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(-1px); }

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

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--heading);
  border: 1.5px solid var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover {
  color: var(--brand-700);
  border-color: var(--brand-400);
  background: var(--brand-50);
  box-shadow: var(--sh-sm);
}

.btn--light {
  --btn-bg: rgba(255, 255, 255, .1);
  --btn-fg: #fff;
  border: 1.5px solid rgba(255, 255, 255, .28);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.btn--light:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); box-shadow: none; }

.btn--white { --btn-bg: #fff; --btn-fg: var(--navy-900); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); }
.btn--white:hover { color: var(--brand-700); }

.btn--sm { padding: 10px 20px; font-size: .88rem; }
.btn--lg { padding: 17px 34px; font-size: 1.03rem; }
.btn--block { width: 100%; }

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

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: .94rem;
}
.text-link svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease-out); }
.text-link:hover svg { transform: translateX(5px); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 12px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  border: 1px solid rgba(232, 85, 24, .18);
  color: var(--brand-700);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.badge--glass {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
}
.badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
  animation: pulse-dot 2.4s var(--ease) infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .22); }
  50% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

/* ---------- 6. Navbar --------------------------------------------------- */
/* There used to be a dark utility strip above the navbar carrying the city,
   hours, phone and email. It was removed — it added 40px of chrome above
   every page for information nobody reads at that size, and it fought with
   the logo for the top of the screen. The phone moved into the navbar
   (.nav__phone) and everything else lives in the footer and on /contact. */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -12px rgba(28, 20, 16, .16);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--nav-h);
}

/* The wordmark is the client's own logo file, so it is placed as an image and
   never recoloured — only swapped for the knocked-out variant on dark. */
.brand { display: inline-flex; align-items: center; flex: none; min-width: 0; }
.brand:hover { color: inherit; }
.brand__logo {
  width: auto;
  height: 46px;
  flex: none;
  transition: height var(--t) var(--ease);
}
.brand__mark { width: 40px; height: 40px; flex: none; color: var(--brand-600); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: var(--ink-700);
  font-size: .93rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--brand-700); background: var(--brand-50); }
.nav__link[aria-current="page"] { color: var(--brand-700); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 6px; left: 14px; right: 14px;
  height: 2px; border-radius: 2px;
  background: var(--grad-brand);
}
.nav__item { position: relative; }
.nav__item > .nav__link { position: relative; }
.nav__caret { width: 12px; height: 12px; transition: transform var(--t) var(--ease); }
.nav__item:hover .nav__caret, .nav__item.is-open .nav__caret { transform: rotate(180deg); }

.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Phone in the navbar, replacing the removed utility strip. Hidden below the
   desktop breakpoint, where the sticky bottom call bar already carries it. */
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-right: 2px;
  border-radius: var(--r-pill);
  color: var(--heading);
  font-size: .93rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__phone svg { width: 17px; height: 17px; color: var(--brand-600); flex: none; }
.nav__phone:hover { background: var(--brand-50); color: var(--brand-ink); }

/* Mega menu */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 10px);
  width: min(780px, calc(100vw - 40px));
  padding: 22px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out), visibility var(--t);
}
.nav__item:hover .mega,
.nav__item:focus-within .mega,
.nav__item.is-open .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}
.mega__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--r-md);
  color: var(--ink-700);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mega__link:hover { background: var(--bg-soft); transform: translateX(3px); }
.mega__ico {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--grad-brand-soft);
  color: var(--brand-600);
}
.mega__ico svg { width: 18px; height: 18px; }
.mega__t { display: block; font-size: .91rem; font-weight: 700; color: var(--heading); line-height: 1.35; }
.mega__d { display: block; font-size: .79rem; color: var(--ink-500); line-height: 1.45; }
.mega__foot {
  margin-top: 16px; padding-top: 15px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}
.mega__foot span { font-size: .85rem; color: var(--ink-500); }

/* Hamburger */
/* Borderless icon button. The 44px box is the touch target, not a visual
   frame — a bordered white square next to the pill-shaped quote button read
   as a second, competing button. The bars sit in an 18px stack (3 x 2px with
   two 6px gaps), so each outer bar is exactly 8px off centre and folds into a
   clean X on open. */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
  align-content: center;
  gap: 6px;
  flex: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) var(--ease);
}
.nav__toggle:hover, .nav__toggle:focus-visible { background: var(--brand-50); }
.nav__toggle:active { background: var(--brand-100); }
.nav__toggle span {
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--navy-900);
  transition: transform var(--t) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(400px, 88vw);
  z-index: 130;
  background: #fff;
  box-shadow: -20px 0 60px -20px rgba(28, 20, 16, .35);
  transform: translateX(102%);
  transition: transform .42s var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer.is-open { transform: translateX(0); }
/* The head is a fixed flex item and the body scrolls. Deliberately NOT
   position:sticky — a sticky child of an off-canvas panel is still in flow
   and inflates document scrollWidth, creating a horizontal scrollbar. */
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: #fff;
  flex: none;
}
.drawer__close {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff; cursor: pointer;
  color: var(--ink-700);
}
.drawer__close svg { width: 18px; height: 18px; }
.drawer__body {
  padding: 12px var(--gutter) 28px;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list > li { border-bottom: 1px solid var(--line); }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 2px;
  font-size: 1rem; font-weight: 700; color: var(--heading);
}
/* The Services row wraps its anchor in a .drawer__link div (so the accordion
   button can sit beside it). That anchor must inherit the row colour, or it
   renders link-blue and reads as the active page when it is not. */
.drawer__link > a { color: inherit; font: inherit; flex: 1; }
.drawer__link[aria-current="page"],
.drawer__link > a[aria-current="page"] { color: var(--brand-ink); }
.drawer__sub {
  list-style: none; margin: 0; padding: 0 0 12px 12px;
  display: none;
  border-left: 2px solid var(--brand-100);
}
.drawer__sub.is-open { display: block; animation: fade-down .3s var(--ease-out); }
.drawer__sub a {
  display: block; padding: 10px 12px;
  font-size: .92rem; font-weight: 600; color: var(--ink-600);
  border-radius: var(--r-sm);
}
.drawer__sub a:hover { background: var(--bg-soft); color: var(--brand-700); }
.drawer__toggle {
  border: 0; background: transparent; padding: 6px; cursor: pointer;
  color: var(--ink-500); display: grid; place-items: center;
}
.drawer__toggle svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__cta { margin-top: 22px; display: grid; gap: 10px; }
.drawer__meta { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-500); }
.drawer__meta a { display: block; margin-top: 6px; font-weight: 700; }

.scrim {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(12, 10, 9, .5);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t);
}
.scrim.is-open { opacity: 1; visibility: visible; }

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 7. Hero ----------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  color: rgba(255, 255, 255, .8);
  padding-block: clamp(64px, 8vw, 118px) clamp(72px, 9vw, 128px);
  isolation: isolate;
}
.hero h1 { color: #fff; }
.hero strong { color: #fff; }

/* Animated mesh gradient */
.hero__mesh {
  position: absolute; inset: -20%;
  z-index: -2;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(232, 85, 24, .55) 0%, transparent 62%),
    radial-gradient(34% 38% at 82% 18%, rgba(250, 176, 60, .38) 0%, transparent 60%),
    radial-gradient(42% 46% at 70% 82%, rgba(194, 65, 12, .34) 0%, transparent 62%),
    radial-gradient(36% 40% at 26% 88%, rgba(245, 158, 11, .26) 0%, transparent 60%);
  filter: blur(30px) saturate(130%);
  animation: mesh-drift 22s var(--ease) infinite alternate;
}
@keyframes mesh-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.04); }
}

.hero__grid-overlay {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 80%);
}

.hero__noise {
  position: absolute; inset: 0; z-index: -1;
  opacity: .5;
  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='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(34px, 4vw, 60px);
  align-items: center;
}
.hero__copy { max-width: 640px; }
.hero .lead { color: rgba(255, 255, 255, .76); max-width: 560px; }

.hero__proof {
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 12px 30px;
}
.hero__proof-item { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: rgba(255, 255, 255, .72); }
.hero__proof-item svg { width: 17px; height: 17px; color: var(--cyan-300); flex: none; }

/* Hero visual: floating glass channel cards */
.hero__visual { position: relative; min-height: 380px; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .5;
  background: var(--grad-brand);
  animation: float-y 9s var(--ease) infinite alternate;
}
.orb--1 { width: 14px; height: 14px; top: 8%; left: 12%; animation-delay: -1s; }
.orb--2 { width: 9px; height: 9px; top: 62%; left: 4%; animation-delay: -3.5s; }
.orb--3 { width: 18px; height: 18px; top: 26%; right: 6%; animation-delay: -5s; }
@keyframes float-y {
  from { transform: translateY(-12px); }
  to { transform: translateY(14px); }
}

.glass-stack { position: relative; display: grid; gap: 14px; }
.glass-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 20px 45px -22px rgba(0, 0, 0, .6);
  animation: card-in .8s var(--ease-out) backwards;
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease);
}
.glass-card:hover { transform: translateY(-4px) scale(1.015); border-color: rgba(253, 209, 138, .45); }
.glass-card:nth-child(1) { animation-delay: .1s; margin-right: 34px; }
.glass-card:nth-child(2) { animation-delay: .24s; margin-left: 30px; }
.glass-card:nth-child(3) { animation-delay: .38s; margin-right: 20px; }
.glass-card:nth-child(4) { animation-delay: .52s; margin-left: 44px; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.glass-card__ico {
  flex: none; width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--cyan-300);
}
.glass-card__ico svg { width: 21px; height: 21px; }
.glass-card__t { display: block; font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.3; }
.glass-card__d { display: block; font-size: .8rem; color: rgba(255, 255, 255, .62); line-height: 1.4; }
.glass-card__pill {
  margin-left: auto; flex: none;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(250, 176, 60, .14);
  border: 1px solid rgba(250, 176, 60, .3);
  color: var(--cyan-300);
  text-transform: uppercase;
}

/* Inner-page hero */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-deep);
  color: rgba(255, 255, 255, .78);
  padding-block: clamp(48px, 6vw, 84px) clamp(52px, 6.5vw, 90px);
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(46% 60% at 88% 8%, rgba(250, 176, 60, .3) 0%, transparent 60%),
    radial-gradient(42% 54% at 6% 96%, rgba(194, 65, 12, .28) 0%, transparent 60%);
  animation: mesh-drift 26s var(--ease) infinite alternate;
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 10%, transparent 75%);
}
.page-hero h1 { color: #fff; margin-bottom: .5em; }
.page-hero .lead { color: rgba(255, 255, 255, .76); max-width: 660px; }
.page-hero__inner { max-width: 820px; }
.page-hero--split .page-hero__inner { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 4vw, 56px); align-items: center; }

/* ---------- 8. Marquee -------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 20px;
  background: var(--navy-900);
  border-block: 1px solid rgba(255, 255, 255, .08);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 44px;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .96rem; font-weight: 800; letter-spacing: .02em;
  color: rgba(255, 255, 255, .58);
  white-space: nowrap;
  text-transform: uppercase;
}
.marquee__item::after {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-400); opacity: .7;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- 9. Cards & bento -------------------------------------------- */
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.card::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--grad-brand-soft);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(232, 85, 24, .28); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: .5em; }
.card p { color: var(--muted); font-size: .95rem; margin-bottom: 1em; }
.card > :last-child { margin-top: auto; }

.card--dark {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.card--dark p { color: rgba(255, 255, 255, .7); }
.card--dark:hover { border-color: rgba(253, 209, 138, .38); background: rgba(255, 255, 255, .08); }
.card--dark::before { display: none; }

.card--flat { box-shadow: none; }
.card--flat:hover { transform: none; box-shadow: var(--sh-md); }

/* Gradient-border feature card */
.card--edge { border: 0; padding: 0; background: var(--line); }
.card--edge > .card__body {
  background: #fff;
  border-radius: calc(var(--r-lg) - 1px);
  padding: clamp(22px, 2.4vw, 30px);
  height: 100%;
  display: flex; flex-direction: column;
}
.card--edge:hover { background: var(--grad-brand); }

.ico {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--grad-brand-soft);
  border: 1px solid rgba(232, 85, 24, .16);
  color: var(--brand-600);
  margin-bottom: 20px;
  transition: transform var(--t) var(--ease-out), background var(--t) var(--ease), color var(--t) var(--ease);
}
.ico svg { width: 25px; height: 25px; }
.card:hover .ico { transform: scale(1.08) rotate(-4deg); background: var(--grad-brand); color: #fff; border-color: transparent; }
.ico--dark {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
  color: var(--cyan-300);
}
.card--dark:hover .ico--dark { background: rgba(250, 176, 60, .18); color: var(--cyan-300); border-color: rgba(250, 176, 60, .3); }
.ico--sm { width: 42px; height: 42px; border-radius: 11px; margin-bottom: 14px; }
.ico--sm svg { width: 20px; height: 20px; }

.card__num {
  position: absolute; top: 18px; right: 22px;
  font-size: 2.6rem; font-weight: 800;
  color: var(--ink-100);
  line-height: 1;
  letter-spacing: -.04em;
  transition: color var(--t) var(--ease);
  z-index: -1;
}
.card:hover .card__num { color: rgba(232, 85, 24, .16); }

/* Bento */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.bento > * { grid-column: span 2; }
.bento__wide { grid-column: span 4; }
.bento__half { grid-column: span 3; }
.bento__full { grid-column: span 6; }

/* Check list */
.checks { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: .95rem; }
.checks svg {
  flex: none; width: 21px; height: 21px; margin-top: 2px;
  color: var(--brand-600);
}
.section--dark .checks svg, .card--dark .checks svg,
.media-frame--dark .checks svg, .page-hero .checks svg { color: var(--cyan-400); }
.checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }

/* Pill list */
.pills { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.pills li { margin: 0; }
.pills a, .pills span {
  display: inline-block;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line-strong);
  font-size: .86rem; font-weight: 600;
  color: var(--ink-700);
  transition: all var(--t-fast) var(--ease);
}
.pills a:hover { border-color: var(--brand-400); background: var(--brand-50); color: var(--brand-700); transform: translateY(-2px); }
.section--dark .pills a, .section--dark .pills span {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .82);
}

/* ---------- 10. Split feature sections ---------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4.5vw, 68px);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__copy, .split__media { min-width: 0; }
.split__copy > :last-child { margin-bottom: 0; }

.media-frame {
  position: relative;
  border-radius: var(--r-xl);
  padding: 12px;
  background: var(--grad-brand-soft);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
}
.media-frame__inner {
  border-radius: calc(var(--r-xl) - 10px);
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  padding: clamp(20px, 2.4vw, 30px);
}
.media-frame--dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.media-frame--dark .media-frame__inner { background: rgba(12, 10, 9, .5); border-color: rgba(255, 255, 255, .1); }
/* Headings inside a dark frame sit on a dark surface, so they must not
   inherit the default dark-navy heading colour. */
.media-frame--dark h2, .media-frame--dark h3, .media-frame--dark h4,
.page-hero h2, .page-hero h3, .page-hero h4 { color: #fff; }
.media-frame--dark hr { border-color: rgba(255, 255, 255, .14); }

.stat-strip {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
.stat-strip > div { background: #fff; padding: 22px; }
.stat-strip__v { display: block; font-size: 1.7rem; font-weight: 800; color: var(--heading); letter-spacing: -.03em; line-height: 1.1; }
.stat-strip__l { display: block; margin-top: 4px; font-size: .82rem; color: var(--ink-500); font-weight: 600; }

/* Mini chat / SMS mock */
.mock { display: grid; gap: 12px; }
.mock__row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: .87rem;
  line-height: 1.5;
}
.mock__row--out { background: var(--brand-50); border-color: rgba(232, 85, 24, .18); }
.mock__av {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--grad-brand); color: #fff;
  font-size: .72rem; font-weight: 800;
}
.mock__meta { display: block; margin-top: 4px; font-size: .74rem; color: var(--ink-400); font-weight: 600; }

/* ---------- 11. Process / steps ----------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2vw, 26px); grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; }
.steps li { margin: 0; position: relative; padding-top: 30px; }
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-size: .8rem; font-weight: 800; letter-spacing: .1em;
  color: var(--brand-ink);
}
.steps li::after {
  content: "";
  position: absolute; top: 8px; left: 34px; right: -14px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 1.06rem; margin-bottom: .4em; }
.steps p { font-size: .91rem; color: var(--muted); margin: 0; }
.section--dark .steps li::before { color: var(--cyan-300); }
.section--dark .steps p { color: rgba(255, 255, 255, .68); }
.section--dark .steps li::after { background: linear-gradient(90deg, rgba(255, 255, 255, .2), transparent); }

/* ---------- 12. Stats & counters ---------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
}
.stat { text-align: center; }
.stat__v {
  display: block;
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section--dark .stat__v, .hero .stat__v { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; }
.stat__l { display: block; margin-top: 10px; font-size: .88rem; font-weight: 600; color: var(--ink-500); }
.section--dark .stat__l, .hero .stat__l { color: rgba(255, 255, 255, .66); }

.stats--bar {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-md);
  padding: clamp(26px, 3vw, 40px);
}

/* ---------- 13. Pricing ------------------------------------------------- */
.plan-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px; margin-bottom: 34px;
  background: var(--ink-100);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.plan-toggle button {
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 22px; border-radius: var(--r-pill);
  font-family: inherit; font-size: .89rem; font-weight: 700;
  color: var(--ink-600);
  transition: all var(--t) var(--ease);
}
.plan-toggle button[aria-selected="true"] {
  background: #fff; color: var(--brand-700);
  box-shadow: var(--sh-sm);
}

.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.plan--featured {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad-brand) border-box;
  border: 2px solid transparent;
  box-shadow: var(--sh-md);
}
.plan__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: var(--r-pill);
  background: var(--grad-brand); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--sh-glow);
  white-space: nowrap;
}
.plan__name { font-size: 1.14rem; font-weight: 800; color: var(--heading); }
.plan__desc { font-size: .88rem; color: var(--ink-500); min-height: 2.6em; margin-bottom: 18px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.plan__amt { font-size: 2.3rem; font-weight: 800; color: var(--heading); letter-spacing: -.04em; line-height: 1; }
.plan__per { font-size: .86rem; color: var(--ink-500); font-weight: 600; }
.plan__note { font-size: .78rem; color: var(--ink-400); margin-bottom: 20px; }
.plan__list { list-style: none; margin: 20px 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.plan__list li { display: flex; gap: 10px; margin: 0; font-size: .89rem; align-items: flex-start; }
.plan__list svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--brand-600); }
.plan .btn { margin-top: auto; }

/* ---------- 14. FAQ accordion ------------------------------------------- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  overflow: hidden;
}
.faq details[open] { border-color: rgba(232, 85, 24, .3); box-shadow: var(--sh-sm); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  font-size: 1rem; font-weight: 700; color: var(--heading);
  list-style: none;
  transition: color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-700); }
.faq summary::after {
  content: "";
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%;
  background: var(--brand-50) center / 11px 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform var(--t) var(--ease-out), background-color var(--t) var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(135deg);
  background-color: var(--brand-100);
}
.faq__body { padding: 0 20px 20px; color: var(--muted); font-size: .95rem; animation: fade-down .3s var(--ease-out); }
.faq__body > :last-child { margin-bottom: 0; }

/* ---------- 15. Tables & factsheet -------------------------------------- */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 520px; }
caption { text-align: left; padding: 16px 18px; font-weight: 700; color: var(--heading); border-bottom: 1px solid var(--line); }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--bg-soft); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-600); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--t-fast) var(--ease); }
tbody tr:hover { background: var(--brand-50); }
th[scope="row"] { font-weight: 700; color: var(--heading); width: 40%; }

/* ---------- 16. Forms --------------------------------------------------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .86rem; font-weight: 700; color: var(--heading); }
.field label .req { color: #dc2626; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: inherit; font-size: .95rem; color: var(--text);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  appearance: none;
}
.field textarea { min-height: 132px; resize: vertical; }
.field select {
  background: #fff right 14px center / 14px 14px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  padding-right: 40px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(244, 112, 58, .16);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
.field__hint { font-size: .78rem; color: var(--ink-500); }
.field__err { font-size: .79rem; font-weight: 600; color: #dc2626; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #dc2626; }
.field.has-error .field__err { display: block; }

.form__consent { display: flex; align-items: flex-start; gap: 11px; font-size: .85rem; color: var(--muted); }
.form__consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--brand-600); }

.form-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  border: 1px solid rgba(232, 85, 24, .18);
  font-size: .85rem; color: var(--brand-700);
}
.form-note > svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.form-note a { text-decoration: underline; }
.form-status { font-size: .9rem; font-weight: 600; }
.form-status[data-state="ok"] { color: #15803d; }
.form-status[data-state="err"] { color: #dc2626; }

.form-panel {
  padding: clamp(24px, 3vw, 38px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}

/* ---------- 17. CTA band ------------------------------------------------ */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(34px, 5vw, 64px);
  background: var(--grad-deep);
  color: rgba(255, 255, 255, .8);
  isolation: isolate;
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute; inset: -30%; z-index: -1;
  background:
    radial-gradient(40% 50% at 20% 20%, rgba(232, 85, 24, .5) 0%, transparent 60%),
    radial-gradient(40% 50% at 80% 80%, rgba(250, 176, 60, .38) 0%, transparent 60%);
  animation: mesh-drift 20s var(--ease) infinite alternate;
}
.cta h2 { color: #fff; }
.cta .lead { color: rgba(255, 255, 255, .78); max-width: 620px; margin-inline: auto; }
.cta__inner { position: relative; z-index: 1; }

/* ---------- 18. Footer -------------------------------------------------- */
.footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .62);
  font-size: .92rem;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 176, 60, .5), transparent);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 52px);
  padding-block: clamp(48px, 5.5vw, 76px);
}
.footer h4 {
  color: #fff; font-size: .82rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 18px;
}
.footer a { color: rgba(255, 255, 255, .64); }
.footer a:hover { color: var(--cyan-300); }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer__list li { margin: 0; font-size: .9rem; }
.footer__brand .brand__logo { height: 52px; }
.footer__brand p { margin-top: 16px; max-width: 340px; font-size: .9rem; line-height: 1.7; }
.footer__contact { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.footer__contact li { display: flex; align-items: flex-start; gap: 11px; margin: 0; font-size: .9rem; }
.footer__contact svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--cyan-400); }
.footer__socials { display: flex; gap: 10px; margin-top: 22px; }
.footer__socials a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .7);
  transition: all var(--t) var(--ease);
}
.footer__socials a:hover { background: var(--grad-brand); border-color: transparent; color: #fff; transform: translateY(-3px); }
.footer__socials svg { width: 17px; height: 17px; }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  font-size: .84rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }
.footer__pay { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; list-style: none; padding: 0; }
.footer__pay li {
  margin: 0; font-size: .74rem; font-weight: 700;
  padding: 5px 11px; border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .66);
}

/* ---------- 19. Breadcrumbs, blog, industries --------------------------- */
.crumbs { margin-bottom: 20px; font-size: .84rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .55); }
.crumbs li:not(:last-child)::after { content: "/"; color: rgba(255, 255, 255, .3); }
.crumbs a { color: rgba(255, 255, 255, .72); font-weight: 600; }
.crumbs a:hover { color: var(--cyan-300); }
.crumbs [aria-current="page"] { color: #fff; font-weight: 600; }

.post {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.post:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.post__thumb {
  aspect-ratio: 16 / 9;
  background: var(--grad-deep);
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .9);
}
.post__thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 70% at 70% 20%, rgba(250, 176, 60, .4), transparent 62%);
}
.post__thumb svg { width: 46px; height: 46px; position: relative; z-index: 1; opacity: .85; }
.post__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; font-weight: 700; color: var(--brand-ink); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.post__meta time { color: var(--ink-400); }
.post h3 { font-size: 1.1rem; margin-bottom: .5em; }
.post p { font-size: .92rem; color: var(--muted); }
.post > .post__body > :last-child { margin-top: auto; }

.industry {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all var(--t) var(--ease);
}
.industry:hover { border-color: var(--brand-400); box-shadow: var(--sh-md); transform: translateY(-4px); }
.industry__ico {
  flex: none; width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--grad-brand-soft); color: var(--brand-600);
}
.industry__ico svg { width: 20px; height: 20px; }
.industry strong { display: block; font-size: .98rem; }
.industry span { display: block; font-size: .84rem; color: var(--ink-500); line-height: 1.5; }

/* Prose block for long-form SEO copy */
.prose { max-width: 76ch; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.7em; }
.prose > :first-child { margin-top: 0; }
.prose .eyebrow + h2, .prose .eyebrow + h3 { margin-top: 0; }
.prose ul { display: grid; gap: 8px; }

/* Local SEO panel */
.local-panel {
  display: grid; gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.local-panel__box {
  padding: 22px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.local-panel__box h3 { font-size: 1rem; }
.local-panel__box p { font-size: .91rem; color: var(--muted); margin: 0; }

/* Rating badge */
.rating {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
.rating__stars { display: flex; gap: 2px; color: #f59e0b; }
.rating__stars svg { width: 16px; height: 16px; }
.rating__v { font-weight: 800; color: var(--heading); }
.rating__t { font-size: .82rem; color: var(--ink-500); }

/* ---------- 20. Floating actions & back-to-top -------------------------- */
.fab-stack {
  position: fixed; right: 18px; bottom: 22px; z-index: 90;
  display: grid; gap: 12px;
}
.fab {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .4);
  transition: transform var(--t) var(--ease-out), opacity var(--t) var(--ease), visibility var(--t);
}
.fab:hover { transform: translateY(-4px) scale(1.05); color: #fff; }
.fab svg { width: 24px; height: 24px; }
.fab--wa { background: #25d366; }
.fab--wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25d366; opacity: .6;
  animation: ring 2.4s var(--ease) infinite;
  pointer-events: none;
}
.fab--wa { position: relative; }
@keyframes ring {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.55); opacity: 0; }
}
.fab--top {
  background: var(--navy-900);
  opacity: 0; visibility: hidden;
}
.fab--top.is-visible { opacity: 1; visibility: visible; }

/* Mobile sticky call bar */
.callbar {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: 95;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  box-shadow: 0 -8px 26px -14px rgba(28, 20, 16, .3);
}
.callbar__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.callbar .btn { padding: 12px 14px; font-size: .9rem; }

/* Scroll progress */
.progress {
  position: fixed; top: 0; left: 0; z-index: 140;
  height: 3px; width: 0;
  background: var(--grad-brand);
  transition: width .1s linear;
}

/* ---------- 21. Scroll-reveal animations -------------------------------- */
[data-animate] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
[data-animate="left"] { transform: translateX(-30px); }
[data-animate="right"] { transform: translateX(30px); }
[data-animate="zoom"] { transform: scale(.94); }
[data-animate="fade"] { transform: none; }
[data-animate].is-in { opacity: 1; transform: none; }

[data-animate-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
[data-animate-group].is-in > * { opacity: 1; transform: none; }
[data-animate-group].is-in > *:nth-child(1) { transition-delay: .04s; }
[data-animate-group].is-in > *:nth-child(2) { transition-delay: .12s; }
[data-animate-group].is-in > *:nth-child(3) { transition-delay: .2s; }
[data-animate-group].is-in > *:nth-child(4) { transition-delay: .28s; }
[data-animate-group].is-in > *:nth-child(5) { transition-delay: .36s; }
[data-animate-group].is-in > *:nth-child(6) { transition-delay: .44s; }
[data-animate-group].is-in > *:nth-child(7) { transition-delay: .52s; }
[data-animate-group].is-in > *:nth-child(8) { transition-delay: .6s; }
[data-animate-group].is-in > *:nth-child(n+9) { transition-delay: .66s; }

/* ---------- 22. Responsive ---------------------------------------------- */
@media (max-width: 1080px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li::after { display: none; }
  .bento__wide { grid-column: span 3; }
}

/* The desktop menu needs ~1180px to sit beside the brand and the actions
   without overflowing. Below that it collapses to the drawer. */
@media (max-width: 1080px) {
  .nav__menu { display: none; }
  .nav__toggle { display: grid; }
  .nav__inner { justify-content: space-between; gap: 12px; }
  /* Below this the sticky bottom call bar carries the number instead. */
  .nav__phone { display: none; }
}

@media (max-width: 600px) {
  .nav__actions .btn--quote { display: none; }
}

@media (max-width: 980px) {
  :root { --nav-h: 68px; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { min-height: 0; order: 2; max-width: 520px; }
  .glass-card:nth-child(n) { margin-inline: 0; }

  .page-hero--split .page-hero__inner { grid-template-columns: 1fr; }

  .split { grid-template-columns: 1fr; gap: 30px; }
  .split--reverse .split__media { order: 0; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .local-panel { grid-template-columns: 1fr; }
  .mega { width: min(620px, calc(100vw - 32px)); }
}

@media (max-width: 760px) {
  :root { --gutter: 18px; }
  body { font-size: .97rem; }

  .bento { grid-template-columns: 1fr; }
  .bento > *, .bento__wide, .bento__half, .bento__full { grid-column: span 1; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .checks--2 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; }
  th[scope="row"] { width: auto; }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .nav__actions .btn, .callbar .btn, .plan-toggle button, .rating { width: auto; }
  .btn--sm { width: auto; }

  .callbar { display: block; }
  .fab-stack { bottom: 84px; right: 14px; }
  body { padding-bottom: 0; }
  .footer__bottom { padding-bottom: 84px; }

  .cta { border-radius: var(--r-lg); }
  .steps { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .brand__logo { height: 36px; }
  .footer__top { grid-template-columns: 1fr; }
  .plan__amt { font-size: 2rem; }
}

/* Very narrow phones (320px class): shrink the wordmark so it still clears
   the quote button and the hamburger. */
@media (max-width: 400px) {
  .nav .brand__logo,
  .drawer__head .brand__logo { height: 31px; }
}

/* ---------- 23. Reduced motion & print ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-animate], [data-animate-group] > * { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
}

@media print {
  .nav, .drawer, .scrim, .fab-stack, .callbar, .progress, .cta, .marquee { display: none !important; }
  .hero, .page-hero, .section--dark, .footer { background: #fff !important; color: #000 !important; }
  .hero h1, .page-hero h1, .section--dark h2, .footer h4 { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .card, .plan, .post { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
}