/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/outfit-500.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/outfit-600.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/outfit-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-500.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --navy:    #0A1628;
  --teal:    #00A88C;
  --teal-2:  #00BC9D;
  --white:   #FFFFFF;
  --navy-70: #3C4655;
  --navy-15: #E7E8EB;

  --container-max: 1200px;
  --pad-x: clamp(24px, 4.4vw, 56px);
  --section-y: clamp(64px, 8vw, 112px);
  /* Sticky-nav height. Used to:
       - offset scroll-padding-top for anchor links
       - shift each section's centered content down so it sits in the visual
         middle of the area below the nav, not the geometric middle of 100vh. */
  --nav-h: 84px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.section--light  { background: var(--white); color: var(--navy); }
/* Faint navy wash — same near-white feel, just enough to separate adjacent
   light sections without breaking the brand palette. */
.section--tinted { background: #F6F7F9; color: var(--navy); }

/* Content sections size to their content with comfortable vertical padding. */
.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.cta {
  padding-top: clamp(80px, 11vw, 144px);
  padding-bottom: clamp(80px, 11vw, 144px);
}

/* ---------- Hero: full-viewport with centered content ----------
   Only the hero fills the viewport; the rest of the page flows naturally.
   The sticky nav sits in document flow at the top, so a 100vh hero
   extends below the viewport by nav-h on initial load. To compensate,
   padding-bottom is heavier than padding-top by exactly nav-h — that
   lifts the flex-centered content up so it lands at the visual middle of
   the area *below* the nav (not at hero's geometric middle, which would
   sit too low). The vh-based clamps keep the buffer reasonable on short
   windows; 100svh keeps mobile honest when the URL bar toggles. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(8px, 3vh, 40px);
  padding-bottom: calc(var(--nav-h) + clamp(8px, 3vh, 40px));
}

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  max-width: 22ch;
  text-wrap: balance;
}
.display--md {
  font-size: clamp(36px, 4.6vw, 56px);
  max-width: 18ch;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-70);
  margin: 0 0 22px;
}
.eyebrow--light { color: rgba(255,255,255,0.62); }
.lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.55;
  color: var(--navy-70);
  max-width: 56ch;
  margin: 0 0 36px;
  text-wrap: pretty;
}
.lede--light { color: rgba(255,255,255,0.78); }
.prose {
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.7;
  color: var(--navy-70);
  max-width: 64ch;
  margin: 0 0 44px;
  text-wrap: pretty;
}
.prose--lead {
  font-size: clamp(20px, 1.75vw, 26px);
  line-height: 1.5;
  color: var(--navy);
  max-width: 64ch;
  margin: 0 0 clamp(40px, 5vw, 64px);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.prose--narrow { max-width: 52ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.15s var(--ease), background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn--sm { padding: 10px 16px; font-size: 14px; }
.btn--lg { padding: 18px 30px; font-size: 17px; gap: 10px; }
.btn--primary {
  background: var(--teal);
  color: var(--white);
}
.btn--primary:hover { transform: translateY(-1px); background: var(--teal-2); box-shadow: 0 6px 18px rgba(0,168,140,0.28); }
.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.28);
}
.btn--ghost:hover { border-color: rgba(255,255,255,0.55); }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,22,40,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo img { height: 44px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__links a {
  color: rgba(255,255,255,0.82);
  font-size: 15px;
  font-weight: 500;
}
.nav__links a:hover { color: var(--white); }
.nav__links a.btn { color: var(--white); }

/* ---------- Hero ---------- */
.hero {
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hero__inner {
  /* Allow the hero to span wider than the default container on large
     screens so the dot canvas has room to grow with the viewport. Floor
     at the standard container so narrower screens still feel consistent
     with the rest of the page. */
  max-width: clamp(var(--container-max), 85vw, 1600px);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.hero__copy { position: relative; z-index: 2; }
.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  /* Scale with both viewport width and height:
       - the clamp() grows the canvas from ~380px (tablet) up to 620px (very wide)
       - the inner min() caps it at 62vh so the square never demands more
         vertical room than the hero can give on short windows. */
  max-width: min(clamp(380px, 36vw, 620px), 62vh);
  margin-left: auto;
}
.dot-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Problem stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--navy-15);
  border-bottom: 1px solid var(--navy-15);
  margin-top: 4px;
}
.stat {
  padding: 32px 28px 28px 0;
  border-right: 1px solid var(--navy-15);
}
.stat:last-child { border-right: 0; padding-right: 0; }
.stat:not(:first-child) { padding-left: 28px; }
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.stat__value--accent { color: var(--teal); }
.stat__label {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy-70);
  max-width: 22ch;
}

/* ---------- Features ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 28px);
  margin-top: 8px;
}
.feature {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--navy-15);
  border-radius: 16px;
  padding: 18px 18px 22px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px -12px rgba(10,22,40,0.18);
  border-color: rgba(10,22,40,0.18);
}
.feature__visual {
  background: #F4F6F8;
  border-radius: 10px;
  aspect-ratio: 16 / 10;
  width: 100%;
  margin-bottom: 22px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature__visual svg { width: 100%; height: 100%; display: block; }
.feature__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  color: var(--teal);
  margin-bottom: 10px;
}
.feature__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 10px;
}
.feature__body {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--navy-70);
  margin: 0;
}

/* ---------- CTA close + form ---------- */
.cta {
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta__inner { position: relative; z-index: 2; max-width: 720px; }
.cta__visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.95;
  pointer-events: none;
}
.form {
  margin-top: 8px;
  max-width: 560px;
  position: relative;
  z-index: 2;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.field { display: block; margin-bottom: 14px; }
.field__label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin-bottom: 8px;
}
.field__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--navy);
  background: var(--navy-15);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.field__input::placeholder { color: var(--navy-70); opacity: 0.6; }
.field__input:hover { background: #EEEFF2; }
.field__input:focus {
  background: var(--white);
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0,168,140,0.18);
}
.field--error .field__input { border-color: #E26A6A; box-shadow: 0 0 0 4px rgba(226,106,106,0.15); }

.form__actions { margin-top: 18px; }
.btn--submit { min-width: 140px; position: relative; }
.btn--submit[disabled] { opacity: 0.85; cursor: progress; }
.btn__spinner {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.btn--submit.is-loading .btn__spinner { display: inline-block; }
.btn--submit.is-loading .btn__label { opacity: 0.7; }
@keyframes spin { to { transform: rotate(360deg); } }

.form__status {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  min-height: 1.5em;
  color: rgba(255,255,255,0.75);
}
.form__status.is-error { color: #FFB3B3; }
.form__status.is-success { color: var(--teal); }

.form.is-submitted .form__row,
.form.is-submitted .field,
.form.is-submitted .form__actions,
.form.is-submitted .form__status { display: none; }

.form__success {
  padding: 4px 0 0;
  max-width: 520px;
}
.form__success-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 10px;
}
.form__success-body {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin: 0 0 22px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,0.62);
  padding: 32px 0 40px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__logo { display: inline-flex; align-items: center; }
.footer__logo img { height: 40px; width: auto; }
.footer__meta {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 14px;
}
.footer__meta a:hover { color: var(--white); }

/* ---------- Reveal animation ---------- */
/* Elements start fully hidden and 40px below their layout position. The
   group observer in script.js triggers .is-in for every [data-reveal] inside
   a [data-reveal-group] together, so each section's content arrives as a
   unit. The translate distance is large enough to register as motion (not
   just a fade), but the easing is calm. */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.95s var(--ease),
    transform 0.95s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero__visual {
    order: 2;
    max-width: min(420px, 70vw);
    margin: 0 auto;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--navy-15);
    padding: 26px 0;
  }
  .stat:not(:first-child) { padding-left: 0; }
  .stat:last-child { border-bottom: 0; padding-bottom: 0; }
  .features { grid-template-columns: 1fr; gap: 24px; }
  .feature__visual { max-width: 520px; }
}
@media (max-width: 560px) {
  /* Nav vertical padding is tighter on small screens, so nav-h shrinks
     to match — keeps section content centered correctly below the nav. */
  :root { --nav-h: 72px; }
  .nav__inner { padding: 14px var(--pad-x); }
  .nav__links { gap: 16px; }
  .nav__links a:not(.btn) { display: none; }
  .hero__actions .btn--ghost { display: none; }
  .form__row { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}