:root{
  --bg:#0b1220;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --line:rgba(255,255,255,.10);
  --glass:rgba(15,25,40,.72);
  --glass2:rgba(15,25,40,.58);
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* Mesh behind everything */
#mesh{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
  pointer-events:none;
  opacity:.75;
}

/* Foreground app */
.page{position:relative;z-index:1;min-height:100vh;}

/* Containers */
.container{width:min(1120px,calc(100% - 32px));margin:0 auto;}
.stack{padding:26px 0 40px;}
.main{padding-top:18px;}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(10px);
  background:rgba(10,16,28,.62);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);}

.brand-logo{
  width:48px;
  height:48px;
  object-fit:contain;
  display:block;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.brand-mark{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  font-weight:700;
}

.brand-name{font-weight:700;letter-spacing:.25px;}
.brand-tag{
  margin-left:10px;
  font-size:11px;
  letter-spacing:.6px;
  text-transform:uppercase;
  opacity:.75;
}

.nav{display:flex;gap:18px;align-items:center;}
.nav a{color:var(--muted);text-decoration:none;font-size:14px;}
.nav a:hover{color:var(--text);}

.nav-cta{
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:var(--text)!important;
}
.nav-cta:hover{background:rgba(255,255,255,.14);}

/* Ticker */
.ticker{border-bottom:1px solid var(--line);background:rgba(10,16,28,.25);}
.ticker-inner{display:flex;align-items:center;gap:14px;padding:12px 0;}
.ticker-label{
  font-size:12px;
  letter-spacing:1px;
  color:var(--muted);
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  white-space:nowrap;
}
.ticker-viewport{overflow:hidden;flex:1;}
.ticker-viewport:hover .ticker-track,
.ticker-viewport:focus-within .ticker-track{animation-play-state:paused;}

.ticker-track{
  display:inline-flex;
  align-items:center;
  gap:22px;
  white-space:nowrap;
  will-change:transform;
  animation:tickerMove var(--tickerDur,26s) linear infinite;
}
.ticker-item{font-size:13px;color:rgba(255,255,255,.82);}
.ticker-dot{opacity:.45;}

@keyframes tickerMove{
  0%{transform:translateX(0);}
  100%{transform:translateX(calc(-1 * var(--tickerShift, 800px)));}
}

/* Panels */
.panel{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  backdrop-filter:blur(6px);
}
.panel + .panel{margin-top:18px;}

.panel h2{margin:0 0 10px;font-size:18px;letter-spacing:.2px;}
.muted{color:var(--muted);}
.tiny{font-size:12px;}

/* Hero */
.hero{padding:28px;}
.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:22px;align-items:start;}
.hero h1{margin:0 0 10px;font-size:30px;line-height:1.15;}
.subhead{margin:0 0 16px;color:var(--muted);line-height:1.5;}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  text-decoration:none;
  font-size:14px;
  cursor:pointer;
}
.btn.primary{background:rgba(255,255,255,.10);color:var(--text);}
.btn.secondary{background:transparent;color:var(--text);}
.btn:hover{border-color:rgba(255,255,255,.18);}

.hero-note{margin-top:6px;font-size:12px;color:rgba(255,255,255,.65);}
.hero-side{display:flex;flex-direction:column;gap:10px;}

.stat{padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--glass2);}
.stat-k{font-size:12px;color:rgba(255,255,255,.65);margin-bottom:4px;}
.stat-v{font-size:13px;color:rgba(255,255,255,.88);}

/* Vision/Mission */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.bullets{margin:0;padding-left:18px;color:rgba(255,255,255,.85);}
.bullets li{margin:6px 0;}

/* Program flow */
.flow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 14px;color:rgba(255,255,255,.88);}
.arrow{opacity:.6;}

.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.phase{padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--glass2);}
.phase-k{font-size:12px;color:rgba(255,255,255,.65);}
.phase-v{font-size:13px;color:rgba(255,255,255,.88);margin-top:3px;}

/* Main 2-column */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;}

.cards{display:grid;grid-template-columns:1fr;gap:12px;}
.card{padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--glass2);}
.card-title{font-weight:600;margin-bottom:6px;}
.card-desc{font-size:13px;color:rgba(255,255,255,.78);line-height:1.45;}
.card a{color:rgba(255,255,255,.88);text-decoration:none;}
.card a:hover{text-decoration:underline;}

.news-list{display:flex;flex-direction:column;gap:10px;}
.news-item{display:flex;gap:12px;justify-content:space-between;align-items:baseline;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--glass2);}
.news-title{font-size:13px;color:rgba(255,255,255,.88);}
.news-date{font-size:12px;color:rgba(255,255,255,.65);white-space:nowrap;}

/* Join */
.join-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.join-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}

/* Footer */
.footer{margin-top:26px;border-top:1px solid var(--line);background:rgba(10,16,28,.35);backdrop-filter:blur(10px);}
.footer-inner{padding:16px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.footer-title{font-weight:600;}
.footer-sub{font-size:12px;color:rgba(255,255,255,.65);}
.footer-right{font-size:12px;color:rgba(255,255,255,.75);}
.footer-right a{color:rgba(255,255,255,.85);text-decoration:none;}
.footer-right a:hover{text-decoration:underline;}
.sep{margin:0 6px;opacity:.6;}

/* Responsive */
@media (max-width:920px){
  .brand-logo{width:38px;height:38px;}
  .brand-mark{width:38px;height:38px;}
  .hero-grid{grid-template-columns:1fr;}
  .phases{grid-template-columns:1fr 1fr;}
  .grid-2{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
  .join-actions{align-items:flex-start;}
  .nav{gap:12px;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none !important;}
}
/* Platform Highlights (lightweight homepage preview) */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.section-title{
  margin:0;
  font-size:18px;
  letter-spacing:.2px;
}
.section-subtitle{
  opacity:.65;
  font-size:13px;
  margin:0;
}

.highlights{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

@media (max-width: 900px){
  .highlights{ grid-template-columns: 1fr; }
}

.highlight-col{
  padding:14px 14px 10px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  background: rgba(255,255,255,0.03);
}

.highlight-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.highlight-title{
  font-weight:600;
  letter-spacing:.2px;
  opacity:.95;
}

.mini-link{
  font-size:13px;
  text-decoration:none;
  font-weight:500;
  color:#7dd3fc; /* soft cyan for visibility */
  opacity:.9;
  transition: all .2s ease;
}

.mini-link:hover{
  color:#a78bfa; /* subtle purple shift on hover */
  opacity:1;
}

.mini-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mini-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px;
  border-radius:12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}

.mini-main{
  font-size:14px;
  font-weight:500;
  opacity:.92;
}

.mini-meta{
  font-size:12px;
  opacity:.55;
  white-space:nowrap;
}

.auth-user{
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  margin-right: 10px;
  white-space: nowrap;
}