/* =====================================================================
   DESIGN-SYSTEM.CSS — RankBoost Agency
   Unified, reusable components shared across every page.
   Import order: master.css → design-system.css → [page].css

   WHAT LIVES HERE:
   ─────────────────────────────────────────────────────────────────
   1.  Page Hero  — .rb-hero (banner pattern used by all inner pages)
   2.  Intro Band — .rb-intro-band (black accent bar beneath heroes)
   3.  FAQ        — .rb-faq-section / .rb-faq-grid / .rb-faq-list /
                    .rb-faq-cta (single design across all pages)
   4.  Final CTA  — .rb-final-cta (bottom-of-page conversion section)
   5.  Hero Badges — .rb-badge (trust badge pill used in heroes)
   6.  Trust Items — .rb-trust-item (inline trust signals in heroes)
   7.  Stats Block — .rb-stats-block / .rb-stat (hero stat cards)
   ===================================================================== */

/* =====================================================================
   1. PAGE HERO — .rb-hero
   Shared banner pattern: gradient bg + purple & lime orbs.
   Inner pages use this instead of page-specific hero classes.
   ===================================================================== */

.rb-hero {
  position: relative;
  overflow: hidden;
  padding-top: 140px;
  padding-bottom: 96px;
  background:
    radial-gradient(circle at 8% 16%, rgba(123, 93, 255, 0.14), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(212, 255, 18, 0.22), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #f8f8fb 100%);
}

/* Floating colour orbs — placed as sibling divs inside .rb-hero */
.rb-hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(24px);
  opacity: 0.55;
  pointer-events: none;
}

.rb-hero-orb--purple {
  width: 200px;
  height: 200px;
  left: 6%;
  top: 22%;
  background: rgba(123, 93, 255, 0.22);
}

.rb-hero-orb--lime {
  width: 150px;
  height: 150px;
  right: 10%;
  top: 14%;
  background: rgba(212, 255, 18, 0.44);
}

/* Optional subtle grid overlay (used on AI page) */
.rb-hero--grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(123, 93, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 93, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
}

/* Hero inner content wrapper */
.rb-hero-content {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

.rb-hero-content h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.1;
  color: #000000;
  margin-top: 18px;
}

/* Two-column hero layout (copy + visual panel) */
.rb-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .rb-hero-inner {
    grid-template-columns: 1fr 460px;
    gap: 64px;
  }
}

/* Hero CTA group */
.rb-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 32px;
}

/* =====================================================================
   2. HERO BADGE — .rb-badge
   Trust pill used in hero sections (e.g. "✓ AI-Powered Execution")
   ===================================================================== */

.rb-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  background: #ffffff;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}

.rb-badge__check {
  color: var(--primary-purple);
  font-size: 13px;
  font-weight: 900;
}

/* Badges row wrapper */
.rb-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

/* =====================================================================
   3. HERO TRUST ITEMS — .rb-trust-item
   Small inline trust signals (e.g. "No long contracts")
   ===================================================================== */

.rb-trust-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
}

.rb-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
}

.rb-trust-item::before {
  content: "✓";
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-lime);
  color: #000;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}

/* =====================================================================
   4. HERO STATS BLOCK — .rb-stats-block / .rb-stat
   Dark card showing key proof numbers in hero (Growth, AI pages)
   ===================================================================== */

.rb-stats-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: #000000;
  padding: 28px;
}

.rb-stat {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 20px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.rb-stat strong {
  display: block;
  color: var(--accent-lime);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.rb-stat span {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

/* Full-width stat note (spans 2 cols) */
.rb-stat--full {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(212, 255, 18, 0.06);
  border-color: rgba(212, 255, 18, 0.15);
}

.rb-stat--full p {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

/* =====================================================================
   5. INTRO BAND — .rb-intro-band
   Black accent bar beneath hero with white/lime highlights.
   Used by: seo-services, growth-services, ai-solutions, local-seo.
   ===================================================================== */

.rb-intro-band {
  background: #000000;
  padding: 48px 20px;
}

.rb-intro-band__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
  line-height: 1.8;
}

.rb-intro-band__inner strong {
  color: var(--accent-lime);
}

/* =====================================================================
   6. UNIFIED FAQ — .rb-faq-section / .rb-faq-grid / .rb-faq-list / .rb-faq-cta
   Single FAQ design used on ALL pages.
   Layout: left text label + right accordion list + sticky dark CTA card.
   ===================================================================== */

.rb-faq-section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  background: var(--soft-gray);
}

@media (max-width: 767px) {
  .rb-faq-section {
    padding-top: var(--section-gap-mobile);
    padding-bottom: var(--section-gap-mobile);
  }
}

/* Outer grid: [label col] + [accordion + cta col] */
.rb-faq-outer {
  display: grid;
  gap: 60px;
  align-items: start;
}


/* Left column: eyebrow + heading + subtext + optional CTA */
.rb-faq-label {
  /* inherits reveal-up animation */
}

.rb-faq-label h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.16;
  color: #000000;
  margin-top: 16px;
}

.rb-faq-label p {
  color: var(--muted-alpha);
  font-size: var(--fs-body-lg);
  line-height: 1.8;
  margin-top: 20px;
}

.rb-faq-label .primary-cta {
  margin-top: 28px;
}

/* Right column: accordion list + sticky CTA card */
.rb-faq-right {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 1280px) {
  .rb-faq-right {
    grid-template-columns: 1fr 360px;
  }
}

/* Accordion list */
.rb-faq-list {
  display: grid;
  gap: 10px;
}

.rb-faq-list details {
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  transition: box-shadow 200ms ease;
}

.rb-faq-list details:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.rb-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  list-style: none;
  -webkit-appearance: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms ease;
}

.rb-faq-list summary::-webkit-details-marker { display: none; }

.rb-faq-list details[open] > summary {
  background: rgba(123, 93, 255, 0.04);
}

.rb-faq-list .chevron-icon {
  flex-shrink: 0;
  color: var(--primary-purple);
  transition: transform 240ms ease;
}

.rb-faq-list details[open] > summary .chevron-icon {
  transform: rotate(180deg);
}

.rb-faq-list details p {
  padding: 0 24px 20px;
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: rgba(0, 0, 0, 0.62);
}

/* Sticky CTA card inside FAQ right column */
.rb-faq-cta {
  background: #000000;
  border-radius: 16px;
  padding: 36px;
  color: #ffffff;
  position: sticky;
  top: 110px;
}

.rb-faq-cta__eyebrow {
  display: block;
  color: var(--accent-lime);
  font-size: var(--fs-eyebrow);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.rb-faq-cta h3 {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 14px;
  line-height: 1.25;
}

.rb-faq-cta p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 24px;
}

.rb-faq-cta .primary-cta {
  width: 100%;
  justify-content: center;
}

/* Metrics grid inside FAQ CTA card */
.rb-faq-cta__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rb-faq-cta__metric {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.rb-faq-cta__metric strong {
  display: block;
  color: var(--accent-lime);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.rb-faq-cta__metric span {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  .rb-faq-cta {
    position: static;
    padding: 28px 24px;
  }
}

/* =====================================================================
   7. FINAL CTA SECTION — .rb-final-cta
   Bottom-of-page conversion section. Used on all pages.
   Inner rounded black card with text + optional visual.
   ===================================================================== */

.rb-final-cta {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  background: #ffffff;
}

@media (max-width: 767px) {
  .rb-final-cta {
    padding-top: var(--section-gap-mobile);
    padding-bottom: var(--section-gap-mobile);
  }
}

.rb-final-cta__inner {
  background: #000000;
  border-radius: 16px;
  padding: 64px 56px;
  display: grid;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Ambient glow behind content */
.rb-final-cta__inner::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  right: -120px;
  bottom: -120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(123, 93, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.rb-final-cta__inner::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  left: -60px;
  top: -60px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(212, 255, 18, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .rb-final-cta__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.rb-final-cta__copy {
  position: relative;
  z-index: 1;
}

.rb-final-cta__eyebrow {
  display: block;
  color: var(--accent-lime);
  font-size: var(--fs-eyebrow);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.rb-final-cta__inner h2 {
  color: #ffffff;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.14;
  margin: 0 0 20px;
}

.rb-final-cta__inner p {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--fs-body-lg);
  line-height: 1.8;
  margin: 0 0 32px;
}

/* Visual side (graph / dashboard placeholder) */
.rb-final-cta__visual {
  position: relative;
  z-index: 1;
  min-height: 280px;
  border-radius: 12px;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}

/* Bar chart decoration inside CTA visual */
.rb-cta-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  height: 140px;
}

.rb-cta-bars i {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: var(--primary-purple);
  opacity: 0.85;
}

.rb-cta-bars i:nth-child(even) {
  background: var(--accent-lime);
}

.rb-cta-bars i:nth-child(1) { height: 30%; }
.rb-cta-bars i:nth-child(2) { height: 50%; }
.rb-cta-bars i:nth-child(3) { height: 70%; }
.rb-cta-bars i:nth-child(4) { height: 45%; }
.rb-cta-bars i:nth-child(5) { height: 85%; }
.rb-cta-bars i:nth-child(6) { height: 65%; }
.rb-cta-bars i:nth-child(7) { height: 95%; }

@media (max-width: 767px) {
  .rb-final-cta__inner {
    padding: 36px 24px;
  }
  .rb-final-cta__inner h2 {
    font-size: 28px;
  }
}

/* =====================================================================
   8. SHARED CARD HOVER STATE HELPERS
   Apply .rb-card to any card element that needs consistent hover.
   ===================================================================== */

.rb-card {
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 12px;
  background: #ffffff;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.rb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.1);
}

.rb-card--dark {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.08);
}

/* =====================================================================
   9. SECTION DIVIDER BAND
   Optional visual separator between sections.
   ===================================================================== */

.rb-divider-band {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.1) 80%, transparent);
  margin: 0;
}