/* ═══════════════════════════════════════════════════════════════════════════════
   THE CULT OF FOUR - INDUSTRIAL STEAMPUNK THEME
   Applied to existing HTML structure
   ═══════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Rajdhani:wght@300;400;600;700&family=Share+Tech+Mono&display=swap');

:root {
  /* Void & Darkness */
  --void: #050608;
  --abyss: #0a0c10;
  --deep: #0f1216;
  --slate: #161a20;
  --iron: #1e242c;
  --steel: #2a323c;
  --gunmetal: #3d4654;

  /* Atmospheric */
  --haze: #4a5a6a;
  --fog: #6a7a8a;
  --mist: #8a9aaa;

  /* Industrial Warm */
  --rust: #5c3a1e;
  --copper: #8b5a2b;
  --bronze: #a67c52;
  --furnace: #ff4500;
  --ember: #ff6b35;

  /* Binance Sacred Gold */
  --gold: #f0b90b;
  --gold-bright: #ffd93d;
  --gold-dim: #c99a08;
  --gold-dark: #8b6914;

  /* Text */
  --text-bright: #f0ebe3;
  --text-primary: #c8c4bc;
  --text-dim: #fffaf3;
  --text-muted: #836934;

  /* Fonts */
  --font-display: 'Cinzel', serif;
  --font-ui: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BASE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-ui) !important;
  background: linear-gradient(180deg, var(--abyss) 0%, var(--void) 50%, #030405 100%) !important;
  overflow-x: hidden;
}


body::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E") !important;
  opacity: 0.4 !important;
  animation: none !important;
}


body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(240, 185, 11, 0.06) 0%, transparent 50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  animation: industrialPulse 10s ease-in-out infinite;
}

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

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

h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.5rem, 4vw, 3rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  color: var(--text-bright) !important;
  text-shadow:
    0 0 30px rgba(240, 185, 11, 0.4),
    0 0 60px rgba(240, 185, 11, 0.2) !important;
  animation: titleGlowIndustrial 5s ease-in-out infinite !important;
}

@keyframes titleGlowIndustrial {
  0%, 100% {
    text-shadow:
      0 0 30px rgba(240, 185, 11, 0.4),
      0 0 60px rgba(240, 185, 11, 0.2);
  }
  50% {
    text-shadow:
      0 0 45px rgba(240, 185, 11, 0.6),
      0 0 90px rgba(240, 185, 11, 0.3);
  }
}

h2 {
  font-family: var(--font-ui) !important;
  font-size: clamp(0.85rem, 2vw, 1.1rem) !important;
  font-weight: 300 !important;
  letter-spacing: 0.3em !important;
  color: var(--haze) !important;
  text-shadow: 0 0 10px rgba(240, 185, 11, 0.1) !important;
}

p {
  font-family: var(--font-ui) !important;
  color: var(--text-dim) !important;
  line-height: 1.8 !important;
  font-weight: 300 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SOCIAL ICONS - INDUSTRIAL STYLE
   ═══════════════════════════════════════════════════════════════════════════════ */

.social-icons {
  position: fixed !important;
  top: 1.5rem !important;
  right: 2rem !important;
  left: auto !important;
  z-index: 1000 !important;
}

.social-icons ul {
  display: flex !important;
  gap: 0.5rem !important;
}

.social-icons li {
  padding: 0 !important;
  background: rgba(30, 36, 44, 0.6) !important;
  border: 1px solid var(--steel) !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.social-icons li:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 20px rgba(240, 185, 11, 0.4) !important;
  padding: 0 !important;
}

.social-icons li a {
  color: var(--text-dim) !important;
  font-size: 1rem !important;
  text-shadow: none !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.social-icons li:hover a {
  color: var(--void) !important;
  top: 0 !important;
  transform: none !important;
}

/* SVG Icons styling - White logos */
.social-icons li a.svg-icon {
  padding: 0 !important;
}

.social-icons li a.svg-icon img {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  filter: brightness(0) invert(1) opacity(0.7) !important;
  transition: all 0.3s ease !important;
}

.social-icons li:hover a.svg-icon img {
  filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 8px rgba(240, 185, 11, 0.8)) !important;
  transform: scale(1.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COUNTDOWN - INDUSTRIAL GAUGE STYLE
   ═══════════════════════════════════════════════════════════════════════════════ */

#coundown-holder {
  position: fixed !important;
  bottom: 2rem !important;
  right: 2rem !important;
  text-align: center !important;
  background: rgba(14, 18, 22, 0.9) !important;
  padding: 1.5rem 2rem !important;
  border: 1px solid var(--iron) !important;
  backdrop-filter: blur(10px) !important;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  z-index: 100 !important;
}

/* Industrial rivets on countdown */
#coundown-holder::before,
#coundown-holder::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, var(--gunmetal) 30%, var(--steel) 70%);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

#coundown-holder::before {
  top: 12px;
  left: 12px;
}

#coundown-holder::after {
  bottom: 12px;
  right: 12px;
}

#counter-caption {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.3em !important;
  color: var(--haze) !important;
  text-shadow: 0 0 15px rgba(240, 185, 11, 0.3) !important;
  margin-bottom: 1rem !important;
  line-height: 1.4 !important;
  animation: none !important;
  text-align: center !important;
}

#counter-caption hr {
  margin: 0.75rem auto 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  border: 0 !important;
  border-top: 1px solid var(--gold-dark) !important;
  opacity: 0.6 !important;
  animation: none !important;
  box-shadow: 0 0 8px rgba(240, 185, 11, 0.3) !important;
}

/* Gauge container for each time unit */
.dash {
  display: inline-block !important;
  position: relative !important;
  vertical-align: top !important;
  margin: 0.5rem 0.15rem !important;
  padding: 1rem 0.75rem !important;
  background: linear-gradient(135deg, var(--slate) 0%, var(--iron) 100%) !important;
  border: 2px solid var(--steel) !important;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px) !important;
  min-width: 90px !important;
}

/* Industrial gauge rivets */
.dash::before,
.dash::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, var(--gunmetal) 30%, var(--steel) 70%);
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
}

.dash::before {
  top: 6px;
  left: 6px;
}

.dash::after {
  bottom: 6px;
  right: 6px;
}

/* Days gauge - larger */
.days_dash {
  min-width: 110px !important;
  padding: 1.25rem 0.85rem !important;
}

/* Digits container */
.dash > div {
  display: flex !important;
  justify-content: center !important;
  gap: 2px !important;
  margin-bottom: 0.5rem !important;
}

/* Individual digits */
.dash .digit {
  font-family: var(--font-mono) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: var(--gold) !important;
  text-shadow:
    0 0 10px rgba(240, 185, 11, 0.8),
    0 0 20px rgba(240, 185, 11, 0.4) !important;
  width: auto !important;
  float: none !important;
  animation: digitPulse 2s ease-in-out infinite !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* Days digits - larger */
.days_dash .digit {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
}

/* Digit pulse animation */
@keyframes digitPulse {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(240, 185, 11, 0.8),
      0 0 20px rgba(240, 185, 11, 0.4);
  }
  50% {
    text-shadow:
      0 0 15px rgba(240, 185, 11, 1),
      0 0 30px rgba(240, 185, 11, 0.6);
  }
}

/* Gauge labels */
.dash_title {
  font-family: var(--font-ui) !important;
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-top: 0 !important;
  position: static !important;
  transform: none !important;
  display: block !important;
}

/* Separator colons */
.hours_dash:after,
.minutes_dash:after {
  content: ":" !important;
  position: absolute !important;
  right: -0.65rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--steel) !important;
  font-size: 1.5rem !important;
  font-family: var(--font-mono) !important;
  line-height: 1 !important;
}

/* Caption below countdown */
.countdown-caption {
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  color: var(--text-muted) !important;
  margin-top: 1.25rem !important;
  font-style: italic !important;
  opacity: 0.8 !important;
  letter-spacing: 0.05em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUPPLY COUNTER - INDUSTRIAL GAUGE STYLE (MATCHING COUNTDOWN)
   ═══════════════════════════════════════════════════════════════════════════════ */

#supply-counter-holder {
  position: fixed !important;
  bottom: 2rem !important;
  right: 2rem !important;
  text-align: center !important;
  background: rgba(14, 18, 22, 0.9) !important;
  padding: 1.5rem 2rem !important;
  border: 1px solid var(--iron) !important;
  backdrop-filter: blur(10px) !important;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  z-index: 100 !important;
}

/* Industrial rivets on supply counter */
#supply-counter-holder::before,
#supply-counter-holder::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, var(--gunmetal) 30%, var(--steel) 70%);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

#supply-counter-holder::before {
  top: 12px;
  left: 12px;
}

#supply-counter-holder::after {
  bottom: 12px;
  right: 12px;
}

#supply-caption {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.3em !important;
  color: var(--haze) !important;
  text-shadow: 0 0 15px rgba(240, 185, 11, 0.3) !important;
  margin-bottom: 1rem !important;
  line-height: 1.4 !important;
  animation: none !important;
  text-align: center !important;
}

#supply-caption hr {
  margin: 0.75rem auto 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  border: 0 !important;
  border-top: 1px solid var(--gold-dark) !important;
  opacity: 0.6 !important;
  animation: none !important;
  box-shadow: 0 0 8px rgba(240, 185, 11, 0.3) !important;
}

/* Supply Display - Industrial Gauge Style */
.supply-display {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  gap: 0.3rem !important;
  margin: 0.5rem 0 !important;
}

/* Minted count gauge */
#minted-count {
  display: inline-block !important;
  position: relative !important;
  vertical-align: top !important;
  margin: 0.5rem 0.15rem !important;
  padding: 1.25rem 0.85rem !important;
  background: linear-gradient(135deg, var(--slate) 0%, var(--iron) 100%) !important;
  border: 2px solid var(--steel) !important;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px) !important;
  min-width: 140px !important;
  font-family: var(--font-mono) !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  color: var(--gold) !important;
  text-shadow:
    0 0 10px rgba(240, 185, 11, 0.8),
    0 0 20px rgba(240, 185, 11, 0.4) !important;
  animation: digitPulse 2s ease-in-out infinite !important;
  line-height: 1 !important;
}

/* Industrial gauge rivets for minted count */
#minted-count::before,
#minted-count::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, var(--gunmetal) 30%, var(--steel) 70%);
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
}

#minted-count::before {
  top: 6px;
  left: 6px;
}

#minted-count::after {
  bottom: 6px;
  right: 6px;
}

/* Divider styling */
.supply-divider {
  position: relative !important;
  color: var(--steel) !important;
  font-size: 1.5rem !important;
  font-family: var(--font-mono) !important;
  line-height: 1 !important;
  align-self: center !important;
  margin: 0 0.25rem !important;
}

/* Total supply gauge */
#total-supply {
  display: inline-block !important;
  position: relative !important;
  vertical-align: top !important;
  margin: 0.5rem 0.15rem !important;
  padding: 1rem 0.75rem !important;
  background: linear-gradient(135deg, rgba(22, 26, 32, 0.6) 0%, rgba(30, 36, 44, 0.6) 100%) !important;
  border: 2px solid rgba(61, 70, 84, 0.6) !important;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px) !important;
  min-width: 120px !important;
  font-family: var(--font-mono) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: var(--haze) !important;
  text-shadow: 0 0 8px rgba(106, 122, 138, 0.3) !important;
  line-height: 1 !important;
}

/* Industrial gauge rivets for total supply */
#total-supply::before,
#total-supply::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, var(--gunmetal) 30%, rgba(61, 70, 84, 0.6) 70%);
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
}

#total-supply::before {
  top: 6px;
  left: 6px;
}

#total-supply::after {
  bottom: 6px;
  right: 6px;
}

/* Supply status caption */
.supply-status {
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  color: var(--text-muted) !important;
  margin-top: 1.25rem !important;
  font-style: italic !important;
  opacity: 0.8 !important;
  letter-spacing: 0.05em !important;
  text-align: center !important;
}

#supply-percentage {
  color: var(--gold) !important;
  font-weight: 600 !important;
}

/* Loading dots animation */
.loading-dots {
  animation: blink 1.5s infinite !important;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.3; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAGE SECTIONS - INDUSTRIAL PANELS
   ═══════════════════════════════════════════════════════════════════════════════ */

.page {
  background: rgba(14, 18, 22, 0.7) !important;
  border: 1px solid var(--iron) !important;
  border-left: 3px solid var(--gold-dark) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: -5px 0 30px rgba(240, 185, 11, 0.1) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%) !important;
  padding: 2rem !important;
  padding-left: 2.5rem !important;
}

.page.active {
  border-left-color: var(--gold) !important;
  box-shadow: -5px 0 40px rgba(240, 185, 11, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTONS - INDUSTRIAL STYLE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Button container */
.cult-buttons {
  display: flex !important;
  gap: 1rem !important;
  justify-content: left !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.le-btn,
.cult-btn {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%) !important;
  border: none !important;
  color: var(--void) !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.le-btn::before,
.cult-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}

.le-btn:hover,
.cult-btn:hover,
.le-btn.cult-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 10px 30px rgba(240, 185, 11, 0.3),
    0 0 40px rgba(240, 185, 11, 0.15) !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
}

/* Buy button - secondary variant */
.cult-btn.buy-btn {
  background: linear-gradient(135deg, var(--steel) 0%, var(--gunmetal) 100%) !important;
  color: var(--gold) !important;
  border: 2px solid var(--gold-dark) !important;
}

.cult-btn.buy-btn::before {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%) !important;
}

.cult-btn.buy-btn:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%) !important;
  color: var(--void) !important;
  border-color: var(--gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STATS STRIP - INDUSTRIAL DATA PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

.stats-strip {
  background: rgba(14, 18, 22, 0.7) !important;
  border: 1px solid var(--iron) !important;
  backdrop-filter: blur(10px) !important;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px)) !important;
  padding: 1.25rem 1.75rem !important;
}

.stat-item {
  font-family: var(--font-ui) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  color: var(--text-muted) !important;
}

.stat-item strong {
  font-family: var(--font-mono) !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
}

.stat-divider {
  color: var(--steel) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WALLET LOOKUP - TERMINAL STYLE
   ═══════════════════════════════════════════════════════════════════════════════ */

.wallet-lookup-holder {
  background: var(--deep) !important;
  border: 1px solid var(--iron) !important;
  padding: 2rem !important;
  margin-top: 2rem !important;
}

.input-group-wallet {
  gap: 0.75rem !important;
}

.wallet-input {
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  background: var(--void) !important;
  border: 1px solid var(--steel) !important;
  color: var(--text-primary) !important;
  padding: 1rem 1.25rem !important;
}

.wallet-input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(240, 185, 11, 0.1) !important;
}

.wallet-input::placeholder {
  color: var(--text-muted) !important;
}

.lookup-btn {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important;
}

.chain-note {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  color: var(--haze) !important;
}

.chain-note::before {
  content: '>' !important;
  color: var(--gold) !important;
  margin-right: 0.5rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CULT RESULTS - INDUSTRIAL DATA DISPLAY
   ═══════════════════════════════════════════════════════════════════════════════ */

.cult-results {
  background: var(--void) !important;
  border: 1px solid var(--iron) !important;
  padding: 2rem !important;
}

.rank-display {
  background: linear-gradient(135deg, rgba(240, 185, 11, 0.08) 0%, rgba(74, 90, 106, 0.05) 100%) !important;
  border: 1px solid var(--gold-dark) !important;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px)) !important;
}

.rank-name {
  font-family: var(--font-display) !important;
  color: var(--gold) !important;
  text-shadow: 0 0 30px rgba(240, 185, 11, 0.5) !important;
}

.balance-item {
  background: rgba(22, 26, 32, 0.6) !important;
  border: 1px solid var(--iron) !important;
  border-left: 2px solid var(--gold-dark) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%) !important;
}

.balance-item:hover {
  border-left-color: var(--gold) !important;
  background: rgba(30, 36, 44, 0.8) !important;
}

.balance-value {
  font-family: var(--font-mono) !important;
  color: var(--gold) !important;
  text-shadow: 0 0 15px rgba(240, 185, 11, 0.4) !important;
}

.cult-nft-card {
  background: linear-gradient(135deg, var(--slate) 0%, var(--iron) 100%) !important;
  border: 1px solid var(--steel) !important;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px) !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cult-nft-card:hover {
  border-color: var(--gold-dim) !important;
  box-shadow:
    0 15px 50px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(240, 185, 11, 0.15) !important;
}

.nft-id {
  font-family: var(--font-mono) !important;
  color: var(--gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER - INDUSTRIAL STYLE
   ═══════════════════════════════════════════════════════════════════════════════ */

footer {
  border-top: 1px solid var(--iron) !important;
  padding: 3rem 0 1.5rem !important;
}

footer nav a {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  color: var(--text-muted) !important;
  transition: color 0.3s ease !important;
  border-bottom-color: transparent !important;
}

footer nav a:hover {
  color: var(--gold) !important;
}

footer nav a.active {
  border-bottom-color: var(--gold) !important;
  color: var(--text-primary) !important;
}

footer .copyright p {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.1em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FEATURE LIST - INDUSTRIAL STYLE
   ═══════════════════════════════════════════════════════════════════════════════ */

.feature-list li {
  font-family: var(--font-ui) !important;
  color: var(--text-dim) !important;
  font-weight: 300 !important;
}

.feature-list li:before {
  content: "↳" !important;
  color: var(--gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCROLLBAR - INDUSTRIAL
   ═══════════════════════════════════════════════════════════════════════════════ */

.page::-webkit-scrollbar {
  width: 6px !important;
}

.page::-webkit-scrollbar-track {
  background: var(--void) !important;
}

.page::-webkit-scrollbar-thumb {
  background: var(--steel) !important;
  border-radius: 0 !important;
}

.page::-webkit-scrollbar-thumb:hover {
  background: var(--gold-dark) !important;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--void);
}

::-webkit-scrollbar-thumb {
  background: var(--steel);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-dark);
}

::selection {
  background: var(--gold) !important;
  color: var(--void) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Ensure container doesn't have padding issues */
#container,
.wrapper {
  padding: 0 !important;
}

@media all and (max-width: 940px) {
  #coundown-holder {
    right: 1rem !important;
    bottom: 1rem !important;
    padding: 1.25rem 1.5rem !important;
  }

  #supply-counter-holder {
    right: 1rem !important;
    bottom: 1rem !important;
    padding: 1.25rem 1.5rem !important;
  }

  #minted-count {
    min-width: 110px !important;
    padding: 1rem 0.7rem !important;
    font-size: 1.6rem !important;
  }

  #total-supply {
    min-width: 100px !important;
    padding: 0.85rem 0.6rem !important;
    font-size: 1.2rem !important;
  }

  .supply-divider {
    font-size: 1.2rem !important;
  }

  .dash {
    min-width: 70px !important;
    padding: 0.75rem 0.5rem !important;
    margin: 0.25rem 0.1rem !important;
  }

  .days_dash {
    min-width: 85px !important;
    padding: 0.85rem 0.6rem !important;
  }

  .dash .digit {
    font-size: 1.2rem !important;
  }

  .days_dash .digit {
    font-size: 1.4rem !important;
  }

  .dash_title {
    font-size: 0.5rem !important;
  }

  .hours_dash:after,
  .minutes_dash:after {
    font-size: 1.2rem !important;
    right: -0.5rem !important;
  }
}

@media all and (max-width: 700px) {
  #coundown-holder {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    margin: 2rem auto !important;
    width: fit-content !important;
    max-width: 95% !important;
  }

  #supply-counter-holder {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    margin: 2rem auto !important;
    width: fit-content !important;
    max-width: 95% !important;
  }

  #minted-count {
    min-width: 90px !important;
    padding: 0.85rem 0.6rem !important;
    font-size: 1.3rem !important;
  }

  #total-supply {
    min-width: 80px !important;
    padding: 0.7rem 0.5rem !important;
    font-size: 1rem !important;
  }

  .supply-divider {
    font-size: 1rem !important;
  }

  #supply-caption {
    font-size: 0.6rem !important;
  }

  .supply-status {
    font-size: 0.55rem !important;
  }

  .dash {
    min-width: 60px !important;
    padding: 0.65rem 0.4rem !important;
    margin: 0.25rem 0.05rem !important;
  }

  .days_dash {
    min-width: 70px !important;
    padding: 0.75rem 0.5rem !important;
  }

  .dash .digit {
    font-size: 1rem !important;
  }

  .days_dash .digit {
    font-size: 1.2rem !important;
  }

  .hours_dash:after,
  .minutes_dash:after {
    font-size: 1rem !important;
    right: -0.4rem !important;
  }

  #counter-caption {
    font-size: 0.6rem !important;
  }

  .countdown-caption {
    font-size: 0.55rem !important;
  }
}

@media all and (max-width: 450px) {
  /* Social icons - mobile horizontal layout */
  .social-icons {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    margin: 1rem auto 0 !important;
    padding: 0.5rem 0 !important;
  }

  .social-icons ul {
    justify-content: center !important;
  }

  .social-icons li {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
  }

  /* Countdown - mobile centered */
  #coundown-holder {
    clip-path: none !important;
    border-radius: 8px !important;
    padding: 1rem 0.75rem !important;
  }

  #coundown-holder::before,
  #coundown-holder::after {
    display: none !important;
  }

  /* Supply counter - mobile centered */
  #supply-counter-holder {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    clip-path: none !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin: 1rem auto !important;
  }

  #supply-counter-holder::before,
  #supply-counter-holder::after {
    display: none !important;
  }

  #minted-count {
    clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px) !important;
    min-width: 70px !important;
    padding: 0.7rem 0.4rem !important;
    margin: 0.25rem 0.05rem !important;
    border-width: 1px !important;
    font-size: 1.1rem !important;
  }

  #minted-count::before,
  #minted-count::after {
    width: 4px !important;
    height: 4px !important;
    top: 4px !important;
    left: 4px !important;
  }

  #minted-count::after {
    top: auto !important;
    left: auto !important;
    bottom: 4px !important;
    right: 4px !important;
  }

  #total-supply {
    clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px) !important;
    min-width: 65px !important;
    padding: 0.6rem 0.35rem !important;
    margin: 0.25rem 0.05rem !important;
    border-width: 1px !important;
    font-size: 0.85rem !important;
  }

  #total-supply::before,
  #total-supply::after {
    width: 4px !important;
    height: 4px !important;
    top: 4px !important;
    left: 4px !important;
  }

  #total-supply::after {
    top: auto !important;
    left: auto !important;
    bottom: 4px !important;
    right: 4px !important;
  }

  .supply-divider {
    font-size: 0.85rem !important;
  }

  .dash {
    clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px) !important;
    min-width: 50px !important;
    padding: 0.5rem 0.3rem !important;
    margin: 0.25rem 0.05rem !important;
    border-width: 1px !important;
  }

  .dash::before,
  .dash::after {
    width: 4px !important;
    height: 4px !important;
    top: 4px !important;
    left: 4px !important;
  }

  .dash::after {
    top: auto !important;
    left: auto !important;
    bottom: 4px !important;
    right: 4px !important;
  }

  .days_dash {
    min-width: 60px !important;
    padding: 0.6rem 0.35rem !important;
  }

  .dash .digit {
    font-size: 0.85rem !important;
  }

  .days_dash .digit {
    font-size: 1rem !important;
  }

  .hours_dash:after,
  .minutes_dash:after {
    font-size: 0.85rem !important;
    right: -0.3rem !important;
  }

  /* Page sections */
  .page {
    clip-path: none !important;
    border-radius: 6px !important;
    padding: 1.5rem !important;
    width: 92% !important;
    max-width: 100% !important;
    border-left-width: 2px !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin: 1rem auto !important;
    top: 0 !important;
    display: none !important;
  }

  .page.active {
    display: block !important;
    left: 0 !important;
    right: 0 !important;
  }

  .page h1 {
    font-size: 1.75rem !important;
    letter-spacing: 0.08em !important;
  }

  .page h2 {
    font-size: 0.75rem !important;
  }

  .page .body p,
  .page .body {
    font-size: 0.9rem !important;
  }

  /* Stats strip */
  .stats-strip {
    clip-path: none !important;
    border-radius: 6px !important;
    padding: 1rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .stat-divider {
    display: none !important;
  }

  /* Buttons */
  .le-btn,
  .cult-btn {
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
    padding: 0.85rem 1.5rem !important;
    font-size: 0.75rem !important;
  }

  /* Wallet lookup */
  .wallet-lookup-holder {
    padding: 1.5rem !important;
  }

  .wallet-input {
    padding: 0.85rem 1rem !important;
    font-size: 0.75rem !important;
  }

  .lookup-btn {
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
    padding: 0.85rem 1.5rem !important;
    font-size: 0.75rem !important;
  }

  /* Balance grid */
  .balance-row {
    grid-template-columns: 1fr !important;
  }

  .balance-item {
    clip-path: none !important;
    border-radius: 4px !important;
  }

  /* NFT grid */
  .cult-nft-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .cult-nft-card {
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px) !important;
  }

  /* Rank display */
  .rank-display {
    clip-path: none !important;
    border-radius: 6px !important;
    padding: 1.5rem 1rem !important;
  }

  .rank-name {
    font-size: 1.75rem !important;
  }

  /* Footer */
  footer {
    position: relative !important;
    padding: 2.5rem 1rem 1.5rem !important;
    left: 0 !important;
    margin: 2rem 0 0 !important;
    text-align: center !important;
  }

  footer nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  footer nav ul {
    justify-content: center !important;
  }

  footer .copyright {
    margin-top: 1rem !important;
  }

  footer .copyright p {
    font-size: 0.65rem !important;
    text-align: center !important;
  }

  /* Feature list */
  .feature-list li {
    font-size: 0.85rem !important;
    padding-left: 20px !important;
  }
}