:root{
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --ring: #e2e8f0;
  --brand1: #e0f2fe;
  --brand2: #eef2ff;
  --primary: #111827;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, 'Apple Color Emoji','Segoe UI Emoji'; color:var(--text); background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.7);backdrop-filter:blur(6px);border-bottom:1px solid var(--ring)}
.nav{display:flex;gap:24px}
.nav a{font-size:14px;text-decoration:none;color:var(--text);opacity:.85}
.nav a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--text);color:#fff;border:none;border-radius:16px;padding:10px 16px;font-weight:600;text-decoration:none}
.btn.secondary{background:#111827}
.badge{display:inline-flex;align-items:center;border:1px solid var(--ring);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:600}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;box-shadow:0 10px 20px rgba(2,6,23,0.04)}
.card .p{padding:20px}
.hero{position:relative;overflow:hidden}
.hero .b1{position:absolute;top:-120px;right:-120px;width:320px;height:320px;background:var(--brand1);filter:blur(60px);border-radius:999px;z-index:-1}
.hero .b2{position:absolute;bottom:-120px;left:-120px;width:320px;height:320px;background:var(--brand2);filter:blur(60px);border-radius:999px;z-index:-1}
.section{padding:64px 0}
h1{font-size:40px;line-height:1.1;margin:16px 0}
h2{font-size:28px;margin:0}
h3{font-size:22px;margin:0}
p{color:var(--muted);line-height:1.6}
.kbd{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.faq-grid{display:grid;gap:16px}
.faq-grid > .card{padding:16px}
.footer{border-top:1px solid var(--ring);background:#fff}
.small{font-size:12px;color:var(--muted)}
a.inline{color:inherit;text-decoration:none;opacity:.9}
a.inline:hover{opacity:1;text-decoration:underline}
.cta{border-radius:24px;background:linear-gradient(135deg, var(--brand1), var(--brand2));border:1px solid var(--ring);padding:24px}
@media (min-width: 768px){
  .grid-md-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-md-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  h1{font-size:54px}
}