/* app.css — Theme tokens, components, and utilities (Bootstrap-friendly)
   - Colors read from :root (injected via site.json)
   - Minimal specificity; no !important on core styles
   - Smooth motion, reveal helpers, sticky navbar animation
*/

/* 1) Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0 ;
  padding: 0;
  border: 0;
text-decoration: none !important;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--ink, var(--text, #111));
  background: var(--background, #fff);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Typography helpers */
#main{
  padding: 0;
}

.display-hero {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 3vw+1rem, 3.5rem);
}
.lead {
  color: var(--muted, #5b6270);
  font-size: clamp(1.05rem, 0.5vw+1rem, 1.25rem);
}
.kicker {
  color: color-mix(in srgb, var(--brand) 55%, black);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* Focus ring */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand) 45%, transparent);
  border-radius: 0.35rem;
}

/* 2) Components */

/* Surfaces */
.surface {
  background: var(--surface, #f6f6f6);
}
.surface-alt {
  background: color-mix(in srgb, var(--surface) 85%, white);
}
.surface-contrast {
  background: color-mix(in srgb, var(--surface) 70%, black);
}

/* Buttons (Bootstrap-friendly) */
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--brand) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand) 75%, black);
}
.btn-outline-brand {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: color-mix(in srgb, var(--brand) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand) 75%, black);
}

/* Navbar sticky/compact */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
}
.site-header .navbar {
  padding-block: 1rem;
  background: var(--surface);
  backdrop-filter: none;
  transition: padding-block 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    background-color 0.25s, backdrop-filter 0.25s, box-shadow 0.25s;
}
.site-header .navbar.is-stuck,
.site-header .navbar.scrolled {
  padding-block: 0.5rem;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px hsl(0 0% 0% / 0.07);
}
.navbar-brand img {
  max-height: 70px;
  transition: max-height 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.site-header .navbar.is-stuck .navbar-brand img,
.site-header .navbar.scrolled .navbar-brand img {
  max-height: 56px;
}
#mainNav .nav-link.active {
  color: var(--brand);
  font-weight: 600;
  text-underline-offset: 0.4ch;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, var(--brand) 50%, transparent);
}

/* Hero background & overlay */
#hero {
  position: relative;
  min-height: clamp(60vh, 70vh, 85vh);
  isolation: isolate;
}
#hero .hero-bg,
#hero .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}
#hero .hero-overlay {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.35) 70%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--brand) 14%, transparent),
      transparent 65%
    );
}
#hero .container {
  position: relative;
  z-index: 1;
}

/* Cards */
.card-soft {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: var(--radius, 14px);
  box-shadow: 0 6px 20px hsl(0 0% 0% / 0.07);
  transition: transform 0.25s, box-shadow 0.25s;
}
.card-soft:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 44px hsl(0 0% 0% / 0.12);
}

/* Badges / chips */
.badge-accent {
  color: color-mix(in srgb, var(--accent) 25%, black);
  background: color-mix(in srgb, var(--accent) 18%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Link underline animation */
.link-anim {
  position: relative;
  text-decoration: none;
}
.link-anim::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}
.link-anim:hover::after {
  transform: scaleX(1);
}

/* 3) Utilities */

/* Section rhythm */
.section {
  padding-block: clamp(3rem, 6vw, 6rem);
}
.section-tight {
  padding-block: clamp(2rem, 4vw, 4rem);
}

/* Color helpers */
.text-brand {
  color: var(--brand);
}
.text-accent {
  color: var(--accent);
}
.bg-brand {
  background: var(--brand);
  color: #fff;
}
.bg-accent {
  background: var(--accent);
  color: #1a1a1a;
}
.bg-surface {
  background: var(--surface);
}

/* Gradients with brand/accent */
.bg-gradient-brand {
  background-image: radial-gradient(
      60% 60% at 10% 0%,
      color-mix(in srgb, var(--brand) 18%, transparent),
      transparent
    ),
    radial-gradient(
      40% 40% at 90% 10%,
      color-mix(in srgb, var(--accent) 20%, transparent),
      transparent
    );
}
.text-gradient-brand {
  background: linear-gradient(
    90deg,
    var(--brand),
    color-mix(in srgb, var(--brand) 60%, var(--accent))
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Schemes for quick contrast */
.scheme-brand {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand) 12%, white),
    var(--surface)
  );
}
.scheme-accent {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 16%, white),
    #fff
  );
}
.scheme-neutral {
  background: var(--surface);
}
.scheme-brand h1,
.scheme-brand h2,
.scheme-brand h3 {
  color: color-mix(in srgb, var(--brand) 70%, black);
}
.scheme-accent h1,
.scheme-accent h2,
.scheme-accent h3 {
  color: color-mix(in srgb, var(--accent) 55%, #5a4a00);
}

/* Layout helpers */
.rounded-lg {
  border-radius: var(--radius, 14px);
}
.shadow-1 {
  box-shadow: 0 6px 20px hsl(0 0% 0% / 0.07);
}
.shadow-2 {
  box-shadow: 0 12px 40px hsl(0 0% 0% / 0.1);
}
.shadow-3 {
  box-shadow: 0 18px 64px hsl(0 0% 0% / 0.14);
}
.stack > * + * {
  margin-top: var(--stack-gap, 1rem);
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, 0.75rem);
  align-items: center;
}




/* Reveal animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================
   OVERRIDES — Navbar states + Hero legibility & scale
   (placed at END of app.css to win the cascade)
   ========================================================= */

/* ===== NAVBAR STATES (active + hover) ===== */
.site-header .navbar .nav-link{
  padding: .75rem .75rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 85%, transparent);
  transition: color .2s ease, opacity .2s ease;
  position: relative;
}
.site-header .navbar .nav-link:hover,
.site-header .navbar .nav-link:focus-visible{
  color: var(--accent); /* orange on hover */
}
.site-header .navbar .nav-link::after{
  content:"";
  position:absolute; left:.75rem; right:.75rem; bottom:.35rem;
  height:2px; background: transparent;
  transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease, background-color .25s ease;
}
.site-header .navbar .nav-link:hover::after,
.site-header .navbar .nav-link:focus-visible::after{
  background: var(--accent);
  transform: scaleX(1);
}
/* active = brand text + accent underline always on */
.site-header .navbar .nav-link.active{
  color: var(--brand);
}
.site-header .navbar .nav-link.active::after{
  background: var(--accent);
  transform: scaleX(1);
}

/* ===== HERO LEGIBILITY & SCALE ===== */
#hero{
  min-height: clamp(72vh, 84vh, 92vh); /* taller hero */
}
#hero .hero-overlay{
  /* stronger contrast over photos */
  background:
    linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.55) 20%),
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 20%, transparent), transparent 20%);
}
#hero .hero-copy{
  color: #fff;                           /* force readable text */
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
#hero .hero-copy .lead{
  color: color-mix(in srgb, #ffffff 82%, transparent);
}
#hero .display-hero{
  font-size: clamp(2.4rem, 4vw + 1rem, 4.25rem); /* bigger headline */
  letter-spacing: -0.015em;
  color: #f6f6f6;
}
/* Buttons pop more on image */
#hero .btn-brand{
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

#hero .btn-outline-brand{
  --bs-btn-color:#fff;
  --bs-btn-border-color: color-mix(in srgb, #ffffff 85%, var(--brand) 15%);
  --bs-btn-hover-color:#111;
  --bs-btn-hover-bg:#fff;
  --bs-btn-hover-border-color:#fff;
  backdrop-filter: blur(2px);
  border-width: 2px;
}

.btn-brand:hover{
  color: #fff;

}


/* =========================================================
  What we do
   ========================================================= */
   .highlight-icon{
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  padding: .6rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  font-size: 5rem;
  transition: color .2s ease, transform .2s ease;
  line-height: 4rem;

}

.card-soft:hover .highlight-icon {
  color: var(--brand) !important;
}





/* ===========================
   FOOTER (dark, high-contrast)
   =========================== */
.footer-dark{
  --footer-bg: color-mix(in srgb, var(--ink) 92%, #000);
  --footer-text: color-mix(in srgb, #ffffff 92%, var(--footer-bg) 8%);
  --footer-muted: color-mix(in srgb, #ffffff 65%, var(--footer-bg) 35%);
  --footer-border: color-mix(in srgb, #ffffff 12%, var(--footer-bg) 88%);
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid var(--footer-border);
}
.footer-dark .footer-heading{
  color: var(--footer-text);
  letter-spacing: .08em;
  opacity: .9;
}
.footer-dark .text-footer-muted{ color: var(--footer-muted); }

/* Footer links — white base, accent on hover/focus */
.footer-dark .footer-nav .nav-link{
  color: var(--footer-text);
  opacity: .9;
  padding: .25rem .5rem;
  border-radius: .375rem;
  transition: color .2s ease, background-color .2s ease, opacity .2s ease;
}
.footer-dark .footer-nav .nav-link:hover,
.footer-dark .footer-nav .nav-link:focus-visible{
  color: #111;
  background: var(--accent);
  text-decoration: none;
  outline: none;
}

/* Sponsors — visually prominent */
.footer-dark .sponsor-row{ row-gap: 1rem; }
.footer-dark .sponsor-link{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .4rem .6rem; border-radius: .5rem;
  background: color-mix(in srgb, #ffffff 6%, var(--footer-bg));
  border: 1px solid color-mix(in srgb, #ffffff 10%, var(--footer-bg));
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.footer-dark .sponsor-link:hover,
.footer-dark .sponsor-link:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  background: color-mix(in srgb, #ffffff 10%, var(--footer-bg));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--footer-bg));
  outline: none;
}
.footer-dark .sponsor-logo{
  height: 44px; width: auto; object-fit: contain; display: block;
  filter: saturate(1.05) contrast(1.05) drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
@media (min-width: 992px){
  .footer-dark .sponsor-logo{ height: 54px; }
}

/* Inputs on dark background */
.footer-dark .footer-input .form-control{
  background: color-mix(in srgb, #ffffff 8%, var(--footer-bg));
  color: var(--footer-text);
  border-color: color-mix(in srgb, #ffffff 15%, var(--footer-bg));
}
.footer-dark .footer-input .form-control::placeholder{
  color: color-mix(in srgb, var(--footer-text) 65%, transparent);
}
.footer-dark .footer-input .form-control:focus{
  background: color-mix(in srgb, #ffffff 12%, var(--footer-bg));
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 35%, transparent);
}

.footer-dark .footer-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px;
  color: var(--footer-text);
  background: color-mix(in srgb, #ffffff 6%, var(--footer-bg));
  border: 1px solid color-mix(in srgb, #ffffff 18%, var(--footer-bg));
  transition: transform .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease;
  text-decoration: none !important;
}
.footer-dark .footer-social i{
  color: currentColor;            /* inherit from link */
  font-size: 1.125rem;
  line-height: 1;
}

.footer-dark .footer-social:hover,
.footer-dark .footer-social:focus-visible{
  color: #111;
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  outline: none;
}


/* Divider */
.footer-hr{ border-color: var(--footer-border) }




/* ============================
   TEAMS PAGE
   ============================ */
.team-card .team-photo{
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.team-card:hover .team-photo{ transform: scale(1.06); }

/* Subtle divider between image and body if you want it
.team-card .p-3, .team-card .p-4{
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
*/

/* Tiny social pills (inherits footer theme colors nicely) */
.team-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  color: var(--brand);
  background: color-mix(in srgb, var(--surface) 90%, #000 10%);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  transition: transform .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease;
}
.team-social i{ font-size: 0.95rem; line-height:1; }
.team-social:hover, .team-social:focus-visible{
  color: #111;
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
  outline: none;
}

/* Reuse page-hero overlay styling from About, but slightly lighter by default */
.page-hero .hero-overlay{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.5) 70%),
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%);
}



/* ============================
   EVENTS PAGE
   ============================ */
.event-card img{
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.event-card:hover img{ transform: scale(1.04); }

.event-meta span{ display:inline-flex; align-items:center; gap:.25rem; }
.event-meta i{ opacity:.9; }

/* Slightly stronger overlay than Teams */
.page-hero .hero-overlay{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.58) 70%),
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%);
}

/* =========================================
   CONTACT — cleaner color, bigger controls
   (append at END of app.css)
   ========================================= */

/* Panels (keep simple background, refine depth) */
.contact-panel,
.form-panel{
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Section titles: bold + small accent bar */
.contact-panel h2,
.form-panel h2{
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: .75rem;
}
.contact-panel h2::after,
.form-panel h2::after{
  content:"";
  display:block;
  width:72px; height:3px;
  margin-top:.45rem;
  background: var(--brand);
  border-radius: 2px;
}

/* Contact list: colorful but simple */
.contact-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  color:#fff;
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  flex:0 0 auto;
}
.contact-list .fw-semibold{ color: var(--ink); }
.contact-list a{
  color: color-mix(in srgb, var(--brand) 90%, #000 10%);
  text-decoration:none;
}
.contact-list a:hover{ text-decoration: underline; text-underline-offset:.18em; }

/* Social icons (tasteful pills, no animation) */
.contact-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px;
  background:#fff;
  color: var(--brand);
  border:1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.contact-social:hover,
.contact-social:focus-visible{
  background: var(--accent);
  color:#111;
  border-color: var(--accent);
  transform: translateY(-1px);
  outline:none;
}

/* -------- FORM: bigger, rounder, clearer -------- */

/* Labels */
.form-panel .form-label{
  font-weight: 600;
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--ink) 86%, transparent);
}

/* Controls (increase height & radius) */
.form-panel .form-control,
.form-panel .form-select{
  --field-pad-y: .75rem;
  --field-pad-x: .95rem;
  padding: var(--field-pad-y) var(--field-pad-x);
  min-height: 50px;                 /* bigger inputs */
  border-radius: 5px;              /* rounder */
  background: #fff;
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  font-size: 1rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 0 0 rgba(0,0,0,0);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
@media (min-width: 992px){
  .form-panel .form-control,
  .form-panel .form-select{
    min-height: 54px;
    font-size: 1.03rem;
  }
}
.form-panel .form-control::placeholder{
  color: color-mix(in srgb, var(--ink) 46%, transparent);
}

/* Hover + focus: colorful but restrained */
.form-panel .form-control:hover,
.form-panel .form-select:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 6px 18px rgba(0,0,0,.05);
}
.form-panel .form-control:focus,
.form-panel .form-select:focus{
  border-color: color-mix(in srgb, var(--brand) 70%, var(--accent) 30%);
  box-shadow: 0 0 0 .24rem color-mix(in srgb, var(--brand) 26%, transparent);
}

/* Textarea a bit taller by default */
.form-panel textarea.form-control{
  min-height: 11rem;
  resize: vertical;
}

/* Submit button: medium size, pill, no icon (CSS hides the icon) */
.form-panel .btn-brand{
  height: 52px;
  padding: 0 1.25rem;
  border-radius: 8px;            /* pill */
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.form-panel .btn-brand:hover{
  box-shadow: 0 0 0 .24rem color-mix(in srgb, var(--brand) 26%, transparent);
  color: #fff;

}
.form-panel .btn-brand i{ display: none; }  /* hide paper-plane icon */
.form-panel .btn-brand:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  filter: saturate(1.04);
}



/* ===========================
   MEMBERSHIP — UI polish
   =========================== */

/* Radio card plans */
.plan-radio{ position:absolute; opacity:0; pointer-events:none; }
.plan-card{
  display:block;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: var(--bs-border-radius, .375rem);
  padding: .85rem .9rem;
  cursor: pointer;
  min-height: 84px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}
.plan-card:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.06); transform: translateY(-1px); }
.plan-radio:checked + .plan-card{
  border-color: var(--brand);
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--brand) 26%, transparent);
}
.fee-badge{
  display:inline-block;
  padding:.15rem .5rem;
  border-radius: .35rem;
  background: color-mix(in srgb, var(--accent) 20%, #fff);
  border:1px solid var(--accent);
  color:#111;
  font-size:.9rem;
}

/* Avatar picker (flat, with preview) */
.avatar-picker{
  position: relative;
  display:grid; grid-template-columns: 96px 1fr; gap: .75rem; align-items: center;
}
.avatar-thumb{
  width:96px; height:96px; border-radius: var(--bs-border-radius, .375rem);
  object-fit: cover; background: var(--surface);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.avatar-picker input[type="file"]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.avatar-drop{
  display:flex; align-items:center; justify-content:center;
  min-height: 96px; padding: .75rem;
  border: 2px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  border-radius: var(--bs-border-radius, .375rem);
  background: var(--surface);
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  text-align:center;
}

/* Summary bar */
.summary-bar{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--surface);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--bs-border-radius, .375rem);
  padding:.5rem .75rem;
}
.summary-bar strong{ color: var(--ink); }
#summaryAmount{ color: var(--brand_ink, var(--brand)); font-weight: 700; }

/* Payment info box */
.bank-box{
  background: color-mix(in srgb, var(--surface) 92%, #000 8%);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--bs-border-radius, .375rem);
  padding: .75rem;
}

/* FAQ */
details.faq{
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--bs-border-radius, .375rem);
  padding:.75rem .9rem; background:#fff;
}
details.faq + details.faq{ margin-top:.5rem; }
details.faq summary{
  cursor: pointer; font-weight: 600; color: var(--ink);
}
details.faq[open]{ border-color: var(--brand); }



/* Announcement modal — scoped styles */
.announcement-modal .modal-content {
  border-radius: 1rem;
}

.announcement-modal .announcement-logo {
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  background: #fff;
  object-fit: contain;
}


/* =========================================================
   404 PAGE — modern, friendly, slightly playful
    404 background + glass card 
  ==========================================================*/
.bg-404 {
  /* soft layered gradients */
  background:
    radial-gradient(1200px 1200px at 8% -10%, rgba(0, 119, 255, 0.08), transparent 60%),
    radial-gradient(900px 900px at 110% 10%, rgba(255, 0, 102, 0.06), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.glass-404 {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.65);
}

.text-404 {
  letter-spacing: 1px;
  background: linear-gradient(90deg, #005bbb, #ff4d6d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Floating blobs for subtle depth */
.blob {
  position: absolute;
  width: 42vmin;
  height: 42vmin;
  border-radius: 50%;
  filter: blur(24px);
  opacity: 0.55;
  z-index: 0;
  animation: float-blob 16s ease-in-out infinite;
}
.blob-1 {
  top: -6rem; left: -6rem;
  background: #cfe9ff;
}
.blob-2 {
  bottom: -8rem; right: -8rem;
  background: #ffe0ea;
  animation-delay: 4s;
}

/* Motion that respects reduced-motion settings */
@keyframes float-blob {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(3rem, -1rem, 0) scale(1.05); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .blob { display: none; }
}

/* Small polish for the card inside the hero */
.bg-404 .card {
  position: relative;
  z-index: 1; /* above blobs */
}