:root{
  --brand:#3B4CCA;--brand-light:#5B6BE6;--brand-dark:#2C3AAF;
  --ink:#1A1F36;--ink-70:#3D4460;--ink-50:#6B7194;--ink-30:#A0A5BD;--ink-15:#D0D3E0;--ink-08:#E9EBF2;--ink-04:#F3F4F8;--ink-02:#F8F9FC;
  --white:#fff;--up:#22C55E;--up-bg:#ECFDF5;--up-tx:#166534;--down:#EF4444;--down-bg:#FEF2F2;--down-tx:#991B1B;
}
[data-theme="dark"]{--ink:#E6E8F0;--ink-70:#C0C4D8;--ink-50:#8E94B2;--ink-30:#5A6080;--ink-15:#3A3F58;--ink-08:#2A2E42;--ink-04:#22253A;--ink-02:#1A1D2E;--white:#1E2136;--up:#34D399;--up-bg:rgba(52,211,153,.12);--up-tx:#6EE7B7;--down:#F87171;--down-bg:rgba(248,113,113,.12);--down-tx:#FCA5A5}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--ink-02);line-height:1.6}
a{color:var(--brand);text-decoration:none}
.ct{max-width:1140px;margin:0 auto;padding:0 24px}
nav{background:linear-gradient(135deg,#3B4CCA,#5B6BE6);padding:0 40px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(59,76,202,.25)}
.logo{color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;gap:8px;text-decoration:none}
.logo svg{width:28px;height:28px}
.nv{display:flex;gap:28px;align-items:center}
.nv>a{color:rgba(255,255,255,.82);font-size:14px;font-weight:500;text-decoration:none}
.nv>a:hover,.nv>a.active{color:#fff}
.nv-right{display:flex;align-items:center;gap:8px}
.theme-btn{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.1);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7)}
.theme-btn svg{width:18px;height:18px}
html:not([data-theme="dark"]) .icon-moon{display:none}
[data-theme="dark"] .icon-sun{display:none}
.hero{background:linear-gradient(135deg,#3B4CCA 0%,#5B6BE6 42%,#7C8CF0 100%);padding:52px 24px 82px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.hero-wrap{position:relative;max-width:560px;margin:0 auto;text-align:center}
.hero h1{font-size:42px;line-height:1.1;font-weight:800;color:#fff;margin-bottom:12px}
.hero p{font-size:17px;color:rgba(255,255,255,.84)}
.wrap{max-width:760px;margin:-58px auto 0;padding:0 24px 72px;position:relative;z-index:2}
.card{background:var(--white);border:1px solid var(--ink-08);border-radius:16px;box-shadow:0 10px 34px rgba(26,31,54,.08);padding:28px}
.alert{display:none;padding:14px 16px;border-radius:10px;font-size:15px;line-height:1.55;font-weight:700;margin-bottom:14px}
.alert.error{background:var(--down-bg);color:var(--down-tx);border:1px solid rgba(239,68,68,.2)}
.alert.ok{background:var(--up-bg);color:var(--up-tx);border:1px solid rgba(34,197,94,.25)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{margin-bottom:12px}
.label{display:block;font-size:12px;font-weight:700;color:var(--ink-70);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.input{width:100%;height:46px;border:1px solid var(--ink-15);border-radius:10px;padding:0 14px;background:var(--white);color:var(--ink);font:500 14px 'DM Sans',sans-serif}
.password-wrap{position:relative}
.password-wrap .input{padding-right:84px}
.password-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);border:0;background:none;color:var(--brand);font:800 12px 'DM Sans',sans-serif;cursor:pointer;padding:6px 8px;border-radius:8px}
.password-toggle:hover{background:rgba(59,76,202,.08)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,76,202,.14)}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 14px}
.plan{border:1.5px solid var(--ink-15);background:var(--white);border-radius:10px;padding:10px 12px;text-align:left;cursor:pointer;transition:.15s}
.plan .name{font-size:12px;font-weight:700;color:var(--ink-70);text-transform:uppercase;letter-spacing:.6px}
.plan .price{font-size:21px;font-weight:800;color:var(--ink);line-height:1.1;font-family:'JetBrains Mono',monospace;margin:3px 0}
.plan .sub{font-size:11px;color:var(--ink-50)}
.plan.active{border-color:var(--brand);background:rgba(59,76,202,.06)}
.plan.active .name,.plan.active .price{color:var(--brand)}
.socials{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}
.social{height:44px;border:1px solid var(--ink-15);border-radius:10px;background:var(--white);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:13px;color:var(--ink);text-decoration:none}
.social:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.social svg{width:16px;height:16px}
.sep{display:flex;align-items:center;gap:10px;margin:8px 0 10px;color:var(--ink-30);font-size:12px;font-weight:600}
.sep:before,.sep:after{content:'';height:1px;background:var(--ink-08);flex:1}
.note{font-size:12.5px;color:var(--ink-50);margin-top:4px}
.checkline{display:flex;gap:8px;align-items:flex-start;margin:2px 0 14px}
.checkline a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.checkline input{margin-top:4px}
.submit{width:100%;height:48px;border:none;border-radius:10px;background:linear-gradient(135deg,#3B4CCA,#5B6BE6);color:#fff;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 4px 16px rgba(59,76,202,.3)}
.submit:hover{filter:brightness(1.04)}
.secure{margin-top:10px;text-align:center;font-size:12px;color:var(--ink-50)}
footer{margin-top:20px;background:linear-gradient(135deg,#3B4CCA,#5B6BE6);color:#D9DDF6;padding:38px 0 26px}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 16px;font-size:14px;font-weight:600;margin:14px 0 10px}
.footer-links a{color:#fff;opacity:.9}
.footer-copy{font-size:13px;opacity:.92}
@media(max-width:860px){.hero h1{font-size:34px}.nv{display:none}.row{grid-template-columns:1fr}.plan-grid{grid-template-columns:1fr}.socials{grid-template-columns:1fr}nav{padding:0 16px}}