/* About Details Card Styling */
/* Announcement Cards Styling */
.announce-hero {
  min-height: 100vh;
}
}
.announce-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.2rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.announce-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(212,175,55,0.09) 100%);
  border: 1.5px solid rgba(212,175,55,0.18);
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(212,175,55,0.13);
  padding: 2.2rem 1.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  transition: transform 0.35s cubic-bezier(.32,1.56,.64,1), box-shadow 0.35s;
  position: relative;
  overflow: hidden;
  animation: announcePop 0.7s cubic-bezier(.32,1.56,.64,1);
}
.announce-card:hover {
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 16px 48px 0 rgba(212,175,55,0.22);
}
.announce-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212,175,55,0.13) 0%, rgba(255,255,255,0.07) 100%);
  margin-bottom: 0.7rem;
  box-shadow: 0 2px 12px 0 rgba(212,175,55,0.09);
}
.announce-card h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 0.3rem;
  letter-spacing: 0.01em;
}
.announce-card p {
  font-size: 1.08rem;
  color: #fff;
  text-align: center;
  margin-bottom: 0.2rem;
}
@keyframes announcePop {
  0% { transform: scale(0.85) translateY(30px); opacity: 0; }
  60% { transform: scale(1.05) translateY(-8px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.announce-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}
.announce-logo {
  width: 120px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 24px 0 rgba(212,175,55,0.13);
}
.about-details-card {
  margin: 2rem 0 1.5rem 0;
  background: linear-gradient(145deg, rgba(15, 15, 15, 0.95) 0%, rgba(25, 25, 25, 0.9) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 380px;
  overflow: hidden;
  position: relative;
}

.about-details-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400), var(--gold-500));
}

.about-detail-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  transition: background 0.3s ease;
}

.about-detail-item:hover {
  background: rgba(212, 175, 55, 0.05);
}

.about-detail-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  flex-shrink: 0;
}

.about-detail-icon svg {
  stroke: var(--gold-400);
}

.about-detail-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.about-detail-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.about-detail-value {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.about-detail-note {
  color: var(--gold-400);
  font-size: 0.9em;
  font-weight: 400;
  margin-left: 0.25em;
}

.about-detail-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
  margin: 0 1.5rem;
}
/* Last three prize cards: Winner Certificate, Free Music Video Shoot, 5 Studio Sessions */
.prize-card:nth-child(7) { --prize-accent: #fff; --prize-glow: rgba(255,255,255,0.3); }
.prize-card:nth-child(8) { --prize-accent: #ffd700; --prize-glow: rgba(255,215,0,0.3); }
.prize-card:nth-child(9) { --prize-accent: #00fff7; --prize-glow: rgba(0,255,247,0.3); }

.prize-card:nth-child(7)::before { background: linear-gradient(90deg, #fff, #e5e5e5); }
.prize-card:nth-child(8)::before { background: linear-gradient(90deg, #ffd700, #ffec80); }
.prize-card:nth-child(9)::before { background: linear-gradient(90deg, #00fff7, #00bfae); }

.prize-card:nth-child(7) .prize-icon { border-color: rgba(255,255,255,0.4); color: #fff; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.03) 100%); }
.prize-card:nth-child(8) .prize-icon { border-color: rgba(255,215,0,0.4); color: #ffd700; background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(255,215,0,0.03) 100%); }
.prize-card:nth-child(9) .prize-icon { border-color: rgba(0,255,247,0.4); color: #00fff7; background: linear-gradient(135deg, rgba(0,255,247,0.15) 0%, rgba(0,255,247,0.03) 100%); }
/* Reduce font size for 'Transparency & Fairness' title in voting.html on mobile */
@media (max-width: 600px) {
  .score-card h2, .score-card .card-title {
    font-size: 0.65rem !important;
    line-height: 1.05 !important;
    text-align: left !important;
    padding-right: 0.2rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100vw;
    display: block !important;
    white-space: normal !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
  }
}
/* Force 'Transparency & Fairness' title to wrap and scale for mobile */
@media (max-width: 600px) {
  .score-card h2, .score-card .card-title {
    font-size: clamp(0.7rem, 4vw, 1rem) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100vw;
    line-height: 1.1;
    text-align: left !important;
    display: block !important;
    white-space: normal !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    padding-right: 0.2rem !important;
  }
}
/* Fix 'Transparency & Fairness' title breaking on mobile */
@media (max-width: 600px) {
  .score-card h2, .score-card .card-title {
    font-size: 0.85rem !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    max-width: 100vw;
    line-height: 1.15;
    text-align: left !important;
    display: block !important;
    white-space: normal !important;
  }
}
/* Reduce font size for 'Transparency & Fairness' card title in voting.html on mobile */
@media (max-width: 600px) {
  .score-card h2, .score-card .card-title {
    font-size: 1rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    line-height: 1.15;
    text-align: left !important;
    display: block !important;
  }
}
/* Responsive fix for 'Transparency & Fairness' card title in voting.html */
@media (max-width: 600px) {
  .score-card h2, .score-card .card-title, .score-card h3 {
    font-size: 1.1rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    line-height: 1.2;
    text-align: left !important;
    display: block !important;
  }
}
/* Responsive fix for 'How Scores Are Calculated' title and score cards in voting.html */
@media (max-width: 600px) {
  .page-section-header h2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 1.3rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    line-height: 1.2;
    text-align: left !important;
    margin-bottom: 0.5rem !important;
  }
  .page-section-header h2 span {
    display: block !important;
    margin-top: 0.2rem;
    font-size: 1.1rem !important;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-align: left !important;
  }
  .score-breakdown-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.7rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 0.2rem 0 !important;
  }
  .score-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 0.7rem 0.3rem !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: rgba(20,20,20,0.7) !important;
    font-size: 0.95rem !important;
    text-align: left !important;
  }
  .score-card h3 {
    font-size: 1.1rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    margin-bottom: 0.3rem !important;
  }
  .score-card .score-circle, .score-card .score-number, .score-card .score-percent {
    width: 100% !important;
    font-size: 1rem !important;
    margin-bottom: 0.2rem !important;
    text-align: left !important;
  }
}
/* Responsive fix for footer in official-awards.html (awards menu section) */
@media (max-width: 600px) {
  .site-footer .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 1rem 0.2rem !important;
  }
  .site-footer .brand, .site-footer .footer-links, .site-footer .footer-meta {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    margin-bottom: 0.5rem !important;
    text-align: left !important;
  }
  .site-footer .logo {
    font-size: 1.3rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    letter-spacing: 0.08em;
    line-height: 1.1;
    max-width: 100vw;
  }
  .site-footer .tagline {
    font-size: 1rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
  }
  .site-footer .footer-meta {
    font-size: 0.85rem !important;
    text-align: center !important;
    margin-top: 0.5rem !important;
  }
}
/* Responsive fix for footer in awards menu section */
@media (max-width: 600px) {
  .site-footer, .footer-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 1rem 0.2rem !important;
  }
  .footer-brand, .footer-links, .footer-contact {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    margin-bottom: 0.5rem !important;
  }
  .footer-socials {
    margin-top: 0.5rem !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
}
/* Responsive fix for Voting & Scoring section title and cards in home page */
@media (max-width: 600px) {
  .voting-scoring-section h2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 1.3rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    line-height: 1.2;
    text-align: left !important;
    margin-bottom: 0.5rem !important;
  }
  .voting-scoring-section h2 span {
    display: block !important;
    margin-top: 0.2rem;
    font-size: 1.1rem !important;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-align: left !important;
  }
  .voting-scoring-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.7rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 0.2rem 0 !important;
  }
  .voting-scoring-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 0.7rem 0.3rem !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: rgba(20,20,20,0.7) !important;
    font-size: 0.95rem !important;
    text-align: left !important;
  }
  .voting-scoring-card h3 {
    font-size: 1.1rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    margin-bottom: 0.3rem !important;
  }
  .voting-scoring-card .score-bar, .voting-scoring-card .score-percentage {
    width: 100% !important;
    font-size: 1rem !important;
    margin-bottom: 0.2rem !important;
  }
}
/* Enhanced mobile responsiveness for stats cards and Voting/Scoring section */
@media (max-width: 600px) {
  #why-afrkey .stats-grid-pro {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 0.2rem 0 !important;
  }
  #why-afrkey .stat-item-pro {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 0.5rem 0.2rem !important;
    margin: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    border-radius: 8px !important;
    background: rgba(20,20,20,0.7) !important;
  }
  #why-afrkey .stat-value-pro {
    font-size: 1.1rem !important;
    margin-bottom: 0.1rem !important;
    font-weight: 700 !important;
    text-align: left !important;
  }
  #why-afrkey .stat-label-pro {
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
    color: #ffd54f !important;
    text-align: left !important;
  }
  .voting-scoring-section, .voting-scoring-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.7rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 0.2rem 0 !important;
  }
  .voting-scoring-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 0.7rem 0.3rem !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: rgba(20,20,20,0.7) !important;
    font-size: 0.95rem !important;
    text-align: left !important;
  }
}
/* Responsive fix for 'By the Numbers' stats grid in home page */
@media (max-width: 600px) {
  #why-afrkey .stats-grid-pro {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  #why-afrkey .stat-item-pro {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 1rem 0.5rem !important;
    margin: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #why-afrkey .stat-value-pro, #why-afrkey .stat-label-pro {
    font-size: 1rem !important;
    margin-bottom: 0.2rem !important;
    margin-right: 0 !important;
    display: block !important;
    text-align: left !important;
  }
}
/* Responsive fix for cards in 'Why Choose AFRKEY?' section on home page */
@media (max-width: 600px) {
  #why-afrkey .why-features-pro {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  #why-afrkey .why-feature-pro {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 1rem 0.5rem !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #why-afrkey .feature-content-pro {
    font-size: 0.95rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    text-align: left !important;
  }
  #why-afrkey .feature-number-pro, #why-afrkey .feature-icon-pro {
    margin-bottom: 0.5rem !important;
    margin-right: 0 !important;
    display: block !important;
  }
}
/* Responsive fix for 'Why Choose AFRKEY?' and About Us title in home page */
@media (max-width: 600px) {
  #why-afrkey .why-title-pro {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 1.2rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    line-height: 1.2;
    text-align: left !important;
  }
  .container.split h2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 1.2rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    line-height: 1.2;
    text-align: left !important;
  }
  .container.split h2 .gold-text {
    display: block !important;
    margin-top: 0.2rem;
    font-size: 1.1rem !important;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-align: left !important;
  }
}
/* Force About Us title to stack on mobile */
@media (max-width: 600px) {
  .container.split h2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 1.2rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    line-height: 1.2;
  }
  .container.split h2 .gold-text {
    display: block !important;
    margin-top: 0.2rem;
    font-size: 1.1rem !important;
    letter-spacing: 0.08em;
    line-height: 1.1;
  }
}
/* Responsive fix for 'Why Choose AFRKEY?' and About Us title stacking */
@media (max-width: 600px) {
  .why-title-pro {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 1.2rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    line-height: 1.2;
  }
  .container.split h2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 1.2rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
    line-height: 1.2;
  }
  .container.split h2 span {
    display: block !important;
    margin-top: 0.2rem;
    font-size: 1.1rem !important;
    letter-spacing: 0.08em;
  }
}
/* GLOBAL RESPONSIVE FIXES FOR MAIN HOME SECTIONS AND TITLES */
@media (max-width: 600px) {
  .section h2, .section-title-epic, .prizes-title, .why-title-pro, .faq-title, .process-title-ultra, .roadmap h2, .container.split h2 {
    font-size: 1.2rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    letter-spacing: 0.05em;
    line-height: 1.2;
    max-width: 100vw;
    text-align: left !important;
  }
  .section, .section-alt, .video-section, .process-section-ultra, .prizes-section, .why-section-pro, .faq-section, .roadmap {
    padding: 1.2rem 0.2rem !important;
    min-width: 0;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .container, .container.split {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    min-width: 0;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .grid, .category-list, .join-cards, .prizes-grid, .why-features-pro, .faq-grid, .timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    min-width: 0;
    max-width: 100vw;
  }
  .prize-card, .category, .join-card, .why-feature-pro, .faq-item, .timeline-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  .image-card img, .video-card video {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }
  .image-caption, .section-subtitle, .prizes-subtitle, .why-subtitle-pro, .faq-subtitle, .process-subtitle-ultra, .roadmap .center {
    font-size: 0.95rem !important;
    text-align: left !important;
    max-width: 100vw;
    margin-top: 0.5rem;
  }
  .highlights {
    font-size: 0.95rem;
    padding-left: 1rem;
    max-width: 100vw;
  }
}
/* Responsive fix for About section title and footer brand name */
@media (max-width: 600px) {
  .container.split h2 {
    font-size: 1.2rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    letter-spacing: 0.05em;
    line-height: 1.2;
    max-width: 100vw;
  }
  .footer-brand .brand .logo {
    font-size: 1.3rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    letter-spacing: 0.08em;
    line-height: 1.1;
    max-width: 100vw;
  }
  .footer-brand .brand .tagline {
    font-size: 1rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100vw;
  }
}
/* Responsive fix for About section on home page */
@media (max-width: 600px) {
  .afrkey-meaning {
    font-size: 0.98rem;
    padding: 1rem 0.7rem;
    margin-left: 0;
    margin-right: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    max-width: 100vw;
  }
  .container.split {
    flex-direction: column !important;
    gap: 1.2rem;
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .container.split > div, .container.split > .image-card {
    min-width: 0;
    max-width: 100vw;
    box-sizing: border-box;
  }
}
/* ═══════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE FIXES FOR HOME, MENU, FOOTER
═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .container, .container.split {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100vw;
  }
  .split {
    flex-direction: column !important;
    gap: 2rem;
  }
  .image-card {
    margin: 0 auto 1.5rem auto;
    max-width: 320px;
  }
  .image-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
  }
  .highlights {
    padding-left: 1.2rem;
    font-size: 1rem;
  }
}

@media (max-width: 700px) {
  .container, .container.split {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .orbit-content, .process-header-ultra, .prizes-header, .why-header-pro, .faq-header {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .orbit-title, .orbit-line {
    font-size: 2rem !important;
  }
  .orbit-tagline {
    font-size: 1rem !important;
  }
  .orbit-btn {
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
  }
  .orbit-carousel {
    padding: 0.5rem 0 1rem;
  }
  .orbit-card-3d {
    width: 140px;
  }
  .card-3d-inner {
    padding: 0.7rem 0.5rem;
    border-radius: 8px;
  }
  .card-3d-trophy img {
    width: 40px;
    height: 50px;
  }
  .card-3d-title {
    font-size: 0.7rem;
  }
  .card-3d-desc {
    font-size: 0.6rem;
  }
  .orbit-track {
    gap: 0.5rem;
  }
}

@media (max-width: 600px) {
  .container, .container.split {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
  .split {
    flex-direction: column !important;
    gap: 1rem;
  }
  .image-card {
    max-width: 100%;
  }
  .image-caption {
    font-size: 0.9rem;
    text-align: center;
    margin-top: 0.5rem;
  }
  .highlights {
    font-size: 0.95rem;
  }
  .section {
    padding: 2.5rem 0.2rem;
  }
  .grid, .category-list, .join-cards, .prizes-grid, .why-features-pro {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
  }
  .prize-card, .category, .join-card, .why-feature-pro {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

@media (max-width: 480px) {
  .orbit-title, .orbit-line {
    font-size: 1.2rem !important;
  }
  .orbit-tagline {
    font-size: 0.8rem !important;
  }
  .orbit-btn {
    padding: 0.5rem 0.7rem;
    font-size: 0.7rem;
  }
  .footer-main, .footer-links, .footer-contact {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.7rem !important;
  }
  .site-footer {
    padding: 1.2rem 0.2rem !important;
  }
  .footer-main {
    gap: 1.2rem !important;
  }
  .footer-brand, .footer-links, .footer-contact {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .footer-socials {
    margin-top: 0.5rem;
    gap: 0.5rem;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 0.5rem !important;
    font-size: 0.85rem !important;
    text-align: center !important;
  }
}

@media (max-width: 400px) {
  .orbit-title, .orbit-line {
    font-size: 1rem !important;
  }
  .orbit-btn {
    font-size: 0.6rem;
    padding: 0.3rem 0.5rem;
  }
}
/*
  AFRKEY Awards - "ULTRA POWER EDITION"
  A website that took 10 years to build
  Theme: Liquid Gold & Cosmic Black
*/

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* Premium Gold Palette */
  --gold-100: #fff8e7;
  --gold-200: #ffe4a0;
  --gold-300: #ffd54f;
  --gold-400: #d4af37;
  --gold-500: #b8942c;
  --gold-600: #8b6914;
  
  /* Deep Space Palette */
  --void: #000000;
  --cosmic: #030303;
  --nebula: #0a0a0a;
  --stellar: #141414;
  
  /* Effects */
  --glass: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(212, 175, 55, 0.1);
  --glow-gold: 0 0 40px rgba(212, 175, 55, 0.3);
  --glow-white: 0 0 60px rgba(255, 255, 255, 0.1);
  
  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  
  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  
  /* Layout */
  --nav-width: 80px;
  --nav-width-open: 320px;
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-snap-type: y proximity;
}

body {
  font-family: var(--font-body);
  background: var(--void);
  color: #e8e8e8;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none; /* Custom cursor */
}

/* Custom Scrollbar - Gold */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(10, 10, 10, 0.95);
  border-left: 1px solid rgba(212, 175, 55, 0.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-500) 100%);
  border-radius: 5px;
  border: 2px solid rgba(10, 10, 10, 0.95);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-400) 100%);
}

/* Firefox Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-400) rgba(10, 10, 10, 0.95);
}

/* Custom Cursor */
.cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gold-400);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transition: transform 0.15s var(--ease-out-expo), opacity 0.3s;
  mix-blend-mode: difference;
}

.cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--gold-400);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100000;
}

.cursor.hover {
  transform: scale(2.5);
  background: rgba(212, 175, 55, 0.1);
}

@media (min-width: 900px) {
  body { padding-left: var(--nav-width); }
}

a {
  text-decoration: none;
  color: inherit;
  cursor: none;
}

img, video {
  max-width: 100%;
  display: block;
}

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

/* ═══════════════════════════════════════════════════════════════
   NOISE OVERLAY & GRAIN EFFECT
═══════════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════════
   PARTICLE CANVAS
═══════════════════════════════════════════════════════════════ */

#particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SIDE NAVIGATION - FLOATING GLASS PANEL
═══════════════════════════════════════════════════════════════ */

.side-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--nav-width);
  background: linear-gradient(180deg, rgba(10,10,10,0.95), rgba(0,0,0,0.98));
  backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--glass-border);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: width 0.8s var(--ease-out-expo);
  overflow: hidden;
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-400) rgba(0,0,0,0.2);
}

.side-nav::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--gold-400), transparent);
  opacity: 0;
  transition: opacity 0.5s;
}

/* Custom scrollbar for side-nav */
.side-nav::-webkit-scrollbar {
  width: 8px;
}
.side-nav::-webkit-scrollbar-thumb {
  background: var(--gold-400);
  border-radius: 6px;
}
.side-nav::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
}

.side-nav:hover::before,
.side-nav.open::before {
  opacity: 1;
}

.side-nav.open, .side-nav:hover {
  width: var(--nav-width-open);
}

.side-toggle {
  background: none;
  border: none;
  color: var(--gold-400);
  padding: 1.5rem;
  cursor: pointer;
  width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.5s var(--ease-out-expo);
}

/* Hamburger Bars */
.toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold-400);
  border-radius: 2px;
  transition: all 0.3s var(--ease-out-expo);
}

.side-toggle:hover .toggle-bar {
  background: var(--gold-300);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.side-toggle.active .toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.side-toggle.active .toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.side-toggle.active .toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.side-toggle:hover {
  text-shadow: 0 0 20px var(--gold-400);
}

.side-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
  width: var(--nav-width-open);
}

.side-links a {
  display: flex;
  align-items: center;
  padding: 1.2rem 1.8rem;
  color: #666;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-left: 2px solid transparent;
  transition: all 0.4s var(--ease-out-expo);
  position: relative;
}

.side-links a svg {
  min-width: 24px;
  margin-right: 2rem;
  fill: currentColor;
  transition: transform 0.4s var(--ease-out-expo);
}

.side-links a span {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s var(--ease-out-expo) 0.1s;
}

.side-nav:hover .side-links a span,
.side-nav.open .side-links a span {
  opacity: 1;
  transform: translateX(0);
}

.side-links a:hover, .side-links a.active {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.08), transparent);
  color: var(--gold-400);
  border-left-color: var(--gold-400);
}

.side-links a:hover svg {
  transform: scale(1.2);
}

/* ═══════════════════════════════════════════════════════════════
   HERO - ORBIT DESIGN (PROFESSIONAL EDITION)
═══════════════════════════════════════════════════════════════ */

.hero-orbit {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #030303 0%, #0a0908 50%, #050403 100%);
  padding: 80px 0 40px;
}

/* ── ENHANCED BACKGROUND ── */
.orbit-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.orbit-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(212, 175, 55, 0.03) 0%, transparent 60%),
    radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.015) 0%, transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(212, 175, 55, 0.01) 0%, transparent 30%);
}

.orbit-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.015) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,0,0,0.3) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,0,0,0.3) 0%, transparent 70%);
}

.orbit-glow {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1000px, 150vw);
  height: min(1000px, 150vw);
  background: 
    radial-gradient(ellipse at center, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.04) 30%, transparent 60%);
  animation: glowPulse 10s ease-in-out infinite;
  pointer-events: none;
}

.orbit-glow::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at 30% 40%, rgba(255, 215, 100, 0.05) 0%, transparent 50%);
  animation: glowDrift 15s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes glowDrift {
  0% { transform: translate(-10%, 0) rotate(0deg); }
  100% { transform: translate(10%, 5%) rotate(5deg); }
}

/* ── HERO CONTENT ── */
.orbit-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 1.5rem;
  max-width: 1200px;
  width: 100%;
}

.orbit-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
  position: relative;
}

.orbit-title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.orbit-line {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 12vw, 10rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.03em;
  background: linear-gradient(175deg, #ffffff 0%, #f5f5f5 30%, var(--gold-400) 70%, var(--gold-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: orbitFadeIn 1.4s var(--ease-out-expo) backwards;
  text-shadow: 0 0 80px rgba(212, 175, 55, 0.2);
  position: relative;
}

.orbit-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, transparent 40%, rgba(212, 175, 55, 0.15) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: blur(20px);
  opacity: 0.5;
}

.orbit-line.orbit-sub {
  font-size: clamp(1.2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.4em;
  margin-top: 0.3rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, var(--gold-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation-delay: 0.15s;
  text-shadow: none;
}

.orbit-line.orbit-sub::after {
  display: none;
}

@keyframes orbitFadeIn {
  from { 
    opacity: 0; 
    transform: translateY(50px) scale(0.95); 
    filter: blur(15px); 
  }
}

.orbit-tagline {
  font-size: clamp(0.9rem, 2vw, 1.25rem);
  color: rgba(255,255,255,0.5);
  font-weight: 300;
  letter-spacing: 0.15em;
  margin-bottom: 2rem;
  animation: orbitFadeIn 1.2s var(--ease-out-expo) 0.3s backwards;
  text-transform: uppercase;
}

.orbit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.1rem 2.8rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #000;
  background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-400) 50%, var(--gold-500) 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  transition: all 0.5s var(--ease-out-expo);
  animation: orbitFadeIn 1.2s var(--ease-out-expo) 0.5s backwards;
  box-shadow: 
    0 4px 20px rgba(212, 175, 55, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

.orbit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.orbit-btn::after {
  content: '→';
  font-size: 1.1rem;
  transition: transform 0.4s var(--ease-out-expo);
}

.orbit-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 15px 40px rgba(212, 175, 55, 0.35),
    0 5px 20px rgba(212, 175, 55, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.4);
  background-position: 100% 100%;
}

.orbit-btn:hover::before {
  transform: translateX(100%);
}

.orbit-btn:hover::after {
  transform: translateX(5px);
}

.orbit-btn:active {
  transform: translateY(-2px) scale(0.98);
}

/* ── 3D TROPHY CARDS CAROUSEL ── */
.orbit-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 2rem 0 4rem;
  z-index: 10;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.orbit-carousel::before,
.orbit-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 20;
  pointer-events: none;
}

.orbit-carousel::before {
  left: 0;
  background: linear-gradient(90deg, rgba(5,5,5,0.95) 0%, transparent 100%);
}

.orbit-carousel::after {
  right: 0;
  background: linear-gradient(-90deg, rgba(5,5,5,0.95) 0%, transparent 100%);
}

.orbit-track {
  display: flex;
  gap: 1.5rem;
  animation: carouselScroll 50s linear infinite;
  width: max-content;
  will-change: transform;
}

.orbit-track:hover {
  animation-play-state: paused;
}

@keyframes carouselScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── TROPHY CARDS ── */
.orbit-card-3d {
  flex-shrink: 0;
  width: 320px;
  perspective: 1200px;
}

.card-3d-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  background: 
    linear-gradient(165deg, rgba(25,22,15,0.98) 0%, rgba(12,11,8,0.99) 100%);
  border: 1px solid rgba(212, 175, 55, 0.08);
  border-radius: 20px;
  overflow: visible;
  transition: all 0.5s var(--ease-out-expo);
  transform-style: preserve-3d;
  box-shadow: 
    0 10px 40px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(212, 175, 55, 0.05);
}

.card-3d-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
}

.card-3d-inner:hover {
  border-color: rgba(212, 175, 55, 0.25);
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 25px 50px rgba(0,0,0,0.5),
    0 0 40px rgba(212, 175, 55, 0.06),
    inset 0 1px 0 rgba(212, 175, 55, 0.12);
  z-index: 10;
}

.card-3d-glow {
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 80%, rgba(212, 175, 55, 0.04) 0%, transparent 40%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.card-3d-inner:hover .card-3d-glow {
  opacity: 1;
}

.card-3d-trophy {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0 1.2rem;
  transition: transform 0.7s var(--ease-out-expo);
  position: relative;
}

.card-3d-trophy::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.5s;
}

.card-3d-inner:hover .card-3d-trophy {
  transform: translateZ(10px) scale(1.03);
}

.card-3d-inner:hover .card-3d-trophy::after {
  opacity: 1;
}

.card-3d-trophy img {
  width: 130px;
  height: 160px;
  object-fit: contain;
  filter: 
    drop-shadow(0 8px 20px rgba(212, 175, 55, 0.15))
    drop-shadow(0 2px 5px rgba(0,0,0,0.3));
  transition: all 0.5s var(--ease-out-expo);
}

.card-3d-inner:hover .card-3d-trophy img {
  filter: 
    drop-shadow(0 10px 25px rgba(212, 175, 55, 0.25))
    drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

.card-3d-info {
  position: relative;
  z-index: 2;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(212, 175, 55, 0.06);
}

.card-3d-number {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: var(--gold-400);
  opacity: 0.6;
  display: inline-block;
  margin-bottom: 0.4rem;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card-3d-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0.6rem;
  transition: all 0.4s ease;
}

.card-3d-inner:hover .card-3d-title {
  color: var(--gold-300);
}

.card-3d-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.35);
  transition: all 0.4s ease;
}

.card-3d-inner:hover .card-3d-desc {
  color: rgba(255,255,255,0.5);
}

.card-3d-inner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 5%, var(--gold-400) 50%, transparent 95%);
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: 0 0 20px 20px;
}

.card-3d-inner:hover::after {
  opacity: 0.8;
}

/* ── SCROLL INDICATOR ── */
.orbit-scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: scrollFloat 2.5s ease-in-out infinite;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.orbit-scroll:hover {
  opacity: 1;
}

@keyframes scrollFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

.orbit-mouse {
  width: 24px;
  height: 40px;
  border: 2px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  transition: border-color 0.3s;
}

.orbit-scroll:hover .orbit-mouse {
  border-color: rgba(212, 175, 55, 0.6);
}

.orbit-wheel {
  width: 3px;
  height: 8px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  border-radius: 2px;
  animation: wheelScroll 1.8s ease-in-out infinite;
}

@keyframes wheelScroll {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(12px); }
}

/* ═══════════════════════════════════════════════════════════════
   ORBIT RESPONSIVE - COMPREHENSIVE MOBILE SUPPORT
═══════════════════════════════════════════════════════════════ */

/* Large Tablets & Small Desktops */
@media (max-width: 1200px) {
  .orbit-card-3d { width: 280px; }
  .card-3d-trophy img { width: 110px; height: 140px; }
  .card-3d-title { font-size: 1rem; }
  .card-3d-desc { font-size: 0.8rem; }
}

/* Tablets */
@media (max-width: 1024px) {
  .hero-orbit { padding: 70px 0 30px; }
  .orbit-content { padding: 1rem; }
  .orbit-line { font-size: clamp(3rem, 10vw, 7rem); }
  .orbit-line.orbit-sub { letter-spacing: 0.3em; }
  .orbit-card-3d { width: 250px; }
  .card-3d-inner { padding: 1.5rem 1.2rem; border-radius: 16px; }
  .card-3d-trophy img { width: 90px; height: 115px; }
  .card-3d-title { font-size: 0.95rem; }
  .card-3d-desc { font-size: 0.75rem; line-height: 1.5; }
  .orbit-track { gap: 1.2rem; }
  .orbit-carousel { padding: 1.5rem 0 3rem; }
  .orbit-glow { width: min(800px, 180vw); height: min(800px, 180vw); }
}

/* Large Phones / Small Tablets */
@media (max-width: 768px) {
  .hero-orbit { 
    padding: 60px 0 25px; 
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: flex-start;
    padding-top: 100px;
  }
  .orbit-content { 
    margin-bottom: 1rem; 
    padding: 0.75rem;
  }
  .orbit-line { 
    font-size: clamp(2.8rem, 14vw, 5rem); 
    letter-spacing: -0.02em;
  }
  .orbit-line.orbit-sub { 
    font-size: clamp(1rem, 5vw, 1.8rem);
    letter-spacing: 0.25em;
    margin-top: 0.2rem;
  }
  .orbit-tagline { 
    font-size: 0.85rem; 
    margin-bottom: 1.5rem;
    letter-spacing: 0.1em;
  }
  .orbit-btn { 
    padding: 0.95rem 2rem; 
    font-size: 0.75rem;
    letter-spacing: 0.15em;
  }
  .orbit-card-3d { width: 220px; }
  .card-3d-inner { padding: 1.2rem 1rem; border-radius: 14px; }
  .card-3d-trophy { padding: 0.3rem 0 0.8rem; }
  .card-3d-trophy img { width: 75px; height: 95px; }
  .card-3d-number { font-size: 0.55rem; margin-bottom: 0.3rem; }
  .card-3d-title { font-size: 0.85rem; margin-bottom: 0.4rem; }
  .card-3d-desc { font-size: 0.7rem; line-height: 1.45; }
  .card-3d-info { padding-top: 0.4rem; }
  .orbit-track { gap: 1rem; }
  .orbit-carousel { padding: 1rem 0 2.5rem; }
  .orbit-carousel::before,
  .orbit-carousel::after { width: 60px; }
  .orbit-scroll { bottom: 1rem; }
  .orbit-mouse { width: 20px; height: 34px; }
  .orbit-wheel { width: 2px; height: 6px; }
  .orbit-title::before { width: 300px; height: 100px; }
}

/* Mobile Phones */
@media (max-width: 480px) {
  .hero-orbit { 
    padding-top: 80px;
    padding-bottom: 20px;
  }
  .orbit-line { 
    font-size: clamp(2.5rem, 16vw, 4rem); 
    letter-spacing: -0.01em;
  }
  .orbit-line.orbit-sub { 
    font-size: clamp(0.9rem, 5vw, 1.4rem);
    letter-spacing: 0.2em;
  }
  .orbit-tagline { 
    font-size: 0.75rem; 
    margin-bottom: 1.2rem;
    padding: 0 10px;
  }
  .orbit-btn { 
    padding: 0.85rem 1.8rem; 
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
  .orbit-btn::after { font-size: 0.9rem; }
  .orbit-card-3d { width: 190px; }
  .card-3d-inner { 
    padding: 1rem 0.8rem; 
    border-radius: 12px;
  }
  .card-3d-trophy img { width: 65px; height: 82px; }
  .card-3d-number { font-size: 0.5rem; letter-spacing: 0.2em; }
  .card-3d-title { font-size: 0.78rem; }
  .card-3d-desc { font-size: 0.65rem; line-height: 1.4; }
  .orbit-track { gap: 0.8rem; }
  .orbit-carousel::before,
  .orbit-carousel::after { width: 40px; }
  .orbit-glow { 
    width: 200vw; 
    height: 200vw; 
    top: 15%;
  }
  .orbit-title::before { display: none; }
}

/* Small Mobile Phones */
@media (max-width: 360px) {
  .orbit-line { font-size: 2.2rem; }
  .orbit-line.orbit-sub { 
    font-size: 0.85rem;
    letter-spacing: 0.15em;
  }
  .orbit-tagline { font-size: 0.7rem; }
  .orbit-btn { 
    padding: 0.75rem 1.5rem; 
    font-size: 0.65rem;
  }
  .orbit-card-3d { width: 170px; }
  .card-3d-inner { padding: 0.8rem 0.7rem; }
  .card-3d-trophy img { width: 55px; height: 70px; }
  .card-3d-title { font-size: 0.72rem; }
  .card-3d-desc { font-size: 0.6rem; }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-orbit {
    min-height: auto;
    padding: 60px 0 20px;
  }
  .orbit-content { margin-bottom: 0.5rem; }
  .orbit-line { font-size: clamp(2rem, 8vh, 3.5rem); }
  .orbit-line.orbit-sub { font-size: clamp(0.8rem, 3vh, 1.2rem); }
  .orbit-tagline { margin-bottom: 1rem; font-size: 0.8rem; }
  .orbit-carousel { padding: 0.5rem 0 1.5rem; }
  .orbit-card-3d { width: 200px; }
  .card-3d-trophy img { width: 60px; height: 75px; }
  .orbit-scroll { display: none; }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .card-3d-inner:hover {
    transform: none;
    border-color: rgba(212, 175, 55, 0.12);
    box-shadow: 0 10px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(212, 175, 55, 0.05);
  }
  .card-3d-inner:active {
    transform: scale(0.98);
    border-color: rgba(212, 175, 55, 0.25);
  }
  .orbit-btn:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.25);
  }
  .orbit-btn:active {
    transform: scale(0.96);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .orbit-glow,
  .orbit-glow::before,
  .orbit-track,
  .orbit-scroll,
  .orbit-wheel,
  .orbit-line,
  .orbit-tagline,
  .orbit-btn {
    animation: none;
  }
  .orbit-track {
    animation: carouselScroll 120s linear infinite;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HERO - THRONE DESIGN
═══════════════════════════════════════════════════════════════ */

.hero-throne {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #020202;
}

/* ── BACKGROUND ── */
.throne-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.throne-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(212, 175, 55, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(212, 175, 55, 0.02) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(212, 175, 55, 0.03) 0%, transparent 40%);
  animation: throneGradientShift 12s ease-in-out infinite alternate;
}

@keyframes throneGradientShift {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.throne-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.025) 1px, transparent 1px);
  background-size: 100px 100px;
  mask-image: radial-gradient(ellipse 70% 70% at 35% 50%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 35% 50%, #000 0%, transparent 100%);
  animation: gridDrift 20s linear infinite;
}

@keyframes gridDrift {
  0% { background-position: 0 0; }
  100% { background-position: 100px 100px; }
}

.throne-flare {
  position: absolute;
  top: 50%;
  left: 30%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.06) 0%, transparent 60%);
  filter: blur(60px);
  animation: flarePulse 5s ease-in-out infinite alternate;
}

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

/* ── SLIDE STAGE ── */
.throne-stage {
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: 100vh;
}

.throne-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
  padding: 0 6rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.throne-slide.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* ── LEFT: TROPHY ── */
.throne-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.throne-halo {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(212, 175, 55, 0.08) 0%,
    rgba(212, 175, 55, 0.04) 30%,
    rgba(212, 175, 55, 0.015) 50%,
    transparent 70%
  );
  animation: haloBreath 4s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes haloBreath {
  0% { transform: scale(0.95); opacity: 0.6; }
  100% { transform: scale(1.1); opacity: 1; }
}

.throne-trophy {
  position: relative;
  z-index: 5;
  width: auto;
  height: 380px;
  max-width: 280px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 50px rgba(212, 175, 55, 0.2))
    drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.throne-slide.active .throne-trophy {
  animation: throneIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

@keyframes throneIn {
  from {
    opacity: 0;
    transform: scale(0.4) translateY(60px);
    filter: blur(25px) drop-shadow(0 0 0 transparent);
  }
}

.throne-slide:hover .throne-trophy {
  transform: scale(1.06) translateY(-10px);
  filter:
    drop-shadow(0 0 80px rgba(212, 175, 55, 0.35))
    drop-shadow(0 40px 80px rgba(0, 0, 0, 0.6));
}

.throne-reflect {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 50px;
  background: radial-gradient(ellipse, rgba(212, 175, 55, 0.06) 0%, transparent 70%);
  filter: blur(12px);
  z-index: 2;
}

/* ── RIGHT: CONTENT ── */
.throne-right {
  padding-left: 4rem;
  position: relative;
}

.throne-slide.active .throne-right {
  animation: contentReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}

@keyframes contentReveal {
  from {
    opacity: 0;
    transform: translateX(80px);
    filter: blur(10px);
  }
}

.throne-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(8rem, 14vw, 14rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -8px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(212, 175, 55, 0.08);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-65%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.throne-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 7rem);
  font-weight: 900;
  line-height: 0.9;
  color: #fff;
  letter-spacing: -3px;
  margin: 0 0 0.5rem;
  position: relative;
  z-index: 2;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

.throne-sub {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  font-weight: 300;
  letter-spacing: 8px;
  text-transform: uppercase;
  margin: 0 0 2rem;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  z-index: 2;
}

.throne-bar {
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-400), rgba(212, 175, 55, 0.1));
  margin-bottom: 1.5rem;
  border-radius: 3px;
  position: relative;
  z-index: 2;
}

.throne-desc {
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.4);
  max-width: 500px;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 2;
}

/* CTA */
.throne-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 2.8rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  position: relative;
  overflow: hidden;
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.throne-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: left 0.6s;
}

.throne-cta:hover::before { left: 100%; }

.throne-cta:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 15px 50px rgba(212, 175, 55, 0.3),
    0 0 80px rgba(212, 175, 55, 0.1);
}

.throne-cta svg {
  transition: transform 0.3s;
}

.throne-cta:hover svg {
  transform: translateX(4px);
}

/* ── BOTTOM BAR ── */
.throne-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 6rem;
  z-index: 50;
  border-top: 1px solid rgba(255,255,255,0.04);
  background: linear-gradient(0deg, rgba(0,0,0,0.4), transparent);
}

.throne-brand {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.25);
}

.throne-brand span {
  font-weight: 300;
  color: rgba(212, 175, 55, 0.3);
  letter-spacing: 5px;
}

.throne-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.throne-arrow {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.throne-arrow:hover {
  border-color: var(--gold-400);
  color: var(--gold-400);
  background: rgba(212, 175, 55, 0.06);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
}

.throne-progress {
  width: 140px;
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}

.throne-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
  transition: width 0.1s linear;
}

.throne-counter {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.2);
}

.throne-counter span {
  color: var(--gold-400);
  font-weight: 800;
}

/* ── SIDE DOTS ── */
.throne-dots {
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  z-index: 50;
}

.throne-dot {
  width: 3px;
  height: 18px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.throne-dot.active {
  height: 40px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-300));
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
}

.throne-dot:hover {
  background: rgba(212, 175, 55, 0.4);
  height: 28px;
}

/* ── TRANSITION FLASH ── */
.hero-throne.flash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 50%, rgba(212, 175, 55, 0.06) 0%, transparent 60%);
  animation: throneFlash 0.5s ease-out forwards;
}

@keyframes throneFlash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .throne-slide {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    padding: 6rem 3rem 8rem;
    text-align: center;
  }

  .throne-left {
    height: auto;
    padding-top: 2rem;
  }

  .throne-right {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .throne-num {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    font-size: 6rem;
    margin-bottom: -2rem;
    letter-spacing: -4px;
  }

  .throne-title {
    font-size: clamp(2.8rem, 10vw, 4.5rem);
    letter-spacing: -2px;
  }

  .throne-sub {
    letter-spacing: 5px;
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
  }

  .throne-desc {
    text-align: center;
    font-size: 0.9rem;
  }

  .throne-trophy {
    height: 260px;
    max-width: 200px;
  }

  .throne-halo {
    width: 260px;
    height: 260px;
  }

  .throne-bottom {
    padding: 1.5rem 2rem;
  }

  .throne-dots {
    right: 1rem;
    gap: 0.5rem;
  }

  .throne-dot { height: 14px; width: 2px; }
  .throne-dot.active { height: 30px; }

  .throne-flare {
    left: 50%;
    width: 400px;
    height: 400px;
  }
}

@media (max-width: 600px) {
  .throne-slide {
    padding: 5rem 1.5rem 7rem;
  }

  .throne-trophy {
    height: 200px;
    max-width: 160px;
  }

  .throne-halo {
    width: 200px;
    height: 200px;
  }

  .throne-title {
    font-size: 2.5rem;
  }

  .throne-sub {
    font-size: 0.8rem;
    letter-spacing: 3px;
  }

  .throne-desc {
    font-size: 0.8rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }

  .throne-cta {
    padding: 0.9rem 2rem;
    font-size: 0.7rem;
  }

  .throne-num {
    font-size: 4rem;
    letter-spacing: -2px;
    margin-bottom: -1rem;
  }

  .throne-bottom {
    padding: 1rem 1.2rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }

  .throne-brand { display: none; }

  .throne-arrow {
    width: 38px;
    height: 38px;
  }

  .throne-progress {
    width: 80px;
  }

  .throne-dots {
    right: 0.5rem;
  }

  .throne-dot { height: 10px; }
  .throne-dot.active { height: 22px; }

  .throne-flare {
    width: 250px;
    height: 250px;
  }
}



/* ═══════════════════════════════════════════════════════════════
   HERO - ARTIST SPOTLIGHT
═══════════════════════════════════════════════════════════════ */

.hero-artist {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

/* Artist Background */
.hero-artist-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.artist-image {
  width: auto;
  height: 90%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: grayscale(30%) contrast(1.1);
  animation: artistReveal 2s var(--ease-out-expo) forwards, artistFloat 8s ease-in-out 2s infinite;
  opacity: 0;
  transform: scale(1.1);
}

@keyframes artistReveal {
  0% { 
    opacity: 0; 
    transform: scale(1.2) translateY(50px);
    filter: grayscale(100%) contrast(1.1) blur(10px);
  }
  100% { 
    opacity: 1; 
    transform: scale(1) translateY(0);
    filter: grayscale(30%) contrast(1.1) blur(0);
  }
}

@keyframes artistFloat {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.02) translateY(-10px); }
}

/* Overlays */
.hero-overlay-dark {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.9) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.5) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.5) 100%);
  z-index: 2;
}

.hero-overlay-gold {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 80% 50% at 50% 80%, rgba(212, 175, 55, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 40%);
  z-index: 3;
  animation: goldPulse 4s ease-in-out infinite;
}

@keyframes goldPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.hero-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.1) 2px,
    rgba(0,0,0,0.1) 4px
  );
  z-index: 4;
  pointer-events: none;
  opacity: 0.5;
}

/* Floating Particles */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.hero-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--gold-400);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--gold-400), 0 0 20px var(--gold-400);
  animation: particleFly 10s linear infinite;
}

.hero-particles span:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.hero-particles span:nth-child(2) { left: 20%; animation-delay: -2s; animation-duration: 14s; }
.hero-particles span:nth-child(3) { left: 35%; animation-delay: -4s; animation-duration: 11s; }
.hero-particles span:nth-child(4) { left: 50%; animation-delay: -1s; animation-duration: 16s; }
.hero-particles span:nth-child(5) { left: 65%; animation-delay: -3s; animation-duration: 13s; }
.hero-particles span:nth-child(6) { left: 75%; animation-delay: -5s; animation-duration: 10s; }
.hero-particles span:nth-child(7) { left: 85%; animation-delay: -2.5s; animation-duration: 15s; }
.hero-particles span:nth-child(8) { left: 15%; animation-delay: -6s; animation-duration: 9s; }
.hero-particles span:nth-child(9) { left: 45%; animation-delay: -3.5s; animation-duration: 17s; }
.hero-particles span:nth-child(10) { left: 90%; animation-delay: -1.5s; animation-duration: 11s; }

@keyframes particleFly {
  0% { 
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% { 
    transform: translateY(-100vh) scale(1);
    opacity: 0;
  }
}

/* Main Content */
.hero-content-centered {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.hero-tag {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--gold-400);
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.05);
  backdrop-filter: blur(10px);
  animation: fadeDown 1s var(--ease-out-expo) 0.5s backwards;
}

@keyframes fadeDown {
  0% { opacity: 0; transform: translateY(-20px); }
}

/* Mega Title */
.hero-mega-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.85;
}

.title-word {
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 14rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -4px;
  
  background: linear-gradient(
    135deg,
    var(--gold-100) 0%,
    var(--gold-300) 25%,
    var(--gold-400) 50%,
    var(--gold-300) 75%,
    var(--gold-100) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  animation: titleReveal 1.2s var(--ease-out-expo) 0.8s backwards, liquidGold 6s ease infinite;
  
  text-shadow: 
    0 0 60px rgba(212, 175, 55, 0.4),
    0 0 100px rgba(212, 175, 55, 0.2);
}

.title-outline {
  font-size: clamp(2.5rem, 12vw, 9rem);
  background: transparent;
  -webkit-text-stroke: 2px var(--gold-400);
  color: transparent;
  animation-delay: 1s;
}

@keyframes titleReveal {
  0% { 
    opacity: 0; 
    transform: translateY(80px) rotateX(30deg);
    filter: blur(15px);
  }
}

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

.hero-tagline {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  letter-spacing: 2px;
  animation: fadeUp 1s var(--ease-out-expo) 1.2s backwards;
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(30px); }
}

/* Buttons */
.hero-actions-minimal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeUp 1s var(--ease-out-expo) 1.4s backwards;
}

.btn-gold {
  padding: 1rem 2.5rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #000;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-400), var(--gold-500));
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
  box-shadow: 0 10px 40px rgba(212, 175, 55, 0.3);
}

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

.btn-gold:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 50px rgba(212, 175, 55, 0.4);
}

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

.btn-ghost {
  padding: 1rem 2.5rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold-400);
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.3);
  transition: all 0.4s var(--ease-out-expo);
}

.btn-ghost:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--gold-400);
  transform: translateY(-3px);
}

/* Minimal Countdown */
.hero-countdown-minimal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  animation: fadeUp 1s var(--ease-out-expo) 1.6s backwards;
}

.countdown-item-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem 1.2rem;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(212, 175, 55, 0.2);
  backdrop-filter: blur(10px);
}

.countdown-item-mini span {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold-400);
  line-height: 1;
}

.countdown-item-mini small {
  font-size: 0.6rem;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.5);
  margin-top: 0.3rem;
}

.countdown-sep {
  font-size: 1.5rem;
  color: var(--gold-400);
  opacity: 0.5;
  animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Scroll Hint */
.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  z-index: 10;
  animation: fadeUp 1s var(--ease-out-expo) 2s backwards;
}

.scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, var(--gold-400), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.5; transform: scaleY(0.7); }
}

.scroll-hint span {
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION DIVIDERS/* ═══════════════════════════════════════════════════════════════
   SECTION DIVIDERS
═══════════════════════════════════════════════════════════════ */

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 4rem 2rem;
  background: linear-gradient(180deg, var(--void) 0%, var(--cosmic) 50%, var(--void) 100%);
}

.divider-line {
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
}

.divider-icon {
  font-size: 1.2rem;
  color: var(--gold-400);
  animation: iconPulse 3s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION TITLE EPIC STYLING
═══════════════════════════════════════════════════════════════ */

.section-title-epic {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--gold-200), var(--gold-400), var(--gold-300));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: liquidGold 6s ease infinite;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS - MAGNETIC HOVER
═══════════════════════════════════════════════════════════════ */

.button {
  position: relative;
  padding: 1.2rem 3.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  border: none;
  cursor: none;
  overflow: hidden;
  transition: all 0.5s var(--ease-out-expo);
}

.button::before {
  content: '';
  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.5s;
}

.button:hover::before {
  left: 100%;
}

.button.primary {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--void);
  box-shadow:
    0 4px 15px rgba(212, 175, 55, 0.4),
    0 0 0 1px rgba(212, 175, 55, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

.button.primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 8px 30px rgba(212, 175, 55, 0.5),
    0 0 60px rgba(212, 175, 55, 0.3);
}

.button.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(10px);
}

.button.ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--gold-400);
  color: var(--gold-400);
  transform: translateY(-4px);
}

/* ═══════════════════════════════════════════════════════════════
   HERO METRICS - FLOATING STATS
═══════════════════════════════════════════════════════════════ */

.hero-metrics {
  display: flex;
  justify-content: center;
  gap: 5rem;
  margin-top: 5rem;
  animation: fadeSlideUp 1s var(--ease-out-expo) 1.1s forwards;
  opacity: 0;
}

.hero-metrics > div,
.metric-item {
  text-align: center;
  position: relative;
}

.hero-metrics > div::after,
.metric-item::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}

.metric, .metric-val {
  display: block;
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--gold-400);
  line-height: 1;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
}

.label, .metric-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.5);
  margin-top: 0.8rem;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   SECTIONS - SCROLL REVEAL
═══════════════════════════════════════════════════════════════ */

.section {
  padding: 10rem 2rem;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
}

.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}

.section-alt {
  background: linear-gradient(180deg, var(--nebula) 0%, var(--cosmic) 100%);
}

/* ===== AFRKEY MEANING HIGHLIGHT ===== */
.afrkey-meaning {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-left: 4px solid var(--gold-400);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  border-radius: 0 12px 12px 0;
  font-size: 1.15rem;
  line-height: 1.8;
}

.afrkey-meaning strong {
  color: var(--gold-400);
  font-size: 1.3rem;
}

.afrkey-meaning em {
  color: var(--gold-300);
  font-style: normal;
  font-weight: 600;
}

/* ===== VIDEO SHOWCASE SECTION ===== */
.video-section {
  padding: 8rem 2rem;
  background: linear-gradient(180deg, var(--void) 0%, #0a0a0a 50%, var(--void) 100%);
  position: relative;
  overflow: hidden;
}

.video-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.video-section .section-subtitle {
  text-align: center;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 3rem;
  font-family: var(--font-body);
  letter-spacing: 1px;
}

.video-card {
  position: relative;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 
    0 40px 100px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(212, 175, 55, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(212, 175, 55, 0.4);
  transform: perspective(1000px) translateZ(0);
  transition: all 0.6s var(--ease-out-expo);
}

.video-card:hover {
  transform: perspective(1000px) translateY(-10px) translateZ(20px);
  box-shadow: 
    0 50px 100px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(212, 175, 55, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: rgba(212, 175, 55, 0.5);
}

.showcase-video {
  width: 100%;
  height: auto;
  min-height: 500px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.2) 100%
  );
  pointer-events: none;
}

.video-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(212, 175, 55, 0.03) 50%,
    transparent 60%
  );
  animation: videoShine 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes videoShine {
  0%, 100% { transform: translateX(-100%) rotate(0deg); }
  50% { transform: translateX(100%) rotate(0deg); }
}

/* Video Section Responsive */
@media (max-width: 1024px) {
  .video-section {
    padding: 6rem 1.5rem;
  }
  
  .video-card {
    border-radius: 16px;
  }
}

@media (max-width: 768px) {
  .video-section {
    padding: 4rem 1rem;
  }
  
  .video-section .section-subtitle {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
  
  .video-card {
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .video-section {
    padding: 3rem 0.75rem;
  }
  
  .video-card {
    border-radius: 8px;
  }
}

.section h2 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 4rem;
  
  background: linear-gradient(135deg, #fff 0%, #888 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s var(--ease-out-expo);
}

/* About section title - single line */
#about h2 {
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  white-space: nowrap;
  text-align: left;
  letter-spacing: 3px;
}

.section.visible h2 {
  opacity: 1;
  transform: translateY(0);
}

.container {
  max-width: 1600px;
  margin: 0 auto;
}

.center {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
  color: rgba(255,255,255,0.6);
  font-size: 1.15rem;
}

/* ═══════════════════════════════════════════════════════════════
   SPLIT LAYOUT
═══════════════════════════════════════════════════════════════ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.split p {
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  line-height: 1.9;
}

/* ═══════════════════════════════════════════════════════════════
   HIGHLIGHTS LIST
═══════════════════════════════════════════════════════════════ */

.highlights {
  list-style: none;
  margin-top: 3rem;
}

.highlights li {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 1.5rem;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
  transition: all 0.5s var(--ease-out-expo);
}

.highlights li::before {
  content: '◆';
  color: var(--gold-400);
  margin-right: 1.5rem;
  font-size: 0.8rem;
  animation: pulse 2s infinite;
}

.highlights li:hover {
  background: rgba(212, 175, 55, 0.05);
  border-color: var(--gold-400);
  transform: translateX(10px);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE CARD - PARALLAX HOVER
═══════════════════════════════════════════════════════════════ */

.image-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.image-card img {
  width: 100%;
  height: auto;
  filter: grayscale(30%) contrast(1.1);
  transition: all 0.8s var(--ease-out-expo);
  transform: scale(1.05);
}

.image-card:hover img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1);
}

.image-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.8) 100%);
  z-index: 1;
}

.image-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--gold-400), transparent, var(--gold-400));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s;
}

.image-card:hover::after {
  opacity: 1;
}

.image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  z-index: 2;
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s var(--ease-out-expo);
}

.image-card:hover .image-caption {
  transform: translateY(0);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS - 3D TILT EFFECT
═══════════════════════════════════════════════════════════════ */

.card-grid, .grid.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
}

.card, .glass-card {
  position: relative;
  padding: 3rem;
  background: linear-gradient(145deg, rgba(20,20,20,0.8), rgba(10,10,10,0.9));
  border: 1px solid var(--glass-border);
  overflow: hidden;
  transition: all 0.6s var(--ease-out-expo);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card::before, .glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  transform: scaleX(0);
  transition: transform 0.6s var(--ease-out-expo);
}

.card::after, .glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 175, 55, 0.1), transparent 50%);
  opacity: 0;
  transition: opacity 0.5s;
}

.card:hover, .glass-card:hover {
  transform: translateY(-15px) rotateX(5deg);
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.5),
    0 0 40px rgba(212, 175, 55, 0.1);
}

.card:hover::before, .glass-card:hover::before {
  transform: scaleX(1);
}

.card:hover::after, .glass-card:hover::after {
  opacity: 1;
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1rem;
  transition: color 0.3s;
}

.card:hover h3 {
  color: var(--gold-400);
}

.card p {
  color: rgba(255,255,255,0.6);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.card img {
  width: calc(100% + 6rem);
  margin: -3rem -3rem 2rem -3rem;
  height: 280px;
  object-fit: cover;
  filter: grayscale(20%);
  transition: all 0.6s var(--ease-out-expo);
}

.card:hover img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════
   PROCESS STEPS - CONNECTED TIMELINE
═══════════════════════════════════════════════════════════════ */

.grid.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
  position: relative;
}

.step {
  position: relative;
  padding: 3rem;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  transition: all 0.5s var(--ease-out-expo);
  counter-increment: step;
}

.step::before {
  content: '';
  position: absolute;
  top: 3rem;
  right: -3rem;
  width: 3rem;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-400), transparent);
  display: none;
}

.step:not(:last-child)::before {
  display: block;
}

.step:hover {
  transform: translateY(-10px);
  border-color: var(--gold-400);
  background: rgba(212, 175, 55, 0.03);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.step span {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.3;
  display: block;
  margin-bottom: 1rem;
  transition: opacity 0.5s;
}

.step:hover span {
  opacity: 0.8;
}

.step h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1rem;
}

.step p {
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORIES - MORPHING TAGS
═══════════════════════════════════════════════════════════════ */

.category-list, .grid.category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}

.category {
  padding: 1.2rem 2.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.7);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  cursor: none;
  position: relative;
  overflow: hidden;
  transition: all 0.5s var(--ease-out-expo);
  z-index: 1;
}

.category::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-out-expo);
  z-index: -1;
}

.category span {
  position: relative;
  z-index: 1;
}

.category:hover {
  color: #fff;
  border-color: var(--gold-400);
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.category:hover::before {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   BLOCKQUOTE - TESTIMONIALS
═══════════════════════════════════════════════════════════════ */

blockquote {
  position: relative;
  padding: 2rem 2rem 2rem 3rem;
  border-left: 3px solid var(--gold-400);
  background: rgba(212, 175, 55, 0.03);
  font-style: italic;
  font-size: 1.2rem;
  color: rgba(255,255,255,0.85);
}

blockquote::before {
  content: '"';
  position: absolute;
  top: 0;
  left: 1rem;
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--gold-400);
  opacity: 0.3;
  line-height: 1;
}

blockquote footer {
  margin-top: 1.5rem;
  font-style: normal;
  color: var(--gold-400);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   FAQ - ACCORDION
═══════════════════════════════════════════════════════════════ */

.faq-list {
  max-width: 900px;
  margin: 0 auto;
}

details {
  margin-bottom: 1rem;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  transition: all 0.3s;
}

details[open] {
  border-color: var(--gold-400);
  background: rgba(212, 175, 55, 0.03);
}

summary {
  padding: 1.5rem 2rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  cursor: none;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--gold-400);
  transition: transform 0.3s;
}

details[open] summary::after {
  transform: rotate(45deg);
}

details p {
  padding: 0 2rem 1.5rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════
   FORM - PREMIUM INPUTS
═══════════════════════════════════════════════════════════════ */

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.5);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.form input,
.form select,
.form textarea {
  padding: 1.2rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: #fff;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  outline: none;
  transition: all 0.3s;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--gold-400);
  background: rgba(212, 175, 55, 0.03);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
}

.form-note {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   LOGO STRIP - MARQUEE
═══════════════════════════════════════════════════════════════ */

.logo-strip {
  display: flex;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
  margin-top: 4rem;
}

.logo-strip span {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.3);
  transition: color 0.3s;
}

.logo-strip span:hover {
  color: var(--gold-400);
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT LIST
═══════════════════════════════════════════════════════════════ */

.contact-list, .info {
  margin-top: 2rem;
}

.contact-list > div, .info > div {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--glass-border);
}

.contact-list strong, .info strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold-400);
  margin-bottom: 0.5rem;
}

.contact-list span, .info span {
  color: rgba(255,255,255,0.8);
  font-size: 1.1rem;
}

/* ═══════════════════════════════════════════════════════════════
   CTA BOX
═══════════════════════════════════════════════════════════════ */

.cta-box {
  padding: 4rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.02));
  border: 1px solid var(--gold-400);
  text-align: center;
}

.cta-box h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

.cta-box p {
  color: rgba(255,255,255,0.7);
  margin-bottom: 2rem;
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING CTA
═══════════════════════════════════════════════════════════════ */

.floating-cta {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  padding: 1.2rem 2rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--void);
  border-radius: 50px;
  box-shadow:
    0 10px 30px rgba(212, 175, 55, 0.4),
    0 0 0 0 rgba(212, 175, 55, 0.4);
  animation: floatPulse 3s infinite;
  cursor: none;
}

@keyframes floatPulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4), 0 0 0 0 rgba(212, 175, 55, 0.4);
  }
  50% {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5), 0 0 0 10px rgba(212, 175, 55, 0);
  }
}

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

footer {
  padding: 8rem 2rem 4rem;
  background: linear-gradient(180deg, var(--void), #000);
  text-align: center;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}

.brand {
  margin-bottom: 2rem;
}

.brand .logo {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: var(--gold-400);
  text-transform: uppercase;
  letter-spacing: 4px;
}

.brand .tagline {
  font-size: 1rem;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}

footer > .container > p {
  color: rgba(255,255,255,0.4);
  margin-bottom: 3rem;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.footer-links a {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.5);
  position: relative;
  transition: color 0.3s;
}

.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold-400);
  transition: width 0.3s var(--ease-out-expo);
}

.footer-links a:hover {
  color: var(--gold-400);
}

.footer-links a:hover::after {
  width: 100%;
}

.footer-meta {
  color: rgba(255,255,255,0.3);
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════
   CARD ICONS & LINKS
═══════════════════════════════════════════════════════════════ */

.card-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  display: block;
}

.card-link {
  display: inline-block;
  color: var(--gold-400);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  transition: all 0.3s var(--ease-out-expo);
}

.card-link:hover {
  letter-spacing: 4px;
  color: var(--gold-300);
}

/* ═══════════════════════════════════════════════════════════════
   JOIN THE MOVEMENT SECTION
═══════════════════════════════════════════════════════════════ */

.join-section {
  background: linear-gradient(180deg, var(--void) 0%, #080808 50%, var(--void) 100%);
  position: relative;
}

.join-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.join-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.join-card {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 16px;
  padding: 3rem 2.5rem;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: all 0.5s var(--ease-out-expo);
}

.join-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400), var(--gold-500));
  opacity: 0;
  transition: opacity 0.5s ease;
}

.join-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(212, 175, 55, 0.1);
}

.join-card:hover::before {
  opacity: 1;
}

.card-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  transition: all 0.5s var(--ease-out-expo);
}

.card-icon-wrapper svg {
  color: var(--gold-400);
  transition: all 0.5s var(--ease-out-expo);
}

.join-card:hover .card-icon-wrapper {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.1) 100%);
  border-color: var(--gold-400);
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15);
}

.join-card:hover .card-icon-wrapper svg {
  transform: scale(1.1);
}

.join-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.join-card p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.join-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.join-card .card-link .arrow {
  transition: transform 0.3s var(--ease-out-expo);
}

.join-card:hover .card-link .arrow {
  transform: translateX(5px);
}

@media (max-width: 1024px) {
  .join-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .join-card:last-child {
    grid-column: span 2;
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .join-cards {
    grid-template-columns: 1fr;
  }
  
  .join-card:last-child {
    grid-column: span 1;
    max-width: none;
  }
  
  .join-card {
    padding: 2rem 1.5rem;
  }
  
  .card-icon-wrapper {
    width: 70px;
    height: 70px;
  }
  
  .card-icon-wrapper svg {
    width: 40px;
    height: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   WHY AFRKEY - POWERFUL SECTION
═══════════════════════════════════════════════════════════════ */

.why-section {
  position: relative;
  padding: 10rem 2rem;
  overflow: hidden;
  background: #050505;
}

.why-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.why-bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse 80% 50% at 20% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 40%),
    linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.9) 100%);
}

.why-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
}

.why-header {
  text-align: center;
  margin-bottom: 5rem;
  position: relative;
  z-index: 2;
}

.why-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--gold-400);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 0.75rem 2rem;
  border-radius: 50px;
  margin-bottom: 2rem;
}

.why-section h2 {
  text-align: center;
}

.why-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.why-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.why-features {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.why-feature {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem 0;
  position: relative;
  transition: all 0.4s var(--ease-out-expo);
}

.why-feature:hover {
  transform: translateX(10px);
}

.why-feature-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.3) 0%, transparent 100%);
}

.why-feature:last-child .why-feature-line {
  display: none;
}

.why-feature-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s var(--ease-out-expo);
}

.why-feature-icon svg {
  color: var(--gold-400);
  transition: all 0.4s ease;
}

.why-feature:hover .why-feature-icon {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.1) 100%);
  border-color: var(--gold-400);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
  transform: scale(1.05);
}

.why-feature:hover .why-feature-icon svg {
  transform: scale(1.1);
}

.why-feature-content h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

.why-feature-content p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.95rem;
  line-height: 1.7;
}

.why-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.why-stat-card {
  position: relative;
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 24px;
  padding: 3rem;
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}

.stat-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
  pointer-events: none;
  animation: statGlow 6s ease-in-out infinite;
}

@keyframes statGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.why-stats {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.why-stat {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.why-stat:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-width: 100px;
}

.stat-label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
}

.why-cta {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.why-cta p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.why-button {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
  color: #000;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 50px;
  transition: all 0.4s var(--ease-out-expo);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.why-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
}

/* Why Section Responsive */
@media (max-width: 1024px) {
  .why-section {
    padding: 6rem 1.5rem;
  }
  
  .why-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .why-visual {
    order: -1;
  }
  
  .why-stat-card {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .why-section {
    padding: 4rem 1rem;
  }
  
  .why-header {
    margin-bottom: 3rem;
  }
  
  .why-label {
    font-size: 0.75rem;
    padding: 0.5rem 1.5rem;
  }
  
  .why-subtitle {
    font-size: 1rem;
  }
  
  .why-feature {
    gap: 1rem;
    padding: 1.5rem 0;
  }
  
  .why-feature-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }
  
  .why-feature-icon svg {
    width: 24px;
    height: 24px;
  }
  
  .why-feature-content h3 {
    font-size: 1.1rem;
  }
  
  .why-feature-content p {
    font-size: 0.9rem;
  }
  
  .stat-number {
    font-size: 2.5rem;
    min-width: 80px;
  }
  
  .stat-label {
    font-size: 0.85rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TIMELINE / ROADMAP
═══════════════════════════════════════════════════════════════ */

.timeline {
  position: relative;
  max-width: 800px;
  margin: 4rem auto 0;
  padding-left: 3rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-400), rgba(212, 175, 55, 0.1));
}

.timeline-item {
  position: relative;
  padding: 2rem 0;
  padding-left: 3rem;
  opacity: 0.5;
  transition: all 0.5s var(--ease-out-expo);
}

.timeline-item:hover,
.timeline-item.active {
  opacity: 1;
}

.timeline-marker {
  position: absolute;
  left: -3rem;
  top: 2rem;
  width: 40px;
  height: 40px;
  background: var(--void);
  border: 2px solid var(--gold-400);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-400);
  font-size: 0.9rem;
  transition: all 0.3s var(--ease-out-expo);
}

.timeline-item.active .timeline-marker {
  background: var(--gold-400);
  color: var(--void);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
}

.timeline-item:hover .timeline-marker {
  transform: scale(1.2);
}

.timeline-date {
  display: inline-block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold-400);
  margin-bottom: 0.5rem;
  padding: 0.3rem 0.8rem;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 20px;
}

.timeline-content h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.timeline-content p {
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   TROPHY SHOWCASE
═══════════════════════════════════════════════════════════════ */

.section-dark {
  background: linear-gradient(180deg, var(--void) 0%, var(--cosmic) 50%, var(--void) 100%);
  position: relative;
  overflow: hidden;
}

.section-dark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

.trophy-showcase {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin-top: 5rem;
  perspective: 1000px;
}

.trophy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.6s var(--ease-out-expo);
  transform-style: preserve-3d;
}

.trophy-item:hover {
  transform: translateY(-20px) rotateY(10deg);
}

.trophy-item img {
  width: 180px;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5)) drop-shadow(0 0 60px rgba(212, 175, 55, 0.2));
  transition: all 0.6s var(--ease-out-expo);
  animation: trophyFloat 6s ease-in-out infinite;
}

.trophy-item:nth-child(2) img { animation-delay: -1s; }
.trophy-item:nth-child(3) img { animation-delay: -2s; }
.trophy-item:nth-child(4) img { animation-delay: -3s; }
.trophy-item:nth-child(5) img { animation-delay: -4s; }

@keyframes trophyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.trophy-item:hover img {
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6)) drop-shadow(0 0 80px rgba(212, 175, 55, 0.4));
  transform: scale(1.1);
}

.trophy-item h3 {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold-400);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   VIDEO SHOWCASE
═══════════════════════════════════════════════════════════════ */

.video-showcase {
  margin: 4rem auto;
  max-width: 900px;
}

.video-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 
    0 30px 60px rgba(0,0,0,0.5),
    0 0 80px rgba(212, 175, 55, 0.1);
}

.promo-video {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.9) saturate(1.1);
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.8) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2rem;
  pointer-events: none;
}

.video-badge {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold-400);
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50px;
  backdrop-filter: blur(10px);
}

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

@media (max-width: 900px) {
  body {
    padding-left: 0;
    cursor: auto;
  }
  
  .cursor, .cursor-dot { display: none; }
  
  /* Mobile Navigation */
  .side-nav {
    width: 0;
    border: none;
    background: rgba(5,5,5,0.98);
    transition: width 0.4s var(--ease-out-expo);
  }
  
  .side-nav.open {
    width: 100vw;
  }
  
  .side-nav.open .side-links a span {
    opacity: 1;
    transform: translateX(0);
  }
  
  /* Hamburger Toggle - Always Visible */
  .side-toggle {
    position: fixed !important;
    top: 1rem;
    left: 1rem;
    z-index: 1100;
    width: 52px;
    height: 52px;
    padding: 0;
    background: linear-gradient(135deg, rgba(20,20,20,0.95) 0%, rgba(10,10,10,0.98) 100%);
    border-radius: 12px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 30px rgba(212, 175, 55, 0.05);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .side-toggle .toggle-bar {
    width: 20px;
    height: 2px;
    background: var(--gold-400);
  }
  
  .side-toggle:hover,
  .side-toggle:active {
    background: linear-gradient(135deg, rgba(30,28,20,0.98) 0%, rgba(15,14,10,0.99) 100%);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 6px 25px rgba(0,0,0,0.6), 0 0 40px rgba(212, 175, 55, 0.1);
    transform: scale(1.05);
  }
  
  .side-toggle.active {
    border-color: var(--gold-400);
  }
  
  .side-toggle.active .toggle-bar {
    background: #fff;
  }
  
  .side-links {
    padding-top: 80px;
  }
  
  .side-links a {
    padding: 1.4rem 2rem;
    font-size: 1.2rem;
    border-left: 3px solid transparent;
  }
  
  .side-links a.active,
  .side-links a:hover {
    border-left-color: var(--gold-400);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), transparent);
  }
  
  .split {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  
  .hero h1 {
    font-size: clamp(3rem, 15vw, 6rem);
    letter-spacing: -2px;
  }
  
  .hero-metrics {
    flex-direction: column;
    gap: 2rem;
  }
  
  .section {
    padding: 6rem 1.5rem;
  }
  
  .card-grid, .grid.cards {
    grid-template-columns: 1fr;
  }
  
  .trophy-showcase {
    gap: 2rem;
  }
  
  .trophy-item img {
    width: 140px;
    max-height: 220px;
  }
  
  .video-showcase {
    margin: 3rem auto;
  }
  
  /* Legendary Hero Tablet */
  .hero-trophy-display {
    display: none;
  }
  
  .title-line-1 {
    font-size: clamp(4rem, 12vw, 8rem);
  }
  
  .title-line-2 {
    font-size: clamp(2.5rem, 8vw, 5rem);
  }
  
  .hero-video-preview {
    max-width: 400px;
  }
  
  .orb {
    filter: blur(40px);
  }
  
  .orb-1, .orb-2 {
    width: 250px;
    height: 250px;
  }
  
  .hero-lines {
    opacity: 0.5;
  }
}

@media (max-width: 600px) {
  .hero-actions {
    flex-direction: column;
    gap: 1rem;
  }
  
  .button {
    width: 100%;
    text-align: center;
  }
  
  .countdown-timer {
    gap: 1rem;
  }
  
  .countdown-item {
    padding: 1rem 1.2rem;
    min-width: 70px;
  }
  
  .countdown-item span:first-child {
    font-size: 1.8rem;
  }
  
  .timeline {
    padding-left: 2rem;
  }
  
  .timeline-marker {
    left: -2rem;
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }
  
  .timeline-item {
    padding-left: 2rem;
  }
  
  .why-grid {
    gap: 1.5rem;
  }
  
  .why-item {
    padding: 1.5rem;
  }
  
  .why-number {
    font-size: 2.5rem;
  }
  
  .hero-badge {
    font-size: 0.7rem;
    padding: 0.6rem 1.2rem;
    letter-spacing: 1px;
  }
  
  .trophy-showcase {
    gap: 1.5rem;
  }
  
  .trophy-item img {
    width: 100px;
    max-height: 160px;
  }
  
  .trophy-item h3 {
    font-size: 0.75rem;
    letter-spacing: 1px;
  }
  
  /* Legendary Hero Mobile */
  .hero-legendary {
    min-height: 100vh;
    padding: 2rem 0;
  }
  
  .orb-1, .orb-2 {
    width: 200px;
    height: 200px;
  }
  
  .orb-3, .orb-4, .orb-5 {
    display: none;
  }
  
  .hero-main-content {
    padding: 1rem;
  }
  
  .title-line-1 {
    font-size: 3rem;
    letter-spacing: -2px;
  }
  
  .title-line-2 {
    font-size: 2rem;
    letter-spacing: -1px;
  }
  
  .hero-subtitle {
    font-size: 0.9rem;
    padding: 0 1rem;
    margin-bottom: 2rem;
  }
  
  .hero-cta-group {
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem;
  }
  
  .cta-primary, .cta-secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 1rem 2rem;
    font-size: 0.9rem;
  }
  
  .hero-video-preview {
    max-width: 90%;
    margin: 0 auto 2rem;
  }
  
  .countdown-epic-timer {
    gap: 0.3rem;
  }
  
  .countdown-epic-item {
    padding: 0.7rem 1rem;
    min-width: 60px;
  }
  
  .countdown-number {
    font-size: 1.4rem;
  }
  
  .countdown-unit {
    font-size: 0.5rem;
    letter-spacing: 1px;
  }
  
  .countdown-separator {
    font-size: 1.2rem;
    padding: 0 0.2rem;
  }
  
  .glitch-badge {
    font-size: 0.65rem;
    padding: 0.6rem 1.2rem;
    letter-spacing: 2px;
  }
  
  .scroll-indicator {
    bottom: 1.5rem;
  }
  
  .scroll-indicator span {
    font-size: 0.6rem;
  }
  
  .mouse {
    width: 20px;
    height: 32px;
  }
  
  .section-divider {
    padding: 2rem 1rem;
    gap: 1rem;
  }
  
  .divider-line {
    max-width: 100px;
  }
  
  .divider-icon {
    font-size: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   AWARDS SHOWCASE - POWERFUL SECTION
═══════════════════════════════════════════════════════════════ */

.awards-showcase {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #050505 100%);
  padding: 6rem 0;
  overflow: hidden;
}

/* Background Logo Watermark */
.awards-bg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  opacity: 0.03;
  pointer-events: none;
  color: var(--gold-400);
  z-index: 0;
}

.awards-bg-logo svg {
  width: 100%;
  height: 100%;
}

/* Awards Header */
.awards-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}

.awards-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(180, 140, 30, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  color: var(--gold-400);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.awards-badge svg {
  color: var(--gold-400);
}

.awards-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.title-icon {
  color: var(--gold-400);
  display: flex;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { 
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
    opacity: 1;
  }
  50% { 
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.8));
    opacity: 0.8;
  }
}

.awards-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

/* Awards Stats */
.awards-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
}

.stat-num {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.stat-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--gold-400), transparent);
}

/* Awards Grid */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
}

/* Award Card */
.award-card {
  position: relative;
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.award-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300), var(--gold-500));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.award-card:hover {
  transform: translateY(-8px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(212, 175, 55, 0.1);
}

.award-card:hover::before {
  opacity: 1;
}

/* Flagship Card */
.award-card.flagship {
  grid-column: span 2;
  background: linear-gradient(145deg, rgba(40, 30, 10, 0.6) 0%, rgba(20, 15, 5, 0.8) 100%);
  border-color: rgba(212, 175, 55, 0.35);
}

.award-card.flagship::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Award Icon */
.award-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(180, 140, 30, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--gold-400);
  transition: all 0.3s ease;
}

.award-card:hover .award-icon {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.award-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%);
  color: #000;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  letter-spacing: 1px;
}

.award-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

.award-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.award-why {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  line-height: 1.6;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.award-why strong {
  color: var(--gold-400);
}

/* Awards CTA */
.awards-cta {
  text-align: center;
  position: relative;
  z-index: 1;
}

.awards-cta .button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Button Glow Effect */
.button.glow {
  position: relative;
  overflow: hidden;
}

.button.glow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: all 0.5s ease;
}

.button.glow:hover::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   VOTING SECTION - POWERFUL DESIGN
═══════════════════════════════════════════════════════════════ */

.voting-section {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 50%, #0a0a0a 100%);
  overflow: hidden;
}

.voting-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.voting-bg-logo {
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  opacity: 0.04;
  pointer-events: none;
  color: var(--gold-400);
  z-index: 0;
}

.voting-bg-logo svg {
  width: 100%;
  height: 100%;
}

/* Voting Header */
.voting-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}

.voting-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(180, 140, 30, 0.08) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  color: var(--gold-400);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.voting-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.voting-icon {
  color: var(--gold-400);
  display: flex;
}

.voting-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 550px;
  margin: 0 auto;
}

/* Voting Content */
.voting-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
}

/* Voting Card */
.voting-card {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 24px;
  padding: 2.5rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.voting-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.voting-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.voting-card-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(180, 140, 30, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
}

.voting-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
}

/* Score Breakdown */
.voting-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.score-item {
  position: relative;
}

.score-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  border-radius: 4px;
  transition: width 1s ease-out;
}

.score-info {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.score-percent {
  font-family: 'Syne', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.score-label {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.score-desc {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Transparency List */
.transparency-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.transparency-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
}

.transparency-list li:last-child {
  border-bottom: none;
}

.transparency-list svg {
  color: var(--gold-400);
  flex-shrink: 0;
}

.transparency-note {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  line-height: 1.6;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Voting CTA */
.voting-cta {
  text-align: center;
  position: relative;
  z-index: 1;
}

.voting-cta .button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .award-card.flagship {
    grid-column: span 1;
  }
  
  .voting-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .awards-showcase,
  .voting-section {
    padding: 4rem 0;
  }
  
  .awards-header,
  .voting-header {
    margin-bottom: 3rem;
  }
  
  .awards-title,
  .voting-title {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .title-icon,
  .voting-icon {
    display: none;
  }
  
  .awards-grid {
    grid-template-columns: 1fr;
  }
  
  .award-card,
  .voting-card {
    padding: 1.5rem;
  }
  
  .stat-num {
    font-size: 2rem;
  }
  
  .score-percent {
    font-size: 1.5rem;
  }
  
  .awards-bg-logo,
  .voting-bg-logo {
    width: 300px;
    height: 300px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FAQ SECTION - POWERFUL DESIGN
═══════════════════════════════════════════════════════════════ */

.faq-section {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #050505 100%);
  overflow: hidden;
}

.faq-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(212, 175, 55, 0.04) 0%, transparent 40%);
  pointer-events: none;
}

/* FAQ Header */
.faq-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}

.faq-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(180, 140, 30, 0.08) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  color: var(--gold-400);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.faq-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.faq-icon {
  color: var(--gold-400);
  display: flex;
}

.faq-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 500px;
  margin: 0 auto;
}

/* FAQ Grid */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
}

/* FAQ Item */
.faq-item {
  display: flex;
  gap: 1.25rem;
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.faq-item-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(180, 140, 30, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  transition: all 0.3s ease;
}

.faq-item:hover .faq-item-icon {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
}

.faq-item-content h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.faq-item-content p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* FAQ CTA */
.faq-cta {
  text-align: center;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.faq-cta p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
}

.faq-cta .button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   HOW TO APPLY SECTION - POWERFUL DESIGN
═══════════════════════════════════════════════════════════════ */

.apply-section {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 50%, #0a0a0a 100%);
  overflow: hidden;
}

.apply-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(212, 175, 55, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.apply-bg-logo {
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 500px;
  height: 500px;
  opacity: 0.03;
  pointer-events: none;
  color: var(--gold-400);
  z-index: 0;
}

.apply-bg-logo svg {
  width: 100%;
  height: 100%;
}

/* Apply Header */
.apply-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}

.apply-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(180, 140, 30, 0.08) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  color: var(--gold-400);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.apply-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.apply-icon {
  color: var(--gold-400);
  display: flex;
}

.apply-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 500px;
  margin: 0 auto;
}

/* Apply Content */
.apply-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
}

/* Apply Card */
.apply-card {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 24px;
  padding: 2.5rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.apply-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.apply-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.apply-card-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(180, 140, 30, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
}

.apply-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
}

/* Apply List */
.apply-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.apply-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
}

.apply-list li:last-child {
  border-bottom: none;
}

.apply-list svg {
  color: var(--gold-400);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Fee Options */
.fee-options {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.fee-option {
  background: linear-gradient(145deg, rgba(30, 25, 15, 0.5) 0%, rgba(20, 15, 10, 0.6) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.fee-option:hover {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.fee-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.fee-header svg {
  color: var(--gold-400);
}

.fee-type {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.fee-price {
  font-family: 'Syne', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.fee-desc {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  line-height: 1.6;
}

.fee-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  line-height: 1.5;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fee-note svg {
  color: var(--gold-400);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Fee Info Link */
.fee-info-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem;
  background: transparent;
  border: 1px dashed rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  color: var(--gold-400);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.fee-info-link:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--gold-400);
  transform: translateY(-2px);
}

/* Fee Modal */
.fee-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.fee-modal.active {
  opacity: 1;
  visibility: visible;
}

.fee-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
}

.fee-modal-content {
  position: relative;
  background: linear-gradient(145deg, rgba(25, 25, 25, 0.98) 0%, rgba(15, 15, 15, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 24px;
  padding: 3rem;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9) translateY(20px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fee-modal.active .fee-modal-content {
  transform: scale(1) translateY(0);
}

.fee-modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.fee-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: rotate(90deg);
}

.fee-modal-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(180, 140, 30, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  margin: 0 auto 1.5rem;
}

.fee-modal-content h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 0.75rem;
}

.fee-modal-intro {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2rem;
}

.fee-modal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fee-modal-list li {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.fee-modal-list li svg {
  color: var(--gold-400);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.fee-modal-list li div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fee-modal-list li strong {
  color: #fff;
  font-weight: 600;
}

.fee-modal-list li span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

.fee-modal-note {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  margin-bottom: 2rem;
}

.fee-modal-note svg {
  color: var(--gold-400);
  flex-shrink: 0;
}

.fee-modal-note span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  line-height: 1.5;
}

.fee-modal-content .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

@media (max-width: 768px) {
  .fee-modal-content {
    padding: 2rem;
  }
  
  .fee-modal-content h3 {
    font-size: 1.4rem;
  }
  
  .fee-modal-icon {
    width: 60px;
    height: 60px;
  }
  
  .fee-modal-icon svg {
    width: 32px;
    height: 32px;
  }
}

/* Apply CTA */
.apply-cta {
  text-align: center;
  position: relative;
  z-index: 1;
}

.apply-cta .button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.apply-cta-note {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .apply-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .faq-section,
  .apply-section {
    padding: 4rem 0;
  }
  
  .faq-header,
  .apply-header {
    margin-bottom: 3rem;
  }
  
  .faq-title,
  .apply-title {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .faq-icon,
  .apply-icon {
    display: none;
  }
  
  .faq-grid {
    grid-template-columns: 1fr;
  }
  
  .faq-item {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 1.5rem;
  }
  
  .faq-item-icon {
    margin-bottom: 0.5rem;
  }
  
  .apply-card {
    padding: 1.5rem;
  }
  
  .fee-price {
    font-size: 1.5rem;
  }
  
  .apply-bg-logo {
    width: 300px;
    height: 300px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   AWARDING PROCESS SECTION - POWERFUL DESIGN
═══════════════════════════════════════════════════════════════ */

.process-section {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #050505 100%);
  overflow: hidden;
}

.process-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* Process Header */
.process-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}

.process-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(180, 140, 30, 0.08) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  color: var(--gold-400);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.process-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.process-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 550px;
  margin: 0 auto;
}

/* Process Grid */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}

/* Process Step */
.process-step {
  position: relative;
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.15);
  padding: 2.5rem 2rem;
  text-align: left;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-step:first-child {
  border-radius: 20px 0 0 20px;
}

.process-step:last-child {
  border-radius: 0 20px 20px 0;
}

.process-step:hover {
  transform: translateY(-8px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.step-number {
  font-family: 'Syne', sans-serif;
  font-size: 4rem;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(180, 140, 30, 0.15) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 1.5rem;
}

.step-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(180, 140, 30, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.process-step:hover .step-icon {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.process-step h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.process-step p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.6;
}

.step-line {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-400), transparent);
}

.process-step:last-child .step-line {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT SECTION - POWERFUL DESIGN
═══════════════════════════════════════════════════════════════ */

.contact-section {
  position: relative;
  min-height: 100vh;
  padding: 6rem 0;
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #050505 100%);
  overflow: hidden;
}

.contact-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.contact-bg-logo {
  position: absolute;
  top: 50%;
  right: -150px;
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  opacity: 0.03;
  pointer-events: none;
  color: var(--gold-400);
  z-index: 0;
}

.contact-bg-logo svg {
  width: 100%;
  height: 100%;
}

/* Contact Header */
.contact-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}

.contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(180, 140, 30, 0.08) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  color: var(--gold-400);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.contact-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.contact-icon {
  color: var(--gold-400);
  display: flex;
}

.contact-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 550px;
  margin: 0 auto;
}

/* Contact Content */
.contact-content {
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
}

/* Contact Info Grid */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.contact-info-card {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-info-card:hover {
  transform: translateY(-8px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.contact-info-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(180, 140, 30, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  margin: 0 auto 1.5rem;
  transition: all 0.3s ease;
}

.contact-info-card:hover .contact-info-icon {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.contact-info-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}

.contact-info-card p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.contact-link {
  color: var(--gold-400);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-link:hover {
  color: var(--gold-300);
  text-decoration: underline;
}

/* Contact CTA Box */
.contact-cta-box {
  background: linear-gradient(145deg, rgba(40, 30, 10, 0.6) 0%, rgba(20, 15, 5, 0.8) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 24px;
  padding: 3rem;
  text-align: center;
}

.cta-box-icon {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(180, 140, 30, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  margin: 0 auto 1.5rem;
}

.contact-cta-box h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

.contact-cta-box p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  max-width: 500px;
  margin: 0 auto 2rem;
}

.contact-cta-box .button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Contact Social */
.contact-social {
  text-align: center;
  position: relative;
  z-index: 1;
}

.contact-social h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-link:hover {
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.social-link svg {
  color: var(--gold-400);
}

.social-link span {
  font-weight: 600;
}

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

.powerful-footer {
  position: relative;
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
  padding: 4rem 0 2rem;
  overflow: hidden;
}

.footer-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 10% 50%, rgba(212, 175, 55, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.5);
  margin-top: 1rem;
  max-width: 280px;
}

.footer-socials {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.footer-socials a {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(180, 140, 30, 0.08) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  transition: all 0.3s ease;
}

.footer-socials a:hover {
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.powerful-footer .footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.powerful-footer .footer-links h4 {
  font-family: 'Syne', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.powerful-footer .footer-links a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.powerful-footer .footer-links a:hover {
  color: var(--gold-400);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-contact h4 {
  font-family: 'Syne', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.footer-contact a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.footer-contact a:hover {
  color: var(--gold-400);
}

.footer-contact svg {
  color: var(--gold-400);
  flex-shrink: 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.powerful-footer .footer-meta {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

.footer-powered {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

.powered-link {
  color: var(--gold-400);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.powered-link:hover {
  color: var(--gold-300);
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .process-step:first-child {
    border-radius: 20px 0 0 0;
  }
  
  .process-step:nth-child(2) {
    border-radius: 0 20px 0 0;
  }
  
  .process-step:nth-child(3) {
    border-radius: 0 0 0 20px;
  }
  
  .process-step:last-child {
    border-radius: 0 0 20px 0;
  }
  
  .process-step:nth-child(2) .step-line {
    display: none;
  }
  
  .contact-info-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  
  .footer-brand {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .process-section,
  .contact-section {
    padding: 4rem 0;
  }
  
  .process-grid {
    grid-template-columns: 1fr;
  }
  
  .process-step {
    border-radius: 16px !important;
    margin-bottom: 1rem;
  }
  
  .process-step:last-child {
    margin-bottom: 0;
  }
  
  .step-line {
    display: none;
  }
  
  .step-number {
    font-size: 3rem;
  }
  
  .contact-title {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .contact-icon {
    display: none;
  }
  
  .contact-info-card {
    padding: 2rem;
  }
  
  .contact-cta-box {
    padding: 2rem;
  }
  
  .social-links {
    flex-direction: column;
    gap: 1rem;
  }
  
  .footer-main {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .footer-brand {
    grid-column: span 1;
  }
  
  .footer-brand p {
    margin: 1rem auto;
  }
  
  .footer-socials {
    justify-content: center;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .contact-bg-logo {
    width: 300px;
    height: 300px;
    right: -100px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT HERO - ULTRA POWERFUL
═══════════════════════════════════════════════════════════════ */

.contact-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 0 4rem;
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%);
  overflow: hidden;
}

.contact-hero-bg {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(212, 175, 55, 0.1) 0%, transparent 40%);
  pointer-events: none;
}

.contact-hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.contact-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.contact-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.contact-hero-title .gold-text {
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-300) 50%, var(--gold-500) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT CARDS SECTION
═══════════════════════════════════════════════════════════════ */

.contact-cards-section {
  padding: 4rem 0;
  background: #050505;
}

.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.contact-card {
  position: relative;
  background: linear-gradient(145deg, rgba(25, 25, 25, 0.95) 0%, rgba(15, 15, 15, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 24px;
  padding: 2.5rem;
  text-decoration: none;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.contact-card:hover::before {
  opacity: 1;
}

.contact-card:hover {
  transform: translateY(-12px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(212, 175, 55, 0.1);
}

.contact-card-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(180, 140, 30, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  margin-bottom: 1.5rem;
  transition: all 0.4s ease;
}

.contact-card:hover .contact-card-icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 15px 40px rgba(212, 175, 55, 0.25);
}

.contact-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}

.contact-card-desc {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.contact-card-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold-400);
  transition: color 0.3s ease;
}

.contact-card:hover .contact-card-value {
  color: var(--gold-300);
}

.contact-card-arrow {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(180, 140, 30, 0.08) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.4s ease;
}

.contact-card:hover .contact-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ═══════════════════════════════════════════════════════════════
   PARTNERSHIP CTA
═══════════════════════════════════════════════════════════════ */

.partnership-cta {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #050505 100%);
  overflow: hidden;
}

.partnership-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.partnership-box {
  position: relative;
  background: linear-gradient(145deg, rgba(35, 28, 12, 0.6) 0%, rgba(20, 16, 8, 0.8) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 32px;
  padding: 4rem;
  text-align: center;
  overflow: hidden;
}

.partnership-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  animation: partnershipRotate 15s linear infinite;
  opacity: 0.5;
}

@keyframes partnershipRotate {
  100% { transform: rotate(360deg); }
}

.partnership-content {
  position: relative;
  z-index: 1;
}

.partnership-icon {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(180, 140, 30, 0.15) 100%);
  border: 2px solid rgba(212, 175, 55, 0.4);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  margin: 0 auto 2rem;
}

.partnership-content h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.partnership-content > p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.partnership-stats {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-bottom: 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.partnership-stats .stat-item {
  text-align: center;
}

.partnership-stats .stat-number {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gold-400);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.partnership-stats .stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Responsive Contact Page */
@media (max-width: 1024px) {
  .contact-cards-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .partnership-stats {
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .contact-hero {
    padding: 6rem 0 3rem;
    min-height: 40vh;
  }
  
  .contact-hero-title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }
  
  .partnership-box {
    padding: 2.5rem 1.5rem;
  }
  
  .partnership-stats {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .partnership-stats .stat-number {
    font-size: 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE HERO (Universal for subpages)
═══════════════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  padding: 10rem 0 5rem;
  min-height: 50vh;
  display: flex;
  align-items: center;
  background: var(--void);
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(212, 175, 55, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, var(--void) 100%);
}

.page-hero-glow {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.page-hero-content {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  z-index: 1;
}

.page-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 0.6rem 1.2rem;
  border-radius: 100px;
  margin-bottom: 2rem;
  color: var(--gold-400);
  font-size: 0.8rem;
  letter-spacing: 2px;
  font-weight: 600;
}

.page-badge svg {
  color: var(--gold-400);
}

.page-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -1px;
}

.page-hero-title .gold-text {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-200));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE CARDS SECTION
═══════════════════════════════════════════════════════════════════════ */
.page-cards-section {
  padding: 6rem 0;
  background: var(--void);
  position: relative;
}

.page-section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.page-section-header h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.page-section-header p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════
   SCORE BREAKDOWN (Voting Page)
═══════════════════════════════════════════════════════════════════════ */
.score-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}

.score-card {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 24px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.score-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--gold-600));
}

.score-card:hover {
  transform: translateY(-8px);
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 30px 80px rgba(212, 175, 55, 0.12);
}

.score-visual {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}

.score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
  border: 3px solid var(--gold-400);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.score-circle.large {
  width: 140px;
  height: 140px;
  border-width: 4px;
}

.score-number {
  font-family: 'Syne', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: var(--gold-400);
  line-height: 1;
}

.score-circle.large .score-number {
  font-size: 3.5rem;
}

.score-percent {
  font-size: 1.2rem;
  color: var(--gold-400);
  font-weight: 600;
  margin-top: -0.5rem;
}

.score-content {
  text-align: center;
}

.score-icon {
  width: 60px;
  height: 60px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: var(--gold-400);
}

.score-content h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

.score-content > p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.score-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.score-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.score-features li:last-child {
  border-bottom: none;
}

.score-features li svg {
  color: var(--gold-400);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   TRANSPARENCY SECTION
═══════════════════════════════════════════════════════════════════════ */
.transparency-section {
  padding: 6rem 0;
  background: var(--void);
  position: relative;
}

.transparency-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(212, 175, 55, 0.06) 0%, transparent 60%);
}

.transparency-box {
  position: relative;
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 32px;
  padding: 4rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.transparency-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}

.transparency-icon {
  width: 100px;
  height: 100px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  color: var(--gold-400);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); }
  50% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.4); }
}

.transparency-box h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}
  /* Responsive fix for 'Transparency & Fairness' title in voting.html transparency section */
  @media (max-width: 600px) {
    .transparency-box h2 {
      font-size: clamp(1rem, 3vw, 1.25rem) !important;
      line-height: 1.15 !important;
      word-break: break-word !important;
      overflow-wrap: break-word !important;
      max-width: 100vw !important;
      text-align: left !important;
      display: block !important;
      white-space: normal !important;
      text-transform: none !important;
      letter-spacing: 0.01em !important;
      padding-right: 0.2rem !important;
      margin-bottom: 0.5rem !important;
    }
  }

.transparency-box > p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}

.transparency-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.transparency-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.transparency-item:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.2);
}

.transparency-item svg {
  color: var(--gold-400);
  flex-shrink: 0;
}

/* Responsive Voting Page */
@media (max-width: 900px) {
  .score-breakdown-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: 7rem 0 3rem;
    min-height: 40vh;
  }
  
  .page-hero-title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }
  
  .transparency-grid {
    grid-template-columns: 1fr;
  }
  
  .transparency-box {
    padding: 2.5rem 1.5rem;
  }
  
  .score-card {
    padding: 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT PAGE STYLES
═══════════════════════════════════════════════════════════════════════ */
.about-mission-section {
  padding: 6rem 0;
  background: var(--void);
}

.about-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 900px) {
  .about-mission-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-image-card {
    order: -1;
    margin-bottom: 2rem;
  }
  .about-mission-content h2 {
    font-size: 2rem;
  }
  .about-mission-content .lead {
    font-size: 1.1rem;
  }
  .about-mission-content p {
    font-size: 1rem;
  }
  .about-image-frame img {
    height: 200px;
    min-height: 140px;
    object-fit: cover;
  }
  .about-image-badge {
    right: 10px;
    bottom: -10px;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 600px) {
  .about-mission-section {
    padding: 2.5rem 0 1.5rem 0;
  }
  .about-mission-content h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  .about-mission-content .lead {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .about-mission-content p {
    font-size: 0.95rem;
    margin-bottom: 0.7rem;
  }
  .mission-quote {
    padding: 1rem;
    font-size: 0.95rem;
  }
  .about-image-frame img {
    height: 120px;
    min-height: 80px;
  }
  .about-image-badge {
    font-size: 0.8rem;
    padding: 0.5rem 0.7rem;
    right: 5px;
    bottom: -5px;
  }
}
}

.about-mission-content h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.about-mission-content .lead {
  font-size: 1.4rem;
  color: var(--gold-400);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.about-mission-content p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.mission-quote {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(212, 175, 55, 0.05);
  border-left: 4px solid var(--gold-400);
  border-radius: 0 12px 12px 0;
}

.mission-quote svg {
  color: var(--gold-400);
  opacity: 0.3;
  margin-bottom: 0.75rem;
}

.mission-quote blockquote {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  line-height: 1.7;
  margin: 0;
}

.about-image-card {
  position: relative;
}

.about-image-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid rgba(212, 175, 55, 0.2);
}

.about-image-frame img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.about-image-frame .image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(5, 5, 5, 0.8) 100%);
  pointer-events: none;
}

.about-image-badge {
  position: absolute;
  bottom: -20px;
  right: 30px;
  background: linear-gradient(145deg, var(--gold-500), var(--gold-400));
  padding: 1rem 1.5rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(212, 175, 55, 0.3);
}

.about-image-badge .badge-year {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--void);
}

.about-image-badge .badge-text {
  font-size: 0.75rem;
  color: var(--void);
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
}

/* About Values Section */
.about-values-section {
  padding: 6rem 0;
  background: var(--void);
  position: relative;
}

.values-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 175, 55, 0.05) 0%, transparent 60%);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.value-card {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  position: relative;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.value-card:hover {
  transform: translateY(-10px);
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow: 0 20px 60px rgba(212, 175, 55, 0.1);
}

.value-card:hover::before {
  opacity: 1;
}

.value-icon {
  width: 70px;
  height: 70px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: var(--gold-400);
  transition: all 0.3s ease;
}

.value-card:hover .value-icon {
  background: rgba(212, 175, 55, 0.15);
  transform: scale(1.1);
}

.value-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.value-card p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

/* About CTA Section */
.about-cta-section {
  padding: 6rem 0;
  background: var(--void);
}

.about-cta-box {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 32px;
  padding: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about-cta-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}

.about-stats-row {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.about-stat {
  text-align: center;
}

.about-stat .stat-number {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gold-400);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.about-stat .stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.about-cta-box h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}

.about-cta-box > p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2rem;
}

.about-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Responsive About Page */
@media (max-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .about-stats-row {
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .about-mission-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .about-image-card {
    order: -1;
  }
  
  .about-image-frame img {
    height: 300px;
  }
  
  .values-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .about-stats-row {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .about-cta-box {
    padding: 2.5rem 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PROGRAMS PAGE STYLES
═══════════════════════════════════════════════════════════════════════ */
.programs-section {
  padding: 6rem 0;
  background: var(--void);
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.program-card {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 24px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.program-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--gold-600));
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.program-card:hover {
  transform: translateY(-8px);
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow: 0 30px 80px rgba(212, 175, 55, 0.12);
}

.program-card:hover::before {
  transform: scaleX(1);
}

.program-card.featured {
  border-color: rgba(212, 175, 55, 0.3);
}

.program-card.featured::before {
  transform: scaleX(1);
}

.program-icon {
  width: 80px;
  height: 80px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--gold-400);
  transition: all 0.3s ease;
}

.program-card:hover .program-icon {
  background: rgba(212, 175, 55, 0.15);
  transform: scale(1.05);
}

.program-number {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-family: 'Syne', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: rgba(212, 175, 55, 0.1);
  line-height: 1;
}

.program-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

.program-card > p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.program-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.program-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.program-features li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold-400);
  border-radius: 50%;
  flex-shrink: 0;
}

.program-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold-400);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.program-link:hover {
  gap: 1rem;
  color: var(--gold-300);
}

.program-link svg {
  transition: transform 0.3s ease;
}

.program-link:hover svg {
  transform: translateX(4px);
}

/* Programs CTA Section */
.programs-cta-section {
  padding: 6rem 0;
  background: var(--void);
}

.programs-cta-box {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 32px;
  padding: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.programs-cta-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}

.programs-cta-box h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}

.programs-cta-box > p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.programs-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Responsive Programs Page */
@media (max-width: 900px) {
  .programs-grid {
    grid-template-columns: 1fr;
    max-width: 550px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .program-card {
    padding: 2rem;
  }
  
  .program-number {
    font-size: 2rem;
    top: 1.5rem;
    right: 1.5rem;
  }
  
  .programs-cta-box {
    padding: 2.5rem 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS PAGE STYLES
═══════════════════════════════════════════════════════════════════════ */
.partnership-types-section {
  padding: 6rem 0;
  background: var(--void);
}

.partnership-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.partnership-type-card {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 24px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.partnership-type-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--gold-600));
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.partnership-type-card:hover {
  transform: translateY(-8px);
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow: 0 30px 80px rgba(212, 175, 55, 0.12);
}

.partnership-type-card:hover::before {
  transform: scaleX(1);
}

.partnership-type-card.featured {
  border-color: rgba(212, 175, 55, 0.3);
}

.partnership-type-card.featured::before {
  transform: scaleX(1);
}

.partnership-type-icon {
  width: 70px;
  height: 70px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--gold-400);
  transition: all 0.3s ease;
}

.partnership-type-card:hover .partnership-type-icon {
  background: rgba(212, 175, 55, 0.15);
  transform: scale(1.05);
}

.partnership-type-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

.partnership-type-card > p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.partnership-perks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.partnership-perks li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.partnership-perks li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold-400);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Current Partners Section */
.current-partners-section {
  padding: 6rem 0;
  background: var(--void);
}

.current-partners-box {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 32px;
  padding: 4rem;
  text-align: center;
}

.current-partners-box h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}

.current-partners-box > p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

.partner-logos-placeholder {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.partner-logo-item {
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 12px;
  padding: 1.25rem 2rem;
  transition: all 0.3s ease;
}

.partner-logo-item:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.25);
}

.partner-logo-item span {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

/* Partners CTA Section */
.partners-cta-section {
  padding: 6rem 0;
  background: var(--void);
}

.partners-cta-box {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 32px;
  padding: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.partners-cta-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}

.partners-cta-icon {
  width: 90px;
  height: 90px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  color: var(--gold-400);
}

.partners-cta-box h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}

.partners-cta-box > p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 550px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

/* Responsive Partners Page */
@media (max-width: 1024px) {
  .partnership-types-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .current-partners-box {
    padding: 2.5rem 1.5rem;
  }
  
  .partner-logos-placeholder {
    gap: 1rem;
  }
  
  .partner-logo-item {
    padding: 1rem 1.5rem;
  }
  
  .partners-cta-box {
    padding: 2.5rem 1.5rem;
  }
}

/* ==================================================
   APPLY PAGE - ULTRA POWERFUL DESIGN
   ================================================== */

/* Apply Steps Section */
.apply-steps-section {
  padding: 6rem 0;
  background: var(--void);
  position: relative;
}

.apply-steps-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--gold-500));
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.step-card {
  background: rgba(212, 175, 55, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
  position: relative;
  transition: all 0.4s ease;
}

.step-card:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.3);
  transform: translateY(-4px);
}

.step-number {
  font-family: 'Syne', sans-serif;
  font-size: 4rem;
  font-weight: 800;
  color: rgba(212, 175, 55, 0.1);
  line-height: 1;
  margin-bottom: 1rem;
}

.step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.5rem;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon svg {
  width: 28px;
  height: 28px;
  color: var(--gold-400);
}

.step-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.step-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

/* Apply Requirements Section */
.apply-requirements-section {
  padding: 6rem 0;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.03) 0%, transparent 50%);
  border-top: 1px solid rgba(212, 175, 55, 0.1);
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

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

.requirements-content .section-label {
  display: inline-block;
  margin-bottom: 1rem;
}

.requirements-content .section-title {
  margin-bottom: 1rem;
}

.requirements-intro {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 12px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.requirement-item:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.2);
}

.requirement-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.requirement-icon svg {
  width: 18px;
  height: 18px;
  color: var(--gold-400);
}

.requirements-visual {
  position: sticky;
  top: 120px;
}

.visual-card {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.02) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
}

.visual-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: rgba(212, 175, 55, 0.15);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-icon svg {
  width: 40px;
  height: 40px;
  color: var(--gold-400);
}

.visual-label {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  display: block;
  margin-bottom: 0.75rem;
}

.visual-text {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

/* Apply Fees Section */
.apply-fees-section {
  padding: 6rem 0;
  background: var(--void);
}

.apply-fees-section .section-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 500px;
  margin: 1rem auto 0;
}

.fees-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 800px;
  margin: 3rem auto 0;
}

.fee-card {
  background: rgba(212, 175, 55, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  position: relative;
  transition: all 0.4s ease;
}

.fee-card:hover {
  background: rgba(212, 175, 55, 0.08);
  transform: translateY(-4px);
}

.fee-card-featured {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.02) 100%);
  border-color: rgba(212, 175, 55, 0.3);
}

.fee-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--void);
  font-family: 'Syne', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

.fee-type {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fee-amount {
  margin-bottom: 2rem;
}

.fee-amount .currency {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--gold-400);
  vertical-align: super;
}

.fee-amount .price {
  font-family: 'Syne', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.fee-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.fee-features li {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 1.5rem;
  position: relative;
}

.fee-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold-400);
  font-weight: 600;
}

.fee-cta {
  display: block;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--void);
  font-family: 'Syne', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.fee-cta:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.3);
}

.fees-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding: 1rem 1.5rem;
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 12px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.fees-note svg {
  flex-shrink: 0;
  color: var(--gold-400);
}

.fees-note span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

/* Apply FAQ Section */
.apply-faq-section {
  padding: 6rem 0;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.02) 0%, transparent 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.apply-faq-section .faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.apply-faq-section .faq-item {
  background: rgba(212, 175, 55, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: 16px;
  padding: 1.75rem;
  transition: all 0.3s ease;
}

.apply-faq-section .faq-item:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.25);
}

.apply-faq-section .faq-question {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.apply-faq-section .faq-answer {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

/* Apply CTA Section */
.apply-cta-section {
  padding: 6rem 0;
  background: var(--void);
  border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.apply-cta-section .cta-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.apply-cta-section .cta-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}

.apply-cta-section .cta-subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.apply-cta-section .cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--void);
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.btn-primary-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);
}

.btn-secondary-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--gold-400);
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.btn-secondary-gold:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.5);
}

/* Apply Page Responsive */
@media (max-width: 1024px) {
  .requirements-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .requirements-visual {
    position: static;
  }
}

@media (max-width: 768px) {
  .steps-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .fees-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
  
  .apply-faq-section .faq-grid {
    grid-template-columns: 1fr;
  }
  
  .apply-steps-section,
  .apply-requirements-section,
  .apply-fees-section,
  .apply-faq-section,
  .apply-cta-section {
    padding: 4rem 0;
  }
  
  .apply-cta-section .cta-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-primary-gold,
  .btn-secondary-gold {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* ==================================================
   HOW TO APPLY - CONTACT PAGE STYLE (INDEX.HTML)
   ================================================== */

/* Apply Hero Section */
.apply-hero-section {
  position: relative;
  padding: 8rem 0 5rem;
  overflow: hidden;
}

.apply-hero-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
    linear-gradient(to bottom, var(--void), var(--void));
  z-index: 0;
}

.apply-hero-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.apply-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.apply-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.apply-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.6);
  max-width: 550px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Apply Cards Section */
.apply-cards-section {
  padding: 4rem 0;
  background: var(--void);
}

.apply-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.apply-info-card {
  display: block;
  background: rgba(212, 175, 55, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-decoration: none;
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.apply-info-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 175, 55, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.apply-info-card:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.25);
  transform: translateY(-8px);
}

.apply-info-card:hover::before {
  opacity: 1;
}

.apply-info-card.featured {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 100%);
  border-color: rgba(212, 175, 55, 0.25);
}

.apply-info-card-icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all 0.4s ease;
}

.apply-info-card:hover .apply-info-card-icon {
  transform: scale(1.05);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.1) 100%);
}

.apply-info-card-icon svg {
  color: var(--gold-400);
}

.apply-info-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}

.apply-info-card-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
}

.apply-info-card-value {
  display: inline-block;
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-400);
  transition: color 0.3s ease;
}

.apply-info-card-arrow {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 40px;
  height: 40px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateX(-10px);
}

.apply-info-card:hover .apply-info-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

.apply-info-card-arrow svg {
  color: var(--gold-400);
}

/* Apply CTA Section (Home) */
.apply-cta-section-home {
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
  background: var(--void);
}

.apply-cta-bg-pattern {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.apply-cta-box {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 32px;
  padding: 4rem;
  position: relative;
  overflow: hidden;
}

.apply-cta-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.apply-cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.apply-cta-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 2rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.apply-cta-icon svg {
  color: var(--gold-400);
}

.apply-cta-content h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}

.apply-cta-content > p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 500px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

.apply-cta-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.apply-stat-item {
  text-align: center;
}

.apply-stat-number {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gold-400);
  line-height: 1;
}

.apply-stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.apply-deadline {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Apply CTA Button Styling */
.apply-cta-content .button.primary.glow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.1rem 2.5rem;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--void);
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  border: none;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
}

.apply-cta-content .button.primary.glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5);
}

.apply-cta-content .button.primary.glow svg {
  color: var(--void);
}

/* ==================================================
   COMPREHENSIVE MOBILE RESPONSIVE STYLES
   ================================================== */

/* Container */
@media (max-width: 1200px) {
  .container {
    padding: 0 2rem;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 1.25rem;
  }
}

/* Side Navigation - Mobile */
@media (max-width: 900px) {
  .side-nav {
    left: -100%;
    width: 100%;
    background: rgba(5, 5, 5, 0.98);
  }
  
  .side-nav.open {
    left: 0;
  }
  
  .side-toggle {
    display: flex;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 10001;
  }
  
  .side-links {
    padding: 5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .side-links a {
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
  }
}

/* Hero Section - Mobile */
@media (max-width: 1024px) {
  .hero {
    min-height: 80vh;
  }
  
  .hero h1 {
    font-size: clamp(2.5rem, 8vw, 4rem);
  }
  
  .hero-stats {
    flex-wrap: wrap;
    gap: 1.5rem;
  }
  
  .hero-cta {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 6rem 0 4rem;
    min-height: auto;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .hero-stats {
    gap: 1rem;
  }
  
  .hero-stat {
    min-width: 80px;
  }
  
  .stat-value {
    font-size: 2rem;
  }
}

/* Page Hero - Mobile */
@media (max-width: 768px) {
  .page-hero {
    padding: 6rem 0 3rem;
  }
  
  .page-hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  
  .page-hero-subtitle {
    font-size: 1rem;
    padding: 0 1rem;
  }
  
  .hero-title-main {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }
  
  .title-line {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
  }
}

/* Contact Cards - Mobile */
@media (max-width: 1024px) {
  .contact-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .contact-cards-section {
    padding: 3rem 0;
  }
  
  .contact-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .contact-card {
    padding: 1.75rem;
  }
  
  .contact-hero {
    padding: 6rem 0 3rem;
  }
  
  .contact-hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

/* Apply Cards (Home) - Mobile */
@media (max-width: 1024px) {
  .apply-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .apply-cards-grid .apply-info-card:last-child {
    grid-column: span 2;
    max-width: 50%;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .apply-hero-section {
    padding: 6rem 0 3rem;
  }
  
  .apply-cards-section {
    padding: 2rem 0 3rem;
  }
  
  .apply-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .apply-cards-grid .apply-info-card:last-child {
    grid-column: span 1;
    max-width: 100%;
  }
  
  .apply-info-card {
    padding: 1.75rem;
  }
  
  .apply-info-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }
  
  .apply-info-card-icon svg {
    width: 28px;
    height: 28px;
  }
  
  .apply-cta-section-home {
    padding: 3rem 0;
  }
  
  .apply-cta-box {
    padding: 2.5rem 1.5rem;
    border-radius: 24px;
  }
  
  .apply-cta-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
  }
  
  .apply-cta-icon svg {
    width: 40px;
    height: 40px;
  }
  
  .apply-cta-stats {
    gap: 1.5rem;
  }
  
  .apply-stat-number {
    font-size: 2rem;
  }
}

/* Partnership CTA - Mobile */
@media (max-width: 768px) {
  .partnership-cta {
    padding: 4rem 0;
  }
  
  .partnership-box {
    padding: 2.5rem 1.5rem;
    border-radius: 24px;
  }
  
  .partnership-icon {
    width: 80px;
    height: 80px;
  }
  
  .partnership-icon svg {
    width: 40px;
    height: 40px;
  }
  
  .partnership-stats {
    gap: 1.5rem;
  }
  
  .stat-number {
    font-size: 2rem;
  }
}

/* Categories/Awards Grid - Mobile */
@media (max-width: 1024px) {
  .categories-grid,
  .awards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .category-section,
  .awards-section {
    padding: 4rem 0;
  }
  
  .categories-grid,
  .awards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .category,
  .award-card {
    padding: 1.5rem;
  }
}

/* Join the Movement Section - Mobile */
@media (max-width: 1024px) {
  .movement-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .movement-section {
    padding: 4rem 0;
  }
  
  .movement-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .movement-card {
    padding: 2rem 1.5rem;
  }
}

/* Voting Page - Mobile */
@media (max-width: 768px) {
  .voting-hero {
    padding: 6rem 0 3rem;
  }
  
  .voting-score-section {
    padding: 4rem 0;
  }
  
  .score-breakdown {
    flex-direction: column;
    gap: 2rem;
  }
  
  .score-item {
    padding: 2rem;
  }
  
  .score-percent {
    font-size: 3rem;
  }
  
  .transparency-section {
    padding: 4rem 0;
  }
  
  .transparency-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .transparency-item {
    padding: 1.5rem;
  }
}

/* About Page - Mobile */
@media (max-width: 768px) {
  .about-mission-section {
    padding: 4rem 0;
  }
  
  .mission-layout {
    flex-direction: column;
    gap: 2rem;
  }
  
  .mission-content,
  .mission-visual {
    max-width: 100%;
  }
  
  .values-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .value-card {
    padding: 1.5rem;
  }
  
  .about-cta-box {
    padding: 2.5rem 1.5rem;
    border-radius: 24px;
  }
}

/* Programs Page - Mobile */
@media (max-width: 1024px) {
  .programs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .programs-section {
    padding: 4rem 0;
  }
  
  .programs-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .program-card {
    padding: 1.75rem;
  }
}

/* Partners Page - Mobile */
@media (max-width: 768px) {
  .partnership-types-section {
    padding: 4rem 0;
  }
  
  .partnership-types-grid {
    gap: 1rem;
  }
  
  .partnership-type-card {
    padding: 2rem 1.5rem;
  }
}

/* Official Awards Page - Mobile */
@media (max-width: 768px) {
  .official-awards-section {
    padding: 4rem 0;
  }
  
  .awards-section .section-header {
    margin-bottom: 2rem;
  }
  
  .awards-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
  }
}

/* Nominate Section - Mobile */
@media (max-width: 1024px) {
  .split {
    flex-direction: column;
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  #nominate.section {
    padding: 4rem 0;
  }
  
  .form {
    padding: 1.5rem;
  }
  
  .info {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Footer - Mobile */
@media (max-width: 1024px) {
  .footer-main {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  .footer-brand {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .powerful-footer {
    padding: 3rem 0 2rem;
  }
  
  .footer-main {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  
  .footer-brand {
    grid-column: span 1;
  }
  
  .footer-socials {
    justify-content: center;
  }
  
  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
  }
  
  .footer-col {
    text-align: center;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
}

/* Buttons - Mobile */
@media (max-width: 768px) {
  .button {
    padding: 0.9rem 1.75rem;
    font-size: 0.9rem;
  }
  
  .button.primary.glow {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

/* Section Headers - Mobile */
@media (max-width: 768px) {
  .section-header {
    margin-bottom: 2rem;
  }
  
  .section-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }
  
  .section-label {
    font-size: 0.75rem;
  }
  
  .page-section-header h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
}

/* Cards General - Mobile */
@media (max-width: 768px) {
  .card,
  .glass-card {
    padding: 1.5rem;
    border-radius: 16px;
  }
}

/* Typography - Mobile */
@media (max-width: 768px) {
  h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  
  h2 {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
  }
  
  h3 {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }
  
  p {
    font-size: 0.95rem;
  }
}

/* Particles Canvas - Mobile */
@media (max-width: 768px) {
  #particles-canvas {
    opacity: 0.5;
  }
}

/* Custom Cursor - Disable on Mobile */
@media (max-width: 900px) {
  .cursor,
  .cursor-dot {
    display: none !important;
  }
}

/* ==================================================
   ADDITIONAL MOBILE RESPONSIVE FIXES
   ================================================== */

/* Awards Stats Row - Mobile */
@media (max-width: 768px) {
  .awards-stats {
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }
  
  .stat-divider {
    display: none;
  }
  
  .stat-item {
    min-width: 80px;
  }
  
  .awards-header {
    padding: 0 1rem;
  }
  
  .awards-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  
  .awards-subtitle {
    font-size: 1rem;
    padding: 0 0.5rem;
  }
}

/* Hero Orbit Section - Mobile */
@media (max-width: 1024px) {
  .hero-orbit {
    padding: 100px 0 60px;
  }
  
  .orbit-container {
    transform: scale(0.8);
  }
  
  .orbit-content h1 {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }
}

@media (max-width: 768px) {
  .hero-orbit {
    padding: 80px 0 40px;
    min-height: auto;
  }
  
  .orbit-container {
    transform: scale(0.6);
    margin-bottom: 2rem;
  }
  
  .orbit-content {
    padding: 0 1rem;
  }
  
  .orbit-content h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }
  
  .orbit-content p {
    font-size: 1rem;
  }
  
  .orbit-cta {
    flex-direction: column;
    gap: 1rem;
  }
  
  .orbit-cta .button {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  
  .orbit-stats {
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
  }
  
  .orbit-bg::after {
    background-size: 40px 40px;
  }
}

/* Categories Section - Mobile */
@media (max-width: 768px) {
  .category h3 {
    font-size: 1.1rem;
  }
  
  .category p {
    font-size: 0.9rem;
  }
  
  .category-icon {
    width: 50px;
    height: 50px;
  }
  
  .category-icon svg {
    width: 24px;
    height: 24px;
  }
}

/* Join Movement Cards - Mobile Fixes */
@media (max-width: 768px) {
  .movement-card-icon {
    width: 60px;
    height: 60px;
  }
  
  .movement-card-icon svg {
    width: 28px;
    height: 28px;
  }
  
  .movement-card h3 {
    font-size: 1.15rem;
  }
  
  .movement-card p {
    font-size: 0.9rem;
  }
}

/* Voting Page - Additional Mobile Fixes */
@media (max-width: 768px) {
  .voting-hero-content {
    padding: 0 1rem;
  }
  
  .voting-hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  
  .score-visual {
    width: 60px;
    height: 60px;
  }
  
  .score-visual svg {
    width: 28px;
    height: 28px;
  }
  
  .score-label {
    font-size: 1rem;
  }
}

/* About Page - Additional Mobile Fixes */
@media (max-width: 768px) {
  .mission-visual-box {
    padding: 2rem;
  }
  
  .value-icon {
    width: 50px;
    height: 50px;
  }
  
  .value-icon svg {
    width: 24px;
    height: 24px;
  }
  
  .value-card h3 {
    font-size: 1.1rem;
  }
}

/* Apply Page - Additional Mobile Fixes */
@media (max-width: 768px) {
  .step-number {
    font-size: 3rem;
  }
  
  .step-icon {
    width: 48px;
    height: 48px;
  }
  
  .step-icon svg {
    width: 24px;
    height: 24px;
  }
  
  .step-title {
    font-size: 1.1rem;
  }
  
  .fee-card {
    padding: 2rem 1.5rem;
  }
  
  .fee-amount .price {
    font-size: 2.5rem;
  }
  
  .fee-cta {
    padding: 0.9rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* Programs Page - Mobile Fixes */
@media (max-width: 768px) {
  .program-card {
    padding: 1.5rem;
  }
  
  .program-icon {
    width: 56px;
    height: 56px;
  }
  
  .program-icon svg {
    width: 28px;
    height: 28px;
  }
  
  .program-card h3 {
    font-size: 1.15rem;
  }
}

/* Partners Page - Mobile Fixes */
@media (max-width: 768px) {
  .partnership-type-icon {
    width: 60px;
    height: 60px;
  }
  
  .partnership-type-icon svg {
    width: 30px;
    height: 30px;
  }
  
  .partnership-type-card h3 {
    font-size: 1.15rem;
  }
  
  .partnership-perks {
    font-size: 0.9rem;
  }
  
  .partner-logos-placeholder {
    flex-direction: column;
  }
  
  .partner-logo-item {
    width: 100%;
  }
}

/* Contact Page - Mobile Fixes */
@media (max-width: 768px) {
  .contact-card-icon {
    width: 56px;
    height: 56px;
  }
  
  .contact-card-icon svg {
    width: 28px;
    height: 28px;
  }
  
  .contact-card h3 {
    font-size: 1.15rem;
  }
  
  .contact-card-value {
    font-size: 0.9rem;
    word-break: break-all;
  }
}

/* Form Elements - Mobile */
@media (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.9rem 1rem;
  }
  
  label {
    font-size: 0.9rem;
  }
}

/* Scrollbar - Mobile (hide on touch devices) */
@media (max-width: 900px) {
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

/* Fix for iPhone notch */
@supports (padding-top: env(safe-area-inset-top)) {
  .side-toggle {
    top: max(1rem, env(safe-area-inset-top));
  }
  
  .side-nav {
    padding-top: env(safe-area-inset-top);
  }
  
  .powerful-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ==================================================
   APPLY PAGE - CONTACT STYLE CARDS
   ================================================== */

/* Apply Page Hero extends contact hero */
.apply-page-hero {
  /* Uses same styles as contact-hero */
}

/* Apply Cards Styled Section */
.apply-cards-styled {
  padding-top: 0;
}

.apply-cards-styled .contact-card h3 {
  font-size: 1.25rem;
}

/* Apply Fees Styled Section */
.apply-fees-styled {
  background: linear-gradient(180deg, var(--void) 0%, rgba(212, 175, 55, 0.02) 100%);
}

.apply-fees-styled .contact-cards-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Apply FAQ Styled Section */
.apply-faq-styled {
  padding-bottom: 2rem;
}

.apply-faq-styled .contact-cards-grid {
  grid-template-columns: repeat(2, 1fr);
}

.apply-faq-styled .contact-card {
  padding: 2rem;
}

.apply-faq-styled .contact-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

/* Page Section Header */
.page-section-header {
  margin-bottom: 2rem;
}

.page-section-header h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.5rem;
}

.page-section-header p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Mobile for Apply Page */
@media (max-width: 768px) {
  .apply-fees-styled .contact-cards-grid,
  .apply-faq-styled .contact-cards-grid {
    grid-template-columns: 1fr;
  }
  
  .apply-cards-styled .contact-card h3 {
    font-size: 1.1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUBMISSION FORM PAGE STYLES
═══════════════════════════════════════════════════════════════════════════ */

/* Submission Hero */
.submission-hero {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 0 4rem;
  overflow: hidden;
}

.submission-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.15) 0%, transparent 60%),
              linear-gradient(180deg, var(--void) 0%, #0a0a0a 100%);
  z-index: 0;
}

.submission-hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.submission-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.submission-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  color: var(--gold-400);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.submission-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.1;
}

.submission-hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto;
}

/* Applications Closed Section */
.applications-closed-section {
  padding: 6rem 0;
  background: var(--void);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.applications-closed-card {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 4rem 3rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(20, 20, 20, 0.95) 100%);
  border: 2px solid rgba(239, 68, 68, 0.3);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(239, 68, 68, 0.1);
}

.applications-closed-card .closed-icon {
  margin-bottom: 2rem;
}

.applications-closed-card .closed-icon svg {
  stroke: #ef4444;
  opacity: 0.8;
}

.applications-closed-card h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: #ef4444;
  margin-bottom: 1rem;
}

.applications-closed-card p {
  color: #999;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.applications-closed-card .closed-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}

.applications-closed-card .info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #ccc;
  font-size: 0.95rem;
}

.applications-closed-card .info-item svg {
  stroke: var(--gold-400);
  flex-shrink: 0;
}

.applications-closed-card .info-item a {
  color: var(--gold-400);
  text-decoration: underline;
}

.applications-closed-card .contact-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%);
  color: #000;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.applications-closed-card .contact-support-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.applications-closed-card .contact-support-btn svg {
  stroke: #000;
}

/* Notification Subscription */
.notify-subscription {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 16px;
}

.notify-subscription h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--gold-400);
  margin-bottom: 0.5rem;
}

.notify-subscription p {
  font-size: 0.9rem;
  color: #999;
  margin-bottom: 1rem;
}

.notify-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: stretch;
}

.notify-form select,
.notify-form input {
  font-family: var(--font-body);
}

.subscribed-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 16px;
}

/* Mobile Responsive - Applications Closed Card */
@media (max-width: 768px) {
  .applications-closed-section {
    padding: 3rem 1rem;
    min-height: auto;
  }
  
  .applications-closed-card {
    max-width: 100%;
    padding: 2rem 1.25rem;
    margin: 0 0.5rem;
    border-radius: 16px;
  }
  
  .applications-closed-card .closed-icon svg {
    width: 60px;
    height: 60px;
  }
  
  .applications-closed-card h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
  
  .applications-closed-card p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
  
  .applications-closed-card .closed-info {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .applications-closed-card .info-item {
    font-size: 0.85rem;
    gap: 0.5rem;
  }
  
  .applications-closed-card .info-item svg {
    width: 18px;
    height: 18px;
  }
  
  .notify-subscription {
    padding: 1rem;
    margin: 1.5rem 0;
  }
  
  .notify-subscription h3 {
    font-size: 1rem;
  }
  
  .notify-subscription p {
    font-size: 0.85rem;
  }
  
  .notify-form {
    flex-direction: column;
  }
  
  .notify-form select,
  .notify-form input,
  .notify-form button {
    width: 100% !important;
    min-width: unset !important;
  }
  
  .applications-closed-card .contact-support-btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .applications-closed-card {
    padding: 1.5rem 1rem;
    margin: 0;
  }
  
  .applications-closed-card h2 {
    font-size: 1.25rem;
  }
  
  .applications-closed-card .closed-icon svg {
    width: 50px;
    height: 50px;
  }
  
  .applications-closed-card p {
    font-size: 0.9rem;
  }
}

/* Submission Form Section */
.submission-form-section {
  padding: 4rem 0 6rem;
  background: var(--void);
}

.submission-form {
  max-width: 900px;
  margin: 0 auto;
}

/* Progress Indicator */
.form-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 4rem;
  padding: 0 1rem;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.progress-step.active .step-number {
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
  border-color: var(--gold-400);
  color: var(--void);
}

.step-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.progress-step.active .step-label {
  color: var(--gold-400);
}

.progress-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 0.5rem;
  margin-bottom: 1.5rem;
  max-width: 80px;
}

/* Form Sections */
.form-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  position: relative;
}

.form-section::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.form-section-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  flex-shrink: 0;
}

.section-text h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}

.section-text p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
}

/* Form Grid */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.char-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

/* Form Inputs */
.submission-form input[type="text"],
.submission-form input[type="email"],
.submission-form input[type="tel"],
.submission-form input[type="url"],
.submission-form input[type="date"],
.submission-form select,
.submission-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.submission-form input::placeholder,
.submission-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.submission-form input:focus,
.submission-form select:focus,
.submission-form textarea:focus {
  outline: none;
  border-color: var(--gold-400);
  background: rgba(212, 175, 55, 0.05);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.submission-form input.error,
.submission-form select.error,
.submission-form textarea.error {
  border-color: #ff4444;
  background: rgba(255, 68, 68, 0.05);
}

.submission-form select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}

.submission-form select option {
  background: #1a1a1a;
  color: #fff;
}

.submission-form textarea {
  resize: vertical;
  min-height: 100px;
}

/* Modern Date Picker */
.date-picker-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.9) 0%, rgba(15, 15, 15, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.date-picker-wrapper:hover {
  border-color: rgba(212, 175, 55, 0.4);
}

.date-picker-wrapper:focus-within {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15), 0 4px 20px rgba(212, 175, 55, 0.1);
}

.date-picker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem 0 1rem;
  pointer-events: none;
}

.date-picker-icon svg {
  stroke: var(--gold-400);
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.date-picker-wrapper:focus-within .date-picker-icon svg {
  opacity: 1;
}

.date-picker-wrapper input[type="date"] {
  flex: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1rem 1rem 1rem 0.5rem;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
}

.date-picker-wrapper input[type="date"]:focus {
  outline: none;
  box-shadow: none !important;
}

/* Custom calendar icon color */
.date-picker-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(80%) sepia(50%) saturate(500%) hue-rotate(10deg) brightness(90%);
  cursor: pointer;
  padding: 0.5rem;
  margin-right: 0.25rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.date-picker-wrapper input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background: rgba(212, 175, 55, 0.15);
}

/* Firefox date input styling */
.date-picker-wrapper input[type="date"]::-moz-calendar-picker-indicator {
  filter: invert(80%) sepia(50%) saturate(500%) hue-rotate(10deg) brightness(90%);
}

.form-hint {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.25rem;
}

/* Input with Icon */
.input-with-icon {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.input-with-icon:focus-within {
  border-color: var(--gold-400);
  background: rgba(212, 175, 55, 0.05);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.input-prefix {
  padding: 0.9rem 0 0.9rem 1rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.95rem;
  background: transparent;
}

.input-with-icon input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  padding-left: 0 !important;
  box-shadow: none !important;
}

/* Radio & Checkbox Styles */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.radio-option:hover,
.checkbox-option:hover {
  border-color: rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.03);
}

.radio-option input,
.checkbox-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.radio-custom,
.checkbox-custom {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
  margin-top: 2px;
}

.checkbox-custom {
  border-radius: 6px;
}

.radio-option input:checked + .radio-custom,
.checkbox-option input:checked + .checkbox-custom {
  border-color: var(--gold-400);
  background: var(--gold-400);
}

.radio-custom::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--void);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.radio-option input:checked + .radio-custom::after {
  opacity: 1;
}

.checkbox-custom::after {
  content: '✓';
  color: var(--void);
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.checkbox-option input:checked + .checkbox-custom::after {
  opacity: 1;
}

.radio-label,
.checkbox-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.radio-label strong,
.checkbox-label strong {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}

.radio-label small,
.checkbox-label small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

/* Checkbox Grid */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Form Subsection */
.form-subsection {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.subsection-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold-400);
  margin-bottom: 1.5rem;
}

.subsection-title svg {
  opacity: 0.7;
}

/* Fee Summary Box */
.fee-summary-box {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.fee-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.fee-header h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.fee-amount {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.fee-currency {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.fee-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold-400);
}

.fee-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.fee-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.fee-line span:last-child {
  font-weight: 500;
  color: #fff;
}

.fee-note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.fee-note svg {
  color: var(--gold-400);
  flex-shrink: 0;
}

/* Terms Box */
.terms-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.terms-checkbox {
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.02);
}

.terms-checkbox:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Submit Area */
.form-submit-area {
  text-align: center;
  margin-top: 2rem;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 2.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.submit-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Help Section */
.submission-help-section {
  padding: 4rem 0;
  background: linear-gradient(180deg, var(--void) 0%, #0a0a0a 100%);
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.help-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.help-card:hover {
  border-color: rgba(212, 175, 55, 0.3);
  transform: translateY(-4px);
}

.help-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
}

.help-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.75rem;
}

.help-card p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.help-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold-400);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.help-link:hover {
  color: var(--gold-300);
}

.deadline-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
  color: var(--void);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Submission Form Responsive */
@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .checkbox-grid {
    grid-template-columns: 1fr;
  }
  
  .form-section {
    padding: 1.5rem;
  }
  
  .form-progress {
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .progress-line {
    display: none;
  }
  
  .help-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .submission-hero {
    padding: 6rem 0 3rem;
    min-height: auto;
  }
  
  .submission-hero-title {
    font-size: 2rem;
  }
  
  .form-section-header {
    flex-direction: column;
    text-align: center;
  }
  
  .section-icon {
    margin: 0 auto;
  }
  
  .fee-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .radio-option,
  .checkbox-option {
    padding: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WHY AFRKEY - POWERFUL PRO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.why-section-pro {
  position: relative;
  padding: 8rem 0;
  overflow: hidden;
}

.why-background-pro {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.why-bg-gradient-pro {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--void) 0%,
    rgba(212, 175, 55, 0.03) 30%,
    rgba(212, 175, 55, 0.06) 50%,
    rgba(212, 175, 55, 0.03) 70%,
    var(--void) 100%
  );
}

.why-bg-pattern-pro {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, var(--gold-400) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, var(--gold-400) 1px, transparent 1px);
  background-size: 100px 100px;
  opacity: 0.15;
}

.why-bg-glow-pro {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Pro Header */
.why-header-pro {
  text-align: center;
  margin-bottom: 5rem;
  position: relative;
  z-index: 1;
}

.why-badge-pro {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
  border: 1px solid var(--gold-400);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--gold-400);
  margin-bottom: 2rem;
}

.why-badge-pro svg {
  color: var(--gold-400);
}

.why-title-pro {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: #fff;
}

.gold-gradient-text {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500), var(--gold-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.why-subtitle-pro {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  color: var(--gray-400);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Content Layout */
.why-content-pro {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 4rem;
  position: relative;
  z-index: 1;
}

/* Features Grid */
.why-features-pro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.why-feature-pro {
  position: relative;
  padding: 2.5rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.why-feature-pro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.why-feature-pro:hover {
  transform: translateY(-8px);
  border-color: var(--gold-400);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(212, 175, 55, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.why-feature-pro:hover::before {
  opacity: 1;
}

.feature-number-pro {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold-400);
  opacity: 0.5;
  letter-spacing: 0.05em;
}

.feature-icon-pro {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.feature-icon-pro svg {
  color: var(--gold-400);
}

.feature-content-pro {
  position: relative;
  z-index: 1;
}

.feature-content-pro h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.feature-content-pro p {
  font-size: 1rem;
  color: var(--gray-400);
  line-height: 1.7;
}

.feature-glow-pro {
  position: absolute;
  bottom: -50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.why-feature-pro:hover .feature-glow-pro {
  opacity: 1;
}

/* Stats Panel */
.why-stats-panel-pro {
  position: relative;
}

.stats-card-pro {
  position: sticky;
  top: 120px;
  padding: 2.5rem;
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.02));
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 24px;
  overflow: hidden;
}

.stats-glow-pro {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 60%);
  pointer-events: none;
}

.stats-header-pro {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.stats-icon-pro {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  border-radius: 12px;
  color: var(--void);
}

.stats-header-pro span {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold-400);
}

.stats-grid-pro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.stat-item-pro {
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-value-pro {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.stat-label-pro {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-400);
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stats-divider-pro {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  margin: 2rem 0;
  opacity: 0.3;
}

.stats-cta-pro {
  text-align: center;
  position: relative;
  z-index: 1;
}

.stats-cta-pro p {
  font-size: 1.1rem;
  color: var(--gray-300);
  margin-bottom: 1.25rem;
}

.stats-button-pro {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--void);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
}

.stats-button-pro:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);
}

.stats-button-pro svg {
  transition: transform 0.3s ease;
}

.stats-button-pro:hover svg {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1100px) {
  .why-content-pro {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .why-stats-panel-pro {
    order: -1;
  }
  
  .stats-card-pro {
    position: static;
  }
}

@media (max-width: 768px) {
  .why-section-pro {
    padding: 5rem 0;
  }
  
  .why-header-pro {
    margin-bottom: 3rem;
  }
  
  .why-features-pro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .why-feature-pro {
    padding: 2rem;
  }
  
  .feature-icon-pro {
    width: 60px;
    height: 60px;
  }
  
  .stats-grid-pro {
    gap: 1rem;
  }
  
  .stat-value-pro {
    font-size: 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AWARDING PROCESS - ULTRA POWERFUL SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.process-section-ultra {
  position: relative;
  padding: 10rem 0;
  overflow: hidden;
}

.process-bg-ultra {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.process-gradient-ultra {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--void) 0%,
    rgba(212, 175, 55, 0.04) 20%,
    rgba(212, 175, 55, 0.08) 50%,
    rgba(212, 175, 55, 0.04) 80%,
    var(--void) 100%
  );
}

.process-pattern-ultra {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.08) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(212, 175, 55, 0.05) 1px, transparent 1px);
  background-size: 80px 80px, 40px 40px;
}

.process-glow-left {
  position: absolute;
  top: 20%;
  left: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.process-glow-right {
  position: absolute;
  bottom: 20%;
  right: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

/* Ultra Header */
.process-header-ultra {
  text-align: center;
  margin-bottom: 6rem;
  position: relative;
  z-index: 1;
}

.process-badge-ultra {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 2rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.05));
  border: 1px solid var(--gold-400);
  border-radius: 100px;
  margin-bottom: 2.5rem;
}

.badge-icon-ultra {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  border-radius: 50%;
  color: var(--void);
}

.process-badge-ultra span {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold-400);
}

.process-title-ultra {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.process-subtitle-ultra {
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  color: var(--gray-400);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Ultra Timeline */
.process-timeline-ultra {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 1;
  margin-bottom: 5rem;
}

.process-step-ultra {
  position: relative;
}

/* Connector */
.step-connector-ultra {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.connector-dot-ultra {
  width: 20px;
  height: 20px;
  background: var(--void);
  border: 3px solid var(--gold-400);
  border-radius: 50%;
  position: relative;
  z-index: 2;
}

.connector-dot-ultra.active {
  background: var(--gold-400);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.connector-dot-ultra::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 50%;
}

.connector-line-ultra {
  width: 2px;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--gold-400));
  margin-bottom: 8px;
}

.process-step-ultra:first-child .connector-line-ultra {
  background: transparent;
}

/* Step Card */
.step-card-ultra {
  position: relative;
  margin-top: 80px;
  padding: 3rem 2rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 24px;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
}

.step-card-ultra::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.step-card-ultra:hover {
  transform: translateY(-12px);
  border-color: var(--gold-400);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(212, 175, 55, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.step-card-ultra:hover::before {
  opacity: 1;
}

.step-number-ultra {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: rgba(212, 175, 55, 0.1);
  line-height: 1;
}

.step-icon-ultra {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  margin-bottom: 2rem;
  transition: all 0.4s ease;
}

.step-icon-ultra svg {
  color: var(--gold-400);
  transition: transform 0.4s ease;
}

.step-card-ultra:hover .step-icon-ultra {
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.1));
  border-color: var(--gold-400);
}

.step-card-ultra:hover .step-icon-ultra svg {
  transform: scale(1.1);
}

.step-content-ultra {
  flex: 1;
}

.step-content-ultra h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

.step-content-ultra p {
  font-size: 1.05rem;
  color: var(--gray-400);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.step-tags-ultra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.step-tag {
  padding: 0.5rem 1rem;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.step-glow-ultra {
  position: absolute;
  bottom: -100px;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.step-card-ultra:hover .step-glow-ultra {
  opacity: 1;
}

/* Process CTA */
.process-cta-ultra {
  text-align: center;
  position: relative;
  z-index: 1;
  padding-top: 3rem;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}

.process-cta-ultra p {
  font-size: 1.25rem;
  color: var(--gray-300);
  margin-bottom: 1.5rem;
}

.process-btn-ultra {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--void);
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.4s ease;
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.3);
}

.process-btn-ultra:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.5);
}

.process-btn-ultra svg {
  transition: transform 0.3s ease;
}

.process-btn-ultra:hover svg {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1100px) {
  .process-section-ultra {
    padding: 6rem 0;
  }
  
  .process-timeline-ultra {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  .step-connector-ultra {
    display: none;
  }
  
  .step-card-ultra {
    margin-top: 0;
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .process-section-ultra {
    padding: 4rem 0;
  }
  
  .process-header-ultra {
    margin-bottom: 3rem;
  }
  
  .process-badge-ultra {
    padding: 0.75rem 1.5rem;
    gap: 0.75rem;
  }
  
  .badge-icon-ultra {
    width: 30px;
    height: 30px;
  }
  
  .process-badge-ultra span {
    font-size: 0.75rem;
  }
  
  .process-timeline-ultra {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }
  
  .step-card-ultra {
    padding: 2rem 1.5rem;
  }
  
  .step-icon-ultra {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
  }
  
  .step-icon-ultra svg {
    width: 32px;
    height: 32px;
  }
  
  .step-content-ultra h3 {
    font-size: 1.25rem;
  }
  
  .step-content-ultra p {
    font-size: 1rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FEE BREAKDOWN SECTION
═══════════════════════════════════════════════════════════════ */
.fee-breakdown-section {
  padding: 5rem 0;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.02) 0%, transparent 100%);
}

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

.fee-breakdown-header h3 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.fee-breakdown-header p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.fee-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.fee-item {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  transition: all 0.3s ease;
}

.fee-item:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.fee-item-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
}

.fee-item-content h4 {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.fee-item-content p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin: 0.25rem 0 0 0;
}

.fee-percentage {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
  color: #000;
  font-family: 'Syne', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
}

.fee-breakdown-note {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.03) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
}

.fee-note-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--gold-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

.fee-breakdown-note p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
}

.fee-breakdown-note strong {
  color: var(--gold-400);
}

/* Responsive */
@media (max-width: 1024px) {
  .fee-breakdown-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .fee-breakdown-section {
    padding: 3rem 0;
  }
  
  .fee-breakdown-grid {
    grid-template-columns: 1fr;
  }
  
  .fee-item {
    padding: 1.25rem;
  }
  
  .fee-breakdown-note {
    flex-direction: column;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PARTNERS & SPONSORS SECTION
═══════════════════════════════════════════════════════════════ */
.partners-section {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  background: var(--void);
}

.partners-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.partners-glow-left {
  position: absolute;
  left: -200px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.partners-glow-right {
  position: absolute;
  right: -200px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.partners-header {
  text-align: center;
  margin-bottom: 4rem;
}

.partners-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50px;
  padding: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  color: var(--gold-400);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.partners-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

.partners-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}

.partner-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.partner-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(212, 175, 55, 0.1);
}

.partner-logo {
  margin-bottom: 1.5rem;
}

.partner-logo-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
  transition: all 0.3s ease;
}

.partner-card:hover .partner-logo-img {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.partner-logo-placeholder {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.partner-card:hover .partner-logo-placeholder {
  border-color: var(--gold-400);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.partner-initials {
  font-family: 'Syne', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-400);
}

.partner-info h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}

.partner-type {
  display: inline-block;
  background: rgba(212, 175, 55, 0.1);
  color: var(--gold-400);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.partner-info p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.95rem;
  line-height: 1.6;
}

.partner-badge-official {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
}

/* Partner CTA Card */
.partner-cta-card {
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 100%);
  border: 2px dashed rgba(212, 175, 55, 0.3);
  justify-content: center;
}

.partner-cta-card:hover {
  border-style: solid;
  border-color: var(--gold-400);
}

.partner-cta-icon {
  color: var(--gold-400);
  margin-bottom: 1rem;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.partner-cta-card:hover .partner-cta-icon {
  opacity: 1;
  transform: scale(1.1);
}

.partner-cta-content h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.partner-cta-content p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.partner-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
  color: #000;
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.partner-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

.partner-cta-btn svg {
  transition: transform 0.3s ease;
}

.partner-cta-btn:hover svg {
  transform: translateX(4px);
}

/* Partner Benefits */
.partner-benefits {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
}

.partner-benefits h4 {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}

.benefits-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 3rem;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
}

.benefit-item svg {
  color: var(--gold-400);
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .partner-cta-card {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .partners-section {
    padding: 4rem 0;
  }
  
  .partners-grid {
    grid-template-columns: 1fr;
  }
  
  .partner-cta-card {
    grid-column: span 1;
  }
  
  .partner-card {
    padding: 1.5rem;
  }
  
  .benefits-list {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .partner-benefits {
    padding: 1.5rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   SUBMISSION FORM ENHANCEMENTS
═══════════════════════════════════════════════════════════════ */

/* Instructions Box in Hero */
.submission-instructions {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* Hero Cards Grid - Instructions & Tutorial */
.hero-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.hero-instruction-card,
.hero-tutorial-card {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 20px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-instruction-card::before,
.hero-tutorial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400), var(--gold-500));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-instruction-card:hover::before,
.hero-tutorial-card:hover::before {
  opacity: 1;
}

.hero-instruction-card:hover,
.hero-tutorial-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(212, 175, 55, 0.1);
}

/* Instruction Card Styles */
.instruction-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.instruction-icon-badge {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
}

.instruction-icon-badge svg {
  stroke: var(--gold-400);
}

.instruction-card-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #fff;
  margin: 0;
}

.instruction-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.step-item:hover {
  background: rgba(212, 175, 55, 0.08);
}

.step-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
  color: #000;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 8px;
  flex-shrink: 0;
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.step-title {
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
}

.step-desc {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

/* Tutorial Card Styles */
.tutorial-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.youtube-icon-badge {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.2);
  border-radius: 12px;
}

.tutorial-card-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #fff;
  margin: 0;
}

.tutorial-duration {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

.tutorial-thumbnail {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 16 / 9;
}

.tutorial-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tutorial-thumbnail:hover img {
  transform: scale(1.05);
}

.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  transition: background 0.3s ease;
}

.play-overlay:hover {
  background: rgba(0, 0, 0, 0.2);
}

.play-button {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 0, 0, 0.9);
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(255, 0, 0, 0.4);
}

.play-overlay:hover .play-button {
  transform: scale(1.1);
  background: #FF0000;
}

.play-button svg {
  margin-left: 4px;
}

.tutorial-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.watch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4);
}

/* Mobile Responsive - Hero Cards */
@media (max-width: 768px) {
  .hero-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
    padding: 0 0.5rem;
  }
  
  .hero-instruction-card,
  .hero-tutorial-card {
    padding: 1.25rem;
  }
  
  .instruction-card-header h3,
  .tutorial-card-header h3 {
    font-size: 1.1rem;
  }
  
  .step-item {
    padding: 0.75rem;
  }
  
  .play-button {
    width: 56px;
    height: 56px;
  }
  
  .play-button svg {
    width: 36px;
    height: 36px;
  }
}

.instruction-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 50px;
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.instruction-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
  color: #000;
  font-family: 'Syne', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
}

/* Form Hint Section (Info Box) */
.form-hint-section {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.03) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.form-hint-section svg {
  color: var(--gold-400);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Enhanced Subsection Title */
.form-subsection {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.subsection-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.5rem;
}

.subsection-title svg {
  color: var(--gold-400);
}

/* Other Genre Container */
.other-genre-group {
  animation: slideDown 0.3s ease;
}

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

/* Enhanced Form Groups for new fields */
.form-group select optgroup {
  background: #1a1a1a;
  color: #fff;
  font-weight: 600;
  padding: 0.5rem;
}

.form-group select option {
  background: #0a0a0a;
  color: #fff;
  padding: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .submission-instructions {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .instruction-item {
    justify-content: flex-start;
  }
  
  .form-hint-section {
    flex-direction: column;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════════
   APPLICATION NOTICE SECTION
═══════════════════════════════════════════════════════════════ */
.application-notice-section {
  padding: 3rem 0;
  background: linear-gradient(180deg, var(--void) 0%, rgba(212, 175, 55, 0.02) 100%);
}

.application-notice-box {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 24px;
  overflow: hidden;
}

.notice-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.notice-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

.notice-header h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.notice-content {
  padding: 2rem;
}

.notice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.notice-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.notice-item:hover {
  background: rgba(212, 175, 55, 0.05);
}

.notice-item-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
}

.notice-item h4 {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.5rem 0;
}

.notice-item p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin: 0;
}

.notice-disclaimer {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.03) 100%);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 12px;
}

.notice-disclaimer svg {
  color: #ffc107;
  flex-shrink: 0;
  margin-top: 2px;
}

.notice-disclaimer div {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.notice-disclaimer strong {
  color: #ffc107;
}

@media (max-width: 768px) {
  .notice-grid {
    grid-template-columns: 1fr;
  }
  
  .notice-header {
    flex-direction: column;
    text-align: center;
  }
  
  .notice-content {
    padding: 1.5rem;
  }
  
  .notice-disclaimer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════════
   WINNER PRIZES SECTION
═══════════════════════════════════════════════════════════════ */
.prizes-section {
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
  background: var(--void);
}

.prizes-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.prizes-glow-top {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
}

.prizes-glow-bottom {
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.prizes-header {
  text-align: center;
  margin-bottom: 4rem;
}

.prizes-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50px;
  padding: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  color: var(--gold-400);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.prizes-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

.prizes-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  max-width: 650px;
  margin: 0 auto;
}

.prizes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.prize-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  transition: all 0.4s ease;
  text-align: center;
  overflow: hidden;
}

.prize-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.prize-card:hover::before {
  opacity: 1;
}

.prize-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(212, 175, 55, 0.15);
}

/* Color variants for each card */
.prize-card:nth-child(1) { --prize-accent: #d4af37; --prize-glow: rgba(212, 175, 55, 0.3); }
.prize-card:nth-child(2) { --prize-accent: #00d9ff; --prize-glow: rgba(0, 217, 255, 0.3); }
.prize-card:nth-child(3) { --prize-accent: #ff6b6b; --prize-glow: rgba(255, 107, 107, 0.3); }
.prize-card:nth-child(4) { --prize-accent: #a855f7; --prize-glow: rgba(168, 85, 247, 0.3); }
.prize-card:nth-child(5) { --prize-accent: #22c55e; --prize-glow: rgba(34, 197, 94, 0.3); }
.prize-card:nth-child(6) { --prize-accent: #f97316; --prize-glow: rgba(249, 115, 22, 0.3); }

.prize-card:nth-child(2)::before { background: linear-gradient(90deg, #00d9ff, #0099cc); }
.prize-card:nth-child(3)::before { background: linear-gradient(90deg, #ff6b6b, #ee5a5a); }
.prize-card:nth-child(4)::before { background: linear-gradient(90deg, #a855f7, #9333ea); }
.prize-card:nth-child(5)::before { background: linear-gradient(90deg, #22c55e, #16a34a); }
.prize-card:nth-child(6)::before { background: linear-gradient(90deg, #f97316, #ea580c); }

.prize-card.featured {
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.03) 100%);
  border-color: rgba(212, 175, 55, 0.4);
}

.prize-card.featured::after {
  content: '★ GRAND PRIZE';
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
  color: #000;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  z-index: 2;
}

.prize-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, rgba(var(--prize-accent), 0.2) 0%, rgba(var(--prize-accent), 0.05) 100%);
  border: 2px solid var(--prize-accent, var(--gold-400));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--prize-accent, var(--gold-400));
  transition: all 0.3s ease;
}

.prize-card:nth-child(1) .prize-icon { border-color: rgba(212, 175, 55, 0.4); color: #d4af37; background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%); }
.prize-card:nth-child(2) .prize-icon { border-color: rgba(0, 217, 255, 0.4); color: #00d9ff; background: linear-gradient(135deg, rgba(0, 217, 255, 0.15) 0%, rgba(0, 217, 255, 0.03) 100%); }
.prize-card:nth-child(3) .prize-icon { border-color: rgba(255, 107, 107, 0.4); color: #ff6b6b; background: linear-gradient(135deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 107, 107, 0.03) 100%); }
.prize-card:nth-child(4) .prize-icon { border-color: rgba(168, 85, 247, 0.4); color: #a855f7; background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.03) 100%); }
.prize-card:nth-child(5) .prize-icon { border-color: rgba(34, 197, 94, 0.4); color: #22c55e; background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.03) 100%); }
.prize-card:nth-child(6) .prize-icon { border-color: rgba(249, 115, 22, 0.4); color: #f97316; background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0.03) 100%); }

.prize-card:hover .prize-icon {
  box-shadow: 0 0 35px var(--prize-glow, rgba(212, 175, 55, 0.3));
  transform: scale(1.08);
}

.prize-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.prize-card p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.prize-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.75rem;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.prize-card:nth-child(1) .prize-tag { background: rgba(212, 175, 55, 0.15); border: 1px solid rgba(212, 175, 55, 0.3); color: #d4af37; }
.prize-card:nth-child(2) .prize-tag { background: rgba(0, 217, 255, 0.15); border: 1px solid rgba(0, 217, 255, 0.3); color: #00d9ff; }
.prize-card:nth-child(3) .prize-tag { background: rgba(255, 107, 107, 0.15); border: 1px solid rgba(255, 107, 107, 0.3); color: #ff6b6b; }
.prize-card:nth-child(4) .prize-tag { background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.3); color: #a855f7; }
.prize-card:nth-child(5) .prize-tag { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: #22c55e; }
.prize-card:nth-child(6) .prize-tag { background: rgba(249, 115, 22, 0.15); border: 1px solid rgba(249, 115, 22, 0.3); color: #f97316; }

.prize-card:hover .prize-tag {
  transform: scale(1.05);
}

.prizes-cta {
  text-align: center;
}

.prizes-cta p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.prizes-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
  color: #000;
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.4s ease;
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.3);
}

.prizes-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.5);
}

.prizes-btn svg {
  transition: transform 0.3s ease;
}

.prizes-btn:hover svg {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1024px) {
  .prizes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .prizes-section {
    padding: 4rem 0;
  }
  
  .prizes-grid {
    grid-template-columns: 1fr;
  }
  
  .prize-card {
    padding: 1.5rem;
  }
  
  .prize-card.featured {
    order: -1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUBMISSION PROCESSING OVERLAY & SUCCESS MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.submission-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 5, 5, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.submission-overlay.active {
  opacity: 1;
  visibility: visible;
}

.submission-overlay-content {
  text-align: center;
  max-width: 400px;
  padding: 2rem;
}

.processing-spinner {
  margin-bottom: 1.5rem;
  animation: spin 1s linear infinite;
}

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

/* Spin class for inline SVG icons */
.spin,
svg.spin {
  animation: spin 1s linear infinite;
}

.submission-overlay h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #22c55e;
  margin-bottom: 0.5rem;
}

.submission-overlay p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
}

.progress-bar-container {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #22c55e 0%, #4ade80 50%, #22c55e 100%);
  background-size: 200% 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
  animation: shimmer 1.5s infinite linear;
}

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

.progress-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: #22c55e;
}

/* Success Modal */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 5, 5, 0.97);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  padding: 2rem 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.success-modal.active {
  opacity: 1;
  visibility: visible;
}

.success-modal-content {
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.08) 0%, rgba(5, 5, 5, 0.95) 100%);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  max-width: 550px;
  width: 100%;
  text-align: center;
  animation: modalSlideIn 0.5s ease forwards;
  box-shadow: 0 0 60px rgba(34, 197, 94, 0.15);
  margin: auto;
  flex-shrink: 0;
}

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

.success-icon {
  margin-bottom: 1.5rem;
  animation: successPulse 2s ease infinite;
}

@keyframes successPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.success-modal h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: #22c55e;
  margin-bottom: 1rem;
}

.success-message {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.success-warning {
  display: flex;
  gap: 1rem;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: left;
  margin-bottom: 1.5rem;
}

.success-warning svg {
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.success-warning strong {
  display: block;
  color: #d4af37;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.success-warning p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

.success-next-steps {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 2rem;
  text-align: left;
}

.success-next-steps h4 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--gold-400);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.success-next-steps ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.success-next-steps li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.success-next-steps li:last-child {
  border-bottom: none;
}

.success-next-steps .step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 50%;
  color: #22c55e;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Receipt Details Section */
.receipt-details {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.receipt-details h4 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--gold-400);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.receipt-details h4 svg {
  color: #22c55e;
}

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

.receipt-grid .receipt-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.receipt-grid .receipt-item.full-width {
  grid-column: 1 / -1;
}

.receipt-item label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.receipt-item span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* Download Receipt Button */
.download-receipt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  border: none;
  border-radius: 10px;
  color: #000;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}

.download-receipt-btn:hover {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.download-receipt-btn svg {
  width: 20px;
  height: 20px;
}

/* Dashboard Signup CTA */
.dashboard-signup-cta {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.dashboard-signup-cta h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: #60a5fa;
  margin-bottom: 0.5rem;
}

.dashboard-signup-cta p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.dashboard-signup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.dashboard-signup-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

/* Success Actions */
.success-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.success-actions .button {
  min-width: 160px;
}

.success-actions .button.secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.success-actions .button.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.success-modal .button {
  min-width: 200px;
}

/* Form error state */
.submission-form input.error,
.submission-form select.error,
.submission-form textarea.error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .success-modal-content {
    padding: 2rem 1.5rem;
  }
  
  .success-modal h2 {
    font-size: 1.4rem;
  }
  
  .success-warning {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  
  .success-warning svg {
    margin: 0 auto;
  }
  
  .receipt-grid {
    grid-template-columns: 1fr;
  }
  
  .receipt-details {
    padding: 1rem;
  }
  
  .dashboard-signup-cta {
    padding: 1rem;
  }
  
  .success-actions {
    flex-direction: column;
  }
  
  .success-actions .button {
    width: 100%;
  }
}

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

.payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 5, 5, 0.97);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 10002;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  padding: 2rem 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.payment-modal.active {
  opacity: 1;
  visibility: visible;
}

.payment-modal-content {
  background: linear-gradient(145deg, rgba(76, 175, 80, 0.08) 0%, rgba(5, 5, 5, 0.98) 100%);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  max-width: 750px;
  width: 96%;
  animation: modalSlideIn 0.5s ease forwards;
  box-shadow: 0 0 60px rgba(76, 175, 80, 0.15);
  margin: auto;
  flex-shrink: 0;
}

.payment-header {
  text-align: center;
  margin-bottom: 2rem;
}

.payment-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 1rem;
  border-radius: 12px;
}

.payment-header h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: #4CAF50;
  margin-bottom: 0.5rem;
}

.payment-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
}

.payment-warning-box {
  display: flex;
  gap: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.payment-warning-box svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.payment-warning-box strong {
  display: block;
  color: #ef4444;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.payment-warning-box p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0;
}

.payment-summary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.payment-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.payment-summary-row:last-child {
  border-bottom: none;
}

.payment-summary-row.total {
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(76, 175, 80, 0.3);
  color: #4CAF50;
  font-weight: 600;
  font-size: 1.1rem;
}

.mpesa-form {
  margin-bottom: 1.5rem;
}

.mpesa-logo-container {
  text-align: center;
  margin-bottom: 1.25rem;
}

.mpesa-logo {
  filter: drop-shadow(0 4px 12px rgba(76, 175, 80, 0.3));
}

/* M-Pesa Phone Input */
.mpesa-phone-input {
  display: flex;
  align-items: center;
  background: rgba(76, 175, 80, 0.08);
  border: 2px solid rgba(76, 175, 80, 0.4);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.mpesa-phone-input:focus-within {
  border-color: #4CAF50;
  box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.2);
  background: rgba(76, 175, 80, 0.12);
}

.phone-prefix {
  padding: 1rem 0.75rem 1rem 1.25rem;
  color: #4CAF50;
  font-size: 1rem;
  font-weight: 600;
  background: rgba(76, 175, 80, 0.15);
  border-right: 1px solid rgba(76, 175, 80, 0.3);
  user-select: none;
}

.mpesa-phone-input input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  padding: 1rem !important;
  font-size: 1.1rem !important;
  font-weight: 500;
  color: #fff !important;
  letter-spacing: 0.05em;
  outline: none !important;
  box-shadow: none !important;
}

.mpesa-phone-input input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

/* Phone Input with Country Selector */
.phone-input-with-country {
  display: flex;
  gap: 0;
  background: rgba(76, 175, 80, 0.08);
  border: 2px solid rgba(76, 175, 80, 0.4);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.phone-input-with-country:focus-within {
  border-color: #4CAF50;
  box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.2);
  background: rgba(76, 175, 80, 0.12);
}

.country-selector {
  position: relative;
  flex-shrink: 0;
  border-right: 1px solid rgba(76, 175, 80, 0.3);
  background: rgba(76, 175, 80, 0.15);
}

.country-code-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  padding: 1rem 2.5rem 1rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #4CAF50;
  cursor: pointer;
  outline: none;
  min-width: 160px;
  font-family: inherit;
}

.country-code-select option {
  background: #1a1a1a;
  color: #fff;
  padding: 0.75rem;
  font-size: 0.9rem;
}

.country-selector::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #4CAF50;
  pointer-events: none;
}

.phone-number-input {
  flex: 1;
  display: flex;
}

.phone-number-input input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  padding: 1rem 1.25rem !important;
  font-size: 1.15rem !important;
  font-weight: 500;
  color: #fff !important;
  letter-spacing: 0.08em;
  outline: none !important;
  box-shadow: none !important;
}

.phone-number-input input::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
  letter-spacing: 0.15em;
}

/* Form hint with icon */
.form-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.form-hint svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Mobile adjustments for country selector */
@media (max-width: 480px) {
  .country-code-select {
    min-width: 130px;
    padding: 0.875rem 2rem 0.875rem 0.75rem;
    font-size: 0.85rem;
  }
  
  .phone-number-input input {
    padding: 0.875rem 1rem !important;
    font-size: 1rem !important;
  }
}

.mpesa-input {
  background: rgba(76, 175, 80, 0.05);
  border-color: rgba(76, 175, 80, 0.3);
}

.mpesa-input:focus-within {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}

.payment-btn {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1rem;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  border: none;
  margin-top: 1rem;
}

.payment-btn:hover {
  background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
  box-shadow: 0 0 30px rgba(76, 175, 80, 0.4);
}

.payment-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.payment-instructions {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.payment-instructions h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold-400);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.payment-instructions ol {
  padding-left: 1.25rem;
  margin: 0;
}

.payment-instructions li {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 0.25rem;
}

.payment-processing {
  text-align: center;
  padding: 2rem 0;
}

.payment-processing .processing-spinner {
  margin-bottom: 1rem;
  animation: spin 1s linear infinite;
}

.payment-processing h4 {
  font-family: var(--font-display);
  color: #4CAF50;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.payment-processing p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.payment-status {
  color: #4CAF50 !important;
  font-weight: 500;
}

/* Payment Receipt */
.payment-receipt {
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.payment-receipt h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: #4CAF50;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.receipt-row:last-child {
  border-bottom: none;
}

.receipt-row span:last-child {
  font-weight: 600;
  color: #fff;
}

/* Mobile adjustments for payment */
@media (max-width: 640px) {
  .payment-modal-content {
    padding: 1.5rem 1.25rem;
  }
  
  .payment-header h2 {
    font-size: 1.4rem;
  }
  
  .payment-warning-box {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  
  .payment-warning-box svg {
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAYPAL & PAYMENT METHOD STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Payment Method Selector */
.payment-method-selector {
  margin-bottom: 1.5rem;
}

.payment-method-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  text-align: center;
}

.payment-method-tabs {
  display: flex;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 0.5rem;
}

.payment-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 0.75rem;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: rgba(255, 255, 255, 0.6);
}

.payment-tab svg {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
}

.payment-tab span {
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-display);
}

.payment-tab small {
  font-size: 0.7rem;
  opacity: 0.7;
}

.payment-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.payment-tab.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-color: var(--gold-400);
  color: var(--gold-400);
}

.payment-tab.active svg {
  color: var(--gold-400);
}

.payment-tab[data-method="mpesa"].active {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 100%);
  border-color: #4CAF50;
  color: #4CAF50;
}

.payment-tab[data-method="mpesa"].active svg {
  color: #4CAF50;
}

/* Payment Sections */
.payment-section {
  display: none;
}

.payment-section.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* USD Amount Row */
.payment-summary-row.usd-amount {
  color: var(--gold-400);
  font-size: 0.85rem;
  opacity: 0.9;
}

/* PayPal Form Styles */
.paypal-form {
  padding: 0.5rem 0;
}

.paypal-branding {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.paypal-logo-svg {
  margin-bottom: 0.5rem;
}

.paypal-tagline {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Card Preview */
.card-preview {
  perspective: 1000px;
  margin-bottom: 1.5rem;
}

.card-preview-inner {
  width: 100%;
  max-width: 340px;
  height: 200px;
  margin: 0 auto;
  padding: 1.5rem;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 16px;
  position: relative;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.5),
    0 5px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.card-preview-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.08) 0%, transparent 40%);
  pointer-events: none;
}

.card-chip {
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
}

.card-number-preview {
  font-family: 'Courier New', monospace;
  font-size: 1.35rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.card-details-preview {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.card-name-preview,
.card-expiry-preview {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}

.card-brand-preview {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1;
}

/* Accepted Cards */
.accepted-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
}

.accepted-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-icons {
  display: flex;
  gap: 0.5rem;
}

.card-icon {
  transition: transform 0.2s ease;
}

.card-icon:hover {
  transform: scale(1.1);
}

.card-icon svg {
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* PayPal Button Wrapper */
.paypal-button-wrapper {
  margin: 1.5rem 0;
  min-height: 55px;
}

#paypal-button-container {
  max-width: 100%;
}

/* Security Badges */
.payment-security {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.security-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.security-badge svg {
  flex-shrink: 0;
}

/* International Notice */
.international-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  margin-top: 1rem;
}

.international-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.international-notice p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.5;
}

.international-notice strong {
  color: var(--gold-400);
}

/* Mobile Adjustments for PayPal */
@media (max-width: 640px) {
  .payment-method-tabs {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .payment-tab {
    flex-direction: row;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem;
  }
  
  .payment-tab small {
    display: none;
  }
  
  .card-preview-inner {
    height: 180px;
    padding: 1.25rem;
  }
  
  .card-number-preview {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
  
  .accepted-cards {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .payment-security {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  .security-badge {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM PAYPAL PAYMENT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Back Button */
.payment-back-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}

.payment-back-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--gold-400);
  color: var(--gold-400);
}

.payment-back-btn svg {
  width: 16px;
  height: 16px;
}

/* PayPal Branding Enhanced */
.paypal-logo-container-new {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.paypal-branding .paypal-tagline {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.paypal-trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

/* PayPal Choice Tabs */
.paypal-choice-tabs {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.paypal-choice-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.paypal-choice-tab svg {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.paypal-choice-tab .choice-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.paypal-choice-tab .choice-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-display);
}

.paypal-choice-tab .choice-desc {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

.paypal-choice-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

.paypal-choice-tab.active {
  background: linear-gradient(135deg, rgba(0, 48, 135, 0.15) 0%, rgba(0, 156, 222, 0.1) 100%);
  border-color: #009cde;
}

.paypal-choice-tab.active svg {
  color: #009cde;
}

.paypal-choice-tab.active .choice-title {
  color: #fff;
}

/* PayPal Choice Sections */
.paypal-choice-section {
  display: none;
}

.paypal-choice-section.active {
  display: block;
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(15px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Premium Card Preview */
.card-preview.premium {
  perspective: 1200px;
  margin-bottom: 1.5rem;
  position: relative;
}

.card-preview.premium .card-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
  filter: blur(30px);
  z-index: -1;
}

.card-preview.premium .card-preview-inner {
  width: 100%;
  max-width: 360px;
  height: 210px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(145deg, #1e2a3a 0%, #0f1922 50%, #162130 100%);
  border-radius: 18px;
  position: relative;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.6),
    0 8px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.card-preview.premium .card-preview-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 10% 10%, rgba(212, 175, 55, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
  pointer-events: none;
}

.card-preview.premium .card-preview-inner::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.03) 55%,
    transparent 60%
  );
  animation: cardShine 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cardShine {
  0%, 100% { transform: translateX(-100%) rotate(45deg); }
  50% { transform: translateX(100%) rotate(45deg); }
}

.card-preview.premium:hover .card-preview-inner {
  transform: rotateY(-3deg) rotateX(3deg);
}

.card-preview.premium .card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.card-preview.premium .card-chip {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.card-preview.premium .card-wireless {
  transform: rotate(90deg);
}

.card-preview.premium .card-number-preview {
  display: flex;
  justify-content: space-between;
  font-family: 'Courier New', monospace;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-preview.premium .card-number-preview span {
  letter-spacing: 0.15em;
}

.card-preview.premium .card-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

.card-preview.premium .card-holder-section,
.card-preview.premium .card-expiry-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.card-preview.premium .card-label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.4);
}

.card-preview.premium .card-name-preview,
.card-preview.premium .card-expiry-preview {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.card-preview.premium .card-brand-preview {
  opacity: 0.9;
}

/* Premium Accepted Cards */
.accepted-cards.premium {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  padding: 0;
  background: none;
}

.accepted-cards.premium .card-icons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.accepted-cards.premium .card-icon {
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

.accepted-cards.premium .card-icon:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.1);
}

.accepted-cards.premium .card-icon svg {
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* PayPal Button Wrapper Enhanced */
.paypal-button-wrapper.card-buttons,
.paypal-button-wrapper.paypal-buttons {
  margin: 1.5rem 0;
}

.paypal-button-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

#paypal-card-container,
#paypal-button-container {
  min-height: 55px;
}

/* Premium Card Container Styling */
#paypal-card-container {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Style PayPal SDK rendered buttons/fields */
#paypal-card-container .paypal-button,
#paypal-card-container iframe,
#paypal-card-container .paypal-card-fields-form {
  width: 100% !important;
  min-width: 100% !important;
}

/* Card fields container for modern look */
.paypal-button-wrapper.card-buttons {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(76, 175, 80, 0.03) 100%);
  padding: 0.5rem;
  border-radius: 20px;
}

/* PayPal Button Enhanced Width */
#paypal-button-container {
  background: linear-gradient(145deg, rgba(0, 105, 169, 0.05) 0%, rgba(0, 105, 169, 0.02) 100%);
  border: 1px solid rgba(0, 105, 169, 0.15);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

#paypal-button-container:hover {
  border-color: rgba(0, 105, 169, 0.3);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25);
}

/* Secure Form Notice */
.secure-form-notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(145deg, rgba(76, 175, 80, 0.08) 0%, rgba(76, 175, 80, 0.02) 100%);
  border: 1px solid rgba(76, 175, 80, 0.2);
  border-radius: 14px;
  margin-bottom: 1.25rem;
}

.secure-icon-wrap {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: rgba(76, 175, 80, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.secure-notice-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.secure-notice-text .secure-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #4CAF50;
}

.secure-notice-text .secure-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

/* Card Trust Badges */
.card-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.trust-badge-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.trust-badge-item svg {
  opacity: 0.7;
}

/* PayPal Balance Section */
.paypal-balance-info {
  text-align: center;
  padding: 2rem 1rem;
  margin-bottom: 1rem;
}

.paypal-balance-icon {
  margin-bottom: 1rem;
}

.paypal-balance-info p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  max-width: 300px;
  margin: 0 auto;
}

/* Premium Security Badges */
.payment-security.premium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.payment-security.premium .security-badge {
  flex-direction: column;
  text-align: center;
  padding: 1rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  gap: 0.5rem;
}

.payment-security.premium .security-badge svg {
  width: 24px;
  height: 24px;
}

.payment-security.premium .security-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.payment-security.premium .security-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.payment-security.premium .security-desc {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Premium International Notice */
.international-notice.premium {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 14px;
  margin-top: 1.5rem;
}

.international-notice.premium .notice-icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 10px;
}

.international-notice.premium .notice-content strong {
  display: block;
  color: var(--gold-400);
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.international-notice.premium .notice-content p {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin: 0;
}

/* Mobile Adjustments for Premium PayPal */
@media (max-width: 640px) {
  .paypal-choice-tabs {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .paypal-choice-tab {
    padding: 0.875rem 1rem;
  }
  
  .card-preview.premium .card-preview-inner {
    height: 180px;
    padding: 1.25rem;
  }
  
  .card-preview.premium .card-number-preview {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
  
  .accepted-cards.premium .card-icon svg {
    width: 42px;
    height: 28px;
  }
  
  .payment-security.premium {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .payment-security.premium .security-badge {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }
  
  .payment-security.premium .security-text {
    align-items: flex-start;
  }
  
  .international-notice.premium {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  
  .international-notice.premium .notice-icon-wrap {
    margin: 0 auto;
  }
}

/* Apply Guide Card Styles */
.apply-guide-card {
  margin: 2rem 0 1.5rem 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(212,175,55,0.07) 100%);
  border: 1.5px solid rgba(212,175,55,0.18);
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(212,175,55,0.07);
  padding: 1.2rem 2rem;
  display: flex;
  align-items: center;
  max-width: 420px;
}
.apply-guide-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.apply-guide-link:hover {
  color: #ffd700;
}
.apply-guide-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: #ffd700;
  letter-spacing: 0.02em;
}
/* Footer Social Cards */
.footer-social-cards {
  display: flex;
  gap: 1rem;
  margin-top: 0.7rem;
}
.footer-social-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(212,175,55,0.07) 100%);
  border: 1.5px solid rgba(212,175,55,0.18);
  border-radius: 14px;
  box-shadow: 0 2px 12px 0 rgba(212,175,55,0.07);
  padding: 0.7rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.footer-social-card:hover {
  color: #ffd700;
  border-color: #ffd700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DRAFT SAVE/RECOVERY SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* Draft Save Indicator */
#draft-save-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(145deg, rgba(76, 175, 80, 0.95) 0%, rgba(56, 142, 60, 0.95) 100%);
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 9999;
}

#draft-save-indicator.show {
  transform: translateY(0);
  opacity: 1;
}

#draft-save-indicator svg {
  animation: checkmark 0.3s ease forwards;
}

@keyframes checkmark {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Draft Recovery Modal */
.draft-recovery-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 1rem;
}

.draft-recovery-modal.active {
  opacity: 1;
  visibility: visible;
}

.draft-recovery-content {
  background: linear-gradient(145deg, rgba(30, 30, 30, 0.98) 0%, rgba(15, 15, 15, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  max-width: 450px;
  width: 100%;
  text-align: center;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(212, 175, 55, 0.1);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.draft-recovery-modal.active .draft-recovery-content {
  transform: scale(1) translateY(0);
}

.draft-recovery-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.3); }
  50% { box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); }
}

.draft-recovery-content h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold-400);
  margin-bottom: 1rem;
}

.draft-recovery-content .draft-time {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.draft-recovery-content .draft-time strong {
  color: #4CAF50;
}

.draft-recovery-content .draft-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.draft-recovery-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.draft-recovery-actions .button {
  min-width: 140px;
  padding: 0.85rem 1.5rem;
}

.draft-recovery-actions .button.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}

.draft-recovery-actions .button.secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.draft-recovery-actions .button.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Pending Payment Details */
.pending-payment-details {
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.2);
  border-radius: 12px;
  padding: 1rem;
  margin: 1.25rem 0;
}

.pending-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pending-detail:last-child {
  border-bottom: none;
}

.pending-detail .detail-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.pending-detail .detail-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .draft-recovery-content {
    padding: 2rem 1.5rem;
  }
  
  .draft-recovery-actions {
    flex-direction: column;
  }
  
  .draft-recovery-actions .button {
    width: 100%;
  }
  
  #draft-save-indicator {
    bottom: 10px;
    right: 10px;
    left: 10px;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAYMENT TERMS & CONDITIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.payment-terms {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.terms-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--gold-400);
  cursor: pointer;
  flex-shrink: 0;
}

.terms-checkbox label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  line-height: 1.5;
}

.terms-checkbox label a {
  color: var(--gold-400);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.terms-checkbox label a:hover {
  color: var(--gold-300);
  text-decoration: underline;
}

.terms-summary {
  margin-bottom: 1rem;
}

.terms-summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.terms-summary ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.terms-summary ul li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.terms-summary ul li strong {
  color: rgba(255, 255, 255, 0.9);
}

.terms-footer {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1.5;
}

.terms-footer a {
  color: #0070ba;
  text-decoration: none;
}

.terms-footer a:hover {
  text-decoration: underline;
}

/* Better Card Icons */
.accepted-cards.premium {
  margin: 1.5rem 0;
  text-align: center;
}

.accepted-cards.premium .cards-label {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.accepted-cards.premium .card-icons {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.accepted-cards.premium .card-icon {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.accepted-cards.premium .card-icon:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.accepted-cards.premium .card-icon svg {
  display: block;
  border-radius: 6px;
  overflow: hidden;
}

/* Terms Modal */
.terms-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 1rem;
}

.terms-modal.active {
  opacity: 1;
  visibility: visible;
}

.terms-modal-content {
  background: linear-gradient(145deg, rgba(30, 30, 30, 0.98) 0%, rgba(15, 15, 15, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 24px;
  padding: 2rem;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.terms-modal.active .terms-modal-content {
  transform: scale(1);
}

.terms-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.terms-modal-header h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold-400);
  margin: 0;
}

.terms-modal-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.terms-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.terms-modal-body {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.7;
}

.terms-modal-body h4 {
  color: var(--gold-400);
  font-size: 1rem;
  margin: 1.5rem 0 0.75rem;
}

.terms-modal-body h4:first-child {
  margin-top: 0;
}

.terms-modal-body p {
  margin-bottom: 1rem;
}

.terms-modal-body ul {
  margin: 0.5rem 0 1rem;
  padding-left: 1.5rem;
}

.terms-modal-body ul li {
  margin-bottom: 0.5rem;
}

/* Mobile adjustments for terms */
@media (max-width: 640px) {
  .payment-terms {
    padding: 1rem;
  }
  
  .terms-summary ul li {
    font-size: 0.75rem;
  }
  
  .terms-modal-content {
    padding: 1.5rem;
    max-height: 90vh;
  }
}