:root{
  --neon-red:#ff0037;
  --neon-red-soft:#cc002c;
  --bg-dark:#050505;
  --bg-card:#0e0e0e;
  --text:#f2f2f2;
  --text-soft:#bbbbbb;
  --radius:22px;
  --shadow-neon:0 0 25px rgba(255,0,55,0.55);
  --max:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Inter',sans-serif;
  background:var(--bg-dark);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* HEADER */
header{
  background:#000;
  border-bottom:1px solid #222;
  padding:1rem 1.5rem;
  position:sticky;
  top:0;
  z-index:20;
  box-shadow:0 8px 18px rgba(0,0,0,0.4);
}
.header-inner{
  max-width:var(--max);
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand{
  font-size:1.8rem;
  font-weight:900;
  background:linear-gradient(90deg,var(--neon-red),#ff5577);
  -webkit-background-clip:text;
  color:transparent;
  letter-spacing:0.04em;
}
nav{
  display:flex;
  gap:1.4rem;
}
nav a{
  color:var(--text);
  text-decoration:none;
  font-size:.95rem;
  font-weight:500;
}
nav a:hover{
  color:var(--neon-red);
}

/* BANNER HERO */
.hero{
  width:100%;
  background:url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1600&q=80')
    center/cover no-repeat;
  min-height:48vh;
  display:flex;
  align-items:center;
  padding:2.4rem 1.8rem;
  position:relative;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to right,rgba(0,0,0,0.85),rgba(0,0,0,0.2));
}
.hero-content{
  max-width:var(--max);
  margin:auto;
  position:relative;
  z-index:3;
  color:white;
}
.hero h1{
  font-size:2.6rem;
  font-weight:900;
  margin-bottom:1rem;
  text-shadow:var(--shadow-neon);
}
.hero p{
  font-size:1.05rem;
  max-width:640px;
  color:#f7dadd;
}

/* MAIN CONTENT */
.container{
  max-width:var(--max);
  margin:2rem auto;
  padding:0 1.5rem;
  display:grid;
  grid-template-columns:1fr 320px;
  gap:2rem;
}

.article{
  background:var(--bg-card);
  padding:2rem;
  border-radius:var(--radius);
  box-shadow:0 0 30px rgba(255,0,55,0.08);
  border:1px solid #1b1b1b;
}

.article h2{
  color:var(--neon-red);
  font-size:1.6rem;
  margin-bottom:.9rem;
  text-shadow:var(--shadow-neon);
}
.article p{
  margin-bottom:1rem;
  color:var(--text-soft);
  line-height:1.75;
  font-size:1rem;
}
.article ul{
  padding-left:1.4rem;
  margin-bottom:1rem;
}
.article li{
  margin-bottom:.45rem;
  color:var(--text-soft);
}

/* SIDEBAR */
.sidebar{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.side-card{
  background:#0b0b0b;
  padding:1.3rem;
  border-radius:var(--radius);
  border:1px solid #1b1b1b;
  box-shadow:0 0 20px rgba(255,0,55,0.05);
}
.side-card h3{
  font-size:1.15rem;
  margin-bottom:.5rem;
  color:var(--neon-red);
}

/* FOOTER */
footer{
  margin-top:3rem;
  padding:1.6rem;
  background:#000;
  border-top:1px solid #222;
  text-align:center;
  font-size:.9rem;
  color:var(--text-soft);
}

/* RESPONSIVE */
@media(max-width:900px){
  .container{
    grid-template-columns:1fr;
  }
}