*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080a0f;--surface:#0d1016;--surface-2:#11151d;--surface-3:#161b24;--surface-4:#1b222d;
  --text:#f5f7fb;--muted:#8b94a4;--muted-2:#606a7a;--border:rgba(255,255,255,.075);--border-2:rgba(255,255,255,.13);
  --accent:#8b7cff;--accent-2:#6d5df5;--accent-soft:rgba(139,124,255,.11);--accent-line:rgba(139,124,255,.30);
  --cyan:#58c9ff;--green:#37d39b;--yellow:#e5bd5f;--red:#f06e7f;--shadow:0 22px 60px rgba(0,0,0,.35);--r:16px;
}
html,body{min-height:100%}
body{
  font-family:'Vazirmatn',Tahoma,sans-serif;
  background:var(--bg);color:var(--text);
  display:flex;justify-content:center;align-items:center;
  padding:32px 18px;position:relative;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:-20% -10% auto auto;width:640px;height:640px;
  background:radial-gradient(circle,rgba(139,124,255,.14),transparent 65%);
  pointer-events:none;z-index:0;
}
body::after{
  content:"";position:fixed;inset:auto auto -30% -10%;width:560px;height:560px;
  background:radial-gradient(circle,rgba(88,201,255,.10),transparent 65%);
  pointer-events:none;z-index:0;
}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;cursor:pointer;background:none}
a{text-decoration:none;color:inherit}
svg{display:block;width:18px;height:18px;flex:none}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:all .7s cubic-bezier(.15,.85,.35,1);will-change:transform,opacity}
.reveal.visible{opacity:1;transform:translateY(0)}
.rd1{transition-delay:.05s}.rd2{transition-delay:.10s}.rd3{transition-delay:.15s}
.rd4{transition-delay:.20s}.rd5{transition-delay:.25s}.rd6{transition-delay:.30s}

/* CARD */
.card{
  position:relative;z-index:1;
  width:100%;max-width:540px;
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 96%,#000));
  border:1px solid var(--border);border-radius:22px;
  box-shadow:var(--shadow);overflow:hidden;
}

/* HEADER */
.hd{padding:22px 26px 18px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.hd-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:38px;height:38px;border-radius:12px;position:relative;overflow:hidden;flex:none;
  background:linear-gradient(145deg,#171b25,#0d1016);
  border:1px solid var(--border-2);box-shadow:0 8px 22px rgba(98,79,220,.22);
}
.brand-mark span{position:absolute;width:7px;height:24px;top:7px;border-radius:5px;transform:skew(-16deg)}
.brand-mark span:nth-child(1){right:10px;background:#a294ff}
.brand-mark span:nth-child(2){right:18px;background:#6f61ee;opacity:.85}
.brand-mark span:nth-child(3){right:25px;background:#4fc9ff;opacity:.7}
.brand-copy strong{display:block;font-size:14px;line-height:1;font-weight:800;letter-spacing:-.3px}
.brand-copy small{display:block;font-size:7px;color:var(--muted-2);letter-spacing:1.2px;margin-top:6px;font-weight:600}
.hd-actions{display:flex;gap:6px}
.hd-actions a{
  height:34px;padding:0 14px;border-radius:10px;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;transition:.22s;
}
.ghost-btn{background:var(--surface-3);border:1px solid var(--border);color:var(--muted)}
.ghost-btn:hover{color:var(--text);border-color:var(--border-2)}
.primary-btn{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  box-shadow:0 9px 24px rgba(105,87,230,.28);
}
.primary-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.primary-btn:active{transform:scale(.97)}

/* BODY */
.bd{padding:26px}
.eyebrow{
  font-size:9px;letter-spacing:.7px;text-transform:uppercase;
  color:#9f95ff;font-weight:800;margin-bottom:8px;
}
h1.title{font-size:24px;font-weight:800;letter-spacing:-.7px;line-height:1.35}
h1.title span{
  background:linear-gradient(90deg,#fff,#b9b0ff 65%,#7bd7ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{color:var(--muted);font-size:11px;line-height:1.9;margin-top:8px}

/* FORM */
form{margin-top:22px;display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{
  font-size:11px;color:var(--muted);font-weight:600;
  display:flex;align-items:center;gap:7px;
}
.field label .ico{
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:var(--accent-soft);color:#aaa0ff;
}
.field label .ico svg{width:13px;height:13px}
.field input,.field select{
  width:100%;padding:13px 15px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;font-size:12px;font-family:inherit;color:var(--text);
  transition:.22s;outline:0;
}
.field input::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus{
  border-color:var(--accent-line);background:var(--surface-3);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.field select{
  appearance:none;cursor:pointer;padding-left:38px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 14 10"><path d="M2 2l5 6 5-6" stroke="%238b94a4" stroke-width="2" fill="none" stroke-linecap="round"/></svg>');
  background-repeat:no-repeat;background-position:left 14px center;
}
.field select option{background:var(--surface-2);color:var(--text)}
.helper{
  display:none;font-size:10px;color:#efd47c;
  background:rgba(229,189,95,.07);border:1px solid rgba(229,189,95,.16);
  padding:8px 12px;border-radius:10px;line-height:1.7;
}
.helper.show{display:block}

/* SUBMIT */
.submit-btn{
  width:100%;height:48px;border-radius:13px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;font-size:13px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 12px 28px rgba(105,87,230,.30);
  transition:.22s;margin-top:4px;
}
.submit-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.submit-btn:active{transform:scale(.98)}
.submit-btn svg{width:16px;height:16px}

/* RESULT */
.result{
  margin-top:22px;padding:20px;
  background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--surface-2) 94%,#000));
  border:1px solid var(--border-2);border-radius:16px;
  animation:fadeUp .55s cubic-bezier(.15,.85,.35,1);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.res-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px dashed var(--border);margin-bottom:14px;
}
.res-head strong{font-size:12px}
.badge{
  display:inline-flex;align-items:center;gap:4px;
  min-height:24px;padding:0 9px;border-radius:999px;
  font-size:9px;font-weight:700;
}
.badge.success{color:#76e3ba;background:rgba(55,211,155,.09);border:1px solid rgba(55,211,155,.16)}
.badge.info{color:#81d5ff;background:rgba(88,201,255,.09);border:1px solid rgba(88,201,255,.16)}
.row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:11px}
.row + .row{border-top:1px solid var(--border)}
.row .lbl{color:var(--muted)}
.row .val{color:var(--text);font-weight:600}
.row .val code{
  background:var(--surface);border:1px solid var(--border);
  padding:3px 8px;border-radius:7px;font-size:10px;font-family:inherit;
}
.price-box{
  margin:16px 0 10px;padding:20px;
  background:radial-gradient(circle at 30% 0%,rgba(139,124,255,.14),transparent 60%),var(--surface);
  border:1px solid var(--accent-line);border-radius:14px;
  text-align:center;position:relative;overflow:hidden;
}
.price-box::after{
  content:"";position:absolute;inset:auto -30px -30px auto;width:140px;height:140px;
  background:radial-gradient(circle,rgba(88,201,255,.14),transparent 65%);pointer-events:none;
}
.price-val{
  position:relative;z-index:1;
  font-size:40px;font-weight:800;letter-spacing:-1.5px;
  background:linear-gradient(90deg,#fff,#b9b0ff 60%,#7bd7ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}
.price-unit{position:relative;z-index:1;font-size:11px;color:var(--muted);display:block;margin-top:6px}
.price-tip{position:relative;z-index:1;font-size:9px;color:var(--muted-2);margin-top:10px}
.cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:46px;margin-top:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-radius:13px;color:#fff;font-size:12px;font-weight:700;
  box-shadow:0 12px 28px rgba(105,87,230,.28);
  transition:.22s;
}
.cta:hover{filter:brightness(1.08);transform:translateY(-2px)}
.cta:active{transform:scale(.98)}
.cta .arrow{transition:transform .25s}
.cta:hover .arrow{transform:translateX(-4px)}

/* ERROR */
.error{
  margin-top:20px;padding:14px 18px;
  background:rgba(240,110,127,.06);
  border:1px solid rgba(240,110,127,.28);
  border-radius:12px;color:#fa9baa;
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;
}
.error svg{width:16px;height:16px;color:var(--red)}
.err-shake{animation:shake .4s ease}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}

/* FIELD ERROR */
.fld-err input,.fld-err select{
  border-color:rgba(240,110,127,.5)!important;
  background:rgba(240,110,127,.05)!important;
}
.fld-err label{color:#fa9baa!important}
.fld-err label .ico{background:rgba(240,110,127,.12);color:#fa9baa}
.fld-err .helper{
  display:block;color:#fa9baa;
  background:rgba(240,110,127,.06);border-color:rgba(240,110,127,.22);
}

/* FOOTER */
.ft{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--border);
  text-align:center;font-size:10px;color:var(--muted-2);
}
.ft a{color:#9f95ff;font-weight:600}
.ft a:hover{color:#b9b0ff}

/* RESPONSIVE */
@media (max-width:480px){
  body{padding:18px 12px}
  .card{border-radius:18px}
  .hd{padding:18px 18px 14px}
  .bd{padding:20px 18px}
  h1.title{font-size:20px}
  .price-val{font-size:32px}
  .brand-copy strong{font-size:13px}
  .hd-actions a{height:32px;padding:0 12px;font-size:10px}
  .field input,.field select{padding:12px 13px;font-size:11px}
  .submit-btn{height:44px;font-size:12px}
}