.ararat-wrap {
  direction: rtl;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  --halo: 72px;
  --icon: 48px;
  --at-icon-a: #002698;
  --at-icon-b: #FF5C00;
  --at-hero-a: #FF5C00;
  --at-hero-b: #002698;
}
.ararat-wrap * { box-sizing: border-box; }

/* ---------- Hero ---------- */
.at-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(120deg, var(--at-hero-b), var(--at-hero-a), var(--at-hero-b));
  background-size: 300% 300%;
  animation: at-gradient-shift 14s ease infinite;
}
@keyframes at-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.at-hero::before,
.at-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.09);
  animation: at-float 9s ease-in-out infinite;
}
.at-hero::before { width: 260px; height: 260px; top: -80px; right: -60px; }
.at-hero::after   { width: 180px; height: 180px; bottom: -60px; left: 6%; animation-delay: 2.5s; }
@keyframes at-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-22px) scale(1.06); }
}
.at-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 24px;
  max-width: 760px;
  margin: 0 auto;
}
.at-hero-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
  backdrop-filter: blur(4px);
  animation: at-fade-in-up 0.8s ease both;
}
.at-hero-title {
  color: #ffffff;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  margin: 0 0 12px;
  animation: at-fade-in-up 0.8s ease 0.15s both;
}
.at-hero-sub {
  color: rgba(255,255,255,0.9);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  margin: 0;
  animation: at-fade-in-up 0.8s ease 0.3s both;
}
@keyframes at-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Timeline track ---------- */
.at-section {
  max-width: 1120px;
  margin: 56px auto;
  padding: 0 16px;
}
.at-track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/*
  IMPORTANT: .at-step itself must never receive opacity / transform /
  filter. Any of those creates a new CSS stacking context, and since
  each .at-line visually reaches into the NEIGHBOURING step to connect
  the two icons, a stacking context on .at-step would trap that
  neighbour's icon z-index inside its own box - breaking the "line
  stays behind the circle" rule for the reaching segment specifically.
  Keeping .at-step, .at-line and .at-num-halo free of those properties
  means every icon and every line share one flat stacking context, so
  z-index alone (halo above line) is enough, in every direction, at
  every screen size. Only .at-card animates in - it never needs to be
  masked by anything, so giving it its own stacking context is safe.
*/
.at-step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
}

.at-line {
  position: absolute;
  top: calc(var(--halo) / 2);
  left: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--at-icon-b), var(--at-icon-a));
  z-index: 1;
  pointer-events: none;
}
.at-step:first-child .at-line { display: none; }

.at-num-halo {
  width: var(--halo);
  height: var(--halo);
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}
.at-num {
  width: var(--icon);
  height: var(--icon);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--at-icon-a), var(--at-icon-b));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  position: relative;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.at-num::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 8px;
  width: 13px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  filter: blur(1px);
}
.at-step:hover .at-num {
  transform: scale(1.08);
  box-shadow: 0 8px 18px rgba(0,0,0,0.24);
}

.at-card {
  position: relative;
  margin-top: 14px;
  border-radius: 14px;
  padding: 18px 14px;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  animation: at-card-in 0.6s ease forwards;
}
@keyframes at-card-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.at-step:nth-child(1) .at-card { animation-delay: 0s; }
.at-step:nth-child(2) .at-card { animation-delay: .08s; }
.at-step:nth-child(3) .at-card { animation-delay: .16s; }
.at-step:nth-child(4) .at-card { animation-delay: .24s; }
.at-step:nth-child(5) .at-card { animation-delay: .32s; }
.at-step:nth-child(6) .at-card { animation-delay: .40s; }
.at-step:nth-child(7) .at-card { animation-delay: .48s; }
.at-step:nth-child(8) .at-card { animation-delay: .56s; }

.at-card::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--at-icon-b), var(--at-icon-a));
  filter: blur(16px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.at-card::after {
  content: '';
  position: absolute;
  top: -11px;
  left: -9px;
  width: 26px;
  height: 26px;
  background: linear-gradient(140deg, var(--at-icon-b), var(--at-icon-a));
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity: 0;
  transform: scale(0.4) rotate(-15deg);
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.35));
  pointer-events: none;
}
.at-step:hover .at-card {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}
.at-step:hover .at-card::before {
  opacity: 0.45;
  animation: at-glow-pulse 1.8s ease-in-out infinite;
}
.at-step:hover .at-card::after {
  animation: at-spark-twinkle 0.9s ease-out forwards;
}
@keyframes at-glow-pulse {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.55; }
}
@keyframes at-spark-twinkle {
  0%   { opacity: 0;    transform: scale(0.4) rotate(-15deg); }
  30%  { opacity: 1;    transform: scale(1.15) rotate(0deg); }
  55%  { opacity: 0.5;  transform: scale(0.85) rotate(6deg); }
  75%  { opacity: 1;    transform: scale(1.05) rotate(-3deg); }
  100% { opacity: 0.9;  transform: scale(1) rotate(0deg); }
}

.at-title {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 10px;
  min-height: 42px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.at-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--at-icon-b), var(--at-icon-a));
}
.at-desc {
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  line-height: 1.7;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ararat-wrap { --halo: 64px; --icon: 44px; }
  .at-section { margin: 40px auto; }

  .at-track {
    flex-direction: column;
    align-items: stretch;
  }
  .at-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: right;
    padding: 0;
    margin-bottom: 16px;
  }
  .at-num-halo { margin-left: 14px; flex-shrink: 0; }
  .at-card { margin-top: 0; flex: 1 1 auto; width: auto; min-width: 0; }
  .at-title { justify-content: flex-start; min-height: 0; }

  .at-line {
    top: calc(var(--halo) / 2);
    right: calc(var(--halo) / 2);
    left: auto;
    width: 2px;
    height: calc(100% + 16px);
  }
  /* On the horizontal desktop track each .at-line reaches back into the
     PREVIOUS step, so hiding it on the first step is correct there.
     Here the track is stacked and the line instead reaches down into the
     NEXT step, so it's the last step that has nothing left to connect to. */
  .at-step:first-child .at-line { display: block; }
  .at-step:last-child .at-line { display: none; }
}

@media (max-width: 480px) {
  .ararat-wrap { --halo: 54px; --icon: 40px; }
  .at-hero { min-height: 240px; }
  .at-hero-content { padding: 20px 16px; }
  .at-hero-sub { font-size: 13px; }
  .at-num-halo { margin-left: 12px; }
  .at-num { font-size: 15px; }
  .at-card { padding: 14px 12px; border-radius: 12px; }
  .at-title { font-size: 14px; }
  .at-desc { font-size: 12.5px; }
}