.hero{display:grid;gap:20px;grid-template-columns:1.2fr 1fr;align-items:center;background:linear-gradient(135deg,#fff7d6,#ffe9a3);border-color:#f3dc8a;padding:26px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero{background:linear-gradient(135deg,#2e2710,#3d3212);border-color:#4a3d16}}
:root[data-theme="dark"] .hero{background:linear-gradient(135deg,#2e2710,#3d3212);border-color:#4a3d16}
.hero h2{font-size:28px;line-height:1.3;margin:0 0 10px;text-wrap:balance}
.hero p{margin:0 0 14px}
.mock{display:grid;gap:10px}
.mock .stat{margin:0}
.mock small{display:block;color:var(--mute);font-size:12px;text-align:right}
@media (max-width:760px){.hero{grid-template-columns:1fr}}
.feat{margin:0;padding-left:20px}
.feat li{margin:5px 0}
.feat li.soon{color:var(--mute)}
.grid3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
a.demo,.plan{display:block;border:1px solid var(--line);border-radius:16px;padding:16px;color:inherit;text-decoration:none;background:var(--bg)}
a.demo:hover,a.demo:focus-visible{border-color:var(--accent);box-shadow:var(--shadow);outline:none}
a.demo b,.plan b{display:block;font-size:18px;color:var(--brandtext);margin-bottom:4px}
a.demo span{color:var(--mute);font-size:15px}
.plan .price{font-size:26px;font-weight:700;margin:6px 0 10px}
.plan .price small{font-size:14px;font-weight:400;color:var(--mute)}
.steps{margin:0 0 12px;padding-left:20px}
.hp{position:absolute;left:-5000px;width:1px;height:1px;opacity:0}
.foot{text-align:center;color:var(--mute);font-size:14px;padding:24px}
a.btn{display:inline-block;text-decoration:none}
.site main{max-width:1000px;margin:0 auto}
[hidden]{display:none !important}