*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



:root {

  color-scheme: dark;

  --bg: #0a0a0f;

  --bg-secondary: #0c1224;

  --accent: #61f4a7;

  --accent-strong: #2ff7ff;

  --accent-hot: #ffbf3c;

  --neon-purple: #b347ff;

  --neon-green: #61f4a7;

  --neon-cyan: #2ff7ff;

  --neon-yellow: #ffd700;

  --neon-pink: #ff69b4;

  --neon-red: #ff1744;

  --border: rgba(97, 244, 167, 0.4);

  --text-muted: rgba(97, 244, 167, 0.8);

  --text-strong: #61f4a7;

  --card-glow: rgba(97, 244, 167, 0.5);

}



body {

  margin: 0;

  min-height: 100vh;

  background: var(--bg);

  background-image: 

    radial-gradient(2px 2px at 20% 30%, var(--neon-cyan), transparent),

    radial-gradient(2px 2px at 60% 70%, var(--neon-pink), transparent),

    radial-gradient(1px 1px at 50% 50%, var(--neon-green), transparent),

    radial-gradient(1px 1px at 80% 10%, var(--neon-purple), transparent);

  background-size: 200% 200%;

  animation: stars 20s ease infinite;

  color: var(--text-strong);

  font-family: 'Rajdhani', 'Orbitron', sans-serif;

  font-size: 16px;

  line-height: 1.6;

  position: relative;

  overflow-x: hidden;

}



@keyframes stars {

  0%, 100% { background-position: 0% 0%, 100% 0%, 50% 50%, 0% 100%; }

  50% { background-position: 100% 100%, 0% 100%, 50% 50%, 100% 0%; }

}



.cosmic-gradient {

  position: fixed;

  inset: 0;

  background: 

    radial-gradient(circle at 20% 20%, rgba(47, 247, 255, 0.3), transparent 50%),

    radial-gradient(circle at 80% 0%, rgba(97, 244, 167, 0.25), transparent 45%),

    radial-gradient(circle at 60% 90%, rgba(179, 71, 255, 0.2), transparent 55%);

  filter: blur(80px);

  z-index: 0;

  pointer-events: none;

  animation: pulse 8s ease-in-out infinite;

}



@keyframes pulse {

  0%, 100% { opacity: 0.6; }

  50% { opacity: 1; }

}



.grid-overlay {

  position: fixed;

  inset: 0;

  background-image: 

    linear-gradient(transparent 98%, rgba(97, 244, 167, 0.1) 98%),

    linear-gradient(90deg, transparent 98%, rgba(97, 244, 167, 0.1) 98%);

  background-size: 60px 60px;

  opacity: 0.3;

  z-index: 0;

  pointer-events: none;

}



.page-shell {

  position: relative;

  z-index: 1;

  width: min(1400px, 100%);

  margin: 0 auto;

  padding: 40px 24px 80px;

}



/* Hero Section */

.hero {

  background-image: linear-gradient(135deg, rgba(10, 10, 15, 0.85), rgba(10, 10, 15, 0.75)), url('/images/wealth-image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border: 3px solid var(--neon-green);

  border-radius: 24px;

  padding: 60px 40px;

  margin-bottom: 60px;

  box-shadow: 

    0 0 40px rgba(97, 244, 167, 0.6),

    0 0 80px rgba(97, 244, 167, 0.3),

    inset 0 0 30px rgba(97, 244, 167, 0.1);

  backdrop-filter: blur(20px);

  text-align: center;

  position: relative;

  overflow: hidden;

}



.hero::before {

  content: '';

  position: absolute;

  inset: -3px;

  border-radius: 24px;

  border: 2px solid var(--neon-cyan);

  opacity: 0.5;

  pointer-events: none;

  animation: borderPulse 3s ease-in-out infinite;

}



@keyframes borderPulse {

  0%, 100% { opacity: 0.3; }

  50% { opacity: 0.8; }

}



.hero-badge {

  display: inline-block;

  padding: 12px 24px;

  background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan));

  color: var(--bg);

  font-weight: 700;

  font-size: 14px;

  letter-spacing: 0.2em;

  border-radius: 50px;

  margin-bottom: 30px;

  text-transform: uppercase;

  animation: glow 2s ease-in-out infinite;

}



@keyframes glow {

  0%, 100% { box-shadow: 0 0 20px rgba(97, 244, 167, 0.5); }

  50% { box-shadow: 0 0 40px rgba(97, 244, 167, 0.8), 0 0 60px rgba(47, 247, 255, 0.5); }

}



.hero-title {

  font-family: 'Orbitron', sans-serif;

  font-size: clamp(3rem, 8vw, 6rem);

  font-weight: 900;

  margin: 20px 0;

  line-height: 1.1;

}



.neon-text {

  background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan), var(--neon-purple));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  text-shadow: 

    0 0 20px rgba(97, 244, 167, 0.8),

    0 0 40px rgba(47, 247, 255, 0.6),

    0 0 60px rgba(179, 71, 255, 0.4);

  animation: textShimmer 3s ease-in-out infinite;

}



.neon-text-large {

  font-size: 1.2em;

  display: block;

  margin-top: 10px;

}



@keyframes textShimmer {

  0%, 100% { filter: brightness(1); }

  50% { filter: brightness(1.3); }

}



.hero-subtitle {

  font-size: clamp(1.1rem, 2vw, 1.5rem);

  color: var(--text-strong);

  margin: 30px auto;

  max-width: 900px;

  line-height: 1.8;

  font-weight: 600;

}



.highlight {

  color: var(--neon-cyan);

  text-shadow: 0 0 10px rgba(47, 247, 255, 0.8);

  font-weight: 700;

}



.hero-stats {

  display: flex;

  justify-content: center;

  gap: 40px;

  margin-top: 40px;

  flex-wrap: wrap;

}



.stat-item {

  text-align: center;

}



.stat-value {

  font-family: 'Orbitron', sans-serif;

  font-size: 2.5rem;

  font-weight: 900;

  color: var(--neon-green);

  text-shadow: 0 0 20px rgba(97, 244, 167, 0.8);

  margin-bottom: 8px;

}



.stat-label {

  font-size: 0.9rem;

  color: var(--text-muted);

  letter-spacing: 0.2em;

  text-transform: uppercase;

}



.ref-notice {

  margin-top: 30px;

  padding: 20px;

  background: rgba(179, 71, 255, 0.2);

  border: 2px solid var(--neon-purple);

  border-radius: 12px;

  font-size: 1.1rem;

  color: var(--neon-purple);

}



.ref-icon {

  font-size: 1.5rem;

  margin-right: 10px;

}



/* Chart Section */

.chart-section {

  margin: 60px 0;

  padding: 40px;

  background: rgba(10, 10, 15, 0.8);

  border: 2px solid var(--neon-green);

  border-radius: 20px;

  box-shadow: 0 0 30px rgba(97, 244, 167, 0.3);

}



.section-header {

  text-align: center;

  margin-bottom: 30px;

}



.section-header h2 {

  font-family: 'Orbitron', sans-serif;

  font-size: clamp(2rem, 4vw, 3rem);

  color: var(--neon-green);

  text-shadow: 0 0 20px rgba(97, 244, 167, 0.6);

  margin-bottom: 10px;

}



.section-header p {

  color: var(--text-muted);

  font-size: 1.2rem;

}



.chart-container {

  margin-top: 30px;

}



/* Treasure Box Section */

.treasure-section {

  margin: 60px 0;

}



.warning-box {

  margin: 20px auto;

  max-width: 600px;

  padding: 15px 20px;

  background: rgba(255, 23, 68, 0.2);

  border: 2px solid var(--neon-red);

  border-radius: 12px;

  color: var(--neon-red);

  text-align: center;

  font-weight: 600;

}



.box-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 40px;

  margin-top: 40px;

}



.treasure-box {

  position: relative;

  background: transparent;

  border: none;

  cursor: pointer;

  padding: 0;

  transition: all 0.3s ease;

}



.treasure-box:hover {

  transform: translateY(-10px);

}



.treasure-box.is-selected {

  transform: scale(1.08);

  z-index: 10;

  animation: selected-pulse 2s ease-in-out infinite;

}



.treasure-box.is-selected .box-glow {

  opacity: 1 !important;

}



.treasure-box.is-selected .box-body {

  border-color: var(--neon-cyan);

  box-shadow: 

    0 0 50px rgba(47, 247, 255, 0.8),

    0 0 80px rgba(47, 247, 255, 0.5),

    inset 0 0 30px rgba(47, 247, 255, 0.3);

}



.treasure-box.is-dismissing {

  filter: blur(12px) grayscale(0.6);

  opacity: 0.3;

  pointer-events: none;

  transform: scale(0.9);

  transition: all 0.5s ease;

}



@keyframes selected-pulse {

  0%, 100% { 

    transform: scale(1.08);

    box-shadow: 0 0 40px rgba(97, 244, 167, 0.6);

  }

  50% { 

    transform: scale(1.12);

    box-shadow: 0 0 60px rgba(97, 244, 167, 0.9), 0 0 80px rgba(47, 247, 255, 0.6);

  }

}



.box-glow {

  position: absolute;

  inset: -10px;

  background: radial-gradient(circle, var(--neon-green), transparent 70%);

  opacity: 0;

  transition: opacity 0.3s ease;

  border-radius: 20px;

  filter: blur(20px);

}



.treasure-box:hover .box-glow,

.treasure-box.is-selected .box-glow {

  opacity: 0.6;

}



.box-body {

  position: relative;

  background: linear-gradient(135deg, rgba(10, 10, 15, 0.9), rgba(12, 18, 36, 0.9));

  border: 3px solid var(--neon-green);

  border-radius: 20px;

  padding: 40px 20px;

  min-height: 300px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  box-shadow: 

    0 0 30px rgba(97, 244, 167, 0.4),

    inset 0 0 20px rgba(97, 244, 167, 0.1);

  transition: all 0.3s ease;

}



.treasure-box:hover .box-body,

.treasure-box.is-selected .box-body {

  border-color: var(--neon-cyan);

  box-shadow: 

    0 0 50px rgba(47, 247, 255, 0.6),

    inset 0 0 30px rgba(47, 247, 255, 0.2);

}



.box-interior-glow {

  position: absolute;

  inset: 0;

  background: radial-gradient(circle at center, rgba(97, 244, 167, 0.3), transparent);

  border-radius: 20px;

  opacity: 0;

  transition: opacity 0.3s ease;

}



.treasure-box:hover .box-interior-glow {

  opacity: 1;

}



.box-treasure {

  font-size: 3rem;

  margin: 20px 0;

  display: flex;

  gap: 15px;

}



.box-lock {

  font-size: 2rem;

  margin-top: 20px;

  opacity: 0.7;

}



.treasure-box.is-selected .box-lock {

  opacity: 0;

  transform: scale(0);

  transition: all 0.5s ease;

}



.box-lid {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 50%;

  background: linear-gradient(135deg, rgba(179, 71, 255, 0.3), rgba(97, 244, 167, 0.3));

  border-radius: 20px 20px 0 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transform-origin: top;

  transform: rotateX(0deg);

  transition: transform 0.8s ease;

  perspective: 1000px;

}



.treasure-box.is-selected .box-lid {

  transform: rotateX(-180deg);

}



.dragon-head {

  font-size: 3rem;

  opacity: 0.8;

}



.box-sparkles {

  position: absolute;

  inset: 0;

  pointer-events: none;

  font-size: 1.5rem;

  display: flex;

  justify-content: space-around;

  align-items: center;

  opacity: 0;

}



.treasure-box.is-selected .box-sparkles {

  opacity: 1;

  animation: sparkle 1s ease-in-out infinite;

}



@keyframes sparkle {

  0%, 100% { transform: scale(1); opacity: 0.5; }

  50% { transform: scale(1.2); opacity: 1; }

}



.box-label {

  margin-top: 20px;

  font-family: 'Orbitron', sans-serif;

  font-size: 1.3rem;

  font-weight: 700;

  color: var(--neon-green);

  text-shadow: 0 0 10px rgba(97, 244, 167, 0.6);

}



/* Email Panel */

.email-panel {

  margin: 60px 0;

  padding: 40px;

  background: rgba(10, 10, 15, 0.9);

  border: 2px solid var(--neon-green);

  border-radius: 20px;

  box-shadow: 0 0 30px rgba(97, 244, 167, 0.3);

  text-align: center;

}



.panel-header h3 {

  font-family: 'Orbitron', sans-serif;

  font-size: 2rem;

  color: var(--neon-green);

  margin-bottom: 15px;

}



.email-form {

  max-width: 600px;

  margin: 30px auto 0;

}



.form-field {

  margin-bottom: 20px;

}



.form-field label {

  display: block;

  color: var(--text-strong);

  font-weight: 600;

  margin-bottom: 8px;

  font-size: 0.95rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.input-group {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}



.input-group input {

  flex: 1;

  min-width: 250px;

  padding: 15px 20px;

  background: rgba(10, 10, 15, 0.8);

  border: 2px solid var(--neon-green);

  border-radius: 10px;

  color: var(--text-strong);

  font-size: 1rem;

  font-family: inherit;

}



.form-field .input-group input {

  flex: 1;

  min-width: 250px;

  padding: 15px 20px;

  background: rgba(10, 10, 15, 0.8);

  border: 2px solid var(--neon-green);

  border-radius: 10px;

  color: var(--text-strong);

  font-size: 1rem;

  font-family: inherit;

}



.form-field input:focus,

.input-group input:focus {

  outline: none;

  border-color: var(--neon-cyan);

  box-shadow: 0 0 20px rgba(47, 247, 255, 0.4);

}



.input-group button {

  padding: 15px 30px;

  background: linear-gradient(135deg, var(--accent-hot), var(--neon-yellow));

  color: var(--bg);

  border: none;

  border-radius: 10px;

  font-size: 1rem;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.3s ease;

  font-family: 'Orbitron', sans-serif;

  white-space: nowrap;

}



.input-group button:hover {

  transform: scale(1.05);

  box-shadow: 0 0 30px rgba(255, 191, 60, 0.6);

}



.form-info {

  margin-top: 20px;

  padding: 15px;

  background: rgba(255, 191, 60, 0.1);

  border: 1px solid rgba(255, 191, 60, 0.3);

  border-radius: 8px;

  color: var(--text-strong);

  font-size: 0.9rem;

  line-height: 1.6;

  text-align: center;

}



.status-line {

  margin-top: 15px;

  min-height: 24px;

  color: var(--neon-green);

  font-weight: 600;

}



.status-line.error {

  color: var(--neon-red);

}



/* CTA Section */

.cta-section {

  margin: 80px 0;

  text-align: center;

  padding: 60px 40px;

  background: rgba(10, 10, 15, 0.8);

  border: 2px solid var(--neon-purple);

  border-radius: 24px;

  box-shadow: 0 0 40px rgba(179, 71, 255, 0.3);

}



.cta-section h2 {

  font-family: 'Orbitron', sans-serif;

  font-size: clamp(2rem, 4vw, 3rem);

  color: var(--neon-purple);

  margin-bottom: 20px;

  text-shadow: 0 0 20px rgba(179, 71, 255, 0.6);

}



.cta-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 30px;

  margin-top: 40px;

}



.cta-card {

  padding: 30px;

  background: rgba(10, 10, 15, 0.6);

  border: 2px solid var(--neon-green);

  border-radius: 16px;

  transition: all 0.3s ease;

}



.cta-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 0 30px rgba(97, 244, 167, 0.4);

}



.cta-icon {

  font-size: 3rem;

  margin-bottom: 15px;

}



.cta-card h3 {

  font-family: 'Orbitron', sans-serif;

  font-size: 1.5rem;

  color: var(--neon-green);

  margin-bottom: 10px;

}



.cta-card p {

  color: var(--text-muted);

}



/* Responsive */

@media (max-width: 768px) {

  .page-shell {

    padding: 20px 16px 40px;

  }

  

  .hero {

    padding: 40px 20px;

  }

  

  .box-grid {

    grid-template-columns: 1fr;

    gap: 30px;

  }

  

  .hero-stats {

    gap: 20px;

  }

}

/* Different Visual Styles for Each Treasure Box */

/* Box A - Green/Cyan Theme */
.box-style-a .box-glow {
  background: radial-gradient(circle, rgba(97, 244, 167, 0.8), rgba(47, 247, 255, 0.6), transparent 70%);
}

.box-style-a .box-body {
  background: linear-gradient(135deg, rgba(10, 20, 15, 0.95), rgba(12, 30, 25, 0.9), rgba(10, 25, 20, 0.95));
  border: 3px solid #61f4a7;
  box-shadow: 
    0 0 30px rgba(97, 244, 167, 0.5),
    inset 0 0 20px rgba(47, 247, 255, 0.15);
}

.box-style-a:hover .box-body,
.box-style-a.is-selected .box-body {
  border-color: #2ff7ff;
  box-shadow: 
    0 0 50px rgba(47, 247, 255, 0.7),
    0 0 80px rgba(97, 244, 167, 0.4),
    inset 0 0 30px rgba(47, 247, 255, 0.25);
}

.box-style-a .box-interior-glow {
  background: radial-gradient(circle at center, rgba(97, 244, 167, 0.4), rgba(47, 247, 255, 0.2), transparent);
}

.box-style-a .box-label {
  color: #61f4a7;
  text-shadow: 0 0 15px rgba(97, 244, 167, 0.8), 0 0 25px rgba(47, 247, 255, 0.5);
}

/* Box B - Purple/Pink Theme */
.box-style-b .box-glow {
  background: radial-gradient(circle, rgba(179, 71, 255, 0.8), rgba(255, 105, 180, 0.6), transparent 70%);
}

.box-style-b .box-body {
  background: linear-gradient(135deg, rgba(20, 10, 25, 0.95), rgba(30, 12, 30, 0.9), rgba(25, 10, 25, 0.95));
  border: 3px solid #b347ff;
  box-shadow: 
    0 0 30px rgba(179, 71, 255, 0.5),
    inset 0 0 20px rgba(255, 105, 180, 0.15);
}

.box-style-b:hover .box-body,
.box-style-b.is-selected .box-body {
  border-color: #ff69b4;
  box-shadow: 
    0 0 50px rgba(255, 105, 180, 0.7),
    0 0 80px rgba(179, 71, 255, 0.4),
    inset 0 0 30px rgba(255, 105, 180, 0.25);
}

.box-style-b .box-interior-glow {
  background: radial-gradient(circle at center, rgba(179, 71, 255, 0.4), rgba(255, 105, 180, 0.2), transparent);
}

.box-style-b .box-label {
  color: #b347ff;
  text-shadow: 0 0 15px rgba(179, 71, 255, 0.8), 0 0 25px rgba(255, 105, 180, 0.5);
}

/* Box C - Gold/Orange Theme */
.box-style-c .box-glow {
  background: radial-gradient(circle, rgba(255, 191, 60, 0.8), rgba(255, 215, 0, 0.6), transparent 70%);
}

.box-style-c .box-body {
  background: linear-gradient(135deg, rgba(25, 20, 10, 0.95), rgba(30, 25, 12, 0.9), rgba(25, 20, 10, 0.95));
  border: 3px solid #ffbf3c;
  box-shadow: 
    0 0 30px rgba(255, 191, 60, 0.5),
    inset 0 0 20px rgba(255, 215, 0, 0.15);
}

.box-style-c:hover .box-body,
.box-style-c.is-selected .box-body {
  border-color: #ffd700;
  box-shadow: 
    0 0 50px rgba(255, 215, 0, 0.7),
    0 0 80px rgba(255, 191, 60, 0.4),
    inset 0 0 30px rgba(255, 215, 0, 0.25);
}

.box-style-c .box-interior-glow {
  background: radial-gradient(circle at center, rgba(255, 191, 60, 0.4), rgba(255, 215, 0, 0.2), transparent);
}

.box-style-c .box-label {
  color: #ffbf3c;
  text-shadow: 0 0 15px rgba(255, 191, 60, 0.8), 0 0 25px rgba(255, 215, 0, 0.5);
}