:root{
  --bg: #7a0d0d;          /* red background */
  --bg2:#5e0b0b;          /* deeper red */
  --slate:#7f8a96;        /* slate gray */
  --slate2:#5f6974;       /* darker slate */
  --ink:#e8eef5;          /* light text */
  --muted:#cbd3dd;        /* muted text */
  --shadow1: rgba(0,0,0,.55);
  --shadow2: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.10);
  --glow: rgba(0,0,0,.25);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 30% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

img{ max-width:100%; display:block; }

.container{ width:min(1100px, 92vw); margin:0 auto; }

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(6px);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--ink);
}
.brand__logo{
  width:46px; height:46px; object-fit:contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
.brand__title{
  font-weight:700; letter-spacing:1.1px;
}
.brand__tag{
  font-size:12px; color:var(--muted);
  letter-spacing:1px;
}

/* Navigation */
.nav{
  display:flex; align-items:center; gap:10px;
}
.nav__link{
  text-decoration:none;
  color:var(--ink);
  font-size:13px;
  letter-spacing:1px;

  padding:10px 12px;
  border-radius:10px;

  /* Embossed slate button */
  background: linear-gradient(180deg, var(--slate), var(--slate2));
  border:1px solid rgba(0,0,0,.35);
  box-shadow:
    inset 0 1px 0 var(--shadow2),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 8px 18px var(--glow);
}
.nav__link:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--shadow2),
    inset 0 -2px 0 rgba(0,0,0,.28),
    0 12px 26px rgba(0,0,0,.35);
}
.nav__link.is-active{
  outline:2px solid rgba(255,255,255,.18);
}

.navbtn{
  display:none;
  background: linear-gradient(180deg, var(--slate), var(--slate2));
  border:1px solid rgba(0,0,0,.35);
  border-radius:12px;
  padding:10px 12px;
  box-shadow: inset 0 1px 0 var(--shadow2), 0 10px 20px var(--glow);
}
.navbtn__bar{
  display:block;
  width:22px; height:2px;
  background: rgba(255,255,255,.85);
  margin:4px 0;
}

/* Hero */
.hero{
  padding:34px 0 26px;
}
.hero__inner{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap:18px;
  align-items:start;
}
.hero__h1{
  margin:12px 0 10px;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing:.4px;
  text-shadow: 0 10px 25px rgba(0,0,0,.35);
}
.hero__p{
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
  max-width: 62ch;
}
.badge{
  display:inline-block;
  font-size:12px;
  letter-spacing:1px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.25);
  border:1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.hero__cta{ display:flex; gap:10px; margin:16px 0 18px; flex-wrap:wrap; }

/* Buttons */
.btn{
  display:inline-block;
  text-decoration:none;
  color:var(--ink);
  font-size:13px;
  letter-spacing:1px;
  padding:12px 14px;
  border-radius:12px;

  background: linear-gradient(180deg, var(--slate), var(--slate2));
  border:1px solid rgba(0,0,0,.35);
  box-shadow:
    inset 0 1px 0 var(--shadow2),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 12px 26px rgba(0,0,0,.35);
}
.btn:hover{ transform: translateY(-1px); }
.btn--ghost{
  background: rgba(0,0,0,.22);
  border:1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.25);
}

.hero__meta{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top: 10px;
}
.metaCard{
  border-radius:14px;
  background: rgba(0,0,0,.18);
  border:1px solid var(--line);
  padding:12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.22);
}
.metaCard__k{
  font-size:11px;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:6px;
}
.metaCard__v{
  font-size:13px;
  line-height:1.3;
}

/* Panels/Cards */
.panel, .card{
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.33);
}
.panel{
  background: rgba(0,0,0,.22);
  overflow:hidden;
}
.panel--thin{ margin-top:12px; }
.panel__title{
  padding:12px 14px;
  font-weight:700;
  letter-spacing:1px;
  font-size:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.14));
  border-bottom:1px solid var(--line);
}
.panel__body{ padding:14px; color:var(--muted); line-height:1.55; }
.small{ font-size:13px; }

.card{
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.24));
  padding:16px;
}
.card__title{
  font-weight:700;
  letter-spacing:.6px;
  margin-bottom:8px;
}
.card__p{ margin:0; color:var(--muted); line-height:1.55; }

/* Chips, lists */
.chipRow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip{
  font-size:11px;
  letter-spacing:1px;
  padding:7px 9px;
  border-radius:999px;
  background: rgba(0,0,0,.22);
  border:1px solid var(--line);
  color: var(--ink);
}

.checks{ margin:0; padding-left:18px; }
.checks li{ margin:8px 0; color:var(--muted); }

.divider{
  height:1px;
  background: var(--line);
  margin:12px 0;
}

.callout{
  margin-top:12px;
  border-radius:14px;
  padding:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.18));
  border:1px solid var(--line);
}
.callout__title{
  font-size:12px;
  letter-spacing:1px;
  font-weight:700;
  margin-bottom:6px;
}
.callout__body{ color:var(--muted); }

.linkRow{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--ink);
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  background: linear-gradient(180deg, var(--slate), var(--slate2));
  border:1px solid rgba(0,0,0,.35);
  margin:10px 0;
  box-shadow: inset 0 1px 0 var(--shadow2), inset 0 -2px 0 rgba(0,0,0,.25);
}
.arrow{ opacity:.9; }

/* Page layout */
.page{ padding:22px 0 26px; }
.pageHead{
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  border-radius:18px;
  padding:16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.28);
  margin-bottom:16px;
}
.pageHead h1{ margin:0 0 8px; }
.pageHead p{ margin:0; color:var(--muted); line-height:1.55; }

.section{ padding:20px 0; }
.section__head h2{ margin:0 0 6px; }
.section__head p{ margin:0; color:var(--muted); }

.section--dark{
  margin-top:18px;
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:12px;
}
.grid2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  margin-top:12px;
}
.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:12px;
  align-items:start;
}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
  margin-top:12px;
}
.gallery__item{
  padding:0;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.33);
  cursor:pointer;
}
.gallery__item img{
  width:100%;
  height: 220px;
  object-fit: cover;
  filter: contrast(1.02) saturate(1.02);
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
}
.lightbox.is-open{ display:flex; }
.lightbox__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.75);
}
.lightbox__content{
  position:relative;
  width:min(920px, 92vw);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding:12px;
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
}
.lightbox__img{
  width:100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
}
.lightbox__close{ margin-top:10px; }

/* FAQ */
.faq{ margin-top:10px; }
.faq__item{
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  margin:10px 0;
  overflow:hidden;
}
.faq__item summary{
  cursor:pointer;
  padding:12px 14px;
  font-weight:700;
  letter-spacing:.3px;
}
.faq__item p{
  margin:0;
  padding:0 14px 12px;
  color:var(--muted);
  line-height:1.55;
}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  background: rgba(0,0,0,.18);
}
.footer__inner{
  padding:16px 0;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.footer__brand{ font-weight:700; letter-spacing:1px; }
.footer__small{ color:var(--muted); font-size:12px; }

/* Little helpers */
.mono{ font-family: "Courier New", Courier, monospace; }
.dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background: rgba(255,255,255,.7); margin-right:8px;
}
.miniList div{ margin:8px 0; color:var(--muted); }

/* Responsive */
@media (max-width: 920px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__meta{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .grid3{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .navbtn{ display:block; }
  .nav{
    position:absolute;
    right:4vw;
    top:72px;
    display:none;
    flex-direction:column;
    gap:10px;
    padding:12px;
    border-radius:16px;
    background: rgba(0,0,0,.28);
    border:1px solid var(--line);
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
  }
  .nav.is-open{ display:flex; }
}