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

:root {
  --navy: #0B1B3B;
  --navy-700: #13284f;
  --navy-800: #0E2147;
  --navy-900: #081530;
  --blue: #2F6BFF;
  --blue-600: #1E53E0;
  --blue-200: #9DC0FF;
  --blue-50: #EEF3FF;
  --steel: #6B7890;
  --steel-400: #8A94A6;
  --ink: #0B1B3B;
  --paper: #F6F9FD;
  --mist: #E9EFF8;
  --cloud: #FAFBFD;
  --line: #E7EBF2;
  --line-strong: #D6DDEA;
  --green: #1F9D6B;
  --green-50: #EAF8F2;
  --amber: #E0922A;
  --amber-50: #FFF4E4;
  --red: #E5484D;
  --red-50: #FDECEC;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --fs-display: clamp(42px, 7vw, 72px);
  --fs-h1: clamp(34px, 5vw, 52px);
  --fs-h2: clamp(27px, 4vw, 38px);
  --fs-h3: 22px;
  --fs-lead: clamp(17px, 2vw, 20px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;
  --r-sm: 8px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-pill: 999px;
  --sh-sm: 0 1px 3px rgba(11, 27, 59, .08);
  --sh-md: 0 8px 22px rgba(11, 27, 59, .12);
  --sh-lg: 0 26px 70px rgba(11, 27, 59, .16);
  --sh-blue: 0 14px 34px rgba(47, 107, 255, .28);
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(64px, 9vw, 120px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: clip;
}
body.no-scroll { overflow: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 3px; }

.container { width: min(var(--maxw), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
.section { padding-block: var(--section); }
.eyebrow {
  color: var(--blue);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0; }
.lead { color: var(--steel); font-size: var(--fs-lead); line-height: 1.65; }
.muted { color: var(--steel); }
.accent { color: var(--blue); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--blue); color: white; box-shadow: var(--sh-blue); }
.btn--primary:hover { background: var(--blue-600); }
.btn--dark { background: var(--navy); color: white; }
.btn--dark:hover { background: var(--navy-700); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--navy); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn--lg { min-height: 52px; padding-inline: var(--s6); font-size: 15px; }
.btn--sm { min-height: 36px; padding-inline: var(--s4); font-size: var(--fs-xs); }
.btn--reversed { border-color: rgba(255,255,255,.24); color: white; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  width: fit-content;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--blue);
}
.pill--ghost { background: rgba(255,255,255,.10); color: white; }

.tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.tag--green { background: var(--green-50); color: var(--green); }
.tag--amber { background: var(--amber-50); color: #996015; }
.tag--red { background: var(--red-50); color: var(--red); }
.tag--blue { background: var(--blue-50); color: var(--blue-600); }

.card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: white;
  box-shadow: var(--sh-sm);
}
.feature {
  display: grid;
  gap: var(--s4);
  min-height: 250px;
  padding: clamp(22px, 3vw, 32px);
  transition: transform .18s ease, box-shadow .18s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.feature p { color: var(--steel); }
.icon-chip {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--navy);
  color: white;
}
.input {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--s4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  background: white;
}
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); outline: 0; }
.stat strong {
  display: block;
  color: currentColor;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
}
.stat span { color: var(--steel); font-size: var(--fs-sm); }

.bframe {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: white;
  box-shadow: var(--sh-lg);
}
.bbar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--cloud);
}
.light { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.light:nth-child(1) { background: #ff6b64; }
.light:nth-child(2) { background: #ffc44d; }
.light:nth-child(3) { background: #36c477; }
.url-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--steel);
  background: white;
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.bbody { padding: clamp(16px, 2.5vw, 26px); }
.softblock {
  border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 64px);
}
.bg-blue50 { background: var(--blue-50); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}