:root{--primary:#4f46e5;--primary-dark:#4338ca;--primary-50:#eef2ff;--ink:#111827;--muted:#4b5563;--line:#e5e7eb;--bg:#f9fafb;--ok:#16a34a;--radius:14px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6}img{max-width:100%}a{color:inherit}.container{width:min(1080px,100% - 40px);margin-inline:auto}.site-header{z-index:10;backdrop-filter:blur(8px);border-bottom:1px solid var(--line);background:#ffffffe6;position:sticky;top:0}.bar{justify-content:space-between;align-items:center;height:64px;display:flex}.brand{align-items:center;gap:10px;font-size:1.1rem;font-weight:700;text-decoration:none;display:flex}.nav{align-items:center;gap:20px;font-size:.95rem;display:flex}.nav a{color:var(--muted);text-decoration:none}.nav a:hover{color:var(--ink)}.btn{border-radius:10px;padding:12px 22px;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s;display:inline-block}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{color:var(--ink);border:1px solid var(--line);background:#fff}.btn-secondary:hover{border-color:#cbd5e1}.nav .btn-ghost{border:1px solid var(--line);color:var(--ink);background:#fff;padding:8px 16px}.hero{background:linear-gradient(180deg, var(--primary-50), var(--bg));padding:72px 0 56px}.hero-grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:48px;display:grid}.eyebrow{color:var(--primary);letter-spacing:.02em;margin:0 0 12px;font-size:.9rem;font-weight:600}h1{letter-spacing:-.02em;margin:0 0 18px;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.1}.lead{color:var(--muted);max-width:34ch;margin:0 0 28px;font-size:1.15rem}.cta{flex-wrap:wrap;gap:12px;display:flex}.note{color:var(--muted);margin:18px 0 0;font-size:.9rem}.card-demo{border:1px solid var(--line);background:#fff;border-radius:20px;justify-self:center;width:100%;max-width:380px;padding:24px;box-shadow:0 20px 40px -24px #4f46e559}.demo-top{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.chip{background:var(--primary-50);color:var(--primary-dark);border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:600}.streak{color:#ea580c;font-size:.9rem;font-weight:600}.demo-q{margin:0 0 14px;font-size:1.35rem;font-weight:700}.demo-options{gap:10px;margin:0 0 18px;padding:0;list-style:none;display:grid}.demo-options li{border:1px solid var(--line);border-radius:10px;padding:12px 14px}.demo-options li.ok{border-color:var(--ok);color:#166534;background:#f0fdf4;font-weight:600}.demo-bar{background:var(--line);border-radius:999px;height:8px;overflow:hidden}.demo-bar span{background:var(--primary);width:20%;height:100%;display:block}.demo-foot{color:var(--muted);margin:8px 0 0;font-size:.8rem}.section{padding:72px 0}.section.alt{border-block:1px solid var(--line);background:#fff}h2{letter-spacing:-.01em;margin:0 0 8px;font-size:clamp(1.6rem,3.5vw,2.1rem)}.section-lead{color:var(--muted);margin:0 0 36px}.grid3{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.feature{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:24px}.feature .emoji{font-size:1.8rem}.feature h3{margin:10px 0 6px;font-size:1.15rem}.feature p{color:var(--muted);margin:0}.steps ol{gap:10px;margin:20px 0 28px;padding-left:22px;font-size:1.05rem;display:grid}.site-footer{color:var(--muted);padding:28px 0;font-size:.9rem}.foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.foot nav{flex-wrap:wrap;gap:18px;display:flex}.foot a{text-decoration:none}.foot a:hover{color:var(--ink);text-decoration:underline}a:focus-visible{outline-offset:2px;border-radius:6px;outline:3px solid #a5b4fc}@media (width<=820px){.hero{padding:48px 0 40px}.hero-grid{grid-template-columns:1fr;gap:36px}.grid3{grid-template-columns:1fr}.nav a:not(.btn){display:none}.section{padding:52px 0}}.not-found{text-align:center;padding:96px 0}.not-found-icon{margin:0;font-size:3rem}.not-found h1{font-size:1.8rem}.not-found .lead{margin-inline:auto}
