/* ============================================================
   Prime Pathway — Clone Styles
   Mirrors the original design system:
   - Fonts: Nunito (sans), Source Serif 4 (serif headings), JetBrains Mono
   - Primary palette: teal/emerald greens
   - Cream backgrounds, gold accents
   ============================================================ */

:root {
  --font-nunito: 'Nunito', 'Nunito Fallback', system-ui, sans-serif;
  --font-serif-4: 'Source Serif 4', 'Source Serif 4 Fallback', 'Source Serif 4', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: normal;
}

body {
  background-color: #FFF6EE;
  color: #262626;
  font-family: var(--font-nunito), system-ui, sans-serif;
  margin: 0;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

.font-serif {
  font-family: var(--font-serif-4) !important;
}

.font-mono {
  font-family: var(--font-mono) !important;
}

/* ---------- Buttons ---------- */
.btn-primary {
  background-color: #004038;
  color: #fff;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: none;
  text-align: center;
}
.btn-primary:hover {
  transform: scale(1.05);
  background-color: #002e2a;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
  border: 2px solid #004038;
  background-color: #fff;
  color: #004038;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-align: center;
}
.btn-secondary:hover {
  transform: scale(1.05);
  background-color: #FFF6EE;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.btn-primary, .btn-secondary { min-height: 48px; touch-action: manipulation; }

/* ---------- Hover effects ---------- */
.hover-lift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.hover-glow { transition: all 0.3s; }
.hover-glow:hover { box-shadow: 0 0 30px rgba(59, 130, 246, 0.3); }

/* ---------- Marquee scroll (logos + testimonials) ---------- */
@keyframes scroll {
  0% { transform: translate(0); }
  100% { transform: translate(-50%); }
}
.animate-scroll {
  animation: 20s linear infinite scroll;
  will-change: transform;
}

/* ---------- Scroll reveal animations ---------- */
.fade-in-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.scale-in {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
.stagger-7 { transition-delay: 0.7s; }
.stagger-8 { transition-delay: 0.8s; }
.stagger-9 { transition-delay: 0.9s; }

/* ---------- WhatsApp slide-in tooltip ---------- */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-right {
  animation: 0.5s ease-out slideInRight;
}

/* ---------- Utilities ---------- */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drop-shadow-2xl { filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.25)); }
.drop-shadow-lg { filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2)); }

/* mask for logo marquee edges */
.mask-fade-x {
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

/* ---------- FAQ accordion ---------- */
.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer.open {
  opacity: 1;
}

/* ---------- Header scrolled state ---------- */
#site-header {
  background: transparent;
  transition: all 0.3s ease;
}
#site-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #f5f5f5;
}

/* ---------- Mobile menu ---------- */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
#mobile-menu.open {
  max-height: 480px;
}

/* ---------- Success stories page grid ---------- */
.story-card {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.story-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ---------- Subpage hero ---------- */
.page-hero {
  background:
    radial-gradient(900px 600px at 85% 0%, rgba(15, 118, 110, 0.08), transparent 60%),
    radial-gradient(700px 520px at 0% 100%, rgba(180, 83, 9, 0.06), transparent 55%),
    #FFF6EE;
}

/* ---------- Forms ---------- */
.form-input {
  width: 100%;
  border: 1px solid #d4d4d4;
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #171717;
  margin-bottom: 0.375rem;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .animate-scroll { animation: none; }
  .fade-in-up, .scale-in { transition: none; opacity: 1; transform: none; }
  .hover-lift:hover { transform: none; }
  html { scroll-behavior: auto; }
}