* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #050208; color: white; font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }

/* HOME PAGE */
.homepage { width: 100%; background: #050208; }
.stage { position: relative; width: min(100vw, 1536px); margin: 0 auto; }
.stage img { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; display: block; text-decoration: none; border-radius: 999px; z-index: 5; }
.nav-home{left:25.75%;top:10.25%;width:4.25%;height:3.25%}.nav-about{left:31.55%;top:10.25%;width:4.75%;height:3.25%}.nav-featured{left:38.55%;top:10.25%;width:11.95%;height:3.25%}.nav-events{left:52.80%;top:10.25%;width:5.10%;height:3.25%}.nav-media{left:60.70%;top:10.25%;width:4.60%;height:3.25%}.nav-contact{left:68.20%;top:10.25%;width:5.65%;height:3.25%}.youtube{left:78.30%;top:8.80%;width:2.90%;height:4.40%}.instagram{left:82.25%;top:8.80%;width:2.90%;height:4.40%}.facebook{left:86.15%;top:8.80%;width:2.90%;height:4.40%}.tiktok{left:90.05%;top:8.80%;width:2.90%;height:4.40%}.email{left:93.95%;top:8.80%;width:2.90%;height:4.40%}.join-community{left:4.10%;top:63.70%;width:19.35%;height:6.20%}.watch-video{left:25.00%;top:63.85%;width:14.50%;height:6.00%}
.content-section { max-width: 980px; margin: 0 auto; padding: 70px 24px; border-top: 1px solid rgba(216,165,58,.25); }
.content-section h1 { color: #f1c232; margin: 0 0 12px; }
.content-section p { color: #eee5ff; font-size: 1.1rem; line-height: 1.6; }

/* SHARED SITE NAV */
.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px clamp(18px, 5vw, 70px); background: rgba(5,2,8,.94); border-bottom: 1px solid rgba(241,194,50,.25); backdrop-filter: blur(12px); }
.brand { text-decoration: none; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.35rem, 2vw, 1.8rem); color: #f1c232; letter-spacing: .035em; white-space: nowrap; }
.brand span { color: #fff; }
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; }
.site-nav a { text-decoration: none; color: #f5efff; opacity: .88; }
.site-nav a.active, .site-nav a:hover { color: #f1c232; opacity: 1; }

/* ABOUT PAGE */
.about-hero-clean { min-height: 620px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: clamp(28px, 6vw, 76px); align-items: center; padding: clamp(58px, 7vw, 96px) clamp(22px, 6vw, 96px); background: radial-gradient(circle at 83% 20%, rgba(156, 46, 201, .32), transparent 35%), linear-gradient(135deg, #050208 0%, #13041b 58%, #050208 100%); border-bottom: 1px solid rgba(241,194,50,.22); overflow: hidden; }
.about-hero-copy { max-width: 720px; }
.eyebrow { color: #f1c232; text-transform: uppercase; letter-spacing: .18em; font-size: .82rem; font-weight: 800; margin: 0 0 12px; }
h1, h2, h3 { margin-top: 0; }
h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .96; margin-bottom: 24px; text-shadow: 0 8px 28px rgba(0,0,0,.35); }
h2 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; margin-bottom: 18px; }
h3 { color: #f1c232; margin-bottom: 10px; font-size: 1.2rem; }
p { line-height: 1.72; color: #eee5ff; font-size: 1.06rem; }
.hero-lead { max-width: 660px; font-size: clamp(1.05rem, 1.7vw, 1.25rem); }
.about-photo-card { margin: 0; position: relative; padding: 12px; border: 1px solid rgba(241,194,50,.42); border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); box-shadow: 0 0 48px rgba(165, 36, 220, .32), 0 18px 60px rgba(0,0,0,.35); }
.about-photo-card::before { content:""; position:absolute; inset:-18px; z-index:-1; background: radial-gradient(circle, rgba(216,76,255,.25), transparent 65%); }
.about-photo-card img { display: block; width: 100%; height: auto; border-radius: 22px; }
.gold-button, .purple-button { display: inline-block; margin-top: 18px; padding: 14px 24px; border-radius: 999px; text-decoration: none; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.gold-button { background: #f1c232; color: #16041f; box-shadow: 0 10px 32px rgba(241,194,50,.22); }
.purple-button { background: linear-gradient(135deg, #7d1bb2, #d84cff); color: #fff; box-shadow: 0 10px 32px rgba(216,76,255,.22); }
.section-wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: clamp(68px, 8vw, 104px) 0; }
.about-story { display: grid; grid-template-columns: minmax(250px, 360px) minmax(0, 1fr); gap: clamp(30px, 6vw, 76px); align-items: start; }
.section-label { position: sticky; top: 110px; }
.story-copy { background: rgba(255,255,255,.035); border: 1px solid rgba(241,194,50,.18); border-radius: 28px; padding: clamp(24px, 4vw, 42px); }
.story-copy p:first-child { margin-top: 0; }
.story-copy p:last-child { margin-bottom: 0; }
.story-copy strong, .note-box strong { color: #fff; }
.belief-section { background: linear-gradient(180deg, #09020f, #16041f); border-top: 1px solid rgba(241,194,50,.24); border-bottom: 1px solid rgba(241,194,50,.24); }
.centered { text-align: center; }
.section-lead { max-width: 720px; margin: 0 auto 38px; }
.belief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left; }
.belief-card { padding: 26px; min-height: 250px; border: 1px solid rgba(216,76,255,.34); border-radius: 24px; background: rgba(255,255,255,.048); box-shadow: 0 18px 42px rgba(0,0,0,.22); }
.belief-card span { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 999px; background: rgba(241,194,50,.15); border: 1px solid rgba(241,194,50,.5); font-size: 1.65rem; margin-bottom: 18px; }
.belief-card p { margin-bottom: 0; }
.growth-note { display: grid; grid-template-columns: minmax(250px, 350px) minmax(0, 1fr); gap: clamp(30px, 6vw, 70px); align-items: start; }
.note-box { border-left: 4px solid #f1c232; padding: clamp(24px, 4vw, 36px); background: rgba(255,255,255,.045); border-radius: 0 24px 24px 0; }
.note-box p:first-child { margin-top: 0; }
.note-box p:last-child { margin-bottom: 0; }
.join-section { text-align: center; padding: clamp(72px, 9vw, 110px) 24px; background: radial-gradient(circle at center, rgba(132,25,176,.45), rgba(5,2,8,1) 72%); }
.join-section h2 { margin-bottom: 10px; }
.join-section p { max-width: 680px; margin-left: auto; margin-right: auto; }

@media (max-width: 980px) {
  .site-header { position: static; align-items: flex-start; flex-direction: column; }
  .site-nav { justify-content: flex-start; }
  .about-hero-clean { grid-template-columns: 1fr; min-height: auto; }
  .about-photo-card { max-width: 560px; }
  .belief-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-label { position: static; }
  .about-story, .growth-note { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .site-header { padding: 16px 18px; }
  .site-nav { gap: 12px; font-size: .76rem; }
  .about-hero-clean { padding: 48px 18px 56px; }
  h1 { font-size: clamp(2.35rem, 14vw, 4rem); }
  .section-wrap { width: min(100% - 28px, 1120px); }
  .belief-grid { grid-template-columns: 1fr; }
  .belief-card { min-height: auto; }
  .story-copy { padding: 24px; }
}



/* === Top social icon glow === */
.hotspot.youtube,
.hotspot.instagram,
.hotspot.facebook,
.hotspot.tiktok,
.hotspot.email{
  border-radius:50%;
  transition:all .25s ease;
}
.hotspot.youtube:hover,
.hotspot.instagram:hover,
.hotspot.facebook:hover,
.hotspot.tiktok:hover,
.hotspot.email:hover{
  background:rgba(241,194,50,.22);
  box-shadow:0 0 22px rgba(241,194,50,.95), inset 0 0 12px rgba(241,194,50,.35);
  transform:scale(1.12);
}


/* =========================================================
   CREATIVE DIRECTOR FACELIFT — RESPONSIVE POLISH
   Keeps the desktop image-map intact while improving mobile
   breathing room, touch comfort, support page styling, and flow.
   ========================================================= */

:root {
  --btb-black: #050208;
  --btb-deep-purple: #13041b;
  --btb-purple: #7d1bb2;
  --btb-magenta: #d84cff;
  --btb-gold: #f1c232;
  --btb-soft: #eee5ff;
  --btb-muted: #cfc0e8;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

/* Homepage polish */
.homepage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(132,25,176,.24), transparent 34%),
    var(--btb-black);
}

.stage {
  box-shadow: 0 20px 80px rgba(0,0,0,.32);
}

.hotspot {
  outline-offset: 4px;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.hotspot:focus-visible {
  outline: 2px solid var(--btb-gold);
  background: rgba(241,194,50,.18);
  box-shadow: 0 0 0 8px rgba(241,194,50,.12);
}

.join-community:hover,
.watch-video:hover {
  background: rgba(241,194,50,.16);
  box-shadow: 0 0 28px rgba(241,194,50,.44);
  transform: translateY(-1px);
}

.content-section {
  position: relative;
}

.content-section::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 24px;
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, var(--btb-gold), transparent);
}

.content-section a {
  color: var(--btb-gold);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.content-section a:hover {
  color: #fff;
}

/* Shared button refinement */
.gold-button,
.purple-button,
.mission-button {
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.gold-button:hover,
.purple-button:hover,
.mission-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

/* Support preview cards used on the homepage */
.support-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.support-preview-card {
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(241, 194, 50, 0.28);
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.support-preview-card h3 {
  margin: 0 0 8px;
  color: var(--btb-gold);
  font-size: 1.08rem;
}

.support-preview-card p {
  margin: 0;
  font-size: 0.98rem;
}

.support-disclaimer {
  margin-top: 32px;
  padding: 24px;
  border-left: 4px solid var(--btb-gold);
  border-radius: 0 22px 22px 0;
  background: rgba(241, 194, 50, 0.08);
}

.support-disclaimer strong {
  color: #fff;
}

.mission-link-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.mission-button {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--btb-gold);
  color: #16041f !important;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .055em;
  box-shadow: 0 10px 30px rgba(241, 194, 50, .2);
}

.mission-button.secondary {
  background: transparent;
  color: var(--btb-gold) !important;
  border: 1px solid rgba(241, 194, 50, 0.6);
  box-shadow: none;
}

.site-footer {
  padding: 36px 20px;
  text-align: center;
  color: var(--btb-muted);
  background: #050208;
  border-top: 1px solid rgba(241, 194, 50, 0.22);
}

.site-footer a {
  color: var(--btb-gold);
  text-decoration: none;
  font-weight: 700;
}

/* Support page */
.support-hero {
  min-height: 560px;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: hidden;
}

.support-hero h1 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.support-hero p:not(.eyebrow) {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.support-grid .belief-card {
  min-height: 275px;
}

.blessing-form-wrap {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.blessing-form {
  display: grid;
  gap: 14px;
}

.blessing-form label {
  color: #fff;
  font-weight: 800;
  letter-spacing: .035em;
}

.blessing-form label span,
.form-note {
  color: var(--btb-muted);
  font-weight: 400;
}

.blessing-form input,
.blessing-form textarea {
  width: 100%;
  border: 1px solid rgba(241,194,50,.34);
  border-radius: 16px;
  padding: 15px 16px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font: inherit;
}

.blessing-form textarea {
  resize: vertical;
}

.blessing-form input::placeholder,
.blessing-form textarea::placeholder {
  color: rgba(238,229,255,.62);
}

.blessing-form input:focus,
.blessing-form textarea:focus {
  outline: 2px solid rgba(241,194,50,.55);
  box-shadow: 0 0 22px rgba(241,194,50,.12);
}

.blessing-form button {
  border: 0;
  cursor: pointer;
  justify-self: start;
}

.form-note {
  margin: 0;
  font-size: .95rem;
}

/* Responsive behavior */
@media (max-width: 1180px) {
  .stage {
    width: 100vw;
  }
}

@media (max-width: 980px) {
  .content-section {
    max-width: 860px;
    padding: 76px 28px;
  }

  .support-preview-grid {
    grid-template-columns: 1fr;
  }

  .support-grid.belief-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .homepage {
    padding-bottom: 12px;
  }

  .stage {
    border-bottom: 1px solid rgba(241,194,50,.22);
  }

  /* Larger, easier tap zones for the image-map buttons on phones. */
  .hotspot {
    min-width: 34px;
    min-height: 28px;
  }

  .youtube,
  .instagram,
  .facebook,
  .tiktok,
  .email {
    min-width: 32px;
    min-height: 32px;
  }

  .join-community,
  .watch-video {
    min-height: 42px;
  }

  .content-section {
    padding: 82px 22px;
  }

  .content-section h1 {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }

  .content-section p {
    font-size: 1.04rem;
  }

  .site-nav a {
    padding: 7px 0;
  }

  .about-photo-card {
    max-width: 92vw;
    margin-left: auto;
    margin-right: auto;
  }

  .support-hero {
    min-height: auto;
    padding-top: 82px;
    padding-bottom: 88px;
  }

  .support-grid.belief-grid {
    grid-template-columns: 1fr;
  }

  .support-grid .belief-card {
    min-height: auto;
  }

  .mission-link-row {
    align-items: stretch;
    flex-direction: column;
  }

  .mission-button {
    text-align: center;
  }
}

@media (max-width: 520px) {
  body {
    background: linear-gradient(180deg, #050208 0%, #100317 55%, #050208 100%);
  }

  .stage {
    box-shadow: none;
  }

  .content-section {
    padding: 88px 20px;
  }

  .support-preview-card,
  .story-copy,
  .note-box,
  .belief-card {
    border-radius: 22px;
  }

  .note-box {
    border-left-width: 3px;
  }

  .gold-button,
  .purple-button,
  .mission-button {
    width: 100%;
    text-align: center;
  }

  .blessing-form button.gold-button {
    width: 100%;
  }
}