/* ============================================================
   FanPulse brochure - brand layer over Bootstrap 5.3
   Extracted verbatim from the app's includes/lib/marketing.php
   so fanspulse.com and go.fanspulse.com stay visually identical.
   Source snapshot: 2026-08-17
   ============================================================ */
    /* ────────────────────────────────────────────────────────────────
       FanPulse brand layer over Bootstrap
       ──────────────────────────────────────────────────────────────── */
    :root {
      --bs-primary: #7C3CFF;
      --bs-primary-rgb: 124, 60, 255;
      --bs-body-bg: #07101B;
      --bs-body-color: #E9EDF4;
      --bs-border-color: rgba(255, 255, 255, 0.08);
      --bs-link-color: #A7FF00;
      --bs-link-hover-color: #C5FF55;
      --bs-secondary-bg: #0B1220;
      --bs-tertiary-bg: #0F1925;
    }
    body {
      font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
      background: #07101B;
      color: var(--bs-body-color);
      letter-spacing: -0.01em;
    }
    /* Display headings - Barlow Condensed italic, matching the brand wordmark */
    .fp-display, .fp-hero h1, .fp-section-title {
      font-family: 'Barlow Condensed', 'Inter', sans-serif;
      font-style: italic;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.005em;
      line-height: 0.98;
    }
    .fp-display .em, .fp-section-title .em { color: #A7FF00; }
    /* Hero gradient + ambient orbs */
    .bg-grid {
      background-image:
        radial-gradient(60% 50% at 50% 0%, rgba(124,60,255,.10), transparent 70%),
        radial-gradient(40% 40% at 80% 60%, rgba(167,255,0,.06), transparent 70%),
        linear-gradient(180deg, #07101B, #0B1220);
      background-attachment: fixed;
    }

    /* Top nav */
    .fp-navbar {
      backdrop-filter: blur(12px);
      background: rgba(7,16,27,0.85);
      border-bottom: 1px solid var(--bs-border-color);
    }
    .fp-navbar .nav-link { color: rgba(233,237,244,.8); font-weight: 600; font-size: 15px; transition: color .15s; position: relative; }
    .fp-navbar .nav-link:hover { color: #A7FF00; }
    .fp-navbar .nav-link.active { color: #7C3CFF; }
    .fp-navbar .nav-link.active::after {
      content: ''; position: absolute; left: 8px; right: 8px; bottom: -2px; height: 2px;
      background: #7C3CFF; border-radius: 2px;
    }
    .fp-logo { font-weight: 900; font-size: 20px; letter-spacing: -0.02em; text-decoration: none; color: #fff !important; }
    .fp-logo .pulse { color: #A7FF00; }

    /* Buttons */
    .btn-fp-primary {
      background: #A7FF00; color: #0A1018; border: 0; font-weight: 800; padding: 10px 18px; border-radius: 10px;
      transition: transform .1s, box-shadow .15s;
    }
    .btn-fp-primary:hover { background: #B9FF33; box-shadow: 0 0 24px rgba(167,255,0,.35); color: #0A1018; }
    .btn-fp-outline {
      background: transparent; color: #E9EDF4; border: 1.5px solid rgba(255,255,255,.16); font-weight: 700;
      padding: 10px 18px; border-radius: 10px;
    }
    .btn-fp-outline:hover { background: rgba(255,255,255,.04); border-color: #A7FF00; color: #fff; }

    /* Cards */
    .fp-card {
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
      border: 1px solid var(--bs-border-color);
      border-radius: 14px;
      padding: 24px;
    }
    .fp-card-hero {
      background: linear-gradient(135deg, rgba(124,60,255,.12), rgba(167,255,0,.04));
      border: 1px solid rgba(124,60,255,.35);
    }

    /* Hero */
    .fp-hero {
      padding: 80px 0 60px;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .fp-hero h1 {
      font-size: clamp(36px, 7vw, 76px);
      line-height: 1.02;
      font-weight: 900;
      letter-spacing: -0.025em;
      margin: 16px 0;
    }
    .fp-eyebrow { letter-spacing: 4px; font-size: 12px; font-weight: 800; color: #7C3CFF; text-transform: uppercase; }
    .fp-lead { font-size: 18px; color: rgba(233,237,244,.72); max-width: 720px; margin: 0 auto 28px; }
    .text-lime { color: #A7FF00 !important; }
    .text-gold { color: #FFC83D !important; }
    .text-violet { color: #7C3CFF !important; }
    .text-muted-fp { color: rgba(233,237,244,.55) !important; }

    /* Stat tile */
    .fp-stat { text-align: center; padding: 24px 12px; }
    .fp-stat .num { font-size: clamp(32px, 4vw, 44px); font-weight: 900; line-height: 1; color: #A7FF00; }
    .fp-stat .label { letter-spacing: 1.5px; font-size: 11px; color: rgba(233,237,244,.55); margin-top: 8px; text-transform: uppercase; }

    /* Feature tile */
    .fp-feature-icon {
      width: 52px; height: 52px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; margin-bottom: 14px;
    }

    /* Pricing */
    .fp-tier { padding: 32px 24px; height: 100%; display: flex; flex-direction: column; }
    .fp-tier-popular { border-color: #A7FF00; box-shadow: 0 0 32px rgba(167,255,0,.18); position: relative; }
    .fp-popular-flag {
      position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
      background: #A7FF00; color: #0A1018; font-weight: 900; font-size: 10px; letter-spacing: 1.5px;
      padding: 5px 12px; border-radius: 999px;
    }
    .fp-price { font-size: 48px; font-weight: 900; line-height: 1; margin: 8px 0; }
    .fp-tier ul { list-style: none; padding: 0; margin: 16px 0 20px; flex: 1; }
    .fp-tier li { padding: 6px 0; display: flex; gap: 10px; font-size: 14px; }
    .fp-tier li::before { content: '✓'; color: #A7FF00; font-weight: 800; flex-shrink: 0; }

    /* Ad banner (house) */
    .fp-ad-banner {
      background: linear-gradient(135deg, #0F0228, #1F0048);
      border: 1px solid #7C3CFF55;
      border-radius: 14px;
      padding: 18px 24px;
      display: flex; align-items: center; gap: 16px;
      text-decoration: none; color: inherit;
    }
    .fp-ad-banner:hover { box-shadow: 0 0 24px rgba(124,60,255,.25); color: inherit; }

    /* Footer */
    .fp-footer { padding: 56px 0 28px; border-top: 1px solid var(--bs-border-color); color: rgba(233,237,244,.55); font-size: 13px; background: #060d16; }
    .fp-footer .footer-head { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; color: rgba(233,237,244,.5); margin-bottom: 14px; }
    .fp-footer .row a { display: block; color: rgba(233,237,244,.7); text-decoration: none; margin: 0 0 9px; font-size: 13px; }
    .fp-footer .row a:hover { color: #A7FF00; }
    .fp-footer .footer-blurb { color: rgba(233,237,244,.5); font-size: 13px; line-height: 1.6; max-width: 260px; }
    .fp-footer .footer-social a { margin: 0; }
    .fp-footer .footer-social img { opacity: .8; transition: opacity .15s; }
    .fp-footer .footer-social a:hover img { opacity: 1; }
    .fp-footer .footer-legal-strip { border-top: 1px solid var(--bs-border-color); }
    .fp-footer .footer-legal-strip a { color: rgba(233,237,244,.55); text-decoration: none; margin: 0; }
    .fp-footer .footer-legal-strip a:hover { color: #A7FF00; }

    /* FAQ accordion */
    .accordion-button { background: rgba(255,255,255,.02); color: #E9EDF4; font-weight: 700; }
    .accordion-button:not(.collapsed) { background: rgba(124,60,255,.10); color: #fff; box-shadow: none; }
    .accordion-button:focus { box-shadow: none; border-color: var(--bs-border-color); }
    .accordion-item { background: transparent; border-color: var(--bs-border-color); }
    .accordion-body { color: rgba(233,237,244,.72); }

    /* Forms */
    .form-control, .form-select {
      background: rgba(255,255,255,.03); border: 1px solid var(--bs-border-color); color: #E9EDF4;
    }
    .form-control:focus, .form-select:focus {
      background: rgba(255,255,255,.05); border-color: #7C3CFF; box-shadow: 0 0 0 .25rem rgba(124,60,255,.20); color: #fff;
    }
    .form-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: rgba(233,237,244,.55); font-weight: 700; }

    /* Visible-on-hover sections */
    .section { padding: 64px 0; }
    .section-eyebrow { font-size: 11px; letter-spacing: 3px; font-weight: 800; color: rgba(233,237,244,.45); text-transform: uppercase; }

    /* ── Long-form content pages ── */
    .mk-hero { padding: 64px 0 8px; }
    .mk-hero h1 { font-size: clamp(38px, 5.6vw, 68px); }
    .mk-lead { color: rgba(233,237,244,.7); font-size: 18px; line-height: 1.65; max-width: 720px; }
    .mk-prose { max-width: 760px; }
    .mk-prose h2 { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 3vw, 34px); margin: 40px 0 12px; }
    .mk-prose h3 { font-weight: 800; font-size: 20px; margin: 26px 0 8px; }
    .mk-prose p { color: rgba(233,237,244,.72); line-height: 1.7; margin-bottom: 14px; }
    .mk-prose .lead-p { color: rgba(233,237,244,.86); font-size: 18px; }
    .mk-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; padding: 0; list-style: none; }
    .mk-chip-list li { background: rgba(255,255,255,.03); border: 1px solid var(--bs-border-color); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: rgba(233,237,244,.8); }
    .mk-grid-card { background: rgba(255,255,255,.02); border: 1px solid var(--bs-border-color); border-radius: 14px; padding: 22px; height: 100%; }
    .mk-grid-card h4 { font-weight: 800; font-size: 17px; margin-bottom: 8px; }
    .mk-grid-card p { color: rgba(233,237,244,.62); font-size: 14px; margin: 0; }
    .mk-grid-card ul { color: rgba(233,237,244,.62); font-size: 14px; margin: 8px 0 0; padding-left: 18px; }
    .mk-grid-card ul li { margin: 3px 0; }
    .mk-step { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--bs-border-color); }
    .mk-step .k { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(167,255,0,.10); color: #A7FF00; font-weight: 800; display: grid; place-items: center; font-family: 'Barlow Condensed', sans-serif; font-size: 19px; }
    .mk-step h4 { font-weight: 800; font-size: 17px; margin: 4px 0 4px; }
    .mk-step p { color: rgba(233,237,244,.62); font-size: 14px; margin: 0; }
    .mk-cta { text-align: center; padding: 56px 24px; border-radius: 20px; background: linear-gradient(135deg, rgba(124,60,255,.12), rgba(167,255,0,.05)); border: 1px solid rgba(124,60,255,.3); }
    .mk-cta h2 { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 3.6vw, 42px); }
    .mk-cta .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }