:root{
  --bg:#0d0e10;--panel:#14161a;--panel-2:#1a1d22;--text:#f5f6f8;--muted:#b8bdc7;
  --accent:#ff7a18;--accent-2:#ffb357;--ring:rgba(255,122,24,.4);
  --radius:18px;--shadow:0 10px 30px rgba(0,0,0,.35);
  --grid:radial-gradient(transparent 1px, rgba(255,255,255,.02) 1px)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#0b0c0e 0%,#0e1013 60%,#0b0c0e 100%),var(--grid);
  background-size:100% 100%,24px 24px;
  color:var(--text);
  font-family:"Vazirmatn",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;
  line-height:1.75;display:grid;place-items:center;padding:24px
}
.wrap{width:100%;max-width:880px}
.card{
  position:relative;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 28px 20px;
  border:1px solid rgba(255,255,255,.06);overflow:hidden;isolation:isolate
}
.card::before{
  content:"";position:absolute;inset:-1px;border-radius:calc(var(--radius) + 1px);
  background:radial-gradient(1200px 1200px at -10% -20%, rgba(255,122,24,.15), transparent 45%),
             radial-gradient(1200px 1200px at 110% -20%, rgba(255,179,87,.12), transparent 45%);
  z-index:-1;filter:blur(6px)
}
header{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.logo{
  width:56px;height:56px;border-radius:14px;
  background:radial-gradient(130% 130% at 30% 20%,var(--accent) 0%,#ff4d00 60%,#e64100 100%);
  box-shadow:0 10px 25px rgba(255,122,24,.35), inset 0 0 0 2px rgba(255,255,255,.08);
  display:grid;place-items:center;color:#111
}
.logo svg{width:28px;height:28px;fill:#111}
h1{margin:0;font-size:22px;font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.subtitle{margin-top:2px;color:var(--muted);font-size:14px}
.note{
  margin:10px 0 18px;padding:14px 16px;border:1px dashed rgba(255,255,255,.12);
  border-radius:14px;background:rgba(255,255,255,.02);color:var(--muted);font-size:14px
}
ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
li{background:#111318;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px 16px;display:grid;gap:6px}
.point{display:flex;align-items:center;gap:8px;font-weight:700;color:#fff}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,122,24,.18);flex:0 0 auto}
.desc{color:var(--muted)}
form{display:grid;gap:12px;margin-top:8px}
.row{display:grid;gap:8px}
label{font-weight:700}
input{
  width:100%;background:#111318;color:var(--text);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 14px
}
.err{color:#ff9b9b;font-size:13px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.btn{
  appearance:none;border:0;cursor:pointer;padding:12px 18px;font-weight:800;letter-spacing:.2px;
  border-radius:12px;color:#111;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  box-shadow:0 10px 24px var(--ring);transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px
}
.btn:hover{transform:translateY(-1px);filter:saturate(1.03)}
.btn:active{transform:translateY(0);box-shadow:0 6px 16px var(--ring)}
.btn.secondary{
  background:#191c22;color:var(--text);border:1px solid rgba(255,255,255,.08);box-shadow:none
}
footer{
  margin-top:14px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.06);padding-top:14px
}
@media (max-width:520px){.btn{width:100%;justify-content:center}.logo{width:50px;height:50px}h1{font-size:20px}}