:root{
  --bg:#0b0f17;
  --panel:#101827;
  --panel2:#0f1624;
  --text:#e6edf6;
  --muted:#a9b7cc;
  --line:#20304a;
  --brand:#6aa9ff;
  --brand2:#7cf1c2;
  --warn:#ffcc66;

  --shadow:0 10px 30px rgba(0,0,0,0.35);
  --radius:16px;
  --radius2:22px;

  --max:1100px;
  --pad:20px;
}

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

/* Keep the background spots fixed (no scrolling artifacts) */
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  line-height:1.55;
  background:var(--bg);
  overflow-x:hidden;
}

/* Fixed overlay with the teal/blue spots */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(106,169,255,0.25), transparent 55%),
    radial-gradient(900px 700px at 85% 25%, rgba(124,241,194,0.18), transparent 55%),
    var(--bg);
  background-repeat:no-repeat;
  transform:translateZ(0);
  will-change:transform;
  pointer-events:none;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(11,15,23,0.72);
  border-bottom:1px solid rgba(32,48,74,0.6);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:0.2px;
}

.logo{
  width:34px;
  height:34px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 30px rgba(106,169,255,0.25);
  display:grid;
  place-items:center;
  color:#091018;
  font-weight:900;
  font-size:16px;
}

nav ul{
  list-style:none;
  display:flex;
  gap:14px;
  padding:0;
  margin:0;
  align-items:center;
  flex-wrap:wrap;
}

.nav a.link{
  display:inline-flex;
  padding:8px 10px;
  border-radius:10px;
  color:var(--muted);
  border:1px solid transparent;
}

.nav a.link:hover{
  color:var(--text);
  border-color:rgba(106,169,255,0.35);
  background:rgba(16,24,39,0.6);
  text-decoration:none;
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(106,169,255,0.95),rgba(124,241,194,0.85));
  color:#071018;
  font-weight:800;
  border:0;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(106,169,255,0.18);
  white-space:nowrap;
}

.cta:hover{filter:brightness(1.03)}

main{padding:34px 0 70px}

.hero{
  display:grid;
  grid-template-columns:1.3fr 0.7fr;
  gap:22px;
  align-items:stretch;
  margin-top:16px;
}

.card{
  background:linear-gradient(180deg,rgba(16,24,39,0.95),rgba(15,22,36,0.95));
  border:1px solid rgba(32,48,74,0.9);
  border-radius:var(--radius2);
  padding:22px;
  box-shadow:var(--shadow);
}

.hero h1{
  margin:0 0 10px 0;
  font-size:38px;
  line-height:1.1;
  letter-spacing:-0.4px;
}

.hero p{
  margin:0 0 16px 0;
  color:var(--muted);
  font-size:16px;
}

.pillrow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(106,169,255,0.10);
  border:1px solid rgba(106,169,255,0.18);
  color:var(--text);
  font-weight:650;
  font-size:13px;
}

.kpi{
  display:grid;
  gap:12px;
  align-content:start;
}

.kpi .box{
  padding:14px;
  border-radius:var(--radius);
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(32,48,74,0.7);
}

.kpi .label{color:var(--muted);font-size:13px}
.kpi .value{font-size:18px;font-weight:850;margin-top:4px}

section{margin-top:26px}

.sectionHead{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.sectionHead h2{margin:0;font-size:20px;letter-spacing:-0.2px}
.sectionHead p{margin:0;color:var(--muted);font-size:14px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.itemCard{
  padding:16px;
  border-radius:var(--radius);
  border:1px solid rgba(32,48,74,0.8);
  background:rgba(16,24,39,0.60);
}

.itemCard h3{margin:0 0 6px 0;font-size:16px;letter-spacing:-0.15px}
.itemCard p{margin:0;color:var(--muted);font-size:14px}

.tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.tag{
  font-size:12px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(32,48,74,0.9);
  background:rgba(255,255,255,0.03);
  color:var(--muted);
}

.toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:12px;
}

input[type="text"],select,textarea{
  background:rgba(11,15,23,0.4);
  color:var(--text);
  border:1px solid rgba(32,48,74,0.9);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}

input[type="text"]{min-width:260px}
textarea{width:100%;min-height:120px;resize:vertical}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(16,24,39,0.75);
  border:1px solid rgba(32,48,74,0.9);
  color:var(--text);
  cursor:pointer;
  font-weight:750;
}

.btn:hover{background:rgba(16,24,39,0.95)}

.muted{color:var(--muted)}
.small{font-size:13px}

.note{
  border-left:3px solid rgba(255,204,102,0.9);
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,204,102,0.06);
  border:1px solid rgba(255,204,102,0.18);
  color:var(--text);
  margin-top:12px;
}

.warn{
  border-left:3px solid rgba(255,204,102,0.9);
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,204,102,0.06);
  border:1px solid rgba(255,204,102,0.18);
  color:var(--text);
  margin-top:10px;
}

footer{
  border-top:1px solid rgba(32,48,74,0.8);
  padding:24px 0;
  color:var(--muted);
}

.footerRow{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

/* Detail panel */
.detailWrap{
  margin-top:14px;
}
.detailCard{
  padding:18px;
  border-radius:var(--radius2);
  border:1px solid rgba(32,48,74,0.9);
  background:rgba(16,24,39,0.78);
}
.detailHeader{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.detailTitle{
  margin:0;
  font-size:22px;
  letter-spacing:-0.2px;
}
.detailBody{
  margin-top:10px;
  color:var(--muted);
}
.detailRow{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Make cards clickable */
.clickable{cursor:pointer}
.clickable:hover{border-color:rgba(106,169,255,0.45)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  input[type="text"]{width:100%;min-width:0}
  .ctaHeader{display:none}
}


/* Media */
.mediaRow{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.mediaThumb{display:block;border-radius:14px;border:1px solid rgba(32,48,74,0.9);background:rgba(255,255,255,0.03);overflow:hidden}
.mediaThumb img{display:block;width:220px;max-width:100%;height:auto}
.mediaHero{margin-top:12px;border-radius:18px;border:1px solid rgba(32,48,74,0.9);overflow:hidden;background:rgba(255,255,255,0.03)}
.mediaHero img{display:block;width:100%;height:auto}