:root{
  --bg:#f7fbff;
  --card:#ffffff;
  --text:#071124;
  --muted:#6b7280;
  --accent-pink:#ff9ecb;
  --accent-cyan:#7ce7ff;
  --accent-violet:#b8a6ff;
  --neon:#00ffd1;
  --glass:rgba(255,255,255,0.7);
  --radius:14px;
  --maxw:1200px;
  --shadow:0 8px 30px rgba(2,6,23,0.06);
}
*{box-sizing:border-box}
html{direction:rtl}
body{
  margin:0;
  font-family:Vazirmatn, "Segoe UI", Roboto, Arial;
  background:linear-gradient(180deg,#f7fbff 0%, #eef9ff 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
.container{max-width:var(--maxw);margin:0 auto;padding:18px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
#taminhub-logo{height:56px;width:auto;display:block;transition:transform .28s ease}
.logo:hover #taminhub-logo{transform:translateY(-4px) scale(1.02);filter:drop-shadow(0 12px 30px rgba(0,255,209,0.12))}
nav.main-nav{display:flex;gap:10px;align-items:center}
nav.main-nav a{padding:10px 14px;border-radius:10px;text-decoration:none;color:var(--text);font-weight:700}
nav.main-nav a:hover{background:linear-gradient(90deg,rgba(124,58,237,0.06),rgba(14,165,164,0.04))}
.mobile-toggle{display:none;background:transparent;border:1px solid rgba(2,6,23,0.06);padding:8px;border-radius:8px}
.btn-primary{
  background:linear-gradient(90deg,var(--accent-cyan),var(--accent-violet));
  color:#021124;padding:10px 16px;border-radius:12px;font-weight:800;text-decoration:none;
  box-shadow:0 8px 30px rgba(124,58,237,0.12);
  display:inline-flex;align-items:center;gap:8px;
}
.hero{display:grid;grid-template-columns:1fr 420px;gap:22px;align-items:center;margin-top:20px}
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.meta-badge{display:inline-block;background:linear-gradient(90deg,var(--accent-pink),var(--accent-cyan));color:#021124;padding:6px 10px;border-radius:999px;font-weight:800}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.feature{padding:14px;border-radius:12px;background:linear-gradient(180deg,rgba(255,158,203,0.06),rgba(124,58,237,0.02));border:1px solid rgba(124,58,237,0.04)}
.lead{color:var(--muted);margin:0 0 16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.footer{margin-top:36px;padding:20px 0;border-top:1px solid rgba(2,6,23,0.04);color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.article{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;border:1px solid rgba(15,23,42,0.04);background:#fff}
.form-row{display:flex;gap:12px;flex-direction:column}
input,textarea,select{padding:10px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);width:100%}
.small{font-size:13px;color:var(--muted)}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:12px}

/* Lightweight animated hero accent */
.hero-accent{
  position:relative;height:120px;border-radius:12px;overflow:hidden;background:linear-gradient(90deg,rgba(124,58,237,0.06),rgba(14,165,164,0.04));
}
.hero-accent::after{
  content:"";position:absolute;left:-40%;top:-20%;width:200%;height:140%;background:radial-gradient(circle at 20% 30%, rgba(255,158,203,0.12), transparent 10%), radial-gradient(circle at 80% 70%, rgba(124,58,237,0.08), transparent 12%);animation:float 8s linear infinite;opacity:0.95;
}
@keyframes float{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(2deg)}100%{transform:translateY(0) rotate(0)}}

/* subtle entrance animations */
.fade-in{animation:fadeInUp .7s ease both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  nav.main-nav{display:none}
  .mobile-toggle{display:inline-block}
  .features{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
}