@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--ink:#12151a;--muted:#68717d;--line:#e4e7eb;--paper:#fff;--soft:#f5f7f9;--accent:#5b4df6;--accent2:#8b7fff;--shadow:0 18px 55px rgba(20,24,40,.08)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;line-height:1.7}
a{color:inherit}
.wrap{width:min(1120px,calc(100% - 40px));margin:auto}
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{text-decoration:none;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:19px;display:flex;align-items:center;gap:10px}
.brand-mark{width:31px;height:31px;border-radius:9px;background:var(--accent);color:white;display:grid;place-items:center;font-size:19px}
nav{display:flex;gap:23px;flex-wrap:wrap}
nav a{text-decoration:none;color:#59616c;font-size:14px;font-weight:600}
nav a:hover,nav a.active{color:var(--ink)}
.hero{padding:105px 0 100px;background:radial-gradient(circle at 82% 30%,#eeeaff 0,rgba(238,234,255,0) 34%),linear-gradient(180deg,#fafbfc,#fff)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
.badge,.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:700;color:var(--accent)}
.badge{display:inline-block;border:1px solid #d9d5ff;background:#f4f2ff;padding:8px 12px;border-radius:999px;margin-bottom:22px}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;line-height:1.15}
h1{font-size:clamp(45px,7vw,76px);letter-spacing:-3px;margin:0 0 24px}
h1 span{color:var(--accent)}
.lead{font-size:19px;color:var(--muted);max-width:650px}
.actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.button{padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700;font-size:14px}
.button.primary{background:var(--ink);color:#fff}
.button.secondary{border:1px solid var(--line);background:#fff}
.board-card{padding:30px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow);transform:rotate(1.5deg)}
.mini-board{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:10px}
.mini-board i{aspect-ratio:1;background:#6d5ff5;border-radius:7px;display:block}
.mini-board i:nth-child(2n){background:#d8d4ff}.mini-board i:nth-child(3n){background:#1c2027}.mini-board i.empty{background:#f0f1f3}
.score-line{border-top:1px solid var(--line);margin-top:18px;padding-top:16px;display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
.score-line strong{color:var(--ink)}
.section{padding:90px 0}
.section.muted{background:var(--soft)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-bottom:38px}
.section-head h2{font-size:40px;margin:10px 0}
.section-head>p{color:var(--muted);margin:22px 0 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{padding:30px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.icon{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:35px}
.card h3{font-size:22px;margin:0 0 12px}
.card p{color:var(--muted);font-size:15px}
.card a,.text-link{font-weight:700;text-decoration:none;font-size:14px}
.page-hero{padding:75px 0;background:linear-gradient(135deg,#f7f6ff,#fff);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(42px,6vw,62px);letter-spacing:-2px;margin:12px 0 18px;max-width:800px}
.page-hero p{max-width:760px;color:var(--muted);font-size:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:90px}
.split h2{font-size:40px;margin-top:0}
.split p{color:var(--muted)}
.article{max-width:800px}
.article h2{font-size:31px;margin:55px 0 16px}
.article p,.article li{color:#4f5864}
.article a{color:var(--accent);font-weight:600}
.toc{display:flex;gap:14px;flex-wrap:wrap;padding:15px 18px;background:var(--soft);border:1px solid var(--line);border-radius:12px}
.toc strong{margin-right:8px}
.toc a{text-decoration:none;font-size:13px}
.callout,.warning{padding:22px 24px;margin:30px 0;border-radius:14px}
.callout{background:#f3f1ff;border-left:4px solid var(--accent)}
.warning{background:#fff7e8;border-left:4px solid #d28a00}
.steps{display:grid;gap:12px;margin:30px 0}
.steps>div{padding:20px;border:1px solid var(--line);border-radius:14px}
.steps span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:700;margin-right:12px}
.steps p{margin:8px 0 0 44px}
.bottom-link{margin-top:50px;padding-top:24px;border-top:1px solid var(--line)}
.narrow{max-width:700px}
footer{border-top:1px solid var(--line);padding:28px 0;background:#fafafa}
.footer-inner{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:13px}
@media(max-width:800px){
.nav{align-items:flex-start;padding:16px 0;flex-direction:column}
nav{gap:12px}
.hero{padding:70px 0}
.hero-grid,.section-head,.split{grid-template-columns:1fr;gap:35px}
.cards{grid-template-columns:1fr}
h1{letter-spacing:-2px}
.section{padding:65px 0}
.board-card{max-width:500px}
}
@media(max-width:480px){.wrap{width:min(100% - 28px,1120px)}nav{font-size:13px}.footer-inner{flex-direction:column}.page-hero{padding:55px 0}}