@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css');
#evol *{ box-sizing: border-box; margin: 0; padding: 0; }#evol .page{
    background: #0a0603;
    color: #f0e6d3;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
  }#evol .nav{
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px; height: 64px;
    background: rgba(10,6,3,0.96);
    border-bottom: 1px solid rgba(156,102,222,0.18);
  }#evol .nav-logo{ font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 900; color: #9C66DE; letter-spacing: 0.04em; }#evol .nav-logo span{ color: #f0e6d3; }#evol .nav-links{ display: flex; gap: 28px; }#evol .nav-links a{ font-size: 13px; letter-spacing: 0.06em; color: rgba(240,230,211,0.5); text-decoration: none; text-transform: uppercase; }#evol .nav-links a.active{ color: #9C66DE; }#evol .nav-links a:hover{ color: rgba(240,230,211,0.9); }#evol .btn-gold{ font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: #9C66DE; color: #0a0603; padding: 8px 20px; border-radius: 2px; border: none; cursor: pointer; font-family: 'Inter', sans-serif; }#evol .hero{
    padding: 80px 40px 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end;
    border-bottom: 1px solid rgba(156,102,222,0.12);
  }#evol .hero-left{ padding-bottom: 64px; }#evol .breadcrumb{ font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(156,102,222,0.5); margin-bottom: 24px; }#evol .breadcrumb span{ color: rgba(240,230,211,0.3); margin: 0 8px; }#evol .hero-title{
    font-family: 'Playfair Display', serif;
    font-size: 72px; font-weight: 900; line-height: 0.95;
    color: #f0e6d3; margin-bottom: 28px;
  }#evol .hero-title em{ color: #9C66DE; font-style: normal; display: block; }#evol .hero-desc{ font-size: 16px; color: rgba(240,230,211,0.55); line-height: 1.8; margin-bottom: 36px; max-width: 440px; }#evol .hero-actions{ display: flex; gap: 12px; }#evol .btn-outline{ font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(156,102,222,0.4); color: #9C66DE; padding: 12px 28px; border-radius: 2px; background: transparent; cursor: pointer; font-family: 'Inter', sans-serif; }#evol .hero-actions .btn-gold{ padding: 12px 32px; font-size: 13px; }#evol .hero-right{
    border-left: 1px solid rgba(156,102,222,0.12);
    padding: 48px 0 48px 60px;
    display: flex; flex-direction: column; gap: 1px;
  }#evol .hero-stat{
    padding: 20px 0;
    border-bottom: 1px solid rgba(156,102,222,0.08);
  }#evol .hero-stat:last-child{ border-bottom: none; }#evol .stat-num{ font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 700; color: #9C66DE; line-height: 1; }#evol .stat-label{ font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,230,211,0.35); margin-top: 4px; }#evol .divider{ height: 1px; background: linear-gradient(90deg, transparent, rgba(156,102,222,0.2), transparent); margin: 0 40px; }#evol .roles-section{ padding: 72px 40px; }#evol .section-eyebrow{ font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #9C66DE; margin-bottom: 12px; }#evol .section-title{ font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: #f0e6d3; margin-bottom: 48px; }#evol .roles-grid{
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: rgba(156,102,222,0.12);
    border: 1px solid rgba(156,102,222,0.12);
  }#evol .role-card{
    background: #0a0603; padding: 36px 28px;
    transition: background 0.2s; cursor: default;
  }#evol .role-card:hover{ background: rgba(156,102,222,0.05); }#evol .role-icon{ font-size: 22px; color: rgba(156,102,222,0.6); margin-bottom: 16px; }#evol .role-name{ font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #f0e6d3; margin-bottom: 10px; }#evol .role-desc{ font-size: 13px; color: rgba(240,230,211,0.45); line-height: 1.75; margin-bottom: 20px; }#evol .role-tag{ display: inline-block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(156,102,222,0.6); border: 1px solid rgba(156,102,222,0.2); padding: 4px 10px; }#evol .perks-section{
    margin: 0 40px;
    border: 1px solid rgba(156,102,222,0.18);
    display: grid; grid-template-columns: 1fr 1fr;
  }#evol .perks-left{
    padding: 64px;
    border-right: 1px solid rgba(156,102,222,0.12);
  }#evol .perks-right{ padding: 64px; display: flex; flex-direction: column; gap: 20px; }#evol .perk-row{
    display: flex; gap: 20px; align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(156,102,222,0.08);
  }#evol .perk-row:last-child{ border-bottom: none; padding-bottom: 0; }#evol .perk-icon{ font-size: 18px; color: #9C66DE; flex-shrink: 0; margin-top: 2px; }#evol .perk-title{ font-size: 14px; font-weight: 500; color: #f0e6d3; margin-bottom: 4px; }#evol .perk-desc{ font-size: 13px; color: rgba(240,230,211,0.4); line-height: 1.65; }#evol .quote-block{
    margin-top: 32px;
    padding: 28px;
    border-left: 2px solid #9C66DE;
    background: rgba(156,102,222,0.04);
  }#evol .quote-text{ font-family: 'Playfair Display', serif; font-size: 17px; font-style: italic; color: rgba(240,230,211,0.7); line-height: 1.6; margin-bottom: 12px; }#evol .quote-attr{ font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(156,102,222,0.5); }#evol .expect-section{ padding: 72px 40px; }#evol .timeline{ display: flex; flex-direction: column; gap: 1px; background: rgba(156,102,222,0.12); border: 1px solid rgba(156,102,222,0.12); margin-top: 48px; }#evol .timeline-row{
    background: #0a0603; display: grid; grid-template-columns: 120px 1fr;
    gap: 0; transition: background 0.2s;
  }#evol .timeline-row:hover{ background: rgba(156,102,222,0.04); }#evol .timeline-date{
    padding: 28px 28px;
    border-right: 1px solid rgba(156,102,222,0.1);
    font-family: 'Playfair Display', serif;
    font-size: 13px; font-weight: 700; color: #9C66DE;
    display: flex; flex-direction: column; justify-content: center;
  }#evol .timeline-date small{ font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400; color: rgba(240,230,211,0.3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }#evol .timeline-content{ padding: 28px 32px; }#evol .timeline-title{ font-size: 15px; font-weight: 500; color: #f0e6d3; margin-bottom: 6px; }#evol .timeline-desc{ font-size: 13px; color: rgba(240,230,211,0.4); line-height: 1.65; }#evol .elig-section{ padding: 0 40px 72px; }#evol .elig-grid{
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: rgba(156,102,222,0.12); border: 1px solid rgba(156,102,222,0.12);
    margin-top: 48px;
  }#evol .elig-card{ background: #0a0603; padding: 40px 36px; }#evol .elig-heading{ font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(156,102,222,0.6); margin-bottom: 20px; }#evol .elig-list{ list-style: none; }#evol .elig-list li{ font-size: 14px; color: rgba(240,230,211,0.55); line-height: 1; padding: 12px 0; border-bottom: 1px solid rgba(156,102,222,0.07); display: flex; gap: 12px; align-items: center; }#evol .elig-list li:last-child{ border-bottom: none; }#evol .elig-list li i{ font-size: 16px; color: #9C66DE; flex-shrink: 0; }#evol .elig-list li i.no{ color: rgba(240,230,211,0.2); }#evol .cta-banner{
    margin: 0 40px 80px;
    background: rgba(156,102,222,0.06);
    border: 1px solid rgba(156,102,222,0.22);
    padding: 64px;
    display: flex; align-items: center; justify-content: space-between; gap: 48px;
  }#evol .cta-left{ max-width: 520px; }#evol .cta-eyebrow{ font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #9C66DE; margin-bottom: 14px; }#evol .cta-headline{ font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: #f0e6d3; line-height: 1.2; margin-bottom: 12px; }#evol .cta-sub{ font-size: 14px; color: rgba(240,230,211,0.45); line-height: 1.75; }#evol .cta-right{ flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }#evol .cta-right .btn-gold{ font-size: 13px; padding: 16px 40px; }#evol .cta-note{ font-size: 12px; color: rgba(240,230,211,0.25); text-align: right; }#evol .footer{
    border-top: 1px solid rgba(156,102,222,0.12);
    padding: 40px;
    display: flex; justify-content: space-between; align-items: center;
  }#evol .footer-logo{ font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 900; color: #9C66DE; }#evol .footer-copy{ font-size: 12px; color: rgba(240,230,211,0.25); }#evol .footer-social{ display: flex; gap: 16px; }#evol .footer-social a{ font-size: 18px; color: rgba(240,230,211,0.25); text-decoration: none; }#evol .footer-social a:hover{ color: #9C66DE; }

/* ===================== RESPONSIVE (added 2026-06-18) ===================== */
@media (max-width: 1024px){
  #evol .hero{ gap: 40px; }
  #evol .hero-title{ font-size: 56px; }
  #evol .roles-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  /* HERO -> single column */
  #evol .hero{ grid-template-columns: 1fr; gap: 32px; padding: 48px 20px 0; }
  #evol .hero-left{ padding-bottom: 32px; }
  #evol .hero-title{ font-size: 40px; }
  #evol .hero-desc{ font-size: 15px; }
  #evol .hero-actions{ flex-wrap: wrap; }
  #evol .hero-right{ border-left: none; padding: 32px 0 0; border-top: 1px solid rgba(156,102,222,0.12); }
  #evol .stat-num{ font-size: 32px; }

  /* SECTION padding + titles */
  #evol .roles-section,
  #evol .expect-section{ padding: 48px 20px; }
  #evol .elig-section{ padding: 0 20px 48px; }
  #evol .section-title{ font-size: 28px; margin-bottom: 32px; }

  /* ROLES -> 1 col */
  #evol .roles-grid{ grid-template-columns: 1fr; }
  #evol .role-card{ padding: 28px 22px; }

  /* PERKS -> stacked */
  #evol .perks-section{ grid-template-columns: 1fr; margin: 0 20px; }
  #evol .perks-left{ border-right: none; border-bottom: 1px solid rgba(156,102,222,0.12); padding: 40px 24px; }
  #evol .perks-right{ padding: 40px 24px; }

  /* TIMELINE */
  #evol .timeline-date{ padding: 20px; }
  #evol .timeline-content{ padding: 20px 22px; }

  /* ELIGIBILITY -> 1 col */
  #evol .elig-grid{ grid-template-columns: 1fr; }
  #evol .elig-card{ padding: 32px 24px; }

  /* CTA -> stacked */
  #evol .cta-banner{ flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 24px; margin: 0 20px 56px; }
  #evol .cta-right{ align-items: flex-start; }
  #evol .cta-note{ text-align: left; }
  #evol .cta-headline{ font-size: 28px; }

  #evol .divider{ margin: 0 20px; }
}