@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1A1A1A;
  background: #ffffff;
}

/* ── Gradient utilities ───────────────────────── */
.text-gradient {
  background: linear-gradient(90deg, #FF7A00, #C3005A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-gradient {
  background: linear-gradient(90deg, #FF7A00, #C3005A);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.2s;
}
.btn-gradient:hover { opacity: 0.9; }

.bg-brand-gradient {
  background: linear-gradient(90deg, #FF7A00, #C3005A);
}

/* ── Fade-in on scroll ────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

.fade-in[data-delay="70"]  { transition-delay: 70ms; }
.fade-in[data-delay="80"]  { transition-delay: 80ms; }
.fade-in[data-delay="100"] { transition-delay: 100ms; }
.fade-in[data-delay="140"] { transition-delay: 140ms; }
.fade-in[data-delay="150"] { transition-delay: 150ms; }
.fade-in[data-delay="200"] { transition-delay: 200ms; }
.fade-in[data-delay="280"] { transition-delay: 280ms; }
.fade-in[data-delay="300"] { transition-delay: 300ms; }
.fade-in[data-delay="350"] { transition-delay: 350ms; }
.fade-in[data-delay="400"] { transition-delay: 400ms; }

/* ── Hero entry animations ────────────────────── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-1 { animation: fadeInDown 0.7s 0.15s forwards; opacity: 0; }
.anim-2 { animation: fadeInDown 0.7s 0.30s forwards; opacity: 0; }
.anim-3 { animation: fadeInDown 0.7s 0.45s forwards; opacity: 0; }

/* ── Bounce (scroll hint) ─────────────────────── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.bounce { animation: bounce 1.4s infinite; }

/* ── Spin (form loader) ───────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.9s linear infinite; }

/* ── Navbar ───────────────────────────────────── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  background: #1A1A1A;
  padding: 20px 0;
  transition: padding 0.3s, box-shadow 0.3s;
}
#navbar.scrolled { padding: 12px 0; box-shadow: 0 2px 12px rgba(0,0,0,.35); }

/* ── Mobile drawer ────────────────────────────── */
#mobile-overlay {
  display: none; opacity: 0;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 40;
  transition: opacity 0.3s;
}
#mobile-drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: 288px;
  background: #1A1A1A;
  z-index: 51;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

/* ── Active nav ───────────────────────────────── */
.nav-active        { color: #FF7A00 !important; }
.drawer-nav-active { color: #FF7A00 !important; background: rgba(255,122,0,.15) !important; }

/* ── Card hover lift ──────────────────────────── */
.card-hover { transition: box-shadow 0.3s, transform 0.3s; }
.card-hover:hover { box-shadow: 0 8px 32px rgba(0,0,0,.10); transform: translateY(-4px); }

/* ── FAQ accordion ────────────────────────────── */
.faq-answer {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}
.faq-answer.open { max-height: 400px; opacity: 1; }
.faq-chevron { transition: transform 0.3s; display: inline-block; }
.faq-chevron.open { transform: rotate(180deg); }

/* ── Form inputs ──────────────────────────────── */
.form-input {
  width: 100%; padding: 10px 14px;
  border: 1px solid #e5e7eb; border-radius: 12px;
  font-family: inherit; font-size: 14px;
  outline: none; transition: border-color 0.2s;
  background: #fff; color: #1A1A1A;
}
.form-input:focus { border-color: #FF7A00; }
.form-input.error { border-color: #ef4444; }
.form-select {
  width: 100%; padding: 10px 14px;
  border: 1px solid #e5e7eb; border-radius: 12px;
  font-family: inherit; font-size: 14px;
  background: #fff; color: #1A1A1A;
  outline: none; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.form-select:focus { border-color: #FF7A00; }

/* ── Responsive container ─────────────────────── */
.container { max-width: 1200px; margin: 0 auto; }

/* ── Stat counter ─────────────────────────────── */
.stat-val { font-size: 2.25rem; font-weight: 800; line-height: 1; }
@media (min-width: 768px) { .stat-val { font-size: 2.5rem; } }

/* ── Step card number ─────────────────────────── */
.step-number {
  font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: 12px;
  background: linear-gradient(90deg,#FF7A00,#C3005A);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; opacity: 0.18;
}