/* =============================================
   Front-page specific styles — Launchline
   ============================================= */

/* --- Color tokens -------------------------------------------------- */
:root {
  --fp-blue:       #3182CE;
  --fp-blue-hover: #2B6CB0;
  --fp-navy:       #0a0f1e;
  --fp-navy-card:  #1a2744;
  --fp-trust-bg:   #1b2b48;
  --fp-surface:    #f8fafc;
  --fp-surface-card: #ffffff;
  --fp-text:       #1a202c;
  --fp-muted:      #64748b;
  --fp-border:     rgba(226,232,240,.6);
  --fp-accent:     #10b981;
  --fp-accent2:    #06b6d4;
  --fp-radius-xl:  1rem;
  --fp-radius-2xl: 1.25rem;
  --fp-shadow-card: 0 4px 20px rgba(0,0,0,.08);
}

/* --- Container ------------------------------------------------------ */
.fp-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 1024px) {
  .fp-container { padding-left: 2rem; padding-right: 2rem; }
}

/* --- Section spacing ----------------------------------------------- */
.fp-section { padding: 5rem 0; }
@media (min-width: 1024px) { .fp-section { padding: 7rem 0; } }

/* --- Spotlight SVG -------------------------------------------------- */
.ll-spotlight {
  pointer-events: none;
  position: absolute;
  z-index: 1;
  height: 169%; width: 138%;
  opacity: 0;
  top: -10rem; left: 0;
  animation: ll-spotlight 2s ease .75s 1 forwards;
}
@media (min-width: 1024px) { .ll-spotlight { width: 84%; left: 15rem; top: -5rem; } }
@keyframes ll-spotlight {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* --- Dot-grid overlay ---------------------------------------------- */
.fp-dot-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .04;
  background-image: radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* --- Badge chip ----------------------------------------------------- */
.fp-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  padding: .25rem .75rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.fp-badge--dark {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.15);
}
.fp-badge--light {
  background: rgba(49,130,206,.08);
  color: var(--fp-blue);
  border: 1px solid rgba(49,130,206,.15);
}

/* --- Gradient headings --------------------------------------------- */
.fp-h-gradient {
  background: linear-gradient(to bottom, #f5f5f5, #a0aec0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   HERO
   ============================================================ */
.fp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--fp-navy);
  /* bleed under fixed header */
  margin-top: -64px;
  padding-top: calc(5rem + 64px);
  padding-bottom: 5rem;
}
.admin-bar .fp-hero { margin-top: calc(-64px - 32px); padding-top: calc(5rem + 64px + 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .fp-hero { margin-top: calc(-64px - 46px); padding-top: calc(5rem + 64px + 46px); }
}
.fp-hero__content { position: relative; z-index: 10; }

.fp-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.fp-hero__sub {
  color: #a0aec0;
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 38rem;
}

/* channel pills */
.fp-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  font-size: .78rem;
  font-weight: 500;
  color: #d1d5db;
}
.fp-channel-pill svg { color: var(--fp-blue); }

/* hero CTA buttons */
.fp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: .5rem;
  background: var(--fp-blue);
  color: #fff;
  text-decoration: none;
  border: none;
  transition: background .2s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(49,130,206,.4);
}
.fp-btn-primary:hover { background: var(--fp-blue-hover); color: #fff; box-shadow: 0 6px 20px rgba(49,130,206,.5); }

.fp-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: .5rem;
  background: transparent;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.25);
  transition: background .2s;
}
.fp-btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

/* hero stat cards */
.fp-hero-stat {
  position: absolute;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: .75rem;
  padding: .75rem 1rem;
}
.fp-hero-stat__label { font-size: .65rem; font-weight: 500; color: #a0aec0; text-transform: uppercase; letter-spacing: .07em; }
.fp-hero-stat__value { font-size: 1.5rem; font-weight: 700; color: #fff; margin-top: .15rem; }
.fp-hero-stat__row { display: flex; align-items: center; gap: .5rem; }
.fp-hero-stat__dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; flex-shrink: 0; }
.fp-hero-stat__text { font-size: .78rem; font-weight: 500; color: #d1d5db; }
.fp-hero-stat__sub { font-size: .65rem; color: #6b7280; margin-top: .2rem; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.fp-trust {
  background: var(--fp-trust-bg);
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.fp-trust__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
}
.fp-trust__item svg { color: var(--fp-accent2); flex-shrink: 0; }

/* ============================================================
   SHARED SECTION STYLES
   ============================================================ */
.fp-section-label { /* alias for .fp-badge--light */ }

.fp-section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--fp-text);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.fp-section-sub {
  font-size: 1.1rem;
  color: var(--fp-muted);
  line-height: 1.7;
}

/* ============================================================
   WHAT IT DOES
   ============================================================ */
.fp-what { background: #fff; }
.fp-stat-box {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--fp-surface);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--fp-border);
}
.fp-stat-box__num { font-size: 2.25rem; font-weight: 800; color: var(--fp-blue); line-height: 1; }
.fp-stat-box__label { font-size: .875rem; font-weight: 500; color: var(--fp-muted); line-height: 1.4; }

/* ============================================================
   CHANNEL CARDS
   ============================================================ */
.fp-channels { background: var(--fp-surface); }
.fp-channel-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: #fff;
  border-radius: var(--fp-radius-2xl);
  padding: 2rem;
  border: 1px solid var(--fp-border);
  height: 100%;
  transition: border-color .25s, box-shadow .25s;
}
.fp-channel-card:hover {
  border-color: rgba(49,130,206,.2);
  box-shadow: var(--fp-shadow-card);
}
.fp-channel-card__icon {
  width: 48px; height: 48px;
  border-radius: .75rem;
  background: rgba(49,130,206,.08);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.fp-channel-card:hover .fp-channel-card__icon { background: rgba(49,130,206,.12); }
.fp-channel-card__icon svg { color: var(--fp-blue); }
.fp-channel-card__bar { height: 3px; width: 32px; background: var(--fp-accent2); border-radius: 999px; }
.fp-channel-card__title { font-size: 1.1rem; font-weight: 600; color: var(--fp-text); margin-bottom: .35rem; }
.fp-channel-card__desc { font-size: .9rem; color: var(--fp-muted); line-height: 1.65; }

/* ============================================================
   DARK CTA BANNER
   ============================================================ */
.fp-dark-banner {
  background: var(--fp-navy);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  min-height: 500px;
}
.fp-dark-banner__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (min-width: 768px) { .fp-dark-banner__inner { flex-direction: row; } }
.fp-dark-banner__left {
  flex: 1;
  padding: 2.5rem;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}
.fp-dark-banner__right {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.fp-dark-banner__eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fp-blue); }
.fp-dark-banner__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
}
.fp-dark-banner__sub { color: #a0aec0; line-height: 1.7; max-width: 22rem; }
.fp-dark-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.25rem;
  border-radius: .5rem;
  background: var(--fp-blue);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
  transition: background .2s;
}
.fp-dark-banner__btn:hover { background: var(--fp-blue-hover); color: #fff; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.fp-hiw { background: #fff; }
.fp-hiw__track { position: relative; max-width: 42rem; margin: 0 auto; }
.fp-hiw__line {
  position: absolute;
  left: 2.25rem;
  top: 1.375rem; bottom: 1.375rem;
  width: 1px;
  background: var(--fp-border);
  display: none;
}
@media (min-width: 768px) { .fp-hiw__line { display: block; } }
.fp-hiw__progress {
  position: absolute;
  left: 2.25rem;
  top: 1.375rem; bottom: 1.375rem;
  width: 1px;
  background: var(--fp-accent2);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform .4s ease;
  display: none;
}
@media (min-width: 768px) { .fp-hiw__progress { display: block; } }
.fp-hiw__step { display: flex; gap: 1.75rem; align-items: flex-start; }
.fp-hiw__num {
  flex-shrink: 0;
  width: 4.5rem;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 10;
}
.fp-hiw__num span {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem;
  font-weight: 700;
  background: #fff;
  border: 2px solid rgba(27,43,72,.2);
  color: #1b2b48;
  transition: background .3s, border-color .3s, color .3s;
}
.fp-hiw__step.is-active .fp-hiw__num span {
  background: var(--fp-blue);
  border-color: var(--fp-blue);
  color: #fff;
}
.fp-hiw__body {
  flex: 1;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: .25rem;
}
.fp-hiw__body h3 { font-size: .95rem; font-weight: 600; color: var(--fp-text); margin-bottom: .4rem; }
.fp-hiw__body p { font-size: .875rem; color: var(--fp-muted); line-height: 1.65; margin: 0; }

/* ============================================================
   USE CASES
   ============================================================ */
.fp-use-cases { background: var(--fp-surface); }
.fp-use-card {
  background: #fff;
  border-radius: var(--fp-radius-2xl);
  padding: 1.5rem;
  border: 1px solid var(--fp-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  transition: border-color .25s, box-shadow .25s;
}
.fp-use-card:hover { border-color: rgba(49,130,206,.2); box-shadow: var(--fp-shadow-card); }
.fp-use-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.fp-use-card__icon {
  width: 40px; height: 40px;
  border-radius: .5rem;
  background: rgba(49,130,206,.08);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.fp-use-card:hover .fp-use-card__icon { background: rgba(49,130,206,.12); }
.fp-use-card__icon svg { color: var(--fp-blue); }
.fp-use-card__channel {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: 999px;
}
.fp-use-card__channel--phone { background: rgba(6,182,212,.1); color: var(--fp-accent2); }
.fp-use-card__channel--sms   { background: rgba(16,185,129,.1); color: #10b981; }
.fp-use-card__channel--web   { background: rgba(49,130,206,.08); color: var(--fp-blue); }
.fp-use-card__title { font-size: .9rem; font-weight: 600; color: var(--fp-text); margin-bottom: .3rem; }
.fp-use-card__desc  { font-size: .8rem; color: var(--fp-muted); line-height: 1.65; margin: 0; }

/* ============================================================
   FEATURE SECTIONS (Escalation / White-label)
   ============================================================ */
.fp-feature { background: #fff; }
.fp-feature--alt { background: var(--fp-surface); }
.fp-feature__text { display: flex; flex-direction: column; gap: 1.5rem; }
.fp-feature__body { font-size: 1.05rem; color: var(--fp-muted); line-height: 1.75; }
.fp-feature__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.fp-feature__list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .9rem; color: var(--fp-muted); }
.fp-feature__list li svg { color: var(--fp-accent); flex-shrink: 0; margin-top: 2px; }
.fp-feature__img {
  width: 100%;
  border-radius: .75rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.1);
  display: block;
}
.fp-feature__img-placeholder {
  width: 100%; max-width: 480px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  min-height: 280px;
  color: var(--fp-muted);
  font-size: .875rem;
}

/* ============================================================
   BENEFITS
   ============================================================ */
.fp-benefits { background: var(--fp-surface); }
.fp-benefit-card {
  background: #fff;
  border-radius: .75rem;
  padding: 1.5rem;
  border: 1px solid var(--fp-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.fp-benefit-card:hover {
  background: var(--fp-surface);
  border-color: rgba(49,130,206,.2);
  box-shadow: var(--fp-shadow-card);
}
.fp-benefit-card__header { display: flex; align-items: center; gap: .75rem; }
.fp-benefit-card__accent { width: 4px; height: 2rem; border-radius: 999px; background: var(--fp-accent2); flex-shrink: 0; }
.fp-benefit-card__icon {
  width: 36px; height: 36px;
  border-radius: .5rem;
  background: rgba(49,130,206,.08);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.fp-benefit-card:hover .fp-benefit-card__icon { background: rgba(49,130,206,.12); }
.fp-benefit-card__icon svg { color: var(--fp-blue); }
.fp-benefit-card__title { font-size: .9rem; font-weight: 600; color: var(--fp-text); margin-bottom: .25rem; }
.fp-benefit-card__desc  { font-size: .8rem; color: var(--fp-muted); line-height: 1.65; margin: 0; }

/* ============================================================
   FAQ
   ============================================================ */
.fp-faq { background: #fff; }
.fp-faq .accordion-item { border: 1px solid var(--fp-border); border-radius: .75rem !important; overflow: hidden; margin-bottom: .75rem; }
.fp-faq .accordion-button {
  background: var(--fp-surface);
  color: var(--fp-text);
  font-size: .9rem;
  font-weight: 600;
  padding: 1.25rem 1.5rem;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.fp-faq .accordion-button:not(.collapsed) { background: #fff; color: var(--fp-blue); }
.fp-faq .accordion-button::after { filter: none; }
.fp-faq .accordion-body { background: #fff; font-size: .9rem; color: var(--fp-muted); line-height: 1.75; padding: 1rem 1.5rem 1.5rem; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.fp-cta {
  background: var(--fp-navy);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.fp-cta__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
}
.fp-cta__sub { color: #a0aec0; font-size: 1.1rem; line-height: 1.7; max-width: 36rem; margin: 0 auto; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal { opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1 !important; transform: none !important; }
.reveal-up    { transform: translateY(28px); }
.reveal-left  { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }