/* ==========================================================================
   DRIVE SCALE MEDIA — stylesheet
   Palette sampled from the brand reference: near-black navy canvas with
   electric-blue gradient waves. Tweak everything from :root below.
   ========================================================================== */

/* ---------- 1. THEME TOKENS ---------- */
:root {
  /* Committed dark design — tells the browser to match native scrollbars,
     form controls and the caret to it. */
  color-scheme: dark;

  /* Backgrounds */
  --bg: #05080f;                /* page canvas — deep navy black */
  --bg-alt: #080d19;            /* alternating band */
  --surface: #0d1526;           /* card base */
  --surface-2: #121b2e;         /* raised card */
  --surface-light: #f4f7fd;     /* inverted (white) card */

  /* Accents */
  --blue: #1d6dff;              /* primary electric blue */
  --blue-deep: #0b3fc2;
  --blue-soft: #5b9dff;
  --cyan: #38d2ff;              /* wave highlight */
  --violet: #7c5cff;            /* gradient partner */

  /* Text */
  --text: #e8eefb;
  --danger: #ff8d70;            /* form validation */
  --muted: #93a4c2;
  --muted-dim: #6b7c9c;
  --ink: #0a1120;               /* text on the white card */

  /* Lines + glass */
  --line: rgba(120, 160, 230, 0.14);
  --line-strong: rgba(120, 160, 230, 0.28);
  --glass: rgba(255, 255, 255, 0.035);
  --glass-strong: rgba(255, 255, 255, 0.06);

  /* Gradients */
  --accent: var(--blue);
  --accent-hover: #3a82ff;

  /* Typography — swap these two lines to re-font the whole site */
  --font-head: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Shape + motion */
  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-blue: 0 18px 50px -18px rgba(29, 109, 255, 0.65);

  /* Fluid rhythm */
  --section-y: clamp(68px, 9vw, 130px);
  --container-x: clamp(16px, 4vw, 24px);
}

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

html,
body {
  overflow-x: hidden;           /* hard stop on horizontal scroll */
  max-width: 100%;
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient mesh behind the whole page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 82% -8%, rgba(29, 109, 255, 0.22), transparent 62%),
    radial-gradient(760px 520px at -10% 38%, rgba(124, 92, 255, 0.12), transparent 60%),
    radial-gradient(900px 700px at 55% 108%, rgba(56, 210, 255, 0.09), transparent 62%);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #fff;
}

p { color: var(--muted); }

a { text-decoration: none; color: inherit; transition: color 0.25s var(--ease); }

img, svg, canvas { max-width: 100%; }

.container { padding-inline: var(--container-x); }

/* Bootstrap caps the container at 1320px, which strands a wide empty gutter
   on large monitors. Widening it pulls every section — nav, hero and content
   alike — toward the edges while keeping them all on the same alignment. */
@media (min-width: 1400px) { .container { max-width: min(1560px, 91vw); } }
@media (min-width: 1800px) { .container { max-width: min(1700px, 91vw); } }
@media (min-width: 2200px) { .container { max-width: min(1900px, 88vw); } }

::selection { background: var(--blue); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #04070d; }
::-webkit-scrollbar-thumb { background: #1b2740; border-radius: 10px; border: 2px solid #04070d; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ---------- 3. SHARED UTILITIES ---------- */
.grad-text { color: var(--accent); }

.eyebrow {
  font-family: var(--font-head);
  font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 1rem;
}

.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: clamp(10px, 2vw, 24px); }
.section-alt { background: var(--bg-alt); }

.section-title {
  font-size: clamp(1.85rem, 1.1rem + 3.1vw, 3.4rem);
  margin-bottom: 1.1rem;
  /* Stops a single word being orphaned on the last line of wide headings */
  text-wrap: balance;
}

.section-sub {
  font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.12rem);
  color: var(--muted);
  max-width: 62ch;
  margin-inline: auto;
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 1060;
  background: transparent;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(29, 109, 255, 0.8);
}

/* ---------- 4. BUTTONS ---------- */
.btn {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.93rem;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  padding: 0.62rem 1.45rem;
  border: 1px solid transparent;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }

.btn-xl-custom { padding: 0.88rem 2rem; font-size: 1rem; }
.btn-block-sm { margin-top: auto; align-self: flex-start; }

/* Solid neon-blue CTA with sweep + glow */
.btn-glow {
  position: relative;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 28px -12px rgba(29, 109, 255, 0.85);
}
.btn-glow:hover {
  color: #fff;
  background: var(--accent-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-blue);
}

/* Outlined light CTA */
.btn-outline-soft {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--line-strong);
  color: var(--text);
  backdrop-filter: blur(6px);
}
.btn-outline-soft:hover {
  color: #fff;
  border-color: var(--blue-soft);
  background: rgba(29, 109, 255, 0.14);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -18px rgba(29, 109, 255, 0.9);
}

/* Minimal nav button */
.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover { color: #fff; border-color: var(--blue-soft); background: rgba(29, 109, 255, 0.1); }

/* ---------- 5. NAVBAR ---------- */
.site-nav {
  padding-block: 1.1rem;
  background: transparent;
  transition: background 0.35s var(--ease), padding 0.35s var(--ease),
              box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
  z-index: 1040;
}
.site-nav.scrolled {
  padding-block: 0.62rem;
  background: rgba(6, 10, 20, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 40px -24px rgba(0, 0, 0, 0.95);
}

.navbar-brand { padding: 0; }
/* The old blue tile carried a blue glow; the chrome mark needs a neutral
   shadow instead, or it picks up a coloured halo it was never drawn with. */
.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
  transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}
.brand-mark img { display: block; height: auto; max-width: 100%; }
.navbar-brand:hover .brand-mark {
  transform: scale(1.06);
  filter: drop-shadow(0 6px 16px rgba(91, 157, 255, 0.45));
}
.brand-text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(0.98rem, 0.86rem + 0.45vw, 1.28rem);
  letter-spacing: 0.15em;
  color: #fff;
  white-space: nowrap;
}
.brand-text-accent { color: var(--blue-soft); }

.nav-links { gap: 0.25rem; }
.nav-link {
  position: relative;
  color: var(--muted) !important;
  font-size: 0.93rem;
  font-weight: 500;
  padding: 0.5rem 0.95rem !important;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-link:hover,
.nav-link.active { color: #fff !important; }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* Custom hamburger */
.navbar-toggler {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  display: grid;
  gap: 4px;
}
.navbar-toggler:focus { box-shadow: none; outline: 2px solid var(--blue-soft); outline-offset: 2px; }
.toggler-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5b. NAV DROPDOWNS ----------
   Built on Bootstrap's dropdown so keyboard, outside-click and ARIA are
   handled; only the look is ours. */
.nav-link.dropdown-toggle { display: inline-flex; align-items: center; gap: 0.45rem; }
/* ::after already carries the nav underline, so Bootstrap's caret triangle is
   neutralised here and the real chevron is its own element in the markup. */
.nav-link.dropdown-toggle::after {
  border: none;
  content: '';
}
.nav-caret {
  font-size: 0.66rem;
  opacity: 0.7;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-link:hover .nav-caret,
.nav-link.active .nav-caret { opacity: 1; }
.nav-item.show > .nav-link .nav-caret { transform: rotate(180deg); opacity: 1; }

.nav-menu {
  --bs-dropdown-bg: transparent;
  min-width: 268px;
  padding: 0.5rem;
  margin-top: 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.95);
}
.nav-menu .dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: normal;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav-menu .dropdown-item small {
  color: var(--muted-dim);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
}
.nav-menu .dropdown-item:hover,
.nav-menu .dropdown-item:focus {
  background: rgba(29, 109, 255, 0.14);
  color: #fff;
}
.nav-menu .dropdown-item:hover small { color: var(--blue-soft); }

@media (max-width: 991.98px) {
  .nav-menu {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0 0.4rem;
    margin: 0.2rem 0 0.4rem;
    min-width: 0;
  }
  .nav-menu .dropdown-item { padding-inline: 0.4rem; }
}

/* ---------- 5c. INTERNAL PAGE HERO ---------- */
/* The banner has to hold its shape across very different laptops. Height is
   driven by the viewport rather than by content alone: without this it stayed
   a fixed ~680px, which overflowed a 1366x625 screen and collapsed into a
   thin letterbox on a 2560-wide one (only 42% of the photo visible).
   The bottom rule is an inset shadow, not a border, because an absolutely
   positioned child sizes to the padding box and a border left the image 1px
   short of the hero. */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  /* Fills the viewport exactly. Subtracting a nav height left a dead strip
     below the banner on screens running Windows display scaling, where the
     CSS viewport is shorter than the physical one. The nav overlays the top
     instead, and the content's own top padding clears it. */
  min-height: min(100svh, 1000px);
  padding-block: clamp(92px, 13vh, 150px) clamp(40px, 7vh, 80px);
  box-shadow: inset 0 -1px 0 var(--line);
}
.page-hero > .container { width: 100%; }
/* On very tall monitors the 1000px cap leaves the banner short of the fold;
   tightening the next section keeps that transition from reading as a gap. */
.page-hero + .section { padding-top: clamp(48px, 5vw, 86px); }


.page-hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* At 0.3 opacity behind a 0.74 scrim the photo showed at roughly 8% and read
   as a dark smudge. Brighter image, lighter scrim, and the copy carries its
   own shadow so legibility does not depend on burying the picture. */
.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.68;
  filter: saturate(0.78) contrast(1.06) brightness(0.92);
}
/* Solid scrim rather than a gradient, so the copy stays readable without
   reintroducing a gradient fill. */
.page-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 15, 0.56);
}
/* For sources that are already near-black, where the standard treatment
   leaves the picture reading as texture rather than as an image. */
.page-hero-media.media-dark img {
  opacity: 0.92;
  filter: saturate(0.9) contrast(1.1) brightness(1.18);
}
.page-hero-media.media-dark::after { background: rgba(5, 8, 15, 0.42); }
.page-hero .eyebrow {
  margin-bottom: 0.9rem;
  text-shadow: 0 2px 12px rgba(3, 6, 14, 0.9);
}
.page-title {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
  margin-bottom: 1.1rem;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgba(3, 6, 14, 0.85);
}
.page-lead {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.16rem);
  color: #c3d0e6;
  max-width: 60ch;
  margin-bottom: 0;
  text-shadow: 0 2px 16px rgba(3, 6, 14, 0.95);
}
.page-hero-actions { margin-top: 2.1rem; }

/* Compact stat strip under a page hero */
.hero-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin-top: 2.6rem;
  padding: 0;
  list-style: none;
}
.hero-figures strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  color: var(--blue-soft);
  line-height: 1;
  text-shadow: 0 2px 14px rgba(3, 6, 14, 0.9);
}
.hero-figures span {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9fb0cc;
  text-shadow: 0 2px 12px rgba(3, 6, 14, 0.95);
}

/* Centred page header for pages that carry no banner */
.page-head {
  padding-block: clamp(118px, 15vh, 170px) clamp(28px, 4vw, 48px);
  text-align: center;
}
.page-head .page-title { margin-inline: auto; }
.page-head .page-lead { margin-inline: auto; text-align: center; }
.form-wrap { max-width: 760px; margin-inline: auto; }

/* ---------- 5d. MEDIA ROWS ---------- */
.media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: 0.86;
  filter: saturate(0.7);
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}
.media-frame:hover img { transform: scale(1.04); opacity: 1; }
.media-frame-tall img { aspect-ratio: 3 / 4; }
.media-frame-wide img { aspect-ratio: 16 / 9; }

/* Small label pinned on an image */
.media-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgba(5, 8, 15, 0.86);
  border: 1px solid var(--line-strong);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.media-tag i { color: var(--accent); }

/* ---------- 5e. INTERNAL PAGE BLOCKS ---------- */
.lead-in {
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);
  color: var(--text);
  margin-bottom: 1.2rem;
}

/* Numbered steps stacked down the page */
.step-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.step-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.step-item:hover { border-color: var(--line-strong); transform: translateX(5px); }
.step-item b {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.92rem;
}
.step-item h3 { font-size: 1.08rem; margin-bottom: 0.4rem; }
.step-item p { margin: 0; font-size: 0.94rem; }

/* Two-column checked list */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.9rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Two columns whenever the column can hold them, a single column otherwise.
   The ul is a size container so item text can ease down with its width and
   stay on one line instead of wrapping. */
.check-grid-2 {
  /* max(…, 45%) means a third column can never fit, so it is two or one. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(260px, 45%)), 1fr));
  gap: 0.9rem 1.5rem;
  margin-top: 1.5rem;
  container-type: inline-size;
}
.check-grid.check-grid-2 li { font-size: clamp(0.8rem, 2.1cqi, 0.96rem); }

/* Text-heavy half beside an image. Side by side only from 1200px, where the
   text side takes 7/12 so a two-column list fits, and back to an even split
   once the container is wide enough that it no longer needs the room.
   Below 1200px the two stack, and the image becomes a wide banner so it does
   not tower over the text. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .split-media .media-frame img { aspect-ratio: 2 / 1; }
}
@media (min-width: 1800px) {
  .split-text { width: 50%; }
  .split-media { width: 50%; }
}
.check-grid li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.96rem;
  color: var(--text);
}
.check-grid i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  border-radius: 50%;
  font-size: 0.62rem;
  background: var(--accent);
  color: #fff;
}

/* Spec table (payout models, lead specs) */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.spec-table th,
.spec-table td {
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.spec-table thead th {
  font-family: var(--font-head);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
  border-bottom-color: var(--line-strong);
}
.spec-table td:first-child { color: #fff; font-weight: 600; }
.spec-table td { color: var(--muted); }
.spec-table tbody tr:last-child td { border-bottom: none; }
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* Contact form */
.form-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem);
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 0.5rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg-alt);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-dim); }
.form-note { font-size: 0.84rem; color: var(--muted-dim); margin: 1rem 0 0; }

/* Validation states */
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
  border-color: var(--danger);
  background: rgba(255, 141, 112, 0.07);
}
.field input.is-invalid:focus,
.field select.is-invalid:focus,
.field textarea.is-invalid:focus { border-color: var(--danger); }
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--danger);
}
.field-error i { margin-top: 0.18rem; font-size: 0.72rem; }
.form-status.is-error { border-color: var(--danger); color: var(--danger); }
.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg-alt);
  font-size: 0.9rem;
  color: var(--text);
}

/* Contact detail tiles */
.contact-tile {
  display: flex;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 1rem;
}
.contact-tile i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(29, 109, 255, 0.16);
  border: 1px solid var(--line-strong);
  color: var(--blue-soft);
}
.contact-tile h3 { font-size: 0.98rem; margin-bottom: 0.3rem; }
.contact-tile p, .contact-tile address {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  font-style: normal;
  line-height: 1.7;
}
.contact-tile a { color: var(--blue-soft); }
.contact-tile a:hover { color: #fff; }

/* Result / case-study metric row */
.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.metric-row strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  color: var(--accent);
  line-height: 1.1;
}
.metric-row span { font-size: 0.8rem; color: var(--muted-dim); }

/* ---------- 6. HERO ---------- */
.hero {
  position: relative;
  min-height: clamp(620px, 100svh, 980px);
  display: flex;
  align-items: center;
  padding-block: clamp(120px, 16vh, 180px) clamp(70px, 10vh, 120px);
  overflow: hidden;
  isolation: isolate;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.95;
  /* Keeps the wave off the copy. The compositor applies this once, whereas
     the equivalent per-frame destination-out fill cost a full-canvas pass. */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.28) 40%, #000 72%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.28) 40%, #000 72%);
}

/* Soft colour blooms */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
  /* Promotes the blur to its own layer so the expensive rasterisation is
     cached once instead of being redone on every animation frame. */
  will-change: transform;
}
.hero-glow-a {
  width: min(52vw, 620px);
  aspect-ratio: 1;
  right: -8%;
  top: 2%;
  background: radial-gradient(circle, rgba(29, 109, 255, 0.5), transparent 68%);
  animation: float-a 14s ease-in-out infinite;
}
.hero-glow-b {
  width: min(40vw, 460px);
  aspect-ratio: 1;
  left: -12%;
  bottom: -14%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.3), transparent 68%);
  animation: float-b 18s ease-in-out infinite;
}
@keyframes float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-26px, 30px, 0) scale(1.07); }
}
@keyframes float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(28px, -24px, 0) scale(1.1); }
}

/* Faint tech grid */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(120, 160, 230, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 230, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 78%);
}

.hero-inner { position: relative; z-index: 2; }

.hero-title {
  /* Stepped per breakpoint so "With Real Performance" holds one line
     against the Bootstrap container width at every desktop size. */
  font-size: clamp(2.3rem, 1.3rem + 4.4vw, 3.75rem);
  margin-bottom: 1.4rem;
  text-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}
@media (min-width: 1200px) { .hero-title { font-size: 4.05rem; } }
@media (min-width: 1400px) { .hero-title { font-size: 4.55rem; } }
@media (min-width: 1800px) { .hero-title { font-size: 5.1rem; } }

.hero-sub {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.18rem);
  color: var(--muted);
  max-width: 54ch;
  margin-bottom: 2.2rem;
  /* Keeps the copy crisp where the wave passes behind it */
  text-shadow: 0 2px 14px rgba(3, 6, 14, 0.95);
}

.hero-cta { margin-bottom: 2.6rem; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.9rem;
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted-dim);
}
.hero-proof i { color: var(--blue-soft); margin-right: 0.45rem; }

/* Scroll cue */
.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}
.scroll-hint:hover { opacity: 1; }
.mouse {
  display: block;
  width: 24px;
  height: 38px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  position: relative;
}
.wheel {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--blue-soft);
  animation: wheel 1.9s var(--ease) infinite;
}
@keyframes wheel {
  0% { opacity: 0; transform: translateY(0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(13px); }
}

/* ---------- 7. MARQUEE STRIP ---------- */
.marquee-strip {
  border-block: 1px solid var(--line);
  background: transparent;     /* lets the page gradient run through the band */
  padding-block: clamp(0.75rem, 0.55rem + 0.7vw, 1.15rem);
  position: relative;
}
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.8rem);
  width: max-content;
  animation: scroll-x 46s linear infinite;
  will-change: transform;
}
/* Second band runs the other way, so the pair counter-scrolls */
.marquee-reverse .marquee-track { animation-direction: reverse; animation-duration: 55s; }
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-track span {
  font-family: var(--font-head);
  font-size: clamp(0.95rem, 0.78rem + 0.95vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  line-height: 1.15;
}
/* The duplicate run keeps the item count even, so odd/even stays in step
   across the loop seam and the colours never jump. */
.marquee-track span:nth-of-type(even) { color: var(--blue); }

.marquee-track .dot {
  width: clamp(5px, 0.3vw, 7px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
  flex: 0 0 auto;
  box-shadow: 0 0 14px rgba(29, 109, 255, 0.95);
}
@keyframes scroll-x {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- 8. DUAL AUDIENCE CARDS ---------- */
.audience-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 1rem + 2.2vw, 2.9rem);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.audience-card:hover { transform: translateY(-8px); }

/* Inverted white card — mirrors the brand reference layout */
.audience-light {
  background: var(--surface-light);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
.audience-light .audience-title,
.audience-light .audience-lead { color: var(--ink); }
.audience-light .audience-copy { color: #4a5a76; }
.audience-light .audience-list li { color: #27354d; }
.audience-light:hover { box-shadow: 0 40px 80px -36px rgba(29, 109, 255, 0.55); }

/* Dark glass card */
.audience-dark {
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.audience-dark:hover { border-color: var(--line-strong); box-shadow: 0 40px 80px -40px rgba(29, 109, 255, 0.6); }

.audience-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.4rem;
  position: relative;
}
.tag-dark { background: rgba(10, 17, 32, 0.08); border: 1px solid rgba(10, 17, 32, 0.14); color: var(--ink); }
.tag-blue { background: rgba(29, 109, 255, 0.14); border: 1px solid rgba(29, 109, 255, 0.35); color: var(--blue-soft); }

.audience-title {
  font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.35rem);
  margin-bottom: 0.4rem;
  position: relative;
}
.audience-lead {
  font-family: var(--font-head);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 500;
  color: var(--blue-soft);
  margin-bottom: 0.9rem;
  position: relative;
}
.audience-copy { margin-bottom: 1.5rem; position: relative; }

.audience-list { margin-bottom: 2rem; position: relative; display: grid; gap: 0.75rem; }
.audience-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--text);
}
.audience-list i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.65rem;
  background: var(--accent);
  color: #fff;
}

/* ---------- 9. STATS ---------- */
.stats-shell {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(1.8rem, 1.2rem + 2vw, 3rem) clamp(1rem, 0.6rem + 2vw, 2.4rem);
  overflow: hidden;
}

.stat { position: relative; }
.stat-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin-bottom: 0.55rem;
}
.stat-prefix, .stat-suffix { font-size: 0.72em; }
.stat-label {
  font-size: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin: 0;
}

/* ---------- 10. GLASS CARDS (verticals) ---------- */
.glass-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
/* Cursor-tracking spotlight (coords set in script.js) */
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(29, 109, 255, 0.16), transparent 62%);
  pointer-events: none;
}
.glass-card:hover {
  transform: translateY(-10px);
  border-color: var(--line-strong);
  background: var(--glass-strong);
  box-shadow: 0 30px 60px -34px rgba(29, 109, 255, 0.75);
}
.glass-card:hover::before { opacity: 1; }

.card-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin-bottom: 1.25rem;
  font-size: 1.3rem;
  color: var(--blue-soft);
  background: rgba(29, 109, 255, 0.16);
  border: 1px solid var(--line-strong);
  transition: transform 0.45s var(--ease), color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.glass-card:hover .card-icon,
.feature-card:hover .feature-icon {
  transform: translateY(-4px) rotate(-7deg);
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(29, 109, 255, 0.95);
}

.card-title {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  margin-bottom: 0.7rem;
  position: relative;
}
.card-copy { font-size: 0.95rem; margin-bottom: 1.2rem; position: relative; }

.card-link {
  margin-top: auto;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-soft);
  position: relative;
}
.card-link i { transition: transform 0.35s var(--ease); margin-left: 0.3rem; }
.glass-card:hover .card-link i { transform: translateX(6px); }

/* ---------- 11. WHY CHOOSE US ---------- */
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.feature-card:hover {
  transform: translateY(-10px);
  border-color: var(--line-strong);
  box-shadow: 0 34px 64px -36px rgba(29, 109, 255, 0.7);
}


.feature-index {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.045);
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin-bottom: 1.25rem;
  font-size: 1.3rem;
  color: var(--blue-soft);
  background: rgba(29, 109, 255, 0.16);
  border: 1px solid var(--line-strong);
  transition: transform 0.45s var(--ease), color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.feature-list { margin: 0; display: grid; gap: 0.55rem; position: relative; }
.feature-list li { font-size: 0.88rem; color: var(--muted); display: flex; gap: 0.6rem; align-items: flex-start; }
.feature-list i { color: var(--blue); font-size: 0.8rem; margin-top: 0.36rem; }

/* ---------- 12. PROCESS ---------- */
.process-row { position: relative; }
.process-step {
  position: relative;
  padding: 1.8rem 1.4rem 1.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(10, 16, 30, 0.45);
  height: 100%;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.process-step:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  background: rgba(18, 27, 46, 0.7);
}
.process-num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  background: var(--accent);
  margin-bottom: 1rem;
}
.process-title { font-size: 1.15rem; margin-bottom: 0.6rem; }
.process-step .card-copy { margin-bottom: 0; }

/* Connector line between steps on desktop */
@media (min-width: 992px) {
  .process-row::before {
    content: '';
    position: absolute;
    top: 52px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
    z-index: 0;
  }
  .process-step { z-index: 1; }
}

/* ---------- 13. TESTIMONIALS ---------- */
.quote-card {
  position: relative;          /* anchors the hover border beam */
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.quote-card:hover {
  transform: translateY(-8px);
  border-color: var(--line-strong);
  box-shadow: 0 30px 60px -36px rgba(29, 109, 255, 0.7);
}
.stars { color: #ffc547; font-size: 0.82rem; letter-spacing: 0.15em; margin-bottom: 1rem; }
.quote-text {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 1.6rem;
  flex: 1 1 auto;
}
.quote-author { display: flex; align-items: center; gap: 0.85rem; }
.quote-author strong { display: block; font-size: 0.92rem; color: #fff; font-family: var(--font-head); }
.quote-author small { color: var(--muted-dim); font-size: 0.78rem; }
.avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
}

/* ---------- 14. CTA BAND ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  padding: clamp(2rem, 1.3rem + 3vw, 4rem);
}

.cta-title { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.9rem); margin-bottom: 0.9rem; text-wrap: balance; }
.cta-copy { color: var(--muted); max-width: 54ch; }

/* ---------- 15. FOOTER ---------- */
.site-footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: #04070e;
  padding-top: clamp(50px, 6vw, 86px);
}
.footer-brand .brand-text { font-size: clamp(1rem, 0.9rem + 0.35vw, 1.18rem); }
.footer-copy { font-size: 0.92rem; max-width: 44ch; margin-bottom: 1.2rem; }
.footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--blue-soft);
  word-break: break-word;
}
.footer-mail:hover { color: #fff; }

.footer-head {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.25rem;
}
.footer-list { display: grid; gap: 0.7rem; }
.footer-list a {
  font-size: 0.93rem;
  color: var(--muted);
  position: relative;
  display: inline-block;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer-list a:hover { color: #fff; transform: translateX(5px); }
.footer-link-accent { color: var(--blue-soft) !important; font-weight: 500; }
.footer-link-accent:hover { color: #fff !important; }

/* No icon indent, so the address starts on the same line as every other
   column's first item. */
.footer-address {
  font-style: normal;
  font-size: 0.93rem;
  color: var(--muted);
  line-height: 1.95;
  margin: 0;
}

/* Headings share a baseline across all columns regardless of content */
.footer-col .footer-head { min-height: 1.2em; }

.footer-bottom {
  margin-top: clamp(36px, 5vw, 60px);
  padding-block: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  font-size: 0.86rem;
  color: var(--muted-dim);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-legal a { color: var(--muted-dim); font-size: 0.86rem; }
.footer-legal a:hover { color: var(--blue-soft); }

.social { display: flex; gap: 0.6rem; }
.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  transition: transform 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.social a:hover {
  color: #fff;
  transform: translateY(-4px);
  border-color: transparent;
  background: var(--accent);
}

/* ---------- 15b. SLIDER ----------
   Native overflow scrolling with snap points, so touch, trackpad and the
   arrow buttons all drive the same mechanism. */
.slider { position: relative; }
.slider-track {
  display: flex;
  gap: clamp(1rem, 0.7rem + 0.8vw, 1.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 6px;
}
.slider-track::-webkit-scrollbar { display: none; }

.slider-slide {
  flex: 0 0 calc((100% - 2 * clamp(1rem, 0.7rem + 0.8vw, 1.5rem)) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 991.98px) {
  .slider-slide { flex-basis: calc((100% - clamp(1rem, 0.7rem + 0.8vw, 1.5rem)) / 2); }
}
@media (max-width: 575.98px) {
  .slider-slide { flex-basis: 100%; }
}

.slider-nav { display: flex; gap: 0.6rem; }
.slider-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.slider-btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
}
.slider-btn:disabled { opacity: 0.3; cursor: default; }
.slider-btn:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.slider-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--line-strong);
  transition: width 0.35s var(--ease), background 0.35s var(--ease);
}
.slider-dot.is-active { width: 26px; background: var(--accent); }
.slider-dot:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }

/* ---------- 16. BACK TO TOP ---------- */
.to-top {
  position: fixed;
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 1030;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 14px 30px -14px rgba(29, 109, 255, 0.95);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { transform: translateY(-4px); }

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width: 991.98px) {
  .navbar-collapse {
    margin-top: 1rem;
    padding: 1.1rem;
    border-radius: var(--radius-sm);
    background: rgba(8, 13, 25, 0.97);
    border: 1px solid var(--line);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.95);
  }
  .nav-link { padding: 0.65rem 0.4rem !important; }
  .nav-link::after { left: 0.4rem; right: auto; width: 26px; }
  .nav-actions .btn { width: 100%; text-align: center; }
  .hero { min-height: auto; }
  .scroll-hint { display: none; }
  .audience-card:hover,
  .glass-card:hover,
  .feature-card:hover,
  .quote-card:hover,
  .process-step:hover { transform: none; }
}

@media (max-width: 575.98px) {
  :root { --radius: 16px; }
  .hero-proof { gap: 0.5rem 1.2rem; font-size: 0.82rem; }
  .btn-xl-custom { padding: 0.78rem 1.5rem; font-size: 0.94rem; }
  .hero-cta .btn { flex: 1 1 100%; text-align: center; }
  .btn-block-sm { width: 100%; text-align: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  .stat-num { font-size: clamp(1.7rem, 1.2rem + 3vw, 2.4rem); }
  .feature-index { font-size: 2rem; }
}

/* ---------- 17a. LEGAL / CONTENT PAGES ---------- */
/* Compact enough that the table of contents and the first section are both
   on screen without scrolling. */
.legal-hero {
  padding-block: clamp(96px, 11vh, 124px) clamp(22px, 2.4vw, 34px);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.legal-main { padding-block: clamp(30px, 3.4vw, 48px) var(--section-y); }
.legal-title {
  font-size: clamp(1.8rem, 1.15rem + 2.6vw, 2.9rem);
  margin-bottom: 0.75rem;
  text-wrap: balance;
}
.legal-lead {
  font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.08rem);
  color: var(--muted);
  max-width: 62ch;
  margin-bottom: 0;
}
.legal-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.84rem;
  color: var(--muted-dim);
}
.legal-meta i { color: var(--accent); }

/* Sticky table of contents */
.legal-toc {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 1.4rem;
}
.legal-toc h2 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 1rem;
}
.legal-toc ol {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--muted-dim);
  font-size: 0.74rem;
  padding-top: 0.15rem;
  flex: 0 0 auto;
}
.legal-toc a:hover { color: var(--accent); }

/* Body copy */
.legal-body { max-width: 72ch; }
.legal-body section { scroll-margin-top: 110px; margin-bottom: clamp(2.2rem, 1.5rem + 2vw, 3.4rem); }
.legal-body h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  margin-bottom: 1rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--accent);
}
.legal-body h3 {
  font-size: 1.02rem;
  color: var(--text);
  margin: 1.6rem 0 0.7rem;
}
.legal-body p { margin-bottom: 1rem; }
.legal-body ul { margin: 0 0 1.1rem; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.legal-body ul li {
  display: flex;
  gap: 0.7rem;
  color: var(--muted);
  font-size: 0.96rem;
}
.legal-body ul li::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
}
.legal-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--blue-soft); }
.legal-body strong { color: #fff; font-weight: 600; }

/* Callout for the bits people need to act on */
.legal-note {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.2rem;
}
.legal-note p:last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
  .legal-toc { position: static; margin-bottom: 2.5rem; }
  .legal-body { max-width: none; }
}

/* ---------- 17b. BETWEEN-SECTION FLOURISHES ---------- */

/* Hairline divider with a light pulse running along it */
.beam-divider {
  position: relative;
  height: 1px;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, var(--line-strong) 25%, var(--line-strong) 75%, transparent);
}
.beam-divider::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 26%;
  background: linear-gradient(90deg, transparent, var(--blue-soft), var(--cyan), transparent);
  transform: translateX(-100%);
  animation: beam-run 4.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes beam-run {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(420%); }
}

/* Conic border that sweeps around a card on hover. The angle needs @property
   to interpolate; without it the border simply stays put, which is fine. */
@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.glass-card::after,
.quote-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--beam-angle),
    transparent 0deg, var(--blue-soft) 45deg, var(--cyan) 70deg, transparent 110deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.glass-card:hover::after,
.quote-card:hover::after {
  opacity: 1;
  animation: beam-spin 2.8s linear infinite;
}
@keyframes beam-spin {
  to { --beam-angle: 360deg; }
}

/* ---------- 18. SCROLL CHOREOGRAPHY ---------- */

/* Children of a [data-stagger] group flow in one after another.
   Per-item delays are assigned in script.js. */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
[data-stagger="x"] > * { transform: translateX(-22px); }
[data-stagger].is-in > * { opacity: 1; transform: none; }

/* Icons pop as their card lands. Keyframes rather than a transition, so the
   hover transform still wins once the animation has finished. */
.aos-on [data-aos]:not(.aos-animate) .card-icon,
.aos-on [data-aos]:not(.aos-animate) .feature-icon,
.aos-on [data-aos]:not(.aos-animate) .process-num {
  opacity: 0;
  transform: scale(0.6) rotate(-14deg);
}
.aos-on [data-aos].aos-animate .card-icon,
.aos-on [data-aos].aos-animate .feature-icon,
.aos-on [data-aos].aos-animate .process-num {
  animation: icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s backwards;
}
@keyframes icon-pop {
  from { opacity: 0; transform: scale(0.6) rotate(-14deg); }
  to { opacity: 1; transform: none; }
}

/* The process connector draws itself left to right */
@media (min-width: 992px) {
  .process-row::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.2s var(--ease) 0.25s;
  }
  .process-row.is-in::before { transform: scaleX(1); }
}

/* Ambient colour that drifts against the scroll */
.section-orb {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
.orb-a { width: min(32vw, 440px); left: 1%; top: 6%;
  background: radial-gradient(circle, rgba(29, 109, 255, 0.22), transparent 68%); }
.orb-b { width: min(28vw, 390px); right: 3%; bottom: 4%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.2), transparent 68%); }
.orb-c { width: min(26vw, 360px); right: 6%; top: 10%;
  background: radial-gradient(circle, rgba(56, 210, 255, 0.16), transparent 68%); }

/* Short laptop screens: shed vertical weight so the whole banner is visible
   without scrolling. The home hero matters most here — at 1280x600 its last
   row sat below the fold, which meant its own reveal never triggered and
   `overflow: hidden` clipped it out of sight entirely. */
@media (min-width: 992px) and (max-height: 720px) {
  .page-hero { padding-block: 84px 34px; }
  .page-hero .page-title { font-size: clamp(1.7rem, 1rem + 2.1vw, 2.5rem); }
  .page-hero .page-lead { font-size: 0.98rem; }
  .page-hero-actions { margin-top: 1.5rem; }
  .hero-figures { margin-top: 1.7rem; gap: 1.8rem; }
  .hero-figures strong { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); }

  .hero { min-height: 0; padding-block: 92px 46px; }
  .hero-title { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem); }
  .hero-sub { font-size: 1rem; margin-bottom: 1.6rem; }
  .hero-cta { margin-bottom: 1.8rem; }
  .scroll-hint { display: none; }
}

/* ---------- 19. MOTION PREFERENCES ---------- */
@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;
  }
  .marquee-track { animation: none; }
}