:root{
  --bg-1:#0a0aa8;
  --bg-2:#1b1b6f;
  --accent:#fffd74;
  --ink:#0a0aa8;
  --white:#fff;
  --glass:rgba(255,255,255,.08);
  --glass-border:rgba(255,255,255,.22);
  --shadow:0 8px 28px rgba(0,0,0,.35);
}

#address {
  font-size: 12px;
  padding:13px 9px;
}

/* پایه */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100vh;overflow: hidden;}
body{
  font-family:"Peyda",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 700px at 70% -10%, #2a2aa0 0%, transparent 60%),
              linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:var(--white);
}



/* شِل کلی صفحه */
.shell{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  isolation:isolate;
  padding:24px 16px 28px;
}

/* صحنه و مسیر */
.scene{
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
}
.path{
  position:absolute;
  width:120%; height:120%;
  top:-10%; right:-10%; /* مورّب از بالا-راست به پایین-چپ */
}

/* خودِ خط مسیر (نازک و روشن) */
.route-line{
  fill:none;
  stroke:var(--accent);
  stroke-width:2.25;
  stroke-linecap:round;
  opacity:.85;
}

/* ردیفِ فلش‌ها روی مسیر */
.arrows{
  font-size:14px;
  font-weight:900;
  fill:var(--accent);
  letter-spacing: 1px; /* همون مقداری که گذاشتی */
  opacity:.9;
  /* ⚠️ انیمیشن CSS حذف شد؛ حرکت با SMIL در خود HTML انجام می‌شود */
}

/* برند */
.brand{
  z-index:1; display:flex; justify-content:center; align-items:center;
  padding-block:8px 6px;
}
.logo{ height:88px; width:auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }

/* استک دکمه‌ها */
.stack{
  z-index:1;
  display:grid;
  gap:24px;
  align-content:center;
  min-height:54vh;
}

/* کارت‌های شیشه‌ای */
.card{
  justify-self:center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background:var(--glass);
  border:1px solid var(--glass-border);
  box-shadow: var(--shadow);
  border-radius:18px;
  padding:14px;
  max-width: 16rem;
}


/* دکمه‌ها */
.cta{
  display:inline-block;
  min-width:14rem;
  text-align:center;
  text-decoration:none;
  font-weight:800;
  padding:13px 18px;
  border-radius:12px;
  color:var(--ink);
  background:var(--accent);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.cta:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(0,0,0,.34);
  background:#fff94a;
}
.cta:focus-visible{
  outline:3px solid rgba(255,253,116,.9);
  outline-offset:3px;
}

/* ریسپانسیو */
@media (max-width: 540px){
  .logo{height:78px}
  .cta{max-width:14rem}
  .card{padding:12px;  max-width: 16rem;}
}