:root{
  --bg:#000;
  --text:#e6e6f0;
  --muted:#a9a9c6;
  --neon-blue:#0066ff;
  --neon-pink:#ff00ff;
  --neon-purple:#a46bff;
  --neon-green:#33ff8c;
  --neon-red:#ff2748;
  --neon-gold:#ffb700;
  --border:rgba(255,255,255,.1);
  /* Typographic system (futuristic) */
  --font-display: "Chakra Petch", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- reset / base --- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);letter-spacing:.01em;overflow-x:hidden}
:lang(ko) body { font-family: "Noto Sans KR", var(--font-body); }
a{color:var(--neon-pink);text-decoration:none}
a:hover{filter:drop-shadow(0 0 6px var(--neon-pink))}

/* Show site immediately - intro removed */
#site-wrapper{opacity:1}

/* Intro handled by intro-lasers.css */

/* ==============================
   FUTURE GRID BACKDROP
   ============================== */
.grid-bg{position:fixed; inset:0; z-index:-2; pointer-events:none; perspective:1000px;
  background: radial-gradient(1200px 800px at 50% -20%, #20124a 0%, #0b0f1d 55%, #060812 100%);
}
.grid-plane{
  position:absolute; left:50%; bottom:-10vh; width:160vw; height:120vh;
  transform:translateX(-50%) rotateX(72deg); transform-origin:center bottom;
  background-image:
    linear-gradient(rgba(123,92,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,217,255,.28) 1px, transparent 1px);
  background-size:38px 38px, 38px 38px; opacity:.22; filter:drop-shadow(0 0 18px rgba(164,107,255,.25));
  animation:gridPulse 8s ease-in-out infinite;
}
@keyframes gridPulse{50%{opacity:.32}}

/* ==============================
   HERO / HEADLINE
   ============================== */
.hero{min-height:100vh;display:grid;place-items:center;text-align:center;overflow:hidden;position:relative}
header, section, footer{position:relative}
.container{max-width:1200px;margin:0 auto;padding:72px 24px}
/* Headlines & section titles (but NOT the main ECLYP5ED title) */
h2,h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;letter-spacing:.08em}
h1{font-size:clamp(2.6rem,6vw,5rem); margin:0 0 18px}
h2{font-size:clamp(1.8rem,3.4vw,2.8rem); margin:0 0 14px}
/* Paragraph styling */
p{line-height:1.65;font-weight:400;color:var(--muted)}

/* ===== HERO LASER SCANNER ===== */
.stage{position:absolute; inset:0; perspective:1200px; pointer-events:none; overflow:hidden}
.scanner{position:absolute; left:50%; top:calc(50% - 140px); width:0; height:0; transform-style:preserve-3d}
.laser{position:absolute; top:-50%; left:-1.5px; width:3px; height:120vh; transform-origin:top center; opacity:0.7}
.laser::before{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 0%, rgba(0,184,255,.3) 20%, rgba(0,184,255,1) 40%, rgba(255,0,255,1) 60%, rgba(255,0,255,.3) 80%, transparent 100%); filter:blur(0.5px)}
.laser::after{content:""; position:absolute; inset:0; background:inherit; filter:blur(4px); transform:scaleX(3)}
.laser.alt::before{background:linear-gradient(to bottom, transparent 0%, rgba(255,0,255,.3) 20%, rgba(255,0,255,1) 40%, rgba(0,184,255,1) 60%, rgba(0,184,255,.3) 80%, transparent 100%)}

/* Initial sweep animation */
@keyframes initialSweep {
  0% { 
    transform: rotate(var(--r, 0deg)) rotateY(0deg) scaleY(1.5); 
    opacity: 0; 
    filter: brightness(2) blur(0.8px);
  }
  5% { opacity: 1.8; }
  95% { opacity: 1.8; }
  100% { 
    transform: rotate(var(--r, 0deg)) rotateY(360deg) scaleY(1); 
    opacity: 0.7; 
    filter: brightness(1) blur(0.5px);
  }
}
.laser { animation: initialSweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards, laserPulse 3s ease-in-out infinite 1.2s; }

/* Radial laser positions and animations */
.laser:nth-child(1){--r:0deg; animation-delay:0s, 2s}
.laser:nth-child(2){--r:30deg; animation-delay:0.05s, 2.2s}
.laser:nth-child(3){--r:60deg; animation-delay:0.1s, 2.4s}
.laser:nth-child(4){--r:90deg; animation-delay:0.15s, 2.6s}
.laser:nth-child(5){--r:120deg; animation-delay:0.2s, 2.8s}
.laser:nth-child(6){--r:150deg; animation-delay:0.25s, 3s}
.laser:nth-child(7){--r:180deg; animation-delay:0.3s, 3.2s}
.laser:nth-child(8){--r:210deg; animation-delay:0.35s, 3.4s}
.laser:nth-child(9){--r:240deg; animation-delay:0.4s, 3.6s}
.laser:nth-child(10){--r:270deg; animation-delay:0.45s, 3.8s}
.laser:nth-child(11){--r:300deg; animation-delay:0.5s, 4s}
.laser:nth-child(12){--r:330deg; animation-delay:0.55s, 4.2s}
/* Extra lasers for initial sweep */
.laser:nth-child(13){--r:15deg; animation-delay:0.02s, 4.3s}
.laser:nth-child(14){--r:45deg; animation-delay:0.07s, 4.4s}
.laser:nth-child(15){--r:75deg; animation-delay:0.12s, 4.5s}
.laser:nth-child(16){--r:105deg; animation-delay:0.17s, 4.6s}
.laser:nth-child(17){--r:135deg; animation-delay:0.22s, 4.7s}
.laser:nth-child(18){--r:165deg; animation-delay:0.27s, 4.8s}
.laser:nth-child(19){--r:195deg; animation-delay:0.32s, 4.9s}
.laser:nth-child(20){--r:225deg; animation-delay:0.37s, 5s}
.laser:nth-child(21){--r:255deg; animation-delay:0.42s, 5.1s}
.laser:nth-child(22){--r:285deg; animation-delay:0.47s, 5.2s}
.laser:nth-child(23){--r:315deg; animation-delay:0.52s, 5.3s}
.laser:nth-child(24){--r:345deg; animation-delay:0.57s, 5.4s}

@keyframes laserPulse{
  0%,100%{opacity:0.3; transform:rotate(var(--r, 0deg)) scaleY(0.8)}
  50%{opacity:0.9; transform:rotate(var(--r, 0deg)) scaleY(1.2)}
}

/* ===== HERO NEON RING ===== */
.neon-ring{width:min(45vmin,380px);height:min(45vmin,380px);border-radius:50%;margin:40px auto 30px;position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
@media (max-width: 768px) {
  .neon-ring{margin:80px auto 30px}
}
.neon-ring::before{
  content:"";position:absolute;inset:-60px;border-radius:50%;
  background: radial-gradient(circle at 50% 0%, #00b8ff 0%, #ff00ff 50%, #00b8ff 100%);
  filter: blur(35px);
  opacity: 0.8;
}
.neon-ring::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:#000;
  box-shadow: 0 0 80px 20px rgba(0,184,255,0.5), 0 0 120px 40px rgba(255,0,255,0.3);
}
.hero-logo{position:relative;z-index:2;width:115%;height:115%;object-fit:contain}

.hero-title{z-index:2}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; clip-path: inset(0 0 0 0);
}
.glitch::before{color:var(--neon-blue); transform:translate(2px,0); mix-blend-mode:screen; opacity:.7}
.glitch::after{color:var(--neon-pink); transform:translate(-2px,0); mix-blend-mode:screen; opacity:.7}

.substrap{color:#c8c9ff; opacity:.9; text-transform:uppercase; font-family:var(--font-mono); letter-spacing:.06em; font-weight:400; margin-bottom:12px}
.release-dates{margin:12px 0 20px;padding:16px;border:1px solid rgba(164,107,255,.3);border-radius:12px;background:rgba(164,107,255,.08)}
.release-dates p{margin:4px 0;font-family:var(--font-mono);font-size:0.9rem;color:#e6e6f0;text-transform:uppercase;letter-spacing:.05em}
.release-dates p:first-child{color:#00b8ff}
.release-dates p:last-child{color:#ff00ff}
.strap{color:#a9a9c6; margin-bottom:24px}
.cta-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.btn{
  --glow:var(--neon-pink);
  display:inline-block; padding:14px 22px; border-radius:999px; color:#fff;
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid var(--border);
  background:linear-gradient(90deg, rgba(255,66,198,.14), rgba(43,217,255,.14));
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  text-decoration:none;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 0 26px 2px var(--glow); filter:none}

/* Pre-order button special styling */
.btn-preorder {
  --glow: #ff2748;
  background: linear-gradient(135deg, #ff2748, #ff00ff, #0066ff);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
  border: none;
  box-shadow: 0 0 30px rgba(255, 39, 72, 0.5), 0 0 60px rgba(255, 0, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-preorder::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(45deg) translateX(-100%) translateY(-100%);
  transition: all 0.6s ease;
}

.btn-preorder:hover::before {
  transform: rotate(45deg) translateX(100%) translateY(100%);
}

.btn-preorder:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 40px rgba(255, 39, 72, 0.7), 0 0 80px rgba(255, 0, 255, 0.5);
}

/* Add Apple Music icon */
.btn-preorder::after {
  content: '🎵';
  margin-left: 8px;
  display: inline-block;
  font-size: 1.1em;
}

/* panels / cards */
.panel{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid var(--border); border-radius:24px; padding:30px; backdrop-filter: blur(8px)}
.tag{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid var(--border);color:#cbd0ff;font-size:.82rem;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;background:rgba(123,92,255,.12)}

/* debut */
.debut-grid{display:grid; gap:24px; grid-template-columns:1.1fr .9fr; align-items:stretch}
@media (max-width: 768px) {
  .debut-grid{grid-template-columns:1fr}
}
.holo{position:relative;border-radius:18px;border:1px solid var(--border);padding:18px;background:linear-gradient(180deg, rgba(164,107,255,.08), rgba(43,217,255,.06));overflow:hidden}
.holo::after{content:"";position:absolute;inset:-1px;background:conic-gradient(from 180deg, rgba(43,217,255,.18), rgba(255,66,198,.18), rgba(164,107,255,.18), rgba(43,217,255,.18));filter:blur(24px);opacity:.3;z-index:-1}
/* Custom Audio Player */
.custom-player {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.custom-player::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(0, 102, 255, 0.05), transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(255, 0, 255, 0.05), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-player:hover::before {
  opacity: 1;
}

.custom-player:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 30px rgba(164, 107, 255, 0.1);
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.player-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.track-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e6e6f0;
}

.track-duration {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #a9a9c6;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.custom-player .play-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #0066ff, #ff00ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(164, 107, 255, 0.3);
  flex-shrink: 0;
}

.custom-player .play-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(164, 107, 255, 0.5);
}

.custom-player .play-btn:active {
  transform: scale(0.98);
}

.custom-player .play-btn svg {
  width: 20px;
  height: 20px;
}

.progress-container {
  flex: 1;
  cursor: pointer;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0066ff, #ff00ff);
  border-radius: 3px;
  width: 0%;
  transition: width 0.1s ease;
  box-shadow: 0 0 10px rgba(0, 102, 255, 0.5);
}

/* Playing state animation */
.custom-player.playing {
  background: rgba(255, 255, 255, 0.05);
}

.custom-player.playing .play-btn {
  box-shadow: 0 0 40px rgba(164, 107, 255, 0.6);
}

.custom-player.playing .progress-fill {
  animation: pulse-glow 2s ease infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 102, 255, 0.5); }
  50% { box-shadow: 0 0 20px rgba(164, 107, 255, 0.8); }
}

/* Hide default audio element */
.custom-player audio {
  display: none;
}

/* ===== Members Section - COMMENTED OUT - Using members-clean.css ===== */
/*
.members-line { 
  position: relative; 
  padding: 60px 0;
}
.members-line h2{ 
  margin-bottom: 10px; 
  text-align: center;
}
.members-sub{ 
  color:#a9a9c6; 
  margin:0 0 40px; 
  text-align: center;
}

/* Member cards row */
.member-strip{
  display:flex; 
  justify-content:center; 
  align-items:center; 
  gap:20px;
  list-style:none; 
  margin:0; 
  padding:0;
  flex-wrap:wrap;
}

/* Individual card */
.member-card{
  width: 180px;
  height: 240px;
  position:relative;
  perspective:1200px;
}

.member-card .card-inner{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition: transform 0.6s;
  cursor:pointer;
  border:none;
  padding:0;
  background:transparent;
}

.member-card .card-face{
  position:absolute;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  border-radius:16px;
  overflow:hidden;
  background:#111;
  border:1px solid rgba(255,255,255,0.1);
}

.member-card .front{
  display:flex;
  flex-direction:column;
}

.member-card .front img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.member-card .name{
  padding:12px;
  text-align:center;
  background:rgba(0,0,0,0.8);
  font-weight:700;
  color:#fff;
}

.member-card .back{
  transform:rotateY(180deg);
  padding:20px;
  background:#000;
  display:none;
}
.member-card .back h3{ 
  margin:0; font-size:2.5rem; font-weight:900; 
  text-transform:uppercase; letter-spacing:2px;
  background: linear-gradient(135deg, #fff, var(--laser-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.member-card .back h3 em{font-style:normal; opacity:.6; font-size:.5em; display:block; margin-top:5px}

.member-card .back .bio-meta{
  display:flex; flex-direction:column; gap:8px;
}
.member-card .back .real-name{
  color:#fff; font-size:1.3rem; font-weight:600;
  text-shadow: 0 0 20px var(--laser-color);
}
.member-card .back .role{
  color:var(--laser-color); font-size:1.1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:3px;
  opacity:0.9;
}

.member-card .back .quick-stats{
  display:grid; gap:12px;
  padding:20px; 
  background: rgba(255,255,255,0.03);
  border-radius:10px;
  border: 1px solid rgba(255,255,255,0.1);
}
.member-card .back .stat-line{
  display:flex; gap:10px;
  font-size:1.1rem;
  align-items:baseline;
}
.member-card .back .stat-line strong{
  color:var(--laser-color);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  min-width:120px;
}
.member-card .back .stat-line span{
  color:#fff;
  font-weight:300;
}

.member-card .back .bio-text{ 
  color:#e0e0ff; font-size:1.15rem; line-height:1.8; 
  font-weight:300; letter-spacing:0.5px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.1);
}

/* Member colors */
.member-card[data-color="blue"] { --laser-color: #00b8ff; }
.member-card[data-color="red"] { --laser-color: #ff2748; }
.member-card[data-color="purple"] { --laser-color: #a46bff; }
.member-card[data-color="green"] { --laser-color: #33ff8c; }
.member-card[data-color="pink"] { --laser-color: #ff00ff; }

/* Expanded card state */
.member-card.expanded .card-inner {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 90vw);
  height: min(600px, 80vh);
  z-index: 100;
}

.member-card.expanded .back {
  display: block !important;
  transform: rotateY(0) !important;
  padding: 40px;
  background: #000;
  border: 2px solid var(--laser-color);
}

.member-card.expanded.show-bio .front {
  display: none;
}

/* X close button */
.member-card .card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.member-card.expanded .card-close {
  display: flex;
}

/* Expanded state = centered, big, flipped */
#bio-backdrop{
  position:fixed; inset:0; background: radial-gradient(80vmax 60vmax at 50% 50%, rgba(123,92,255,.22), rgba(0,0,0,.88));
  backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; transition:opacity 260ms ease; z-index:40;
}
.bio-close{
  position:fixed; top:20px; right:20px; z-index:60; opacity:0; pointer-events:none;
  width:40px; height:40px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3); background:rgba(0,0,0,.8); 
  color:#fff; font-size:24px; font-weight:300; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 200ms ease;
  backdrop-filter: blur(10px);
}
.bio-close:hover{
  background:rgba(255,255,255,.1);
  border-color:var(--neon-pink);
  transform:scale(1.1);
}

.member-card.expanded{
  /* Card stays in place, inner content expands */
}
.member-card.expanded .card-inner{
  width:var(--expandW); height:var(--expandH);
  transform: scale(1);
  box-shadow:0 40px 140px rgba(0,0,0,.6), 0 0 80px rgba(164,107,255,.25);
  animation: popIn 360ms cubic-bezier(.2,.9,.2,1) both;
  position: relative;
  overflow: hidden;
}
@keyframes popIn{
  0%{ transform:scale(.92); opacity:.6 }
  100%{ transform:scale(1); opacity:1 }
}

/* Laser wipe transition */
.member-card.expanded .card-face{
  position:absolute;
  width:100%; height:100%;
  inset:0;
  transition: none;
}
.member-card.expanded .front{
  z-index:2;
  transform: none;
}
.member-card.expanded .back{
  z-index:1;
  transform: none;
  opacity:1;
}

/* Reset transforms for expanded state */
.member-card.expanded .card-inner{
  position:fixed;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width:var(--expandW); 
  height:var(--expandH);
  z-index:100;
}
.member-card.expanded .card-face{
  position:absolute;
  width:100%; height:100%;
  inset:0;
  backface-visibility: visible !important;
}
.member-card.expanded .front{
  z-index:2;
  transform: rotateY(0deg) !important;
  display:block;
}
.member-card.expanded .back{
  z-index:1;
  transform: rotateY(0deg) !important;
  opacity:1;
  display:grid;
}

/* Laser wipe effect */
.member-card.expanded.show-bio .front{
  animation: laserWipe 800ms ease-out forwards;
}
.member-card.expanded.show-bio .front::after{
  content:'';
  position:absolute;
  top:0; left:-10%;
  width:20%; height:100%;
  background: linear-gradient(90deg, transparent, var(--laser-color, #00b8ff) 50%, transparent);
  filter: blur(2px);
  animation: laserSweep 800ms ease-out forwards;
}

@keyframes laserWipe{
  to{ transform: translateX(100%); opacity:0; }
}
@keyframes laserSweep{
  to{ transform: translateX(600%); }
}

/* Scanlines and glow effects on bio */
.member-card.expanded.show-bio .back::before{
  content:'';
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    transparent 0 2px,
    rgba(var(--scan-rgb, 0,184,255), 0.03) 2px 4px
  );
  pointer-events:none;
  animation: scanlines 8s linear infinite;
}
.member-card.expanded.show-bio .back::after{
  content:'';
  position:absolute;
  inset:-20px;
  background: radial-gradient(ellipse at center, transparent 40%, var(--laser-color) 100%);
  opacity:0.1;
  filter: blur(40px);
  pointer-events:none;
}
@keyframes scanlines{
  to{ transform: translateY(10px); }
}

/* Member-specific laser colors */
.member-card[data-color="blue"] { --laser-color: #00b8ff; --scan-rgb: 0,184,255; }
.member-card[data-color="red"] { --laser-color: #ff2748; --scan-rgb: 255,39,72; }
.member-card[data-color="purple"] { --laser-color: #a46bff; --scan-rgb: 164,107,255; }
.member-card[data-color="green"] { --laser-color: #33ff8c; --scan-rgb: 51,255,140; }
.member-card[data-color="pink"] { --laser-color: #ff00ff; --scan-rgb: 255,0,255; }

/* When expanded, show backdrop + close */
.member-card.expanded ~ #bio-backdrop,
.member-card.expanded ~ .bio-close{ opacity:1; pointer-events:auto }

/* X close button on each card */
.member-card .card-close{
  position:absolute; top:15px; right:15px; z-index:100;
  width:36px; height:36px; border-radius:50%;
  border:2px solid rgba(255,255,255,.2); 
  background:rgba(0,0,0,.8); 
  color:#fff; font-size:20px; font-weight:300; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 200ms ease;
  backdrop-filter: blur(10px);
  opacity:0; pointer-events:none;
}
.member-card.expanded .card-close{
  opacity:1; pointer-events:auto;
}
.member-card .card-close:hover{
  background:rgba(255,255,255,.1);
  border-color:var(--laser-color);
  transform:scale(1.1) rotate(90deg);
}

/* Accessibility focus ring */
.member-card .card-inner:focus-visible{ box-shadow:0 0 0 3px rgba(43,217,255,.6) }

/* Motion fallback */
@media (prefers-reduced-motion: reduce){
  .member-card .card-inner, .member-card.expanded .card-inner{ transition:none; animation:none }
}

*/
/* ===== ABOUT THE BAND SECTION ===== */
.about-band{padding:80px 24px}
.about-tagline{text-align:center;font-size:clamp(0.75rem,1.5vw,0.875rem);font-family:var(--font-mono);letter-spacing:0.2em;color:rgba(255,255,255,0.7);margin-bottom:48px;text-transform:uppercase}

.about-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media (min-width:768px){
  .about-grid{grid-template-columns:5fr 7fr}
}

/* Image side */
.about-figure{margin:0}
.about-image-wrapper{
  position:relative;
  padding:1px;
  background:linear-gradient(135deg,rgba(0,184,255,0.4),rgba(255,0,255,0.4),rgba(255,183,0,0.4));
  border-radius:24px;
}
.about-image{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:23px;
  filter:contrast(1.1);
}

/* Content side */
.about-panel{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:24px;
  padding:40px;
  backdrop-filter:blur(8px);
}
@media (max-width:768px){
  .about-panel{padding:24px}
}

.about-title{
  font-size:clamp(1.8rem,3vw,2.5rem);
  font-family:var(--font-display);
  font-weight:600;
  margin:0 0 24px;
}
.gradient-text{
  background:linear-gradient(135deg,#00b8ff,#a46bff,#ff00ff,#ff2748,#33ff8c);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
  filter: drop-shadow(0 0 20px rgba(164,107,255,0.5));
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.about-text{
  line-height:1.7;
  color:rgba(255,255,255,0.85);
  margin:0 0 16px;
}

/* Color legend */
.color-legend{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}
.legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;
  font-size:0.875rem;
  color:rgba(255,255,255,0.8);
}
.legend-chip{
  width:24px;
  height:8px;
  border-radius:999px;
}
.legend-chip.blue{background:#0066ff}
.legend-chip.red{background:#ff2748}
.legend-chip.purple{background:#a46bff}
.legend-chip.green{background:#33ff8c}
.legend-chip.gold{background:#ffb700}

/* About section animations - start visible */
.about-tagline, .about-figure, .about-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Only animate if JS is available */
.js-enabled .about-tagline, .js-enabled .about-figure, .js-enabled .about-content {
  opacity: 0;
  transform: translateY(20px);
}
.js-enabled .about-figure {
  transform: translateX(-20px) translateY(0);
}
.js-enabled .about-content {
  transform: translateX(20px) translateY(0);
}
.js-enabled .about-tagline.in-view, 
.js-enabled .about-figure.in-view, 
.js-enabled .about-content.in-view {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* socials & contact */
.socials{display:flex;gap:12px;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--text);transition:all .2s ease}
.socials a:hover{box-shadow:0 0 20px var(--neon-pink);border-color:var(--neon-pink)}

/* socials section */
.socials-section{padding-bottom:80px}
form{display:grid;gap:12px;max-width:680px}
input,textarea{background:#0b0d16;border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:#fff;font-family:inherit;transition:border-color .2s ease}
input:focus,textarea:focus{outline:none;border-color:var(--neon-blue);box-shadow:0 0 0 2px rgba(43,217,255,.2)}
button[type="submit"]{cursor:pointer}

/* Captcha styling */
.captcha-box{display:grid;gap:8px;padding:16px;background:rgba(164,107,255,.08);border:1px solid rgba(164,107,255,.3);border-radius:12px}
.captcha-question{display:flex;gap:12px;align-items:center;font-family:var(--font-mono);color:#c8c9ff}
.captcha-question span:first-child{color:var(--neon-purple);font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:.85rem}
#captchaQuestion{color:#fff;font-size:1.1rem}
#captchaAnswer{background:rgba(0,0,0,.4);border-color:rgba(164,107,255,.4)}
#captchaAnswer:focus{border-color:var(--neon-purple);box-shadow:0 0 0 2px rgba(164,107,255,.3)}

/* Form error styling */
.form-error{padding:12px 16px;background:rgba(255,39,72,.1);border:1px solid rgba(255,39,72,.4);border-radius:8px;color:#ff7c93;font-size:0.9rem;text-align:center}

/* language switcher */
.lang-switch{position:fixed;right:16px;top:16px;z-index:5;display:flex;gap:6px;flex-wrap:wrap;max-width:240px;justify-content:flex-end}
.lang-switch button{background:#0b0d16;border:1px solid var(--border);color:#cbd0ff;padding:6px 10px;border-radius:10px;cursor:pointer;transition:all .2s ease;font-size:0.85rem;display:flex;align-items:center;gap:4px}
.lang-switch button .flag{font-size:1rem}
.lang-switch button.active{outline:2px solid var(--neon-blue);box-shadow:0 0 10px var(--neon-blue)}
.lang-switch button:hover:not(.active){border-color:var(--neon-purple)}

footer{border-top:1px solid var(--border);background:linear-gradient(180deg,transparent,rgba(255,255,255,.03));text-align:center}
.tiny{font-size:.8rem;color:#8085b1}