:root{ --c1:#6a11cb; --c2:#2575fc; --text:#111; --muted:#666; --bg:#f6f7fb; }
*{box-sizing:border-box}
body{margin:0;font-family:IRANSans,Vazirmatn,Inter,system-ui,sans-serif;background:var(--bg)}
.hero{min-height:100vh;display:grid;place-items:center;background:
  radial-gradient(1000px 400px at 10% 0%, rgba(106,17,203,.25),transparent 60%),
  radial-gradient(900px 500px at 90% 0%, rgba(37,117,252,.25),transparent 60%),
  linear-gradient(120deg, #ffffff, #f2f6ff);}
.card{width:min(560px,92%);background:#fff;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.12);overflow:hidden}
.header{padding:28px 28px 0}
.header h1{margin:0;font-size:22px;color:var(--text)}
.header p{margin:8px 0 0;color:var(--muted);font-size:14px}
.form{padding:24px 28px 32px}
.input{display:flex;gap:10px;align-items:center;margin:10px 0 14px}
.input input{flex:1;padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;font-size:16px}
.btn{width:100%;padding:12px 16px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-weight:600;cursor:pointer}
.note{font-size:12px;color:#777;margin-top:8px}
.footer{padding:18px 28px;background:linear-gradient(90deg,rgba(106,17,203,.08),rgba(37,117,252,.08))}
.footer small{color:#444}