:root {
  --violet: #7C3AED;
  --violet-dark: #5B21B6;
  --pink: #EC4899;
  --bg: #ffffff;
  --muted: #777f8d;
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(124,58,237,.12);
  --glow: 0 10px 25px rgba(236,72,153,.35);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;font-family:"Vazirmatn",system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif;color:#1f2937;background:var(--bg);line-height:1.9;}
.container{width:min(1100px,92%);margin-inline:auto}

/* هدر بالا */
.hero{
  position:relative;
  min-height:60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero { position:relative; min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; }
.hero-overlay { position:absolute; inset:0; background: rgba(179, 171, 171, 0.226); }
.hero-inner { position:relative; padding:40px 0; }
.brand { display:flex; gap:10px; justify-content:center; align-items:center; margin-bottom:10px; }
.brand-logo { width:54px; height:54px; border-radius:14px; }
.brand-title { font-size:28px; font-weight:800; }
.hero-title { font-size:3rem;color: #ffffff; text-align: center;text-shadow: 2px 2px 6px rgba(0,0, 0, 0.6); font-weight:800; margin:0.3rem 0; }
.hero-subtitle { font-size: 3rem; color: #ffffff; text-align: center;text-shadow: 2px 2px 6px rgba(0,0, 0, 0.6); margin:0 0 1rem; opacity:0.9; }
.cta-call { display:inline-flex;box-shadow: 0 10px 25px rgba(255,0,150,0.4); gap:10px;font-size: 1.4rem;margin-top: 60px; background:linear-gradient(90deg,var(--violet),var(--pink)); color:#fff; padding: 16px 32px ; border-radius:14px; text-decoration:none; font-weight:700; }

/* کارت‌ها */
.cards-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin:34px auto 60px}
.card{
  grid-column:span 12;
  background:var(--card);border-radius:18px;padding:22px 20px 18px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease
}
.card:before{
  content:"";position:absolute;inset:-2px;
  background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(236,72,153,.08));
  filter:blur(0.5px);pointer-events:none
}
.card:hover{transform:translateY(-15px);box-shadow:var(--glow), var(--shadow);background:linear-gradient(0deg, rgba(236,72,153,.08), rgba(124,58,237,.04)), #fff}

@media (min-width:820px){
  #loan-car,#loan-sim,#loan-home,#loan-gold{grid-column:span 6}
  #about{grid-column:span 12}
}

/* سربرگ کارت */
.card-head{display:flex;gap:12px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.card-icon{width:46px;height:46px;display:inline-grid;place-items:center;background:linear-gradient(145deg,#fff 60%, rgba(124,58,237,.08));border:2px solid rgba(124,58,237,.22);color:var(--violet);border-radius:14px;box-shadow:var(--shadow);font-size:22px}
.card h2{margin:0;font-size:20px;color:#1f2937}
.card .lead{color:#374151;margin:.2rem 0 .6rem}
.card h3{margin:14px 0 8px;color:var(--violet-dark);font-size:17px}
.bullets{margin:0 0 10px 0;padding:0 18px;list-style:none}
.bullets li{position:relative;margin:.25rem 0;padding-right:20px}
.bullets li:before{content:"";position:absolute;right:0;top:.6rem;width:8px;height:8px;border-radius:50%;background:linear-gradient(145deg,var(--violet),var(--pink));opacity:.45}
.steps{margin:.2rem 0 .8rem 0;padding:0 18px}

/* دکمه‌ها */
.btn-call{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,var(--violet),var(--pink));
  color:#fff;text-decoration:none;padding:10px 14px;border-radius:12px;font-weight:700;
  box-shadow:var(--glow);transition:transform .2s ease, filter .2s ease
}
.btn-call:hover{transform:translateY(-2px);filter:saturate(1.1)}

/* جداکننده */
hr{border:none;height:1px;background:linear-gradient(90deg, rgba(124,58,237,.15), rgba(236,72,153,.15));margin:12px 0}

/* فوتر */
.site-footer{background: linear-gradient(135deg, hwb(320 59% 3%) ,#e258cb);color: white; text-align: center;padding: 20px 10px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; box-shadow: 0 -30px 10px rgba(0,0, 0, 0.2);}
.footer-bar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px 0}
.footer-item{display:inline-flex;gap:8px;align-items:center;text-decoration:none;color:var(--violet-dark);background:#fff;padding:8px 12px;border-radius:12px;border:1px solid rgba(124,58,237,.18);box-shadow:var(--shadow);transition:transform .18s ease}
.footer-item:hover{transform:translateY(-2px)}
.footer-item i{font-size:18px}
.copy{text-align:center;color:#1a0216;font-size:13px;padding:8px 0 16px}

/* مودال تماس دسکتاپ */
.modal{position:fixed;inset:0;display:none}
.modal.active{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(17,24,39,.45);backdrop-filter:blur(2px)}
.modal-card{position:relative;z-index:2;width:min(420px,92%);margin:8vh auto;background:#fff;border-radius:18px;padding:18px 16px;box-shadow:var(--glow)}
.modal-close{position:absolute;top:10px;left:10px;border:0;background:transparent;color:#6b7280;font-size:20px;cursor:pointer}
.modal-card h3{margin:0 0 6px;color:var(--violet-dark)}
.dial-number{font-weight:800;font-size:22px;color:var(--violet);letter-spacing:.6px;margin:.2rem 0 1rem}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-call{flex:1;text-align:center;text-decoration:none;color:#fff;background:linear-gradient(90deg,var(--violet),var(--pink));padding:10px;border-radius:12px;font-weight:700}
.modal-copy{flex:1;background:#f3f4f6;border:1px solid rgba(124,58,237,.15);color:#111;padding:10px;border-radius:12px;font-weight:700;cursor:pointer}
.copy-hint{color:#e9e2e2}

/* ریسپانسیو ریز */
@media (min-width: 820px ){
  #loan-car ,#loan-sim, #loan-home, #loan-gold {grid-column:span 6;}
}
@media (max-width:520px){
  .hero-title{font-size: 26px;}
}
/* ==== Hero Background Fix ==== */
.hero {
  position: relative;
  height: 100vh;
  background-size: cover;       /* عکس کل صفحه رو می‌گیره */
  background-repeat: no-repeat; /* جلوی تکرار عکس رو می‌گیره */
  background-position: center;  /* عکس وسط چین میشه */
  transition: background-image 1s ease-in-out; /* افکت نرم تغییر */
}