:root {
  color-scheme: light;
  --bg: #f6f8fb;
  --surface: #ffffff;
  --line: #d7dee8;
  --text: #101828;
  --muted: #5f6c80;
  --brand: #3157d5;
  --cyan: #0f8f83;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:where(a, button):focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 10px; }

.glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(760px 440px at 76% -8%, rgba(49, 87, 213, .10), transparent 72%), radial-gradient(620px 420px at 5% 18%, rgba(15, 143, 131, .05), transparent 72%);
}
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 5; padding: 9px 13px; color: #fff; background: var(--brand); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.topbar {
  width: min(1180px, calc(100% - 40px)); min-height: 72px; margin: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { border-radius: 10px; box-shadow: 0 8px 28px rgba(91, 124, 255, .25); }
.brand span { color: var(--muted); }
.brand b { color: var(--text); }
.topbar nav { display: flex; align-items: center; gap: 22px; }
.topbar nav > a:not(.button) { color: var(--muted); font-size: 13px; text-decoration: none; }
.topbar nav > a:hover { color: var(--brand); }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 15px; color: var(--brand); font-size: 13px; font-weight: 700; text-decoration: none;
  border: 1px solid rgba(49, 87, 213, .38); border-radius: 10px; background: #fff;
}
.button.primary { color: #fff; border: 0; background: linear-gradient(135deg, var(--brand), #5b7cff 52%, var(--cyan)); box-shadow: 0 12px 36px rgba(91, 124, 255, .24); }

main { width: min(1180px, calc(100% - 40px)); margin: auto; }
.hero { padding: 92px 0 54px; }
.eyebrow { margin: 0 0 18px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 920px; margin-bottom: 24px; font-size: clamp(48px, 8vw, 94px); line-height: .96; letter-spacing: -.055em; }
h1 span { color: var(--brand); }
.lede { max-width: 680px; color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.65; }
.facts { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 30px 0 0; list-style: none; }
.facts li { padding: 7px 11px; color: #344054; font-size: 12px; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; background: #fff; }

.feature { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(22, 33, 58, .13); }
.feature a { display: block; overflow: hidden; border-radius: 15px; background: #030407; }
.feature img { width: 100%; height: auto; }
.feature figcaption { padding: 13px 3px 0; color: var(--muted); font-size: 12px; }

.walkthrough { padding: 112px 0 40px; }
.section-heading { max-width: 720px; margin-bottom: 42px; }
.section-heading h2, .security h2, .cta h2 { margin-bottom: 0; font-size: clamp(30px, 5vw, 52px); line-height: 1.08; letter-spacing: -.04em; }
.step { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1fr); align-items: center; gap: 54px; margin: 0 0 72px; }
.step.reverse .copy { order: 2; }
.step.reverse img { order: 1; }
.step .copy span { display: block; margin-bottom: 20px; color: var(--brand); font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.step h3 { margin-bottom: 13px; font-size: 28px; letter-spacing: -.03em; }
.step p { margin-bottom: 0; color: var(--muted); line-height: 1.7; }
.step img { width: 100%; max-height: 560px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 16px; background: #16213a; box-shadow: 0 24px 60px rgba(22, 33, 58, .12); }

.security { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 50px; margin: 60px 0 90px; padding: 44px; border: 1px solid rgba(15, 143, 131, .24); border-radius: 18px; background: linear-gradient(135deg, rgba(15, 143, 131, .07), rgba(49, 87, 213, .03)); }
.security p:last-child { margin-bottom: 0; color: var(--muted); line-height: 1.75; }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 34px; padding: 48px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }

footer { width: min(1180px, calc(100% - 40px)); margin: 80px auto 0; padding: 28px 0 42px; display: flex; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .topbar { min-height: 64px; }
  .topbar nav > a:not(.button) { display: none; }
  .hero { padding-top: 66px; }
  .step, .security { grid-template-columns: 1fr; gap: 24px; }
  .step.reverse .copy, .step.reverse img { order: initial; }
  .security { padding: 30px; }
  .cta { align-items: flex-start; flex-direction: column; padding: 30px; }
  footer { flex-direction: column; }
}