/* ============================================================
   GOFLOW V2 — DESIGN SYSTEM
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --blue:        var(--gf-blue);
  --blue-dark:   var(--gf-blue-dark);
  --blue-light:  var(--gf-blue-light);
  --blue-dim:    var(--gf-blue-dim);
  --ink:         var(--gf-ink);
  --ink-mid:     var(--gf-ink-mid);
  --ink-soft:    var(--gf-ink-soft);

  /* Neutrals */
  --text:        var(--gf-text);
  --text-2:      var(--gf-text-2);
  --text-3:      var(--gf-text-3);
  --border:      var(--gf-border);
  --border-2:    var(--gf-border-2);
  --surface:     var(--gf-surface);
  --surface-2:   var(--gf-surface-2);
  --white:       var(--gf-white);

  /* Status */
  --green:       var(--gf-green);
  --green-dim:   var(--gf-green-dim);
  --amber:       var(--gf-amber);
  --amber-dim:   var(--gf-amber-dim);
  --red:         var(--gf-red);
  --red-dim:     var(--gf-red-dim);

  /* Gradients */
  --grad:        linear-gradient(135deg, var(--gf-blue) 0%, #0EA5E9 100%);
  --grad-dark:   linear-gradient(135deg, #0A1628 0%, #0B3D6B 100%);
  --grad-soft:   linear-gradient(135deg, #E0F2FE 0%, #F0F9FF 100%);

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:      0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-blue: 0 8px 32px rgba(11,138,209,0.25);

  /* Radii */
  --r-sm:  8px;
  --r:     12px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Type */
  --font: var(--gf-font);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button { font-family: var(--font); cursor: pointer; }
a { text-decoration: none; }
ul { list-style: none; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.container--narrow { max-width: 800px; margin: 0 auto; padding: 0 var(--sp-6); }

/* Gradient text utility */
.g-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section spacing */
.section { padding: var(--sp-24) 0; }
.section--sm { padding: var(--sp-16) 0; }
.section--lg { padding: 120px 0; }
/* Homepage sections were leaving nearly 200px of empty vertical space each.
   Keep the shared section rhythm, but make the landing page more compact. */
.home-page .section,
.home-page .section--lg { padding-block: 56px; }

/* Section label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 14px;
  border-radius: 100px;
  background: var(--blue-dim);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.eyebrow--dark {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
}

/* Section heading block */
.section-head { margin-bottom: var(--sp-12); }
.section-head--center { text-align: center; }
.section-head--center .section-head__sub { margin: 0 auto; }

.section-head__h { font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: var(--sp-3); }
.section-head__sub { font-size: 17px; color: var(--text-2); max-width: 520px; line-height: 1.7; }
.section-head__h--light { color: var(--white); }
.section-head__sub--light { color: rgba(255,255,255,0.75); }

/* Divider */
.divider { height: 1px; background: var(--border); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px 28px;
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border: none;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--grad);
  color: var(--white);
  box-shadow: var(--shadow-blue);
}
.btn--primary:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 12px 40px rgba(11,138,209,0.35); }

.btn--white {
  background: var(--white);
  color: var(--blue-dark);
  box-shadow: var(--shadow-md);
}
.btn--white:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }

.btn--ghost {
  background: rgba(255,255,255,0.10);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.6); }

.btn--outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--border-2);
}
.btn--outline:hover { border-color: var(--blue); background: var(--blue-dim); }

.btn--lg { padding: 16px 36px; font-size: 16px; border-radius: var(--r-md); }
.btn--sm { padding: 9px 18px; font-size: 13px; border-radius: var(--r-sm); }
.btn--full { width: 100%; }

/* ============================================================
   NAVBAR
   ============================================================ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  transition: background 0.3s, box-shadow 0.3s;
}
.nav.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,0.06);
}
.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  height: 68px;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  transition: color 0.3s;
}
.nav.scrolled .nav__logo { color: var(--text); }
.nav__logo img { width: 32px; height: 32px; object-fit: contain; }

/* Desktop links */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.nav__links > a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  transition: color 0.2s;
}
.nav__links > a:hover { color: var(--white); }
.nav.scrolled .nav__links > a { color: var(--text-2); }
.nav.scrolled .nav__links > a:hover { color: var(--blue); }

/* Desktop track bar */
.nav__track {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: all 0.3s;
}
.nav.scrolled .nav__track { background: var(--surface); border-color: var(--border); }
.nav__track input {
  padding: 8px 14px;
  background: transparent;
  border: none;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  color: var(--white);
  width: 170px;
}
.nav__track input::placeholder { color: rgba(255,255,255,0.45); }
.nav.scrolled .nav__track input { color: var(--text); }
.nav.scrolled .nav__track input::placeholder { color: var(--text-3); }
.nav__track-btn {
  padding: 8px 14px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-left: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  transition: background 0.2s;
}
.nav__track-btn:hover { background: rgba(255,255,255,0.18); }
.nav.scrolled .nav__track-btn { border-left-color: var(--border); color: var(--blue); background: transparent; }
.nav.scrolled .nav__track-btn:hover { background: var(--blue-dim); }

/* Desktop CTA */
.nav__cta {
  padding: 9px 20px;
  background: var(--white);
  color: var(--blue-dark);
  border: none;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s;
  flex-shrink: 0;
}
.nav__cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.nav.scrolled .nav__cta { background: var(--grad); color: var(--white); }

/* Desktop nav links */
.nav__desktop-links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex: 1;
  justify-content: center;
}
.nav__desktop-links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  transition: color 0.2s;
  white-space: nowrap;
}
.nav__desktop-links a:hover { color: var(--white); }
.nav.scrolled .nav__desktop-links a { color: var(--text-2); }
.nav.scrolled .nav__desktop-links a:hover { color: var(--blue); }

/* Highlight the Get a Quote link */
.nav__desktop-links a[href="/quote"] {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}
.nav.scrolled .nav__desktop-links a[href="/quote"] {
  background: var(--blue-dim);
  border-color: rgba(11,138,209,0.3);
  color: var(--blue-dark);
}

/* Desktop actions wrapper */
.nav__desktop-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

/* The navbar carried three buttons and an open search field, which left
   nothing looking like the primary action. One button now does, and these
   two sit beside it as plain text. */
.nav__quiet {
  background: none;
  border: 0;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.nav__quiet:hover { color: var(--white); background: rgba(255,255,255,0.10); }
.nav.scrolled .nav__quiet { color: var(--text-2); }
.nav.scrolled .nav__quiet:hover { color: var(--blue); background: var(--blue-dim); }

/* Search is an icon until somebody wants it. */
.nav__icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: var(--r-sm);
  color: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.nav__icon-btn:hover { background: rgba(255,255,255,0.18); }
.nav.scrolled .nav__icon-btn { background: var(--surface); border-color: var(--border); color: var(--text-2); }
.nav.scrolled .nav__icon-btn:hover { color: var(--blue); border-color: var(--blue); }

.nav__track {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  border-width: 0;
  padding: 0;
  pointer-events: none;
  transition: max-width .22s ease, opacity .18s ease;
}
.nav__track.is-open {
  max-width: 300px;
  opacity: 1;
  border-width: 1px;
  pointer-events: auto;
}

/* Hamburger toggle */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-sm);
  margin-left: auto;
  flex-direction: column;
  gap: 5px;
  transition: background 0.2s, border-color 0.2s;
}
.nav.scrolled .nav__toggle {
  background: var(--surface);
  border-color: var(--border);
}
.nav__toggle-bar {
  display: block;
  width: 18px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: opacity 0.2s;
}
.nav.scrolled .nav__toggle-bar { background: var(--text); }

@media (max-width: 1024px) { .nav__track { display: none; } }

/* ---- Mobile drawer (lives outside <nav>) ---- */
.nav__links {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #0A1628;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  z-index: 1100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  visibility: hidden;
  pointer-events: none;
  display: flex;
}
.nav__links.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: all;
}

.nav__drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1099;
  background: rgba(0,0,0,0.5);
}
.nav__drawer-backdrop.open { display: block; }

/* Drawer header */
.nav__drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  height: 68px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.nav__drawer-logo { color: var(--white) !important; font-size: 17px; }
.nav__drawer-close {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.nav__drawer-close:hover { background: rgba(255,255,255,0.14); color: var(--white); }

/* Action buttons */
.nav__drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex-shrink: 0;
}
.nav__drawer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px var(--sp-3);
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  border: none;
  transition: opacity 0.2s;
  /* These were <button>s wired to panels, and are now <a>s going to real
     pages, because the panels only ever existed on the homepage. The global
     `a { text-decoration: none }` covers it today; this keeps the component
     correct on its own rather than by accident. */
  text-decoration: none;
}
.nav__drawer-btn--primary  { background: var(--grad); color: var(--white); box-shadow: var(--shadow-blue); }
.nav__drawer-btn--secondary { background: rgba(255,255,255,0.08); color: var(--white); border: 1px solid rgba(255,255,255,0.15); }

/* Separator */
.nav__drawer-sep {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 0 var(--sp-5);
  flex-shrink: 0;
}

/* Nav list */
.nav__drawer-nav {
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) 0;
  flex: 1;
}
.nav__drawer-link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 16px var(--sp-5);
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s;
}
.nav__drawer-link:last-child { border-bottom: none; }
.nav__drawer-link:active { background: rgba(255,255,255,0.06); }
.nav__drawer-link-icon { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.nav__drawer-link span:nth-child(2) { flex: 1; }
.nav__drawer-link-arrow { color: rgba(255,255,255,0.25); flex-shrink: 0; }

/* WhatsApp footer */
.nav__drawer-footer {
  padding: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.nav__drawer-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 14px;
  background: rgba(37,211,102,0.1);
  border: 1px solid rgba(37,211,102,0.25);
  border-radius: var(--r);
  color: #4ADE80;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s;
}
.nav__drawer-wa:active { background: rgba(37,211,102,0.18); }

/* On desktop hide the whole drawer and backdrop */
@media (min-width: 769px) {
  .nav__links,
  .nav__drawer-backdrop { display: none !important; }
  .nav__toggle           { display: none !important; }
  .nav__desktop-actions  { display: flex !important; }
  .nav__desktop-links    { display: flex !important; }
}

/* On mobile hide desktop actions and links, show toggle */
@media (max-width: 768px) {
  .nav__desktop-actions { display: none !important; }
  .nav__desktop-links   { display: none !important; }
  .nav__toggle          { display: flex; z-index: 901; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  /* Back to exactly what this was: full height, and 68px of padding to clear
     the nav. The nav is position: fixed with no background and white links, so
     the hero has to start at the top of the document and sit behind it. Giving
     the body the clearance instead - which is what this briefly did - moved the
     dark gradient down to y=68 and left the nav's white text on the white page
     background. Unusable, on every page with a dark hero.
     .hero__body below adds the air, so the <h1> lands 148px down as before. */
  min-height: 100vh;
  background: var(--grad-dark);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: var(--gf-nav-h, 68px);
}

/* Subtle grid texture */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Glow orbs */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.hero__orb--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(11,138,209,0.35) 0%, transparent 70%);
  top: -100px; left: -100px;
}
.hero__orb--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(14,165,233,0.2) 0%, transparent 70%);
  bottom: 0; right: 10%;
}

.hero__body {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  /* --gf-hero-air, the same figure the other pages use, so the gap between the
     nav and the headline is one value across the site. The homepage does not
     offer a fixed position the way the others do: this is flex: 1 with
     align-items: center, so the headline is centred in whatever height the
     hero has. What the other pages copy is the air, not the absolute line. */
  padding: var(--gf-hero-air, 80px) 0 var(--sp-16);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

/* Left col */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 100px;
  color: #6EE7B7;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-5);
}
.hero__badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
  50%      { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

.hero__h1 {
  font-size: clamp(38px, 4.5vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: var(--sp-5);
}

.hero__sub {
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  max-width: 460px;
  margin-bottom: var(--sp-8);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-10);
}

.btn--xl { padding: 18px 40px; font-size: 17px; border-radius: var(--r-md); font-weight: 700; }

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero__trust-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.hero__trust-lbl {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.hero__trust-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.12);
}

/* Right col — tracking visual */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__dash {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  backdrop-filter: blur(12px);
  width: 100%;
  max-width: 440px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.4);
}

/* Dash header bar */
.dash__topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dash__dots { display: flex; gap: 6px; }
.dash__dot { width: 10px; height: 10px; border-radius: 50%; }
.dash__dot--r { background: #FF5F57; }
.dash__dot--y { background: #FFBD2E; }
.dash__dot--g { background: #28CA41; }
.dash__title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  margin-left: var(--sp-2);
  letter-spacing: 0.04em;
}
.dash__live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
}
.dash__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 1.5s infinite;
}

/* Tracking hero block */
.dash__track-hero {
  margin-bottom: var(--sp-4);
}
.dash__track-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r);
}
.dash__track-code {
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 3px;
}
.dash__track-route {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

/* Step timeline */
.dash__track-steps { display: flex; flex-direction: column; gap: 0; padding: 0 var(--sp-2); }
.dash__step {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  position: relative;
}
.dash__step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 9px; top: 28px;
  width: 2px;
  height: calc(100% - 8px);
  background: rgba(255,255,255,0.08);
}
.dash__step--done::after { background: rgba(11,138,209,0.4); }
.dash__step-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  position: relative; z-index: 1;
}
.dash__step--done .dash__step-dot {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}
.dash__step--active .dash__step-dot {
  background: transparent;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.15);
}
.dash__step-title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); }
.dash__step-time  { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 1px; }

/* WhatsApp preview */
.dash__wa-preview {
  background: rgba(37,211,102,0.07);
  border: 1px solid rgba(37,211,102,0.2);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
}
.dash__wa-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.dash__wa-icon { font-size: 13px; }
.dash__wa-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(37,211,102,0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dash__wa-bubble {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

/* Badge reuse */
.dash__order-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
  flex-shrink: 0;
}
.dash__order-badge--transit { background: rgba(11,138,209,0.25); color: #7DD3FC; }
.dash__order-badge--done    { background: rgba(16,185,129,0.2);  color: #6EE7B7; }
.dash__order-badge--pending { background: rgba(245,158,11,0.2);  color: #FCD34D; }

/* Floating chips */
.hero__chip {
  position: absolute;
  background: var(--white);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  z-index: 3;
  border: 1px solid var(--border);
  max-width: 220px;
  line-height: 1.4;
  animation: chip-float 4s ease-in-out infinite;
}
.hero__chip--1 { top: 12px; right: -16px; animation-delay: 0s; }
.hero__chip--2 { bottom: -48px; left: -16px; animation-delay: 2s; font-style: italic; }
.hero__chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse-dot 2s infinite;
}
.hero__chip-icon { font-size: 14px; flex-shrink: 0; }
@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Ticker */
.hero__ticker {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 10px 0;
}
.hero__ticker-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.hero__ticker-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.ticker-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse-dot 1.5s infinite;
}
#tickerText {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
  transition: opacity 0.4s;
}

/* ============================================================
   HERO PROOF STRIP
   ============================================================ */

.hero-proof {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-5) 0;
}
.hero-proof__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.hero-proof__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  min-width: 240px;
}
.hero-proof__item p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  font-style: italic;
}
.hero-proof__item p span {
  font-style: normal;
  font-weight: 600;
  color: var(--text-3);
  font-size: 12px;
  display: block;
  margin-top: 2px;
}
.hero-proof__sep {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .hero-proof__sep { display: none; }
  .hero-proof__item:last-child { display: none; }
}

/* ============================================================
   SOCIAL PROOF BAR
   ============================================================ */

.proof-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-6) 0;
}
.proof-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.proof-bar__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}
.proof-bar__sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}
.proof-bar__logos {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.proof-bar__track {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  width: max-content;
  animation: scroll-logos 20s linear infinite;
}
.proof-bar__track:hover { animation-play-state: paused; }
@keyframes scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.proof-bar__logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  opacity: 0.65;
  filter: grayscale(30%);
  transition: opacity 0.2s, filter 0.2s;
  flex-shrink: 0;
}
.proof-bar__logo:hover { opacity: 1; filter: none; }
/* Each logo links to that partner's site. The anchor is the flex item now, so
   it carries the sizing the image used to. */
.proof-bar__link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
.proof-bar__link:hover .proof-bar__logo { opacity: 1; filter: none; }
.proof-bar__link:focus-visible {
  outline: 2px solid var(--brand, var(--gf-blue));
  outline-offset: 4px;
  border-radius: 4px;
}

/* Stats strip */
.stats-strip {
  background: var(--grad-dark);
  padding: var(--sp-12) 0;
}
.stats-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stats-strip__item {
  background: rgba(255,255,255,0.03);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}
.stats-strip__num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-2);
}
.stats-strip__num span { color: var(--blue-light); }
.stats-strip__lbl {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

@media (max-width: 768px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .hero__visual { display: flex; }
  .hero__dash {
    max-width: 100%;
  }
  .hero__chip { display: none; }
  .hero__h1 { font-size: 36px; }
  .hero__sub { font-size: 16px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .stats-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .proof-bar__sep { display: none; }
}

/* ============================================================
   PROBLEMS SECTION
   ============================================================ */

.problems { background: var(--surface); }

.problems__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.problem-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.problem-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); }

.problem-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--red-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: var(--sp-4);
}
.problem-card__icon--amber { background: var(--amber-dim); }
.problem-card__icon--blue  { background: var(--blue-dim); }

.problem-card__h { font-size: 16px; font-weight: 700; margin-bottom: var(--sp-2); }
.problem-card__p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* Arrow to solution */
.problems__arrow {
  text-align: center;
  padding: var(--sp-8) 0 0;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.problems__arrow::before,
.problems__arrow::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--border);
}

/* ============================================================
   SOLUTION / PRODUCT OVERVIEW
   ============================================================ */

.solution { background: var(--white); }

.solution__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.solution__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.solution__item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.solution__item-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--blue-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.solution__item-h { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.solution__item-p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* Right: visual panel */
.solution__panel {
  background: var(--grad-dark);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.solution__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Tracking timeline inside panel */
.track-timeline { position: relative; z-index: 1; }
.track-timeline__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.track-timeline__title { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9); }
.track-timeline__badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(11,138,209,0.3);
  color: #7DD3FC;
}

.timeline-steps { display: flex; flex-direction: column; gap: 0; }
.timeline-step {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  position: relative;
}
.timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 11px; top: 36px;
  width: 2px;
  height: calc(100% - 12px);
  background: rgba(255,255,255,0.1);
}
.timeline-step.done::after { background: rgba(11,138,209,0.5); }

.timeline-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.timeline-step.done .timeline-dot {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}
.timeline-step.active .timeline-dot {
  background: transparent;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.2);
}

.timeline-info__title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9); }
.timeline-info__time  { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }

/* ============================================================
   FEATURES GRID
   ============================================================ */

.features { background: var(--surface); }

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.feature-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.2s;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-card:hover::after { opacity: 1; }

.feature-card--featured {
  background: var(--grad-dark);
  border-color: transparent;
  color: var(--white);
}
.feature-card--featured::after { opacity: 1; }

.feature-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--blue-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: var(--sp-5);
}
.feature-card--featured .feature-card__icon { background: rgba(255,255,255,0.1); }

.feature-card__h { font-size: 16px; font-weight: 700; margin-bottom: var(--sp-2); }
.feature-card--featured .feature-card__h { color: var(--white); }

.feature-card__p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.feature-card--featured .feature-card__p { color: rgba(255,255,255,0.65); }

.feature-card__tag {
  display: inline-block;
  margin-top: var(--sp-4);
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  background: var(--blue-dim);
  color: var(--blue-dark);
}
.feature-card--featured .feature-card__tag { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }

/* ============================================================
   DASHBOARD SHOWCASE
   ============================================================ */

.showcase { background: var(--grad-dark); overflow: hidden; }

.showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--sp-16);
  align-items: center;
}

.showcase__tabs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.showcase__tab {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 0.2s;
}
.showcase__tab:hover { background: rgba(255,255,255,0.07); }
.showcase__tab.active {
  background: rgba(11,138,209,0.15);
  border-color: rgba(11,138,209,0.4);
}
.showcase__tab-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.showcase__tab-h { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 3px; }
.showcase__tab-p { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.5; }

/* Screen mockup */
.showcase__screen {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5);
}
.screen__bar {
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.screen__dots { display: flex; gap: 5px; }
.screen__dot { width: 9px; height: 9px; border-radius: 50%; }
.screen__dot--r { background: rgba(255,95,87,0.6); }
.screen__dot--y { background: rgba(255,189,46,0.6); }
.screen__dot--g { background: rgba(40,202,65,0.6); }
.screen__url {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-sm);
  padding: 4px 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-family: monospace;
}

.screen__content { padding: var(--sp-5); }

/* Admin dashboard inside screen */
.admin-dash__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.admin-dash__title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); }
.admin-dash__actions { display: flex; gap: var(--sp-2); }
.admin-dash__btn {
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: var(--font);
}
.admin-dash__btn--primary { background: var(--blue); color: white; }
.admin-dash__btn--ghost { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); }

.admin-dash__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.admin-kpi {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
}
.admin-kpi__val { font-size: 20px; font-weight: 800; color: var(--white); line-height: 1; }
.admin-kpi__lbl { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.05em; }
.admin-kpi__delta { font-size: 10px; font-weight: 600; margin-top: 3px; }
.admin-kpi__delta--up   { color: var(--green); }
.admin-kpi__delta--down { color: var(--red); }

.admin-dash__table { width: 100%; border-collapse: collapse; }
.admin-dash__table th {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.admin-dash__table td {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  padding: var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.admin-dash__table tr:last-child td { border-bottom: none; }
.tbl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
}
.tbl-badge--transit { background: rgba(11,138,209,0.25); color: #7DD3FC; }
.tbl-badge--done    { background: rgba(16,185,129,0.2);  color: #6EE7B7; }
.tbl-badge--pending { background: rgba(245,158,11,0.2);  color: #FCD34D; }

@media (max-width: 1024px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .showcase__grid { grid-template-columns: 1fr; }
  .showcase__screen { display: none; }
  .admin-dash__kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .problems__grid { grid-template-columns: 1fr; }
  .solution__grid { grid-template-columns: 1fr; }
  .features__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WORKFLOW / HOW IT WORKS
   ============================================================ */

.workflow { background: var(--white); }

.workflow__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  position: relative;
  margin-top: var(--sp-12);
}
.workflow__steps::before {
  content: '';
  position: absolute;
  top: 28px; left: calc(16.66% + 28px); right: calc(16.66% + 28px);
  height: 2px;
  background: linear-gradient(to right, var(--blue-dim), var(--blue), var(--blue-dim));
}

.workflow-step {
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all 0.2s;
  position: relative;
}
.workflow-step:hover { box-shadow: var(--shadow-md); border-color: var(--blue-light); transform: translateY(-2px); }

.workflow-step__num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  font-size: 20px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-5);
  box-shadow: var(--shadow-blue);
  position: relative; z-index: 1;
}
.workflow-step__h { font-size: 17px; font-weight: 700; margin-bottom: var(--sp-2); }
.workflow-step__p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

.workflow__cta { text-align: center; margin-top: var(--sp-12); }

/* ============================================================
   METRICS / RESULTS
   ============================================================ */

.metrics { background: var(--surface); }

.metrics__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.metric-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  transition: box-shadow 0.2s;
}
.metric-card:hover { box-shadow: var(--shadow-md); }

.metric-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: var(--blue-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.metric-card__val {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: var(--sp-1);
}
.metric-card__val span { color: var(--blue); }
.metric-card__lbl { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: var(--sp-1); }
.metric-card__sub { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testimonials { background: var(--white); }

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.testi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  transition: all 0.2s;
}
.testi-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); transform: translateY(-2px); }

.testi-card--featured {
  background: var(--grad-dark);
  border-color: transparent;
}

.testi-stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; }
.testi-card--featured .testi-stars { color: #FCD34D; }

.testi-quote {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.7;
  font-style: italic;
  flex: 1;
}
.testi-card--featured .testi-quote { color: rgba(255,255,255,0.75); }

.testi-author { display: flex; align-items: center; gap: var(--sp-3); }
.testi-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.testi-card--featured .testi-avatar { background: rgba(255,255,255,0.15); }
.testi-name { font-size: 14px; font-weight: 700; color: var(--text); }
.testi-card--featured .testi-name { color: var(--white); }
.testi-role { font-size: 12px; color: var(--text-3); }
.testi-card--featured .testi-role { color: rgba(255,255,255,0.45); }

/* ============================================================
   INTEGRATIONS
   ============================================================ */

.integrations { background: var(--surface); }

.integrations__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

.integration-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  text-align: center;
  transition: all 0.2s;
}
.integration-card:hover { box-shadow: var(--shadow-md); border-color: var(--blue-light); transform: translateY(-2px); }

.integration-card__icon { font-size: 32px; margin-bottom: var(--sp-3); }
.integration-card__name { font-size: 14px; font-weight: 700; margin-bottom: var(--sp-1); }
.integration-card__status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}
.integration-card__status--live    { background: var(--green-dim); color: #065F46; }
.integration-card__status--soon    { background: var(--amber-dim); color: #92400E; }
.integration-card__status--contact { background: var(--blue-dim);  color: var(--blue-dark); }

/* ============================================================
   FINAL CTA
   ============================================================ */

.final-cta { background: var(--grad-dark); overflow: hidden; position: relative; }
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}
.final-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.final-cta__h {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-5);
}
.final-cta__sub {
  font-size: 18px;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin-bottom: var(--sp-10);
}
.final-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}
.final-cta__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.final-cta__trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: #060E1A;
  padding: var(--sp-16) 0 var(--sp-8);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-12);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: var(--sp-4);
}
.footer__logo img { width: 30px; height: 30px; object-fit: contain; }
.footer__tagline { font-size: 14px; color: rgba(255,255,255,0.4); line-height: 1.7; max-width: 260px; margin-bottom: var(--sp-5); }

.footer__social { display: flex; gap: var(--sp-3); }
.footer__social-link {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
  color: rgba(255,255,255,0.6);
}
.footer__social-link:hover { background: rgba(255,255,255,0.12); color: var(--white); }

.footer__col-h {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-5);
}
.footer__links { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__links a {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}
.footer__links a:hover { color: var(--white); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.footer__copy { font-size: 13px; color: rgba(255,255,255,0.3); }
.footer__flag { font-size: 13px; color: rgba(255,255,255,0.3); }

/* ============================================================
   SIDE PANELS
   ============================================================ */

.panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 520px;
  background: var(--white);
  z-index: 2000;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 60px rgba(0,0,0,0.2);
}
.panel.open { transform: translateX(0); }

.panel__backdrop {
  position: fixed; inset: 0;
  background: rgba(6,14,26,0.6);
  z-index: 1999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.38s;
  backdrop-filter: blur(4px);
}
.panel__backdrop.open { opacity: 1; pointer-events: all; }

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel__title { font-size: 17px; font-weight: 700; }
.panel__close {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface);
  border: none;
  font-size: 18px;
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.panel__close:hover { background: var(--red-dim); color: var(--red); }

.panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE HERO — the header on a task page, not a landing hero
   ══════════════════════════════════════════════════════════════════════
   Written out three times inline: send.html, bulk.html, ecommerce.html. All
   three at `padding: 120px 0 64px`, which with the tag, the heading and the
   sub-line came to roughly a full phone screen of introduction before the
   form the person came to fill in.

   These pages are tasks. The heading says where you are and then gets out of
   the way. Landing pages that want a big entrance use .hero or .svc-hero.

   The top padding was 40px, which is less than the 68px nav is tall, so the
   heading on /send, /bulk and /ecommerce rendered behind the nav. That was a
   bug, not a decision. It is now --gf-hero-air, the same figure the homepage
   uses, so a <h1> sits 148px down the page whichever one you land on. The
   compactness argument still stands for the *bottom* padding and for how much
   copy sits under the heading; if these ever want to go tight again, give
   .page-hero its own token rather than reaching for a number.
   ══════════════════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--grad-dark);
  /* Nav clearance plus air, in one expression. The nav has no background of
     its own and its links are white, so this hero has to reach the top of the
     document and sit behind the bar - which is why it cannot be given room by
     padding the body instead. This was 40px, less than the nav is tall, so the
     heading rendered behind it. */
  padding: calc(var(--gf-nav-h, 68px) + var(--gf-hero-air, 80px)) 0 28px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 100px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 12px;
}
.page-hero__h {
  font-size: clamp(23px, 3.2vw, 32px); font-weight: 800;
  color: var(--white); letter-spacing: -.02em; line-height: 1.2;
  margin-bottom: 8px;
}
.page-hero__sub { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.62); max-width: 60ch; }

@media (max-width: 640px) {
  .page-hero { padding: calc(var(--gf-nav-h, 68px) + var(--gf-hero-air-sm, 48px)) 0 22px; }
  .page-hero__tag { margin-bottom: 10px; }
  .page-hero__sub { font-size: 14.5px; }
}

/* ══════════════════════════════════════════════════════════════════════
   FIELDS — one definition, every form on the site
   ══════════════════════════════════════════════════════════════════════
   This component was written out four times: once inline in send.html, once
   inline in bulk.html, once here scoped to .panel, and a fourth time as
   .u-field in system.css. They disagreed on label weight, border width, focus
   colour and — the one that mattered — font size.

   16px is not a taste decision. Below 16px, iOS Safari zooms the entire page
   the moment a field is focused, and the customer has to pinch back out to
   see the rest of the form. Every one of these forms was set at 14px, on a
   site where nearly all the traffic is a phone.

   Matches .u-field in system.css deliberately, so /send and /bulk feel like
   /quote and /request-a-quote. Anything that needs to differ should say so
   with a modifier, not a second copy.
   ══════════════════════════════════════════════════════════════════════ */
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-field:last-child { margin-bottom: 0; }
.form-field label { font-size: 14px; font-weight: 500; color: var(--text-2); line-height: 1.4; }

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 48px;              /* nothing tappable under 48px */
  padding: 12px 16px;
  font-size: 16px;               /* see the note above before lowering this */
  font-family: var(--font);
  line-height: 1.4;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}
.form-field textarea { min-height: 92px; padding-top: 12px; }

/* appearance:none above strips a checkbox's native box along with the tick
   drawn inside it, so accent-color has nothing left to paint - the control
   still toggles, it just never shows it. Native rendering is what makes a
   checked box look checked. */
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  flex-shrink: 0;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--surface-2);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-3); }

.form-field input:disabled,
.form-field select:disabled { background: var(--surface); color: var(--text-3); cursor: not-allowed; }

/* The small grey line under a field. Named two ways across the site. */
.form-field .hint,
.form-field__hint { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* A select needs its own arrow once appearance is stripped. */
.form-field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}

.panel__section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.panel__grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.panel__sub { font-size: 14px; color: var(--text-2); line-height: 1.6; }

.panel__input-row { display: flex; gap: var(--sp-3); }
.panel__input-row input {
  flex: 1;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s;
}
.panel__input-row input:focus { border-color: var(--blue); }

.panel__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-10) 0;
  gap: var(--sp-3);
}
.panel__center-icon { font-size: 48px; }
.panel__center h3 { font-size: 20px; font-weight: 700; }
.panel__center p { font-size: 14px; color: var(--text-2); }

.panel__spinner {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Track result */
.track-result { display: flex; flex-direction: column; }
.track-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-2);
}
.track-result__lbl { font-size: 11px; color: var(--text-3); font-weight: 500; margin-bottom: 3px; }
.track-result__code { font-size: 22px; font-weight: 800; }
.track-result__badge {
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
}
.badge--pending   { background: var(--amber-dim); color: #92400E; }
.badge--transit   { background: var(--blue-dim);  color: var(--blue-dark); }
.badge--delivered { background: var(--green-dim); color: #065F46; }
.badge--overdue   { background: var(--red-dim);   color: #991B1B; }

.track-result__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  gap: var(--sp-4);
}
.track-result__row:last-child { border-bottom: none; }
.track-result__row span:first-child { color: var(--text-2); flex-shrink: 0; }
.track-result__row span:last-child  { font-weight: 600; text-align: right; }

.panel__info-cards { display: flex; flex-direction: column; gap: var(--sp-3); }
.panel__info-card {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.panel__info-card span { font-size: 18px; flex-shrink: 0; }
.panel__info-card a { color: var(--blue); font-weight: 600; }

/* Pricing grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Stagger children */
.stagger > *:nth-child(1) { transition-delay: 0.05s; }
.stagger > *:nth-child(2) { transition-delay: 0.10s; }
.stagger > *:nth-child(3) { transition-delay: 0.15s; }
.stagger > *:nth-child(4) { transition-delay: 0.20s; }
.stagger > *:nth-child(5) { transition-delay: 0.25s; }
.stagger > *:nth-child(6) { transition-delay: 0.30s; }

/* ============================================================
   RESPONSIVE CATCH-ALL
   ============================================================ */

@media (max-width: 1024px) {
  .integrations__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

@media (max-width: 768px) {
  .section { padding: var(--sp-16) 0; }
  .section--lg { padding: var(--sp-16) 0; }
  .home-page .section,
  .home-page .section--lg { padding-block: 40px; }
  .workflow__steps { grid-template-columns: 1fr; }
  .workflow__steps::before { display: none; }
  .metrics__grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .integrations__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .final-cta__actions { flex-direction: column; align-items: stretch; }
  .final-cta__actions .btn { justify-content: center; }
  .panel { max-width: 100%; }
  .panel__grid-2 { grid-template-columns: 1fr; }
  .panel__input-row { flex-direction: column; }
}

@media (max-width: 480px) {
  .stats-strip__grid { grid-template-columns: 1fr 1fr; }
  .integrations__grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   NAV DROPDOWNS
   ============================================================ */

.nav__dropdown {
  position: relative;
}

.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 0;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav__dropdown-trigger:hover { color: var(--white); }
.nav.scrolled .nav__dropdown-trigger { color: var(--text-2); }
.nav.scrolled .nav__dropdown-trigger:hover { color: var(--blue); }
.nav__dropdown-trigger svg { transition: transform 0.2s; }
.nav__dropdown.open .nav__dropdown-trigger svg { transform: rotate(180deg); }

.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 16px 48px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 950;
}
.nav__dropdown.open .nav__dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Arrow pointer */
.nav__dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 6px;
  background: var(--white);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.nav__dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s;
}
.nav__dropdown-item:hover { background: var(--surface); }
.nav__dropdown-item strong { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.nav__dropdown-item small  { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }

.nav__dropdown-icon {
  font-size: 18px;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.nav__dropdown-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

/* A heading above a run of items in a menu, so "these three are all sending a
   parcel" is said once rather than implied three times. It is a label, not a
   third level of menu: a submenu that opens on hover means nothing to a finger
   and is a nuisance with a mouse. */
.nav__group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 10px 12px 5px;
}
.nav__group-label:first-child { padding-top: 4px; }

/* Secondary quote CTA button in nav */
.nav__cta-quote {
  padding: 9px 18px;
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__cta-quote:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); }
/* Same pill as the quote button, but it is a link rather than a panel opener. */
.nav__cta-account { text-decoration: none; display: inline-flex; align-items: center; }
.nav.scrolled .nav__cta-quote { color: var(--blue-dark); border-color: var(--blue); background: var(--blue-dim); }
.nav.scrolled .nav__cta-quote:hover { background: var(--blue); color: var(--white); }

/* Mobile drawer group labels */
.nav__drawer-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  padding: 16px 20px 6px;
}

/* ============================================================
   QUOTE PANEL — STEP TABS
   ============================================================ */

.qp-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.qp-tab {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}

.qp-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.qp-tab.done {
  color: var(--green);
  border-bottom-color: transparent;
}

.qp-tab.done::before {
  content: '✓ ';
}

/* Ensure quote panel displays above other panels */
#quotePanel { z-index: 2010; }

/* ============================================================
   MOBILE DRAWER — ACCORDION DROPDOWNS
   ============================================================ */

.nav__drawer-accordion {
  display: flex;
  flex-direction: column;
}

.nav__drawer-accordion-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 16px var(--sp-5);
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: var(--font);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}
.nav__drawer-accordion-trigger:active { background: rgba(255,255,255,0.06); }
.nav__drawer-accordion-trigger-icon { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.nav__drawer-accordion-trigger span:nth-child(2) { flex: 1; }
.nav__drawer-accordion-chevron {
  color: rgba(255,255,255,0.25);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.nav__drawer-accordion.open .nav__drawer-accordion-chevron { transform: rotate(180deg); }

.nav__drawer-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1);
  background: rgba(0,0,0,0.25);
}
.nav__drawer-accordion.open .nav__drawer-accordion-body {
  max-height: 400px;
}

.nav__drawer-accordion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px 13px 52px;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s, color 0.15s;
}
.nav__drawer-accordion-item:last-child { border-bottom: none; }
.nav__drawer-accordion-item:active { background: rgba(255,255,255,0.06); color: var(--white); }
.nav__drawer-accordion-item-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.nav__drawer-accordion-item strong { display: block; font-size: 14px; font-weight: 600; color: inherit; line-height: 1.2; }
.nav__drawer-accordion-item small  { display: block; font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; }

@media (max-width: 768px) {
  .nav__drawer-actions {
    grid-template-columns: 1fr;
  }
  .nav__dropdown-menu { display: none !important; }
}


/* Privacy and Terms live in the footer bottom bar. Google will not publish an
   OAuth consent screen unless both are reachable, and people look for them
   here. */
.footer__legal { display: flex; gap: var(--sp-4, 16px); }
.footer__legal a {
  color: var(--text-2, rgba(255,255,255,.7));
  text-decoration: none;
  font-size: 13px;
}
.footer__legal a:hover { color: var(--white, #fff); text-decoration: underline; }

/* Photos on the order panel. Same behaviour as /send, different ids, one
   shared implementation in gf-order.js. */
.op-photo-pick { display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; border:1.5px dashed var(--border); border-radius:10px;
  background:var(--surface); color:var(--text-2); font-size:14px; cursor:pointer; }
.op-photo-pick:hover { border-color:var(--blue); color:var(--blue); }
.op-photo-pick.has { border-style:solid; border-color:var(--green,#059669); color:var(--text); }
.op-photo-pick input { display:none; }
.op-photo-strip { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.op-photo-strip figure { position:relative; margin:0; }
.op-photo-strip img { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border); display:block; }
.op-photo-strip button { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%;
  border:none; background:var(--text); color:#fff; font-size:13px; line-height:1; cursor:pointer; }

/* ══════════════════════════════════════════════════════════════════════
   PICK A SERVICE
   Three doors under the hero: Freight · Moving · Parcel.

   The homepage used to open on parcel messaging, which answered the wrong
   question for the two highest-value audiences on the site. A contractor
   pricing a 10-tonne load and a family moving out of Lekki both need a
   different page from a shop owner posting a 4kg order, and none of them
   should have to read the other two first.

   Deliberately plain — no animation, no gradient. It sits directly under a
   busy hero, and its whole job is to be the calmest, most obvious thing on
   the screen.
   ══════════════════════════════════════════════════════════════════════ */
.svc-pick { padding: var(--sp-16) 0 var(--sp-12); background: var(--white); }

.svc-pick__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}

.svc-pick__card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.svc-pick__card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.svc-pick__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  font-size: 26px;
  background: var(--blue-dim);
  border-radius: var(--r);
  margin-bottom: var(--sp-5);
}

.svc-pick__h { font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--sp-2); }
.svc-pick__p { font-size: 15px; line-height: 1.65; color: var(--text-2); margin-bottom: var(--sp-5); }

/* Pushed to the bottom so the three arrows line up however uneven the copy
   above them is. */
.svc-pick__go {
  margin-top: auto;
  font-size: 15px; font-weight: 600; color: var(--blue);
  display: inline-flex; align-items: center; gap: 6px;
}
.svc-pick__card:hover .svc-pick__go span { transform: translateX(3px); }
.svc-pick__go span { transition: transform .18s; }

@media (max-width: 940px) {
  .svc-pick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .svc-pick { padding: var(--sp-10) 0 var(--sp-8); }
  /* Icon beside the text on a phone, not above it: full-height cards
     would push the rest of the page below two screens of scrolling before
     anything else is seen. Grid rather than flex-row so the icon sits
     alongside all three lines instead of becoming a fourth column. */
  .svc-pick__card {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-5);
  }
  .svc-pick__icon { width: 44px; height: 44px; font-size: 22px; margin-bottom: 0;
                    grid-column: 1; grid-row: 1 / span 3; }
  .svc-pick__h, .svc-pick__p, .svc-pick__go { grid-column: 2; }
  .svc-pick__h { font-size: 18px; }
  .svc-pick__p { font-size: 14.5px; margin-bottom: var(--sp-2); }
  .svc-pick__go { margin-top: 0; font-size: 14px; }
}

@media (max-width: 600px) {
  .svc-pick__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-pick__card, .svc-pick__go span { transition: none; }
  .svc-pick__card:hover { transform: none; }
}

/* ── Footer facts: coverage, and the registered-entity line ────────────
   A corporate buyer looks for a registration number and a real address
   before handing a stranger a truckload of cargo, and its absence loses the
   deal without anyone ever saying so. Same content as the gff__legal block
   in chrome.css — the homepage keeps its own footer, so it keeps its own
   copy. */
.footer__facts {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.62);
}
.footer__facts strong { color: rgba(255,255,255,0.9); font-weight: 600; }
.footer__facts-cov {
  background: rgba(255,255,255,0.06);
  border-radius: var(--r-sm);
  padding: 8px 13px;
  color: rgba(255,255,255,0.82);
}

/* The sticky WhatsApp button was here. It is now the composer in
   chrome.css, which the homepage loads for exactly that reason, so
   there is one of it rather than two. */
}