/* ═══════════════════════════════════════════════════════════
   XALOR REMASTERED — STYLE
   Theme: Rising from the ashes — deep blacks, ember orange,
   crimson, molten gold, with ash grey accents
═══════════════════════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
  /* Fire palette */
  --ember:        #ff6a1a;
  --ember-bright: #ff8c42;
  --ember-dim:    #cc4e0a;
  --crimson:      #d4200c;
  --crimson-deep: #8b1a10;
  --molten:       #fbbf24;
  --molten-dim:   #d4970a;
  --ash:          #9e9e9e;
  --ash-light:    #bfbfbf;
  --smoke:        #1a1a1a;
  --charcoal:     #111111;
  --void:         #080808;
  --soot:         #0d0d0d;
  --coal:         #151515;
  --slate:        #222222;
  --bone:         #e8e0d4;

  /* Functional */
  --text:         #c4bdb3;
  --text-dim:     #7a746b;
  --text-bright:  #f0ebe4;
  --border-faint: rgba(255,106,26,0.12);
  --border-glow:  rgba(255,106,26,0.35);fe

  /* Fonts */
  --font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --font-heading: 'Bebas Neue', sans-serif;
  --font-body:    'Rajdhani', sans-serif;

  /* Easings */
  --ease-out:     cubic-bezier(0.16,1,0.3,1);
  --ease-spring:  cubic-bezier(0.34,1.56,0.64,1);
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--void);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ember);color:var(--void)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ═══════════════════════════════════════════════
   NAVBAR — CENTERED LOGO
═══════════════════════════════════════════════ */
header {
  position: relative;
  z-index: 150;
  height: 150px;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(15, 8, 4, 0.92), rgba(15, 8, 4, 0.6));
  border-bottom: 1px solid rgba(255, 107, 26, 0.15);
  overflow: visible;
  box-shadow: 0 4px 20px rgba(255, 69, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 107, 26, 0.12), transparent 70%);
  animation: flameFlow 15s ease-in-out infinite;
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

@keyframes flameFlow {
  0% { transform: scale(1) translateX(-5%); opacity: 0.5; }
  50% { transform: scale(1.05) translateX(5%); opacity: 0.8; }
  100% { transform: scale(1) translateX(-5%); opacity: 0.5; }
}

/* ============================================= */
/* 🔥 NAVBAR                                     */
/* ============================================= */
.navbar {
  position: relative;
  z-index: 151;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1600px;
  padding: 0 2rem;
  height: 70px;
  margin-top: 15px;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 40px;
}

.navbar a {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #d4b5a0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 17px;
  transition: color 0.25s, transform 0.25s;
}

.navbar a:hover {
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
  transform: translateY(-2px);
}

.navbar a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--flame-orange), var(--ember));
  border-radius: 2px;
  transition: width 0.3s ease-in-out;
  box-shadow: 0 0 8px var(--accent-glow);
}

.navbar a:hover::after,
.navbar a.active::after {
  width: 100%;
}

/* ============================================= */
/* 🔥 LOGO                                       */
/* ============================================= */
.logo-inline {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-45%);
  z-index: 200;
  pointer-events: all;
}

.logo-inline img {
  width: 450px;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(255, 107, 26, 0.5));
  transition: transform 0.3s ease;
  animation: emberGlow 5s ease-in-out infinite;
  cursor: pointer;
}

.logo-inline img:hover {
  transform: translateY(-3px) scale(1.04);
}

@keyframes emberGlow {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(255, 107, 26, 0.4)); }
  50% { filter: drop-shadow(0 0 50px rgba(255, 69, 0, 0.8)); }
}


/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:2rem;
  overflow:hidden;
  background:var(--void);
}

/* Layered radial glows */
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 110% 90% at 50% 120%, rgba(255,106,26,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(212,32,12,0.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 30%, rgba(255,140,66,0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(212,32,12,0.06) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(251,191,36,0.04) 0%, transparent 60%);
}

/* Perspective grid floor */
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,106,26,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,106,26,0.04) 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:radial-gradient(ellipse at 50% 100%,black 15%,transparent 65%);
  animation:gridDrift 22s linear infinite;
}
@keyframes gridDrift{
  0%{transform:translateY(0) perspective(500px) rotateX(68deg)}
  50%{transform:translateY(-28px) perspective(500px) rotateX(68deg)}
  100%{transform:translateY(-55px) perspective(500px) rotateX(68deg)}
}

/* Vignette */
.hero-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 20%,var(--void) 100%);
}

/* Hero ash layer for DOM particles */
.hero-ash-layer{
  position:absolute;inset:0;
  overflow:hidden;pointer-events:none;
}
.ash-dot{
  position:absolute;bottom:-10px;
  border-radius:50%;
  background:var(--ember);
  box-shadow:0 0 8px var(--ember),0 0 18px rgba(255,106,26,0.4);
  animation:ashRise var(--dur,8s) linear infinite;
}
@keyframes ashRise{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0.7}
  50%{opacity:1}
  100%{transform:translateY(-110vh) translateX(var(--drift,0px)) scale(0);opacity:0}
}

/* Content */
.hero-inner{
  position:relative;z-index:10;
  max-width:900px;
}

.hero-badge{
  display:inline-flex;align-items:center;gap:0.7rem;
  padding:0.5rem 1.6rem;
  background:linear-gradient(135deg,rgba(255,106,26,0.12),rgba(212,32,12,0.08));
  border:1px solid rgba(255,106,26,0.4);
  border-radius:100px;
  font-size:0.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.25em;
  color:var(--ember-bright);
  margin-bottom:2rem;
  backdrop-filter:blur(8px);
  animation:fadeUp 0.8s var(--ease-out) forwards,badgePulse 3s ease-in-out infinite;
  opacity:0;
}
.hero-badge::before{
  content:'';width:8px;height:8px;
  background:var(--ember);border-radius:50%;
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,106,26,0.6)}
  50%{transform:scale(1.4);box-shadow:0 0 0 10px rgba(255,106,26,0)}
}
@keyframes badgePulse{
  0%,100%{border-color:rgba(255,106,26,0.4)}
  50%{border-color:rgba(212,32,12,0.8)}
}

.hero-title{
  font-family:var(--font-display);
  font-size:clamp(3.2rem,13vw,8.5rem);
  font-weight:700;
  line-height:0.9;
  margin-bottom:0.3rem;
  background:linear-gradient(180deg,#ffffff 0%,var(--ember-bright) 25%,var(--ember) 50%,var(--crimson) 75%,var(--crimson-deep) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 60px rgba(255,106,26,0.4)) drop-shadow(0 0 30px rgba(212,32,12,0.3));
  animation:titleIn 1.2s 0.15s var(--ease-out) forwards;
  opacity:0;transform:translateY(40px) scale(0.96);
}
.hero-title span{
  display:block;
  font-family:var(--font-heading);
  font-size:clamp(1.4rem,4vw,2.6rem);
  letter-spacing:0.45em;
  background:linear-gradient(90deg,var(--ember-dim),var(--ember-bright),var(--molten));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  margin-top:0.3rem;
}
@keyframes titleIn{to{opacity:1;transform:translateY(0) scale(1)}}

.hero-tagline{
  font-size:clamp(0.95rem,2vw,1.25rem);
  color:var(--text-dim);
  letter-spacing:0.12em;
  margin-bottom:2.5rem;
  animation:fadeUp 1s 0.4s var(--ease-out) forwards;
  opacity:0;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(25px)}
  to{opacity:1;transform:translateY(0)}
}

/* CTA Button */
.btn-fire{
  display:inline-flex;align-items:center;gap:0.8rem;
  padding:1rem 2.6rem;
  background:linear-gradient(135deg,var(--ember) 0%,var(--crimson) 60%,var(--crimson-deep) 100%);
  border:none;border-radius:10px;
  font-family:var(--font-body);font-size:1.1rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.12em;
  color:#fff;cursor:pointer;
  position:relative;overflow:hidden;
  transition:all 0.4s var(--ease-out);
  animation:fadeUp 1s 0.6s var(--ease-out) forwards;
  opacity:0;
  box-shadow:0 6px 30px rgba(255,106,26,0.25);
}
.btn-fire::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--molten),var(--ember));
  opacity:0;transition:opacity 0.4s;
}
.btn-fire:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 50px rgba(255,106,26,0.45);
}
.btn-fire:hover::before{opacity:1}
.btn-fire span{position:relative;z-index:1}

/* Scroll indicator */
.scroll-hint{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0.4rem;
  color:rgba(255,106,26,0.5);font-size:0.7rem;
  letter-spacing:0.2em;text-transform:uppercase;
  animation:fadeIn 1s 1.5s forwards;opacity:0;
}
@keyframes fadeIn{to{opacity:1}}
.scroll-hint__mouse{
  width:22px;height:36px;border:2px solid rgba(255,106,26,0.35);
  border-radius:11px;position:relative;
}
.scroll-hint__mouse::before{
  content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:3px;height:7px;background:var(--ember);border-radius:2px;
  animation:scrollBob 2s ease-in-out infinite;
}
@keyframes scrollBob{
  0%,100%{transform:translateX(-50%) translateY(0);opacity:1}
  50%{transform:translateX(-50%) translateY(10px);opacity:0.3}
}

/* ═══════════════════════════════════════════════
   SECTION BASE
═══════════════════════════════════════════════ */
.section{
  position:relative;
  padding:7rem 2rem;
  overflow:hidden;
}
.section--dark{
  background:linear-gradient(180deg,var(--void),var(--soot) 50%,var(--void));
}
.section--coal{
  background:linear-gradient(180deg,var(--soot),var(--coal) 50%,var(--soot));
}
.section--ember{
  background:linear-gradient(180deg,var(--void),rgba(255,106,26,0.04) 50%,var(--void));
}
.section--crimson{
  background:linear-gradient(180deg,var(--void),rgba(212,32,12,0.04) 30%,rgba(255,106,26,0.03) 70%,var(--void));
}

.section-glow{
  position:absolute;
  width:500px;height:500px;border-radius:50%;
  filter:blur(140px);opacity:0.1;pointer-events:none;
}
.section-glow--left{left:-250px;top:50%;transform:translateY(-50%);background:var(--ember)}
.section-glow--right{right:-250px;top:50%;transform:translateY(-50%);background:var(--crimson)}

.container{max-width:1300px;margin:0 auto;position:relative;z-index:2}

.section-header{text-align:center;margin-bottom:4.5rem}
.section-header__icon{
  font-size:3rem;margin-bottom:1.2rem;display:inline-block;
  filter:drop-shadow(0 0 25px rgba(255,106,26,0.5));
  animation:iconFloat 4s ease-in-out infinite;
}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.section-header__title{
  font-family:var(--font-display);
  font-size:clamp(2rem,5.5vw,3.5rem);
  font-weight:700;color:#fff;
  margin-bottom:0.8rem;
  letter-spacing:0.06em;
}
.section-header__title span{
  background:linear-gradient(90deg,var(--ember),var(--molten));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.section-header__sub{
  font-size:1.15rem;color:var(--text-dim);
  max-width:680px;margin:0 auto;line-height:1.8;
}

/* ═══════════════════════════════════════════════
   3-COLUMN FEATURE CARDS (WITH IMAGES)
═══════════════════════════════════════════════ */
.features-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
  max-width:900px;
  margin-inline:auto;
}
@media(max-width:720px){.features-grid{grid-template-columns:1fr}}
@media(max-width:900px){.features-grid{grid-template-columns:1fr}}

.feature-card{
  position:relative;
  background:linear-gradient(180deg,var(--coal),var(--soot));
  border:1px solid var(--border-faint);
  border-radius:18px;
  text-align:center;
  transition:all 0.45s var(--ease-out);
  overflow:hidden;
}
.feature-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--crimson),var(--ember),var(--molten));
  opacity:0;transition:opacity 0.4s;
  z-index:2;
}
.feature-card:hover{
  border-color:var(--ember);
  transform:translateY(-8px);
  box-shadow:0 25px 60px -15px rgba(255,106,26,0.2);
}
.feature-card:hover::before{opacity:1}

/* Feature card image */
.feature-card__img-wrapper{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
}
.feature-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.6s var(--ease-out);
}
.feature-card:hover .feature-card__img{
  transform:scale(1.06);
}
.feature-card__img-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 40%, var(--soot) 100%);
  pointer-events:none;
}

/* Feature card content */
.feature-card__content{
  padding:1.8rem 2rem 2rem;
}

.feature-card__icon{
  width:60px;height:60px;
  margin:-42px auto 1rem;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;
  background:rgba(255,106,26,0.12);
  border:1px solid rgba(255,106,26,0.25);
  backdrop-filter:blur(10px);
  position:relative;
  z-index:3;
  transition:background 0.3s,border-color 0.3s;
}
.feature-card:hover .feature-card__icon{
  background:rgba(255,106,26,0.2);
  border-color:var(--ember);
}

.feature-card__title{
  font-family:var(--font-display);
  font-size:1.3rem;font-weight:700;color:#fff;
  margin-bottom:0.6rem;
}
.feature-card__text{
  font-size:0.95rem;color:var(--text-dim);line-height:1.75;
}

/* ═══════════════════════════════════════════════
   UPDATES — 3 LATEST (NO IMAGES)
═══════════════════════════════════════════════ */
.updates-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-bottom:3rem;
}
@media(max-width:900px){.updates-grid{grid-template-columns:1fr}}

.update-card{
  position:relative;
  background:linear-gradient(180deg,var(--coal),var(--soot));
  border:1px solid rgba(255,255,255,0.05);
  border-radius:16px;
  overflow:hidden;
  transition:all 0.4s var(--ease-out);
}
.update-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--crimson),var(--ember),var(--molten));
  opacity:0;
  transition:opacity 0.4s;
}
.update-card:hover{
  border-color:var(--ember);
  transform:translateY(-6px);
  box-shadow:0 20px 50px -12px rgba(255,106,26,0.18);
}
.update-card:hover::before{
  opacity:1;
}

.update-card__body{padding:2rem 1.75rem}

.update-card__date{
  font-size:0.75rem;color:var(--ember);
  text-transform:uppercase;letter-spacing:0.12em;
  margin-bottom:0.5rem;
}
.update-card__title{
  font-family:var(--font-display);
  font-size:1.15rem;color:#fff;
  margin-bottom:0.5rem;
}
.update-card__excerpt{
  font-size:0.9rem;color:var(--text-dim);line-height:1.7;
  margin-bottom:1rem;
}

.update-card__link{
  font-weight:700;font-size:0.85rem;
  color:var(--ember-bright);
  letter-spacing:0.06em;
  transition:color 0.3s;
}
.update-card__link:hover{color:var(--molten)}

.update-card__link--disabled{
  color:var(--text-dim);
  cursor:default;
  opacity:0.5;
}

.updates-hub-link{
  text-align:center;
}
.updates-hub-link a{
  display:inline-flex;align-items:center;gap:0.6rem;
  padding:0.7rem 2rem;
  border:1px solid var(--ember);
  border-radius:8px;
  color:var(--ember-bright);
  font-weight:700;font-size:0.9rem;
  letter-spacing:0.08em;text-transform:uppercase;
  transition:all 0.3s var(--ease-out);
}
.updates-hub-link a:hover{
  background:rgba(255,106,26,0.1);
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(255,106,26,0.15);
}

/* ═══════════════════════════════════════════════
   EVENT SECTION (WITH IMAGE)
═══════════════════════════════════════════════ */
.event-banner{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(135deg,var(--coal),var(--soot));
  border:2px solid rgba(251,191,36,0.25);
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:380px;
}
@media(max-width:860px){
  .event-banner{grid-template-columns:1fr}
}

.event-banner__visual{
  position:relative;
  overflow:hidden;
  min-height:280px;
}
.event-banner__img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.6s var(--ease-out);
}
.event-banner:hover .event-banner__img{
  transform:scale(1.04);
}
.event-banner__img-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 50%, var(--soot) 100%),
    radial-gradient(ellipse at 50% 80%, rgba(255,106,26,0.15), transparent 60%);
  pointer-events:none;
}
@media(max-width:860px){
  .event-banner__img-overlay{
    background:
      linear-gradient(180deg, transparent 50%, var(--soot) 100%),
      radial-gradient(ellipse at 50% 80%, rgba(255,106,26,0.15), transparent 60%);
  }
}

.event-banner__info{
  padding:3rem;
  display:flex;flex-direction:column;justify-content:center;
}

.event-tag{
  display:inline-block;width:fit-content;
  padding:0.35rem 1rem;
  background:linear-gradient(135deg,var(--molten),#f59e0b);
  border-radius:100px;
  font-size:0.7rem;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--void);margin-bottom:1rem;
}

.event-banner__title{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,2.5rem);
  font-weight:700;color:#fff;
  margin-bottom:0.6rem;
}
.event-banner__sub{
  font-size:1rem;color:var(--text-dim);
  line-height:1.7;margin-bottom:1.5rem;
}

.event-perks{
  display:flex;flex-wrap:wrap;gap:0.6rem;
  margin-bottom:1.5rem;
}
.event-perk{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.45rem 1rem;
  background:rgba(251,191,36,0.08);
  border:1px solid rgba(251,191,36,0.2);
  border-radius:8px;
  font-size:0.85rem;color:var(--molten);font-weight:600;
}

.event-date{
  font-size:0.85rem;color:var(--text-dim);
}
.event-date strong{color:var(--molten)}

/* ═══════════════════════════════════════════════
   DONATION DEALS / SHOP
═══════════════════════════════════════════════ */
.deals-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-bottom:3rem;
}
@media(max-width:900px){.deals-grid{grid-template-columns:1fr}}

.deal-card{
  position:relative;
  background:linear-gradient(180deg,var(--coal),var(--soot));
  border:1px solid rgba(251,191,36,0.15);
  border-radius:16px;
  padding:2rem;
  text-align:center;
  transition:all 0.4s var(--ease-out);
  overflow:hidden;
}
.deal-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(251,191,36,0.06),transparent 60%);
  pointer-events:none;
}
.deal-card:hover{
  border-color:var(--molten);
  transform:translateY(-6px);
  box-shadow:0 20px 50px -12px rgba(251,191,36,0.18);
}

.deal-card__badge{
  display:inline-block;
  padding:0.3rem 0.9rem;
  background:linear-gradient(135deg,var(--crimson),var(--ember));
  border-radius:100px;
  font-size:0.7rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:#fff;margin-bottom:1rem;
}
.deal-card__badge--hot{background:linear-gradient(135deg,var(--molten),#f59e0b);color:var(--void)}

.deal-card__icon{font-size:3rem;margin-bottom:1rem}

.deal-card__name{
  font-family:var(--font-display);
  font-size:1.2rem;color:#fff;
  margin-bottom:0.4rem;
}
.deal-card__desc{
  font-size:0.9rem;color:var(--text-dim);
  line-height:1.6;margin-bottom:1.2rem;
}

.deal-card__price{
  display:flex;align-items:baseline;justify-content:center;gap:0.5rem;
  margin-bottom:1rem;
}
.deal-card__price-old{
  font-size:1rem;color:var(--text-dim);
  text-decoration:line-through;
}
.deal-card__price-new{
  font-size:1.6rem;font-weight:700;
  color:var(--molten);
}

.btn-gold{
  display:inline-block;
  padding:0.65rem 1.8rem;
  background:linear-gradient(135deg,var(--molten),#f59e0b);
  border:none;border-radius:8px;
  font-family:var(--font-body);font-size:0.9rem;font-weight:700;
  color:var(--void);cursor:pointer;
  letter-spacing:0.06em;text-transform:uppercase;
  transition:all 0.3s var(--ease-spring);
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(251,191,36,0.3);
}

.shop-link{text-align:center;margin-top:1rem}
.shop-link a{
  display:inline-flex;align-items:center;gap:0.6rem;
  padding:0.7rem 2rem;
  border:1px solid var(--molten);
  border-radius:8px;
  color:var(--molten);
  font-weight:700;font-size:0.9rem;
  letter-spacing:0.08em;text-transform:uppercase;
  transition:all 0.3s var(--ease-out);
}
.shop-link a:hover{
  background:rgba(251,191,36,0.1);
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(251,191,36,0.15);
}

/* ═══════════════════════════════════════════════
   PLAYER STATS BAR
═══════════════════════════════════════════════ */
.stats-bar{
  display:flex;justify-content:center;
  flex-wrap:wrap;gap:3rem;
  padding:3rem 2rem;
}
.stat{text-align:center}
.stat__num{
  font-family:var(--font-heading);
  font-size:clamp(2.2rem,5vw,3.5rem);
  color:var(--ember-bright);
  line-height:1;
}
.stat__label{
  font-size:0.85rem;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:0.1em;
  margin-top:0.3rem;
}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.site-footer{
  position:relative;
  padding:5rem 2rem 2.5rem;
  text-align:center;
  background:linear-gradient(180deg,var(--void),#000);
  overflow:hidden;
}
.site-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ember),var(--crimson),transparent);
}

.footer-logo{
  font-family:var(--font-display);
  font-size:2.2rem;font-weight:700;
  background:linear-gradient(180deg,var(--ember),var(--crimson-deep));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:0.6rem;letter-spacing:0.1em;
}
.footer-motto{
  font-style:italic;font-size:1.1rem;color:#444;
  margin-bottom:2rem;
}
.footer-links{
  display:flex;justify-content:center;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:1.5rem;
}
.footer-links a{
  font-size:0.85rem;color:var(--text-dim);
  transition:color 0.3s;
}
.footer-links a:hover{color:var(--ember-bright)}
.footer-copy{
  font-size:0.8rem;color:#333;
  line-height:1.7;
}

/* ═══════════════════════════════════════════════
   REVEAL ANIMATIONS
═══════════════════════════════════════════════ */
.reveal{
  opacity:0;transform:translateY(35px);
  transition:all 0.75s var(--ease-out);
}
.reveal.revealed{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:0.1s}
.reveal-d2{transition-delay:0.2s}
.reveal-d3{transition-delay:0.3s}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:768px){
  .section{padding:5rem 1.5rem}
  .event-banner__info{padding:2rem}
  .stats-bar{gap:2rem}
}
/* ═══════════════════════════════════════════════
   MOBILE NAV / BURGER
═══════════════════════════════════════════════ */
.burger {
  display: none;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  background: transparent;
  border: 1px solid rgba(255,106,26,0.3);
  border-radius: 8px;
  cursor: pointer;
  z-index: 300;
  padding: 0;
  transition: all 0.3s var(--ease-out);
}
.burger:hover {
  border-color: var(--ember);
  background: rgba(255,106,26,0.08);
  box-shadow: 0 0 16px rgba(255,106,26,0.25);
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ember-bright);
  margin: 5px auto;
  border-radius: 2px;
  transition: all 0.35s var(--ease-out);
  box-shadow: 0 0 6px rgba(255,106,26,0.5);
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Slide-in panel */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 340px;
  height: 100vh;
  background: linear-gradient(180deg, var(--soot) 0%, var(--void) 100%);
  border-left: 1px solid var(--border-glow);
  box-shadow: -20px 0 60px rgba(0,0,0,0.7), -5px 0 30px rgba(255,106,26,0.15);
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-out);
  z-index: 250;
  padding: 5.5rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--crimson), var(--ember), var(--molten));
}
.mobile-menu::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255,106,26,0.1), transparent 60%);
  pointer-events: none;
}
.mobile-menu a {
  position: relative;
  display: block;
  padding: 1rem 1.25rem;
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.3s var(--ease-out);
  z-index: 1;
}
.mobile-menu a:hover,
.mobile-menu a.active {
  color: var(--ember-bright);
  background: rgba(255,106,26,0.08);
  border-color: rgba(255,106,26,0.25);
  transform: translateX(6px);
  text-shadow: 0 0 12px rgba(255,106,26,0.5);
}

/* Discord CTA in mobile menu */
.mobile-menu .mobile-cta {
  margin-top: 0.8rem;
  background: linear-gradient(135deg, var(--ember) 0%, var(--crimson) 100%);
  color: #fff !important;
  text-align: center;
  border: none;
  box-shadow: 0 6px 20px rgba(255,106,26,0.25);
}
.mobile-menu .mobile-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255,106,26,0.4);
}

/* Backdrop */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
  z-index: 249;
}
.mobile-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
body.menu-open { overflow: hidden; }

/* Breakpoints */
@media (max-width: 900px) {
  header { height: 90px; }
  .navbar {
    height: 90px;
    padding: 0 1rem;
    margin-top: 0;
    justify-content: flex-start;
  }
  .nav-left,
  .nav-right { display: none; }
  .burger { display: block; }
  .logo-inline {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
  }
  .logo-inline img { width: 180px; }
}
@media (max-width: 480px) {
  .logo-inline img { width: 150px; }
  .mobile-menu { max-width: 85%; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE NAV FIX — center-logo overlap
   ───────────────────────────────────────────────────────────
   The nav has a fixed-width center logo (absolutely positioned)
   with links flowing left and right around it. As the viewport
   narrows or the user zooms, the link groups slide inward and
   collide with the logo before the 900px burger breakpoint.

   Fix: reserve a real centre column (a flex spacer the width of
   the logo) between the two link groups, and step the logo +
   spacer + nav font/gap down together at each breakpoint. The
   spacer physically holds the links apart so they can never
   reach the logo, while everything scales in proportion.

   These rules sit AFTER the originals so they win by source order.
═══════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  /* Three zones: left links | reserved logo gap | right links */
  .navbar { justify-content: space-between; }

  .nav-left,
  .nav-right { flex: 1 1 0; min-width: 0; }
  .nav-left  { justify-content: flex-end;  order: 0; }
  .nav-right { justify-content: flex-start; order: 2; }

  /* Centre spacer = logo width + breathing room. Links cannot enter it. */
  .navbar::before {
    content: "";
    flex: 0 0 480px;
    order: 1;
  }
}

/* Wide desktop (default size) */
@media (min-width: 1400px) {
  .logo-inline img { width: 450px; }
  .navbar::before  { flex-basis: 480px; }
  .nav-left, .nav-right { gap: 40px; }
  .navbar a { font-size: 17px; }
}

/* 1200–1399px */
@media (max-width: 1399px) {
  .logo-inline img { width: 360px; }
  .navbar::before  { flex-basis: 390px; }
  .nav-left, .nav-right { gap: 26px; }
  .navbar a { font-size: 16px; }
}

/* 1050–1199px */
@media (max-width: 1199px) {
  .logo-inline img { width: 300px; }
  .navbar::before  { flex-basis: 325px; }
  .nav-left, .nav-right { gap: 18px; }
  .navbar a { font-size: 15px; letter-spacing: 0.05em; }
}

/* 901–1049px (smallest before burger) */
@media (max-width: 1049px) {
  .logo-inline img { width: 240px; }
  .navbar::before  { flex-basis: 260px; }
  .nav-left, .nav-right { gap: 14px; }
  .navbar a { font-size: 14px; letter-spacing: 0.03em; }
}