:root{ --brand:#1777ff; --accent:#0b5ed7; --card-green:#e6f4d9;
         /* Public-facing pages (rules, team, contact) */
         --hero-image:url('/assets/images/img/background.jpg');
         /* Homepage */
         --hero-image-main:url('/assets/images/img/background.jpg');
         /* Staff-facing training pages (staff-academy + learning modules) */
         --staff-academy-hero-image:url('/assets/images/img/background.jpg'); }
  @media (prefers-color-scheme: dark){
    :root{ --dm-surface:#0f1626; --dm-elev:#121b2d; --dm-text:#e6e8ee; --dm-muted:#b8c2cf; --dm-border:#22314d; --card-green:#17301a; }
    body{background:var(--dm-surface);color:var(--dm-text)}
    .navbar{background-color:#0d1b34!important}
    .text-muted{color:var(--dm-muted)!important}
    .form-control,.form-select{background:#0f1a2b;color:var(--dm-text);border-color:var(--dm-border)}
    .panelish{background:var(--dm-elev)!important;border-color:var(--dm-border)!important}
    .list-group-item{background:var(--dm-elev);color:var(--dm-text);border-color:var(--dm-border)}
  }
  body{font-family:"Lato",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
  .hero-parallax{ position:relative; width:100%; min-height:85vh; color:#fff;
    background: var(--hero-image) center/cover no-repeat; background-position-y:0;
    display:flex; justify-content:center; align-items:center; overflow:hidden; }
  .hero-parallax .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.65) }
  @media (prefers-color-scheme: dark){ .hero-parallax .overlay{ background:rgba(0,0,0,.55) } }
  .hero-parallax h1,.hero-parallax p{ position:relative; z-index:1; text-shadow:0 2px 6px rgba(0,0,0,.4) }
  .callout{background:var(--card-green);border:1px solid rgba(0,0,0,.06);border-radius:.75rem;padding:1.25rem 1.25rem .5rem}

/* 1) Never let the layout exceed the viewport width */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;   /* horizontal */
}

/* 2) Don’t force body to 100vw; let it be fluid */
body {
  min-width: 0;         /* override your earlier min-width:100vw */
  max-width: 100%;      /* override your earlier max-width:100vw */
  /* keep your font-family etc. */
}

/* 3) Navbar should just be 100% width, not 100vw, and no y-overflow rule */
.navbar {
  width: 100%;
  max-width: 100%;
  overflow: visible;     /* was overflow-y; hidden (not needed) */
}

.hero-parallax.main {
  position: relative;
  isolation: isolate;
  contain: paint;        /* prevents transformed pseudo from affecting scrollbox */
}
.hero-parallax.main::before {
  inset: 0;              /* was inset:-2px; which created horizontal overflow */
}

.hero-parallax {
  overflow: hidden;    
}
.hero-parallax.main{
    background: var(--hero-image-main) center/cover no-repeat;
}
.hero-parallax.academy{
    background: var(--staff-academy-hero-image) center/cover no-repeat;
}

/*
.hero-parallax.main {
  position: relative;
  isolation: isolate;
}

.hero-parallax.main::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: var(--hero-image-main) center / cover no-repeat;
  pointer-events: none;
  opacity: 0;
  animation:
    hero-glitch 450ms steps(12) 1s    2 both,
    hero-glitch 450ms steps(12) 1.75s 2 both;
}

.hero-parallax.main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/images/img/halloween_banner.png") center / cover no-repeat;
  pointer-events: none;
  opacity: 0;
  animation: hero-swap-in 220ms linear 4.25s 1 forwards;
}

.hero-parallax .overlay { position: absolute; inset: 0; z-index: 1; }
.hero-parallax h1,
.hero-parallax p,
.hero-parallax .container { position: relative; z-index: 2; }

@keyframes hero-glitch {
  0%   { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  5%   { opacity: .9; transform: translate(-2px,-2px); clip-path: inset(0 0 82% 0); }
  12%  { transform: translate(3px,2px);  clip-path: inset(75% 0 0 0); }
  20%  { transform: translate(-3px,1px); clip-path: inset(10% 0 70% 0); }
  28%  { transform: translate(2px,-1px) skewX(1deg); clip-path: inset(60% 0 20% 0); }
  36%  { transform: translate(-1px,2px) skewY(.5deg); clip-path: inset(35% 0 45% 0); }
  60%  { opacity: .6; transform: translate(1px,0) }
  80%  { opacity: .25; transform: none; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; transform: none; }
}

@keyframes hero-swap-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-parallax.main::before { animation: none; opacity: 0; }
  .hero-parallax.main::after  { animation: none; opacity: 1; }
}
*/
/*END HALLOWEEN GLITCH BG */

/* Banner */
.halloween-banner{
  background: linear-gradient(90deg,#ff7a00,#ffb347);
  color:#2a1600;
  text-shadow:0 1px 1px rgba(255,255,255,.25);
  box-shadow:0 0 10px rgba(255,120,0,.4);
  font-family:"Montserrat",sans-serif;
  letter-spacing:.3px;
  cursor:pointer;
  z-index:1031;
}
@media (prefers-color-scheme: dark){
  .halloween-banner{
    background: linear-gradient(90deg,#ff8800,#cc5500);
    color:#fff3e0;
    text-shadow:0 1px 2px rgba(0,0,0,.4);
  }
}

/* Modal theme */
.halloween-modal .modal-content{
  background: radial-gradient(120% 120% at 0% 0%, #2b1200 0%, #0f0a0a 60%, #090909 100%);
  color:#ffe7cc;
  border:1px solid rgba(255,136,0,.25);
  position:relative;
}
.halloween-modal .modal-content::before{
  /* subtle top “drip” edge */
  content:"";
  position:absolute; inset:0 0 auto 0; height:8px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,140,0,.9) 0 20px,
      rgba(255,206,120,.9) 20px 40px);
  filter:blur(.5px) opacity(.85);
}
.halloween-modal .modal-header{
  background: linear-gradient(180deg, rgba(255,140,0,.25), rgba(0,0,0,0));
  color:#fff2e0;
}
.halloween-modal .modal-footer{
  color:#ffcfa1;
}

.halloween-modal .btn-close{
  filter: invert(1) grayscale(1) brightness(1.8);
}

/* Fun bullets */
.candy-list{ padding-left:1.25rem; }
.candy-list li{
  margin:.25rem 0 .25rem .25rem;
  list-style:none;
  position:relative;
  padding-left:1.2rem;
}
.candy-list li::before{
  content:"🍬";
  position:absolute; left:0; top:.05rem;
}

/* Title emoji pop */
.pumpkin-emoji{ filter: drop-shadow(0 0 6px rgba(255,140,0,.6)); }

.pumpkin-code {
  color: #ff8c00;
  font-family: "Courier New", monospace;
  letter-spacing: 2px;
  text-shadow:
    0 0 6px #ff6a00,
    0 0 12px #ffae42,
    0 0 24px #ff7b00;
  animation:
    glowPulse 3s ease-in-out infinite,
    flicker 4s infinite,
    glitchMove 3s infinite;
  position: relative;
  display: inline-block;
}

/* Subtle orange fade glow */
@keyframes glowPulse {
  0%,100% { text-shadow: 0 0 6px #ff6a00,0 0 12px #ffae42,0 0 24px #ff7b00; }
  50%     { text-shadow: 0 0 12px #ffb347,0 0 24px #ffcc70,0 0 48px #ff7b00; }
}

/* Randomized flicker */
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.2; }
}

/* Glitch side shifts */
@keyframes glitchMove {
  0%   { transform: none; }
  10%  { transform: translate(2px,-1px) skew(0.5deg,0.5deg); }
  20%  { transform: translate(-2px,1px) skew(-0.5deg,-0.5deg); }
  30%  { transform: translate(3px,0); }
  40%  { transform: translate(-1px,2px); }
  50%  { transform: none; }
  60%  { transform: translate(2px,1px); }
  70%  { transform: translate(-3px,-1px); }
  100% { transform: none; }
}

/* Optional ghost duplicate layers for richer glitch effect */
.pumpkin-code::before,
.pumpkin-code::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  color: #ff4500;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.pumpkin-code::before {
  animation: glitchBefore 2s infinite linear alternate-reverse;
  text-shadow: -2px 0 #ff4500;
}
.pumpkin-code::after {
  animation: glitchAfter 2s infinite linear alternate;
  text-shadow: 2px 0 #ffa500;
}

@keyframes glitchBefore {
  0% { clip-path: inset(0 0 80% 0); transform: translate(-2px,-2px); }
  25%{ clip-path: inset(20% 0 55% 0); transform: translate(2px,2px); }
  50%{ clip-path: inset(60% 0 25% 0); transform: translate(-3px,1px); }
  75%{ clip-path: inset(10% 0 70% 0); transform: translate(1px,-1px); }
  100%{ clip-path: inset(0 0 80% 0); transform: none; }
}
@keyframes glitchAfter {
  0% { clip-path: inset(10% 0 65% 0); transform: translate(2px,2px); }
  25%{ clip-path: inset(40% 0 35% 0); transform: translate(-2px,-1px); }
  50%{ clip-path: inset(70% 0 10% 0); transform: translate(3px,0); }
  75%{ clip-path: inset(0 0 80% 0); transform: translate(-1px,1px); }
  100%{ clip-path: inset(10% 0 65% 0); transform: none; }
}




      .reveal-up {
  transform: translateY(40px);
}
.reveal-up.is-visible {
  transform: none;
  opacity: 1;
}
      
/* Layout */
.section-xl { padding: 6rem 0; }
.section-dark { background: #0b1220; color: #e6e8ee; }    /* optional alt */
.section-light { background: #f7fbff; }                   /* optional alt */

/* Card-ish containers */
.block {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 6px 30px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  .block { background: #121b2d; border-color: #22314d; }
}

/* Reveal animation base */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: transform .700s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
  will-change: transform, opacity;
}

/* Directions */
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px);  }

/* When visible */
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger helpers (add to siblings) */
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

/* Images */
.frame {
  border-radius: .75rem;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  .frame { border-color:#22314d; box-shadow: 0 10px 34px rgba(0,0,0,.35); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* --- Dark-mode tightening for near-black surfaces --- */
@media (prefers-color-scheme: dark) {
  :root{
    /* keep your existing tokens, add a couple more */
    --dm-surface:#0a0f1a;        /* base app surface (near black) */
    --dm-elev:#0d1322;           /* raised surface */
    --dm-elev-2:#0f1626;         /* higher elevation */
    --dm-text:#e6e8ee;
    --dm-muted:#b8c2cf;
    --dm-border:#22314d;
  }

  /* The light section should not stay light in dark mode */
  .section-light {
    background: var(--dm-surface) !important;
    color: var(--dm-text);
  }

  /* “Panelish” welcome block */
  .panelish{
    background: var(--dm-elev-2) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.5);
  }

  /* Card-ish blocks in Staff Expectations — make them almost black */
  .block{
    background: var(--dm-elev) !important;      /* near-black card */
    border-color: var(--dm-border) !important;
    box-shadow: 0 10px 34px rgba(0,0,0,.55);
  }

  /* Perks box currently uses .bg-light — darken it */
  .block .bg-light,
  .bg-light{
    background: #0b1220 !important;             /* darker chip/surface */
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
  }

  /* In case you used .bg-secondary anywhere */
  .bg-secondary,
  .text-bg-secondary{
    background: #121b2d !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
  }

  /* Muted text, code chips, list items stay readable */
  .text-muted{ color: var(--dm-muted) !important; }
  code{ background: #0b1220; color: var(--dm-text); border: 1px solid var(--dm-border); }
  .list-group-item{ background: var(--dm-elev); color: var(--dm-text); border-color: var(--dm-border); }
}
      
      /* --- Material-style Buttons --- */
.btn {
  border-radius: 9999px; /* fully rounded, "pill" shape */
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: all .2s cubic-bezier(.2,.8,.4,1);
}

.btn:active {
  transform: scale(.97);
  box-shadow: 0 1px 3px rgba(0,0,0,.3) inset;
}

/* Primary button - matches Material 3 blue tones */
.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 10px rgba(23,119,255,.35);
}
.btn-primary:focus-visible {
  outline: 2px solid rgba(23,119,255,.6);
  outline-offset: 2px;
}

/* Secondary / outline variant */
.btn-outline-primary {
  border: 2px solid var(--brand);
  color: var(--brand);
  background: transparent;
}
.btn-outline-primary:hover {
  background-color: var(--brand);
  color: #fff;
  box-shadow: 0 3px 8px rgba(23,119,255,.25);
}

/* Dark-mode refinement */
@media (prefers-color-scheme: dark) {
  .btn-primary {
    background-color: #1e88ff;
    border-color: #1e88ff;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.7);
  }
  .btn-primary:hover {
    background-color: #3b9cff;
    border-color: #3b9cff;
    box-shadow: 0 4px 14px rgba(30,136,255,.4);
  }
  .btn-outline-primary {
    border-color: #3b9cff;
    color: #3b9cff;
  }
  .btn-outline-primary:hover {
    background-color: #3b9cff;
    color: #fff;
  }
}
     
/* --- Panelish modifier: no border, no shadow, blended background --- */
.panelish.no-border {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;  /* blend with parent section */
}

/* Optional variant: if you still want subtle elevation, not transparent */
@media (prefers-color-scheme: light) {
  .panelish.no-border {
    background: transparent !important; 
  }
}

@media (prefers-color-scheme: dark) {
  .panelish.no-border {
    background: var(--dm-surface) !important; /* same as page bg */
  }
}


/* Material-ish modal look */
.material-modal {
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* Tweak header/title weight */
.material-modal .modal-title { font-weight: 700; }

/* Dark mode modal surface */
@media (prefers-color-scheme: dark) {
  .material-modal {
    background: #0f1626;                 /* matches your near-black scheme */
    color: #e6e8ee;
    border: 1px solid #22314d;
    box-shadow: 0 30px 80px rgba(0,0,0,.65);
  }
}

/* Timer badge: slightly thicker look */
#countdown {
  font-weight: 700;
  letter-spacing: .3px;
  padding: .45rem .75rem;
}

/* Kill native markers and add our own */
#quizForm ol { list-style: none; padding-left: 0; }
.question-step { position: relative; padding-left: 2.25rem; }
.question-step .q-num {
  position: absolute; left: 0; top: .15rem;
  font-weight: 700; opacity: .9;
}

/* --- Minimal, Material-ish tone system for the Guide --- */
#howto .step{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.75rem;
  padding:1.25rem 1.25rem 1rem;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  #howto .step{
    background:var(--dm-elev);
    border-color:var(--dm-border);
    box-shadow:0 10px 26px rgba(0,0,0,.45);
  }
}

/* Number chip—quieter, less “badge-y” */
#howto .step-num{
  display:inline-grid; place-items:center;
  width:32px; height:32px; margin-right:.6rem;
  border-radius:999px; font-weight:700; line-height:1;
  color:#fff; background:var(--brand);
  box-shadow:0 2px 6px rgba(0,0,0,.14);
}

/* Section header rhythm */
#howto h2{ font-weight:800; }
#howto .step h3{ font-weight:700; margin:0; }
#howto p, #howto ul{ margin-bottom:.5rem; }

/* Tonal card (for pro tips / info / notes) – single look, brand-accented divider */
.tonal{
  background:#f5f9ff;             /* soft, not flashy */
  border:1px solid rgba(0,0,0,.06);
  border-radius:.75rem;
  padding:1rem 1rem;
}
.tonal .kicker{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; text-transform:none;
  margin-bottom:.25rem;
}
.tonal .kicker .ico{
  width:28px; height:28px; border-radius:999px;
  display:inline-grid; place-items:center;
  background:rgba(23,119,255,.12);
  color:var(--brand);
}
.tonal .body{ margin-top:.25rem; }
.tonal .divider{
  height:1px; background:rgba(23,119,255,.18);
  margin:.5rem 0 .5rem;
}

@media (prefers-color-scheme: dark){
  .tonal{
    background:var(--dm-surface);
    border:1px solid var(--dm-border);
  }
  .tonal .kicker .ico{
    background:rgba(63,131,248,.18);
    color:#9fc0ff;
  }
  .tonal .divider{
    background:rgba(159,192,255,.25);
  }
}

/* Images stay quiet */
#howto .img-frame{
  border-radius:.75rem;
  border:1px solid rgba(0,0,0,.08);
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  #howto .img-frame{ border-color:var(--dm-border); box-shadow:0 10px 34px rgba(0,0,0,.35); }
}

/* Auto stagger within the guide */
#howto .reveal-seq > .reveal{ transition-delay:.06s; }
#howto .reveal-seq > .reveal:nth-child(2){ transition-delay:.12s; }
#howto .reveal-seq > .reveal:nth-child(3){ transition-delay:.18s; }
#howto .reveal-seq > .reveal:nth-child(4){ transition-delay:.24s; }
#howto .reveal-seq > .reveal:nth-child(5){ transition-delay:.30s; }
#howto .reveal-seq > .reveal:nth-child(6){ transition-delay:.36s; }


/* Lightbox modal tweaks (additive) */
.img-lightbox { border-radius: .75rem; overflow: hidden; }
.img-lightbox .modal-body { background: #000; } /* neutral backdrop for images */
#lightboxImg { max-height: calc(100vh - 8rem); object-fit: contain; background:#000; }

/* Dark mode keeps the same neutral canvas */
@media (prefers-color-scheme: dark){
  .img-lightbox .modal-body { background: #000; }
  #lightboxCap { color: var(--dm-muted) !important; }
}

/* Optional: nicer close button contrast over dark image */
.img-lightbox .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: .8;
}
.img-lightbox .btn-close:hover { opacity: 1; }

#lightboxImg {
  cursor: zoom-out; /* visually hints “click to close” */
  transition: opacity .2s ease;
}
#lightboxImg:active { opacity: .85; }


/* --- Equal-height image cards with contained thumbnails --- */
.equal-cards {
  display: flex;
  flex-wrap: wrap;            
}

/* Center images inside the frame */
.equal-cards .img-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: auto;                 /* ensures centered vertical alignment */
  display: block;
  transition: transform .2s ease;
}

@media (prefers-color-scheme: dark) {
  .equal-cards .img-frame { background: var(--dm-elev); border-color: var(--dm-border); }
}

/* Lightbox thumbnail box: maintains uniform size */
.equal-cards .img-frame > .lightbox-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;         /* uniform card height */
  border-radius: .5rem;
  overflow: hidden;
  background: #000;
  position: relative;
}


@media (prefers-color-scheme: dark) {
  .equal-cards .img-frame > .lightbox-trigger {
    background: var(--dm-elev);
  }
}

/* Subtle hover effect for interactivity */
.equal-cards .img-frame:hover img {
  transform: scale(1.025);
}

/* Caption stays subtle and aligned */
.thumb-caption {
  font-size: .875rem;
  color: #6c757d;
  text-align: center;
  line-height: 1.4;
  min-height: 1.4em;          /* stable height even if empty */
  margin-top: .5rem;
}

@media (prefers-color-scheme: dark) {
  .thumb-caption { color: var(--dm-muted); }
}

/* --- Dark-mode pass for the Role-Play Simulator only --- */
@media (prefers-color-scheme: dark) {
  #edu-sim .card {
    background: var(--dm-elev);          /* near-black card */
    color: var(--dm-text);
    border-color: var(--dm-border);
    box-shadow: 0 10px 34px rgba(0,0,0,.55);
  }
  #.card .panelish .card-title { color: var(--dm-text); }
  #edu-sim .small.text-muted { color: var(--dm-muted) !important; }

  /* Inputs inside cards */
  #edu-sim .form-control,
  #edu-sim .form-select {
    background: #0f1a2b;
    color: var(--dm-text);
    border-color: var(--dm-border);
  }
  #edu-sim .input-group-text {
    background: #0f1a2b;
    color: var(--dm-muted);
    border-color: var(--dm-border);
  }

  /* Outcome alerts (if shown) */
  #edu-sim .alert {
    background: #0b1220;
    color: var(--dm-text);
    border-color: var(--dm-border);
  }

  /* Badges look a bit bright on deep surfaces—soften outlines */
  #edu-sim .badge {
    border: 1px solid rgba(255,255,255,.08);
  }
}

/* ============================================================
   Explicit theme control (light/dark toggle)
   `data-theme` attribute on <html> overrides prefers-color-scheme.
   ============================================================ */

/* When user explicitly picked LIGHT, neutralize dark media-query effects */
html[data-theme="light"] body { background: #fff; color: #212529; }
html[data-theme="light"] .navbar.bg-primary { background-color: var(--brand) !important; }
html[data-theme="light"] .section-light { background: #f7fbff !important; color: inherit; }
html[data-theme="light"] .panelish { background: #fff !important; border-color: rgba(0,0,0,.08) !important; }
html[data-theme="light"] .block { background: #fff !important; border-color: rgba(0,0,0,.08) !important; }
html[data-theme="light"] .text-muted { color: #6c757d !important; }
html[data-theme="light"] .panelish.no-border { background: transparent !important; }
html[data-theme="light"] .hero-parallax .overlay { background: rgba(0,0,0,.65); }

/* When user explicitly picked DARK, apply dark styles even if OS is light */
html[data-theme="dark"] {
  --dm-surface:#0a0f1a; --dm-elev:#0d1322; --dm-elev-2:#0f1626;
  --dm-text:#e6e8ee; --dm-muted:#b8c2cf; --dm-border:#22314d; --card-green:#17301a;
}
html[data-theme="dark"] body { background: var(--dm-surface); color: var(--dm-text); }
html[data-theme="dark"] .navbar { background-color:#0d1b34 !important; }
html[data-theme="dark"] .text-muted { color: var(--dm-muted) !important; }
html[data-theme="dark"] .section-light { background: var(--dm-surface) !important; color: var(--dm-text); }
html[data-theme="dark"] .panelish { background: var(--dm-elev-2) !important; border-color: var(--dm-border) !important; box-shadow: 0 8px 28px rgba(0,0,0,.5); }
html[data-theme="dark"] .panelish.no-border { background: var(--dm-surface) !important; }
html[data-theme="dark"] .block { background: var(--dm-elev) !important; border-color: var(--dm-border) !important; box-shadow: 0 10px 34px rgba(0,0,0,.55); }
html[data-theme="dark"] .bg-light { background: #0b1220 !important; color: var(--dm-text) !important; border: 1px solid var(--dm-border) !important; }
html[data-theme="dark"] code { background:#0b1220; color: var(--dm-text); border: 1px solid var(--dm-border); }
html[data-theme="dark"] .list-group-item { background: var(--dm-elev); color: var(--dm-text); border-color: var(--dm-border); }
html[data-theme="dark"] .hero-parallax .overlay { background: rgba(0,0,0,.55); }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
  background:#0f1a2b; color: var(--dm-text); border-color: var(--dm-border);
}
html[data-theme="dark"] .btn-primary { background-color:#1e88ff; border-color:#1e88ff; }
html[data-theme="dark"] .btn-primary:hover { background-color:#3b9cff; border-color:#3b9cff; }
html[data-theme="dark"] .btn-outline-primary { border-color:#3b9cff; color:#3b9cff; }
html[data-theme="dark"] .btn-outline-primary:hover { background-color:#3b9cff; color:#fff; }

/* ============================================================
   Theme toggle button
   ============================================================ */
.theme-toggle {
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color: #fff;
  transition: transform .25s ease, background .2s ease, border-color .2s ease;
  padding: 0;
  box-shadow: none;
}
.theme-toggle:hover { background: rgba(255,255,255,.18); transform: rotate(12deg); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle i { font-size: 1rem; line-height: 1; }

/* ============================================================
   Modernization polish — subtle hover lifts & smoother motion
   ============================================================ */
.block, .panelish:not(.no-border) {
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.block:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}
html[data-theme="dark"] .block:hover { box-shadow: 0 18px 48px rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) {
  .block:hover { box-shadow: 0 18px 48px rgba(0,0,0,.6); }
}

/* Smoother reveals with slight scale */
.reveal { transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .7s ease; }

/* Circular image bump on hover */
.hero-parallax h1 {
  background: linear-gradient(90deg, #fff 0%, #cfe3ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeUp .9s ease .1s both;
}
.hero-parallax p.lead { animation: fadeUp .9s ease .25s both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Soft scroll for anchor links */
html { scroll-behavior: smooth; }

/* Prefer-reduced-motion respect (cover the new ones too) */
@media (prefers-reduced-motion: reduce) {
  .hero-parallax h1, .hero-parallax p.lead { animation: none; }
  .block:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Amber warm callout — for "pay attention, but not a rule"
   guidance (volunteer reminders, coin usage, etc.)
   ============================================================ */
.callout-amber {
  background: #fff4e0;
  border: 1px solid rgba(0,0,0,.06);
  border-left: 4px solid #e67e22;
  border-radius: .75rem;
  padding: 1.1rem 1.25rem;
}
.callout-amber .fa-solid,
.callout-amber .fa-brands { color: #e67e22; }
.callout-amber strong { display: inline; }
.callout-amber hr { opacity: .2; margin: .5rem 0; }
html[data-theme="dark"] .callout-amber {
  background: #2b1d0a;
  border-left-color: #ffae5c;
  color: var(--dm-text);
}
html[data-theme="dark"] .callout-amber .fa-solid,
html[data-theme="dark"] .callout-amber .fa-brands { color: #ffae5c; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .callout-amber {
    background: #2b1d0a;
    border-left-color: #ffae5c;
    color: var(--dm-text);
  }
  html:not([data-theme="light"]) .callout-amber .fa-solid,
  html:not([data-theme="light"]) .callout-amber .fa-brands { color: #ffae5c; }
}

/* ============================================================
   Hero CTAs
   ============================================================ */
.hero-cta { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin-top:1.5rem; animation: fadeUp .9s ease .4s both; }
.hero-cta .btn { min-width: 180px; }
@media (prefers-reduced-motion: reduce) { .hero-cta { animation: none; } }

/* ============================================================
   Stat counters strip
   ============================================================ */
.stats-strip { padding: 3.5rem 0; background: linear-gradient(135deg, var(--brand) 0%, #0a4dbf 100%); color:#fff; }
html[data-theme="dark"] .stats-strip { background: linear-gradient(135deg, #0d2a5c 0%, #071833 100%); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .stats-strip { background: linear-gradient(135deg, #0d2a5c 0%, #071833 100%); }
}
.stat-card { text-align:center; padding: 1rem .5rem; }
.stat-num {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  display: inline-block;
  background: linear-gradient(90deg, #fff 0%, #cfe3ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label {
  display:block;
  margin-top:.5rem;
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform: uppercase;
  opacity:.85;
}

/* ============================================================
   Testimonials
   ============================================================ */
.testimonial {
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:1rem;
  padding:1.5rem;
  height:100%;
  display:flex; flex-direction:column;
  position:relative;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.testimonial:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.10); }
.testimonial::before {
  content: "\201C";
  position:absolute; top:-.25rem; left:1rem;
  font-family: Georgia, serif;
  font-size: 4rem; line-height:1;
  color: var(--brand); opacity:.18;
}
.testimonial .quote { font-style: italic; margin: 0 0 1rem; flex: 1; }
.testimonial .who { display:flex; align-items:center; gap:.75rem; }
.testimonial .avatar {
  width:44px; height:44px; border-radius:50%;
  display:inline-grid; place-items:center;
  background: var(--brand); color:#fff; font-weight:700;
  flex-shrink:0;
}
.testimonial .name { font-weight:700; line-height:1.1; }
.testimonial .role { font-size:.825rem; color:#6c757d; }

html[data-theme="dark"] .testimonial { background: var(--dm-elev); border-color: var(--dm-border); color: var(--dm-text); box-shadow: 0 10px 34px rgba(0,0,0,.55); }
html[data-theme="dark"] .testimonial .role { color: var(--dm-muted); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .testimonial { background: var(--dm-elev); border-color: var(--dm-border); color: var(--dm-text); box-shadow: 0 10px 34px rgba(0,0,0,.55); }
  html:not([data-theme="light"]) .testimonial .role { color: var(--dm-muted); }
}

/* ============================================================
   Discord live card
   ============================================================ */
.discord-card {
  background: linear-gradient(135deg, #5865F2 0%, #404EED 100%);
  color:#fff;
  border-radius:1rem;
  padding:2rem;
  position:relative;
  overflow:hidden;
}
.discord-card::after {
  content:""; position:absolute;
  right:-40px; bottom:-40px;
  width:220px; height:220px; border-radius:50%;
  background: rgba(255,255,255,.08);
  pointer-events:none;
}
.discord-card .pulse-dot {
  display:inline-block; width:10px; height:10px;
  border-radius:50%; background:#2ecc71;
  margin-right:.5rem;
  box-shadow: 0 0 0 0 rgba(46,204,113,.7);
  animation: pulseDot 2s ease-out infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,.7); }
  70%  { box-shadow: 0 0 0 14px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}
@media (prefers-reduced-motion: reduce) { .discord-card .pulse-dot { animation:none; } }
.discord-card .live-label { font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; opacity:.95; }
.discord-card .big { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight:800; line-height:1; margin:.35rem 0 .1rem; font-family:"Montserrat",sans-serif; }
.discord-card .btn-discord {
  background:#fff; color:#404EED; font-weight:700;
  border:none; border-radius:999px;
  padding:.65rem 1.4rem;
}
.discord-card .btn-discord:hover { background:#f1f3ff; color:#2a36c9; }

/* ============================================================
   Sticky mobile Join pill
   ============================================================ */
.sticky-join {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 1030;
  display: none;
  align-items:center; gap:.4rem;
  padding:.75rem 1.1rem;
  border-radius:999px;
  background: #5865F2;
  color:#fff; font-weight:700;
  box-shadow: 0 10px 30px rgba(88,101,242,.45);
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sticky-join:hover { color:#fff; transform: translateY(-2px); box-shadow: 0 14px 38px rgba(88,101,242,.55); }
@media (max-width: 768px) { .sticky-join { display: inline-flex; } }