:root {
  --bg:#fbfbfc; --bg-alt:#f4f5f8; --ink:#0a0d12; --text:#0a0d12;
  --text-mid:#525a66; --text-light:#828b97; --border:#e8eaef; --rule:#eeeff3;
  --accent:#2f6df6; --accent-deep:#1b4fd1; --ok:#1a7f3c; --bad:#c0362c;
  --r:14px; --shadow-card:0 1px 2px rgba(10,13,18,.04);
  --shadow-panel:0 1px 3px rgba(10,13,18,.06), 0 24px 48px -28px rgba(10,13,18,.22);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-deep); }
.container { max-width:1120px; margin:0 auto; padding:0 28px; }
section { padding:92px 0; border-bottom:1px solid var(--rule); position:relative; }
.alt { background:var(--bg-alt); }
h1, h2, h3 { font-family:"Inter Tight","Inter",sans-serif; color:var(--text); margin:0; }
h1 { font-size:clamp(40px,5.4vw,64px); font-weight:600; line-height:1.03; letter-spacing:-.035em; max-width:900px; }
h2 { font-size:clamp(28px,3.2vw,40px); font-weight:600; line-height:1.1; letter-spacing:-.03em; margin:0 0 16px; max-width:760px; }
h3 { font-size:18px; font-weight:600; line-height:1.32; letter-spacing:-.015em; margin:0 0 8px; }
p { margin:0 0 14px; color:var(--text-mid); }
.lead { font-size:clamp(17px,1.9vw,20px); line-height:1.5; color:var(--text-mid); font-weight:450; max-width:700px; }
.eyebrow {
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color:var(--accent); margin:0 0 18px;
}
.nav { position:sticky; top:0; z-index:100; background:rgba(251,251,252,.86); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--rule); }
.nav-inner { max-width:1120px; margin:0 auto; padding:15px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { font-family:"Inter Tight",sans-serif; font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--text); }
.brand span { color:var(--accent); }
.nav-cta { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 17px; border-radius:9px; font-size:14px; font-weight:500; color:var(--text-mid); white-space:nowrap; }
.btn:hover { text-decoration:none; background:rgba(10,13,18,.04); color:var(--text); }
.btn-primary { background:var(--ink); color:#fff; box-shadow:0 1px 2px rgba(10,13,18,.22); }
.btn-primary:hover { color:#fff; background:var(--ink); transform:translateY(-1px); box-shadow:0 8px 22px -8px rgba(10,13,18,.45); }
.btn-lg { padding:13px 22px; font-size:15px; border-radius:10px; }
.hero { padding:118px 0 92px; overflow:hidden; }
.hero::before { content:""; position:absolute; top:-180px; left:50%; transform:translateX(-46%); width:1000px; height:600px; background:radial-gradient(ellipse at center, rgba(47,109,246,.09), rgba(47,109,246,0) 68%); pointer-events:none; }
.hero .container { position:relative; z-index:1; }
.hero h1 { margin-bottom:26px; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero .lead { margin-bottom:34px; }
.hero-cta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.hero-meta { margin-top:42px; display:flex; gap:0; flex-wrap:wrap; padding-top:30px; border-top:1px solid var(--border); }
.hero-meta > div { padding:0 30px; border-left:1px solid var(--border); font-size:13.5px; color:var(--text-light); flex:1; min-width:220px; }
.hero-meta > div:first-child { padding-left:0; border-left:none; }
.hero-meta strong { display:block; color:var(--text); font-weight:600; font-size:15px; margin-bottom:3px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:42px; }
.card { border:1px solid var(--border); border-radius:var(--r); padding:24px; background:#fff; box-shadow:var(--shadow-card); }
.card .n { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; color:var(--accent); margin-bottom:16px; font-weight:600; }
.card p { font-size:14px; line-height:1.56; margin:0; }
.split { display:grid; grid-template-columns:1fr 1.05fr; gap:72px; align-items:center; }
.panel { background:#fff; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-panel); }
.panel-head { padding:15px 20px; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; background:linear-gradient(180deg,#fcfcfd,#f7f8fa); }
.panel-head .t { font-size:13px; font-weight:600; color:var(--text); }
.pill { font-size:10.5px; color:var(--text-light); font-family:"JetBrains Mono",ui-monospace,monospace; background:#fff; border:1px solid var(--border); padding:3px 9px; border-radius:999px; }
.panel-row { padding:15px 20px; display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--rule); font-size:14px; color:var(--text-mid); }
.panel-row:last-child { border-bottom:none; }
.panel-row strong { color:var(--accent-deep); font-weight:600; text-align:right; }
.row { padding:13px 20px; display:flex; align-items:center; gap:13px; font-size:13.5px; border-bottom:1px solid var(--rule); }
.row:last-child { border-bottom:none; }
.dot { width:19px; height:19px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.row.ok .dot { background:#e7f6ec; color:var(--ok); }
.row.bad .dot { background:#fbe9e7; color:var(--bad); }
.row .name { color:var(--text); flex:1; line-height:1.4; }
.tag { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; color:var(--text-light); padding:3px 8px; border:1px solid var(--border); border-radius:5px; white-space:nowrap; }
.examples { display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--border); margin-top:42px; }
.example { padding:30px 36px 28px 0; border-bottom:1px solid var(--border); }
.example:nth-child(odd) { border-right:1px solid var(--border); }
.example:nth-child(even) { padding-left:36px; }
.marker { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; color:var(--accent); margin-bottom:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.quote { background:#fff; border:1px solid var(--border); border-left:2.5px solid var(--ink); padding:13px 16px; font-size:14px; color:var(--text); font-style:italic; line-height:1.5; border-radius:0 10px 10px 0; margin-top:10px; }
.faq { max-width:760px; }
.faq-item { padding:22px 0; border-top:1px solid var(--border); }
.faq-item:last-child { border-bottom:1px solid var(--border); }
.faq-item p { font-size:15px; margin:0; }
.cta { background:var(--ink); color:#fff; text-align:center; border-bottom:none; overflow:hidden; }
.cta h2 { color:#fff; max-width:680px; margin:0 auto 14px; }
.cta p { color:#aeb6c2; font-size:18px; max-width:620px; margin:0 auto 30px; }
.cta .btn-primary { background:#fff; color:var(--ink); }
.cta .btn-primary:hover { background:#fff; color:var(--ink); }
footer { background:var(--ink); color:#8a929e; padding:40px 0 30px; font-size:13.5px; }
.foot-inner { max-width:1120px; margin:0 auto; padding:0 28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; align-items:center; }
.foot-inner .brand { color:#fff; font-size:17px; }
.foot-links { display:flex; gap:24px; flex-wrap:wrap; }
.foot-links a { color:#8a929e; }
.foot-links a:hover { color:#fff; }
@media (max-width:860px) {
  section { padding:64px 0; } .hero { padding:78px 0 60px; }
  .grid, .split, .examples { grid-template-columns:1fr; }
  .example:nth-child(odd) { border-right:none; padding-right:0; }
  .example:nth-child(even) { padding-left:0; }
  .hero-meta > div { padding:0; border-left:none; flex:1 1 100%; }
  .nav-inner, .foot-inner { align-items:flex-start; flex-direction:column; }
}