@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');
:root{
  --bg:#070912;
  --bg2:#0b0f1a;
  --card:#101728;
  --card2:#161f36;
  --border:#253352;
  --accent:#4f7dff;
  --accent2:#00e5ff;
  --gold:#f0b429;
  --green:#22e0a0;
  --danger:#ff5c6a;
  --text:#f0f4ff;
  --muted:#93a1c2;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Vazirmatn',Tahoma,sans-serif}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);line-height:1.85}
a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
img,svg{display:block}

.bg-fx{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(680px 460px at 88% 2%, rgba(79,125,255,.30), transparent 60%),
  radial-gradient(740px 560px at 2% 20%, rgba(0,229,255,.24), transparent 60%),
  radial-gradient(560px 420px at 55% 95%, rgba(240,180,41,.10), transparent 60%),
  radial-gradient(420px 320px at 90% 70%, rgba(34,224,160,.10), transparent 60%)}
.bg-grid{position:fixed;inset:0;z-index:-1;opacity:.25;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 85% 60% at 50% 20%, #000 40%, transparent 100%)}

header{position:sticky;top:0;background:rgba(8,11,19,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);z-index:50}
nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:800}
.brand img{filter:drop-shadow(0 0 14px rgba(0,229,255,.55))}
.brand span{background:linear-gradient(90deg,var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
nav ul{display:flex;gap:22px;list-style:none;font-size:.92rem}
nav ul a{color:var(--muted);transition:.2s}
nav ul a:hover,nav ul a.active{color:var(--text)}
.nav-actions{display:flex;gap:10px;align-items:center}

.btn{display:inline-block;padding:10px 22px;border-radius:10px;font-weight:700;transition:.2s;cursor:pointer;border:none;font-size:.92rem;font-family:inherit}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 8px 30px rgba(0,229,255,.4),0 0 0 1px rgba(0,229,255,.15) inset}
.btn-primary:hover{filter:brightness(1.15) saturate(1.15);box-shadow:0 10px 40px rgba(0,229,255,.6);transform:translateY(-2px)}
.btn-ghost{background:rgba(0,229,255,.05);border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent2);color:var(--accent2);box-shadow:0 0 20px rgba(0,229,255,.15)}
.btn-block{width:100%;text-align:center}

.hero{text-align:center;padding:76px 20px 46px}
.pill{display:inline-block;border:1px solid rgba(0,229,255,.5);background:rgba(0,229,255,.09);border-radius:30px;padding:6px 16px;font-size:.8rem;color:var(--accent2);margin-bottom:22px;box-shadow:0 0 28px rgba(0,229,255,.22);text-shadow:0 0 10px rgba(0,229,255,.5)}
.hero h1{font-size:2.3rem;font-weight:800;line-height:1.5;margin-bottom:14px;letter-spacing:-.3px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(0,229,255,.35))}
.hero p{color:var(--muted);max-width:600px;margin:0 auto 28px;font-size:1rem}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.stats{display:flex;gap:34px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.stat b{font-size:1.3rem;color:var(--accent2);text-shadow:0 0 14px rgba(0,229,255,.4)}
.stat span{display:block;color:var(--muted);font-size:.8rem}

section{padding:34px 0 64px}
.sec-title{text-align:center;font-size:1.55rem;font-weight:800;margin-bottom:6px}
.sec-title em{font-style:normal;color:var(--accent2)}
.sub{text-align:center;color:var(--muted);margin-bottom:32px;font-size:.92rem}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.feature{background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid var(--border);border-radius:var(--radius);padding:22px;text-align:center;transition:.25s}
.feature:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 30px rgba(59,130,246,.12)}
.feature .icon{font-size:1.7rem;margin-bottom:8px}
.feature h3{font-size:.96rem;margin-bottom:4px}
.feature p{color:var(--muted);font-size:.84rem}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.plan{background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;text-align:center;position:relative;transition:.25s}
.plan:hover{border-color:var(--accent2);transform:translateY(-5px);box-shadow:0 18px 44px rgba(0,229,255,.22)}
.plan.popular{border-color:var(--green);box-shadow:0 0 0 1px rgba(34,224,160,.35),0 18px 44px rgba(34,224,160,.18)}
.plan.express{border-color:var(--gold);box-shadow:0 0 0 1px rgba(240,180,41,.35),0 18px 44px rgba(240,180,41,.18)}
.badge{position:absolute;top:-12px;right:50%;transform:translateX(50%);background:var(--green);color:#04241a;font-size:.72rem;font-weight:800;padding:3px 14px;border-radius:20px;white-space:nowrap}
.plan.express .badge{background:var(--gold);color:#332405}
.plan h3{font-size:1.06rem;margin-bottom:4px}
.plan .tag{color:var(--muted);font-size:.8rem;margin-bottom:14px}
.duration{width:100%;background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:9px;font-size:.9rem;margin-bottom:14px;font-family:inherit;cursor:pointer}
.price{font-size:1.5rem;font-weight:800;color:var(--accent2);margin-bottom:2px;min-height:2.2rem;text-shadow:0 0 16px rgba(0,229,255,.35)}
.plan ul{list-style:none;margin:14px 0 20px;color:var(--muted);font-size:.87rem;text-align:right}
.plan ul li{padding:5px 0;border-bottom:1px dashed var(--border)}
.plan ul li::before{content:"✓ ";color:var(--green)}

.payment{background:var(--card2);border:1px solid var(--border);border-radius:18px;padding:36px 26px}
.pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-top:20px}
.pay-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.pay-card h3{margin-bottom:10px;color:var(--accent2);font-size:1rem}
.pay-card p{color:var(--muted);font-size:.88rem;margin-bottom:14px}
.card-number{direction:ltr;text-align:center;background:var(--bg2);border:1px dashed var(--accent);border-radius:12px;padding:13px;font-size:1.06rem;letter-spacing:2px;font-weight:700;margin-bottom:6px;cursor:pointer;transition:.2s}
.card-number:hover{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(6,182,212,.08)}
.card-owner{text-align:center;color:var(--muted);font-size:.84rem;margin-bottom:10px}
.copy-hint{text-align:center;font-size:.76rem;color:var(--accent2)}

.apps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.app-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.app-card h3{font-size:.96rem;margin-bottom:10px;color:var(--accent2)}
.app-card a{display:block;padding:7px 0;color:var(--muted);font-size:.88rem;border-bottom:1px dashed var(--border)}
.app-card a:hover{color:var(--text)}
.app-card a::before{content:"↓ "}

.tut-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.tut-tab{padding:9px 20px;border-radius:30px;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;font-family:inherit;font-size:.88rem;font-weight:600;transition:.2s}
.tut-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tut-panel{display:none}
.tut-panel.active{display:block}
.steps{max-width:740px;margin:0 auto}
.step{display:flex;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:12px}
.step-num{flex-shrink:0;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;background:var(--accent);color:#fff}
.step h4{font-size:.95rem;margin-bottom:3px}
.step p{color:var(--muted);font-size:.87rem}
.step code{direction:ltr;display:inline-block;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:1px 9px;font-size:.8rem;color:var(--accent2)}
.tut-note{max-width:740px;margin:16px auto 0;background:rgba(47,191,135,.06);border:1px solid rgba(47,191,135,.25);border-radius:12px;padding:13px 18px;font-size:.86rem;color:var(--muted)}
.tut-note b{color:var(--green)}

.speed-box{background:var(--card2);border:1px solid var(--border);border-radius:18px;padding:40px 26px;text-align:center}
.gauge{font-size:3rem;font-weight:800;color:var(--accent2);margin:14px 0 4px;direction:ltr;text-shadow:0 0 26px rgba(0,229,255,.5)}
.gauge small{font-size:.95rem;color:var(--muted);font-weight:400}
.speed-stats{display:flex;gap:30px;justify-content:center;margin:12px 0 22px;color:var(--muted);font-size:.88rem;flex-wrap:wrap}
.speed-stats b{color:var(--text)}
#speedBar{height:8px;background:var(--bg2);border-radius:8px;max-width:420px;margin:0 auto 22px;overflow:hidden;border:1px solid var(--border)}
#speedFill{height:100%;width:0;background:var(--accent2);transition:width .3s}

.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.status-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-align:center}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted);margin-left:6px}
.status-dot.up{background:var(--green);box-shadow:0 0 8px var(--green)}
.status-dot.down{background:var(--danger);box-shadow:0 0 8px var(--danger)}
.status-card h3{font-size:.88rem;color:var(--muted);margin-bottom:6px}
.status-card .val{font-weight:800;font-size:1rem}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.contact-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center}
.contact-card .icon{font-size:1.6rem;margin-bottom:8px}
.contact-card h3{font-size:.88rem;margin-bottom:6px;color:var(--muted)}
.contact-card .val{font-weight:700;font-size:1rem;direction:ltr}

details{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;padding:15px 20px}
summary{cursor:pointer;font-weight:700;font-size:.93rem}
details p{color:var(--muted);margin-top:8px;font-size:.88rem}

footer{border-top:1px solid var(--border);text-align:center;padding:24px;color:var(--muted);font-size:.84rem}

/* auth pages */
.auth-wrap{min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-card{background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid var(--border);border-radius:18px;padding:36px 32px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.auth-card h1{font-size:1.3rem;font-weight:800;text-align:center;margin-bottom:6px}
.auth-card .sub{margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px}
.field input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-family:inherit;font-size:.94rem}
.field input:focus{outline:none;border-color:var(--accent)}
.auth-switch{text-align:center;margin-top:18px;font-size:.86rem;color:var(--muted)}
.auth-switch a{color:var(--accent2);font-weight:700}
.form-msg{font-size:.85rem;border-radius:10px;padding:10px 14px;margin-bottom:14px;display:none}
.form-msg.error{display:block;background:rgba(229,72,77,.1);color:#ff8388;border:1px solid rgba(229,72,77,.3)}
.form-msg.ok{display:block;background:rgba(47,191,135,.1);color:#5fe0ab;border:1px solid rgba(47,191,135,.3)}

/* dashboard */
.dash-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:14px}
.dash-head h1{font-size:1.4rem;font-weight:800}
.dash-head p{color:var(--muted);font-size:.9rem}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:28px}
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.dash-card h3{font-size:.95rem;color:var(--muted);margin-bottom:10px}
.sub-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--border);font-size:.88rem}
.sub-item:last-child{border-bottom:none}
.tag-ok{color:var(--green);font-size:.78rem;background:rgba(47,191,135,.1);padding:2px 10px;border-radius:20px}
.tag-pending{color:var(--gold);font-size:.78rem;background:rgba(201,162,75,.12);padding:2px 10px;border-radius:20px}
.empty-note{color:var(--muted);font-size:.88rem;text-align:center;padding:20px 0}

/* floating online-support widget */
.support-fab{position:fixed;bottom:22px;left:22px;z-index:60;display:flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;text-decoration:none;
  padding:12px 18px;border-radius:30px;font-weight:700;font-size:.86rem;
  box-shadow:0 8px 26px rgba(6,182,212,.35);transition:.2s;border:none;cursor:pointer;font-family:inherit}
.support-fab:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(6,182,212,.5)}
.support-fab .dot{width:8px;height:8px;border-radius:50%;background:#8ef7c1;box-shadow:0 0 8px #8ef7c1;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.support-panel{position:fixed;bottom:80px;left:22px;z-index:61;width:310px;max-width:calc(100vw - 32px);
  background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid var(--border);border-radius:16px;
  padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.4);display:none}
.support-panel.open{display:block}
.support-panel h4{font-size:.95rem;margin-bottom:4px}
.support-panel p{color:var(--muted);font-size:.8rem;margin-bottom:12px}
.support-panel textarea{width:100%;min-height:80px;background:var(--bg2);border:1px solid var(--border);
  border-radius:10px;padding:10px;color:var(--text);font-family:inherit;font-size:.86rem;resize:vertical;margin-bottom:8px}
.support-panel input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:9px 10px;color:var(--text);font-family:inherit;font-size:.86rem;margin-bottom:8px}
.support-panel .msg{font-size:.8rem;margin-top:8px}
@media(max-width:640px){ .support-panel{left:12px;bottom:76px} }

/* trial card on dashboard */
.trial-btn{width:100%;margin-top:10px}

@media(max-width:640px){ nav ul{display:none} .hero h1{font-size:1.5rem} .gauge{font-size:2.2rem} .support-fab{left:12px;bottom:12px;padding:10px 14px;font-size:.8rem} }