:root{
  --bg:#070a12;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.02);
  --text:#eaf0ff;
  --muted:#b6c0d6;
  --border:rgba(255,255,255,.09);
  --accent:#3b82f6;
  --accent2:#a855f7;
  --sidebar:140px;
  --r:18px;
  --shadow:0 20px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(900px 700px at 18% 10%, rgba(59,130,246,.20), transparent 55%),
    radial-gradient(900px 700px at 80% 15%, rgba(168,85,247,.16), transparent 55%),
    #050711;
  background-image:
    radial-gradient(900px 700px at 18% 10%, rgba(59,130,246,.20), transparent 55%),
    radial-gradient(900px 700px at 80% 15%, rgba(168,85,247,.16), transparent 55%),
    url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
  background-blend-mode:screen,screen,normal;
}

a{color:inherit}
.container{display:flex; min-height:100vh}

/* Sidebar */
.sidebar{
  width:var(--sidebar);
  position:sticky; top:0; height:100vh;
  padding:12px 10px;
  background:linear-gradient(180deg, rgba(12,16,26,.92), rgba(7,10,18,.92));
  border-right:1px solid var(--border);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 6px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:8px;
}

.brand img{
  width:100%;
  max-width:96px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.menu{display:flex; flex-direction:column; gap:8px; padding:10px 0}

.menu-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:14px 6px;
  border-radius:14px;
  text-decoration:none;
  color:#cbd5e1;
  border:1px solid transparent;
  background:transparent;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.menu-item span{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.menu-item img{
  width:36px;
  height:36px;
  object-fit:contain;
  /* base glow */
  filter: drop-shadow(0 0 6px rgba(120,180,255,.35));
  animation: glowPulse 4s ease-in-out infinite;
  transition: transform .18s ease;
}

.menu-item:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.menu-item:hover img{
  transform: scale(1.10);
  animation: glowPulse 1.2s ease-in-out infinite;
}

.menu-item.active{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.25);
  color: #fff;
}

.menu-item.active img{
  animation: glowPulse 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(120,180,255,1));
}

/* Glow animation */
@keyframes glowPulse{
  0%   { filter: drop-shadow(0 0 6px rgba(120,180,255,.35)); }
  50%  { filter: drop-shadow(0 0 14px rgba(120,180,255,.85)); }
  100% { filter: drop-shadow(0 0 6px rgba(120,180,255,.35)); }
}

/* Main content */
.main{flex:1; padding:28px}
.wrap{max-width:1100px; margin:0 auto}

.card{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card-inner{padding:28px}

.kicker{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  background: rgba(59,130,246,.14);
  border:1px solid rgba(59,130,246,.22);
  color:#dbeafe;
}

h1{
  margin:14px 0 8px;
  font-size: clamp(34px, 4.5vw, 72px);
  letter-spacing:-0.02em;
  line-height:1.06;
}

.subtitle{margin:0 0 18px; color:var(--muted)}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin: 14px 0 0}
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  text-decoration:none;
}
.btn:hover{background: rgba(255,255,255,.07)}
.btn.primary{
  border-color: rgba(59,130,246,.35);
  background: rgba(59,130,246,.18);
}
.btn.primary:hover{background: rgba(59,130,246,.26)}

.hero-media{
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:18px;
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
.hero-media img{
  width:min(520px,100%);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}

.section{margin-top:18px}
.h2{font-size:22px; margin:0 0 12px}
.muted{color:var(--muted)}
.news-row{display:flex; gap:14px; align-items:flex-start; color:var(--muted)}
.news-date{min-width:150px; color:#fff; font-weight:700}

.footer{
  margin-top:22px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  opacity:.95;
}

.footer a{color:#dbeafe; text-decoration:none}
.footer a:hover{text-decoration:underline}

/* Responsive: sidebar becomes top bar */
@media (max-width: 860px){
  .container{flex-direction:column}
  .sidebar{width:100%; height:auto; position:relative}
  .brand{justify-content:flex-start}
  .brand img{max-width:72px}
  .menu{flex-direction:row; flex-wrap:wrap; gap:10px}
  .menu-item{flex-direction:row; gap:10px; padding:10px 12px}
  .menu-item span{letter-spacing:.08em}
  .main{padding:18px}
  .news-date{min-width:120px}
}