/* ===== Vars ===== */
:root{
  /* Brand */
  --bg:#0f172a;         /* headings (deep navy) */
  --ink:#111827;        /* body text */
  --muted:#6b7280;      /* secondary text */
  --light:#f3f4f6;      /* light section bg */
  --card:#ffffff;
  --accent:#2563eb;     /* primary blue */
  --accent-ink:#ffffff;
  --ring:rgba(37,99,235,.25);
  --line:#e5e7eb;
  --shadow:0 8px 24px rgba(2,8,23,.08);

  /* Typography */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;

  /* Trust strip */
  --pill-h:44px;
  --pill-px:18px;
  --dot-size:6px;
  --gap-row:.75rem;
  --gap-col:2.25rem;
  --strip-bg:#0b1224;
  --strip-fg:#e5e7eb;
  --pill-bg:rgba(255,255,255,.06);
  --pill-bd:rgba(255,255,255,.12);
  --dot:rgba(255,255,255,.22);
  --strip-line:rgba(255,255,255,.06);

  /* Section flash */
  --flash-bg:rgba(19,86,231,.185);
  --flash-ring:rgba(37,99,235,.18);

  /* Misc */
  color-scheme:light;
  font-variant-numeric:tabular-nums;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font:16px/1.65 var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  color:var(--ink);
  background:#fff;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{filter:brightness(1.05)}

/* Headings */
h1,h2,h3,h4{color:var(--bg);margin:0 0 .6rem;letter-spacing:-.02em}
h1{font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.12}
h2{font-size:1.6rem}
h3{font-size:1.15rem}
.lead{max-width:62ch;color:var(--muted)}

/* Layout */
.container{width:min(1120px,92%);margin-inline:auto}
.section{padding:4rem 0}
.section.alt{background:var(--light)}
.grid3{display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr)}
.grid2{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr)}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(120%) blur(6px);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.brand{font-weight:700;color:var(--bg);letter-spacing:.2px}
.nav{display:flex;gap:1rem;align-items:center}
.nav-link{color:var(--ink);opacity:.9;padding:.35rem .4rem;border-radius:.5rem}
.nav-link.active{background:rgba(37,99,235,.10);color:var(--bg)}
.nav-toggle{display:none;background:none;border:0;font-size:1.4rem;line-height:1}

/* Buttons */
.btn{
  display:inline-block;background:var(--accent);color:var(--accent-ink);
  border-radius:.8rem;padding:.72rem 1rem;font-weight:700;box-shadow:var(--shadow)
}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:none;border:1px solid var(--line)}

/* ===== Hero ===== */
.hero{
  position:relative;padding:6rem 0 3.5rem;
  background:
    radial-gradient(1000px 400px at 20% -10%, rgba(37,99,235,.16), transparent 60%),
    radial-gradient(900px 380px at 90% -20%, rgba(15,23,42,.10), transparent 60%),
    linear-gradient(180deg,#f8fafc 0%, #fff 60%);
}
.hero-inner{position:relative;z-index:1}
.hero-break{display:block}
.cta{display:flex;gap:.8rem;margin-top:1.1rem}
.hero-accent{
  position:absolute;inset:auto 0 -1px 0;height:70px;
  background:linear-gradient(180deg,transparent,rgba(15,23,42,.06),transparent);
  pointer-events:none;
}

/* ===== Cards ===== */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:1rem;
  padding:1.25rem;box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(2,8,23,.12)}
.card-icon{width:40px;height:40px;border-radius:.8rem;background:rgba(37,99,235,.10);color:var(--accent);display:grid;place-items:center;margin-bottom:.5rem}
.ticks{padding-left:1.1rem}
.ticks li{margin:.35rem 0}

/* ===== Trust Strip / Badges (robust) ===== */
.strip{
  background:var(--strip-bg); color:var(--strip-fg);
  padding:1.4rem 0; border-top:1px solid var(--strip-line); border-bottom:1px solid var(--strip-line);
}

/* 4 equal columns on desktop. Pills are centered in their cell. */
.badges{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  justify-items:center;               /* center pill inside each column */
  align-items:center;
  column-gap:var(--gap-col);
  row-gap:var(--gap-row);
  max-width:1100px; margin:0 auto;
}

/* Pill content centring fix */
.badge{
  /* visual */
  background: var(--pill-bg);
  border: 1px solid var(--pill-bd);
  border-radius: 999px;

  /* size */
  height: var(--pill-h);
  padding-inline: var(--pill-px);

  /* typography */
  font-size: .92rem;
  line-height: 1;
  white-space: nowrap;

  /* true centring (avoids baseline weirdness) */
  display: grid;
  place-items: center;

  position: relative; /* keeps dot working */
}

/* keep the separator dot aligned with the new centring */
.badge::after{
  content:"";
  position:absolute;
  top:50%;
  right: calc(-.5 * var(--gap-col));
  width: var(--dot-size);
  height: var(--dot-size);
  transform: translate(50%, -50%);
  border-radius:50%;
  background: var(--dot);
  pointer-events: none;
}

.badge:nth-child(4n)::after{ display:none; }  /* last col in the 4-col row */

/* Tablet: 2x2 grid, no dots (avoid cross-row artifacts) */
@media (max-width:1000px){
  .badges{
    grid-template-columns:repeat(2, 1fr);
    column-gap:1.25rem; row-gap:.75rem;
  }
  .badge{ width:100%; justify-self:center; }
  .badge::after{ display:none; }
}

/* Mobile: single column, full-width pills */
@media (max-width:620px){
  .badges{ grid-template-columns:1fr; row-gap:.6rem; }
  .badge{ width:100%; }
}


/* ===== Feature list ===== */
.feature{background:#fff;border:1px solid var(--line);border-radius:.9rem;padding:1rem}

/* ===== Section flash (one-time) ===== */
.section .container{position:relative}
.container.__flash::after{
  content:"";position:absolute;inset:-8px;border-radius:12px;
  background:var(--flash-bg);
  box-shadow:0 0 0 1px var(--flash-ring), 0 10px 28px rgba(37,99,235,.12);
  animation:flashFade .8s ease-out forwards;pointer-events:none;
}
@keyframes flashFade{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.container.__flash::after{animation:none;opacity:0}}

/* ===== Contact ===== */
.section.contact{
  background:#f8f9fb;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:3rem 0 4rem;
}
.section.contact .container{max-width:980px}
.contact .form{
  margin-top:1rem;display:grid;gap:1rem;background:#fff;border-radius:.9rem;padding:2rem;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}
.contact .grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact label{display:grid;gap:.35rem;font-weight:500;color:var(--bg)}
.contact input,.contact select,.contact textarea{
  background:#fff;border:1px solid var(--line);border-radius:.75rem;padding:.9rem 1rem;
}
.contact textarea{min-height:160px;resize:vertical}
.contact input:focus,.contact select:focus,.contact textarea:focus{
  outline:none;border-color:#c7d2fe;box-shadow:0 0 0 4px var(--ring);
}
/* CTA */
.section.contact .btn{
  width:auto;min-width:220px;height:52px;padding:0 22px;border:0;border-radius:.9rem;
  background:linear-gradient(180deg,#3b82f6 0%, #2563eb 100%);color:#fff;font-weight:700;letter-spacing:.2px;
  justify-self:end;margin-top:.75rem;box-shadow:0 8px 16px rgba(37,99,235,.14);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.section.contact .btn:hover{filter:brightness(1.03);transform:translateY(-1px);box-shadow:0 10px 18px rgba(37,99,235,.16)}
.section.contact .btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring), 0 8px 16px rgba(37,99,235,.14)}
.section.contact .btn:active{transform:none}
.section.contact .btn::after{content:"→";margin-left:.5rem;font-weight:700;opacity:.9;transition:transform .12s ease}
.section.contact .btn:hover::after{transform:translateX(2px)}
.contact .help{color:var(--muted);font-weight:400}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line);background:#fff;padding:1rem 0}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}
.foot-nav{display:flex;gap:1rem}

/* ===== Responsive ===== */
@media (max-width:900px){ .grid3{grid-template-columns:1fr 1fr} }
@media (max-width:760px){
  .grid3,.grid2{grid-template-columns:1fr}
  .nav{
    position:fixed;right:1rem;top:64px;background:#fff;border:1px solid var(--line);
    border-radius:.9rem;box-shadow:var(--shadow);padding:.6rem;display:none;flex-direction:column;gap:.4rem;min-width:180px
  }
  .nav.open{display:flex}
  .nav-toggle{display:block}
  .contact .grid2{grid-template-columns:1fr}
  .section.contact .btn{width:100%;justify-self:stretch}
}