:root{
    --grid: rgba(0,240,255,0.07);
  }
  *{ font-family:'Vazirmatn', sans-serif; }
  html{ scroll-behavior:smooth; }
  body{
    background:#0B0F19;
    color:#E8ECF5;
    overflow-x:hidden;
  }

  /* ---------- Background grid + particles ---------- */
  .grid-bg{
    position:fixed; inset:0; z-index:0;
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 90%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 90%);
  }
  #particles{ position:fixed; inset:0; z-index:0; }

  /* ---------- Cursor spotlight ---------- */
  .cursor-glow{
    position:fixed; top:0; left:0; z-index:1;
    width:520px; height:520px; border-radius:50%;
    pointer-events:none;
    background: radial-gradient(circle, rgba(0,240,255,0.10) 0%, rgba(255,107,0,0.05) 40%, transparent 70%);
    transform: translate(-50%,-50%);
    transition: opacity .4s ease;
    will-change: transform;
    mix-blend-mode: screen;
  }
  @media (max-width:768px){ .cursor-glow{ display:none; } }

  /* ---------- Decorative floating orbs ---------- */
  .orb{
    position:absolute; border-radius:50%; filter: blur(70px);
    pointer-events:none; z-index:0; opacity:.35;
    animation: orbDrift 14s ease-in-out infinite;
  }
  .orb-cyan{ background: radial-gradient(circle, rgba(0,240,255,.55), transparent 70%); }
  .orb-orange{ background: radial-gradient(circle, rgba(255,107,0,.55), transparent 70%); }
  @keyframes orbDrift{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(30px,-24px) scale(1.12); }
  }

  /* ---------- Glow utilities ---------- */
  .glow-cyan-text{ text-shadow: 0 0 8px rgba(0,240,255,.7), 0 0 26px rgba(0,240,255,.35); }
  .glow-orange-text{ text-shadow: 0 0 8px rgba(255,107,0,.7), 0 0 26px rgba(255,107,0,.35); }
  .glow-cyan-box{ box-shadow: 0 0 0 1px rgba(0,240,255,.35), 0 0 22px rgba(0,240,255,.18); }
  .glow-orange-box{ box-shadow: 0 0 0 1px rgba(255,107,0,.35), 0 0 22px rgba(255,107,0,.18); }

  .glass{
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
  }

  /* ---------- Reveal-on-scroll (generic) ---------- */
  .reveal-up{
    opacity:0; transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16,.9,.3,1), transform .7s cubic-bezier(.16,.9,.3,1);
  }
  .reveal-up.in-view{ opacity:1; transform:translateY(0); }
  .reveal-up.d1{ transition-delay:.08s; }
  .reveal-up.d2{ transition-delay:.16s; }
  .reveal-up.d3{ transition-delay:.24s; }
  .reveal-up.d4{ transition-delay:.32s; }
  .reveal-up.d5{ transition-delay:.4s; }

  /* ---------- Nav ---------- */
  #navbar{
    transition: box-shadow .4s ease, border-color .4s ease, background .4s ease;
  }
  #navbar.scrolled{
    background: rgba(11,15,25,0.75);
    border-color: rgba(0,240,255,.18);
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
  }
  .nav-link{ position:relative; color:#8B95AF; transition:color .25s ease; }
  .nav-link::after{
    content:''; position:absolute; right:0; bottom:-6px; height:2px; width:0%;
    background: linear-gradient(90deg,#00F0FF,#FF6B00);
    transition: width .3s ease;
  }
  .nav-link:hover{ color:#E8ECF5; }
  .nav-link:hover::after{ width:100%; }

  .cta-btn{
    position:relative; overflow:hidden; isolation:isolate;
    background: linear-gradient(90deg,#00F0FF,#00b8c4);
    color:#04121a;
    transition: box-shadow .3s ease, transform .25s ease;
  }
  .cta-btn::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background: linear-gradient(90deg,#FF6B00,#00F0FF);
    opacity:0; transition:opacity .35s ease;
  }
  .cta-btn::after{
    content:''; position:absolute; inset:0;
    background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.55) 40%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .7s ease;
  }
  .cta-btn:hover::before{ opacity:1; }
  .cta-btn:hover::after{ transform: translateX(120%); }
  .cta-btn:hover{ box-shadow: 0 0 26px rgba(0,240,255,.55); transform: translateY(-1px); }
  .cta-btn:active{ transform: translateY(0) scale(.98); }

  /* ---------- Hero headline reveal (single orchestrated entrance) ---------- */
  .reveal-line{ overflow:hidden; }
  .reveal-line > span{
    display:inline-block;
    transform: translateY(110%);
    animation: revealUp .9s cubic-bezier(.16,.9,.3,1) forwards;
  }
  @keyframes revealUp{ to{ transform:translateY(0); } }
  .fade-in{ opacity:0; animation: fadeIn .9s ease forwards; }
  @keyframes fadeIn{ to{ opacity:1; } }

  /* ---------- Countdown ---------- */
  .flip-box{
    background: radial-gradient(120% 140% at 50% 0%, #141b30 0%, #0c1120 100%);
    border:1px solid rgba(0,240,255,.25);
    animation: cdPulse 3.2s ease-in-out infinite;
  }
  @keyframes cdPulse{
    0%,100%{ box-shadow: 0 0 0 1px rgba(0,240,255,.35), 0 0 18px rgba(0,240,255,.15); }
    50%{ box-shadow: 0 0 0 1px rgba(0,240,255,.5), 0 0 30px rgba(0,240,255,.32); }
  }
  .flip-num{
    font-variant-numeric: tabular-nums;
  }

  /* ---------- Scratch puzzle blocks ---------- */
  .scratch-block{
    position:relative;
    border-radius:10px;
    box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 18px rgba(255,107,0,.18);
    transition: transform .25s ease;
  }
  .scratch-block:hover{ transform: translateX(-6px) rotate(-.4deg); }
  .scratch-block::after{
    content:''; position:absolute; right:14px; top:-8px; width:22px; height:10px;
    background:inherit; border-radius:4px 4px 0 0;
  }
  .puzzle-float{ animation: puzzleFloat 5s ease-in-out infinite; }
  .puzzle-float.d2{ animation-delay:.6s; }
  .puzzle-float.d3{ animation-delay:1.2s; }
  @keyframes puzzleFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
  }

  /* ---------- Terminal typing ---------- */
  .terminal{
    background:#0a0e19;
    border:1px solid rgba(0,240,255,.22);
    transition: box-shadow .4s ease;
  }
  .terminal:hover{ box-shadow: 0 0 26px rgba(0,240,255,.2); }
  .caret{
    display:inline-block; width:8px; height:1.05em; background:#00F0FF;
    margin-inline-start:2px; vertical-align:-2px;
    animation: blink 1s steps(1) infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }
  .tok-kw{ color:#FF6B00; }
  .tok-str{ color:#7CF29C; }
  .tok-fn{ color:#00F0FF; }
  .tok-com{ color:#5b6685; }
  .tok-num{ color:#c792ea; }


  .terminal .terminal-body {
  position: relative;
}
.terminal .terminal-body .ghost {
  visibility: hidden;
  white-space: pre-wrap;
  pointer-events: none;
}
.terminal .terminal-body #typing-code {
  position: absolute;
  inset: 0;
  white-space: pre-wrap;
}

  /* ---------- Cards tilt on hover ---------- */
  .tilt-card{ transition: transform .35s ease, box-shadow .35s ease; }
  .tilt-card:hover{ transform: translateY(-8px); }

  /* ---------- Timeline ---------- */
  .timeline-line{
    background: linear-gradient(180deg, #00F0FF, #FF6B00);
    background-size: 100% 200%;
    animation: timelineFlow 4s linear infinite;
  }
  @keyframes timelineFlow{
    0%{ background-position: 0 0; }
    100%{ background-position: 0 -200%; }
  }
  .timeline-dot{
    box-shadow: 0 0 0 4px rgba(11,15,25,1), 0 0 16px rgba(0,240,255,.7);
  }
  .timeline-item{
    opacity:0; transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .timeline-item.in-view{ opacity:1; transform:translateY(0); }

  /* ---------- Accordion ---------- */
  .acc-panel{ max-height:0; overflow:hidden; transition: max-height .45s ease; }
  .acc-item{ transition: border-color .3s ease, box-shadow .3s ease; }
  .acc-item.open{ border-color: rgba(0,240,255,.35); box-shadow: 0 0 20px rgba(0,240,255,.12); }
  .acc-item.open .acc-panel{ max-height:300px; }
  .acc-item.open .acc-chev{ transform: rotate(180deg); color:#00F0FF; }
  .acc-item.open .acc-head{ color:#00F0FF; }
  .acc-head{ transition: color .3s ease; }
  .acc-chev{ transition: transform .3s ease, color .3s ease; }

  /* ---------- Prize cards ---------- */
  .prize-card{ transform-style: preserve-3d; perspective:800px; }
  .prize-inner{ transition: transform .4s ease, box-shadow .4s ease; animation: prizeFloat 6s ease-in-out infinite; }
  .prize-inner img{height:160px; width:auto; display:block; margin:0 auto;}
  .prize-card:nth-child(2) .prize-inner{ animation-delay:.4s; }
  .prize-card:nth-child(3) .prize-inner{ animation-delay:.8s; }
  @keyframes prizeFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-7px); }
  }
  .prize-card:hover .prize-inner{ transform: rotateX(4deg) rotateY(-4deg) translateY(-10px); }

  /* ---------- Marquee sponsors ---------- */
  .marquee-track{
    display:flex; width:max-content;
    animation: marquee 22s linear infinite;
  }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ---------- Form ---------- */
  .field input, .field select{
    background: rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.12);
    color:#E8ECF5;
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  .field input:focus, .field select:focus{
    outline:none; border-color:#00F0FF; box-shadow: 0 0 0 3px rgba(0,240,255,.15);
  }
  .field label{ color:#8B95AF; }

  .spinner{
    width:18px; height:18px; border-radius:50%;
    border:2.5px solid rgba(4,18,26,.35); border-top-color:#04121a;
    animation: spin .7s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }

  ::selection{ background:#00F0FF; color:#04121a; }

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
    outline: 2px solid #00F0FF; outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

  .section-pad{ padding-top:6rem; padding-bottom:6rem; }
  @media (max-width:768px){ .section-pad{ padding-top:4rem; padding-bottom:4rem; } }

  /* ---------- Banner float animation ---------- */
.banner-float{
  animation: bannerFloat 6s ease-in-out infinite;
  will-change: transform;
  filter: drop-shadow(0 0 26px rgba(0,240,255,.18));
  transition: filter .4s ease;
}
.banner-float:hover{
  filter: drop-shadow(0 0 40px rgba(255,107,0,.35));
}

@keyframes bannerFloat{
  0%, 100%{
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50%{
    transform: translateY(-14px) rotate(-1deg) scale(1.015);
  }
}

/* ---------- Tom Select Dark Theme ---------- */
.ts-wrapper .ts-control {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #E8ECF5 !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  min-height: 46px;
}
.ts-wrapper.focus .ts-control {
  border-color: #00F0FF !important;
  box-shadow: 0 0 0 3px rgba(0,240,255,.15) !important;
}
.ts-wrapper .ts-control input {
  color: #E8ECF5 !important;
}
.ts-dropdown {
  background: #0F1526 !important;
  border: 1px solid rgba(0,240,255,0.25) !important;
  color: #E8ECF5 !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
}
.ts-dropdown .option {
  color: #E8ECF5 !important;
  padding: 8px 12px !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: rgba(0,240,255,0.1) !important;
  color: #00F0FF !important;
}
.ts-dropdown .optgroup-header {
  color: #8B95AF !important;
}

/* ---------- Schools ---------- */
.school-card .school-inner {
  position: relative;
  overflow: hidden;
}
.school-card .school-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,107,0,0.12), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.school-card:hover .school-inner::before {
  opacity: 1;
}
.school-card:hover .school-inner {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(255,107,0,.35), 0 0 26px rgba(255,107,0,.25);
}
.school-city{
  font-size: 10.5px;
  color:#8B95AF;
  display:flex;
  align-items:center;
  gap:4px;
}
.school-city svg{ flex-shrink:0; opacity:.7; }

/* Blurred / not-yet-revealed schools: a "halo" is visible, details are not */
.school-card.blurred-card{
  cursor: pointer;
}
.school-card.blurred-card .school-inner{
  filter: blur(6px) saturate(1.3);
  opacity:.55;
  transition: filter .9s cubic-bezier(.16,.9,.3,1), opacity .9s cubic-bezier(.16,.9,.3,1), transform .9s ease, box-shadow .9s ease;
  animation: haloPulse 3.6s ease-in-out infinite;
}
.school-card.blurred-card:nth-child(3n) .school-inner{ animation-delay:.5s; }
.school-card.blurred-card:nth-child(3n+1) .school-inner{ animation-delay:1s; }
@keyframes haloPulse{
  0%,100%{ box-shadow: 0 0 0 1px rgba(0,240,255,.3), 0 0 22px rgba(0,240,255,.35); }
  50%{ box-shadow: 0 0 0 1px rgba(255,107,0,.35), 0 0 30px rgba(255,107,0,.4); }
}
.school-card.blurred-card .school-city,
.school-card.blurred-card h3{
  user-select: none;
}
.school-card.revealed .school-inner{
  filter: blur(0) saturate(1);
  opacity:1;
  animation: none;
  box-shadow: none;
}
.school-card.just-revealed .school-inner{
  animation: revealPop .7s ease;
}
@keyframes revealPop{
  0%{ transform: scale(.9); box-shadow: 0 0 0 1px rgba(0,240,255,.6), 0 0 40px rgba(0,240,255,.6); }
  60%{ transform: scale(1.04); }
  100%{ transform: scale(1); box-shadow: 0 0 0 1px rgba(255,107,0,.35), 0 0 26px rgba(255,107,0,.25); }
}

#revealSchoolsWrap{
  transition: opacity .5s ease, transform .5s ease, max-height .5s ease;
  overflow:hidden;
}
#revealSchoolsWrap.hidden-away{
  opacity:0; transform: translateY(-8px); max-height:0; pointer-events:none;
}

/* ---------- Back to top ---------- */
#backToTop{
  position:fixed; bottom:22px; left:22px; z-index:40;
  width:46px; height:46px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(15,21,38,.85);
  border:1px solid rgba(0,240,255,.35);
  color:#00F0FF;
  opacity:0; transform: translateY(14px) scale(.9);
  pointer-events:none;
  transition: opacity .35s ease, transform .35s ease, box-shadow .3s ease;
  backdrop-filter: blur(8px);
}
#backToTop.show{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
#backToTop:hover{ box-shadow: 0 0 22px rgba(0,240,255,.45); }


/* ---------- Schools: فقط ردیف اول کارت‌های مخفی نمایش داده شود ---------- */
#schoolsGrid .school-card.blurred-card{ display:none; }

/* موبایل (۲ ستون): ۱۰ + ۲ = ۱۲ → ردیف‌های کامل */
#schoolsGrid .school-card.blurred-card:nth-child(11),
#schoolsGrid .school-card.blurred-card:nth-child(12){ display:block; }

/* دسکتاپ (۵ ستون): ۱۰ + ۵ = ۱۵ → ۳ ردیف کامل */
@media (min-width:1024px){
  #schoolsGrid .school-card.blurred-card:nth-child(13),
  #schoolsGrid .school-card.blurred-card:nth-child(14),
  #schoolsGrid .school-card.blurred-card:nth-child(15){ display:block; }
}


  /* ---------- Benefits section ---------- */
  .benefit-card{
    position: relative;
    overflow: hidden;
    transition: transform .4s cubic-bezier(.16,.9,.3,1), box-shadow .4s ease, border-color .4s ease;
  }
  .benefit-card::before{
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(120% 100% at 50% 0%, rgba(0,240,255,.1), transparent 65%);
    opacity:0; transition: opacity .4s ease;
    pointer-events:none;
  }
  .benefit-card.orange::before{
    background: radial-gradient(120% 100% at 50% 0%, rgba(255,107,0,.12), transparent 65%);
  }
  .benefit-card:hover{
    transform: translateY(-8px);
    border-color: rgba(0,240,255,.45) !important;
    box-shadow: 0 0 0 1px rgba(0,240,255,.35), 0 0 30px rgba(0,240,255,.22);
  }
  .benefit-card.orange:hover{
    border-color: rgba(255,107,0,.5) !important;
    box-shadow: 0 0 0 1px rgba(255,107,0,.35), 0 0 30px rgba(255,107,0,.25);
  }
  .benefit-card:hover::before{ opacity:1; }

  .benefit-icon{
    width: 3.5rem; height: 3.5rem;
    border-radius: 1rem;
    display:flex; align-items:center; justify-content:center;
    font-size: 1.6rem;
    background: rgba(0,240,255,.08);
    border:1px solid rgba(0,240,255,.3);
    box-shadow: 0 0 20px rgba(0,240,255,.15);
    transition: transform .4s ease, box-shadow .4s ease;
  }
  .benefit-card.orange .benefit-icon{
    background: rgba(255,107,0,.08);
    border-color: rgba(255,107,0,.32);
    box-shadow: 0 0 20px rgba(255,107,0,.18);
  }
  .benefit-card:hover .benefit-icon{
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 0 32px rgba(0,240,255,.4);
  }
  .benefit-card.orange:hover .benefit-icon{
    box-shadow: 0 0 32px rgba(255,107,0,.45);
  }

  .benefit-big{
    grid-column: span 2;
  }
  @media (max-width:768px){
    .benefit-big{ grid-column: span 1; }
  }

  .benefit-badge{
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:.7rem; font-weight:700;
    padding:.25rem .6rem;
    border-radius:9999px;
    background: rgba(0,240,255,.1);
    border:1px solid rgba(0,240,255,.3);
    color:#00F0FF;
  }
  .benefit-card.orange .benefit-badge{
    background: rgba(255,107,0,.1);
    border-color: rgba(255,107,0,.35);
    color:#FF6B00;
  }


  /* ==================== THEME VARIABLES ==================== */
:root{
    --t-bg: #0B0F19;
    --t-surface: #0F1526;
    --t-ink: #E8ECF5;
    --t-muted: #8B95AF;
    --t-cyan: #00F0FF;
    --t-orange: #FF6B00;
    --t-border: rgba(255,255,255,0.08);
    --t-border-strong: rgba(255,255,255,0.15);
    --t-nav-bg: rgba(11,15,25,0.75);
    --grid: rgba(0,240,255,0.07);
  }
  
  [data-theme="light"]{
    --t-bg: #F2F4FA;
    --t-surface: #FFFFFF;
    --t-ink: #1A2238;
    --t-muted: #5F6880;
    --t-cyan: #00A5B8;
    --t-orange: #E85D00;
    --t-border: rgba(20,30,60,0.10);
    --t-border-strong: rgba(20,30,60,0.16);
    --t-nav-bg: rgba(242,244,250,0.85);
    --grid: rgba(0,140,160,0.10);
  }
  
  /* ---------- Light theme overrides ---------- */
  [data-theme="light"] body{
    background: var(--t-bg);
    color: var(--t-ink);
  }
  
  [data-theme="light"] .cursor-glow{
    background: radial-gradient(circle, rgba(0,180,200,0.08) 0%, rgba(255,140,60,0.04) 40%, transparent 70%);
  }
  
  [data-theme="light"] .orb-cyan{
    background: radial-gradient(circle, rgba(0,180,200,.32), transparent 70%);
  }
  [data-theme="light"] .orb-orange{
    background: radial-gradient(circle, rgba(255,140,60,.32), transparent 70%);
  }
  [data-theme="light"] .orb{ opacity:.25; }
  
  /* --- Text colors --- */
  [data-theme="light"] .text-ink{ color:#1A2238 !important; }
  [data-theme="light"] .text-muted{ color:#5F6880 !important; }
  [data-theme="light"] .text-cyan{ color:#00A5B8 !important; }
  [data-theme="light"] .text-orange{ color:#E85D00 !important; }
  
  /* --- Softer glows for light bg --- */
  [data-theme="light"] .glow-cyan-text{
    text-shadow: 0 1px 2px rgba(0,150,170,.15);
  }
  [data-theme="light"] .glow-orange-text{
    text-shadow: 0 1px 2px rgba(200,90,0,.15);
  }
  [data-theme="light"] .glow-cyan-box{
    box-shadow: 0 0 0 1px rgba(0,150,170,.2), 0 6px 18px rgba(0,150,170,.08);
  }
  [data-theme="light"] .glow-orange-box{
    box-shadow: 0 0 0 1px rgba(200,90,0,.2), 0 6px 18px rgba(200,90,0,.08);
  }
  
  /* --- Glass panels --- */
  /*[data-theme="light"] .glass{*/
  /*  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));*/
  /*  border-color: var(--t-border);*/
  /*  box-shadow: 0 1px 2px rgba(40,50,80,.04), 0 4px 12px rgba(40,50,80,.03);*/
  /*}*/
  
  /* --- Navbar --- */
  [data-theme="light"] #navbar.scrolled{
    background: var(--t-nav-bg);
    border-color: rgba(0,150,170,.2);
    box-shadow: 0 8px 30px rgba(40,50,80,.08);
  }
  [data-theme="light"] .nav-link{ color:#5F6880; }
  [data-theme="light"] .nav-link:hover{ color:#1A2238; }
  
  /* --- Countdown flip box --- */
  [data-theme="light"] .flip-box{
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF2FA 100%);
    border-color: rgba(0,150,170,.25);
  }
  [data-theme="light"] .flip-box.glow-orange-box{
    border-color: rgba(200,90,0,.25);
  }
  
  /* --- Timeline --- */
  [data-theme="light"] .timeline-dot{
    box-shadow: 0 0 0 4px var(--t-bg), 0 0 16px rgba(0,150,170,.5);
  }
  
  /* --- Accordion --- */
  [data-theme="light"] .acc-item.open{
    border-color: rgba(0,150,170,.35);
    box-shadow: 0 0 20px rgba(0,150,170,.1);
  }
  [data-theme="light"] .acc-item.open .acc-head{ color:#00A5B8; }
  [data-theme="light"] .acc-item.open .acc-chev{ color:#00A5B8; }
  
  /* --- Form fields --- */
  [data-theme="light"] .field input,
  [data-theme="light"] .field select{
    background: rgba(255,255,255,0.9);
    border-color: var(--t-border-strong);
    color:#1A2238;
  }
  [data-theme="light"] .field label{ color:#5F6880; }
  
  /* --- Borders that were border-white/* --- */
  [data-theme="light"] [class*="border-white/"]{
    border-color: rgba(20,30,60,0.12) !important;
  }
  
  /* --- Footer --- */
  [data-theme="light"] footer{
    border-color: rgba(20,30,60,0.08);
  }
  [data-theme="light"] footer .marquee-track span{
    color: rgba(26,34,56,0.55);
  }
  
  /* --- Back to top --- */
  [data-theme="light"] #backToTop{
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,150,170,.35);
    color:#00A5B8;
  }
  [data-theme="light"] #backToTop:hover{
    box-shadow: 0 0 22px rgba(0,150,170,.35);
  }
  
  /* --- Tom Select --- */
  [data-theme="light"] .ts-wrapper .ts-control{
    background: rgba(255,255,255,0.9) !important;
    border-color: var(--t-border-strong) !important;
    color:#1A2238 !important;
  }
  [data-theme="light"] .ts-wrapper .ts-control input{
    color:#1A2238 !important;
  }
  [data-theme="light"] .ts-dropdown{
    background:#FFFFFF !important;
    border-color: rgba(0,150,170,.25) !important;
    color:#1A2238 !important;
  }
  [data-theme="light"] .ts-dropdown .option{ color:#1A2238 !important; }
  [data-theme="light"] .ts-dropdown .option:hover,
  [data-theme="light"] .ts-dropdown .option.active{
    background: rgba(0,150,170,.08) !important;
    color:#00A5B8 !important;
  }
  
  /* --- Benefits section --- */
  [data-theme="light"] .benefit-card:hover{
    border-color: rgba(0,150,170,.4) !important;
    box-shadow: 0 10px 30px rgba(0,150,170,.1);
  }
  [data-theme="light"] .benefit-card.orange:hover{
    border-color: rgba(200,90,0,.4) !important;
    box-shadow: 0 10px 30px rgba(200,90,0,.1);
  }
  [data-theme="light"] .benefit-icon{
    background: rgba(0,150,170,.08);
    border-color: rgba(0,150,170,.3);
    box-shadow: 0 0 20px rgba(0,150,170,.1);
  }
  [data-theme="light"] .benefit-card.orange .benefit-icon{
    background: rgba(200,90,0,.08);
    border-color: rgba(200,90,0,.3);
    box-shadow: 0 0 20px rgba(200,90,0,.1);
  }
  [data-theme="light"] .benefit-badge{
    background: rgba(0,150,170,.08);
    border-color: rgba(0,150,170,.3);
    color:#00A5B8;
  }
  [data-theme="light"] .benefit-card.orange .benefit-badge{
    background: rgba(200,90,0,.08);
    border-color: rgba(200,90,0,.3);
    color:#E85D00;
  }
  
  /* --- School cards --- */
  [data-theme="light"] .school-city{ color:#5F6880; }
  [data-theme="light"] .school-card.blurred-card .school-inner{
    animation: haloPulseLight 3.6s ease-in-out infinite;
  }
  @keyframes haloPulseLight{
    0%,100%{ box-shadow: 0 0 0 1px rgba(0,150,170,.3), 0 0 22px rgba(0,150,170,.25); }
    50%{ box-shadow: 0 0 0 1px rgba(200,90,0,.3), 0 0 30px rgba(200,90,0,.3); }
  }
  
  /* --- Theme toggle button --- */
  .theme-toggle{
    width: 42px; height: 42px;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--t-border-strong);
    background: rgba(255,255,255,0.03);
    color: var(--t-ink);
    cursor: pointer;
    transition: all .3s ease;
    flex-shrink: 0;
  }
  [data-theme="light"] .theme-toggle{
    background: rgba(255,255,255,0.85);
  }
  .theme-toggle:hover{
    border-color: var(--t-cyan);
    color: var(--t-cyan);
    box-shadow: 0 0 20px rgba(0,240,255,.25);
    transform: translateY(-1px);
  }
  [data-theme="light"] .theme-toggle:hover{
    box-shadow: 0 0 20px rgba(0,150,170,.3);
  }
  .theme-toggle .icon-sun{ display: block; }
  .theme-toggle .icon-moon{ display: none; }
  [data-theme="light"] .theme-toggle .icon-sun{ display: none; }
  [data-theme="light"] .theme-toggle .icon-moon{ display: block; }
  
  
  /* ==================== PREMIUM REGISTRATION FORM ==================== */
.glass-panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0,240,255,.2);
  box-shadow: 0 0 0 1px rgba(0,240,255,.1), 0 20px 50px rgba(0,0,0,.4);
}

.form-input{
  width: 100%;
  border-radius: .75rem;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.15);
  padding: .75rem 1rem;
  font-size: .875rem;
  color: #fff;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.form-input::placeholder{ color: #64748b; }
.form-input:focus{
  outline: none;
  border-color: #00F0FF;
  box-shadow: 0 0 0 3px rgba(0,240,255,.15);
}
.form-input:disabled{
  opacity: .4;
  cursor: not-allowed;
}

.form-label{
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: .5rem;
}
.form-label .req{ color: #f87171; }

/* --- Toggle option buttons (league / level) --- */
.opt-btn{
  padding: .75rem;
  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.3);
  color: #94a3b8;
  text-align: right;
  transition: all .25s ease;
  cursor: pointer;
  width: 100%;
}
.opt-btn:hover{
  color: #e2e8f0;
  border-color: rgba(255,255,255,.3);
}
.opt-btn.active{
  border-color: #FF6B00;
  background: rgba(255,107,0,.18);
  color: #fff;
  box-shadow: 0 4px 20px rgba(255,107,0,.2);
}
.opt-btn[data-variant="cyan"].active{
  border-color: #00F0FF;
  background: rgba(0,240,255,.15);
  color: #7CF7FF;
  box-shadow: 0 4px 20px rgba(0,240,255,.2);
}
.opt-btn .opt-title{
  font-weight: 700;
  font-size: .8rem;
}
.opt-btn .opt-sub{
  font-size: .65rem;
  color: #94a3b8;
  margin-top: .25rem;
}
/*.opt-btn.active .opt-sub{ color: rgba(255,255,255,.7); }*/

/* --- Level pill buttons --- */
.level-btn{
  padding: .75rem .5rem;
  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.2);
  color: #94a3b8;
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
}
.level-btn:hover{ color: #fff; border-color: rgba(255,255,255,.3); }
.level-btn.active{
  border-color: #00F0FF;
  background: rgba(0,240,255,.15);
  color: #7CF7FF;
}

/* --- Submit button --- */
.btn-cyber-primary{
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #00F0FF, #00b8c4);
  color: #04121a;
  font-weight: 700;
  transition: transform .25s ease, box-shadow .3s ease;
}
.btn-cyber-primary::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #FF6B00, #00F0FF);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}
.btn-cyber-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(0,240,255,.4);
}
.btn-cyber-primary:hover::before{ opacity: 1; }
.btn-cyber-primary:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* --- Light theme adjustments --- */
[data-theme="light"] .glass-panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
  border-color: rgba(0,150,170,.25);
  box-shadow: 0 0 0 1px rgba(0,150,170,.1), 0 20px 50px rgba(40,50,80,.08);
}
[data-theme="light"] .form-input{
  background: rgba(255,255,255,.9);
  border-color: rgba(20,30,60,.15);
  color: #1A2238;
}
[data-theme="light"] .form-label{ color: #475569; }
[data-theme="light"] .opt-btn{
  background: rgba(255,255,255,.8);
  border-color: rgba(20,30,60,.12);
  color: #64748b;
}
[data-theme="light"] .level-btn{
  background: rgba(255,255,255,.6);
  border-color: rgba(20,30,60,.12);
}