:root {
  --brand: #ff3e7d;
  --brand-dark: #fe604a;
  --accent: #fe604a;
  --bg-dark: #130a03;
  --bg-card: rgba(51, 26, 17, 0.5);
  --bg-section-alt: #1a0e07;
}
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg-dark); color: #fff; }

/* HERO */
.hero {
  background: var(--bg-dark);
  color: #fff;
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(255,62,125,.18) 0%, transparent 65%),
              radial-gradient(ellipse at 10% 80%, rgba(254,96,74,.12) 0%, transparent 55%);
  pointer-events: none;
}
.hero .badge-pill {
  background: rgba(255,62,125,0.2);
  color: #ff9ab8;
  border-radius: 50px;
  padding: 6px 18px;
  font-size: .85rem;
  display: inline-block;
  margin-bottom: 1rem;
  border: 1px solid rgba(255,62,125,.3);
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.15; }
.hero .lead { font-size: 1.2rem; opacity: .85; }
.hero .cta-btn {
  background: linear-gradient(133deg, #ff3e7d 16%, #fe604a 78%);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 14px 40px;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  display: inline-block;
}
.hero .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,62,125,.4); color: #fff; }
.hero .trust-bar { font-size: .85rem; opacity: .7; margin-top: .75rem; }

/* SECTIONS */
section { padding: 80px 0; background: var(--bg-dark); }
section.bg-light-alt { background: var(--bg-section-alt); }
.section-label { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: #fff; }
.text-muted { color: rgba(255,255,255,.55) !important; }

/* FEATURE CARDS */
.feature-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 32px 24px;
  height: 100%;
  transition: box-shadow .25s, transform .25s;
  background: var(--bg-card);
  color: #fff;
}
.feature-card:hover { box-shadow: 0 8px 32px rgba(255,62,125,.2); transform: translateY(-4px); }
.feature-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,62,125,.2) 0%, rgba(254,96,74,.2) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: var(--brand);
  margin-bottom: 1rem;
}
.feature-card h5 { font-weight: 700; color: #fff; }

/* HOW IT WORKS */
.step-number {
  width: 52px; height: 52px;
  background: linear-gradient(133deg, #ff3e7d 16%, #fe604a 78%);
  color: #fff;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.step-connector { border-top: 2px dashed rgba(255,62,125,.3); margin-top: 26px; }

/* EARNINGS */
.earnings-table th { background: linear-gradient(133deg, #ff3e7d 16%, #fe604a 78%); color: #fff; border: none; }
.earnings-table td { background: rgba(51,26,17,.5); color: #fff !important; border-color: rgba(255,255,255,.08); }
.earnings-table tr.table-light > td,
.earnings-table tr.table-light > th { background: rgba(30,12,5,.6) !important; color: #fff !important; }
.earnings-table tr.table-primary > td,
.earnings-table tr.table-primary > th { background: rgba(255,62,125,.2) !important; color: #fff !important; }
.earnings-highlight { color: var(--brand); font-weight: 700; }

/* NO REFERRAL REMINDER */
.reminder-soft-card {
  background: linear-gradient(135deg, rgba(255,62,125,.09) 0%, rgba(254,96,74,.08) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

/* TESTIMONIALS */
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 28px;
  height: 100%;
  color: #fff;
}
.testimonial-card .stars { color: var(--accent); font-size: 1rem; }
.testimonial-card .avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(133deg, #ff3e7d 16%, #fe604a 78%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.1rem;
}

/* FAQ */
.accordion-item { background: rgba(51,26,17,.5) !important; border-color: rgba(255,255,255,.08) !important; color: #fff; }
.accordion-button { background: rgba(51,26,17,.5) !important; color: #fff !important; }
.accordion-button:not(.collapsed) { color: var(--brand) !important; background: rgba(255,62,125,.12) !important; box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(255,62,125,.25); }
.accordion-button::after { filter: invert(1); }
.accordion-body { background: rgba(51,26,17,.3); color: rgba(255,255,255,.6); }

/* LEAD CAPTURE */
.lead-capture {
  background: linear-gradient(133deg, rgba(255,62,125,.25) 0%, rgba(254,96,74,.15) 100%);
  border: 1px solid rgba(255,62,125,.25);
  color: #fff;
  border-radius: 24px;
  padding: 60px 40px;
}
.lead-capture h2 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.lead-capture .form-control {
  border-radius: 50px;
  padding: 12px 22px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.07);
  color: #fff;
}
.lead-capture .form-control::placeholder { color: rgba(255,255,255,.4); }
.lead-capture .btn-submit {
  background: linear-gradient(133deg, #ff3e7d 16%, #fe604a 78%);
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
  padding: 12px 36px;
  border: none;
  font-size: 1rem;
}
.lead-capture .btn-submit:hover { filter: brightness(1.1); }

/* BTN PRIMARY override */
.btn-primary {
  background: linear-gradient(133deg, #ff3e7d 16%, #fe604a 78%) !important;
  border: none !important;
  color: #fff !important;
}
.btn-primary:hover { filter: brightness(1.1); }

/* FOOTER */
footer { background: #0a0503; color: rgba(255,255,255,.45); font-size: .85rem; padding: 30px 0; border-top: 1px solid rgba(255,255,255,.07); }
footer a { color: rgba(255,255,255,.45); text-decoration: none; }
footer a:hover { color: #fff; }