/* ============================================================
   home.css — Homepage-only layout + animations
   Extracted from the inline <style> in index.php.
   Loaded conditionally (only on home) via head.php.
   ============================================================ */

/* Hero layout */
#hero-grid { padding-block: 0; }

/* Centred subtitles */
.section-lede, p.sub-in { text-align: center; }

/* Process & testimonial paragraphs — justify only on wider screens */
@media (min-width: 480px) {
  #proc-grid p { text-align: justify; hyphens: auto; }
}

/* Bento & pricing gaps */
#bento, .price-grid { gap: 1.125rem; }

/* Stats bar compact padding — handled by theme.css .st-stat */

/* Homepage-scoped paragraph justification — wider screens only */
@media (min-width: 480px) {
  .bc p, .p-tile p, .tab-pane p, .pi p {
    text-align: justify; hyphens: auto;
  }
}
.testi-track-l p, .testi-track-r p { text-align: left; }

/* ── Keyframe animations ── */
@keyframes hw-in   { from {opacity:0; transform: translateY(20px) scale(.95)} to {opacity:1; transform: none} }
@keyframes float-a { 0%,100% {transform: translateY(0)} 50% {transform: translateY(-12px)} }
@keyframes float-b { 0%,100% {transform: translateY(-7px)} 50% {transform: translateY(6px)} }
@keyframes logo-sc { 0% {transform: translateX(0)} 100% {transform: translateX(-50%)} }
@keyframes testi-l { 0% {transform: translateX(0)} 100% {transform: translateX(-50%)} }
@keyframes testi-r { 0% {transform: translateX(-50%)} 100% {transform: translateX(0)} }
@keyframes pulse-r { 0% {box-shadow: 0 0 0 0 rgba(37,99,235,.4)} 70% {box-shadow: 0 0 0 10px rgba(37,99,235,0)} 100% {box-shadow: 0 0 0 0 rgba(37,99,235,0)} }
@keyframes tab-in  { from {opacity:0; transform: translateY(8px)} to {opacity:1; transform: none} }

.hw { display: inline-block; animation: hw-in .65s cubic-bezier(.16,1,.3,1) both; }
.hw:nth-child(1) { animation-delay: .05s; }
.hw:nth-child(2) { animation-delay: .14s; }
.hw:nth-child(3) { animation-delay: .23s; }
.hw:nth-child(4) { animation-delay: .32s; }
.hw:nth-child(5) { animation-delay: .41s; }
.sub-in { animation: hw-in .55s cubic-bezier(.16,1,.3,1) .52s both; }
.cta-in { animation: hw-in .55s cubic-bezier(.16,1,.3,1) .68s both; }
.fl-a   { animation: float-a 5s ease-in-out infinite; }
.fl-b   { animation: float-b 6.5s ease-in-out infinite; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hw, .sub-in, .cta-in, .fl-a, .fl-b,
  .testi-track-l, .testi-track-r {
    animation: none !important;
    transform: none !important;
  }
}

/* ── Responsive overrides ── */
@media (min-width: 1024px) {
  #hero-grid  { grid-template-columns: 1fr 1fr !important; text-align: left !important; }
  #hero-left  { text-align: left !important; }
  #hero-cta, #hero-trust { justify-content: flex-start !important; }
  #hero-left .cta-in:first-child { justify-content: flex-start !important; }
  #hero-left .sub-in { margin-left: 0 !important; margin-right: 0 !important; }
  #hero-mock  { display: block !important; }
  #stats-bar  { grid-template-columns: repeat(4, 1fr) !important; }
  #bento      { grid-template-columns: repeat(3, 1fr) !important; }
  .bw         { grid-column: span 2 !important; }
  #proc-grid  { grid-template-columns: repeat(4, 1fr) !important; }
  #price-grid,
  .price-grid { grid-template-columns: repeat(3, 1fr) !important; align-items: stretch !important; }
  .price-grid > .price-card { display: flex; flex-direction: column; }
  #news-grid  { grid-template-columns: repeat(3, 1fr) !important; }
  #mob-inner  { grid-template-columns: 1fr auto !important; }
}
@media (min-width: 640px) {
  #bento      { grid-template-columns: repeat(2, 1fr) !important; }
  #news-grid  { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 768px) {
  #stats-bar  { grid-template-columns: repeat(4, 1fr) !important; }
  #bento      { grid-template-columns: repeat(2, 1fr) !important; }
  #proc-grid  { grid-template-columns: repeat(4, 1fr) !important; }
  #price-grid,
  .price-grid,
  .price-grid--wide { grid-template-columns: repeat(3, 1fr) !important; }
  #news-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  #sec-row    { grid-template-columns: 1fr 1fr !important; }
}

/* ── Reusable pieces ── */
.btn-glow { animation: pulse-r 2.5s ease-in-out infinite; }
.tg {
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.arr {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: var(--text-sm); color: var(--primary);
  font-weight: 600; transition: gap .2s;
}
.arr:hover { gap: .625rem; }

.proc-con { overflow: hidden; }

.stat-item { border-right: 1px solid var(--border); }
@media (max-width: 767px) {
  #stats-bar > .stat-item:nth-child(2n) { border-right: none; }
  #stats-bar > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (min-width: 1024px) {
  #stats-bar > div { border-bottom: none !important; }
}

.bc {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 1.375rem 1.5rem;
  box-shadow: var(--shadow-soft); overflow: hidden; position: relative;
  transition: transform .18s, box-shadow .18s;
}
.bc:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.wc {
  background: var(--muted); border-bottom: 1px solid var(--border);
  padding: .4rem .875rem; display: flex; align-items: center; gap: .4rem;
}
.wd { width: .5rem; height: .5rem; border-radius: 9999px; display: block; }

.prod-tab {
  padding: .575rem 1.125rem; border-radius: .625rem;
  font-size: var(--text-sm); font-weight: 600;
  color: var(--muted-foreground); cursor: pointer;
  border: none; background: transparent;
  font-family: var(--font-display);
  transition: color .15s, background .15s;
}
.prod-tab.active { color: var(--primary); background: var(--primary-light); }
.prod-tab:hover:not(.active) { color: var(--foreground); background: var(--muted); }

.tab-pane { display: none; animation: tab-in .3s ease both; }
.tab-pane.active { display: block; }

.proc-con {
  display: none; position: absolute; top: 1.625rem;
  left: calc(50% + 1.75rem); right: calc(-50% + 1.75rem);
  height: 2px;
  background: linear-gradient(to right, var(--primary-light), var(--border));
}
@media (min-width: 1024px) {
  .pi { position: relative; }
  .proc-con { display: block; }
}

.live-dot {
  width: .5rem; height: .5rem; border-radius: 9999px;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .375rem;
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3);
  border-radius: 9999px; padding: .25rem .75rem .25rem .375rem;
  font-size: var(--text-xs); font-weight: 600;
  color: #15803d; box-shadow: 0 0 0 3px rgba(34,197,94,.06);
}