/* RESET */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Vazirmatn',sans-serif}

/* COLORS */
:root{
  --bg:#050510;
  --bg2:#0a0a1a;
  --neon:#00f5ff;
  --neon2:#ff00ff;
  --green:#00ff9d;
  --text:#e8e8e8;
  --muted:#9a9ab5;
}

/* BODY */
body{
  background:radial-gradient(circle at top,#1a1a40 0,#050510 60%,#000 100%);
  color:var(--text);
}

/* LAYOUT */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:60px 20px 40px;
}

/* HEADER */
.header{
  position:sticky;top:0;z-index:1000;
  background:rgba(5,5,16,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,245,255,.35);
  padding:12px 30px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--neon);
  display:flex;align-items:center;justify-content:center;
  color:var(--neon);font-weight:700;
  box-shadow:0 0 12px var(--neon);
}
.brand-text{
  font-size:18px;font-weight:700;color:var(--neon);
  text-shadow:0 0 10px var(--neon);
}
.nav{display:flex;gap:25px}
.nav a{
  color:var(--muted);font-size:15px;position:relative;padding-bottom:4px;
  text-decoration:none;
}
.nav a:hover{color:var(--neon)}
.nav a::after{
  content:"";position:absolute;bottom:0;right:0;width:0;height:2px;
  background:linear-gradient(90deg,var(--neon),var(--neon2));
  transition:.25s;
}
.nav a:hover::after{width:100%}
.header-actions{display:flex;gap:10px}
.btn{
  padding:7px 14px;border-radius:999px;
  border:1px solid var(--neon);color:var(--neon);
  background:transparent;cursor:pointer;transition:.25s;
  text-decoration:none;font-size:14px;display:inline-block;
}
.btn.primary{
  background:linear-gradient(135deg,var(--neon),var(--neon2));
  color:#000;border:none;box-shadow:0 0 16px var(--neon);
}

/* HERO */
.hero{
  display:flex;flex-wrap:wrap;gap:40px;align-items:center;
}
.hero-title{font-size:32px;line-height:1.6;margin-bottom:10px}
.hero-title span{color:var(--neon);text-shadow:0 0 12px var(--neon)}
.hero-sub{color:var(--muted);font-size:15px;max-width:420px;margin-bottom:18px}
.hero-actions{display:flex;gap:12px}

/* SECTION */
.section-title{
  font-size:22px;color:var(--neon);
  text-shadow:0 0 10px var(--neon);
  margin-bottom:8px;
}
.section-sub{
  font-size:13px;color:var(--muted);
  margin-bottom:25px;
}

/* CARDS */
.cards{
  display:flex;flex-wrap:wrap;gap:20px;
}
.card{
  flex:1 1 300px;
  background:rgba(10,10,25,.9);
  border:1px solid rgba(0,245,255,.3);
  border-radius:16px;
  padding:20px;
  box-shadow:0 0 20px rgba(0,245,255,.15);
}
.card-label{
  font-size:12px;color:var(--green);margin-bottom:6px;
}
.card-title{
  font-size:18px;margin-bottom:8px;
}
.card-desc{
  font-size:14px;color:var(--muted);margin-bottom:10px;
}
.card-meta{
  font-size:12px;color:var(--muted);margin-bottom:8px;
}
.card-price{
  font-size:20px;color:var(--green);margin-bottom:10px;
}
.card-cta{
  color:var(--neon);font-size:14px;text-decoration:none;cursor:pointer;
}

/* TABLE */
.table{
  width:100%;border-collapse:collapse;
  margin-top:10px;font-size:14px;
}
.table th,.table td{
  border:1px solid rgba(0,245,255,.25);
  padding:8px 10px;text-align:center;
}
.table th{
  background:rgba(0,245,255,.08);
}

/* FORM */
.form{
  max-width:400px;margin:0 auto;
  background:rgba(10,10,25,.9);
  border-radius:16px;
  border:1px solid rgba(0,245,255,.3);
  padding:20px;
  box-shadow:0 0 20px rgba(0,245,255,.15);
}
.form h1{
  font-size:20px;margin-bottom:15px;color:var(--neon);
}
.form-group{margin-bottom:12px}
.form-group label{
  display:block;font-size:13px;margin-bottom:4px;color:var(--muted);
}
.form-group input{
  width:100%;padding:8px 10px;
  border-radius:8px;border:1px solid rgba(0,245,255,.4);
  background:#050510;color:var(--text);
}
.form-footer{
  margin-top:10px;font-size:12px;color:var(--muted);
}

/* FOOTER */
.footer{
  margin-top:40px;padding:20px;
  text-align:center;font-size:12px;color:var(--muted);
  border-top:1px solid rgba(0,245,255,.3);
}

/* RESPONSIVE */
@media(max-width:768px){
  .header{padding:10px 16px}
  .nav{display:none}
  .hero-title{font-size:24px}
  .card{flex:1 1 100%}
  .container{padding:40px 16px 30px}
}