{"id":17,"date":"2026-01-02T22:26:57","date_gmt":"2026-01-02T22:26:57","guid":{"rendered":"https:\/\/behindthecitgo.com\/?page_id=17"},"modified":"2026-02-10T20:38:26","modified_gmt":"2026-02-10T20:38:26","slug":"homepage","status":"publish","type":"page","link":"https:\/\/behindthecitgo.com\/","title":{"rendered":"Homepage"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"17\" class=\"elementor elementor-17\">\n\t\t\t\t<div class=\"elementor-element elementor-element-29243a7 e-flex e-con-boxed e-con e-parent\" data-id=\"29243a7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7efe76a elementor-widget elementor-widget-html\" data-id=\"7efe76a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n========================================================\nBehind the Citgo \u2014 Home Page (UPDATED)\nChanges made per request:\n1) Removed ALL trailer \/ listening \/ hearing references and audio controls.\n2) Replaced those with links to the Podcast Player page:\n   https:\/\/behindthecitgo.com\/?page_id=32\n3) Ensured button text is white (higher contrast).\n4) Ensured all buttons\/links work (smooth scroll for in-page anchors; external links open normally).\nNo external dependencies. Everything stays inside this one HTML.\n========================================================\n-->\n\n<div id=\"btc-home\" class=\"btc\">\n  <!-- Ambient background -->\n  <div class=\"btc-bg\" aria-hidden=\"true\">\n    <div class=\"btc-orb btc-orb-a\"><\/div>\n    <div class=\"btc-orb btc-orb-b\"><\/div>\n    <div class=\"btc-orb btc-orb-c\"><\/div>\n    <div class=\"btc-grid\"><\/div>\n    <div class=\"btc-noise\"><\/div>\n  <\/div>\n\n\n  <!-- HERO -->\n  <section class=\"btc-hero\" id=\"top\" aria-label=\"Behind the Citgo hero section\">\n    <div class=\"btc-hero-bg\" aria-hidden=\"true\"><\/div>\n    <div class=\"btc-hero-vignette\" aria-hidden=\"true\"><\/div>\n\n    <!-- subtle interactive sparkles layer -->\n    <canvas class=\"btc-spark\" id=\"btcSpark\" aria-hidden=\"true\"><\/canvas>\n\n    <div class=\"btc-hero-inner\">\n      <div class=\"btc-hero-card\" id=\"btcHeroCard\">\n        \n\n        <h1 class=\"btc-hero-title\" style=\"color: white\">Behind the Citgo<\/h1>\n        <h2 class=\"btc-hero-tagline\" style=\"color: white\">The Unseen World of Addiction<\/h2>\n\n        <p class=\"btc-hero-text\">\n          Step into a space where authentic stories of recovery and renewal are brought forward with honesty and depth.\n          <strong>Behind the Citgo<\/strong> explores journeys shaped by struggle, strengthened by faith, and restored\n          through community - offering wisdom, insight, and hope to every listener. Select episodes also feature leading\n          experts in addiction recovery, mental health, leadership, and spiritual formation, enriching these narratives\n          with professional guidance and evidence-based understanding.\n        <\/p>\n\n        <!-- CTA: ALL links now route to podcast player page -->\n        <div class=\"btc-hero-cta\">\n          <a\n            href=\"https:\/\/behindthecitgo.com\/?page_id=32\"\n            class=\"btc-hero-button\"\n            id=\"btcGoPlayerPrimary\"\n            target=\"_self\"\n            rel=\"noopener\"\n          >\n            Explore Episodes\n          <\/a>\n\n          \n        <\/div>\n\n        <!-- interactive: mini stats (no audio, no trailer) -->\n        <div class=\"btc-hero-mini\" role=\"region\" aria-label=\"Interactive highlights\">\n          <div class=\"btc-mini-left\">\n            <div class=\"btc-stat\">\n              <div class=\"btc-stat-k\">Focus<\/div>\n              <div class=\"btc-stat-v\" id=\"btcFocusWord\">Recovery<\/div>\n            <\/div>\n            <div class=\"btc-stat\">\n              <div class=\"btc-stat-k\">Theme<\/div>\n              <div class=\"btc-stat-v\" id=\"btcThemeWord\">Renewal<\/div>\n            <\/div>\n            <div class=\"btc-stat\">\n              <div class=\"btc-stat-k\">Tone<\/div>\n              <div class=\"btc-stat-v\" id=\"btcToneWord\">Hope<\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"btc-mini-right\">\n  <!-- Three additional stat cards (same style as Focus\/Theme\/Tone) -->\n  <div class=\"btc-stat\">\n    <div class=\"btc-stat-k\">Voices<\/div>\n    <div class=\"btc-stat-v\">50+ guests confirmed<\/div>\n  <\/div>\n\n  <div class=\"btc-stat\">\n    <div class=\"btc-stat-k\">Formats<\/div>\n    <div class=\"btc-stat-v\">Episodes \u2022 Reels \u2022 Shorts<\/div>\n  <\/div>\n\n  <div class=\"btc-stat\">\n    <div class=\"btc-stat-k\">Where to Watch<\/div>\n    <div class=\"btc-stat-v\">YouTube + Spotify + Other Popular Platforms<\/div>\n  <\/div>\n<\/div>\n        <\/div>\n\n        <!-- interactive ripple target -->\n        <div class=\"btc-ripple-layer\" id=\"btcRippleLayer\" aria-hidden=\"true\"><\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ABOUT -->\n  <section class=\"btc-section\" id=\"about\" aria-label=\"About Behind the Citgo\">\n    <div class=\"btc-container\">\n      <div class=\"btc-section-head\">\n        <h3 class=\"btc-h\">What You\u2019ll Find Here<\/h3>\n        <p class=\"btc-sub\">\n          A colorful, interactive homepage designed to feel alive - while keeping the message clear: transformation is possible.\n        <\/p>\n      <\/div>\n\n      <div class=\"btc-cards\">\n        <article class=\"btc-card\">\n          <div class=\"btc-card-top\">\n            <span class=\"btc-icon\" aria-hidden=\"true\">\u2726<\/span>\n            <h4>Authentic Stories<\/h4>\n          <\/div>\n          <p>\n            Conversations shaped by honesty - highlighting the realities of addiction, recovery, spiritual formation, and rebuilding life.\n          <\/p>\n        <\/article>\n\n        <article class=\"btc-card\">\n          <div class=\"btc-card-top\">\n            <span class=\"btc-icon\" aria-hidden=\"true\">\u26a1<\/span>\n            <h4>Evidence + Experience<\/h4>\n          <\/div>\n          <p>\n            Select episodes include expert voices - mental health, leadership, and evidence-based recovery practices alongside lived experience.\n          <\/p>\n        <\/article>\n\n        <article class=\"btc-card\">\n          <div class=\"btc-card-top\">\n            <span class=\"btc-icon\" aria-hidden=\"true\">\u2600<\/span>\n            <h4>Hope With Structure<\/h4>\n          <\/div>\n          <p>\n            Emphasis on community, discipline, and spiritual growth - because sustainable recovery is both meaningful and measurable.\n          <\/p>\n        <\/article>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- HIGHLIGHTS (interactive filter) -->\n  <!-- Comment out Themes for now -->\n  <section class=\"btc-section btc-section-alt\" id=\"highlights\" aria-label=\"Highlights\">\n    <div class=\"btc-container\">\n      <div class=\"btc-section-head btc-section-head-row\">\n        <div>\n          <h3 class=\"btc-h\">Explore Episode Themes<\/h3>\n          <p class=\"btc-sub\">Filter to preview what you want to explore next.<\/p>\n        <\/div>\n\n        <!--\n        <div class=\"btc-filters\" role=\"group\" aria-label=\"Theme filters\">\n          <button class=\"btc-filter is-active\" type=\"button\" data-filter=\"all\">All<\/button>\n          <button class=\"btc-filter\" type=\"button\" data-filter=\"recovery\">Recovery<\/button>\n          <button class=\"btc-filter\" type=\"button\" data-filter=\"faith\">Faith<\/button>\n          <button class=\"btc-filter\" type=\"button\" data-filter=\"leadership\">Leadership<\/button>\n          <button class=\"btc-filter\" type=\"button\" data-filter=\"mentalhealth\">Mental Health<\/button>\n        <\/div>\n        -->\n      <\/div>\n\n      <div class=\"btc-grid-cards\" id=\"btcThemeGrid\"><\/div>\n\n      <div class=\"btc-center\">\n        <a class=\"btc-btn btc-btn-glow\" href=\"https:\/\/behindthecitgo.com\/?page_id=32\">\n          Open Podcast Player\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n   \n  \n\n  \n \n\n  <!-- Quick Actions Drawer -->\n  <div class=\"btc-drawer\" id=\"btcDrawer\" aria-hidden=\"true\">\n    <div class=\"btc-drawer-backdrop\" data-close><\/div>\n    <div class=\"btc-drawer-panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Quick actions\">\n      <div class=\"btc-drawer-head\">\n        <div>\n          <strong>Quick Actions<\/strong>\n          <span class=\"btc-muted\">Fast interactions for visitors<\/span>\n        <\/div>\n        <button class=\"btc-x\" type=\"button\" data-close aria-label=\"Close quick actions\">\u00d7<\/button>\n      <\/div>\n\n      <div class=\"btc-drawer-body\">\n        <a class=\"btc-action\" href=\"https:\/\/behindthecitgo.com\/?page_id=32\">\n          <span class=\"btc-action-ic\" aria-hidden=\"true\">\ud83c\udfa7<\/span>\n          <span>\n            <strong>Open Podcast Player<\/strong>\n            <em>Go to the dedicated player page<\/em>\n          <\/span>\n        <\/a>\n\n        <button class=\"btc-action\" type=\"button\" data-action=\"shuffle\">\n          <span class=\"btc-action-ic\" aria-hidden=\"true\">\ud83d\udd00<\/span>\n          <span>\n            <strong>Shuffle Themes<\/strong>\n            <em>Reorder highlight cards<\/em>\n          <\/span>\n        <\/button>\n\n        <button class=\"btc-action\" type=\"button\" data-action=\"calm\">\n          <span class=\"btc-action-ic\" aria-hidden=\"true\">\ud83d\udd4a<\/span>\n          <span>\n            <strong>Calm Mode<\/strong>\n            <em>Reduce motion and intensity<\/em>\n          <\/span>\n        <\/button>\n\n        <div class=\"btc-divider\" role=\"separator\"><\/div>\n\n        <div class=\"btc-small\">\n          <strong>Implementation Tip<\/strong>\n          <p>\n            If you use Elementor\/WordPress caching, purge cache after updates so you see the new version.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Toast -->\n  <div class=\"btc-toast\" id=\"btcToast\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/div>\n<\/div>\n\n<style>\n  \/* ========================================================\n     Styles (UPDATED)\n     Key change: all buttons now use white text to ensure contrast.\n     Namespaced under .btc to avoid theme conflicts.\n  ======================================================== *\/\n\n  #btc-home.btc {\n    position: relative;\n    isolation: isolate;\n    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\";\n    color: #eaf2ff;\n  }\n\n  \/* Background layers *\/\n  .btc-bg {\n    position: fixed;\n    inset: 0;\n    z-index: -1;\n    overflow: hidden;\n    background: radial-gradient(1200px 700px at 15% 10%, rgba(255, 140, 0, 0.25), transparent 60%),\n                radial-gradient(900px 600px at 85% 25%, rgba(99, 102, 241, 0.35), transparent 55%),\n                radial-gradient(900px 700px at 55% 90%, rgba(34, 211, 238, 0.20), transparent 55%),\n                linear-gradient(180deg, #050712, #050712);\n  }\n\n  .btc-orb {\n    position: absolute;\n    width: 560px;\n    height: 560px;\n    border-radius: 50%;\n    filter: blur(30px);\n    opacity: 0.55;\n    transform: translate3d(0,0,0);\n    animation: btcFloat 12s ease-in-out infinite;\n    will-change: transform;\n  }\n  .btc-orb-a { left: -140px; top: -160px; background: radial-gradient(circle at 30% 30%, rgba(251, 146, 60, 0.85), rgba(249, 115, 22, 0.0) 70%); }\n  .btc-orb-b { right: -180px; top: -120px; width: 620px; height: 620px; background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.85), rgba(99, 102, 241, 0.0) 70%); animation-delay: -4s; }\n  .btc-orb-c { left: 20%; bottom: -220px; width: 700px; height: 700px; background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.75), rgba(34, 211, 238, 0.0) 70%); animation-delay: -7s; }\n\n  .btc-grid {\n    position: absolute;\n    inset: 0;\n    opacity: 0.22;\n    background-image:\n      linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px),\n      linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(600px 600px at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,0));\n  }\n\n  .btc-noise {\n    position: absolute;\n    inset: 0;\n    opacity: 0.08;\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'\/%3E%3C\/svg%3E\");\n    background-size: 180px 180px;\n    mix-blend-mode: overlay;\n    pointer-events: none;\n  }\n\n  @keyframes btcFloat {\n    0%, 100% { transform: translate(0px, 0px) scale(1); }\n    50% { transform: translate(20px, 26px) scale(1.04); }\n  }\n\n  .btc-container { max-width: 1200px; padding: 0 1.25rem; margin: 0 auto; }\n\n  \/* Top bar *\/\n  .btc-top {\n    position: sticky;\n    top: 0;\n    z-index: 30;\n    backdrop-filter: blur(10px);\n    background: rgba(6, 8, 18, 0.72);\n    border-bottom: 1px solid rgba(255,255,255,0.10);\n  }\n  .btc-top-inner {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    padding: 0.8rem 1.25rem;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n\n  .btc-brand { display:flex; align-items:center; gap:0.75rem; text-decoration:none; color:inherit; min-width: 220px; }\n  .btc-brand-mark {\n    width: 40px; height: 40px;\n    border-radius: 14px;\n    background: radial-gradient(circle at 30% 30%, rgba(251, 146, 60, 0.95), rgba(99, 102, 241, 0.85));\n    box-shadow: 0 14px 30px rgba(0,0,0,0.45);\n    position: relative;\n  }\n  .btc-brand-mark::after {\n    content: \"\";\n    position: absolute;\n    inset: 3px;\n    border-radius: 12px;\n    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.20), rgba(255,255,255,0.0) 60%);\n  }\n  .btc-brand-text strong { display:block; font-weight: 800; letter-spacing: 0.02em; }\n  .btc-brand-text em { display:block; font-style: normal; opacity: 0.75; font-size: 0.85rem; margin-top: 0.1rem; }\n\n  .btc-nav { display:flex; gap: 0.8rem; align-items:center; }\n  .btc-nav-link {\n    text-decoration: none;\n    color: rgba(234, 242, 255, 0.9);\n    font-weight: 650;\n    font-size: 0.95rem;\n    padding: 0.45rem 0.6rem;\n    border-radius: 999px;\n    border: 1px solid transparent;\n    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;\n  }\n  .btc-nav-link:hover {\n    background: rgba(255,255,255,0.06);\n    border-color: rgba(255,255,255,0.12);\n    transform: translateY(-1px);\n  }\n\n  .btc-top-actions { display:flex; align-items:center; gap:0.6rem; min-width: 240px; justify-content:flex-end; }\n\n  \/* Buttons (WHITE TEXT FIX) *\/\n  .btc-btn,\n  .btc-hero-button,\n  .btc-filter,\n  .btc-tab,\n  .btc-chip,\n  .btc-action {\n    color: rgba(255,255,255,0.96) !important; \/* force readable text *\/\n  }\n\n  .btc-btn {\n    appearance: none;\n    border: 1px solid rgba(255,255,255,0.12);\n    background: rgba(255,255,255,0.06);\n    font-weight: 750;\n    letter-spacing: 0.02em;\n    border-radius: 999px;\n    padding: 0.65rem 1rem;\n    cursor: pointer;\n    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n    box-shadow: 0 10px 25px rgba(0,0,0,0.25);\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .btc-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }\n  .btc-btn:active { transform: translateY(0px) scale(0.99); }\n\n  .btc-btn-ghost { background: rgba(255,255,255,0.03); box-shadow: none; }\n\n  .btc-btn-glow {\n    border: 1px solid rgba(255,255,255,0.16);\n    background: radial-gradient(circle at 20% 20%, rgba(251,146,60,0.55), rgba(99,102,241,0.40));\n    box-shadow: 0 14px 35px rgba(0,0,0,0.35);\n  }\n\n  .btc-btn-wide { width: 100%; }\n\n  \/* Chip *\/\n  .btc-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.55rem;\n    border-radius: 999px;\n    padding: 0.55rem 0.85rem;\n    border: 1px solid rgba(255,255,255,0.14);\n    background: rgba(255,255,255,0.05);\n    font-weight: 750;\n    cursor: pointer;\n    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;\n  }\n  .btc-chip:hover { transform: translateY(-1px); background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }\n  .btc-chip-dot {\n    width: 10px; height: 10px; border-radius: 999px;\n    background: radial-gradient(circle at 30% 30%, rgba(34,211,238,1), rgba(99,102,241,1));\n    box-shadow: 0 0 0 4px rgba(34,211,238,0.15);\n  }\n\n  \/* HERO *\/\n  .btc-hero {\n    position: relative;\n    width: 100%;\n    min-height: 82vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n  }\n  .btc-hero-bg {\n    position: absolute;\n    inset: 0;\n    background-image: url('https:\/\/behindthecitgo.com\/wp-content\/uploads\/2026\/01\/DoD_Christopher_Watercolor_on_cold-press_paper_soft_washes_pi_567b159e-fcad-4098-a24e-5710e759d54e_1.png');\n    background-size: cover;\n    background-position: center;\n    background-repeat: no-repeat;\n    z-index: 1;\n    transform: scale(1.03);\n    filter: saturate(1.05);\n  }\n  .btc-hero-vignette {\n    position: absolute;\n    inset: 0;\n    z-index: 2;\n    background:\n      radial-gradient(900px 600px at 20% 25%, rgba(251,146,60,0.18), transparent 62%),\n      radial-gradient(800px 650px at 85% 30%, rgba(99,102,241,0.18), transparent 60%),\n      linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));\n  }\n\n  .btc-spark { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }\n\n  .btc-hero-inner {\n    position: relative;\n    z-index: 4;\n    max-width: 1200px;\n    width: 100%;\n    padding: 3rem 1.5rem;\n    display: flex;\n    justify-content: center;\n  }\n\n  .btc-hero-card {\n    position: relative;\n    background: rgba(15, 15, 20, 0.88);\n    border-radius: 1.25rem;\n    padding: 2.75rem 2.25rem;\n    max-width: 900px;\n    width: 100%;\n    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.50);\n    border: 1px solid rgba(255,255,255,0.12);\n    backdrop-filter: blur(6px);\n    overflow: hidden;\n  }\n  .btc-hero-card::before {\n    content: \"\";\n    position: absolute;\n    inset: -2px;\n    background: radial-gradient(circle at 20% 30%, rgba(251,146,60,0.22), transparent 55%),\n                radial-gradient(circle at 85% 35%, rgba(99,102,241,0.20), transparent 52%),\n                radial-gradient(circle at 55% 85%, rgba(34,211,238,0.16), transparent 55%);\n    pointer-events: none;\n  }\n\n  .btc-hero-badges { display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom: 1rem; position:relative; z-index:2; }\n  .btc-pill {\n    display:inline-flex; align-items:center; gap:0.5rem;\n    padding: 0.4rem 0.75rem; border-radius: 999px;\n    border: 1px solid rgba(255,255,255,0.14);\n    background: rgba(255,255,255,0.06);\n    font-weight: 750; font-size: 0.85rem;\n  }\n  .btc-pill-alt { background: rgba(255,255,255,0.04); }\n  .btc-pill-dot {\n    width: 10px; height: 10px; border-radius: 999px;\n    background: radial-gradient(circle at 30% 30%, rgba(251,146,60,1), rgba(34,211,238,1));\n    box-shadow: 0 0 0 4px rgba(251,146,60,0.12);\n  }\n\n  .btc-hero-title { font-size: 2.8rem; font-weight: 900; margin: 0; letter-spacing: 0.02em; position: relative; z-index: 2; }\n  .btc-hero-tagline { font-size: 1.15rem; font-weight: 700; margin: 0.6rem 0 1.5rem; letter-spacing: 0.10em; text-transform: uppercase; opacity: 0.92; position: relative; z-index: 2; }\n  .btc-hero-text { font-size: 1.03rem; line-height: 1.75; margin-bottom: 1.4rem; color: rgba(234,242,255,0.88); position: relative; z-index: 2; }\n\n  .btc-hero-cta { display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; position: relative; z-index: 2; }\n\n  .btc-hero-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0.9rem 1.25rem;\n    border-radius: 999px;\n    background: radial-gradient(circle at 20% 20%, rgba(251,146,60,1), rgba(249,115,22,1));\n    font-weight: 850;\n    text-decoration: none;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    border: 1px solid rgba(255,255,255,0.10);\n    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);\n    transition: transform 0.15s ease, filter 0.15s ease;\n  }\n  .btc-hero-button:hover { transform: translateY(-2px); filter: brightness(1.05); }\n\n  .btc-hero-mini { margin-top: 1.35rem; display:grid; grid-template-columns: 1fr 1.25fr; gap: 1rem; position:relative; z-index:2; }\n\n  .btc-mini-left { display:grid; grid-template-columns: 1fr; gap: 0.75rem; }\n  .btc-stat {\n    background: rgba(255,255,255,0.05);\n    border: 1px solid rgba(255,255,255,0.10);\n    border-radius: 1rem;\n    padding: 0.9rem 1rem;\n  }\n  .btc-stat-k { font-size: 0.8rem; opacity: 0.7; letter-spacing: 0.08em; text-transform: uppercase; }\n  .btc-stat-v { font-size: 1.1rem; font-weight: 900; margin-top: 0.25rem; }\n\n  .btc-quick-card {\n    background: rgba(255,255,255,0.05);\n    border: 1px solid rgba(255,255,255,0.10);\n    border-radius: 1rem;\n    padding: 0.9rem 1rem;\n  }\n  .btc-quick-head { display:flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.75rem; }\n  .btc-quick-label { font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; }\n  .btc-quick-sub { opacity: 0.75; font-weight: 700; }\n\n  .btc-quick-actions { display:flex; flex-direction: column; gap: 0.55rem; }\n  .btc-quick-hint { margin-top: 0.65rem; opacity: 0.7; font-size: 0.9rem; }\n\n  .btc-ripple-layer { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }\n  .btc-ripple {\n    position: absolute;\n    width: 14px; height: 14px;\n    border-radius: 999px;\n    transform: translate(-50%, -50%);\n    border: 1px solid rgba(255,255,255,0.25);\n    box-shadow: 0 0 0 6px rgba(34,211,238,0.12);\n    animation: btcRipple 900ms ease-out forwards;\n    mix-blend-mode: screen;\n  }\n  @keyframes btcRipple {\n    from { opacity: 0.9; width: 14px; height: 14px; filter: blur(0px); }\n    to   { opacity: 0; width: 460px; height: 460px; filter: blur(1px); }\n  }\n\n  \/* Sections *\/\n  .btc-section { padding: 4.25rem 0; }\n  .btc-section-alt { background: rgba(255,255,255,0.03); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }\n  .btc-section-head { margin-bottom: 1.6rem; }\n  .btc-section-head-row { display:flex; gap:1rem; align-items:flex-end; justify-content: space-between; flex-wrap: wrap; }\n  .btc-h { font-size: 1.9rem; margin: 0; font-weight: 950; letter-spacing: 0.01em; }\n  .btc-sub { margin: 0.5rem 0 0; opacity: 0.85; line-height: 1.7; max-width: 70ch; }\n\n  \/* About cards *\/\n  .btc-cards { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }\n  .btc-card {\n    background: rgba(255,255,255,0.05);\n    border: 1px solid rgba(255,255,255,0.10);\n    border-radius: 1.25rem;\n    padding: 1.25rem 1.2rem;\n    box-shadow: 0 18px 45px rgba(0,0,0,0.20);\n    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;\n  }\n  .btc-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }\n  .btc-card-top { display:flex; align-items:center; gap: 0.75rem; margin-bottom: 0.45rem; }\n  .btc-icon {\n    width: 40px; height: 40px; border-radius: 14px;\n    display:flex; align-items:center; justify-content:center;\n    background: radial-gradient(circle at 20% 20%, rgba(251,146,60,0.55), rgba(99,102,241,0.40));\n    border: 1px solid rgba(255,255,255,0.10);\n  }\n  .btc-card h4 { margin:0; font-size: 1.1rem; font-weight: 900; }\n  .btc-card p { margin: 0.55rem 0 0.85rem; opacity: 0.88; line-height: 1.7; }\n\n  .btc-link {\n    background: transparent;\n    border: 0;\n    padding: 0;\n    color: rgba(34,211,238,0.95);\n    font-weight: 850;\n    cursor: pointer;\n    text-align: left;\n  }\n  .btc-link:hover { text-decoration: underline; }\n\n  \/* Theme filters *\/\n  .btc-filters { display:flex; gap: 0.5rem; flex-wrap: wrap; }\n  .btc-filter {\n    border-radius: 999px;\n    padding: 0.55rem 0.8rem;\n    border: 1px solid rgba(255,255,255,0.12);\n    background: rgba(255,255,255,0.05);\n    font-weight: 850;\n    cursor: pointer;\n    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;\n  }\n  .btc-filter:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.18); }\n  .btc-filter.is-active {\n    background: radial-gradient(circle at 20% 20%, rgba(34,211,238,0.28), rgba(99,102,241,0.20));\n    border-color: rgba(255,255,255,0.18);\n  }\n\n  .btc-grid-cards { display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }\n  .btc-theme-card {\n    grid-column: span 4;\n    background: rgba(255,255,255,0.05);\n    border: 1px solid rgba(255,255,255,0.10);\n    border-radius: 1.25rem;\n    padding: 1.25rem 1.2rem;\n    position: relative;\n    overflow: hidden;\n    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;\n    cursor: pointer;\n  }\n  .btc-theme-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); }\n  .btc-theme-card::before {\n    content:\"\";\n    position:absolute;\n    inset:-2px;\n    background: radial-gradient(420px 260px at 20% 15%, rgba(251,146,60,0.18), transparent 60%),\n                radial-gradient(420px 260px at 85% 25%, rgba(99,102,241,0.16), transparent 60%),\n                radial-gradient(420px 260px at 55% 95%, rgba(34,211,238,0.12), transparent 60%);\n    pointer-events:none;\n  }\n  .btc-theme-card > * { position: relative; z-index: 2; }\n\n  .btc-theme-top { display:flex; align-items:center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; }\n  .btc-chip2 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 900; opacity: 0.85; }\n  .btc-theme-ic {\n    width: 38px; height: 38px;\n    border-radius: 14px;\n    display:flex; align-items:center; justify-content:center;\n    border: 1px solid rgba(255,255,255,0.10);\n    background: rgba(255,255,255,0.06);\n  }\n  .btc-theme-card h4 { margin: 0.25rem 0 0.45rem; font-size: 1.2rem; font-weight: 950; }\n  .btc-theme-card p { margin: 0 0 0.95rem; opacity: 0.88; line-height: 1.7; }\n  .btc-minirow { display:flex; gap: 0.55rem; flex-wrap: wrap; }\n  .btc-tag {\n    border: 1px solid rgba(255,255,255,0.12);\n    background: rgba(255,255,255,0.04);\n    border-radius: 999px;\n    padding: 0.35rem 0.6rem;\n    font-weight: 850;\n    opacity: 0.9;\n    font-size: 0.85rem;\n  }\n\n  .btc-center { margin-top: 1.25rem; display:flex; justify-content: center; }\n\n  \/* Player promo cards *\/\n  .btc-player { display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }\n  .btc-player-left { grid-column: span 6; }\n  .btc-player-right { grid-column: span 6; }\n\n  .btc-player-card {\n    background: rgba(255,255,255,0.05);\n    border: 1px solid rgba(255,255,255,0.10);\n    border-radius: 1.25rem;\n    padding: 1.25rem 1.2rem;\n    box-shadow: 0 18px 45px rgba(0,0,0,0.18);\n  }\n  .btc-player-card-alt {\n    background: radial-gradient(circle at 20% 20%, rgba(34,211,238,0.10), rgba(99,102,241,0.08)),\n                rgba(255,255,255,0.05);\n  }\n  .btc-player-card h4 { margin: 0; font-size: 1.25rem; font-weight: 950; }\n  .btc-player-card p { margin: 0.55rem 0 1rem; opacity: 0.86; line-height: 1.7; }\n  .btc-player-actions { display:flex; gap: 0.6rem; flex-wrap: wrap; }\n  .btc-mini-note { margin-top: 0.75rem; opacity: 0.75; font-weight: 750; word-break: break-word; }\n\n  \/* Newsletter *\/\n  .btc-cta {\n    display:flex;\n    gap: 1.25rem;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    background: rgba(255,255,255,0.05);\n    border: 1px solid rgba(255,255,255,0.10);\n    border-radius: 1.25rem;\n    padding: 1.5rem 1.25rem;\n    box-shadow: 0 18px 45px rgba(0,0,0,0.18);\n  }\n  .btc-cta-text h3 { margin: 0; font-size: 1.4rem; font-weight: 950; }\n  .btc-cta-text p { margin: 0.55rem 0 0; opacity: 0.85; line-height: 1.7; max-width: 70ch; }\n\n  .btc-form { min-width: min(420px, 100%); }\n  .btc-label { display:block; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; opacity: 0.8; }\n  .btc-form-row { display:flex; gap: 0.6rem; margin-top: 0.5rem; flex-wrap: wrap; }\n  .btc-input {\n    flex: 1 1 220px;\n    border-radius: 999px;\n    border: 1px solid rgba(255,255,255,0.12);\n    background: rgba(0,0,0,0.25);\n    color: rgba(234,242,255,0.95);\n    padding: 0.75rem 0.95rem;\n    outline: none;\n  }\n  .btc-input::placeholder { color: rgba(234,242,255,0.55); }\n  .btc-form-foot { margin-top: 0.55rem; opacity: 0.75; }\n\n  \/* Footer *\/\n  .btc-footer { padding: 2.25rem 0 2.75rem; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.12); }\n  .btc-footer-inner { display:flex; align-items:center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }\n  .btc-footer-left { display:flex; flex-direction: column; gap: 0.35rem; opacity: 0.9; }\n  .btc-footer-left span { opacity: 0.75; }\n  .btc-footer-right { display:flex; gap: 0.75rem; align-items:center; flex-wrap: wrap; }\n  .btc-footlink { color: rgba(234,242,255,0.9); text-decoration: none; font-weight: 850; border: 0; background: transparent; cursor: pointer; padding: 0.25rem 0.35rem; }\n  .btc-footlink:hover { text-decoration: underline; }\n\n  \/* Drawer *\/\n  .btc-drawer { position: fixed; inset: 0; z-index: 60; display:none; }\n  .btc-drawer.is-open { display:block; }\n  .btc-drawer-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); }\n  .btc-drawer-panel {\n    position:absolute;\n    right: 1rem;\n    top: 1rem;\n    width: min(420px, calc(100% - 2rem));\n    border-radius: 1.25rem;\n    background: rgba(15, 15, 20, 0.92);\n    border: 1px solid rgba(255,255,255,0.12);\n    box-shadow: 0 28px 90px rgba(0,0,0,0.55);\n    overflow: hidden;\n  }\n  .btc-drawer-head { display:flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.10); }\n  .btc-drawer-head strong { font-weight: 950; }\n  .btc-muted { display:block; opacity: 0.7; margin-top: 0.15rem; }\n  .btc-x {\n    width: 38px; height: 38px;\n    border-radius: 12px;\n    border: 1px solid rgba(255,255,255,0.12);\n    background: rgba(255,255,255,0.05);\n    font-size: 1.25rem;\n    cursor:pointer;\n  }\n  .btc-drawer-body { padding: 1rem; display:flex; flex-direction: column; gap: 0.65rem; }\n\n  .btc-action {\n    display:flex;\n    gap: 0.75rem;\n    align-items: center;\n    text-align:left;\n    padding: 0.85rem 0.85rem;\n    border-radius: 1.1rem;\n    border: 1px solid rgba(255,255,255,0.12);\n    background: rgba(255,255,255,0.05);\n    cursor:pointer;\n    text-decoration: none;\n    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;\n  }\n  .btc-action:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); }\n  .btc-action-ic {\n    width: 44px; height: 44px;\n    border-radius: 16px;\n    display:flex; align-items:center; justify-content:center;\n    background: radial-gradient(circle at 20% 20%, rgba(34,211,238,0.30), rgba(99,102,241,0.20));\n    border: 1px solid rgba(255,255,255,0.10);\n  }\n  .btc-action strong { display:block; font-weight: 950; }\n  .btc-action em { display:block; font-style: normal; opacity: 0.75; margin-top: 0.15rem; }\n\n  .btc-divider { height: 1px; background: rgba(255,255,255,0.10); margin: 0.35rem 0; }\n  .btc-small p { margin: 0.45rem 0 0; opacity: 0.85; line-height: 1.7; }\n\n  \/* Toast *\/\n  .btc-toast {\n    position: fixed;\n    left: 50%;\n    bottom: 18px;\n    transform: translateX(-50%);\n    z-index: 80;\n    padding: 0.75rem 1rem;\n    border-radius: 999px;\n    border: 1px solid rgba(255,255,255,0.14);\n    background: rgba(15, 15, 20, 0.92);\n    box-shadow: 0 22px 60px rgba(0,0,0,0.45);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 180ms ease, transform 180ms ease;\n    max-width: min(720px, calc(100% - 2rem));\n    text-align: center;\n  }\n  .btc-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(-6px); }\n\n  \/* Theme variants *\/\n  .btc.is-ember .btc-bg {\n    background: radial-gradient(1200px 700px at 18% 12%, rgba(251, 146, 60, 0.30), transparent 60%),\n                radial-gradient(900px 650px at 82% 24%, rgba(244, 63, 94, 0.22), transparent 55%),\n                radial-gradient(900px 700px at 55% 88%, rgba(250, 204, 21, 0.16), transparent 55%),\n                linear-gradient(180deg, #07060d, #07060d);\n  }\n  .btc.is-ember .btc-chip-dot {\n    background: radial-gradient(circle at 30% 30%, rgba(251,146,60,1), rgba(250,204,21,1));\n    box-shadow: 0 0 0 4px rgba(251,146,60,0.15);\n  }\n\n  .btc.is-calm .btc-orb,\n  .btc.is-calm .btc-grid,\n  .btc.is-calm .btc-noise { animation: none !important; }\n  .btc.is-calm .btc-spark { display:none; }\n\n  \/* Responsive *\/\n  @media (max-width: 980px) {\n    .btc-cards { grid-template-columns: 1fr; }\n    .btc-theme-card { grid-column: span 6; }\n    .btc-hero-mini { grid-template-columns: 1fr; }\n    .btc-top-inner { gap: 0.75rem; }\n    .btc-nav { display:none; }\n    .btc-player-left, .btc-player-right { grid-column: span 12; }\n  }\n  @media (max-width: 640px) {\n    .btc-hero { min-height: 88vh; }\n    .btc-hero-title { font-size: 2.15rem; }\n    .btc-hero-tagline { font-size: 0.95rem; }\n    .btc-theme-card { grid-column: span 12; }\n    .btc-hero-card { padding: 2.1rem 1.3rem; }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .btc-orb { animation: none !important; }\n    .btc-spark { display:none !important; }\n    .btc-card, .btc-theme-card, .btc-btn, .btc-nav-link, .btc-filter { transition: none !important; }\n  }\n  \n  \/* =========================================================\n   \u2705 TEXT COLOR PATCH (forces any lingering black text to light)\n   Paste at the END of your existing <style> block.\n   Keeps the same look, just guarantees readable text.\n========================================================= *\/\n\n#btc-home.btc,\n#btc-home.btc * {\n  color: rgba(234, 242, 255, 0.92);\n}\n\n\/* Preserve intentional accent colors *\/\n#btc-home.btc .btc-link,\n#btc-home.btc .btc-link * {\n  color: rgba(34,211,238,0.95) !important;\n}\n\n#btc-home.btc .btc-btn,\n#btc-home.btc .btc-btn *,\n#btc-home.btc .btc-hero-button,\n#btc-home.btc .btc-hero-button *,\n#btc-home.btc .btc-filter,\n#btc-home.btc .btc-filter *,\n#btc-home.btc .btc-action,\n#btc-home.btc .btc-action * {\n  color: rgba(255,255,255,0.96) !important;\n}\n\n\/* Keep \u201cmuted\/secondary\u201d text feeling muted (but still light) *\/\n#btc-home.btc .btc-sub,\n#btc-home.btc .btc-muted,\n#btc-home.btc .btc-quick-sub,\n#btc-home.btc .btc-hero-text {\n  color: rgba(234, 242, 255, 0.86) !important;\n}\n\n\/* Make the right column behave like the left column *\/\n.btc-mini-right{\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 0.75rem; \/* match btc-mini-left spacing *\/\n}\n\n\n<\/style>\n\n<script>\n  (function () {\n    const root = document.getElementById(\"btc-home\");\n    if (!root) return;\n\n    \/\/ ---------- Utilities ----------\n    const $ = (sel, el = document) => el.querySelector(sel);\n    const $$ = (sel, el = document) => Array.from(el.querySelectorAll(sel));\n\n    const toastEl = $(\"#btcToast\");\n    let toastTimer = null;\n    function toast(msg) {\n      if (!toastEl) return;\n      toastEl.textContent = msg;\n      toastEl.classList.add(\"is-show\");\n      clearTimeout(toastTimer);\n      toastTimer = setTimeout(() => toastEl.classList.remove(\"is-show\"), 2400);\n    }\n\n    function clamp(n, a, b) { return Math.max(a, Math.min(b, n)); }\n\n    \/\/ ---------- Footer year ----------\n    const yearEl = $(\"#btcYear\");\n    if (yearEl) yearEl.textContent = String(new Date().getFullYear());\n\n    \/\/ ---------- Smooth scroll for in-page anchors ----------\n    function smoothScrollToHash(hash) {\n      const target = document.querySelector(hash);\n      if (!target) return false;\n      target.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n      return true;\n    }\n\n    $$(\"a[data-scroll]\").forEach(a => {\n      a.addEventListener(\"click\", (e) => {\n        const href = a.getAttribute(\"href\");\n        if (!href || !href.startsWith(\"#\")) return; \/\/ not an in-page anchor\n        const ok = smoothScrollToHash(href);\n        if (ok) e.preventDefault();\n      });\n    });\n\n    \/\/ Buttons with data-jump\n    $$(\"[data-jump]\").forEach(btn => {\n      btn.addEventListener(\"click\", () => {\n        const hash = btn.getAttribute(\"data-jump\");\n        if (hash && hash.startsWith(\"#\")) smoothScrollToHash(hash);\n      });\n    });\n\n    \/\/ ---------- Theme toggle ----------\n    const themeBtn = $(\"#btcThemeBtn\");\n    const themeLabel = $(\"#btcThemeLabel\");\n    const THEMES = [\"glow\", \"ember\"];\n    let themeIdx = 0;\n\n    function applyTheme() {\n      root.classList.toggle(\"is-ember\", THEMES[themeIdx] === \"ember\");\n      if (themeLabel) themeLabel.textContent = THEMES[themeIdx] === \"ember\" ? \"Ember\" : \"Glow\";\n      if (themeBtn) themeBtn.setAttribute(\"aria-pressed\", String(THEMES[themeIdx] === \"ember\"));\n    }\n\n    if (themeBtn) {\n      themeBtn.addEventListener(\"click\", () => {\n        themeIdx = (themeIdx + 1) % THEMES.length;\n        applyTheme();\n        toast(\"Theme switched: \" + (THEMES[themeIdx] === \"ember\" ? \"Ember\" : \"Glow\"));\n      });\n    }\n    applyTheme();\n\n    \/\/ ---------- Calm mode ----------\n    function setCalm(on) {\n      root.classList.toggle(\"is-calm\", !!on);\n      toast(on ? \"Calm mode enabled.\" : \"Calm mode disabled.\");\n    }\n\n    \/\/ ---------- Drawer ----------\n    const drawer = $(\"#btcDrawer\");\n    const openCmd = $(\"#btcOpenCmd\");\n\n    function openDrawer() {\n      if (!drawer) return;\n      drawer.classList.add(\"is-open\");\n      drawer.setAttribute(\"aria-hidden\", \"false\");\n    }\n    function closeDrawer() {\n      if (!drawer) return;\n      drawer.classList.remove(\"is-open\");\n      drawer.setAttribute(\"aria-hidden\", \"true\");\n    }\n\n    if (openCmd) openCmd.addEventListener(\"click\", openDrawer);\n\n    if (drawer) {\n      drawer.addEventListener(\"click\", (e) => {\n        const t = e.target;\n        if (t && (t.matches(\"[data-close]\") || t.closest(\"[data-close]\"))) closeDrawer();\n\n        const actionBtn = e.target.closest(\"[data-action]\");\n        if (actionBtn) {\n          const action = actionBtn.getAttribute(\"data-action\");\n          if (action === \"shuffle\") {\n            shuffleThemes();\n            toast(\"Themes shuffled.\");\n          } else if (action === \"calm\") {\n            setCalm(!root.classList.contains(\"is-calm\"));\n          }\n        }\n      });\n\n      document.addEventListener(\"keydown\", (e) => {\n        if (e.key === \"Escape\") closeDrawer();\n      });\n    }\n\n    \/\/ ---------- Hero ripple interaction ----------\n    const rippleLayer = $(\"#btcRippleLayer\");\n    const heroCard = $(\"#btcHeroCard\");\n\n    function spawnRipple(clientX, clientY) {\n      if (!rippleLayer || !heroCard) return;\n      const rect = heroCard.getBoundingClientRect();\n      const x = clientX - rect.left;\n      const y = clientY - rect.top;\n\n      const r = document.createElement(\"div\");\n      r.className = \"btc-ripple\";\n\n      const palette = root.classList.contains(\"is-ember\")\n        ? [\"rgba(251,146,60,0.35)\", \"rgba(250,204,21,0.25)\", \"rgba(244,63,94,0.22)\"]\n        : [\"rgba(34,211,238,0.25)\", \"rgba(99,102,241,0.22)\", \"rgba(251,146,60,0.22)\"];\n\n      const c = palette[Math.floor(Math.random() * palette.length)];\n      r.style.background = \"radial-gradient(circle at 30% 30%, \" + c + \", rgba(0,0,0,0))\";\n\n      r.style.left = x + \"px\";\n      r.style.top = y + \"px\";\n      rippleLayer.appendChild(r);\n\n      setTimeout(() => r.remove(), 950);\n    }\n\n    if (heroCard) {\n      heroCard.addEventListener(\"click\", (e) => {\n        \/\/ avoid triggering if clicking on controls\n        const isControl = e.target.closest(\"a,button,input,label\");\n        if (isControl) return;\n        spawnRipple(e.clientX, e.clientY);\n      });\n    }\n\n    \/\/ ---------- Spark canvas (particles) ----------\n    const spark = $(\"#btcSpark\");\n    const prefersReduced = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n    let sparkCtx, sparkW = 0, sparkH = 0, sparkRAF = null;\n    const particles = [];\n\n    function resizeSpark() {\n      if (!spark) return;\n      const dpr = Math.max(1, Math.floor(window.devicePixelRatio || 1));\n      sparkW = spark.clientWidth;\n      sparkH = spark.clientHeight;\n      spark.width = sparkW * dpr;\n      spark.height = sparkH * dpr;\n      sparkCtx = spark.getContext(\"2d\");\n      sparkCtx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    }\n\n    function addParticle(x, y) {\n      const speed = root.classList.contains(\"is-calm\") ? 0.15 : 0.35;\n      particles.push({\n        x, y,\n        vx: (Math.random() - 0.5) * speed,\n        vy: (Math.random() - 0.7) * speed,\n        life: 1,\n        r: 1 + Math.random() * 2\n      });\n      if (particles.length > 120) particles.splice(0, particles.length - 120);\n    }\n\n    function tickSpark() {\n      if (!sparkCtx) return;\n      sparkCtx.clearRect(0, 0, sparkW, sparkH);\n\n      if (!root.classList.contains(\"is-calm\") && Math.random() < 0.18) {\n        addParticle(Math.random() * sparkW, Math.random() * sparkH);\n      }\n\n      const ember = root.classList.contains(\"is-ember\");\n\n      for (let i = particles.length - 1; i >= 0; i--) {\n        const p = particles[i];\n        p.x += p.vx * 6;\n        p.y += p.vy * 6;\n        p.life -= 0.012;\n\n        if (p.life <= 0) { particles.splice(i, 1); continue; }\n\n        const alpha = Math.max(0, p.life);\n        sparkCtx.globalAlpha = alpha * 0.55;\n\n        sparkCtx.beginPath();\n        sparkCtx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\n\n        sparkCtx.fillStyle = ember\n          ? (Math.random() < 0.5 ? \"rgba(251,146,60,1)\" : \"rgba(250,204,21,1)\")\n          : (Math.random() < 0.5 ? \"rgba(34,211,238,1)\" : \"rgba(99,102,241,1)\");\n\n        sparkCtx.fill();\n      }\n\n      sparkCtx.globalAlpha = 1;\n      sparkRAF = requestAnimationFrame(tickSpark);\n    }\n\n    function startSpark() {\n      if (!spark || prefersReduced) return;\n      resizeSpark();\n      if (sparkRAF) cancelAnimationFrame(sparkRAF);\n      sparkRAF = requestAnimationFrame(tickSpark);\n    }\n\n    if (spark && !prefersReduced) {\n      window.addEventListener(\"resize\", resizeSpark);\n      startSpark();\n    }\n\n    \/\/ ---------- Toast notes ----------\n    $$(\"[data-toast]\").forEach(btn => {\n      btn.addEventListener(\"click\", () => {\n        const msg = btn.getAttribute(\"data-toast\") || \"\";\n        if (msg) toast(msg);\n      });\n    });\n\n    \/\/ ---------- Hero mini words rotation ----------\n    const focusWord = $(\"#btcFocusWord\");\n    const themeWord = $(\"#btcThemeWord\");\n    const toneWord = $(\"#btcToneWord\");\n\n    const focusWords = [\"Recovery\", \"Renewal\", \"Community\", \"Truth\", \"Transformation\", \"Discipline\"];\n    const themeWords = [\"Faith\", \"Leadership\", \"Mental Health\", \"Reentry\", \"Resilience\", \"Service\"];\n    const toneWords  = [\"Hope\", \"Honesty\", \"Strength\", \"Clarity\", \"Grace\", \"Courage\"];\n\n    let wordIdx = 0;\n    setInterval(() => {\n      if (root.classList.contains(\"is-calm\")) return;\n      wordIdx = (wordIdx + 1) % focusWords.length;\n      if (focusWord) focusWord.textContent = focusWords[wordIdx];\n      if (themeWord) themeWord.textContent = themeWords[wordIdx % themeWords.length];\n      if (toneWord) toneWord.textContent = toneWords[wordIdx % toneWords.length];\n    }, 2600);\n\n    \/\/ ---------- Theme grid (filter + shuffle) ----------\n    const themeGrid = $(\"#btcThemeGrid\");\n    const themes = [\n      { key: \"recovery\", icon: \"\ud83e\udded\", title: \"Recovery Journeys\", desc: \"Stories of relapse, return, and rebuilding - with practical lessons and real-world hope.\", tags: [\"testimony\", \"community\", \"discipline\"] },\n      { key: \"faith\", icon: \"\u271d\", title: \"Faith & Renewal\", desc: \"Spiritual formation, accountability, and meaning - explored with sincerity and depth.\", tags: [\"purpose\", \"formation\", \"grace\"] },\n      { key: \"leadership\", icon: \"\ud83d\udee1\", title: \"Leadership Under Pressure\", desc: \"Leading people through complexity - recovery leadership, nonprofit leadership, and personal leadership.\", tags: [\"service\", \"integrity\", \"vision\"] },\n      { key: \"mentalhealth\", icon: \"\ud83e\udde0\", title: \"Mental Health & Healing\", desc: \"Trauma, coping tools, resilience, and practical frameworks that support stable recovery.\", tags: [\"trauma\", \"skills\", \"stability\"] },\n      { key: \"recovery\", icon: \"\ud83d\udd25\", title: \"Structure & Habits\", desc: \"Routines, mentorship, and patterns - building guardrails for the long haul.\", tags: [\"habits\", \"mentorship\", \"structure\"] },\n      { key: \"faith\", icon: \"\ud83d\udd6f\", title: \"Identity & Calling\", desc: \"From shame to purpose - learning to live from a renewed identity rather than a broken past.\", tags: [\"identity\", \"calling\", \"growth\"] }\n    ];\n\n    function renderThemes(list) {\n      if (!themeGrid) return;\n      themeGrid.innerHTML = \"\";\n      list.forEach(item => {\n        const card = document.createElement(\"article\");\n        card.className = \"btc-theme-card\";\n        card.setAttribute(\"data-key\", item.key);\n\n        card.innerHTML = `\n          <div class=\"btc-theme-top\">\n            <span class=\"btc-chip2\">${item.key}<\/span>\n            <span class=\"btc-theme-ic\" aria-hidden=\"true\">${item.icon}<\/span>\n          <\/div>\n          <h4>${item.title}<\/h4>\n          <p>${item.desc}<\/p>\n          <div class=\"btc-minirow\">\n            ${item.tags.map(t => `<span class=\"btc-tag\">${t}<\/span>`).join(\"\")}\n          <\/div>\n        `;\n\n        \/\/ click shows toast + offers route to player page\n        card.addEventListener(\"click\", () => {\n          toast(item.title + \" \u2014 Open the player page for episodes.\");\n        });\n\n        themeGrid.appendChild(card);\n      });\n    }\n\n    function shuffleArray(arr) {\n      for (let i = arr.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n        [arr[i], arr[j]] = [arr[j], arr[i]];\n      }\n      return arr;\n    }\n\n    function shuffleThemes() {\n      shuffleArray(themes);\n      renderThemes(themes);\n    }\n\n    renderThemes(themes);\n\n    const filterBtns = $$(\".btc-filter\", root);\n    filterBtns.forEach(btn => {\n      btn.addEventListener(\"click\", () => {\n        filterBtns.forEach(b => b.classList.remove(\"is-active\"));\n        btn.classList.add(\"is-active\");\n        const f = btn.getAttribute(\"data-filter\");\n        if (!f || f === \"all\") return renderThemes(themes);\n        renderThemes(themes.filter(t => t.key === f));\n      });\n    });\n\n    \/\/ ---------- Newsletter demo ----------\n    const form = $(\"#btcForm\");\n    const email = $(\"#btcEmail\");\n    const formFoot = $(\"#btcFormFoot\");\n\n    if (form) {\n      form.addEventListener(\"submit\", (e) => {\n        e.preventDefault();\n        const v = (email && email.value || \"\").trim();\n        if (!v) return;\n        if (formFoot) formFoot.textContent = \"Thanks. You are on the list (demo).\";\n        toast(\"Subscribed (demo): \" + v);\n        form.reset();\n      });\n    }\n\n    \/\/ ---------- Copy player link ----------\n    const copyBtn = $(\"#btcCopyPlayerLink\");\n    const copyNote = $(\"#btcCopyNote\");\n    const PLAYER_URL = \"https:\/\/behindthecitgo.com\/?page_id=32\";\n\n    if (copyBtn) {\n      copyBtn.addEventListener(\"click\", async () => {\n        try {\n          await navigator.clipboard.writeText(PLAYER_URL);\n          toast(\"Player link copied.\");\n          if (copyNote) copyNote.textContent = \"Copied: \" + PLAYER_URL;\n        } catch (err) {\n          \/\/ Fallback if clipboard not allowed\n          toast(\"Copy blocked by browser. Link shown below.\");\n          if (copyNote) copyNote.textContent = PLAYER_URL;\n        }\n      });\n    }\n\n    \/\/ ---------- Pick a theme ----------\n    const pickThemeBtn = $(\"#btcPickTheme\");\n    const pickNote = $(\"#btcThemePickNote\");\n    if (pickThemeBtn) {\n      pickThemeBtn.addEventListener(\"click\", () => {\n        const t = themes[Math.floor(Math.random() * themes.length)];\n        if (pickNote) pickNote.textContent = \"Suggested theme: \" + t.title + \" (\" + t.key + \")\";\n        toast(\"Suggested: \" + t.title);\n      });\n    }\n\n    \/\/ ---------- Accessibility ----------\n    const accBtn = $(\"#btcAccessibilityBtn\");\n    if (accBtn) accBtn.addEventListener(\"click\", () => setCalm(!root.classList.contains(\"is-calm\")));\n  })();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Behind the Citgo The Unseen World of Addiction Step into a space where authentic stories of recovery and renewal are brought forward with honesty and depth. Behind the Citgo explores journeys shaped by struggle, strengthened by faith, and restored through community &#8211; offering wisdom, insight, and hope to every listener. Select episodes also feature leading [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/behindthecitgo.com\/index.php?rest_route=\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/behindthecitgo.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/behindthecitgo.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/behindthecitgo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/behindthecitgo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17"}],"version-history":[{"count":58,"href":"https:\/\/behindthecitgo.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":313,"href":"https:\/\/behindthecitgo.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions\/313"}],"wp:attachment":[{"href":"https:\/\/behindthecitgo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}