/* ══════════════════════════════════════════════
   OMB® Global Styles
   Shared across all pages
   ══════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────── */
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  font-family: 'Inter', sans-serif;
  color: #222;
  font-size: 1rem;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  color: #222;
  font-weight: 700;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.35rem; }
p { font-weight: 400; color: #898989; line-height: 1.6; font-size: 1rem; }
a, a:hover { outline: 0; color: #3498db; transition: .3s; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ── Section Tags / Labels ────────────────────── */
.section-tag {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* ── Scroll Animations ────────────────────────── */
.animate-section,
.animate-video,
.animate-image,
.animate-parallax { opacity: 0; transition: all 1.2s cubic-bezier(.22, 1, .36, 1); }
.animate-section   { transform: translateY(50px); }
.animate-video     { transform: translateX(-80px); }
.animate-image     { transform: translateX(80px); }
.animate-parallax  { transform: translateY(80px); }
.animate-section.visible,
.animate-video.visible,
.animate-image.visible,
.animate-parallax.visible { opacity: 1; transform: none; }

/* Staggered animation delays for child cards */
.stagger-children > *:nth-child(1) { transition-delay: 0s; }
.stagger-children > *:nth-child(2) { transition-delay: .1s; }
.stagger-children > *:nth-child(3) { transition-delay: .2s; }
.stagger-children > *:nth-child(4) { transition-delay: .25s; }
.stagger-children > *:nth-child(5) { transition-delay: .3s; }
.stagger-children > *:nth-child(6) { transition-delay: .35s; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Buttons: Primary (pink gradient) ─────────── */
.btn-intro-primary {
  background: linear-gradient(135deg, #FF60EE, #cc00c9);
  border: none;
  border-radius: 10px;
  font-weight: 700;
  padding: .7rem 1.6rem;
  color: #fff;
  transition: all .2s;
  box-shadow: 0 4px 18px rgba(255, 96, 238, .4);
}
.btn-intro-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 96, 238, .55);
  color: #fff;
}

/* ── Buttons: Secondary (ghost white) ─────────── */
.btn-intro-secondary {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  font-weight: 600;
  padding: .7rem 1.5rem;
  color: #fff;
  transition: all .2s;
}
.btn-intro-secondary:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

/* ── CTA Dark Block (shared component) ────────── */
.cta-dark-block {
  background: linear-gradient(135deg, #0D0D0D 0%, #1a0533 100%);
  border-radius: 20px;
  padding: 3.5rem 2.5rem;
  position: relative;
  overflow: hidden;
}
.cta-dark-block::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 96, 238, .2) 0%, transparent 70%);
  pointer-events: none;
}
.cta-dark-block::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -5%;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 121, 255, .15) 0%, transparent 70%);
  pointer-events: none;
}
.cta-dark-block .cta-label {
  color: #FF60EE;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: .75rem;
}
.cta-dark-block h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.cta-dark-block p {
  color: rgba(255, 255, 255, .65);
  font-size: .95rem;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto 1.75rem;
}
.btn-dark-primary {
  background: linear-gradient(135deg, #FF60EE, #cc00c9);
  border: none;
  border-radius: 10px;
  font-weight: 700;
  padding: .75rem 1.75rem;
  color: #fff;
  font-size: .95rem;
  transition: all .2s;
  box-shadow: 0 4px 18px rgba(255, 96, 238, .45);
}
.btn-dark-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(255, 96, 238, .6);
  color: #fff;
}
.btn-dark-secondary {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  font-weight: 600;
  padding: .75rem 1.5rem;
  color: #fff;
  font-size: .95rem;
  transition: all .2s;
}
.btn-dark-secondary:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.cta-sub {
  color: rgba(255, 255, 255, .35);
  font-size: .8rem;
  margin-top: .75rem;
}

/* ── Pain Cards (shared component) ────────────── */
.pain-card {
  background: #0D0D0D;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 1.75rem;
  height: 100%;
  transition: all .25s;
}
.pain-card:hover {
  border-color: #FF60EE;
  background: #1a0533;
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(255, 96, 238, .2);
}
.pain-icon {
  width: 48px; height: 48px;
  background: rgba(255, 96, 238, .15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.pain-icon i { color: #FF60EE; font-size: 1.3rem; }
.pain-card h3 { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: .4rem; }
.pain-card p  { color: #9CA3AF; font-size: .875rem; margin: 0; line-height: 1.6; }

/* ── Intro Badge ──────────────────────────────── */
.intro-badge {
  display: inline-block;
  background: rgba(255, 96, 238, .15);
  color: #FF60EE;
  border: 1px solid rgba(255, 96, 238, .3);
  border-radius: 20px;
  padding: .25rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ── Section Backgrounds ──────────────────────── */
.white-bg {
  background: #fff;
  padding: 4rem 0;
}
.white-bg p   { color: #000; font-weight: 400; }
.white-bg p a { color: #000; text-decoration: none; }
.white-bg p a:hover { color: #7C98C5; transition: .3s; }

.silver-bg {
  background: linear-gradient(135deg, #fff, #e0e2ee);
  padding: 4rem 0;
}
.silver-bg p    { color: #000; font-weight: 400; }
.silver-bg p a  { color: #000; text-decoration: none; }
.silver-bg ul li { color: #000; font-weight: 400; }
.silver-bg h2   { color: #222; }

/* ── FAQ Component ────────────────────────────── */
.faq-title, .faq-subtitle, .faq-item {
  opacity: 0;
  transition: opacity .8s ease-out, transform .8s cubic-bezier(.175, .885, .32, 1.275);
}
.faq-title    { transform: translateY(50px); }
.faq-subtitle { transform: translateY(30px); }
.faq-item     { transform: scale(.95) translateY(20px); }
.faq-title.visible,
.faq-subtitle.visible,
.faq-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.accordion-button.fw-bold:not(.collapsed) { color: #0279FF; }

/* ── Footer ───────────────────────────────────── */
footer .white-bg {
  background: #fff;
  padding: 3.5rem 0;
}
.footer-txt p {
  font-size: .85rem;
  font-weight: 300;
  line-height: normal;
  color: #555;
}
.footer-txt .nav-link {
  font-size: .8rem;
}

/* ── Utility ──────────────────────────────────── */
.intro-sub {
  color: rgba(255, 255, 255, .4);
  font-size: .82rem;
  margin-top: .75rem;
}