/* Supreme PT — Custom styles (Tailwind handles most styling) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }
ul { list-style: none; }
a { text-decoration: none; }

/* ── FLOATING CALL BUTTON ── */
.float-call {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  display: flex; align-items: center; gap: 10px;
  background: #f59e0b; color: #ffffff;
  padding: 14px 22px; border-radius: 50px;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 28px rgba(245, 158, 11, 0.4);
  transition: all 0.25s; letter-spacing: 0.03em;
  animation: pulse-ring 2.5s ease infinite;
}
.float-call:hover {
  background: #fbbf24; transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(245, 158, 11, 0.5);
}
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 6px 28px rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 6px 28px rgba(245, 158, 11, 0.4), 0 0 0 10px rgba(245, 158, 11, 0.1); }
}

/* ── HERO FADE-UP ANIMATIONS ── */
.hero-fade {
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp 0.8s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
  animation-delay: var(--fade-delay, 0.3s);
}
@keyframes heroFadeUp {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── TESTIMONIALS CAROUSEL ── */
.t-card {
  flex: 0 0 calc(33.333% - 14px);
}

/* ── FAQ ACCORDION ── */
.faq-q.open { background: #0f172a !important; color: #ffffff !important; }
.faq-q.open .faq-icon { transform: rotate(45deg); color: #fbbf24; }
.faq-a.open { max-height: 300px; }

/* ── MOBILE NAV ── */
.nav-links.open {
  display: flex !important; flex-direction: column;
  position: absolute; top: 64px; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px);
  padding: 20px 5%; gap: 20px;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  z-index: 999;
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .t-card { flex: 0 0 calc(50% - 10px); }
}

@media (max-width: 680px) {
  .t-card { flex: 0 0 100%; }
  .float-call .call-text { display: none !important; }
  .float-call { padding: 14px; border-radius: 50%; }

  /* Expandable service cards on mobile */
  .svc-card {
    cursor: pointer; display: flex; flex-wrap: wrap; align-items: center;
  }
  .svc-card > div:first-child { order: 2; margin-left: auto; margin-bottom: 0; flex-shrink: 0; }
  .svc-card h3 { order: 1; flex: 1; margin-bottom: 0; padding-right: 14px; }
  .svc-card h3::after {
    content: ' \203A'; color: #f59e0b; font-size: 15px;
    display: inline-block; transition: transform 0.3s; margin-left: 4px;
  }
  .svc-card.open h3::after { transform: rotate(90deg); }
  .svc-card p {
    order: 3; flex: 0 0 100%; margin-top: 0;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
  }
  .svc-card.open p { max-height: 300px; opacity: 1; margin-top: 10px; }
}

/* ── SCROLL REVEAL ANIMATIONS ── */
.sr-hidden {
  opacity: 0;
  will-change: opacity, transform;
}
.sr-up    { transform: translateY(44px); }
.sr-left  { transform: translateX(-56px); }
.sr-right { transform: translateX(56px); }
.sr-scale { transform: scale(0.92); }
.sr-zoom  { transform: scale(0.82); }
.sr-flip  { transform: perspective(800px) rotateY(8deg) translateX(-30px); }

.sr-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .sr-hidden { opacity: 1; transform: none; }
  .hero-fade { opacity: 1; transform: none; }
}