/* ============================================================
   GIGAFLEET — Global Stylesheet
   Assembled from section pieces: hero, metrics, platform,
   ops-field, intelligence, sb1383, architecture,
   comparison, customers, demo-cta.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ──────────────────────────────────────────────────────────── */
:root {
  --navy:             #0F172A;
  --slate:            #1E293B;
  --slate-mid:        #243044;
  --slate-dark:       #263348;
  --teal:             #0D9488;
  --teal-light:       #14B8A6;
  --teal-glow:        rgba(13, 148, 136, 0.18);
  --teal-dim:         rgba(13, 148, 136, 0.12);
  --teal-border:      rgba(13, 148, 136, 0.18);
  --teal-icon-border: rgba(20, 184, 166, 0.25);
  --white:            #FFFFFF;
  --off-white:        #F8FAFC;
  --text-dark:        #0F172A;
  --text-muted:       #64748B;
  --text-light:       #E2E8F0;
  --text-dimmed:      #94A3B8;
  --border-dark:      #334155;
  --border-mid:       #2D3F55;
  --border-light:     #E2E8F0;
  --green:            #16A34A;
  --green-glow:       rgba(22, 163, 74, 0.22);
  --amber:            #D97706;
  --indigo:           #6366F1;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 9999px;

  /* Platform section theme tokens (light default) */
  --bg:          var(--off-white);
  --card-bg:     var(--white);
  --border:      var(--border-light);
  --heading:     var(--text-dark);
  --body-color:  var(--text-muted);
  --link:        var(--teal);
  --img-placeholder: #CBD5E1;
  --chip-mobile-text: var(--indigo);
  --chip-tablet-text: var(--amber);
  --chip-portal-text: var(--green);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:               var(--navy);
    --card-bg:          var(--slate);
    --border:           var(--border-dark);
    --heading:          var(--white);
    --body-color:       #94A3B8;
    --link:             var(--teal-light);
    --img-placeholder:  #334155;
    --chip-mobile-text: #818CF8;
    --chip-tablet-text: #FCD34D;
    --chip-portal-text: #4ADE80;
  }
}
:root[data-theme="light"] {
  --bg:               var(--off-white);
  --card-bg:          var(--white);
  --border:           var(--border-light);
  --heading:          var(--text-dark);
  --body-color:       var(--text-muted);
  --link:             var(--teal);
  --img-placeholder:  #CBD5E1;
  --chip-mobile-text: var(--indigo);
  --chip-tablet-text: var(--amber);
  --chip-portal-text: var(--green);
}
:root[data-theme="dark"] {
  --bg:               var(--navy);
  --card-bg:          var(--slate);
  --border:           var(--border-dark);
  --heading:          var(--white);
  --body-color:       #94A3B8;
  --link:             var(--teal-light);
  --img-placeholder:  #334155;
  --chip-mobile-text: #818CF8;
  --chip-tablet-text: #FCD34D;
  --chip-portal-text: #4ADE80;
}

/* ────────────────────────────────────────────────────────────
   2. RESET
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img { max-width: 100%; display: block; }
ul  { list-style: none; }
a   { color: inherit; }

/* ────────────────────────────────────────────────────────────
   3. BASE
   ──────────────────────────────────────────────────────────── */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body {
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
}
body.mobile-menu-open { overflow: hidden; }

/* ────────────────────────────────────────────────────────────
   4. LAYOUT UTILITIES
   ──────────────────────────────────────────────────────────── */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* ────────────────────────────────────────────────────────────
   5. SECTION SCAFFOLD
   ──────────────────────────────────────────────────────────── */
.section { display: block; }

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}

/* ────────────────────────────────────────────────────────────
   6. SITE NAV
   ──────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.site-nav.is-scrolled {
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.35);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 64px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo__mark { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo__wordmark {
  font-size: 17px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.015em;
  line-height: 1;
}
.nav-logo__wordmark strong { font-weight: 800; }
.nav-links { flex: 1; }
.nav-links ul {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
}
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(226,232,240,0.72);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-sm);
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link:focus-visible { color: var(--white); background: rgba(255,255,255,0.07); }
.nav-link--login { color: rgba(226,232,240,0.48); }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--teal); color: var(--white); }
.btn--primary:hover {
  background: var(--teal-light);
  box-shadow: 0 2px 14px rgba(13,148,136,0.38);
}
.btn--primary:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 3px; }
.btn--sm { font-size: 13.5px; padding: 0.44rem 1rem; letter-spacing: -0.005em; }
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px; height: 36px;
  padding: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-hamburger__bar {
  display: block;
  width: 18px; height: 1.5px;
  background: rgba(226,232,240,0.8);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(15,23,42,0.98);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 0.75rem 1.5rem 1.5rem;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; }
.mobile-nav-link {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: rgba(226,232,240,0.78);
  text-decoration: none;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.13s ease;
}
.mobile-nav-link:hover { color: var(--white); }
.mobile-cta {
  display: block;
  text-align: center;
  margin-top: 1rem;
  background: var(--teal);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 0.85rem;
  border-radius: var(--r-sm);
  transition: background 0.15s ease;
}
.mobile-cta:hover { background: var(--teal-light); }
@media (max-width: 768px) {
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; }
}

/* ────────────────────────────────────────────────────────────
   7. SITE FOOTER
   ──────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--slate);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 4rem;
  padding: 4rem 0;
  align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-logo { text-decoration: none; }
.footer-parent {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(148,163,184,0.65);
  margin-top: -0.25rem;
}
.footer-parent strong { font-weight: 600; color: rgba(203,213,225,0.9); }
.footer-tagline {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(148,163,184,0.75);
  max-width: 26ch;
}
.footer-contact { font-style: normal; }
.footer-contact__link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--teal-light);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-contact__link:hover { color: var(--white); }
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-top: 0.25rem;
}
.footer-nav__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.footer-nav__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 1rem;
}
.footer-nav__link {
  font-size: 13.5px;
  color: rgba(100,116,139,0.85);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-nav__link:hover { color: var(--text-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.12);
}
.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
}
.footer-bottom__copy { font-size: 12.5px; color: rgba(100,116,139,0.65); }
.footer-bottom__links { display: flex; gap: 1.5rem; }
.footer-bottom__link {
  font-size: 12.5px;
  color: rgba(100,116,139,0.65);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-bottom__link:hover { color: var(--text-light); }
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 0; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-bottom__inner { flex-direction: column; gap: 0.75rem; text-align: center; padding: 1.5rem 0; }
}

/* ────────────────────────────────────────────────────────────
   8. SCROLL-TO-TOP BUTTON
   ──────────────────────────────────────────────────────────── */
.scroll-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 50;
  width: 42px; height: 42px;
  background: rgba(13,148,136,0.85);
  color: var(--white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.scroll-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.scroll-top:hover { background: var(--teal-light); }
.scroll-top svg { width: 18px; height: 18px; }
@media (max-width: 540px) { .scroll-top { bottom: 1.25rem; right: 1.25rem; } }

/* ────────────────────────────────────────────────────────────
   9. HERO SECTION
   ──────────────────────────────────────────────────────────── */
.gf-hero {
  position: relative;
  background-color: var(--navy);
  overflow: hidden;
  padding: 120px 0 96px;
}
.gf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(13,148,136,0.11) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.gf-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at -8% -10%, rgba(13,148,136,0.24) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 105% 110%, rgba(13,148,136,0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.gf-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.gf-hero-text { display: flex; flex-direction: column; gap: 1.5rem; }
.gf-hero-text > * { animation: gf-fade-up 0.55s cubic-bezier(0.22,0.61,0.36,1) both; }
.gf-hero-text > *:nth-child(1) { animation-delay: 0.04s; }
.gf-hero-text > *:nth-child(2) { animation-delay: 0.13s; }
.gf-hero-text > *:nth-child(3) { animation-delay: 0.22s; }
.gf-hero-text > *:nth-child(4) { animation-delay: 0.31s; }
.gf-hero-text > *:nth-child(5) { animation-delay: 0.40s; }
@keyframes gf-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gf-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; line-height: 1; }
.gf-eyebrow-pulse { position: relative; width: 8px; height: 8px; flex-shrink: 0; }
.gf-eyebrow-pulse::before,
.gf-eyebrow-pulse::after { content: ''; position: absolute; border-radius: 50%; }
.gf-eyebrow-pulse::before { inset: 0; background: var(--green); }
.gf-eyebrow-pulse::after {
  inset: -3px;
  background: transparent;
  border: 1.5px solid rgba(22,163,74,0.4);
  animation: gf-pulse-ring 2.2s ease-out infinite;
}
@keyframes gf-pulse-ring {
  0%   { inset: -3px; opacity: 1; }
  80%  { inset: -7px; opacity: 0; }
  100% { inset: -7px; opacity: 0; }
}
.gf-eyebrow-text {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-light);
}
.gf-eyebrow-sep { color: var(--border-dark); margin: 0 0.1rem; }
.gf-headline {
  font-size: clamp(38px, 5.4vw, 68px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}
.gf-headline .gf-accent {
  color: var(--teal-light);
  border-bottom: 3px solid rgba(20,184,166,0.35);
  padding-bottom: 1px;
}
.gf-subhead {
  font-size: clamp(15px, 1.35vw, 17.5px);
  font-weight: 400;
  line-height: 1.72;
  color: var(--text-light);
  opacity: 0.88;
  max-width: 50ch;
}
.gf-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.25rem; }
.gf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.72rem 1.4rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.14s ease;
  white-space: nowrap;
}
.gf-btn-primary:hover { background: var(--teal-light); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(13,148,136,0.38); }
.gf-btn-primary .gf-btn-arrow { transition: transform 0.14s ease; }
.gf-btn-primary:hover .gf-btn-arrow { transform: translateX(3px); }
.gf-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  color: var(--text-dimmed);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 0.72rem 1.4rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  border: 1.5px solid var(--border-dark);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
  white-space: nowrap;
}
.gf-btn-ghost:hover { color: var(--teal-light); border-color: rgba(20,184,166,0.38); background: rgba(13,148,136,0.06); }
.gf-features { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; padding-top: 0.25rem; }
.gf-feature { display: flex; align-items: center; gap: 0.4rem; font-size: 12px; font-weight: 500; color: var(--text-muted); line-height: 1; }
.gf-feature-tick {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: rgba(13,148,136,0.15);
  border: 1px solid rgba(13,148,136,0.25);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--teal-light);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}
.gf-devices { position: relative; height: 460px; margin-right: -1.5rem; }
.gf-device { position: absolute; border-radius: var(--r-md); overflow: hidden; background: var(--slate); }
.gf-device-chrome {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 10px 6px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.gf-device-chrome .d { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.gf-device-chrome .d-r { background: #FF5F57; }
.gf-device-chrome .d-y { background: #FEBC2E; }
.gf-device-chrome .d-g { background: #28C840; }
.gf-device-chrome-bar { flex: 1; height: 14px; background: rgba(255,255,255,0.05); border-radius: 3px; margin-left: 6px; }
.gf-device img { display: block; width: 100%; object-fit: cover; object-position: top left; }
.gf-device-laptop {
  top: 0; left: 0; width: 69%; z-index: 1;
  border: 1.5px solid var(--border-mid);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 36px rgba(0,0,0,0.55), 0 40px 80px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.6);
  animation: gf-float-a 5.8s ease-in-out infinite;
}
.gf-device-laptop img { aspect-ratio: 16/9; }
.gf-device-tablet {
  top: 22%; right: 0; width: 53%; z-index: 2;
  background: #101720;
  border: 1.5px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 28px rgba(0,0,0,0.52), 0 24px 48px rgba(0,0,0,0.24), 0 0 0 1px rgba(0,0,0,0.5);
  animation: gf-float-b 6.4s ease-in-out infinite;
}
.gf-device-tablet img { aspect-ratio: 16/10; }
.gf-device-phone {
  bottom: 12px; right: 18%; width: 18%; z-index: 3;
  background: #080D15;
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 20px rgba(0,0,0,0.6), 0 16px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.6);
  animation: gf-float-c 5.2s ease-in-out infinite;
}
.gf-device-phone img { aspect-ratio: 9/19.5; }
.gf-device-phone .gf-device-chrome { justify-content: center; padding: 8px 12px 7px; }
.gf-device-phone .gf-device-chrome .d,
.gf-device-phone .gf-device-chrome .gf-device-chrome-bar { display: none; }
.gf-device-phone .gf-device-chrome::after { content: ''; width: 44px; height: 3.5px; background: rgba(255,255,255,0.15); border-radius: 2px; }
.gf-device-laptop::after { content: ''; position: absolute; bottom: -18px; left: 8%; right: 8%; height: 18px; background: linear-gradient(to bottom, rgba(13,148,136,0.08), transparent); filter: blur(6px); pointer-events: none; }
@keyframes gf-float-a { 0%,100% { transform: translateY(0px); }  50% { transform: translateY(-10px); } }
@keyframes gf-float-b { 0%,100% { transform: translateY(-4px); } 50% { transform: translateY(-16px); } }
@keyframes gf-float-c { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(-10px); } }
.gf-trust { background: var(--off-white); border-top: 1px solid var(--border-light); padding: 2.25rem 2.5rem; }
.gf-trust-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.gf-trust-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.gf-trust-pills { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; }
.gf-trust-pill { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--white); border: 1.5px solid var(--border-light); color: var(--text-dark); font-size: 13px; font-weight: 500; padding: 0.38rem 0.85rem; border-radius: var(--r-pill); white-space: nowrap; transition: border-color 0.15s ease, box-shadow 0.15s ease; cursor: default; user-select: none; }
.gf-trust-pill:hover { border-color: rgba(13,148,136,0.45); box-shadow: 0 2px 10px rgba(13,148,136,0.1); }
.gf-trust-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
@media (max-width: 1024px) { .gf-hero { padding: 96px 0 72px; } .gf-hero-inner { gap: 2rem; } .gf-devices { margin-right: 0; } }
@media (max-width: 860px) {
  .gf-hero { padding: 88px 0 64px; }
  .gf-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .gf-subhead { max-width: none; }
  .gf-devices { height: 320px; order: -1; margin-right: 0; }
  .gf-device-laptop { width: 70%; } .gf-device-tablet { width: 54%; top: 20%; } .gf-device-phone { width: 19%; right: 16%; }
}
@media (max-width: 560px) {
  .gf-hero { padding: 72px 0 48px; } .gf-hero-inner { padding: 0 1.25rem; } .gf-devices { height: 240px; }
  .gf-device-laptop { width: 72%; } .gf-device-tablet { width: 56%; top: 22%; } .gf-device-phone { width: 21%; right: 12%; }
  .gf-ctas { flex-direction: column; align-items: flex-start; }
  .gf-trust { padding: 2rem 1.25rem; }
}

/* ────────────────────────────────────────────────────────────
   10. METRICS SECTION
   ──────────────────────────────────────────────────────────── */
.gf-m {
  background-color: var(--navy);
  background-image: radial-gradient(circle, rgba(13,148,136,0.085) 1px, transparent 1px);
  background-size: 28px 28px;
  padding: clamp(80px,10vw,140px) clamp(20px,5vw,80px);
}
.gf-m__inner { max-width: 1240px; margin: 0 auto; }
.gf-m__eyebrow { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 14px; }
.gf-m__headline { font-size: clamp(26px,3.8vw,44px); font-weight: 700; letter-spacing: -0.025em; color: var(--white); text-wrap: balance; line-height: 1.12; margin-bottom: clamp(48px,7vw,80px); max-width: 560px; }
.gf-m__headline-kicker { color: var(--teal-light); }
.gf-m__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.gf-m__card { background: var(--slate); border: 1px solid rgba(13,148,136,0.18); border-top: 3px solid var(--teal); padding: 36px 26px 32px; position: relative; transition: background 0.22s ease, box-shadow 0.22s ease, border-top-color 0.22s ease; }
.gf-m__card:hover { background: #22304A; border-top-color: var(--teal-light); box-shadow: 0 0 0 1px rgba(20,184,166,0.2), 0 0 40px rgba(13,148,136,0.18), 0 4px 20px rgba(0,0,0,0.45); }
.gf-m__card--green { border-color: rgba(22,163,74,0.2); border-top-color: var(--green); }
.gf-m__card--green:hover { border-top-color: #22C55E; box-shadow: 0 0 0 1px rgba(34,197,94,0.2), 0 0 40px rgba(22,163,74,0.16), 0 4px 20px rgba(0,0,0,0.45); }
.gf-m__stat { display: block; font-size: clamp(30px,3.6vw,58px); font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--teal-light); margin-bottom: 22px; }
.gf-m__card--green .gf-m__stat { color: var(--green); }
.gf-m__card--green:hover .gf-m__stat { color: #22C55E; transition: color 0.22s ease; }
.gf-m__divider { width: 28px; height: 1px; background: #2D3F55; margin-bottom: 18px; }
.gf-m__card--green .gf-m__divider { background: #1A4731; }
.gf-m__label { font-size: 14.5px; font-weight: 500; color: #CBD5E1; line-height: 1.5; margin-bottom: 10px; }
.gf-m__sub { font-size: 11.5px; font-weight: 400; color: #475569; line-height: 1.75; letter-spacing: 0.015em; }
@media (max-width: 900px) { .gf-m__grid { grid-template-columns: repeat(2,1fr); } .gf-m__stat { font-size: clamp(40px,7vw,64px); } }
@media (max-width: 540px) { .gf-m__grid { grid-template-columns: 1fr; gap: 12px; } .gf-m__stat { font-size: clamp(48px,12vw,72px); } }
@media (prefers-reduced-motion: reduce) { .gf-m__card { transition: none; } }

/* ────────────────────────────────────────────────────────────
   11. PLATFORM OVERVIEW
   ──────────────────────────────────────────────────────────── */
.platform { background: var(--bg); padding: 96px 0 112px; }
.platform__inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.platform__header { margin-bottom: 52px; }
.platform__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 18px; }
.platform__eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: var(--teal); flex-shrink: 0; }
.platform__headline { font-size: clamp(28px,4vw,44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; color: var(--heading); text-wrap: balance; max-width: 600px; margin-bottom: 18px; }
.platform__sub { font-size: 17px; line-height: 1.7; color: var(--body-color); max-width: 600px; }
.platform__grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 14px; }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 180ms ease, box-shadow 180ms ease; }
.card:hover { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), 0 8px 36px rgba(13,148,136,0.10); }
.card--dispatcher { grid-column: 1/8; grid-row: 1/3; }
.card--mobile     { grid-column: 8/13; grid-row: 1; }
.card--tablet     { grid-column: 8/13; grid-row: 2; }
.card--portal     { grid-column: 1/7; grid-row: 3; }
.card--dispatch   { grid-column: 7/13; grid-row: 3; }
.card__image { overflow: hidden; background: var(--img-placeholder); flex-shrink: 0; position: relative; }
.card__image img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.card--dispatcher .card__image { flex: 1; min-height: 260px; }
.card--dispatcher .card__image img { position: absolute; inset: 0; }
.card--mobile .card__image  { height: 190px; }
.card--tablet .card__image  { height: 168px; }
.card--portal .card__image  { height: 218px; }
.card--dispatch .card__image { height: 218px; }
.card__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.card--dispatcher .card__body { padding: 22px 26px 28px; }
.chip { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; width: fit-content; margin-bottom: 2px; }
.chip--web    { background: rgba(13,148,136,0.10); color: var(--teal); }
.chip--mobile { background: rgba(99,102,241,0.10); color: var(--chip-mobile-text); }
.chip--tablet { background: rgba(217,119,6,0.10);  color: var(--chip-tablet-text); }
.chip--portal { background: rgba(22,163,74,0.10);  color: var(--chip-portal-text); }
.card__title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--heading); }
.card--dispatcher .card__title { font-size: 17px; }
.card__desc { font-size: 13px; line-height: 1.65; color: var(--body-color); }
.card--dispatcher .card__desc { font-size: 14px; }
.card__link { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--link); text-decoration: none; margin-top: 2px; transition: gap 140ms ease; }
.card__link:hover { gap: 7px; }
@media (max-width: 900px) {
  .platform__grid { grid-template-columns: 1fr 1fr; }
  .card--dispatcher, .card--mobile, .card--tablet, .card--portal, .card--dispatch { grid-column: auto; grid-row: auto; }
  .card--dispatcher { grid-column: 1/-1; }
  .card--dispatcher .card__image { flex: none; min-height: unset; height: 250px; }
  .card--dispatcher .card__image img { position: static; }
}
@media (max-width: 540px) {
  .platform { padding: 64px 0 80px; } .platform__inner { padding: 0 20px; }
  .platform__grid { grid-template-columns: 1fr; }
  .card--mobile .card__image, .card--tablet .card__image, .card--portal .card__image, .card--dispatch .card__image { height: 195px; }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card__link { transition: none; } }

/* ────────────────────────────────────────────────────────────
   12. OPERATIONS CORE & FIELD/DRIVER
   ──────────────────────────────────────────────────────────── */
.gf-section { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.gf-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.gf-eyebrow__rule { display: block; width: 22px; height: 2px; border-radius: 1px; flex-shrink: 0; }
.gf-section .gf-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 20px; }
.gf-h2 { font-size: clamp(26px,3.5vw,42px); font-weight: 800; letter-spacing: -.026em; line-height: 1.1; text-wrap: balance; margin-bottom: 18px; }
.gf-intro { font-size: 16px; line-height: 1.72; max-width: 54ch; }
.ops-core { background: var(--navy); padding: clamp(80px,9vw,116px) 0; }
.ops-core .gf-eyebrow       { color: var(--teal-light); }
.ops-core .gf-eyebrow__rule { background: var(--teal); }
.ops-core .gf-h2            { color: var(--white); }
.ops-core .gf-intro         { color: var(--text-dimmed); margin-bottom: 40px; }
.ops-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.ops-features { border-top: 1px solid var(--border-dark); }
.ops-feature { display: flex; align-items: flex-start; gap: 14px; padding: 15px 6px 15px 0; border-bottom: 1px solid var(--border-dark); border-radius: var(--r-sm); transition: background .13s ease; }
.ops-feature:hover { background: rgba(13,148,136,.045); padding-left: 6px; }
.ops-feature__icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--teal-light); padding-top: 2px; }
.ops-feature__icon svg { width: 19px; height: 19px; }
.ops-feature__text { flex: 1; min-width: 0; }
.ops-feature__title { font-size: 14px; font-weight: 700; color: var(--white); letter-spacing: -.01em; line-height: 1.3; margin-bottom: 3px; }
.ops-feature__desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.ops-visual { position: sticky; top: 88px; }
.ops-frame { background: #0A111E; border: 1px solid var(--border-dark); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 28px 72px rgba(0,0,0,.6), 0 4px 18px rgba(0,0,0,.35); }
.ops-frame__bar { display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: #0C1522; border-bottom: 1px solid var(--border-dark); }
.ops-frame__dots { display: flex; gap: 5px; flex-shrink: 0; }
.ops-frame__dot { width: 10px; height: 10px; border-radius: 50%; }
.ops-frame__dot--r { background: #FF5F57; } .ops-frame__dot--y { background: #FEBC2E; } .ops-frame__dot--g { background: #28C840; }
.ops-frame__bar-label { font-size: 11px; font-weight: 500; color: #475569; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 4px; }
.ops-frame__screen { aspect-ratio: 16/10; background: linear-gradient(140deg,#101b2c 0%,#1a2a3d 100%); overflow: hidden; position: relative; }
.ops-frame__screen::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle,rgba(13,148,136,.12) 1px,transparent 1px); background-size: 28px 28px; z-index: 1; pointer-events: none; }
.ops-frame__screen img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ops-frame__footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #080f1a; border-top: 1px solid var(--border-dark); }
.ops-frame__status { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; color: #3d5066; letter-spacing: .08em; text-transform: uppercase; }
.ops-frame__led { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px rgba(22,163,74,.75); flex-shrink: 0; }
.ops-frame__footer-caption { font-size: 10.5px; font-weight: 600; color: #3d5066; letter-spacing: .07em; text-transform: uppercase; }
.field-driver { background: var(--off-white); padding: clamp(80px,9vw,116px) 0; }
.field-driver .gf-eyebrow       { color: var(--teal); }
.field-driver .gf-eyebrow__rule { background: var(--teal); }
.field-driver .gf-h2            { color: var(--text-dark); }
.field-driver .gf-intro         { color: var(--text-muted); margin-bottom: 32px; }
.fd-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.fd-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .025em; color: var(--teal); background: rgba(13,148,136,.09); border: 1px solid rgba(13,148,136,.22); border-radius: 100px; padding: 5px 13px 5px 9px; margin-bottom: 24px; user-select: none; }
.fd-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.fd-grid-wrap { border: 1px solid var(--border-light); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 1px 6px rgba(15,23,42,.06); }
.fd-grid { display: grid; grid-template-columns: 1fr 1fr; }
.fd-card { background: var(--white); padding: 18px 20px; border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); transition: background .13s ease; }
.fd-card:hover { background: rgba(13,148,136,.025); }
.fd-card:nth-child(even) { border-right: none; }
.fd-card__icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(13,148,136,.1); display: flex; align-items: center; justify-content: center; color: var(--teal); margin-bottom: 11px; flex-shrink: 0; }
.fd-card__icon svg { width: 17px; height: 17px; }
.fd-card__title { font-size: 13.5px; font-weight: 700; color: var(--text-dark); letter-spacing: -.01em; line-height: 1.3; margin-bottom: 4px; }
.fd-card__desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.fd-card--wide { grid-column: 1/-1; border-right: none; border-bottom: none; display: flex; align-items: center; gap: 16px; }
.fd-card--wide .fd-card__icon { margin-bottom: 0; flex-shrink: 0; }
.fd-card--wide .fd-card__body { flex: 1; min-width: 0; }
.fd-visual { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 12px; }
.fd-devices { display: grid; grid-template-columns: 7fr 5fr; gap: 12px; align-items: end; }
.fd-device { position: relative; }
.fd-device__chrome { background: var(--slate); border-radius: 14px; padding: 9px; box-shadow: 0 22px 64px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.08); }
.fd-device--mobile .fd-device__chrome { border-radius: 22px; padding: 7px; }
.fd-device__screen { border-radius: 7px; overflow: hidden; background: var(--navy); position: relative; }
.fd-device--tablet .fd-device__screen { aspect-ratio: 16/10; }
.fd-device--mobile .fd-device__screen { aspect-ratio: 9/17; border-radius: 15px; }
.fd-device__screen::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle,rgba(13,148,136,.1) 1px,transparent 1px); background-size: 24px 24px; z-index: 1; pointer-events: none; }
.fd-device__screen img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fd-device__label { text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: 9px; }
@media (max-width: 960px) { .ops-layout, .fd-layout { grid-template-columns: 1fr; } .ops-visual, .fd-visual { position: static; } }
@media (max-width: 640px) {
  .gf-container { padding: 0 20px; }
  .fd-grid { grid-template-columns: 1fr; } .fd-card { border-right: none; } .fd-card--wide { border-bottom: none; }
  .fd-devices { grid-template-columns: 1fr; } .fd-device--mobile { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ops-feature, .fd-card { transition: none !important; } }

/* ────────────────────────────────────────────────────────────
   13. INTELLIGENCE & SB1383
   ──────────────────────────────────────────────────────────── */
.eyebrow { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 0.875rem; }
.s-intel { background: var(--navy); padding: clamp(5rem,9vw,8rem) 0; }
.intel-header { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,5rem); align-items: center; margin-bottom: clamp(3rem,6vw,5rem); }
.intel-headline { font-size: clamp(28px,3.8vw,44px); font-weight: 700; letter-spacing: -0.025em; color: var(--white); line-height: 1.15; text-wrap: balance; margin-bottom: 1rem; }
.intel-intro { font-size: 1rem; line-height: 1.75; color: var(--text-light); opacity: 0.7; max-width: 50ch; }
.pipeline { display: flex; align-items: center; padding: 1.75rem 1.5rem; background: var(--slate); border: 1px solid var(--border-dark); border-radius: 12px; overflow-x: auto; }
.pipe-node { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; flex-shrink: 0; }
.pipe-icon { width: 44px; height: 44px; border-radius: 8px; background: var(--teal-dim); border: 1px solid rgba(20,184,166,0.25); display: flex; align-items: center; justify-content: center; color: var(--teal-light); }
.pipe-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.pipe-arrow { flex: 1; display: flex; align-items: center; min-width: 2rem; padding: 0 0.25rem; margin-bottom: 1.5rem; }
.pipe-arrow svg { width: 100%; min-width: 2rem; }
.intel-bento { display: grid; grid-template-columns: repeat(3,1fr); grid-template-areas: "dash dash bq" "auto dec ai" "rep rep alrt"; gap: 1px; background: var(--border-dark); border: 1px solid var(--border-dark); border-radius: 14px; overflow: hidden; }
.tile { background: var(--slate); padding: 1.875rem; display: flex; flex-direction: column; gap: 0.5rem; position: relative; transition: background 0.14s ease; }
.tile:hover { background: var(--slate-mid); }
.tile::after { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 0; background: var(--teal); transition: height 0.18s ease; pointer-events: none; }
.tile:hover::after { height: 100%; }
.tile-dash { grid-area: dash; padding: 2.25rem 2rem; } .tile-bq { grid-area: bq; padding: 2.25rem 2rem; }
.tile-auto { grid-area: auto; } .tile-dec { grid-area: dec; } .tile-ai { grid-area: ai; } .tile-rep { grid-area: rep; } .tile-alrt { grid-area: alrt; }
.tile-badge { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-light); opacity: 0.65; margin-bottom: 0.125rem; }
.tile-name { font-size: 1rem; font-weight: 700; color: var(--white); letter-spacing: -0.015em; line-height: 1.3; }
.tile-dash .tile-name, .tile-bq .tile-name { font-size: 1.1875rem; margin-bottom: 0.25rem; }
.tile-desc { font-size: 0.875rem; line-height: 1.65; color: var(--text-light); opacity: 0.6; max-width: 44ch; }
.tile-dash .tile-mini { display: flex; align-items: flex-end; gap: 4px; height: 32px; margin-top: auto; padding-top: 1.25rem; opacity: 0.25; }
.tile-dash .tile-mini span { display: block; width: 10px; background: var(--teal-light); border-radius: 2px 2px 0 0; flex-shrink: 0; }
.tile-bq .tile-code { margin-top: auto; padding-top: 1rem; font-size: 0.6875rem; font-family: 'SF Mono',ui-monospace,monospace; color: var(--teal-light); opacity: 0.35; line-height: 1.6; letter-spacing: 0.01em; }
.s-sb1383 { background: #071F1E; padding: clamp(5rem,9vw,8rem) 0; position: relative; overflow: hidden; }
.s-sb1383::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(20,184,166,0.14) 1px,transparent 1px), linear-gradient(90deg,rgba(20,184,166,0.14) 1px,transparent 1px); background-size: 56px 56px; pointer-events: none; }
.s-sb1383::after { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 700px; height: 400px; background: radial-gradient(ellipse at center,rgba(13,148,136,0.18) 0%,transparent 70%); pointer-events: none; }
.sb-inner { position: relative; z-index: 1; }
.sb-header { text-align: center; margin-bottom: clamp(3rem,5.5vw,4.5rem); }
.sb-headline { font-size: clamp(36px,5.5vw,62px); font-weight: 800; letter-spacing: -0.03em; color: var(--white); line-height: 1.1; text-wrap: balance; margin-bottom: 1.375rem; }
.sb-sub { font-size: 1.0625rem; line-height: 1.75; color: var(--text-light); opacity: 0.72; max-width: 60ch; margin: 0 auto; }
.sb-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(20,184,166,0.28); border: 1px solid rgba(20,184,166,0.28); border-radius: 12px; overflow: hidden; margin-bottom: 0.875rem; }
.sb-stat { background: rgba(7,31,30,0.9); padding: clamp(1.5rem,3vw,2.25rem) 1.5rem; text-align: center; position: relative; }
.sb-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,transparent,var(--teal),transparent); }
.stat-num { display: block; font-size: clamp(38px,5vw,58px); font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--white); line-height: 1; margin-bottom: 0.5rem; }
.stat-num.is-accent { color: var(--teal-light); } .stat-num.is-amber { color: var(--amber); }
.stat-lbl { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); opacity: 0.5; }
.sb-live { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-light); opacity: 0.45; margin-bottom: clamp(3rem,5.5vw,5rem); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: livepulse 2.2s ease-in-out infinite; }
@keyframes livepulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22,163,74,0.5); } 55% { opacity: 0.8; box-shadow: 0 0 0 5px rgba(22,163,74,0); } }
.sb-split { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(2rem,4vw,4rem); align-items: start; margin-bottom: clamp(3rem,5vw,4rem); }
.sb-shot { border-radius: 10px; overflow: hidden; border: 1px solid rgba(20,184,166,0.28); box-shadow: 0 24px 64px rgba(0,0,0,0.55); background: var(--slate); min-height: 260px; }
.sb-shot img { width: 100%; height: auto; display: block; }
.sb-shot-cap { padding: 0.5rem 0.875rem; font-size: 0.6875rem; color: var(--text-light); opacity: 0.5; letter-spacing: 0.04em; border-top: 1px solid rgba(20,184,166,0.28); background: rgba(7,31,30,0.7); text-align: center; }
.sb-features { display: flex; flex-direction: column; }
.sb-feat { display: grid; grid-template-columns: 18px 1fr; gap: 0.875rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid rgba(20,184,166,0.09); }
.sb-feat:first-child { padding-top: 0; } .sb-feat:last-child { border-bottom: none; }
.feat-check { color: var(--teal-light); margin-top: 2px; flex-shrink: 0; }
.feat-name { font-size: 0.9375rem; font-weight: 600; color: var(--white); letter-spacing: -0.01em; line-height: 1.35; margin-bottom: 0.2rem; }
.feat-desc { font-size: 0.8125rem; line-height: 1.55; color: var(--text-light); opacity: 0.52; }
.sb-cta { display: flex; justify-content: center; }
.sb-cta-btn { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--teal-light); text-decoration: none; padding: 0.9375rem 1.875rem; border: 1.5px solid rgba(20,184,166,0.28); border-radius: 8px; transition: background 0.15s, border-color 0.15s, color 0.15s; background: rgba(20,184,166,0.05); }
.sb-cta-btn:hover { background: rgba(20,184,166,0.12); border-color: var(--teal-light); color: var(--white); }
.cta-arrow { transition: transform 0.15s ease; } .sb-cta-btn:hover .cta-arrow { transform: translateX(4px); }
@media (max-width: 960px) {
  .intel-header { grid-template-columns: 1fr; }
  .intel-bento { grid-template-columns: 1fr 1fr; grid-template-areas: "dash dash" "bq bq" "auto dec" "ai rep" "alrt alrt"; }
  .sb-stats { grid-template-columns: 1fr 1fr; } .sb-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .intel-bento { grid-template-columns: 1fr; grid-template-areas: "dash" "bq" "auto" "dec" "ai" "rep" "alrt"; border-radius: 10px; }
  .sb-stats { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } .tile::after { transition: none; } .tile { transition: none; } }

/* ────────────────────────────────────────────────────────────
   14. TECHNICAL ARCHITECTURE / COMPARISON / CUSTOMERS
   ──────────────────────────────────────────────────────────── */
.gf-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.25rem,4vw,3rem); }
.gf-eyebrow-inline { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.875rem; }
.gf-lede { font-size: 1rem; line-height: 1.75; max-width: 52ch; }
#gf-arch { padding: clamp(5rem,9vw,8rem) 0; background-color: var(--navy); background-image: radial-gradient(circle,rgba(13,148,136,0.085) 1px,transparent 1px); background-size: 28px 28px; }
.gf-arch-hd { text-align: center; margin-bottom: clamp(2.75rem,5vw,4.25rem); }
#gf-arch .gf-eyebrow-inline,
#gf-arch .gf-eyebrow { color: var(--teal-light); }
#gf-arch .gf-h2 { color: var(--white); }
#gf-arch .gf-lede { color: var(--text-light); opacity: 0.7; margin: 0 auto; }
.gf-arch-bento { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border-dark); border: 1px solid var(--border-dark); border-radius: 14px; overflow: hidden; }
.gf-arch-tile { background: var(--slate); padding: clamp(1.5rem,2.5vw,2.25rem); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: background 0.14s ease; }
.gf-arch-tile:hover { background: var(--slate-mid); }
.gf-arch-tile::after { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 0; background: var(--teal); transition: height 0.18s ease; pointer-events: none; }
.gf-arch-tile:hover::after { height: 100%; }
.gf-arch-icon { width: 44px; height: 44px; border-radius: 8px; background: var(--teal-dim); border: 1px solid var(--teal-icon-border); display: flex; align-items: center; justify-content: center; color: var(--teal-light); margin-bottom: 1.25rem; flex-shrink: 0; }
.gf-arch-icon svg { width: 20px; height: 20px; }
.gf-arch-label { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-light); opacity: 0.65; margin-bottom: 0.25rem; }
.gf-arch-name { font-size: 1rem; font-weight: 700; color: var(--white); letter-spacing: -0.015em; line-height: 1.3; margin-bottom: 0.5rem; }
.gf-arch-body { font-size: 0.875rem; line-height: 1.65; color: var(--text-light); opacity: 0.6; }
#gf-comparison { padding: clamp(5rem,9vw,8rem) 0; background: var(--white); }
.gf-cmp-hd { text-align: center; margin-bottom: clamp(2.5rem,5vw,4rem); }
#gf-comparison .gf-eyebrow-inline,
#gf-comparison .gf-eyebrow { color: var(--teal); }
#gf-comparison .gf-h2 { color: var(--text-dark); }
#gf-comparison .gf-lede { color: var(--text-muted); margin: 0 auto; }
.gf-cmp-outer { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-light); border-radius: 12px; box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 6px 24px rgba(15,23,42,0.03); }
.gf-cmp-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.875rem; }
.gf-cmp-table .col-feat { width: 28%; } .gf-cmp-table .col-gf { width: 36%; } .gf-cmp-table .col-other { width: 36%; }
.gf-cmp-th { padding: 0.875rem 1.375rem; text-align: left; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--border-light); }
.gf-cmp-th.th-feat { color: var(--text-muted); background: var(--off-white); }
.gf-cmp-th.th-gf { color: var(--white); background: var(--teal); border-top: 3px solid var(--teal-light); border-left: 1px solid rgba(20,184,166,0.35); border-right: 1px solid rgba(20,184,166,0.35); border-bottom: 1px solid rgba(20,184,166,0.45); letter-spacing: 0.16em; }
.gf-cmp-th.th-other { color: var(--text-dimmed); background: var(--off-white); border-left: 1px solid var(--border-light); }
.gf-cmp-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background 0.1s; }
.gf-cmp-table tbody tr:last-child { border-bottom: none; }
.gf-cmp-td { padding: 0.9375rem 1.375rem; vertical-align: top; line-height: 1.5; }
.gf-cmp-td.td-feat { font-weight: 600; color: var(--text-dark); background: var(--off-white); border-right: 1px solid var(--border-light); }
.gf-cmp-td.td-gf { background: rgba(13,148,136,0.025); border-left: 1px solid rgba(13,148,136,0.15); border-right: 1px solid rgba(13,148,136,0.15); }
.gf-cmp-td.td-other { background: var(--white); border-left: 1px solid var(--border-light); }
.gf-cmp-table tbody tr:hover .td-feat { background: #F1F5F9; }
.gf-cmp-table tbody tr:hover .td-gf { background: rgba(13,148,136,0.05); }
.gf-cmp-table tbody tr:hover .td-other { background: var(--off-white); }
.gf-cmp-cell { display: flex; align-items: flex-start; gap: 0.625rem; }
.gf-cmp-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-width: 18px; border-radius: 50%; font-size: 10px; font-weight: 900; line-height: 1; margin-top: 1px; }
.gf-cmp-dot.dot-yes { background: var(--green); color: var(--white); }
.gf-cmp-dot.dot-no { background: #DDE4EE; color: var(--text-dimmed); font-size: 13px; }
.gf-cmp-dot.dot-limited { background: rgba(217,119,6,0.12); color: var(--amber); }
.gf-cmp-cell-text { font-size: 0.845rem; line-height: 1.55; }
.gf-cmp-cell-text.t-yes { color: var(--text-dark); } .gf-cmp-cell-text.t-no { color: var(--text-muted); } .gf-cmp-cell-text.t-limited { color: var(--text-muted); }
#gf-customers { padding: clamp(5rem,9vw,8rem) 0; background: var(--off-white); }
.gf-cust-hd { text-align: center; margin-bottom: clamp(2.5rem,5vw,4rem); }
#gf-customers .gf-eyebrow-inline,
#gf-customers .gf-eyebrow { color: var(--teal); }
#gf-customers .gf-h2 { color: var(--text-dark); }
#gf-customers .gf-lede { color: var(--text-muted); margin: 0 auto; }
.gf-cust-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 1.25rem; }
.gf-cust-card { grid-column: span 2; background: var(--white); border: 1px solid var(--border-light); border-top: 3px solid var(--teal); border-radius: 10px; padding: 1.625rem 1.75rem 1.5rem; transition: box-shadow 0.18s ease, transform 0.18s ease; }
.gf-cust-card:nth-child(4), .gf-cust-card:nth-child(5) { grid-column: span 3; }
.gf-cust-card:hover { box-shadow: 0 4px 20px rgba(15,23,42,0.09); transform: translateY(-2px); }
.gf-cust-tag { display: inline-block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; padding: 0.2rem 0.5rem; margin-bottom: 0.875rem; }
.gf-cust-tag.tag-muni { color: var(--teal); background: var(--teal-dim); }
.gf-cust-tag.tag-comm { color: #475569; background: rgba(71,85,105,0.08); }
.gf-cust-name { font-size: 1.125rem; font-weight: 700; color: var(--text-dark); letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 0.5rem; }
.gf-cust-desc { font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); }
.gf-cust-live { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.125rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.gf-cust-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: gf-live 2.4s ease-in-out infinite; }
@keyframes gf-live { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } }
@media (max-width: 960px) {
  .gf-arch-bento { grid-template-columns: repeat(2,1fr); }
  .gf-cust-grid { grid-template-columns: repeat(2,1fr); gap: 1rem; }
  .gf-cust-card, .gf-cust-card:nth-child(4), .gf-cust-card:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 600px) { .gf-arch-bento { grid-template-columns: 1fr; } .gf-cust-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gf-arch-tile, .gf-arch-tile::after, .gf-cust-card { transition: none; } .gf-cust-dot { animation: none; } }

/* ────────────────────────────────────────────────────────────
   15. DEMO CTA
   ──────────────────────────────────────────────────────────── */
.gf-cta { position: relative; background-color: var(--navy); background-image: radial-gradient(circle,rgba(13,148,136,0.09) 1px,transparent 1px); background-size: 28px 28px; padding: clamp(80px,11vw,140px) clamp(24px,5.5vw,80px); overflow: hidden; }
.gf-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at -5% 115%,rgba(13,148,136,0.22) 0%,transparent 60%), radial-gradient(ellipse 40% 50% at 108% -10%,rgba(13,148,136,0.06) 0%,transparent 55%); pointer-events: none; z-index: 0; }
.gf-cta::after { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg,transparent,rgba(20,184,166,0.55),transparent); pointer-events: none; z-index: 1; }
.gf-cta__bracket { position: absolute; width: 44px; height: 44px; pointer-events: none; z-index: 1; }
.gf-cta__bracket--tl { top: 20px; left: 20px; }
.gf-cta__bracket--tr { top: 20px; right: 20px; transform: scaleX(-1); }
.gf-cta__bracket--bl { bottom: 20px; left: 20px; transform: scaleY(-1); }
.gf-cta__bracket--br { bottom: 20px; right: 20px; transform: scale(-1); }
.gf-cta__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 400px; gap: clamp(48px,7vw,96px); align-items: center; }
.gf-cta__left { display: flex; flex-direction: column; gap: 28px; }
.gf-cta__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--teal-light); }
.gf-cta__eyebrow::before { content: ''; display: block; width: 22px; height: 1px; background: currentColor; flex-shrink: 0; }
.gf-cta__headline { font-size: clamp(44px,5.5vw,72px); font-weight: 800; letter-spacing: -0.034em; line-height: 1.04; color: var(--white); text-wrap: balance; }
.gf-cta__kicker { font-style: italic; color: var(--teal-light); }
.gf-cta__sub { font-size: 17px; line-height: 1.72; color: var(--text-dimmed); max-width: 54ch; }
.gf-cta__right { display: flex; flex-direction: column; }
.gf-cta__actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.gf-cta__btn-primary { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 18px 32px; background: var(--teal); color: var(--white); font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: 0.005em; border: none; border-radius: var(--r-sm); text-decoration: none; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease; }
.gf-cta__btn-primary:hover { background: var(--teal-light); box-shadow: 0 0 28px rgba(20,184,166,0.38); }
.gf-cta__btn-primary:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 3px; }
.gf-cta__btn-ghost { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; background: transparent; color: var(--text-light); font-family: var(--font-sans); font-size: 15px; font-weight: 600; border: 1px solid var(--border-dark); border-radius: var(--r-sm); text-decoration: none; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.gf-cta__btn-ghost:hover { border-color: rgba(20,184,166,0.5); color: var(--white); background: rgba(13,148,136,0.06); }
.gf-cta__btn-ghost svg { width: 14px; height: 14px; opacity: 0.65; flex-shrink: 0; }
.gf-cta__trust { list-style: none; display: flex; flex-direction: column; gap: 13px; padding-top: 28px; border-top: 1px solid var(--border-dark); }
.gf-cta__trust-item { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.01em; }
.gf-cta__check { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(13,148,136,0.14); flex-shrink: 0; }
.gf-cta__check svg { width: 9px; height: 9px; stroke: var(--teal-light); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
@media (prefers-reduced-motion: no-preference) {
  .gf-cta__left, .gf-cta__right { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; }
  .gf-cta__right { transition-delay: 0.14s; }
  .gf-cta__left.gf-cta--visible, .gf-cta__right.gf-cta--visible { opacity: 1; transform: translateY(0); }
}
@media (max-width: 860px) {
  .gf-cta__inner { grid-template-columns: 1fr; max-width: 600px; }
  .gf-cta__sub { max-width: 100%; }
  .gf-cta__actions { flex-direction: row; }
  .gf-cta__btn-primary, .gf-cta__btn-ghost { flex: 1; padding: 15px 20px; }
  .gf-cta__trust { flex-direction: row; flex-wrap: wrap; gap: 16px 28px; }
}
@media (max-width: 520px) {
  .gf-cta__actions { flex-direction: column; }
  .gf-cta__btn-primary, .gf-cta__btn-ghost { flex: unset; padding: 17px 24px; }
}

/* ────────────────────────────────────────────────────────────
   16. GLOBAL REDUCED MOTION SWEEP
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gf-hero-text > * { animation: none; }
  .gf-device-laptop, .gf-device-tablet, .gf-device-phone { animation: none; }
  .gf-eyebrow-pulse::after { animation: none; }
  .gf-btn-primary:hover .gf-btn-arrow { transform: none; }
  .gf-cta__left, .gf-cta__right { opacity: 1; transform: none; transition: none; }
}

/* ────────────────────────────────────────────────────────────
   17. BOOK A DEMO MODAL
   ──────────────────────────────────────────────────────────── */
.gf-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(7, 14, 26, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
}
.gf-modal-backdrop[hidden] { display: none; }

.gf-modal {
  position: relative;
  background: var(--slate, #1E293B);
  border: 1px solid rgba(13, 148, 136, 0.28);
  border-top: 3px solid var(--teal, #0D9488);
  border-radius: 14px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: gf-modal-in 0.22s cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes gf-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-modal { animation: none; }
}

.gf-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #94A3B8;
  transition: background 0.13s, color 0.13s;
}
.gf-modal__close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.gf-modal__close svg { width: 14px; height: 14px; }

.gf-modal__body { padding: clamp(1.75rem,4vw,2.5rem); }

.gf-modal__header { margin-bottom: 1.75rem; }
.gf-modal__eyebrow {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-light, #14B8A6);
  margin-bottom: 0.5rem;
}
.gf-modal__title {
  font-size: clamp(22px, 3.5vw, 28px); font-weight: 800; letter-spacing: -0.025em;
  color: #fff; line-height: 1.15; margin-bottom: 0.625rem;
}
.gf-modal__sub {
  font-size: 14px; line-height: 1.65; color: #94A3B8;
}

/* Form */
.gf-modal__form { display: flex; flex-direction: column; gap: 1rem; }
.gf-form-row { display: grid; gap: 1rem; }
.gf-form-row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 500px) { .gf-form-row--2 { grid-template-columns: 1fr; } }
.gf-form-group { display: flex; flex-direction: column; gap: 0.375rem; }
.gf-form-label {
  font-size: 12.5px; font-weight: 600; color: #CBD5E1; letter-spacing: 0.01em;
}
.gf-form-optional { font-weight: 400; color: #475569; font-size: 11px; }
.gf-form-input {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14px; color: #E2E8F0;
  background: rgba(15,23,42,0.6);
  border: 1px solid #334155;
  border-radius: 7px;
  padding: 0.625rem 0.875rem;
  outline: none;
  transition: border-color 0.14s, box-shadow 0.14s;
  width: 100%;
}
.gf-form-input::placeholder { color: #475569; }
.gf-form-input:focus {
  border-color: var(--teal, #0D9488);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
}
.gf-form-input.is-invalid { border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.gf-form-select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.875rem center; padding-right: 2.25rem;
}
.gf-form-select option { background: #1E293B; color: #E2E8F0; }
.gf-form-textarea { resize: vertical; min-height: 80px; line-height: 1.55; }
.gf-form-error {
  font-size: 13px; color: #F87171; font-weight: 500;
  padding: 0.5rem 0.75rem;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); border-radius: 6px;
}
.gf-form-submit {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  color: #fff;
  background: var(--teal, #0D9488);
  border: none; border-radius: 7px;
  padding: 0.875rem 1.5rem;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  margin-top: 0.5rem;
}
.gf-form-submit:hover { background: var(--teal-light, #14B8A6); box-shadow: 0 0 20px rgba(20,184,166,0.35); }

/* Success state */
.gf-modal__success {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 3rem 2.5rem;
  gap: 1rem;
}
.gf-modal__success[hidden] { display: none; }
.gf-success-icon svg { width: 56px; height: 56px; }
.gf-success-title { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; color: #fff; }
.gf-success-sub { font-size: 15px; line-height: 1.65; color: #94A3B8; max-width: 36ch; }
.gf-modal__close-btn {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14px; font-weight: 600;
  color: var(--teal-light, #14B8A6);
  background: rgba(13,148,136,0.1);
  border: 1px solid rgba(13,148,136,0.28);
  border-radius: 7px;
  padding: 0.625rem 1.5rem;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background 0.14s;
}
.gf-modal__close-btn:hover { background: rgba(13,148,136,0.2); }

/* ────────────────────────────────────────────────────────────
   Sticky mobile Book-a-Demo bar (#21) — mobile only, reveals on scroll
   ──────────────────────────────────────────────────────────── */
.mobile-demo-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(15, 23, 42, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.mobile-demo-bar.is-visible { transform: translateY(0); }
.mobile-demo-bar .btn { width: 100%; justify-content: center; }
@media (max-width: 768px) { .mobile-demo-bar { display: block; } }
@media (prefers-reduced-motion: reduce) { .mobile-demo-bar { transition: none; } }

/* Comparison capability tooltips (#24) */
.gf-tip { cursor: help; border-bottom: 1px dotted rgba(13,148,136,0.55); }
.gf-tip:hover, .gf-tip:focus-visible { border-bottom-color: var(--teal, #0D9488); outline: none; }

/* Book-a-Demo — Google Calendar booking embed (#8) */
.gf-modal:has(.gf-modal__body--book) { max-width: 680px; }
.gf-modal__body--book { padding: clamp(1.25rem,3.5vw,1.75rem); }
.gf-modal__booking { margin-top: 1.1rem; border-radius: 10px; overflow: hidden; background: #fff; }
.gf-modal__booking iframe { display: block; width: 100%; min-height: 620px; border: 0; }
.gf-modal__fallback { margin-top: 0.85rem; text-align: center; font-size: 13px; color: #94A3B8; }
.gf-modal__fallback a { color: var(--teal-light, #14B8A6); }

/* Animated logo pulse — flows along the trend line into the arrow (#logo) */
@media (prefers-reduced-motion: reduce) { .gf-logo-pulse { display: none; } }