/* ═══════════════════════════════════════════════════════════════════════════
   HIGH RUN POKER CLUB — Premium LayerZero-Style Dark Theme
   Aesthetic: Editorial Typography × Subtle System Design × Premium Motion
   ═══════════════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Core Dark Palette */
  --bg-primary:#050506;
  --bg-secondary:#0a0a0c;
  --bg-tertiary:#111114;
  --bg-card:rgba(16,16,20,0.85);
  --bg-card-hover:rgba(22,22,28,0.92);

  /* Accent Colors */
  --accent-pink:#ff5c9d;
  --accent-pink-soft:#ff7eb3;
  --accent-pink-glow:rgba(255,92,157,0.15);
  --accent-pink-subtle:rgba(255,92,157,0.08);
  --accent-gradient:linear-gradient(135deg,#ff5c9d 0%,#ff7eb3 50%,#ffb3d9 100%);

  /* Metallic Accents */
  --silver:#b8b8c0;
  --silver-muted:#6a6a72;
  --silver-dark:#3a3a42;

  /* Text Colors */
  --text-primary:#f0f0f2;
  --text-secondary:#c8c8d0;
  --text-muted:#9a9aa8;
  --text-accent:#ff7eb3;

  /* Status Colors */
  --success:#4ade80;
  --success-soft:rgba(74,222,128,0.15);
  --error:#ff5c5c;
  --warning:#fbbf24;

  /* Glass Effects */
  --glass-bg:rgba(255,255,255,0.02);
  --glass-border:rgba(255,255,255,0.06);
  --glass-border-hover:rgba(255,92,157,0.25);

  /* Shadows */
  --shadow-sm:0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg:0 16px 64px rgba(0,0,0,0.6);
  --shadow-glow:0 0 40px rgba(255,92,157,0.15);
  --shadow-glow-strong:0 0 80px rgba(255,92,157,0.25);

  /* Spacing Scale */
  --space-xs:0.25rem;
  --space-sm:0.5rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2rem;
  --space-2xl:3rem;
  --space-3xl:4rem;
  --space-4xl:6rem;

  /* Container Widths */
  --container-narrow:720px;
  --container-medium:960px;
  --container-wide:1280px;
  --container-full:1440px;

  /* Border Radius */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;

  /* Navigation */
  --nav-height:72px;
  --section-padding:clamp(80px,10vh,120px);

  /* Transitions */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --transition-fast:0.15s var(--ease-out);
  --transition-smooth:0.4s var(--ease-out);
  --transition-slow:0.6s var(--ease-out);
}

/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

html{
  scroll-behavior:smooth;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BACKGROUND SYSTEM — Subtle Grid & Atmospheric Effects
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grid Pattern Overlay */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
  z-index:0;
}

/* Film Grain Texture */
body::after{
  content:'';
  position:fixed;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity:0.02;
  pointer-events:none;
  z-index:0;
}

/* Ambient Gradient Glow */
.bg-ambient{
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%,var(--accent-pink-subtle) 0%,transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 100%,rgba(74,222,128,0.03) 0%,transparent 40%);
  pointer-events:none;
  z-index:0;
  animation:ambientDrift 30s ease-in-out infinite;
}

@keyframes ambientDrift{
  0%,100%{opacity:0.8;transform:translate(0,0)}
  50%{opacity:1;transform:translate(10px,-10px)}
}

/* Scan Line Effect */
.bg-scanline{
  position:fixed;
  inset:0;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,92,157,0.02) 50%,
    transparent 100%
  );
  background-size:100% 400%;
  animation:scanMove 12s linear infinite;
  pointer-events:none;
  z-index:0;
  opacity:0.5;
}

@keyframes scanMove{
  0%{background-position:0 -100%}
  100%{background-position:0 200%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTAINER SYSTEM — Section-Specific Widths
   ═══════════════════════════════════════════════════════════════════════════ */

.container{
  width:100%;
  margin:0 auto;
  padding:0 clamp(1.5rem,4vw,3rem);
  position:relative;
  z-index:1;
}

.container--narrow{max-width:var(--container-narrow)}
.container--medium{max-width:var(--container-medium)}
.container--wide{max-width:var(--container-wide)}
.container--full{max-width:var(--container-full)}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

h1,h2,h3,h4,h5,h6{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.03em;
  color:var(--text-primary);
}

.section-header{
  margin-bottom:clamp(3rem,6vh,5rem);
  width:100%;
}

.section-header--center{
  text-align:center;
}

.section-header--left{
  text-align:left;
}

.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.75rem;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.2em;
  color:var(--accent-pink);
  margin-bottom:1.5rem;
  text-transform:uppercase;
}

.section-eyebrow::before{
  content:'';
  width:24px;
  height:1px;
  background:var(--accent-pink);
}

.section-title{
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:1rem;
  color:var(--text-primary);
  letter-spacing:-0.02em;
}

.section-subtitle{
  font-size:clamp(0.95rem,1.5vw,1.1rem);
  color:var(--text-secondary);
  font-weight:400;
  letter-spacing:0.01em;
  line-height:1.7;
  max-width:560px;
}

.section-header--center .section-subtitle{
  margin:0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

.navbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:1rem 0;
  background:rgba(5,5,6,0.8);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
  transition:all var(--transition-smooth);
}

.navbar.scrolled{
  padding:0.75rem 0;
  background:rgba(5,5,6,0.95);
  box-shadow:var(--shadow-md);
}

.nav-container{
  max-width:var(--container-full);
  margin:0 auto;
  padding:0 clamp(1.5rem,4vw,3rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.nav-logo{
  display:flex;
  align-items:center;
  gap:0.875rem;
  cursor:pointer;
  transition:all var(--transition-smooth);
  flex-shrink:0;
}

.nav-logo:hover{
  transform:translateY(-1px);
}

.logo-img{
  width:40px;
  height:40px;
  border-radius:var(--radius-sm);
  object-fit:cover;
  border:1px solid var(--glass-border);
  transition:all var(--transition-smooth);
}

.nav-logo:hover .logo-img{
  border-color:var(--accent-pink);
  box-shadow:var(--shadow-glow);
}

.logo-text{
  font-family:'Space Grotesk',sans-serif;
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--text-primary);
  transition:color var(--transition-fast);
}

.nav-menu{
  display:flex;
  gap:2.5rem;
  align-items:center;
}

.nav-link{
  font-size:0.8rem;
  font-weight:500;
  color:var(--text-secondary);
  text-decoration:none;
  position:relative;
  transition:all var(--transition-fast);
  letter-spacing:0.08em;
  padding:0.5rem 0;
}

.nav-link::after{
  content:'';
  position:absolute;
  bottom:0;left:0;
  width:0;height:1px;
  background:var(--accent-pink);
  transition:width var(--transition-smooth);
}

.nav-link:hover{
  color:var(--text-primary);
}

.nav-link:hover::after{
  width:100%;
}

.connect-btn{
  padding:0.65rem 1.5rem;
  font-size:0.8rem;
  font-weight:600;
  color:var(--bg-primary);
  background:var(--accent-pink);
  border:none;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:all var(--transition-smooth);
  letter-spacing:0.04em;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}

.connect-btn::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left 0.5s ease;
}

.connect-btn:hover::before{
  left:100%;
}

.connect-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-glow);
}

.connect-btn.connected{
  background:var(--success);
  color:var(--bg-primary);
}

.nav-social,
.nav-menu-footer{
  display:none;
}

.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:24px;
  height:24px;
  cursor:pointer;
}

.hamburger span{
  width:100%;
  height:1.5px;
  background:var(--text-primary);
  border-radius:1px;
  transition:all var(--transition-fast);
  transform-origin:center;
}

.hamburger.active span:first-child{transform:rotate(45deg) translateY(9px)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:last-child{transform:rotate(-45deg) translateY(-9px)}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION INDEX NAV — Minimal Navigation Motif
   ═══════════════════════════════════════════════════════════════════════════ */

.section-index{
  position:fixed;
  left:clamp(1.5rem,3vw,3rem);
  top:50%;
  transform:translateY(-50%);
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

.section-index__item{
  display:flex;
  align-items:center;
  gap:0.75rem;
  text-decoration:none;
  color:var(--text-muted);
  font-size:0.65rem;
  font-weight:500;
  letter-spacing:0.15em;
  transition:all var(--transition-smooth);
  opacity:0.5;
}

.section-index__item:hover,
.section-index__item.active{
  opacity:1;
  color:var(--accent-pink);
}

.section-index__number{
  font-family:'Space Grotesk',monospace;
  font-size:0.7rem;
  font-weight:600;
  width:20px;
  color:var(--accent-pink);
  opacity:0.6;
}

.section-index__item:hover .section-index__number,
.section-index__item.active .section-index__number{
  opacity:1;
}

.section-index__line{
  width:16px;
  height:1px;
  background:var(--silver-dark);
  transition:all var(--transition-smooth);
}

.section-index__item:hover .section-index__line,
.section-index__item.active .section-index__line{
  width:24px;
  background:var(--accent-pink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION — Left-Weighted LayerZero Composition
   ═══════════════════════════════════════════════════════════════════════════ */

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:calc(var(--nav-height) + 4rem) 0 4rem;
  position:relative;
  overflow:hidden;
}

.hero .container{
  max-width:var(--container-full);
}

.hero-layout{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:4rem;
  align-items:center;
}

/* Left Column — Typography */
.hero-content{
  position:relative;
  z-index:2;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0.5rem 1.25rem;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:100px;
  font-weight:600;
  letter-spacing:0.2em;
  color:var(--accent-pink);
  margin-bottom:2rem;
  font-size:0.65rem;
  backdrop-filter:blur(10px);
  opacity:0;
  animation:heroFadeUp 0.8s var(--ease-out) 0.1s forwards;
}

.hero-title{
  font-size:clamp(3.5rem,8vw,6rem);
  margin-bottom:1.5rem;
  line-height:0.95;
  letter-spacing:-0.03em;
  opacity:0;
  animation:heroFadeUp 0.8s var(--ease-out) 0.2s forwards;
}

.hero-title-line{
  display:block;
}

.hero-title-line--keyword{
  position:relative;
  min-height:1.15em;
  overflow:visible;
}

/* Rotating Keyword Container */
.hero-keyword-wrapper{
  display:inline-block;
  position:relative;
  min-width:420px;
  text-align:left;
  vertical-align:baseline;
  height:1.15em;
  overflow:visible;
}

.hero-keyword{
  display:inline-block;
  position:absolute;
  left:0;
  top:0;
  white-space:nowrap;
  opacity:0;
  transform:translateY(12px);
  filter:blur(3px);
  transition:all 0.5s var(--ease-out);
  padding-right:0.1em;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* WORLD - Cyan/Teal (global, expansive) */
.hero-keyword[data-keyword="0"]{
  background:linear-gradient(135deg,#00D9FF 0%,#4ECDC4 50%,#7FEFEA 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

/* MEMBERSHIP - Gold/Amber (exclusive, premium) */
.hero-keyword[data-keyword="1"]{
  background:linear-gradient(135deg,#FFB347 0%,#FFCC70 50%,#FFE29F 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

/* VIP - Purple/Violet (luxury, special) */
.hero-keyword[data-keyword="2"]{
  background:linear-gradient(135deg,#A855F7 0%,#C084FC 50%,#DDA0FF 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

/* PRIVATE - Pink (signature accent) */
.hero-keyword[data-keyword="3"]{
  background:linear-gradient(135deg,#ff5c9d 0%,#ff7eb3 50%,#ffb3d9 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.hero-keyword.active{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

.hero-keyword.exit{
  opacity:0;
  transform:translateY(-12px);
  filter:blur(3px);
}

.hero-subtitle{
  font-size:clamp(1rem,1.8vw,1.2rem);
  color:var(--text-secondary);
  margin-bottom:2.5rem;
  line-height:1.8;
  font-weight:400;
  max-width:480px;
  opacity:0;
  animation:heroFadeUp 0.8s var(--ease-out) 0.4s forwards;
}

/* Right Column — CTA Frame */
.hero-frame{
  position:relative;
  z-index:2;
  opacity:0;
  animation:heroFadeUp 0.8s var(--ease-out) 0.5s forwards;
}

.hero-frame-inner{
  padding:2.5rem;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  backdrop-filter:blur(20px);
}

.hero-stats{
  display:flex;
  gap:3rem;
  margin-bottom:2.5rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--glass-border);
}

.stat-item{
  flex:1;
}

.stat-value{
  font-size:clamp(2rem,4vw,2.75rem);
  font-weight:800;
  font-family:'Space Grotesk',sans-serif;
  background:var(--accent-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.02em;
  margin-bottom:0.25rem;
}

.stat-label{
  font-size:0.7rem;
  color:var(--text-muted);
  letter-spacing:0.15em;
  font-weight:500;
  text-transform:uppercase;
}

.hero-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.hero-actions .btn{
  flex:1;
  min-width:140px;
}

/* Discord CTA Button */
.btn-discord{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.75rem;
  width:100%;
  margin-top:1rem;
  padding:1rem 2rem;
  font-size:0.9rem;
  font-weight:700;
  letter-spacing:0.1em;
  color:#fff;
  background:linear-gradient(135deg,#5865F2 0%,#7B68EE 50%,#5865F2 100%);
  background-size:200% 200%;
  border:none;
  border-radius:var(--radius-md);
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  transition:all 0.4s var(--ease-out);
  box-shadow:
    0 4px 20px rgba(88,101,242,0.35),
    0 0 0 1px rgba(88,101,242,0.2);
  animation:discordBgShift 4s ease-in-out infinite;
  z-index:1;
}

@keyframes discordBgShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.btn-discord:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:
    0 8px 40px rgba(88,101,242,0.5),
    0 0 60px rgba(88,101,242,0.2),
    0 0 0 1px rgba(88,101,242,0.4);
}

.btn-discord__glow{
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  animation:discordShine 3s ease-in-out infinite;
}

@keyframes discordShine{
  0%{left:-100%}
  50%{left:100%}
  100%{left:100%}
}

.btn-discord__pulse{
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(135deg,#5865F2,#7B68EE,#5865F2);
  opacity:0;
  z-index:-1;
  animation:discordPulse 2.5s ease-in-out infinite;
}

@keyframes discordPulse{
  0%,100%{opacity:0;transform:scale(1)}
  50%{opacity:0.4;transform:scale(1.04)}
}

.btn-discord__icon{
  flex-shrink:0;
}

.btn-discord__text{
  position:relative;
}

.btn-discord__badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  font-size:0.55rem;
  font-weight:800;
  letter-spacing:0.12em;
  color:#fff;
  background:rgba(255,255,255,0.18);
  border-radius:100px;
  line-height:1.6;
}

.btn-discord__badge::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 6px #4ade80;
  animation:liveDot 1.5s ease-in-out infinite;
}

@keyframes liveDot{
  0%,100%{opacity:1}
  50%{opacity:0.4}
}

/* Hero Ambient Effects */
.hero::before{
  content:'';
  position:absolute;
  top:0;right:-10%;
  width:700px;height:700px;
  background:radial-gradient(circle,var(--accent-pink-glow) 0%,transparent 60%);
  animation:heroGlow 15s ease-in-out infinite;
  pointer-events:none;
}

.hero::after{
  content:'';
  position:absolute;
  bottom:10%;left:-5%;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(74,222,128,0.06) 0%,transparent 60%);
  animation:heroGlow 20s ease-in-out infinite reverse;
  pointer-events:none;
}

@keyframes heroGlow{
  0%,100%{transform:translate(0,0) scale(1);opacity:0.7}
  50%{transform:translate(20px,-20px) scale(1.05);opacity:1}
}

@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(30px);filter:blur(4px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn{
  padding:0.875rem 2rem;
  font-size:0.85rem;
  font-weight:600;
  border:none;
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all var(--transition-smooth);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  letter-spacing:0.06em;
  position:relative;
  overflow:hidden;
}

.btn-primary{
  color:var(--bg-primary);
  background:var(--accent-pink);
  box-shadow:0 4px 20px rgba(255,92,157,0.25);
}

.btn-primary::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left 0.5s ease;
}

.btn-primary:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 30px rgba(255,92,157,0.4);
}

.btn-primary:hover::before{
  left:100%;
}

.btn-secondary{
  color:var(--text-primary);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
}

.btn-secondary:hover{
  background:var(--accent-pink-subtle);
  border-color:var(--accent-pink);
  color:var(--accent-pink);
  transform:translateY(-2px);
}

.btn:disabled,.btn.disabled{
  opacity:0.4;
  cursor:not-allowed;
  transform:none!important;
  box-shadow:none!important;
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal{
  opacity:0;
  transform:translateY(40px);
  filter:blur(4px);
  transition:all 0.8s var(--ease-out);
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}

/* ═══════════════════════════════════════════════════════════════════════════
   MINT SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.mint-section{
  padding:var(--section-padding) 0;
  position:relative;
}

.mint-section .container{
  max-width:var(--container-wide);
}

.mint-layout{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:4rem;
  align-items:start;
}

/* Left: Preview */
.mint-preview{
  position:sticky;
  top:calc(var(--nav-height) + 2rem);
}

.reveal-box{
  padding:1.5rem;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow-md);
  transition:all var(--transition-smooth);
}

.reveal-box:hover{
  border-color:var(--glass-border-hover);
  box-shadow:var(--shadow-lg),var(--shadow-glow);
  transform:translateY(-4px);
}

.reveal-gif{
  width:100%;
  height:auto;
  border-radius:var(--radius-lg);
  display:block;
}

/* Trust Indicators */
.mint-trust{
  margin-top:1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
}

.trust-badge{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 1rem;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:100px;
  font-size:0.7rem;
  font-weight:500;
  color:var(--text-secondary);
  letter-spacing:0.04em;
}

.trust-badge__icon{
  font-size:0.85rem;
}

.trust-badge--network{
  color:var(--success);
  border-color:rgba(74,222,128,0.2);
}

.contract-badge{
  cursor:pointer;
  transition:all var(--transition-fast);
}

.contract-badge:hover{
  border-color:var(--accent-pink);
  color:var(--accent-pink);
}

/* Right: Mint Card */
.mint-card{
  padding:2.5rem;
  padding-top:0;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow-md);
  animation:mintCardGlow 3s ease-in-out infinite;
  overflow:hidden;
}

@keyframes mintCardGlow{
  0%,100%{
    border-color:var(--glass-border);
    box-shadow:var(--shadow-md);
  }
  50%{
    border-color:rgba(255,92,157,0.3);
    box-shadow:var(--shadow-md),0 0 30px rgba(255,92,157,0.1),0 0 60px rgba(255,92,157,0.05);
  }
}

/* MINTING LIVE Banner */
.mint-card__live{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  padding:0.7rem 1.5rem;
  margin:-0px -2.5rem 2rem;
  background:linear-gradient(135deg,#ff5c9d 0%,#c850c0 40%,#7b68ee 100%);
  background-size:200% 200%;
  animation:liveBannerShift 4s ease-in-out infinite;
  overflow:hidden;
}

@keyframes liveBannerShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.mint-card__live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 8px #4ade80,0 0 16px rgba(74,222,128,0.4);
  animation:liveDot 1.5s ease-in-out infinite;
  flex-shrink:0;
}

.mint-card__live-text{
  font-size:0.7rem;
  font-weight:800;
  letter-spacing:0.2em;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,0.3);
}

.mint-card__live-shine{
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  animation:liveShine 2.5s ease-in-out infinite;
}

@keyframes liveShine{
  0%{left:-100%}
  60%{left:100%}
  100%{left:100%}
}

/* Mint Button Pulse */
.mint-btn{
  animation:mintBtnPulse 2.5s ease-in-out infinite;
}

@keyframes mintBtnPulse{
  0%,100%{box-shadow:0 4px 20px rgba(255,92,157,0.25)}
  50%{box-shadow:0 4px 20px rgba(255,92,157,0.25),0 0 30px rgba(255,92,157,0.3),0 0 60px rgba(255,92,157,0.1)}
}

/* Mint Perks */
.mint-perks{
  margin-top:1.5rem;
  padding:1.25rem;
  background:linear-gradient(135deg,rgba(255,92,157,0.04),rgba(123,104,238,0.04));
  border:1px solid rgba(255,92,157,0.1);
  border-radius:var(--radius-md);
}

.mint-perks__title{
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--accent-pink);
  margin-bottom:1rem;
  text-align:center;
}

.mint-perks__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.75rem;
}

.mint-perks__item{
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.8rem;
  font-weight:500;
  color:var(--text-secondary);
}

.mint-perks__icon{
  font-size:1rem;
  color:var(--accent-pink);
  flex-shrink:0;
  width:20px;
  text-align:center;
}

.mint-card__header{
  margin-bottom:2rem;
}

.mint-card__title{
  font-size:1.5rem;
  margin-bottom:0.5rem;
}

.mint-card__subtitle{
  color:var(--text-muted);
  font-size:0.9rem;
}

.mint-info{
  margin-bottom:2rem;
}

.info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 0;
  border-bottom:1px solid var(--glass-border);
}

.info-row:last-child{border-bottom:none}

.info-label{
  font-weight:500;
  color:var(--text-secondary);
  font-size:0.85rem;
  letter-spacing:0.02em;
}

.info-value{
  font-weight:700;
  color:var(--text-primary);
  font-size:0.95rem;
  font-family:'Space Grotesk','Inter',sans-serif;
}

.total-cost-row{
  background:linear-gradient(135deg,var(--accent-pink-subtle),rgba(74,222,128,0.03));
  margin:1.5rem -1.5rem;
  padding:1.25rem 1.5rem!important;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,92,157,0.15)!important;
}

.total-cost-row .info-value{
  color:var(--accent-pink);
  font-size:1.25rem;
}

/* Supply Progress */
.supply-progress{
  margin-bottom:2rem;
}

.supply-progress__bar{
  height:6px;
  background:var(--bg-tertiary);
  border-radius:3px;
  overflow:hidden;
  margin-bottom:0.5rem;
}

.supply-progress__fill{
  height:100%;
  background:var(--accent-gradient);
  border-radius:3px;
  transition:width 0.5s var(--ease-out);
}

.supply-progress__label{
  display:flex;
  justify-content:space-between;
  font-size:0.75rem;
  color:var(--text-muted);
}

.mint-controls{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  margin-bottom:1.5rem;
}

.amount-control{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

.amount-btn{
  width:48px;
  height:48px;
  font-size:1.25rem;
  font-weight:600;
  color:var(--text-primary);
  background:var(--bg-tertiary);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:all var(--transition-fast);
}

.amount-btn:hover{
  background:var(--accent-pink);
  color:var(--bg-primary);
  border-color:var(--accent-pink);
  transform:scale(1.05);
}

.amount-btn.max-btn{
  width:auto;
  padding:0 1.25rem;
  font-size:0.75rem;
  letter-spacing:0.08em;
}

.amount-input{
  width:90px;
  height:52px;
  text-align:center;
  font-size:1.5rem;
  font-weight:700;
  color:var(--text-primary);
  background:var(--bg-tertiary);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  outline:none;
  font-family:'Space Grotesk','Inter',sans-serif;
  transition:all var(--transition-fast);
  -moz-appearance:textfield;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.amount-input:focus{
  border-color:var(--accent-pink);
  box-shadow:0 0 0 3px var(--accent-pink-glow);
}

.mint-btn{
  width:100%;
  padding:1.125rem 2rem;
  font-size:0.95rem;
}

.mint-notice{
  padding:1rem;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  text-align:center;
}

.mint-notice p{
  font-size:0.8rem;
  color:var(--text-muted);
  margin:0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NFT SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.nft-section{
  padding:var(--section-padding) 0;
  position:relative;
}

.nft-section .container{
  max-width:var(--container-full);
}

.nft-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:3rem;
  align-items:start;
}

.nft-sidebar{
  position:sticky;
  top:calc(var(--nav-height) + 2rem);
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.nft-sidebar .section-header{
  margin-bottom:0;
}

.nft-sidebar .btn{
  width:100%;
}

.nft-grid-container{
  width:100%;
}

.nft-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.75rem;
  width:100%;
}

@media (max-width:1280px){
  .nft-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:960px){
  .nft-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:600px){
  .nft-grid{
    grid-template-columns:1fr;
  }
}

/* Skeleton Loading */
.nft-skeleton{
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

.nft-skeleton__image{
  height:260px;
  background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-secondary) 50%,var(--bg-tertiary) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}

.nft-skeleton__text{
  padding:1.25rem;
  height:24px;
  margin:1rem 1.25rem;
  background:var(--bg-tertiary);
  border-radius:var(--radius-sm);
}

@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

.nft-card{
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:all var(--transition-smooth);
  backdrop-filter:blur(10px);
}

.nft-card:hover{
  transform:translateY(-6px);
  border-color:var(--glass-border-hover);
  box-shadow:var(--shadow-lg),var(--shadow-glow);
}

.nft-card img{
  width:100%;
  height:280px;
  object-fit:cover;
  transition:transform var(--transition-smooth);
}

.nft-card:hover img{
  transform:scale(1.03);
}

.nft-card h3{
  padding:1.25rem;
  font-size:1rem;
  color:var(--text-primary);
  text-align:center;
  border-top:1px solid var(--glass-border);
  margin:0;
}

.nft-card > div[style*="actions"]{
  padding:0 1.25rem 1.25rem;
}

.empty-state{
  grid-column:1/-1;
  text-align:center;
  padding:6rem 2rem;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
}

.empty-icon{
  margin-bottom:1.5rem;
}

.empty-character{
  width:140px;
  height:140px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--glass-border);
  box-shadow:var(--shadow-md);
  animation:gentleFloat 4s ease-in-out infinite;
  filter:grayscale(20%);
}

@keyframes gentleFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.empty-state p{
  font-size:1rem;
  color:var(--text-secondary);
  margin:0.5rem 0;
  max-width:400px;
  margin-left:auto;
  margin-right:auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEMBERS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.members-section{
  position:relative;
  padding:var(--section-padding) 0;
  min-height:70vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(180deg,var(--bg-primary) 0%,#080810 50%,var(--bg-primary) 100%);
}

.members-section::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:800px;height:800px;
  background:radial-gradient(circle,var(--accent-pink-glow) 0%,transparent 50%);
  opacity:0.4;
  pointer-events:none;
  animation:membersPulse 8s ease-in-out infinite;
}

@keyframes membersPulse{
  0%,100%{opacity:0.3;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:0.5;transform:translate(-50%,-50%) scale(1.1)}
}

.members-section .container{
  position:relative;
  z-index:2;
  max-width:var(--container-medium);
}

.members-content{
  text-align:center;
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease,transform 0.8s ease;
}

.members-section.is-visible .members-content{
  opacity:1;
  transform:translateY(0);
}

.members-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0.625rem 1.75rem;
  background:linear-gradient(135deg,var(--accent-pink-subtle),rgba(255,92,157,0.12));
  border:1px solid var(--accent-pink-glow);
  border-radius:100px;
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.25em;
  color:var(--accent-pink);
  margin-bottom:2rem;
  backdrop-filter:blur(10px);
}

.members-headline{
  font-size:clamp(2rem,5vw,3.25rem);
  font-weight:700;
  line-height:1.15;
  margin-bottom:1.5rem;
  background:linear-gradient(180deg,var(--text-primary) 0%,var(--silver) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.members-subheadline{
  font-size:clamp(0.95rem,1.5vw,1.1rem);
  color:var(--text-secondary);
  line-height:1.8;
  margin-bottom:2.5rem;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}

.members-cta{
  position:relative;
  padding:1.125rem 2.5rem;
  font-size:0.9rem;
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--bg-primary);
  background:var(--accent-gradient);
  border:none;
  border-radius:var(--radius-md);
  cursor:pointer;
  overflow:hidden;
  transition:all 0.4s var(--ease-out);
  box-shadow:0 4px 20px rgba(255,92,157,0.3);
}

.members-cta:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 12px 40px rgba(255,92,157,0.4);
}

.members-cta-glow{
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  transition:left 0.6s ease;
}

.members-cta:hover .members-cta-glow{
  left:100%;
}

/* Members Modal */
.members-modal{
  position:fixed;
  inset:0;
  z-index:9500;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease,visibility 0.3s ease;
}

.members-modal.is-open{
  opacity:1;
  visibility:visible;
}

.members-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(12px);
}

.members-modal__content{
  position:relative;
  z-index:1;
  width:90%;
  max-width:420px;
  padding:2.5rem 2rem;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  text-align:center;
  box-shadow:var(--shadow-lg);
  transform:translateY(20px) scale(0.95);
  transition:transform 0.4s var(--ease-out);
}

.members-modal.is-open .members-modal__content{
  transform:translateY(0) scale(1);
}

.members-modal__glow{
  position:absolute;
  top:-1px;left:50%;
  transform:translateX(-50%);
  width:180px;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-pink),transparent);
}

.members-modal__title{
  font-size:1.35rem;
  margin-bottom:1.25rem;
}

.members-modal__message{
  font-size:0.95rem;
  color:var(--text-secondary);
  line-height:1.8;
  margin-bottom:2rem;
}

.members-modal__actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

.members-modal__btn{
  padding:0.75rem 1.75rem;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.04em;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:all 0.3s ease;
  border:none;
}

.members-modal__btn--primary{
  color:var(--bg-primary);
  background:var(--accent-pink);
}

.members-modal__btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-glow);
}

.members-modal__btn--secondary{
  color:var(--text-primary);
  background:var(--bg-tertiary);
  border:1px solid var(--glass-border);
}

.members-modal__btn--secondary:hover{
  border-color:var(--accent-pink);
  color:var(--accent-pink);
}

.members-ambient{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%,rgba(255,92,157,0.04) 0%,transparent 50%),
    radial-gradient(ellipse 50% 50% at 80% 70%,rgba(74,222,128,0.03) 0%,transparent 50%);
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDULE / TIMELINE
   ═══════════════════════════════════════════════════════════════════════════ */

.schedule-section{
  padding:var(--section-padding) 0;
  position:relative;
}

.schedule-section .container{
  max-width:var(--container-wide);
}

.schedule-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:4rem;
  align-items:start;
}

.schedule-sidebar{
  position:sticky;
  top:calc(var(--nav-height) + 2rem);
}

.schedule-progress{
  width:4px;
  height:200px;
  background:var(--bg-tertiary);
  border-radius:2px;
  margin-top:1rem;
  overflow:hidden;
  position:relative;
}

.schedule-progress__fill{
  width:100%;
  background:var(--accent-gradient);
  border-radius:2px;
  transition:height 0.3s var(--ease-out), width 0.3s var(--ease-out);
  position:absolute;
  top:0;
  left:0;
}

.timeline{
  position:relative;
}

.timeline::before{
  content:'';
  position:absolute;
  left:12px;
  top:0;bottom:0;
  width:1px;
  background:linear-gradient(180deg,var(--accent-pink),var(--silver-dark) 50%,transparent);
}

.timeline-item{
  position:relative;
  padding-left:48px;
  margin-bottom:2rem;
  opacity:0;
  transform:translateX(-10px);
  transition:all 0.5s var(--ease-out);
}

.timeline-item.visible{
  opacity:1;
  transform:translateX(0);
}

.timeline-marker{
  position:absolute;
  left:4px;
  top:1.5rem;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--bg-tertiary);
  border:2px solid var(--silver-dark);
  transition:all var(--transition-smooth);
  z-index:2;
}

.timeline-marker.completed{
  background:var(--success);
  border-color:var(--success);
  box-shadow:0 0 12px var(--success-soft);
}

.timeline-marker.active{
  background:var(--accent-pink);
  border-color:var(--accent-pink);
  box-shadow:0 0 0 6px var(--accent-pink-glow);
  animation:markerPulse 2s ease-in-out infinite;
}

@keyframes markerPulse{
  0%,100%{box-shadow:0 0 0 6px var(--accent-pink-glow)}
  50%{box-shadow:0 0 0 10px var(--accent-pink-subtle)}
}

.timeline-content{
  padding:1.5rem;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(10px);
  transition:all var(--transition-smooth);
}

.timeline-content:hover{
  border-color:var(--glass-border-hover);
  transform:translateX(4px);
}

.timeline-content h3{
  font-size:1rem;
  margin-bottom:0.625rem;
  letter-spacing:0.01em;
}

.timeline-content p{
  color:var(--text-secondary);
  line-height:1.7;
  font-size:0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ SECTION — Split Panel
   ═══════════════════════════════════════════════════════════════════════════ */

.faq-section{
  padding:var(--section-padding) 0;
}

.faq-section .container{
  max-width:var(--container-wide);
}

/* Panel Box */
.faq-panel{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow-md);
  min-height:420px;
}

/* Left — Questions */
.faq-panel__questions{
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--glass-border);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--silver-dark) transparent;
}

.faq-q{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.15rem 1.5rem;
  background:none;
  border:none;
  border-bottom:1px solid var(--glass-border);
  cursor:pointer;
  text-align:left;
  font-family:'Inter',sans-serif;
  font-size:0.88rem;
  font-weight:500;
  color:var(--text-secondary);
  transition:all var(--transition-fast);
  position:relative;
}

.faq-q:last-child{
  border-bottom:none;
}

.faq-q::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--accent-pink);
  border-radius:0 2px 2px 0;
  opacity:0;
  transition:opacity var(--transition-fast);
}

.faq-q:hover{
  background:rgba(255,255,255,0.02);
  color:var(--text-primary);
}

.faq-q.active{
  background:var(--accent-pink-subtle);
  color:var(--accent-pink);
  font-weight:600;
}

.faq-q.active::before{
  opacity:1;
}

.faq-q__num{
  font-family:'Space Grotesk',monospace;
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--silver-muted);
  flex-shrink:0;
  width:22px;
  transition:color var(--transition-fast);
}

.faq-q.active .faq-q__num{
  color:var(--accent-pink);
}

.faq-q__text{
  flex:1;
  line-height:1.4;
}

/* Right — Answer */
.faq-panel__answer{
  padding:2.5rem;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--accent-pink) var(--bg-tertiary);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.faq-a{
  display:none;
  color:var(--text-secondary);
  line-height:1.85;
  font-size:0.95rem;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.35s ease,transform 0.35s ease;
  width:100%;
}

.faq-a.fade-in{
  opacity:1;
  transform:translateY(0);
}

.faq-a__title{
  font-size:1.15rem;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:1rem;
  padding-bottom:0.75rem;
  border-bottom:1px solid rgba(255,255,255,0.08);
  letter-spacing:0.02em;
}

.faq-a p{
  margin-bottom:0.75rem;
}

.faq-a p:last-child{
  margin-bottom:0;
}

.faq-a a{
  color:var(--accent-pink);
  text-decoration:none;
  font-weight:600;
  transition:all var(--transition-fast);
}

.faq-a a:hover{
  text-decoration:underline;
}

.faq-a ul,
.faq-a ol{
  margin-left:1.25rem;
  margin-top:0.5rem;
  color:var(--text-secondary);
  line-height:1.85;
  font-size:0.95rem;
}

.faq-a li{
  margin-bottom:0.5rem;
}

.faq-a strong{
  color:var(--text-primary);
}

/* FAQ Prev / Next Nav */
.faq-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:1.5rem;
  border-top:1px solid var(--glass-border);
  width:100%;
}

.faq-nav__btn{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.55rem 1.1rem;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--text-secondary);
  background:var(--bg-tertiary);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:all var(--transition-fast);
  font-family:'Inter',sans-serif;
}

.faq-nav__btn:hover{
  color:var(--accent-pink);
  border-color:var(--accent-pink);
  background:var(--accent-pink-subtle);
  transform:translateY(-1px);
}

.faq-nav__arrow{
  font-size:0.9rem;
  line-height:1;
}

.faq-nav__counter{
  font-family:'Space Grotesk',monospace;
  font-size:0.75rem;
  font-weight:600;
  color:var(--text-muted);
  letter-spacing:0.1em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.footer{
  padding:4rem 0 2rem;
  background:var(--bg-secondary);
  border-top:1px solid var(--glass-border);
  position:relative;
}

.footer .container{
  max-width:var(--container-wide);
}

.footer::before{
  content:'';
  position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:200px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-pink),transparent);
}

.footer-content{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3rem;
}

.footer-logo{
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:opacity var(--transition-fast);
  cursor:pointer;
}

.footer-logo:hover{opacity:0.8}

.footer-logo-img{
  width:48px;
  height:48px;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--glass-border);
}

.footer-title{
  font-size:0.9rem;
  font-weight:700;
  color:var(--text-primary);
  letter-spacing:0.1em;
}

.footer-links,
.footer-social{
  display:flex;
  flex-direction:column;
  gap:0.625rem;
}

.footer-links h4,
.footer-social h4{
  font-size:0.75rem;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:0.5rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.footer-links a{
  color:var(--text-secondary);
  text-decoration:none;
  transition:all var(--transition-fast);
  font-size:0.85rem;
}

.footer-links a:hover{
  color:var(--accent-pink);
  padding-left:4px;
}

.social-links{
  display:flex;
  gap:0.625rem;
}

.social-link{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-secondary);
  background:var(--bg-tertiary);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  transition:all var(--transition-smooth);
}

.social-link:hover{
  background:var(--accent-pink);
  color:var(--bg-primary);
  border-color:var(--accent-pink);
  transform:translateY(-2px);
}

.footer-bottom{
  text-align:center;
  padding-top:2rem;
  border-top:1px solid var(--glass-border);
  color:var(--text-muted);
  font-size:0.8rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:1500;
  align-items:center;
  justify-content:center;
}

.modal.show{display:flex}

.modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(8px);
}

.modal-content{
  position:relative;
  z-index:1501;
  background:var(--bg-card);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:2.5rem;
  max-width:420px;
  width:90%;
  text-align:center;
  animation:modalSlideIn 0.4s var(--ease-out);
}

@keyframes modalSlideIn{
  from{opacity:0;transform:translateY(-20px) scale(0.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.modal-icon{
  font-size:3rem;
  margin-bottom:1.25rem;
}

.modal-content h3{
  font-size:1.35rem;
  margin-bottom:0.75rem;
}

.modal-content p{
  font-size:0.95rem;
  color:var(--text-secondary);
  margin-bottom:1.75rem;
  line-height:1.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */

.loading-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:9000;
  background:rgba(5,5,6,0.95);
  backdrop-filter:blur(20px);
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

.loading-overlay.show{display:flex}

.loading-spinner{
  width:44px;
  height:44px;
  border:2px solid var(--glass-border);
  border-top-color:var(--accent-pink);
  border-radius:50%;
  animation:spin 0.7s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.loading-overlay p{
  margin-top:1.25rem;
  font-size:0.95rem;
  font-weight:500;
  color:var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WALLET MENU
   ═══════════════════════════════════════════════════════════════════════════ */

.walletMenu{
  position:fixed;
  z-index:10050;
  display:none;
  width:min(320px,calc(100vw - 24px));
  padding:10px;
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(20px);
  color:var(--text-primary);
  animation:menuSlideIn 0.25s ease;
}

@keyframes menuSlideIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

.walletMenu.is-open{display:block}

.walletMenu__item,
.walletMenu__row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:var(--radius-sm);
}

.walletMenu__item{
  appearance:none;
  border:1px solid var(--glass-border);
  background:var(--bg-tertiary);
  cursor:pointer;
  color:var(--text-primary);
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.04em;
  transition:all var(--transition-fast);
}

.walletMenu__item:hover{
  transform:translateY(-2px);
  border-color:var(--accent-pink);
  background:var(--accent-pink-subtle);
}

.walletMenu__row{
  background:var(--bg-tertiary);
  border:1px solid var(--glass-border);
}

.walletMenu__label{
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--text-muted);
}

.walletMenu__meta{
  font-size:0.85rem;
  font-weight:700;
  font-family:'Space Grotesk',sans-serif;
}

.walletMenu__sep{
  height:1px;
  margin:8px 10px;
  background:var(--glass-border);
}

.walletMenu__item--danger{
  border-color:rgba(255,92,92,0.2);
  color:var(--error);
}

.walletMenu__item--danger:hover{
  background:rgba(255,92,92,0.1);
  border-color:var(--error);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WALLET MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.wallet-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:2000;
  align-items:center;
  justify-content:center;
}

.wallet-modal.show{display:flex}

.wallet-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(8px);
}

.wallet-modal-content{
  position:relative;
  z-index:2001;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:2rem;
  max-width:400px;
  width:90%;
  max-height:80vh;
  overflow-y:auto;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(20px);
  animation:modalSlideIn 0.4s var(--ease-out);
}

.wallet-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--glass-border);
}

.wallet-modal-header h3{
  font-size:1.25rem;
}

.wallet-modal-close{
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  border:1px solid var(--glass-border);
  background:var(--bg-tertiary);
  color:var(--text-secondary);
  font-size:1.1rem;
  cursor:pointer;
  transition:all var(--transition-fast);
  display:flex;
  align-items:center;
  justify-content:center;
}

.wallet-modal-close:hover{
  background:var(--error);
  color:var(--text-primary);
  border-color:var(--error);
  transform:rotate(90deg);
}

.wallet-modal-body{
  display:flex;
  flex-direction:column;
  gap:0.625rem;
}

.wallet-option{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:0.875rem 1rem;
  background:var(--bg-tertiary);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all var(--transition-fast);
}

.wallet-option:hover{
  background:var(--accent-pink-subtle);
  border-color:var(--accent-pink);
  transform:translateX(4px);
}

.wallet-icon{font-size:1.35rem}
.wallet-name{font-size:0.95rem;font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSACTION TOAST
   ═══════════════════════════════════════════════════════════════════════════ */

.tx-toast{
  position:fixed;
  bottom:2rem;
  right:2rem;
  z-index:9999;
  padding:1rem 1.5rem;
  background:var(--bg-card);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow-lg);
  display:flex;
  align-items:center;
  gap:1rem;
  transform:translateX(calc(100% + 3rem));
  transition:transform 0.4s var(--ease-out);
}

.tx-toast.show{
  transform:translateX(0);
}

.tx-toast--pending{border-color:var(--warning)}
.tx-toast--success{border-color:var(--success)}
.tx-toast--error{border-color:var(--error)}

.tx-toast__icon{font-size:1.5rem}
.tx-toast__text{font-size:0.9rem;font-weight:500}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide section index on smaller screens */
@media (max-width:1200px){
  .section-index{display:none}
}

@media (max-width:1024px){
  .hero-layout{
    grid-template-columns:1fr;
    gap:3rem;
  }

  .hero-content{
    text-align:center;
    max-width:640px;
    margin:0 auto;
  }

  .hero-subtitle{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-keyword-wrapper{
    min-width:320px;
    text-align:center;
    display:block;
    margin:0 auto;
  }

  .hero-keyword{
    left:50%;
    transform:translateX(-50%) translateY(12px);
  }

  .hero-keyword.active{
    transform:translateX(-50%) translateY(0);
  }

  .hero-keyword.exit{
    transform:translateX(-50%) translateY(-12px);
  }

  .hero-frame{
    max-width:500px;
    margin:0 auto;
  }

  .mint-layout{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .mint-preview{
    position:relative;
    top:0;
    max-width:400px;
    margin:0 auto;
  }

  .schedule-layout,
  .faq-layout,
  .nft-layout{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .schedule-sidebar,
  .faq-sidebar,
  .nft-sidebar{
    position:relative;
    top:0;
  }

  .nft-sidebar{
    text-align:center;
    align-items:center;
  }

  .nft-sidebar .section-header{
    text-align:center;
  }

  .nft-sidebar .section-eyebrow::before{
    display:none;
  }

  .nft-sidebar .btn{
    width:auto;
  }

  .schedule-sidebar{
    text-align:center;
    align-items:center;
  }

  .schedule-sidebar .section-header{
    text-align:center;
  }

  .schedule-sidebar .section-eyebrow::before{
    display:none;
  }

  .schedule-progress{
    margin:1rem auto 0;
    width:100%;
    max-width:300px;
    height:6px;
  }

  .footer-content{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:768px){
  .nav-menu{
    position:fixed;
    top:var(--nav-height);
    left:0;right:0;
    height:calc(100vh - var(--nav-height));
    background:rgba(5,5,6,0.98);
    backdrop-filter:blur(20px);
    flex-direction:column;
    padding:2rem 1.5rem;
    gap:0;
    transform:translateX(-100%);
    transition:transform var(--transition-smooth);
    border-right:1px solid var(--glass-border);
  }

  .nav-menu.active{transform:translateX(0)}

  .nav-link{
    font-size:1rem;
    padding:1rem 0;
    width:100%;
    border-bottom:1px solid var(--glass-border);
  }

  .hamburger{display:flex}

  .nav-menu{
    justify-content:flex-start;
  }

  .nav-social{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    margin-top:auto;
    padding-top:2rem;
    border-top:1px solid var(--glass-border);
  }

  .nav-social__title{
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--text-muted);
  }

  .nav-social__icons{
    display:flex;
    gap:0.75rem;
  }

  .nav-social-link{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-secondary);
    background:var(--bg-tertiary);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-sm);
    transition:all var(--transition-smooth);
    text-decoration:none;
  }

  .nav-social-link:hover{
    background:var(--accent-pink);
    color:var(--bg-primary);
    border-color:var(--accent-pink);
    transform:translateY(-2px);
  }

  .nav-menu-footer{
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin-top:1.5rem;
    padding-top:1.5rem;
    border-top:1px solid var(--glass-border);
    opacity:0.4;
  }

  .nav-menu-footer__logo{
    width:32px;
    height:32px;
    border-radius:var(--radius-sm);
    object-fit:cover;
    border:1px solid var(--glass-border);
  }

  .nav-menu-footer__text{
    font-family:'Space Grotesk',sans-serif;
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:0.1em;
    color:var(--text-muted);
  }

  .connect-btn{
    padding:0.5rem 1rem;
    font-size:0.75rem;
  }

  .hero-title{
    font-size:clamp(2.5rem,10vw,4rem);
  }

  .hero-keyword-wrapper{
    min-width:280px;
  }

  .hero-stats{
    flex-direction:column;
    gap:1.5rem;
  }

  .hero-actions{
    flex-direction:column;
  }

  .footer-content{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-logo{align-items:center}
  .social-links{justify-content:center}

  .timeline::before{left:8px}
  .timeline-item{padding-left:40px}
  .timeline-marker{left:0}

  /* NFT Section Mobile */
  .nft-grid-container{
    width:100%;
  }

  .empty-state{
    padding:3rem 1.5rem;
  }

  .empty-state p{
    font-size:0.9rem;
  }

  /* Members Section Mobile */
  .members-headline{
    font-size:clamp(1.75rem,5vw,2.5rem);
  }

  .members-subheadline{
    font-size:0.95rem;
  }

  /* FAQ Mobile */
  .faq-panel{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .faq-panel__questions{
    border-right:none;
    border-bottom:1px solid var(--glass-border);
    max-height:260px;
    overflow-y:auto;
  }

  .faq-panel__answer{
    padding:1.75rem 1.5rem;
    min-height:200px;
  }
}

@media (max-width:640px){
  .logo-text{display:none}

  .mint-card{padding:0 1.25rem 1.75rem}
  .mint-card__live{margin:-0px -1.25rem 1.5rem}
  .mint-perks__grid{grid-template-columns:1fr}

  .amount-btn{width:44px;height:44px}
  .amount-input{width:80px;height:48px;font-size:1.35rem}

  .nft-grid{gap:1rem}

  .hero-keyword-wrapper{
    min-width:220px;
  }

  .reveal-box{padding:1rem}

  .empty-character{width:80px;height:80px}

  /* Section padding */
  :root{
    --section-padding:clamp(60px,8vh,80px);
  }

  /* Container padding */
  .container{
    padding:0 1rem;
  }

  /* Hero mobile */
  .hero-badge{
    font-size:0.6rem;
    padding:0.4rem 1rem;
  }

  .hero-frame-inner{
    padding:1.5rem;
  }

  .stat-value{
    font-size:1.75rem;
  }

  /* Members mobile */
  .members-badge{
    font-size:0.55rem;
    padding:0.5rem 1.25rem;
  }

  .members-cta{
    padding:1rem 2rem;
    font-size:0.85rem;
  }

  /* NFT section mobile center */
  .nft-sidebar{
    align-items:center;
  }

  .nft-sidebar .section-subtitle{
    text-align:center;
  }

  /* FAQ mobile */
  .faq-q{
    padding:1rem 1.25rem;
    font-size:0.82rem;
  }

  .faq-panel__answer{
    padding:1.5rem 1.25rem;
  }

  /* Modal mobile */
  .members-modal__content{
    padding:2rem 1.5rem;
  }

  .members-modal__actions{
    flex-direction:column;
  }

  .members-modal__btn{
    width:100%;
  }

  /* Toast mobile */
  .tx-toast{
    left:1rem;
    right:1rem;
    bottom:1rem;
    transform:translateY(calc(100% + 2rem));
  }

  .tx-toast.show{
    transform:translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELECTION & SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════ */

::selection{
  background:var(--accent-pink);
  color:var(--bg-primary);
}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:var(--silver-dark);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-pink)}

*{scrollbar-width:thin;scrollbar-color:var(--silver-dark) var(--bg-secondary)}

/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS STATES
   ═══════════════════════════════════════════════════════════════════════════ */

:focus-visible{
  outline:2px solid var(--accent-pink);
  outline-offset:2px;
}

button:focus-visible,
a:focus-visible{
  outline:2px solid var(--accent-pink);
  outline-offset:2px;
}

/* Body scroll lock for modals */
body.modal-open{
  overflow:hidden;
}