@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:Vazirmatn,system-ui,sans-serif;background:#0d0a24;color:#efecff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.aurora{position:fixed;inset:0;overflow:hidden;z-index:0;background:radial-gradient(120% 90% at 100% 0,#2a1a6e 0,transparent 55%),radial-gradient(90% 90% at 0 100%,#0f4a5c 0,transparent 55%),#0d0a24}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:46vmax;height:46vmax;background:#6d4aff;top:-12vmax;right:-8vmax}
.aurora i:nth-child(2){width:38vmax;height:38vmax;background:#14b8a6;bottom:-14vmax;left:-8vmax;animation-delay:-6s;opacity:.38}
.aurora i:nth-child(3){width:26vmax;height:26vmax;background:#d946ef;top:38%;left:34%;animation-delay:-11s;opacity:.22}
@keyframes drift{to{transform:translate(5vmax,4vmax) scale(1.12)}}
.wrap{position:relative;z-index:1;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:clamp(1rem,4vw,4rem);padding:clamp(1rem,3vh,2.5rem) clamp(1rem,6vw,6rem);max-width:1320px;margin:auto}
.hero h1{font-size:clamp(2rem,3.6vw,3.5rem);line-height:1.3;font-weight:800;letter-spacing:-.01em;margin-top:1.1rem}
.hero h1 span{background:linear-gradient(95deg,#a78bfa,#5eead4);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-logo{height:38px;filter:invert(1) brightness(2)}
.scene{position:relative;height:clamp(230px,36vh,340px);margin-top:clamp(1rem,3vh,2rem);max-width:480px}
.b{position:absolute;display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-radius:20px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.28);animation:float 6s ease-in-out infinite alternate}
.b u{display:block;height:8px;border-radius:9px;background:rgba(255,255,255,.55);margin:6px 0;text-decoration:none}
.b u+u{opacity:.55}
.b.me{background:linear-gradient(135deg,#7c5cff,#4f46e5);border-color:transparent}
.b em{font-style:normal;color:#5eead4;font-size:.8rem;align-self:flex-end}
.b1{top:0;right:0;border-bottom-right-radius:6px}
.b2{top:27%;left:0;border-bottom-left-radius:6px;animation-delay:-2s}
.b3{top:56%;right:6%;border-bottom-right-radius:6px;animation-delay:-3.5s}
.b4{bottom:0;left:12%;padding:.45rem .8rem;border-radius:99px;font-size:1.05rem;gap:.35rem;animation-delay:-1s}
.av{width:38px;height:38px;border-radius:50%;flex:none}
.a1{background:linear-gradient(135deg,#f472b6,#a78bfa)}
.a2{background:linear-gradient(135deg,#5eead4,#3b82f6)}
.wave{display:flex;align-items:center;gap:3px;height:28px}
.wave s{display:block;width:3px;border-radius:3px;background:#fff;opacity:.85;height:40%;animation:wv 1.2s ease-in-out infinite alternate;text-decoration:none}
.wave s:nth-child(2n){height:80%;animation-delay:-.3s}.wave s:nth-child(3n){height:60%;animation-delay:-.6s}.wave s:nth-child(5n){height:100%;animation-delay:-.9s}
@keyframes wv{to{transform:scaleY(.45)}}
@keyframes float{to{transform:translateY(-10px)}}
.card{width:100%;max-width:440px;justify-self:center;padding:clamp(1.25rem,3vh,2.25rem);border-radius:28px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(26px) saturate(140%);box-shadow:0 30px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.14)}
.card-logo{display:none;height:30px;margin:0 auto 1rem;filter:invert(1) brightness(2)}
.tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(0,0,0,.24);margin-bottom:1.1rem}
.tabs button{flex:1;padding:.55rem;border:0;border-radius:11px;background:none;color:#c9c3ec;font:inherit;font-weight:700;cursor:pointer;transition:.2s}
.tabs button.on{background:#fff;color:#2a1a6e;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.view{display:flex;flex-direction:column;gap:.85rem}
label{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;font-weight:600;color:#d6d1f3}
input{width:100%;height:48px;padding:0 1rem;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(10,7,32,.42);color:#fff;font:inherit;font-size:.96rem;outline:0;transition:.2s}
input::placeholder{color:#8c86b3}
input:focus{border-color:#a78bfa;box-shadow:0 0 0 4px rgba(167,139,250,.22);background:rgba(10,7,32,.6)}
.pw{position:relative;display:block}.pw input{padding-right:2.9rem}
.eye{position:absolute;top:0;right:0;width:46px;height:48px;background:none;border:0;color:#bdb6e8;cursor:pointer;font-size:1rem}
.code{text-align:center;font-size:1.5rem;letter-spacing:.5em;font-weight:700}
.go{height:50px;margin-top:.25rem;border:0;border-radius:14px;background:linear-gradient(100deg,#8b5cf6,#4f46e5 70%);color:#fff;font:inherit;font-weight:800;font-size:1rem;cursor:pointer;box-shadow:0 12px 26px rgba(79,70,229,.45);transition:.2s}
.go:hover{transform:translateY(-1px);filter:brightness(1.08)}
.go:disabled{opacity:.6;cursor:wait;transform:none}
.link{background:none;border:0;color:#b9afff;font:inherit;font-size:.84rem;cursor:pointer;padding:.15rem}
.link:hover{color:#fff}
.hint{font-size:.86rem;line-height:1.8;color:#d6d1f3}
.err{margin-bottom:.8rem;padding:.6rem .85rem;border-radius:12px;background:rgba(244,63,94,.18);border:1px solid rgba(244,63,94,.45);color:#ffd5dc;font-size:.84rem;line-height:1.7}
:focus-visible{outline:2px solid #5eead4;outline-offset:2px}
@media (max-width:900px){.wrap{grid-template-columns:minmax(0,1fr);padding:1rem}.hero{display:none}.card-logo{display:block}.card{align-self:center}}
@media (prefers-reduced-motion:reduce){.aurora i,.b,.wave s{animation:none}}