:root{--ink:#17141f;--muted:#625d6b;--paper:#fffaf0;--lime:#d9ff70;--violet:#7d62ff;--coral:#ff7a66;--line:rgba(23,20,31,.16);--shadow:8px 8px 0 #17141f;--radius:22px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:ui-monospace,"Cascadia Code","Microsoft YaHei",monospace;line-height:1.7;background-color:#eadfff;background-image:radial-gradient(circle at 12% 5%,rgba(255,122,102,.8),transparent 30%),radial-gradient(circle at 92% 12%,rgba(217,255,112,.9),transparent 28%),radial-gradient(circle at 72% 82%,rgba(125,98,255,.55),transparent 38%),repeating-radial-gradient(circle at 0 0,rgba(23,20,31,.045) 0 1px,transparent 1px 4px);background-attachment:fixed}
a{color:inherit}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:100;background:#fff;padding:.7rem}
.wrap{width:min(1160px,calc(100% - 36px));margin:auto}
header{padding:18px 0;position:relative;z-index:10}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(255,250,240,.9);border:2px solid var(--ink);border-radius:999px;padding:10px 14px 10px 18px;box-shadow:4px 4px 0 var(--ink)}.brand{display:flex;align-items:center;gap:10px;font-weight:900;text-decoration:none}.brand img{width:38px;height:38px;object-fit:contain}.navlinks{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.navlinks a{padding:7px 11px;border-radius:999px;text-decoration:none;font-weight:700}.navlinks a:hover,.navlinks a:focus-visible{background:var(--lime);outline:2px solid var(--ink)}.menu{display:none;border:2px solid var(--ink);background:var(--lime);border-radius:50%;width:42px;height:42px;font-size:1.2rem}
main{padding:42px 0 72px}.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;min-height:650px}.eyebrow,.tag{display:inline-block;border:2px solid var(--ink);border-radius:999px;background:var(--lime);padding:5px 12px;font-size:.82rem;font-weight:900;letter-spacing:.05em}.hero h1{font-size:clamp(2.6rem,6vw,5.6rem);line-height:1.02;letter-spacing:-.07em;margin:20px 0}.hero p{font-size:1.12rem;color:var(--muted);max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;border:2px solid var(--ink);border-radius:12px;background:var(--ink);color:white;text-decoration:none;font-weight:900;box-shadow:4px 4px 0 var(--coral);transition:.15s}.btn.alt{background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--violet)}.btn:hover,.btn:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--coral)}
.stats{display:flex;gap:10px;flex-wrap:wrap}.stats span{background:rgba(255,250,240,.7);border:1px solid var(--ink);border-radius:8px;padding:5px 9px;font-size:.8rem}.visual{position:relative}.visual:before{content:"01 / DESKTOP";position:absolute;right:-12px;top:-24px;background:var(--coral);border:2px solid var(--ink);padding:7px 12px;font-weight:900;transform:rotate(3deg);z-index:2}.visual img{display:block;width:880px;aspect-ratio:44/35;object-fit:cover;border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow)}
section{padding:72px 0}.section-head{max-width:760px;margin-bottom:32px}.section-head h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.12;letter-spacing:-.045em;margin:12px 0}.section-head p,.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.card{background:rgba(255,250,240,.88);border:2px solid var(--ink);border-radius:var(--radius);padding:24px;box-shadow:5px 5px 0 var(--ink)}.card .num{font-size:.78rem;font-weight:900;color:var(--violet)}.card h3{font-size:1.25rem;line-height:1.3;margin:10px 0}.card p{color:var(--muted);margin-bottom:0}.card.feature:nth-child(2n){background:#f1ffd0}.card.feature:nth-child(3n){background:#ffe1dc}
.detail{display:grid;grid-template-columns:.75fr 1.25fr;gap:40px;align-items:start}.detail .sticky{position:sticky;top:30px}.checklist{list-style:none;padding:0;margin:0}.checklist li{border-bottom:1px solid var(--line);padding:14px 0}.checklist li:before{content:"✦";margin-right:10px;color:var(--violet)}
.platform{font-size:2rem}.callout{background:var(--ink);color:white;border-radius:28px;padding:clamp(28px,6vw,64px);display:flex;justify-content:space-between;align-items:center;gap:30px;box-shadow:8px 8px 0 var(--lime)}.callout h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.1;margin:0}.callout p{color:#d8d2df}.callout .btn{background:var(--lime);color:var(--ink);white-space:nowrap}
.faq details{background:rgba(255,250,240,.88);border:2px solid var(--ink);border-radius:14px;padding:16px 20px;margin:12px 0}.faq summary{cursor:pointer;font-weight:900}.faq details p{color:var(--muted)}
.page-hero{padding:70px 0 35px;max-width:850px}.page-hero h1{font-size:clamp(2.7rem,7vw,5.5rem);line-height:1.02;letter-spacing:-.065em;margin:16px 0}.page-hero p{font-size:1.14rem;color:var(--muted)}.steps{counter-reset:step}.step{position:relative;padding-left:74px}.step:before{counter-increment:step;content:"0" counter(step);position:absolute;left:22px;top:22px;font-weight:900;color:var(--violet)}code{background:#ece6f2;border-radius:5px;padding:2px 5px}
footer{border-top:2px solid var(--ink);background:rgba(255,250,240,.9);padding:45px 0 22px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}.footer-grid h3{font-size:.95rem}.footer-grid a{display:block;margin:7px 0;text-decoration:none}.legal{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;color:var(--muted);font-size:.82rem}
@media(max-width:900px){.hero,.detail{grid-template-columns:1fr}.hero{padding-top:30px}.grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.detail .sticky{position:static}.visual{max-width:720px}.callout{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.wrap{width:min(100% - 24px,1160px)}.menu{display:block}.nav{border-radius:18px}.navlinks{display:none;position:absolute;top:78px;left:12px;right:12px;background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:12px}.navlinks.open{display:grid}.grid,.grid.two,.grid.three,.footer-grid{grid-template-columns:1fr}.hero{min-height:auto;gap:55px}.hero h1{font-size:3rem}.callout{box-shadow:5px 5px 0 var(--lime)}section{padding:52px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}