:root{
  --bg:#0e0f12;       
  --card:#15171c;      
  --text:#e6e6e6;      
  --muted:#a0a3a7;     
  --accent:#a21b1b;    
  --link:#c94f4f;      
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% 0%, #17181d 0%, var(--bg) 60%) fixed;
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.25rem;
  background:linear-gradient(to bottom, #131419, rgba(19,20,25,0.7));
  border-bottom:1px solid #1f2127;
  position:sticky; top:0; z-index:10;
}
.brand{ display:flex; align-items:center; gap:.75rem; }
.logo{ width:40px; height:40px; object-fit:contain; }
.brand h1{
  font-family:Cinzel, serif;
  font-size:1.25rem;
  letter-spacing:.06em;
  margin:0;
}

.nav{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
.nav a{
  color:var(--text);
  text-decoration:none;
  padding:.5rem .75rem;
  border-radius:.4rem;
}
.nav a:hover{ background:#1c1f26; }
.nav a.active{ border:1px solid #2a2d35; background:#171a20; }

.hero{
  min-height:52vh;
  display:grid; place-items:center;
  background:
    linear-gradient(to bottom, rgba(10,11,14,.6), rgba(10,11,14,.9)),
    url('img/Background\ sh2.png') center/cover no-repeat;
  border-bottom:1px solid #1f2127;
}
.hero-content{
  max-width:720px; padding:2rem; text-align:center;
}
.hero h2{
  font-family:Cinzel, serif;
  font-size:2rem; margin:0 0 .75rem;
}
.hero p{ color:var(--muted); margin:0 0 1.25rem; }
.btn{
  display:inline-block; background:var(--accent); color:#fff;
  padding:.6rem 1rem; border-radius:.4rem; text-decoration:none;
}
.btn:hover{ filter:brightness(1.1); }

.features{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1rem; padding:1.5rem;
}
.features article{
  background:var(--card);
  border:1px solid #1f2127;
  padding:1rem; border-radius:.6rem;
}
.features h3{ margin:.25rem 0 .5rem; font-family:Cinzel, serif; }
.link{ color:var(--link); text-decoration:none; }
.link:hover{ text-decoration:underline; }

.content{ max-width:880px; margin:0 auto; padding:1.5rem; }
.content h2{ font-family:Cinzel, serif; }
.bullet{ padding-left:1rem; }
.bullet li{ margin:.4rem 0; }

.note{
  margin:1rem 0; padding:1rem;
  background:#121317; border:1px dashed #2a2d35; border-radius:.5rem;
}

.video-wrapper{ max-width:880px; margin:0 auto; padding:1rem; }
video{ width:100%; border-radius:.5rem; border:1px solid #1f2127; }

.grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem; padding:1rem 1.5rem;
}
figure{
  margin:0; background:var(--card);
  border:1px solid #1f2127; border-radius:.6rem; overflow:hidden;
}
img{ width:100%; height:220px; object-fit:cover; display:block; }
figcaption{ padding:.5rem .75rem; color:var(--muted); font-size:.95rem; }

.external{ max-width:880px; margin:0 auto; padding:0 1.5rem 2rem; }

.site-footer{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap;
  padding:1rem 1.25rem; border-top:1px solid #1f2127; background:#0c0d10;
}
.site-footer small{ color:#b9bcc1; }
.social{ list-style:none; display:flex; gap:.75rem; margin:0; padding:0; }
.social a{ color:var(--link); text-decoration:none; }
.social a:hover{ text-decoration:underline; }


a:focus, .btn:focus{ outline:2px solid #fff; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body {
  margin: 0;
  padding-left:1rem; 
}