/* ---------- Base (Dark Theme) ---------- */
:root{
  --bg: #0b0f14;
  --bg-elev: #11161d;
  --text: #e7e9ee;
  --muted: #9aa3ad;
  --accent: #4f9cff;
  --accent-2: #4be0c9;
  --border: #1f2833;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 80% -10%, #16202b 0%, #0b0f14 60%), var(--bg);
  color: var(--text);
  font: 16px/1.6 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing:.2px;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  background: linear-gradient(180deg, rgba(11,15,20,.9), rgba(11,15,20,.6) 60%, rgba(11,15,20,0));
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}

.brand{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight:800;
  font-size: clamp(18px, 3.2vw, 28px);
  letter-spacing:1.5px;
  color: var(--text);
  display:flex;
  align-items:center;
  gap:10px;
}
.brand::before{
  content:'';
  width:10px;height:10px;border-radius:3px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 12px rgba(79,156,255,.6);
}

.socials{ display:flex; gap:10px; align-items:center; }
.social-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--text); text-decoration:none; font-size:14px;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.05); border-color:#2a3542; }
.social-btn svg{ display:block; }
.social-btn.tiktok{ color: #fff; }
.social-btn.x{ color:#fff; }
.social-btn.instagram{ color:#fff; }

/* ---------- Layout ---------- */
.container{
  max-width:min(1100px, 92vw);
  margin: 40px auto 80px;
  padding: 0 12px;
}

/* ---------- Carousel ---------- */
.carousel{
  position:relative;
  margin: clamp(40px, 14vh, 120px) auto 0;
  background: linear-gradient(180deg, var(--bg-elev), rgba(17,22,29,.7));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: clip;
  padding: clamp(10px, 2vw, 16px);
}

.slides{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 12px;
}

.slide{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 28px);
  background:
    radial-gradient(800px 400px at 10% 120%, rgba(79,156,255,.18), transparent 60%),
    radial-gradient(800px 400px at 110% -20%, rgba(75,224,201,.18), transparent 60%),
    linear-gradient(180deg, #0e141b, #0b0f14);
  transform: translateX(100%);
  opacity: 0;
  transition: transform .55s cubic-bezier(.22,.9,.27,1), opacity .5s ease;
}
.slide.is-active{ transform: translateX(0); opacity: 1; }
.slide.is-prev{ transform: translateX(-100%); opacity:0; }

.slide-content{
  text-align:center;
  max-width: 720px;
}
.slide-content h2{
  margin:0 0 10px;
  font: 700 clamp(22px, 4vw, 36px)/1.2 'Orbitron', system-ui, sans-serif;
  letter-spacing: 1px;
}
.slide-content p{
  margin:0;
  color: var(--muted);
  font-size: clamp(14px, 2.2vw, 18px);
}

/* nav arrows */
.nav{
  position:absolute; inset-block: 50% auto;
  transform: translateY(-50%);
  width:42px; height:42px; border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(15,20,27,.65);
  color: var(--text);
  display:grid; place-items:center;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
  z-index: 2;
}
.nav:hover{ background: rgba(25,32,41,.8); border-color:#2a3542; transform: translateY(calc(-50% - 1px)); }
.nav.prev{ left: 14px; }
.nav.next{ right: 14px; }

/* dots */
.dots{
  display:flex; justify-content:center; gap:10px;
  padding: 14px 8px 4px;
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background:#2a3542;
  border: 1px solid var(--border);
  cursor:pointer;
  transition: transform .12s ease, background .2s ease;
}
.dot:hover{ transform: translateY(-1px); }
.dot.is-active{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 8px rgba(79,156,255,.5); }

/* ---------- Footer ---------- */
.site-footer{
  margin: 80px auto 30px;
  padding: 18px 16px;
  border-top:1px solid var(--border);
  color: var(--muted);
}
.footer-links{
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:center;
}
.footer-links a{
  color: var(--text); text-decoration:none;
  opacity:.85;
}
.footer-links a:hover{ opacity:1; text-decoration:underline; }
.footer-links .copyright{
  margin-left:auto; margin-right:auto;
  opacity:.7;
  font-size: 14px;
}

/* ---------- Small screens ---------- */
@media (max-width: 520px){
  .social-btn span{ display:none; } /* keep icons only */
  .nav{ width:36px;height:36px;border-radius:10px; }
}