/* ===== SITE THEME: Midnight Carnival + Lime/Purple accents ===== */
.theme-mc{
  --bg:#121625;      /* page bg (lighter than black) */
  --bg-dark:#0a0b14; /* even darker for contrasts */
  --bg-card:#16182a; /* card backgrounds */
  --fg:#ffffff;      /* text on dark */
  --text:#ffffff;    /* alias for text */
  --text-muted:#9ca3af; /* muted text */
  --accent:#00E5FF;  /* teal neon */
  --teal:#00E5FF;    /* teal alias */
  --accent-2:#8338EC;/* purple neon */
  --purple:#8338EC;  /* purple alias */
  --cta:#FFD166;     /* caramel (unused now) */
  --cta-text:#0b0e14;
  --accent-warm:#8338EC; /* purple (was red) */
  --accent-3:#D8FF3C;    /* neon lime */
  --lime:#D8FF3C;    /* lime alias */
}

/* Page background + base text */
.theme-mc body{background:var(--bg);color:var(--fg)}
.theme-mc{background:var(--bg);color:var(--fg)}

/* HERO (lighter gradient sweep, cross-browser) */
.hero-bg{
  color:var(--fg); padding:96px 0; border-bottom:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(55% 80% at 18% 15%, rgba(0,229,255,.20), transparent 62%),
    radial-gradient(60% 85% at 86% 10%, rgba(131,56,236,.18), transparent 65%),
    linear-gradient(150deg, #0c1f27, #1a1031, #151b2c);
}

/* Cards / panels */
.card{
  backdrop-filter:blur(10px); 
  background:rgba(255,255,255,.04); 
  border:1px solid rgba(255,255,255,.10); 
  border-radius:16px;
}

/* Buttons & links */
.btn, .btn-ghost{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  padding:.9rem 1.2rem; 
  border-radius:14px; 
  font-weight:700; 
  text-decoration:none;
  transition:all .2s;
}
.btn{background:var(--lime); color:var(--bg-dark); box-shadow:0 4px 24px rgba(216,255,60,.4)}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 32px rgba(216,255,60,.6)}
.btn-ghost{color:var(--fg); border:1px solid rgba(255,255,255,.18); background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.06); border-color:var(--lime)}

a.link{color:var(--accent); text-decoration:none}
a.link:hover{text-decoration:underline}

/* Accent utilities */
.accent{color:var(--accent)}
.accent-2{color:var(--accent-2)}
.accent-warm{color:var(--accent-warm)}
.accent-3{color:var(--accent-3)}
.bg-accent-3{background:var(--accent-3); color:#0b0e14}
.bg-warm{background:var(--accent-warm); color:#fff}

/* Typography helpers */
.brand{font-family:'Space Grotesk', Inter, system-ui, sans-serif}
.logo{font-weight:800; letter-spacing:-.5px; font-family:'Space Grotesk', Inter, system-ui, sans-serif}

/* The 5 HOWs - animated hover cards */
.how-list{
  display:grid;
  gap:32px;
  max-width:900px;
}

.how-item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:24px;
  padding:32px;
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  cursor:pointer;
}

.how-item:hover{
  background:var(--teal);
  border-color:var(--teal);
  transform:translateX(8px);
  box-shadow:0 8px 32px rgba(0,229,255,.4);
}

.how-number{
  font-family:'Space Grotesk',sans-serif;
  font-size:72px;
  font-weight:900;
  line-height:1;
  color:var(--lime);
  opacity:.8;
  transition:color .4s;
}

.how-item:hover .how-number{
  color:var(--text);
}

.how-content h3{
  font-size:24px;
  font-weight:700;
  margin-bottom:8px;
  transition:all .4s;
}

.how-item:hover .how-content h3{
  color:var(--bg-card);
  transform:translateY(-8px);
}

.how-content p{
  color:var(--text-muted);
  line-height:1.6;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  transform:translateY(10px);
}

.how-item:hover .how-content p{
  opacity:1;
  max-height:200px;
  color:var(--bg-card);
  transform:translateY(0);
  transition-delay:.1s;
}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06)}