:root {
  --blue: #2e7bff; --deep: #1d5bff; --cyan: #22d3ee;
  --grad: linear-gradient(135deg, #1d5bff 0%, #2e7bff 55%, #22d3ee 100%);
  --ink: #0f1a2e; --ink-2: #44506a; --muted: #7b869c; --line: #e3eaf5; --bg: #f7faff; --card: #ffffff;
  --radius: 18px; --shadow: 0 18px 50px -24px rgba(16, 52, 140, .30);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: #1d5bff; text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }
.wrap { width: min(1040px, 100% - 40px); margin-inline: auto; }
.muted { color: var(--muted); }

/* Top bar */
.top { position: sticky; top: 0; z-index: 10; background: rgba(247, 250, 255, .85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand img { border-radius: 10px; }
.brand.small { font-size: .92rem; gap: 8px; }
.brand.small img { border-radius: 6px; }
nav { display: flex; align-items: center; gap: 18px; }
nav a { color: var(--ink-2); font-weight: 600; font-size: .95rem; }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--grad); color: #fff !important; font-weight: 700; padding: 13px 24px; border-radius: 999px; box-shadow: 0 10px 28px -10px rgba(29, 91, 255, .7); transition: transform .15s, box-shadow .15s; }
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(29, 91, 255, .85); }
.btn.small { padding: 8px 16px; font-size: .9rem; }
.btn.ghost { background: #fff; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--line); }

/* Landing */
.hero { position: relative; overflow: hidden; padding: 84px 0 92px; background:
  radial-gradient(700px 360px at 85% -10%, rgba(34, 211, 238, .28), transparent 70%),
  radial-gradient(640px 360px at -5% 10%, rgba(29, 91, 255, .2), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #cfe0ff; color: #1d5bff; font-weight: 700; font-size: .82rem; margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.05; letter-spacing: -.045em; margin: 0 0 18px; }
.hero h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 1.2rem; color: var(--ink-2); max-width: 32em; margin: 0 0 30px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.mark { justify-self: center; width: min(320px, 80%); aspect-ratio: 1; border-radius: 28%; box-shadow: 0 40px 90px -30px rgba(29, 91, 255, .6); transform: rotate(-4deg); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 10px 0 80px; }
.feature { background: var(--card); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.feature b { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.feature p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.feature .dot { width: 38px; height: 38px; border-radius: 12px; background: var(--grad); margin-bottom: 14px; display: grid; place-items: center; color: #fff; font-weight: 800; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .mark { display: none; } .features { grid-template-columns: 1fr; } }

/* Docs */
.doc-hero { background: var(--grad); color: #fff; padding: 56px 0 64px; }
.doc-hero h1 { margin: 0 0 8px; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.035em; }
.doc-hero .kicker { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 800; opacity: .85; }
.doc-hero .sub { margin: 0; opacity: .92; }
.prose { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); padding: 40px clamp(22px, 5vw, 56px); margin-top: -32px; margin-bottom: 64px; max-width: 820px; }
.prose > h1:first-child, .prose > p:first-of-type em:only-child { display: none; }
.prose h2 { font-size: 1.25rem; letter-spacing: -.02em; margin: 2em 0 .5em; padding-top: 1em; border-top: 1px solid var(--line); }
.prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: .5em; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--blue); }
.prose code { background: #eef4ff; color: #1d4fd8; padding: .12em .4em; border-radius: 6px; font-size: .9em; }
.prose strong { color: var(--ink); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 28px 0; font-size: .9rem; }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot .links { display: flex; gap: 18px; }
.foot .links a { color: var(--ink-2); font-weight: 600; }