/* ==========================================================================
   Home page — styles
   Signature element: "دایره‌ی تنفس" (Breathing Circle) پشت تصویر هیرو
   یک دایره که به آرامی منبسط/منقبض می‌شود؛ ریتم آن با تمرین تنفس ۴-۷-۸
   (تکنیکی واقعی در درمان اضطراب) هماهنگ است — نه صرفاً یک افکت تزئینی.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero-section {
  position: relative;
  padding-top: calc(var(--header-height) + 3.5rem);
  padding-bottom: 5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 85% 8%, rgba(79,175,143,0.14), transparent 60%),
    var(--color-bg);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-eyebrow-row { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; }
.hero-eyebrow-row .avatar-stack { display: flex; }
.hero-eyebrow-row .avatar-stack img {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--color-bg);
  margin-inline-start: -10px; object-fit: cover;
}
.hero-eyebrow-row .avatar-stack img:first-child { margin-inline-start: 0; }

.hero-title {
  font-size: clamp(2.35rem, 4.4vw, 3.75rem);
  line-height: 1.28;
  font-weight: 800;
  margin-bottom: 1.4rem;
}
.hero-title .accent-underline {
  position: relative;
  color: var(--color-primary);
  white-space: nowrap;
}
.hero-title .accent-underline svg {
  position: absolute;
  inset-inline: -2%;
  bottom: -0.28em;
  width: 104%;
  height: 0.35em;
  color: var(--color-gold);
}

.hero-lead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 540px;
  margin-bottom: 2.1rem;
}

.hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.6rem; }

.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-border);
}
.hero-trust-item { display: flex; align-items: center; gap: 0.6rem; }
.hero-trust-item .num { font-size: 1.35rem; font-weight: 800; color: var(--color-primary); }
.hero-trust-item .label { font-size: 0.82rem; color: var(--color-text-muted); }

/* --- Breathing circle visual (signature) --- */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; }

.breathing-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 125, 107, 0.35);
  inset: 0;
  animation: breathe 7.6s var(--ease-calm) infinite;
}
.breathing-ring.ring-2 { inset: 34px; border-color: rgba(79, 175, 143, 0.4); animation-delay: 0.4s; }
.breathing-ring.ring-3 { inset: 68px; border-color: rgba(200, 169, 106, 0.5); animation-delay: 0.8s; }

@keyframes breathe {
  0%   { transform: scale(0.86); opacity: 0.35; }
  35%  { transform: scale(1.0);  opacity: 0.9; }  /* دم: 4 ثانیه */
  55%  { transform: scale(1.0);  opacity: 0.9; }  /* نگه‌داشتن: 7 ثانیه (نسبی) */
  100% { transform: scale(0.86); opacity: 0.35; } /* بازدم: 8 ثانیه */
}

.hero-portrait-frame {
  position: relative;
  width: min(78%, 380px);
  aspect-ratio: 1 / 1.08;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.hero-portrait-frame img { width: 100%; height: 100%; object-fit: cover; }

.hero-floating-card {
  position: absolute;
  z-index: 3;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.9rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: float-y 5s ease-in-out infinite;
}
.hero-floating-card.card-top { top: 6%; inset-inline-start: -4%; animation-delay: 0.2s; }
.hero-floating-card.card-bottom { bottom: 8%; inset-inline-end: -6%; animation-delay: 1s; }
.hero-floating-card .icon-wrap {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.hero-floating-card strong { display: block; font-size: 0.95rem; }
.hero-floating-card span { font-size: 0.78rem; color: var(--color-text-muted); }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 991.98px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-lead { margin-inline: auto; }
  .hero-cta-row, .hero-trust-row { justify-content: center; }
  .hero-visual { margin-top: 2.5rem; min-height: 380px; }
  .hero-floating-card.card-top { inset-inline-start: 2%; }
  .hero-floating-card.card-bottom { inset-inline-end: 2%; }
}

/* ---------- About (معرفی روانشناس) ---------- */
.about-section .about-media { position: relative; }
.about-section .about-media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.about-section .experience-badge {
  position: absolute;
  bottom: -1.5rem;
  inset-inline-start: -1.5rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 1.25rem 1.6rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.about-section .experience-badge .num { font-size: 2rem; font-weight: 800; display: block; }
.about-section .experience-badge .txt { font-size: 0.78rem; opacity: 0.9; }

.expertise-list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.expertise-list li { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.expertise-list li i { color: var(--color-primary); }

/* ---------- Why us / benefits ---------- */
.benefit-card {
  text-align: center;
  padding: 2.2rem 1.6rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-calm), box-shadow var(--dur-med) var(--ease-calm);
}
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.benefit-card .benefit-icon {
  width: 68px; height: 68px; margin-inline: auto 1.2rem;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}

/* ---------- Services ---------- */
.service-card {
  position: relative;
  padding: 2.2rem 1.8rem;
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform var(--dur-med) var(--ease-calm), box-shadow var(--dur-med) var(--ease-calm), background var(--dur-med);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); background: var(--color-primary); color: #fff; }
.service-card:hover .service-icon { background: rgba(255,255,255,0.15); color: #fff; }
.service-card:hover .service-desc { color: rgba(255,255,255,0.85); }
.service-icon {
  width: 58px; height: 58px; border-radius: var(--radius-sm);
  background: var(--color-surface-alt); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  margin-bottom: 1.3rem; transition: all var(--dur-med) var(--ease-calm);
}
.service-desc { color: var(--color-text-muted); font-size: 0.93rem; transition: color var(--dur-med); }

/* ---------- Section header row ---------- */
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.6rem; flex-wrap: wrap; }

/* ---------- Stats / counters ---------- */
.stats-section {
  background: var(--color-primary);
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06), transparent 40%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4rem);
}
.stat-item { text-align: center; }
.stat-item .counter { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; }
.stat-item .stat-label { opacity: 0.85; font-size: 0.92rem; margin-top: 0.4rem; }

/* ---------- Testimonials ---------- */
.testimonial-track { overflow: hidden; }
.testimonial-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.testimonial-item .stars { color: var(--color-gold); margin-bottom: 1rem; font-size: 0.9rem; }
.testimonial-item .quote { font-size: 0.98rem; color: var(--color-text); margin-bottom: 1.4rem; }
.testimonial-item .person { display: flex; align-items: center; gap: 0.8rem; }
.testimonial-item .person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial-item .person strong { display: block; font-size: 0.92rem; }
.testimonial-item .person span { font-size: 0.78rem; color: var(--color-text-muted); }

/* ---------- Video intro ---------- */
.video-intro-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-intro-wrap img { width: 100%; }
.video-play-btn {
  position: absolute; inset: 0; margin: auto;
  width: 78px; height: 78px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease-calm);
}
.video-play-btn:hover { transform: scale(1.08); }
.video-play-btn::before {
  content: '';
  position: absolute; inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  animation: ping-ring 2.4s var(--ease-calm) infinite;
}
@keyframes ping-ring { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- FAQ ---------- */
.faq-accordion .accordion-item {
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-md) !important;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-accordion .accordion-button {
  font-weight: 700;
  background: var(--color-white);
  color: var(--color-text);
  padding: 1.3rem 1.6rem;
}
.faq-accordion .accordion-button:not(.collapsed) { color: var(--color-primary); box-shadow: none; }
.faq-accordion .accordion-button::after { margin-inline-start: auto; margin-inline-end: 0; }
.faq-accordion .accordion-body { color: var(--color-text-muted); padding: 0 1.6rem 1.5rem; }

/* ---------- Consult CTA banner ---------- */
.consult-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(120deg, var(--color-primary), #1c574b);
  color: #fff;
  text-align: center;
}
.consult-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(200,169,106,0.25), transparent 45%);
}
.consult-banner .content { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }

/* ---------- Partner logos ---------- */
.partner-logos { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem); flex-wrap: wrap; opacity: 0.65; }
.partner-logos img { height: 32px; filter: grayscale(1); transition: filter var(--dur-fast), opacity var(--dur-fast); }
.partner-logos img:hover { filter: grayscale(0); opacity: 1; }

/* ---------- Newsletter (home variant) ---------- */
.newsletter-panel {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.2rem);
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Newsletter form variant on light panels (Home) — footer variant is styled in site.css */
.newsletter-panel form.js-newsletter-form {
  display: flex;
  gap: 0.6rem;
  width: 100%;
}
.newsletter-panel form.js-newsletter-form input {
  flex: 1;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.4rem;
}
.newsletter-panel form.js-newsletter-form input:focus { outline: none; border-color: var(--color-primary); }
.newsletter-panel form.js-newsletter-form button {
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  padding: 0 1.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}