/* ============================================================
   ForecourtIQ — Design System
   Navy / electric-blue / cyan · Space Grotesk + IBM Plex
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* brand */
  --ink:        #0A2540;   /* brand navy */
  --ink-deep:   #061528;   /* deepest */
  --navy-900:   #08203A;
  --navy-800:   #0D2C4A;
  --navy-700:   #16405F;
  --navy-600:   #1E537A;

  --blue:       #2D7BF4;   /* primary action */
  --blue-bright:#4C93FF;
  --cyan:       #16A6E0;   /* brand IQ cyan */
  --cyan-bright:#39C6F4;

  --paper:      #F3F7FB;
  --paper-2:    #E9F0F8;
  --line:       #E1E9F2;
  --line-dk:    rgba(255,255,255,.12);
  --white:      #FFFFFF;

  --ink-text:   #0A2540;
  --muted:      #57708A;
  --muted-2:    #7E93AB;
  --on-dark:    #C5D6E8;
  --on-dark-2:  #8AA2BC;

  --live:       #FF4B4B;   /* REC / urgency */
  --ok:         #1FB877;   /* online / delivered */
  --warn:       #F5A623;

  /* type */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* shape */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(10,37,64,.06), 0 2px 6px rgba(10,37,64,.05);
  --shadow:    0 4px 14px rgba(10,37,64,.08), 0 18px 40px -18px rgba(10,37,64,.22);
  --shadow-lg: 0 8px 24px rgba(10,37,64,.10), 0 40px 80px -30px rgba(8,32,58,.45);
  --glow-blue: 0 0 0 1px rgba(45,123,244,.35), 0 12px 40px -8px rgba(45,123,244,.45);

  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 64px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink-text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }

::selection{ background: rgba(45,123,244,.22); }

/* ---------- layout ---------- */
.wrap{ max-width: var(--wrap); margin-inline:auto; padding-inline: var(--pad); }
.section{ padding-block: clamp(64px, 9vw, 130px); }
.center{ text-align:center; }

/* anchored sections clear the sticky nav when jumped to */
:target{ scroll-margin-top: 90px; }
#problem, #how, #benefits, #calculator, #watch{ scroll-margin-top: 90px; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family: var(--display); font-weight:600; line-height:1.05; letter-spacing:-.02em; margin:0; color: var(--ink-text); }
h1{ font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing:-.035em; }
h2{ font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing:-.03em; }
h3{ font-size: clamp(1.25rem, 2vw, 1.6rem); }
p{ margin:0; }

.eyebrow{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing:.16em;
  text-transform: uppercase;
  font-weight:500;
  color: var(--cyan);
}
.lead{ font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--muted); line-height:1.6; }
.on-dark .lead, .lead.on{ color: var(--on-dark); }

/* explicit, reliable bold across all devices (avoids weak synthetic "bolder" on mobile) */
b, strong{ font-weight: 700; }
.lead b, .lead strong{ font-weight: 700; color: var(--ink-text); }
.lead.on b, .lead.on strong, .on-dark .lead b, .on-dark .lead strong{ color: #fff; }
p b, p strong, li b, li strong{ font-weight: 700; }

.badge{
  display:inline-flex; align-items:center; gap:.55em;
  font-family: var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  padding:.5em .9em; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--line-dk);
  color: var(--on-dark);
}
.badge .dot{ width:7px; height:7px; border-radius:50%; background: var(--cyan); box-shadow:0 0 0 4px rgba(22,166,224,.18); }
.badge--light{ background: var(--paper); border-color: var(--line); color: var(--muted); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family: var(--sans); font-weight:600; font-size:1rem;
  padding:.92em 1.5em; border-radius:999px; border:1px solid transparent;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{
  background: var(--blue); color:#fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 26px -10px rgba(45,123,244,.7);
}
.btn--primary:hover{ background: var(--blue-bright); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 16px 36px -12px rgba(45,123,244,.85); transform: translateY(-2px); }
.btn--ghost{ background: transparent; color: var(--on-dark); border-color: var(--line-dk); }
.btn--ghost:hover{ border-color: rgba(255,255,255,.4); color:#fff; background: rgba(255,255,255,.05); }
.btn--dark{ background: var(--ink); color:#fff; }
.btn--dark:hover{ background: var(--navy-800); transform: translateY(-2px); }
.btn--light{ background:#fff; color: var(--ink); border-color: var(--line); }
.btn--light:hover{ box-shadow: var(--shadow); transform: translateY(-2px); }
.btn--lg{ padding:1.05em 1.9em; font-size:1.06rem; }
.btn .arr{ transition: transform .2s ease; }
.btn:hover .arr{ transform: translateX(3px); }

/* ---------- nav ---------- */
.nav{
  position: sticky; top:0; z-index:60;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
/* top (transparent) state: soft shadow keeps white logo/links readable over the hero */
.nav .nav__logo img{ filter: drop-shadow(0 1px 10px rgba(4,12,22,.55)); transition: filter .3s ease; }
.nav .nav__links a{ text-shadow: 0 1px 8px rgba(4,12,22,.5); }
.nav.is-stuck .nav__logo img,
.nav--solid .nav__logo img{ filter: none; }
.nav.is-stuck .nav__links a,
.nav--solid .nav__links a{ text-shadow: none; }
/* homepage top: match the hero so there's no white strip behind the nav (seamless, no banner line) */
.nav[data-sticky]:not(.is-stuck){ background: var(--navy-900); }
.nav__row{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.nav__logo img{ height:30px; width:auto; }
.nav__logo .light{ display:block; }
.nav__logo .dark{ display:none; }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{ font-size:.95rem; font-weight:500; color: var(--on-dark); transition: color .18s ease; }
.nav__links a:hover{ color:#fff; }
.nav__cta{ display:flex; align-items:center; gap:14px; }
.nav__burger{ display:none; }

/* scrolled state -> solid white nav with dark logo */
.nav.is-stuck{ background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border-bottom-color: var(--line); box-shadow: 0 4px 20px -12px rgba(10,37,64,.2); }
.nav.is-stuck .nav__logo .light{ display:none; }
.nav.is-stuck .nav__logo .dark{ display:block; }
.nav.is-stuck .nav__links a{ color: var(--muted); }
.nav.is-stuck .nav__links a:hover{ color: var(--ink); }
.nav.is-stuck .btn--ghost{ color: var(--ink); border-color: var(--line); }
.nav.is-stuck .btn--ghost:hover{ background: var(--paper); border-color: var(--muted-2); color: var(--ink); }

/* nav on light pages (book-demo, faqs) */
.nav--solid{ background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.nav--solid .nav__logo .light{ display:none; }
.nav--solid .nav__logo .dark{ display:block; }
.nav--solid .nav__links a{ color: var(--muted); }
.nav--solid .nav__links a:hover{ color: var(--ink); }
.nav--solid .btn--ghost{ color: var(--ink); border-color: var(--line); }

/* ---------- mobile menu ---------- */
.mobile-menu{
  position: fixed; inset:0; z-index:55;
  background: rgba(6,21,40,.97); backdrop-filter: blur(8px);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  padding:40px;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ font-family: var(--display); font-size:1.6rem; font-weight:600; color:#fff; }
.mobile-menu a.btn{ font-family: var(--sans); font-size:1rem; margin-top:12px; }

/* ---------- footer ---------- */
.footer{ background: var(--ink-deep); color: var(--on-dark-2); padding-block: 72px 36px; }
.footer a{ transition: color .18s ease; }
.footer a:hover{ color:#fff; }
.footer__grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:48px; }
.footer__logo img{ height:30px; margin-bottom:18px; }
.footer h4{ font-family: var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--on-dark-2); font-weight:600; margin-bottom:16px; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer ul a{ color: var(--on-dark); font-size:.95rem; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:56px; padding-top:24px; border-top:1px solid var(--line-dk); font-size:.85rem; color: var(--on-dark-2); }

/* ---------- reveal ---------- */
.reveal{ transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js .reveal{ opacity:0; transform: translateY(22px); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* ---------- cards ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding:30px; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color:#cfe0f0; }

@media (max-width: 1200px){
  /* 6 nav items only fit comfortably above ~1200px — below it, use the burger menu */
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
  /* keep Book a Demo visible but pinned to the right, beside the burger */
  .nav__cta{ margin-left:auto; margin-right:6px; }
}
@media (max-width: 920px){
  .footer__grid{ grid-template-columns: 1fr 1fr; gap:32px; }
}
@media (max-width: 600px){
  /* nav */
  .nav__row{ height:62px; gap:12px; }
  .nav__logo img{ height:25px; }
  .nav__cta{ display:none; }              /* Book a Demo lives in the burger menu on mobile */
  .nav__burger{ padding:.6em .7em; }

  /* headings scale down so they never cram */
  h1{ font-size: clamp(2.05rem, 8.5vw, 3rem); }
  h2{ font-size: clamp(1.6rem, 6.6vw, 2.3rem); }

  /* comfortable tap targets */
  .btn{ padding:.9em 1.35em; }
  .btn--lg{ padding:1em 1.5em; font-size:1rem; }

  /* footer */
  .footer{ padding-block: 52px 32px; }
  .footer__grid{ grid-template-columns: 1fr; gap:30px; }
  .footer ul a{ display:inline-block; padding-block:3px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:14px; margin-top:40px; }

  /* mobile menu polish */
  .mobile-menu{ gap:22px; justify-content:center; }
  .mobile-menu a{ font-size:1.45rem; }
  .mobile-menu a.btn{ width:min(82%, 320px); }
}