:root{--bg:#080a12;--s1:#0f1220;--s2:#151a2e;--line:#1e2440;--tx:#e8eef9;--mu:#8b90ad;--ac:#4f8cff;--blur:#5865f2;--bad:#ff6b81}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#0b1226,var(--bg) 480px) no-repeat,var(--bg);color:var(--tx);font:16px/1.65 Inter,system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
svg.i{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i-w{display:inline-flex;align-items:center}
.top{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px clamp(18px,5vw,56px);position:sticky;top:0;backdrop-filter:blur(14px);background:#080a12cc;border-bottom:1px solid var(--line);z-index:5}
.top img{width:42px;height:42px;border-radius:12px;object-fit:cover;background:var(--s2);border:1px solid var(--line)}
.top b{font-size:1.1rem;letter-spacing:-.01em}.sp{display:none}
.wrap{max-width:860px;margin:0 auto;padding:0 22px}
.hero{padding:88px 0 64px}
h1{font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.08;letter-spacing:-.03em;font-weight:700;max-width:14em}
.lead{color:var(--mu);max-width:36em;margin-top:20px;font-size:1.08rem}
.btn{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;font:600 1.05rem Inter,sans-serif;color:#fff;background:linear-gradient(135deg,#4f8cff,#2f5fd8);padding:17px 30px;border-radius:14px;margin-top:34px;text-decoration:none;position:relative;overflow:hidden;transition:transform .2s,box-shadow .3s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.btn.ghost{background:var(--s2);box-shadow:none;border:1px solid var(--line);margin:0;padding:10px 18px;font-size:.95rem;border-radius:11px}.btn.ghost:hover{border-color:var(--bad);color:var(--bad);box-shadow:none}
.note{color:var(--mu);font-size:.9rem;margin-top:16px;display:flex;gap:8px;align-items:center}
.alert{display:none;gap:12px;align-items:flex-start;margin-top:28px;padding:16px 18px;border:1px solid #ff6b8155;background:#ff6b8114;border-radius:14px;color:#ffc2cc;max-width:34em;animation:shake .5s}
.alert.on{display:flex}.alert svg{color:var(--bad);margin-top:3px}.alert b{display:block;color:#fff}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
h2{font-size:1.7rem;letter-spacing:-.02em;margin-bottom:10px}
.about{padding:40px 0}.about p{color:var(--mu);max-width:42em;margin-bottom:14px}
.flow{position:relative;padding:40px 0 20px 64px}
.rail{position:absolute;left:23px;top:50px;bottom:60px;width:2px;background:var(--line)}
.rail i{display:block;width:100%;height:var(--p,0%);background:linear-gradient(#4f8cff,#2f5fd8)}
.step{position:relative;margin-bottom:46px;opacity:.35;transform:translateX(16px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.step.on{opacity:1;transform:none}
.step .dot{position:absolute;left:-64px;top:0;width:48px;height:48px;border-radius:14px;background:var(--s1);border:1px solid var(--line);display:grid;place-items:center;color:var(--mu);transition:.5s}
.step.on .dot{color:#fff;background:linear-gradient(135deg,#4f8cff,#2f5fd8);border-color:var(--ac)}
.step h3{font-size:1.2rem;margin-bottom:6px}.step p{color:var(--mu);max-width:40em}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:24px 0 80px}
.card{background:var(--s1);border:1px solid var(--line);border-radius:18px;padding:24px;transition:.35s}
.card:hover{border-color:#4f8cff55;transform:translateY(-4px)}.card svg{color:var(--ac);width:28px;height:28px;margin-bottom:12px}
.card h3{font-size:1.05rem;margin-bottom:6px}.card p{color:var(--mu);font-size:.95rem}
.rv{opacity:0;transform:translateY(28px);transition:1s cubic-bezier(.2,.7,.2,1)}.rv.on{opacity:1;transform:none}
footer{border-top:1px solid var(--line);color:var(--mu);text-align:center;padding:28px;font-size:.9rem}
/* verify */
.center{min-height:calc(100vh - 78px);display:grid;place-items:center;padding:24px}
.panel{width:min(440px,100%);background:var(--s1);border:1px solid var(--line);border-radius:22px;padding:36px 30px;text-align:center;animation:pop .7s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}}
.badge{width:60px;height:60px;border-radius:18px;background:#4f8cff1f;color:var(--ac);display:grid;place-items:center;margin:0 auto 18px}.badge svg{width:30px;height:30px}
.panel h2{font-size:1.5rem}.panel p{color:var(--mu);font-size:.95rem}
.boxes{display:flex;gap:9px;justify-content:center;margin:26px 0 12px}
.boxes input{width:48px;height:60px;text-align:center;font:600 1.6rem Inter,sans-serif;color:var(--tx);background:var(--bg);border:1px solid var(--line);border-radius:12px;outline:0;transition:.2s}
.boxes input:focus{border-color:var(--ac);box-shadow:0 0 0 4px #4f8cff22}.boxes.err input{border-color:var(--bad);animation:shake .4s}
.msg{min-height:1.5em;color:var(--bad);font-size:.9rem}.timer{color:var(--ac);font-variant-numeric:tabular-nums;font-weight:600}
.panel .btn{width:100%;justify-content:center;margin-top:18px;background:linear-gradient(135deg,#4f8cff,#2f5fd8);color:#fff}
.panel .btn:disabled{opacity:.5;cursor:default}.panel a{color:var(--mu);font-size:.9rem;display:inline-block;margin-top:16px}
/* dashboard */
.ok{text-align:center;padding:80px 0 40px}
.ok .badge{width:84px;height:84px;border-radius:26px;animation:ring 2.4s infinite}.ok .badge svg{width:42px;height:42px}
@keyframes ring{0%{box-shadow:0 0 0 0 #4f8cff55}100%{box-shadow:0 0 0 30px #4f8cff00}}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--s1);border:1px solid var(--line);border-radius:99px;padding:6px 16px;color:var(--mu);margin-top:18px}
.clock{margin:44px auto 0;max-width:520px;background:var(--s1);border:1px solid var(--line);border-radius:22px;padding:34px 20px}
.clock .t{font-size:clamp(2.8rem,10vw,4.6rem);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.clock .d{color:var(--mu);margin-top:4px;text-transform:capitalize}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rv,.step{opacity:1;transform:none}}

.wrap.wide{max-width:1060px}
.login{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;padding:56px 0 30px;align-items:stretch}
.pane{background:var(--s1);border:1px solid var(--line);border-radius:26px;padding:38px}
.tag{color:var(--ac);font-size:.9rem}
.pane h1,.pane h2{letter-spacing:-.02em;font-weight:700;margin:14px 0 14px}
.pane h1{font-size:clamp(1.9rem,4vw,2.7rem);max-width:none}.pane h2{font-size:1.9rem}
.lead.sm{margin-top:0;font-size:1rem}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.mini div{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--bg);transition:.3s}
.mini div:hover{border-color:#4f8cff55;transform:translateY(-3px)}
.mini svg{color:var(--ac);margin-bottom:8px}.mini b{display:block}.mini p{color:var(--mu);font-size:.9rem;line-height:1.45;margin-top:4px}
.bigbtn{display:flex;align-items:center;gap:16px;margin:26px 0 30px;padding:18px 22px;border:1px solid var(--ac);border-radius:16px;color:var(--tx);text-decoration:none;background:#4f8cff0d;transition:.3s;position:relative;overflow:hidden}
.bigbtn>.i-w:first-child svg{width:1.8em;height:1.8em;color:var(--ac)}
.bigbtn div{flex:1}.bigbtn b{display:block;font-size:1.1rem}.bigbtn small{color:var(--mu)}
.bigbtn:hover{background:#4f8cff1f}.bigbtn:hover .ar{transform:translateX(6px)}
.ar{transition:.3s}.pane h3{font-size:1.05rem;margin-bottom:10px}.pane ul{color:var(--mu);font-size:.95rem;padding-left:20px;display:grid;gap:6px}
.foot{color:var(--mu);font-size:.88rem;text-align:center;margin-top:24px}
.alert{margin:20px 0 0}
@media(max-width:820px){.login{grid-template-columns:1fr}.mini{grid-template-columns:1fr}.pane{padding:28px}}

.top .btn.ghost{position:absolute;right:clamp(18px,5vw,56px)}
@media(max-width:560px){.top .btn.ghost{position:static;margin-left:auto}.top{justify-content:flex-start}}