:root{--bg:#12121f;--sf:#1c1d33;--ln:#2e3055;--tx:#e9eaf7;--mu:#9a9cc4;--bl:#6c7bff;--am:#ffb347}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--tx);font:16px/1.55 "Segoe UI",system-ui,sans-serif}
a{color:inherit}.wrap{max-width:1040px;margin:auto;padding:0 20px}
nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.btn{display:inline-block;padding:12px 22px;border-radius:10px;font:700 1rem inherit;text-decoration:none;border:1px solid var(--ln);background:var(--sf);color:var(--tx);cursor:pointer}
.btn.cta{background:var(--am);border-color:var(--am);color:#1a1200}
.btn:focus-visible,select:focus-visible,input:focus-visible,.bar:focus-visible{outline:3px solid var(--bl);outline-offset:2px}
h1{font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.08;letter-spacing:-.03em;max-width:15em}
h2{font-size:1.5rem;margin:56px 0 14px}.sub{color:var(--mu);font-size:1.15rem;max-width:34em;margin:18px 0 26px}.mu{color:var(--mu);font-size:.9rem}
.hero{padding:40px 0 8px}.hero .btn{margin:0 8px 8px 0}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.feat div{border-left:3px solid var(--bl);padding:4px 14px}.feat b{display:block}.feat span{color:var(--mu);font-size:.93rem}
footer{margin:60px 0 30px;color:var(--mu);font-size:.85rem}
.ch{padding:3px 8px;color:var(--mu);border-radius:6px;font-size:.92rem;white-space:nowrap}
h4{font-size:.72rem;color:var(--mu);margin:12px 0 4px}
.msg{background:var(--sf);padding:8px 12px;border-radius:8px;font-size:.9rem}.msg b{color:var(--am)}
.cmp{position:relative;height:350px;border:1px solid var(--ln);border-radius:14px;overflow:hidden;touch-action:pan-y;user-select:none;--x:50%}
.srv{position:absolute;inset:0;display:grid;grid-template-columns:210px 1fr;background:var(--bg)}
.srv aside{background:#171830;padding:14px 12px;overflow:hidden;border-right:1px solid var(--ln)}
.srv main{padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden}
.full{clip-path:inset(0 0 0 var(--x))}
.bar{position:absolute;top:0;bottom:0;left:var(--x);width:4px;margin-left:-2px;background:var(--am);cursor:ew-resize}
.bar::after{content:"⇄";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px;border-radius:50%;background:var(--am);color:#1a1200;display:grid;place-items:center;font-weight:700}
.lbl{position:absolute;top:10px;padding:2px 10px;border-radius:20px;background:#000a;font-size:.8rem;z-index:2}
@media(max-width:600px){.srv{grid-template-columns:130px 1fr}.cmp{height:420px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}