/**
 * Presale 3-Phase Experience — Container & Header
 */

#presale-section {
  position: relative; max-width: 1280px; margin: 0 auto; padding: 3rem 1.5rem;
  border: 2px solid rgba(125, 167, 244, 0.3); border-radius: 24px;
  background: linear-gradient(135deg, rgba(125, 167, 244, 0.05) 0%, rgba(203, 210, 255, 0.03) 50%, rgba(240, 196, 214, 0.02) 100%);
  box-shadow: 0 0 40px rgba(125, 167, 244, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

#presale-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(125, 167, 244, 0.6), rgba(203, 210, 255, 0.6), transparent);
  border-radius: 24px 24px 0 0;
}

.presale-header { text-align: center; margin-bottom: 3rem; }

.presale-title {
  font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #7da7f4 0%, #cbd2ff 50%, #f0c4d6 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: gradient-shift 8s ease infinite;
}

.presale-subtitle { font-size: 1.125rem; color: rgba(255, 255, 255, 0.7); font-weight: 400; }

.presale-timers-container { display: grid; gap: 2rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .presale-timers-container { grid-template-columns: 1fr 1fr; } }