:root{--bg:#F2F5FF;--s:#fff;--ink:#101636;--mut:#5b6385;--line:#dfe4f6;--pri:#2B3BFF;--acc:#FF6B57;--ok:#12a36b}
@media(prefers-color-scheme:dark){:root{--bg:#0b1030;--s:#141a42;--ink:#eef0ff;--mut:#9aa3d6;--line:#262e66;--pri:#7b86ff}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:var(--pri)}.wrap{max-width:1040px;margin:0 auto;padding:0 20px}nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0}.nl{display:flex;gap:16px;align-items:center}.nl a:not(.btn){color:var(--ink);text-decoration:none}
.logo{font-weight:800;font-size:22px;color:var(--ink);text-decoration:none;display:flex;gap:8px;align-items:center}.logo i{width:26px;height:26px;border-radius:9px 9px 9px 2px;background:var(--pri)}
.btn{border:0;background:var(--pri);color:#fff!important;padding:11px 20px;border-radius:12px;font:600 15px inherit;cursor:pointer;text-decoration:none;display:inline-block}.btn.g{background:none;color:var(--ink)!important;border:1.5px solid var(--line)}.btn.sm{padding:6px 12px;font-size:13px}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:40px 0 70px}.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;z-index:-1;animation:fl 9s ease-in-out infinite}.o1{width:320px;height:320px;background:var(--pri);left:-80px;top:0}.o2{width:240px;height:240px;background:var(--acc);right:0;bottom:0;animation-delay:-4s}@keyframes fl{50%{transform:translate(30px,-26px) scale(1.1)}}
h1{font-size:clamp(34px,6vw,60px);line-height:1.05;letter-spacing:-2px;margin:0 0 16px}.h2{font-size:30px;letter-spacing:-1px}h2{margin:0 0 10px}h2 small{font-size:13px;color:var(--mut);font-weight:400}.lead{color:var(--mut);font-size:18px;max-width:46ch}.mut{color:var(--mut)}.hero .btn{margin:20px 10px 0 0}
.demo{background:var(--s);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(43,59,255,.45);animation:rise 1s both}@keyframes rise{from{opacity:0;transform:translateY(30px) rotate(1.5deg)}}
.demo .t{background:var(--pri);color:#fff;padding:14px 18px;font-weight:600}.demo .m{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:250px}.demo .x{max-width:85%;padding:10px 14px;border-radius:16px;background:var(--bg);font-size:15px;opacity:0;animation:pop .4s forwards}.demo .x.u{background:var(--pri);color:#fff;align-self:flex-end}.demo .x:nth-child(1){animation-delay:.6s}.demo .x:nth-child(2){animation-delay:1.6s}.demo .x:nth-child(3){animation-delay:2.8s}.demo .x:nth-child(4){animation-delay:3.8s}.demo .x:nth-child(5){animation-delay:5s}@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1}}
section{padding:46px 0}.steps,.priv{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px;counter-reset:s}.steps div{border-top:2px solid var(--ink);padding-top:10px;counter-increment:s}.steps div:before{content:counter(s);display:block;font-size:42px;font-weight:800;color:var(--acc);line-height:1}.priv div{border-top:2px solid var(--acc);padding-top:10px}.steps p,.priv p{color:var(--mut);margin:4px 0 0}
pre{background:#0b1030;color:#cfe0ff;padding:16px;border-radius:12px;overflow-x:auto;font-size:13px}.cta{text-align:center;background:var(--pri);color:#fff;border-radius:24px;padding:50px 20px;margin:30px 0}.cta .btn{background:#fff;color:var(--pri)!important}
.card{background:var(--s);border:1px solid var(--line);border-radius:18px;padding:22px;margin:0 0 20px;display:block;max-width:100%}form.card:not(.row){max-width:420px;margin:30px auto}input,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--bg);color:var(--ink);margin:6px 0 12px}input[type=color]{height:44px;padding:3px}input[type=checkbox]{width:auto;margin:0 8px 0 0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row input{flex:1;min-width:180px;margin:0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}label{display:block;font-size:14px;color:var(--mut)}.chk{display:flex;align-items:center;margin-bottom:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:12px 0}.kpis div{border-left:3px solid var(--pri);padding:2px 12px;color:var(--mut);font-size:13px}.kpis b{display:block;font-size:26px;color:var(--ink)}
.err{color:var(--acc)}.ok{color:var(--ok);font-weight:600}.scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}.tag{padding:2px 9px;border-radius:10px;font-size:12px;background:rgba(18,163,107,.15);color:var(--ok)}.tag.x{background:rgba(255,107,87,.18);color:var(--acc)}
footer{padding:30px 0;color:var(--mut);border-top:1px solid var(--line);font-size:14px;margin-top:30px}
@media(max-width:800px){.hero,.steps,.priv,.grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{animation:none!important}.demo .x{opacity:1}}
.ch{display:block}.ch .e{transform-box:fill-box;transform-origin:center;animation:bl 4.5s infinite}@keyframes bl{94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.steps4{display:flex;gap:8px;margin:6px 0 20px;flex-wrap:wrap}.steps4 a{flex:1;min-width:110px;text-decoration:none;color:var(--mut);border-top:3px solid var(--line);padding-top:8px;font-weight:600}.steps4 b{margin-right:8px}.steps4 .on{color:var(--ink);border-color:var(--pri)}.steps4 .done{border-color:var(--ok)}
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 12px}.pk input{position:absolute;opacity:0}.pk span{display:flex;flex-direction:column;align-items:center;border:2px solid var(--line);border-radius:14px;padding:8px 4px;cursor:pointer;color:var(--pri)}.pk small{color:var(--mut)}.pk input:checked+span{border-color:var(--pri);background:var(--bg)}.pk input:focus-visible+span{outline:3px solid var(--acc)}
.prev{background:var(--bg);border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center;justify-content:flex-end}.pb{background:var(--s);padding:10px 14px;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.1);color:var(--ink);max-width:200px;font-size:14px}.pb b{display:block;color:inherit}.pl{background:#fff;border-radius:50%;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}select{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);margin:6px 0 12px;font:inherit}
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px}.gal div{text-align:center;background:var(--s);border:1px solid var(--line);border-radius:18px;padding:16px 6px;animation:bob 3.4s ease-in-out infinite}.gal div:nth-child(2n){animation-delay:-1s}.gal div:nth-child(3n){animation-delay:-2s}.gal svg{margin:auto}.big{animation:bob 3s ease-in-out infinite;margin-bottom:10px}
details{border-top:1px solid var(--line);padding:10px 0}summary{cursor:pointer;font-weight:600}.hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}code{background:var(--bg);padding:1px 6px;border-radius:6px}
@media(max-width:800px){.gal{grid-template-columns:repeat(3,1fr)}}
.meter{height:10px;background:var(--line);border-radius:6px;overflow:hidden;margin:8px 0}.meter i{display:block;height:100%;background:var(--pri)}.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px}select.sm{width:auto;padding:7px;margin:0}@media(max-width:800px){.plans{grid-template-columns:1fr}}