/* ============================================================
   clinicparvaz.ir — hero-walk.css — نسخهٔ ۱.۰ (نام جدید = شکست قطعی کش)
   محتوا = hero-live2.css نسخهٔ ۲.۱۱ تأییدشده:
   aurora بدون blur · دکمه‌های شیشه‌ای hl-glass · حذف چیپ‌ها ·
   شمارنده‌ها پایین‌تر · برچسب موبایل فقط هنگام روشن‌شدن
   ============================================================ */

/* ————— لایهٔ مسیر ————— */
.hl-bg{
  position:absolute;inset:0;overflow:hidden;
  border-radius:22px;pointer-events:none;z-index:0;
}
.hero .hero-text,
.hero .hero-media{position:relative;z-index:1}

.hl-dots{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(41,168,216,.14) 1.5px,transparent 1.6px);
  background-size:26px 26px;
  animation:hlDotWave 5.5s ease-in-out infinite;
}
@keyframes hlDotWave{
  0%,100%{opacity:.35}
  50%{opacity:.7}
}
.hl-scanline{
  position:absolute;top:0;bottom:0;width:130px;
  background:linear-gradient(90deg,transparent,rgba(41,168,216,.09),transparent);
  animation:hlScan 11s linear infinite;
}
@keyframes hlScan{
  0%{right:-16%}
  100%{right:112%}
}
.hl-bg svg{position:absolute;inset:0;width:100%;height:100%}
.hl-bg svg path{
  fill:none;stroke:rgba(41,168,216,.25);
  stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.hl-foot{
  position:absolute;width:36px;height:74px;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 70'%3E%3Cellipse cx='17' cy='56' rx='8' ry='11' fill='%2329A8D8'/%3E%3Cellipse cx='17' cy='28' rx='9.5' ry='12' fill='%2329A8D8'/%3E%3Cpath d='M9.5 32 C 12 44 22 44 24.5 32 Z' fill='%2329A8D8'/%3E%3Ccircle cx='7.5' cy='12.5' r='2.3' fill='%2329A8D8'/%3E%3Ccircle cx='12' cy='8.5' r='2.6' fill='%2329A8D8'/%3E%3Ccircle cx='17.5' cy='7' r='2.8' fill='%2329A8D8'/%3E%3Ccircle cx='23' cy='8.5' r='2.6' fill='%2329A8D8'/%3E%3Ccircle cx='27.5' cy='12.5' r='2.3' fill='%2329A8D8'/%3E%3C/svg%3E");
  opacity:0;
  transition:opacity .2s ease;
  filter:drop-shadow(0 3px 7px rgba(41,168,216,.3));
}
.hl-foot.planted{opacity:.55}
.hl-station{
  position:absolute;width:34px;height:34px;
  margin:-17px 0 0 -17px;
  border-radius:999px;
  background-color:rgba(255,255,255,.8);
  border:1.5px solid rgba(41,168,216,.35);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(41,168,216,.2);
  transition:box-shadow .5s ease,border-color .5s ease,background-color .5s ease;
  z-index:1;
}
.hl-station svg{width:18px;height:18px;
  stroke:rgba(30,88,143,.7);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .5s ease;
}
.hl-station.lit{
  background-color:#fff;
  border-color:#29A8D8;
  box-shadow:0 0 0 4px rgba(41,168,216,.18),0 0 22px rgba(41,168,216,.5);
}
.hl-station.lit svg{stroke:#1E88B8}
.hl-stag{
  position:absolute;white-space:nowrap;
  background:rgba(255,255,255,.92);
  color:#1E3A5F;
  font-size:10px;font-weight:800;
  border:1px solid rgba(41,168,216,.3);
  border-radius:999px;
  padding:3px 11px;
  box-shadow:0 2px 8px rgba(30,58,95,.12);
  opacity:.85;
  transition:opacity .4s ease,border-color .4s ease,box-shadow .4s ease,color .4s ease;
  pointer-events:none;
}
.hl-stag.st-t{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.hl-stag.st-b{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.hl-stag.st-r{left:calc(100% + 9px);top:50%;transform:translateY(-50%)}
.hl-stag.st-l{right:calc(100% + 9px);top:50%;transform:translateY(-50%)}
.hl-station.lit .hl-stag{
  background:#fff;border-color:#29A8D8;color:#155E86;
  opacity:1;box-shadow:0 3px 14px rgba(41,168,216,.4);
}
.hl-station.target{
  border-color:#F59E0B;
  box-shadow:0 0 0 4px rgba(245,158,11,.15),0 0 16px rgba(245,158,11,.35);
  animation:hlTarget 1.6s ease-in-out infinite;
}
@keyframes hlTarget{
  0%,100%{box-shadow:0 0 0 3px rgba(245,158,11,.12),0 0 12px rgba(245,158,11,.3)}
  50%{box-shadow:0 0 0 7px rgba(245,158,11,.08),0 0 24px rgba(245,158,11,.5)}
}
.hl-walker{
  position:absolute;width:15px;height:15px;
  margin:-7.5px 0 0 -7.5px;
  border-radius:999px;
  background:radial-gradient(circle,#fff 0%,#29A8D8 50%,rgba(41,168,216,.25) 75%,transparent 85%);
  box-shadow:0 0 16px rgba(41,168,216,.85);
  z-index:2;
}
.hl-aurora{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(220px 200px at 18% 12%,rgba(41,168,216,.20),transparent 70%),
    radial-gradient(260px 240px at 82% 88%,rgba(52,201,142,.16),transparent 70%);
  animation:hlAurora 12s ease-in-out infinite alternate;
}
@keyframes hlAurora{
  0%,100%{opacity:.7}
  50%{opacity:1}
}

/* ————— دکمه‌های شیشه‌ای — کلاس hl-glass (JS اضافه می‌کند) ————— */
.hero .hero-chips{display:none !important}
.hero .hero-cta{margin-top:46px !important;gap:10px !important}
.hero .hero-cta .btn.hl-glass{
  font-size:13px !important;
  padding:9px 20px !important;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease !important;
}
.hero .hero-cta .btn.hl-glass:hover{transform:translateY(-2px)}
.hero .hero-cta .btn.hl-glass.btn-primary{
  background:rgba(30,58,95,.92) !important;
  box-shadow:0 3px 10px rgba(30,58,95,.10) !important;
}
.hero .hero-cta .btn.hl-glass.btn-primary:hover{
  background:rgba(30,58,95,.97) !important;
  box-shadow:0 6px 16px rgba(30,58,95,.18) !important;
}
.hero .hero-cta .btn.hl-glass.btn-outline{
  background:rgba(255,255,255,.62) !important;
  border:1.5px solid rgba(41,168,216,.35) !important;
  color:#1E3A5F !important;
  box-shadow:0 2px 8px rgba(30,58,95,.07) !important;
}
.hero .hero-cta .btn.hl-glass.btn-outline:hover{
  background:rgba(255,255,255,.8) !important;
  border-color:rgba(41,168,216,.6) !important;
  box-shadow:0 5px 14px rgba(30,58,95,.12) !important;
}
.hero .hl-counters{margin-top:26px !important}

/* ————— موبایل: برچسب فقط هنگام روشن‌شدن ————— */
@media(max-width:900px){
  .hl-stag{opacity:0}
  .hl-station.lit .hl-stag{opacity:1}
}

/* ————— کادر پروندهٔ زنده — بدون backdrop-filter ————— */
.hero-media.hl-wrap{
  position:relative;
  background:linear-gradient(150deg,#22456E 0%,#1E3A5F 55%,#18304F 100%);
  border-radius:22px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 34px rgba(30,58,95,.28);
  perspective:900px;
}
.hero-media.hl-wrap::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M22 14l1.4 3.2L27 19l-3.6 1.8L22 25l-1.4-3.2L17 19l3.6-1.8z' fill='%23FFFFFF' opacity='.10'/%3E%3Cpath d='M96 34l1 2.4 2.4 1.1-2.4 1.1-1 2.4-1-2.4-2.4-1.1 2.4-1.1z' fill='%23FFFFFF' opacity='.07'/%3E%3Cpath d='M48 74l1.6 3.8 3.8 1.8-3.8 1.8-1.6 3.8-1.6-3.8-3.8-1.8 3.8-1.8z' fill='%23FFFFFF' opacity='.08'/%3E%3Cpath d='M112 96l1 2.4 2.4 1.1-2.4 1.1-1 2.4-1-2.4-2.4-1.1 2.4-1.1z' fill='%23FFFFFF' opacity='.06'/%3E%3C/svg%3E");
  background-size:140px 140px;
  pointer-events:none;
  z-index:1;
}
.hero-media.hl-wrap::after{
  content:'';position:absolute;left:50%;bottom:-70px;
  width:240px;height:160px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(52,201,142,.20),transparent 70%);
  pointer-events:none;z-index:0;
}

.hl-card{
  position:relative;z-index:2;
  width:calc(100% - 44px);max-width:320px;
  background:rgba(24,44,72,.42);
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  padding:16px 15px 14px;
  color:#fff;
  box-shadow:0 16px 40px rgba(10,25,45,.45);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .2s ease-out;
}
.hl-head{display:flex;align-items:center;gap:10px;padding-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.hl-avatar{
  width:40px;height:40px;border-radius:999px;flex-shrink:0;
  background:linear-gradient(135deg,#29A8D8,#2A5A8F);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;color:#fff;
  box-shadow:0 0 0 2.5px rgba(255,255,255,.25),0 4px 12px rgba(41,168,216,.4);
}
.hl-who{flex:1;min-width:0}
.hl-who b{display:block;font-size:13.5px;font-weight:800;line-height:1.5}
.hl-who span{font-size:10.5px;color:rgba(255,255,255,.65);font-weight:600}
.hl-live{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  background:rgba(52,201,142,.16);border:1px solid rgba(52,201,142,.35);
  color:#7DE8BC;border-radius:999px;
  font-size:9.5px;font-weight:800;padding:3px 9px;
}
.hl-live::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#34c98e;
  animation:hlBlink 1.6s ease-in-out infinite;
}
@keyframes hlBlink{0%,100%{opacity:1}50%{opacity:.35}}

.hl-steps{display:flex;flex-direction:column;gap:7px;margin:12px 0 12px}
.hl-step{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;padding:7px 11px;
  font-size:11.5px;font-weight:700;color:rgba(255,255,255,.85);
  opacity:0;transform:translateX(14px);
}
.hl-step.done{color:rgba(255,255,255,.75)}
.hl-step.done .hl-tick{background:rgba(52,201,142,.2);border-color:rgba(52,201,142,.5)}
.hl-step.active{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.4);
  color:#fff;font-weight:800;
}
.hl-step.active .hl-dot{animation:hlPulse 1.8s ease-in-out infinite}
.hl-tick{
  width:20px;height:20px;border-radius:999px;flex-shrink:0;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
}
.hl-tick svg{width:11px;height:11px}
.hl-tick svg polyline{
  fill:none;stroke:#7DE8BC;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:20;stroke-dashoffset:20;
  transition:stroke-dashoffset .45s ease;
}
.hl-step.drawn .hl-tick svg polyline{stroke-dashoffset:0}
.hl-dot{
  width:20px;height:20px;border-radius:999px;flex-shrink:0;
  border:2px solid #F59E0B;display:flex;align-items:center;justify-content:center;
}
.hl-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:#F59E0B}
@keyframes hlPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.45)}
  50%{box-shadow:0 0 0 5px rgba(245,158,11,0)}
}
.hl-step .hl-stepnum{margin-right:auto;font-size:9.5px;font-weight:800;
  color:rgba(255,255,255,.45);flex-shrink:0}
.hl-step.active .hl-stepnum{color:#fbbf24}

.hl-progress{margin-bottom:11px}
.hl-progress .hl-plabel{
  display:flex;justify-content:space-between;
  font-size:10px;font-weight:800;color:rgba(255,255,255,.6);margin-bottom:5px;
}
.hl-progress .hl-plabel b{color:#7DE8BC;font-weight:800}
.hl-track{
  height:9px;border-radius:999px;
  background:rgba(255,255,255,.1);
  overflow:hidden;position:relative;
}
.hl-fill{
  height:100%;width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#29A8D8,#2E7D64 60%,#34c98e);
  box-shadow:0 0 12px rgba(52,201,142,.55);
  transition:width 1.6s cubic-bezier(.4,0,.2,1) .5s;
  position:relative;
}
.hl-fill::after{
  content:'';position:absolute;top:0;bottom:0;left:0;right:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:hlShine 2.4s ease-in-out infinite;
}
@keyframes hlShine{
  0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(100%)}
}

.hl-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hl-chip{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  background:linear-gradient(135deg,#34c98e,#1F9D6B);
  color:#fff;border-radius:999px;
  font-size:10px;font-weight:800;padding:4px 11px;
  box-shadow:0 4px 12px rgba(52,201,142,.4);
  animation:hlReady 2s ease-in-out infinite;
}
@keyframes hlReady{
  0%,100%{box-shadow:0 4px 12px rgba(52,201,142,.4)}
  50%{box-shadow:0 4px 20px rgba(52,201,142,.65)}
}
.hl-status{
  flex:1;min-width:0;
  min-height:2.4em;
  display:flex;align-items:center;
  overflow:hidden;
}
.hl-status span{
  font-size:9.8px;font-weight:700;color:rgba(255,255,255,.6);
  line-height:1.5;display:block;
  transition:opacity .45s ease;
}
.hl-status span.hl-fadeout{opacity:0}

.hl-badge{
  position:absolute;z-index:3;top:14px;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.92);
  color:#1E3A5F;font-size:10.5px;font-weight:800;
  border-radius:999px;padding:6px 13px;
  box-shadow:0 4px 14px rgba(10,25,45,.3);
  border:1px solid rgba(41,168,216,.25);
  animation:hlFloat 4.5s ease-in-out infinite;
  white-space:nowrap;
}
.hl-badge.hl-b1{left:14px}
.hl-badge.hl-b2{
  right:14px;animation-delay:2.2s;
  border-color:rgba(52,201,142,.4);
}
@keyframes hlFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

.hl-counters{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:26px;position:relative;z-index:1;
}
.hl-counter{
  flex:1;min-width:118px;
  background:linear-gradient(160deg,#fff 0%,#F6FAFD 100%);
  border:1.5px solid #DCE8F2;border-radius:14px;
  padding:11px 13px;text-align:center;
  box-shadow:0 5px 15px rgba(30,58,95,.08);
  transition:transform .25s ease,box-shadow .25s ease;
}
.hl-counter:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(30,58,95,.14)}
.hl-counter b{
  display:block;font-size:21px;font-weight:900;color:#1E3A5F;line-height:1.4;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hl-counter b{
    background:linear-gradient(120deg,#1E3A5F,#1E88B8);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

.hero .hero-text h1 em{
  font-style:normal;color:#1E88B8;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero .hero-text h1 em{
    background:linear-gradient(100deg,#1E88B8 0%,#29A8D8 45%,#2E7D64 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

@media(max-width:900px){
  .hero-media.hl-wrap{min-height:400px;padding:26px 0}
  .hl-card{max-width:300px}
  .hl-badge{top:10px;font-size:9.5px;padding:5px 11px}
  .hl-badge.hl-b1{left:10px}
  .hl-badge.hl-b2{right:10px}
  .hl-station{width:28px;height:28px;margin:-14px 0 0 -14px}
  .hl-station svg{width:15px;height:15px}
  .hl-foot{width:26px;height:54px}
  .hl-stag{font-size:9px;padding:2px 9px}
}
@media(prefers-reduced-motion:reduce){
  .hero-media.hl-wrap::before,.hl-fill::after,.hl-chip,.hl-badge,
  .hl-live::before,.hl-step.active .hl-dot,
  .hl-aurora,.hl-dots,.hl-scanline{animation:none}
  .hl-scanline{display:none}
  .hl-card{transition:none}
}