/* ==========================================================================
   Mainstream — Dark Neon Theme (cleaned)
   ========================================================================== */

/* ---------- Root tokens ---------- */
:root{
  --bg-100:#0b0f16; --bg-200:#0e1320; --bg-300:#12192a;
  --card:#121725;
  --border:rgba(255,255,255,.10);
  --shadow:0 18px 35px rgba(0,0,0,.45);

  --radius-xl:22px; --radius-lg:16px; --radius-md:12px;

  --text-100:#f7f9fc; --text-90:rgba(247,249,252,.90);
  --text-80:rgba(247,249,252,.80); --text-60:rgba(247,249,252,.60);
  --muted:#97a3b6;

  --brand-a:#7aa8ff; --brand-b:#73f7d1; --brand-c:#ffd86b;
  --brand-d:#ff9ccb; --brand-e:#a78bfa; --brand-f:#4cc2ff; --brand-g:#8ae39c;

  --grad-cta: linear-gradient(135deg, var(--brand-f), var(--brand-d));
  --grad-cta-hover: linear-gradient(135deg, #7fd6ff, #ffb0d8);

  --bg-gradient:
    radial-gradient(800px 480px at 85% -10%, rgba(122,168,255,.22), transparent 60%),
    radial-gradient(900px 520px at -15% 20%, rgba(255,152,203,.16), transparent 60%),
    radial-gradient(700px 420px at 60% 110%, rgba(138,227,156,.12), transparent 60%);

  /* legacy aliases */
  --ink: var(--bg-100);
  --bg: var(--text-100);
  --line: var(--border);
  --ring: var(--brand-f);

  /* icon spectrum */
  --c1:#f97316; --c2:#f59e0b; --c3:#84cc16; --c4:#10b981;
  --c5:#06b6d4; --c6:#3b82f6; --c7:#8b5cf6; --c8:#ec4899;

  /* layout */
  --topbar-h: 64px; /* updated by JS */
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
html, body { max-width:100%; overflow-x:hidden }             /* clamp horizontal overflow */

body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Arial","Noto Sans",sans-serif;
  background: linear-gradient(180deg,var(--bg-100),var(--bg-200)), var(--bg-gradient);
  color:var(--text-100);
  padding-top: var(--topbar-h);                               /* space for fixed header */
}

img{ max-width:100%; height:auto; display:block }
a{ color:var(--brand-a); text-decoration:none }
a:hover{ color:#a7c4ff }
.muted{ color:var(--muted) }
small.muted{ font-size:.85em }

/* ---------- Typography ---------- */
:root{
  --font-display:"Ubuntu",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html, body{ font-family:var(--font-body) }
h1,h2,h3,h4,.display,.cs-title{ font-family:var(--font-display) }
.display,.cs-title{ font-weight:700; letter-spacing:.01em; line-height:1.15 }
h2{ font-size:28px; margin:0 0 18px }

/* ---------- Layout ---------- */
.container{ width:min(1100px,100%); margin:0 auto; padding:0 12px } /* safer than vw */
section{ padding:78px 0 }

.grid-2,.grid-3{
  display:grid; gap:18px; align-items:stretch; justify-items:stretch
}
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) } /* was 320px */
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.row  { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); align-items:start }

/* ---------- Topbar (fixed) ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:999;
  margin:0;
  backdrop-filter:saturate(120%) blur(10px);
  background:rgba(12,16,26,.70);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.topbar .container{ width:min(1100px,100%); margin:0 auto }
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px }
.logo{ display:flex; align-items:center; gap:8px; font-weight:800 }
.logo img{ height:50px; width:auto; display:block }
.logo small{ font-size:.8rem; margin-left:6px }
.nav-links{ display:flex; gap:18px; align-items:center }
.nav-links a{ color:var(--text-90); font-weight:600 }
.nav-links a:hover{ color:var(--text-100) }
.menu-btn{
  display:none; padding:8px 12px; border-radius:10px; background:transparent;
  color:var(--text-100); border:1px solid var(--line)
}

/* Mobile menu fixed below bar; prevent width-jank */
.mobile-menu{
  position:fixed; left:0; right:0; top:var(--topbar-h);
  display:none; padding:10px 0;
  background:rgba(10,14,22,.90);
  border-top:1px solid var(--line);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  overflow-x:hidden;
}
.mobile-menu.open{ display:block }
@media (max-width:900px){
  .nav-links{ display:none }
  .menu-btn{ display:inline-flex; align-items:center; gap:8px }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:56px 0; border-bottom:1px solid var(--border);
  overflow:clip;                                              /* keep orb from widening page */
}
.hero .orb{
  position:absolute; inset:auto; width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,216,107,.25),
              rgba(255,156,203,.18) 40%, rgba(115,247,209,.18) 65%, transparent 70%);
  filter: blur(24px); opacity:.6; right:-140px; top:-120px;
  animation:hueShift 16s linear infinite;
}
@keyframes hueShift { 0%{filter:hue-rotate(0)} 100%{filter:hue-rotate(360deg)} }
.hero-grid{ position:relative; display:grid; gap:18px; grid-template-columns:1fr 420px; align-items:start }
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr }
  .hero .orb{ right:-40px; max-width:380px }
}
@media (min-width:961px){
  .hero .orb{ right:-80px; max-width:480px }
}

.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  font-weight:700; color:var(--text-90);
  background:linear-gradient(135deg, rgba(122,168,255,.18), rgba(255,156,203,.18));
  border:1px solid var(--line);
}
.display{
  font-size:clamp(28px,4.2vw,44px); margin:10px 0 12px;
  background:linear-gradient(90deg, var(--brand-a), var(--brand-e), var(--brand-d));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{ font-size:1.08rem; color:var(--text-90) }

.stats{ display:flex; gap:20px; margin-top:16px; flex-wrap:wrap }
.stat{
  background:linear-gradient(180deg, rgba(18,23,37,.9), rgba(20,28,46,.9));
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; box-shadow:var(--shadow);
  position:relative; overflow:hidden; min-width:180px;
}
.stat::after{
  content:''; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(122,168,255,.25), transparent 60%);
  filter: blur(14px);
}
.stat .big{ font-weight:900; font-size:1.2rem }
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 6px }

/* ---------- Buttons ---------- */
.btn,.btn-ghost{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  border-radius:14px; font-weight:800; cursor:pointer; text-decoration:none;
}
.btn{
  background:var(--grad-cta); color:#0b1020; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(124,196,255,.18);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{ background:var(--grad-cta-hover); transform:translateY(-2px) }
.btn-ghost{ background:transparent; color:var(--text-100); border:1px solid var(--line) }
.btn-ghost:hover{ background:rgba(255,255,255,.06); transform:translateY(-1px) }

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(180deg, rgba(17,23,39,.96), rgba(16,20,34,.96));
  border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:18px; box-shadow:var(--shadow);
  position:relative; overflow:hidden; display:flex; flex-direction:column; height:100%;
}
.card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--brand-a), var(--brand-c), var(--brand-d), var(--brand-g));
  filter:saturate(130%);
}
.card:hover{ transform:translateY(-2px); transition:transform .16s ease }
.card-dark{
  background:linear-gradient(180deg,#111728,#10182b);
  color:var(--text-100); border-color:var(--border); box-shadow:var(--shadow);
}
.card-dark .muted{ color:var(--muted) }

/* ---------- Lists & chips ---------- */
.clean{ list-style:none; margin:0; padding:0 }
.li{ display:grid; grid-template-columns:auto 1fr; gap:12px; padding:10px 0; border-top:1px dashed var(--line) }
.li:first-child{ border-top:none }
.li i{ margin-top:3px; color:var(--brand-a) }

.chip{
  display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px;
  border:1px dashed var(--line);
  background:linear-gradient(135deg, rgba(122,168,255,.12), rgba(255,216,107,.10));
  color:var(--text-90); font-weight:600;
}

/* ---------- Link cards ---------- */
.link-card{
  grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  color:inherit; text-decoration:none; margin-bottom:6px;
}
.link-top{ font-size:1.25rem; color:var(--text-100) }
.link-cta{ opacity:.6 }
.card.link-card:hover .link-cta{ opacity:1; transform:translateX(2px) }

/* ---------- Forms ---------- */
.form label{ display:block; font-weight:700; margin-bottom:6px; color:var(--text-90) }
.form input,.form textarea{
  width:100%; padding:12px; border-radius:14px; border:1px solid var(--line);
  background:#0f1524; color:var(--text-100); outline:0;
}
.form input:focus,.form textarea:focus{
  border-color:rgba(122,168,255,.5); box-shadow:0 0 0 3px rgba(122,168,255,.15)
}
.form textarea{ min-height:140px; resize:vertical }
.help{ font-size:.85rem; color:var(--muted); margin-top:6px }

/* ---------- Partners ---------- */
.partners-band{
  background:#0f172a; padding:28px 0; margin-top:5px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.partners-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px }
.partners-head h2{ margin:0; font-size:1.1rem; color:var(--text-100) }
.partners-note{ color:var(--muted); font-size:.95rem }
.logos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:16px; align-items:stretch;
}
.logo-tile{
  background:#111827; border:1px solid var(--line); border-radius:12px; padding:12px;
  display:flex; align-items:center; justify-content:center; height:72px; box-shadow:var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.logo-tile img{ max-height:40px; width:auto; display:block; opacity:.9 }
.logo-tile:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(17,24,39,.35) }
.logo-tile:hover img{ opacity:1 }

/* ---------- Footer ---------- */
.footer{
  padding:24px 0; background:#000; color:var(--muted);
  margin-top:20px; text-align:center;
}
.footer .row{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap }
.footer .row>*{ text-align:center }
@media (max-width:720px){ .footer .row{ flex-direction:column } }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(17,24,39,.55); opacity:0; pointer-events:none; transition:.2s; z-index:9999; backdrop-filter:blur(2px);
}
.modal-overlay.show{ opacity:1; pointer-events:auto }
.modal-card{
  width:min(92vw,560px); background:linear-gradient(180deg,#0f1422,#10182b);
  color:#fff; border-radius:18px; border:1px solid var(--line); padding:22px;
  box-shadow:0 10px 40px rgba(0,0,0,.5); position:relative;
}
.modal-card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--brand-a), var(--brand-d));
}
.modal-close{ float:right; border:0; background:transparent; color:var(--text-60); font-size:22px; line-height:1; cursor:pointer }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px }

/* ---------- Back to top ---------- */
.backtotop{
  position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-f); color:#0b1020; border:none; cursor:pointer;
  box-shadow:0 10px 30px rgba(2,6,23,.35);
  opacity:0; transform:translateY(12px); pointer-events:none; transition:.2s;
  z-index:2000;                                             /* raise above content */
}
.backtotop.show{ opacity:1; transform:none; pointer-events:auto }
.backtotop:focus{ outline:0; box-shadow:0 0 0 4px rgba(14,165,233,.25), 0 10px 30px rgba(2,6,23,.35) }
.backtotop i{ font-size:16px }
@media (max-width:480px){
  .backtotop{ width:52px; height:52px; right:14px; bottom:14px }
  .backtotop i{ font-size:18px }
}

/* ---------- Timeline ---------- */
.timeline{ --h:68px; --radius:18px; --space:26px; position:relative; padding:28px 0 18px }
.timeline .ribbon{
  height:var(--h); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line);
  display:flex; overflow:hidden;                               /* prevent n×width overflow */
}
.timeline .ribbon .seg{ flex:1 1 0; min-width:0 }
.ribbon .seg:nth-child(8n+1){ background:linear-gradient(90deg,var(--brand-a),#9ac0ff) }
.ribbon .seg:nth-child(8n+2){ background:linear-gradient(90deg,var(--brand-b),#a5ffe6) }
.ribbon .seg:nth-child(8n+3){ background:linear-gradient(90deg,var(--brand-c),#ffeaa6) }
.ribbon .seg:nth-child(8n+4){ background:linear-gradient(90deg,var(--brand-d),#ffb0d8) }
.ribbon .seg:nth-child(8n+5){ background:linear-gradient(90deg,var(--brand-e),#c8b0ff) }
.ribbon .seg:nth-child(8n+6){ background:linear-gradient(90deg,var(--brand-f),#7fd6ff) }
.ribbon .seg:nth-child(8n+7){ background:linear-gradient(90deg,var(--brand-g),#b9f2c4) }
.ribbon .seg:nth-child(8n+8){ background:linear-gradient(90deg,#ec4899,#ff8bc6) }
.seg .year{
  height:100%; display:flex; align-items:center; justify-content:center; font-weight:800;
  letter-spacing:.02em; color:#0c1220; text-shadow:0 1px 10px rgba(255,255,255,.25);
  font-size:clamp(16px,2.6vw,20px);
}
.timeline .items{ margin-top:var(--space); display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px }

.m-card{
  background:linear-gradient(180deg, rgba(17,23,39,.96), rgba(16,20,34,.96));
  border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:auto 1fr; gap:12px; height:100%;
}
.m-card .ico{
  width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:#0c1220; font-size:16px; box-shadow:0 8px 20px rgba(0,0,0,.12);
  background:linear-gradient(135deg, var(--brand-a), var(--brand-d));
}
.m-card .ttl{ font-weight:700; margin:0 0 2px; color:var(--text-100) }
.m-card .meta{ font-size:.86rem; color:var(--muted); margin:0 0 4px }
.m-card .txt{ font-size:.95rem; margin:0; color:var(--text-90) }
.m-card .tags{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; padding:0; list-style:none }
.m-card .tags li{
  font-size:.72rem; line-height:1; padding:.34rem .5rem; border:1px dashed var(--line);
  border-radius:999px; color:var(--text-90);
  background:linear-gradient(135deg, rgba(122,168,255,.12), rgba(255,216,107,.10));
}
.m-card:nth-child(8n+1) .ico{ background:var(--c1); color:#fff }
.m-card:nth-child(8n+2) .ico{ background:var(--c2); color:#0c1220 }
.m-card:nth-child(8n+3) .ico{ background:var(--c3); color:#0c1220 }
.m-card:nth-child(8n+4) .ico{ background:var(--c4); color:#0c1220 }
.m-card:nth-child(8n+5) .ico{ background:var(--c5); color:#0c1220 }
.m-card:nth-child(8n+6) .ico{ background:var(--c6); color:#0c1220 }
.m-card:nth-child(8n+7) .ico{ background:var(--c7); color:#fff }
.m-card:nth-child(8n+8) .ico{ background:var(--c8); color:#fff }

#milestones .card{ background:transparent; border:none; box-shadow:none; padding:0 }
#milestones h2{ margin-bottom:16px }

/* ---------- Scrollbar (WebKit) ---------- */
body::-webkit-scrollbar{ width:10px }
body::-webkit-scrollbar-track{ background:var(--bg-200) }
body::-webkit-scrollbar-thumb{ background:var(--brand-a); border-radius:6px }
body::-webkit-scrollbar-thumb:hover{ background:var(--brand-d) }

/* ---------- Motion reduce ---------- */
@media (prefers-reduced-motion:reduce){
  .hero .orb{ animation:none }
  .btn,.card,.stat{ transition:none }
}

/* ---------- Extra safety for absolutely-positioned children ---------- */
section, header, footer{ overflow-x:clip }

/* Back-to-top bubble */
.backtotop{
  position: fixed; right: 18px; bottom: 18px;
  width: 52px; height: 52px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-f, #4cc2ff); color: #0b1020; border: 0; cursor: pointer;
  box-shadow: 0 10px 30px rgba(2,6,23,.35);
  z-index: 5000; /* below modal(9999), above content */
  opacity: 0; transform: translateY(12px);
  transition: opacity .2s, transform .2s;
  pointer-events: none; /* avoid tab focus when hidden */
}
.backtotop.show{ opacity: 1; transform: none; pointer-events: auto; }
.backtotop:focus{ outline:0; box-shadow:0 0 0 4px rgba(14,165,233,.25), 0 10px 30px rgba(2,6,23,.35) }
.backtotop i{ font-size: 18px; }

/* (Optional) if FA isn’t loading, the button will still show with text */
.backtotop:empty::before{ content: "▲"; font-weight: 700; }