:root{
  --bg:#0b0f1a;
  --card:#0f1627;
  --soft:#18223a;
  --text:#e8eefc;
  --muted:#b6c2e2;
  --brand:#3ea6ff;
  --brand-2:#9b8cff;
  --radius:18px;
  --shadow:0 8px 30px rgba(0,0,0,.25);
  --header-bg:linear-gradient(180deg, rgba(11,15,26,.9), rgba(11,15,26,.65));
  --input-bg:#0d1322;
  --border:rgba(255,255,255,.08);
  --border-soft:rgba(255,255,255,.06);
  --hero-bg:radial-gradient(1200px 600px at 90% -10%, #173058 0%, #0b0f1a 60%), radial-gradient(1000px 600px at -10% 110%, #231b3f 0%, #0b0f1a 60%), var(--bg);
}

/* Light theme - multiple selectors for maximum mobile compatibility */
[data-theme="light"], 
.theme-light,
.light-theme,
html.light-theme,
body[data-theme="light"]{
  --bg:#ffffff;
  --card:#f8fafc;
  --soft:#f1f5f9;
  --text:#1e293b;
  --muted:#64748b;
  --brand:#0ea5e9;
  --brand-2:#8b5cf6;
  --shadow:0 8px 30px rgba(0,0,0,.1);
  --header-bg:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.8));
  --input-bg:#ffffff;
  --border:rgba(0,0,0,.08);
  --border-soft:rgba(0,0,0,.05);
  --hero-bg:radial-gradient(1200px 600px at 90% -10%, #e0f2fe 0%, #ffffff 60%), radial-gradient(1000px 600px at -10% 110%, #f3e8ff 0%, #ffffff 60%), var(--bg);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;}

/* Default to dark theme before JS loads */
html:not([data-theme]) {
  color-scheme: dark;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Color Emoji";
  color:var(--text);
  background:var(--hero-bg);
  line-height:1.6;
  transition:background-color 0.3s ease, color 0.3s ease;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(10px);
  background:var(--header-bg);
  border-bottom:1px solid var(--border-soft);
  transition:background-color 0.3s ease, border-color 0.3s ease;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center}
.logo{
  width:36px;height:36px;border-radius:12px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:var(--shadow);display:grid;place-items:center;font-weight:800
}
.logo span{color:#0b0f1a}
nav ul{display:flex;gap:18px;list-style:none;padding:0;margin:0}
nav a{font-weight:600;color:var(--text);opacity:.9;transition:opacity 0.3s ease}
nav a:hover{opacity:1}

/* Theme Toggle */
.theme-toggle{
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;transition:all 0.3s ease;
  user-select:none;
  touch-action:manipulation;
}
.theme-toggle:hover, .theme-toggle:active{
  background:var(--soft);transform:scale(1.05);
}
.theme-icon{
  font-size:18px;transition:transform 0.3s ease;
  pointer-events:none; /* Prevent event interference */
}
.theme-toggle:hover .theme-icon, .theme-toggle:active .theme-icon{
  transform:rotate(15deg);
}

/* Hero */
.hero{padding:84px 0 56px}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
.pill{
  display:inline-flex;gap:8px;align-items:center;padding:6px 12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  border-radius:999px;font-size:12px;color:var(--muted)
}
h1{font-size:44px;line-height:1.12;margin:14px 0}
.lead{color:var(--muted);font-size:18px}
.cta{display:flex;gap:12px;margin-top:18px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 18px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-weight:700;
  text-decoration:none;transition:all 0.3s ease;
}
.btn.primary{
  background:linear-gradient(180deg,var(--brand),#337be6);
  color:#ffffff;border:1px solid var(--brand);
}
.btn:hover{
  background:var(--soft);transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.btn.primary:hover{
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  transform:translateY(-1px);box-shadow:var(--shadow);
}
.hero-art{
  min-height:240px;border-radius:var(--radius);
  background:conic-gradient(from 180deg at 50% 50%, rgba(62,166,255,.2), rgba(155,140,255,.2), rgba(62,166,255,.2));
  border:1px dashed rgba(255,255,255,.2);display:grid;place-items:center;color:var(--muted)
}

/* Sections & cards */
section{padding:56px 0}
.section-title{font-size:28px;margin:0 0 18px}
.kicker{letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.card h3{margin:6px 0 8px}
.muted{color:var(--muted)}

/* People */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.person{
  background:var(--card);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);padding:14px;display:flex;gap:12px;align-items:center
}
.avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,#2b87ff66,#b06cff66);
  border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;color:var(--muted);font-weight:800
}

/* Champions */
.champions-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;
  margin-top:24px;
}
.champion-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:0;box-shadow:var(--shadow);
  transition:all 0.3s ease;overflow:hidden;
  display:flex;flex-direction:column;
}
.champion-card:hover{
  transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.2);
  border-color:var(--brand);
}
.champion-photo{
  width:100%;height:280px;overflow:hidden;
  background:var(--soft);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.champion-photo img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  transition:transform 0.3s ease;
  border-radius:8px;
}
.champion-card:hover .champion-photo img{
  transform:scale(1.05);
}
.champion-content{
  padding:24px;flex:1;display:flex;flex-direction:column;
}
.champion-content h3{
  margin:0 0 6px;font-size:22px;color:var(--text);
}
.champion-role{
  margin:0 0 14px;color:var(--brand);font-weight:600;font-size:14px;
}
.champion-bio{
  margin:0 0 18px;color:var(--muted);line-height:1.6;flex:1;
}
.champion-linkedin{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;background:var(--brand);color:#ffffff;
  border-radius:8px;text-decoration:none;font-weight:600;
  font-size:14px;transition:all 0.3s ease;width:fit-content;
}
.champion-linkedin:hover{
  background:var(--brand-2);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(62,166,255,.3);text-decoration:none;
}
.linkedin-icon{
  font-size:16px;transition:transform 0.3s ease;
}
.champion-linkedin:hover .linkedin-icon{
  transform:translateX(2px);
}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.imgph{
  aspect-ratio:4/3;border-radius:12px;
  background:linear-gradient(135deg, rgba(62,166,255,.2), rgba(155,140,255,.2));
  border:1px dashed rgba(255,255,255,.25);display:grid;place-items:center;color:var(--muted);font-size:14px
}

/* Contact */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
form{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
label{display:block;font-weight:600;margin:8px 0 6px}
input,textarea,select{
  width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);
  background:var(--input-bg);color:var(--text);
  transition:background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
textarea{min-height:120px}
.iframe-wrap{
  background:var(--card);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);padding:8px
}

/* Footer */
footer{padding:36px 0;border-top:1px solid rgba(255,255,255,.08);color:var(--muted)}
footer .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Mobile Theme Switcher - Always hidden on desktop */
.mobile-theme-switcher{
  display:none;
}

/* Responsive */
@media (max-width:980px){
  .hero .grid,.contact{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .people{grid-template-columns:1fr}
  .champions-grid{grid-template-columns:1fr}
  
  /* Mobile nav adjustments */
  .nav{flex-wrap:wrap;gap:10px}
  nav ul{gap:12px;flex-wrap:wrap}
  .theme-toggle{order:1;margin-left:auto}
}

@media (max-width:600px){
  h1{font-size:34px}
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .resource-grid{grid-template-columns:1fr}
  .resource-item{flex-direction:column;text-align:center}
  .resource-icon{align-self:center}
  .resource-category-toggle{padding:16px 20px}
  .resource-category-toggle h3{font-size:18px}
  .resource-category-content{padding:0 20px 20px}
  
  /* Hide desktop theme toggle on mobile */
  .theme-toggle{
    display:none !important;
  }
  
  /* Show mobile theme switcher */
  .mobile-theme-switcher{
    display:block;
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:9999;
  }
  
  .mobile-theme-button{
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--brand);
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 20px rgba(0,0,0,0.3);
    transition:all 0.3s ease;
    color:#ffffff;
  }
  
  .mobile-theme-button:hover, .mobile-theme-button:active{
    transform:scale(1.1);
    box-shadow:0 6px 25px rgba(0,0,0,0.4);
  }
  
  .mobile-theme-icon{
    font-size:24px;
  }
  
  /* Mobile nav layout - simplified */
  .nav{flex-direction:column;align-items:flex-start;padding:12px 0}
  .brand{margin-bottom:8px}
  nav{width:100%;display:flex;justify-content:center}
  nav ul{gap:8px;font-size:14px;flex-wrap:wrap;justify-content:center}
}

/* Logo & hero tweaks */
.logo-img{width:40px;height:auto;display:block}
.hero-art img{width:100%;max-width:600px;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 20px rgba(0,0,0,.25);display:block;margin:0 auto}

/* Carousel */
.carousel{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px;transition:background-color 0.3s ease, border-color 0.3s ease}
.carousel-viewport{overflow:hidden;border-radius:12px}
.carousel-track{display:flex;transition:transform .5s ease}
.carousel-slide{min-width:100%;display:grid;place-items:center}
.carousel-slide img{width:100%;height:auto;object-fit:cover;aspect-ratio:16/9;border-radius:10px}
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:var(--card);border:1px solid var(--border);
  border-radius:999px;width:40px;height:40px;display:grid;place-items:center;
  cursor:pointer;color:var(--text);transition:all 0.3s ease;
}
.carousel-btn:hover{
  background:var(--soft);transform:translateY(-50%) scale(1.1);
}
.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}

/* Resources */
.resource-category{margin-bottom:40px}
.resource-category-expandable{
  margin-bottom:24px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  overflow:hidden;
}
.resource-category-toggle{
  width:100%;padding:20px 24px;background:transparent;border:none;
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;color:var(--text);text-align:left;
  transition:background-color 0.3s ease;
}
.resource-category-toggle:hover{
  background:var(--soft);
}
.resource-category-toggle h3{
  margin:0;font-size:20px;color:var(--text);
}
.toggle-icon{
  font-size:14px;transition:transform 0.3s ease;
  color:var(--brand);font-weight:bold;
}
.resource-category-toggle[aria-expanded="true"] .toggle-icon{
  transform:rotate(180deg);
}
.resource-category-content{
  padding:0 24px 24px;animation:slideDown 0.3s ease;
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:translateY(0);}
}
.resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:20px}
.resource-item{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
  transition:all 0.3s ease;display:flex;gap:16px;align-items:flex-start;
}
.resource-item:hover{
  transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.2);
  border-color:var(--brand);
}
.resource-icon{
  font-size:24px;flex-shrink:0;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:var(--soft);border-radius:10px;
}
.resource-content{flex:1}
.resource-content h4{margin:0 0 8px;font-size:16px;color:var(--text)}
.resource-description{margin:0 0 12px;font-size:14px;color:var(--muted);line-height:1.5}
.resource-download{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;background:var(--brand);color:#ffffff;
  border-radius:8px;text-decoration:none;font-weight:600;
  font-size:14px;transition:all 0.3s ease;
}
.resource-download:hover{
  background:var(--brand-2);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(62,166,255,.3);text-decoration:none;
}
.download-icon{font-size:12px}

/* Contact layout */
.join-box{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}