/* ── Home Page ──────────────────────────────────────────────────────────────────── */

/* ══ Hero dashboard illustration ══════════════════════════════════════════════ */
.hero-visual--dashboard { overflow: visible; }
.hero-dashboard-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  animation: hero-float 7s ease-in-out infinite;
  filter: drop-shadow(0 24px 48px rgba(26,63,168,.12));
}
.hero-dashboard-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Bar chart bars — rise from bottom on load */
.hero-bar {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bar-rise 0.7s cubic-bezier(.34,1.56,.64,1) forwards;
}
/* Progress bars — expand from left */
.hero-prog {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  animation: prog-fill 0.9s cubic-bezier(.34,1.56,.64,1) forwards;
}
/* Notification dot pulse */
.hero-notif-dot { animation: notif-pulse 2s ease-in-out infinite; }
.hero-notif-ring {
  transform-origin: center;
  animation: notif-ring 2s ease-out infinite;
}

@keyframes bar-rise   { to { transform: scaleY(1); } }
@keyframes prog-fill  { to { transform: scaleX(1); } }
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes notif-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes notif-ring {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes stat-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
@keyframes stat-float-b {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.3); }
}

/* Floating stat cards */
.hero-stat-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  font-size: var(--text-xs);
  pointer-events: none;
}
.hero-stat-card--tl {
  top: 8%;
  left: -8%;
  animation: stat-float 5s ease-in-out infinite;
}
.hero-stat-card--br {
  bottom: 12%;
  right: -6%;
  animation: stat-float-b 4s ease-in-out infinite;
}
.hero-stat-card__val {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1;
}
.hero-stat-card__label {
  font-size: 11px;
  color: var(--color-text-3);
  margin-top: 2px;
}
.hero-stat-card__pulse {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  animation: pulse-dot 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.hero-stat-card__text {
  color: var(--color-text-2);
}

/* ══ Service card illustrations ════════════════════════════════════════════════ */
.card--svc {
  padding: 0;
  overflow: hidden;
}
.card-illus {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  transition: filter var(--ease-base);
}
.card-illus svg {
  width: 80px;
  height: 60px;
  transition: transform var(--ease-base);
}
.card--svc:hover .card-illus svg { transform: scale(1.06) translateY(-2px); }
.card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-6);
  flex: 1;
}

/* ══ Services Preview ══════════════════════════════════════════════════════════ */
.services-preview { background: var(--color-bg); }

/* Services explore strip */
.services-explore-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-10);
  padding: var(--space-6) var(--space-8);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
}
.services-explore-strip__heading {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.services-explore-strip__sub {
  font-size: var(--text-sm);
  color: var(--color-text-3);
  margin: 0;
  max-width: 420px;
  line-height: var(--leading-relaxed);
}

/* ══ Testimonials ══════════════════════════════════════════════════════════════ */
.testimonials-section { background: var(--color-bg-soft); }

/* Section header — decorative quote mark */
.t-section-header { position: relative; }
.t-deco-quote {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 64px;
  color: var(--color-accent);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}

/* ── Proof stats row ─── */
.t-stats-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}
.t-stat-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease-base), box-shadow var(--ease-base);
}
.t-stat-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.t-stat-chip__icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.t-stat-chip__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.t-stat-chip__val {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.1;
}
.t-stat-chip__label {
  font-size: 11px;
  color: var(--color-text-3);
  white-space: nowrap;
}

/* testimonial sub-component rules live in components/cards.css */

/* GSAP animation initial states */

/* ── 1024px Tablet ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Hero: keep 2-col layout, just nudge stat cards inward */
  .hero-dashboard-wrap { max-width: 420px; }
  .hero-stat-card--tl { left: -2%; }
  .hero-stat-card--br { right: -2%; }

  /* Our Expertise: 2-col instead of auto-fit 4 */
  .services-preview .cards-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }

  /* Our Approach: 2-col instead of 3 */
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .process-steps:not(.process-steps--cards)::before { display: none; }

  /* Client Perspectives: 2 columns */
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .t-stats-row { gap: var(--space-3); }
  .t-stat-chip { flex: 1 1 calc(50% - var(--space-3)); }
}

/* ── 768px Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero dashboard: smaller on mobile */
  .hero-dashboard-wrap { max-width: 360px; }

  /* Explore strip: stacked */
  .services-explore-strip { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .services-explore-strip .btn { width: 100%; justify-content: center; }

  /* Testimonials: shrink deco quote */
  .t-stat-chip { flex: 1 1 calc(50% - var(--space-3)); }
  .t-deco-quote { width: 56px; height: 44px; }
}

/* ── 640px Small Mobile ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Services explore strip: less padding */
  .services-explore-strip { padding: var(--space-5); }

  /* Card content: tighter padding */
  .card-content { padding: var(--space-4) var(--space-5) var(--space-5); }

  /* Process card body: tighter */
  .process-step__body { padding: var(--space-4) var(--space-5) var(--space-5); }

}

/* ── 480px Extra Small ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Dashboard fits narrow screens */
  .hero-dashboard-wrap { max-width: 300px; }

  /* Service cards: single column on small phones + taller illustration zone */
  .services-preview .cards-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .card-illus { height: 150px; }
  .card-illus svg { width: 100px; height: 76px; }

  /* Process steps: single column on small phones + taller illustration zone */
  .process-steps { grid-template-columns: 1fr; gap: var(--space-4); }
  .process-step__illus { height: 130px; }
  .process-step__illus svg { width: 96px; height: 72px; }

  /* Testimonials: single column on small phones */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Stat chips: each on its own row */
  .t-stat-chip { flex: 1 1 100%; }
}