:root{
  --bg:#0a0a0a;
  --card:#131313;
  --text:#ffffff;
  --muted:#c9c9c9;
  --accent:#ff2936;
  --accent-2:#ffd347;
  --maxw:1100px;
  --radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(255,41,54,.08), transparent),
    radial-gradient(700px 500px at 90% 0%, rgba(255,211,71,.06), transparent),
    var(--bg);
}

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

header{
  position:sticky; top:0; z-index:10;
  background:rgba(10,10,10,.75); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none}
.brand img{height:44px; width:auto}
.brand span{font-weight:800; letter-spacing:.4px; text-transform:uppercase}

nav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
nav a{
  color:var(--text); text-decoration:none; font-weight:700; padding:10px 14px; border-radius:12px;
  border:1px solid transparent;
}
nav a:hover, nav a[aria-current="page"]{background:rgba(255,41,54,.12); border-color:rgba(255,41,54,.25)}

main{padding:28px}
.hero{
  background:linear-gradient(180deg, rgba(255,41,54,.10), rgba(0,0,0,.0));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:30px;
  display:grid; gap:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hero h1{margin:0; font-size:clamp(26px, 3.6vw, 44px); line-height:1.1}
.hero p{margin:0; color:var(--muted)}

.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:26px 0}
.card{
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 12px 24px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.35) }
/* Only gallery card images get fixed height */
.gallery .card img{display:block; width:100%; height:170px; object-fit:cover}

/* Content pages: never force fixed height on images */
.content{background:var(--card); border-radius:var(--radius); border:1px solid rgba(255,255,255,.06); padding:24px}
.content img{max-width:100%; height:auto !important; width:auto; display:block; margin:10px 0}

/* Utilities */
.badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{font-size:12px; border:1px solid rgba(255,255,255,.18); padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06)}

.grid{display:grid; gap:20px}
.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.sidebar{display:flex; flex-direction:column; gap:10px}
.sidebar a{
  text-decoration:none; color:var(--text);
  padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.sidebar a:hover{background:rgba(255,255,255,.08)}

.news{display:grid; gap:12px}
.news h2{margin:0}
.news p{margin:0; color:var(--muted)}

footer{
  border-top:1px solid rgba(255,255,255,.07);
  padding:22px 24px; color:var(--muted);
}
.footer-grid{display:grid; gap:8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))}
.small{font-size:14px}

a{color:var(--accent-2)}
img{max-width:100%; height:auto}
h1,h2,h3{font-weight:900}