:root{
  --bg:#0b0f0c;--card:#121712;--text:#f2f2f2;--muted:#9aa0a6;--accent:#7CFF33
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
.header{display:flex;align-items:center;gap:12px;padding:12px 14px}
.header .logo{height:64px;width:auto}
.titles .brand{font-weight:800;font-size:22px;line-height:1.1}
.titles .tag{color:var(--muted);font-size:12px;letter-spacing:.12em}

.big-title{font-family:'Corinthia', cursive;font-size:50px;text-align:center;margin:6px 0 12px;color:#eaffea}
@media (min-width:768px){.big-title{font-size:72px;margin:10px 0 18px}}

.slider-wrap{position:relative;display:flex;align-items:center;gap:6px;padding:4px 8px 8px}
.slider{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 12px}
.slider::-webkit-scrollbar{display:none}
.card{flex:0 0 72vw;max-width:280px;background:rgba(18,23,18,0.55);border:1px solid #1b241b;border-radius:16px;overflow:hidden;scroll-snap-align:center}
.card img{width:100%;height:150px;object-fit:cover;display:block}
.card .cap{padding:8px 10px;text-align:center;font-weight:700}
.nav{background:#132a13;border:1px solid #1f3d1f;color:#d9ffd9;border-radius:12px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer}
@media (min-width:768px){.card{flex:0 0 220px} .nav{width:42px;height:42px}}

.card.active{outline:2px solid var(--accent)}

.section{max-width:900px;margin:10px auto 40px;background:rgba(18,23,18,0.55);border:1px solid #1b241b;border-radius:18px;padding:16px;display:none}
.section.active{display:block}
.section h2{margin:0 0 12px 0}
.row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed #253025}
.row .meta{color:var(--muted);font-size:12px}

.footer{color:var(--muted);text-align:center;margin:30px 0 20px}


.logo-top-wrap{text-align:center;margin-top:10px}
.logo-top{height:130px;width:auto;max-width:90%}


.bg-video{
  position:fixed;
  top:0;left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  transform: rotate(180deg);
}

.overlay{
  position:fixed;
  top:0;left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.55);
  z-index:-1;
}

.content{
  position:relative;
  z-index:1;
}

@media (max-width: 600px) {
  .nav {
    display: none !important;
  }
}