/* Red & black theme */
:root{
  --red:#e10600;
  --black:#0b0b0b;
  --muted:#f4f4f4;
  --max-width:1100px;
  --radius:12px;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#0b0b0b 0%, #111 60%);color:var(--muted);line-height:1.5}
.container{max-width:var(--max-width);margin:0 auto;padding:28px}
.site-header{background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);border-bottom:2px solid rgba(225,6,0,0.08)}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1.25rem;margin:0;color:var(--red)}
.main-nav a{color:var(--muted);text-decoration:none;margin-left:18px}
.main-nav a.cta{padding:8px 12px;border-radius:8px;background:var(--red);color:#fff}
.hero{display:flex;gap:24px;padding:48px 28px;align-items:center}
.hero-left{flex:1}
.hero-right{flex:1;display:flex;align-items:center;justify-content:center}
.video-placeholder{width:100%;height:220px;border-radius:12px;background:linear-gradient(135deg,#222,#111);display:flex;align-items:center;justify-content:center;border:3px solid rgba(225,6,0,0.12)}
h2{color:#fff}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:var(--red);color:#fff;text-decoration:none;margin-right:8px}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;padding:28px}
.features article{background:rgba(255,255,255,0.03);padding:18px;border-radius:12px}
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:22px 0;margin-top:36px}
.content{background:rgba(255,255,255,0.02);padding:28px;border-radius:12px}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}
.card{background:rgba(255,255,255,0.03);padding:12px;border-radius:10px;text-align:center}
.contact-form label{display:block;margin-bottom:12px}
input,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--muted)}

/* Neon Glitch Logo */
.logo {
  font-size: 1.8rem;
  color: var(--red);
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 
    0 0 5px var(--red),
    0 0 10px var(--red),
    0 0 20px var(--red),
    0 0 40px #ff1a1a;
  animation: flicker 2.5s infinite alternate;
}

.copyright {
	clear: both;
	margin: 15px 0;
	padding: 24px 18px 6px 18px;
	font: 14px/24px "raleway-medium", sans-serif;
	letter-spacing: .5px;
	text-align: center;
}

.copyright li {
	display: inline-block;
	padding: 0 5px;
}

/* social links */
.social-links {
	margin: 30px auto 42px auto;
	padding: 0;
	font-size: 38px;
	text-align: center;
}

.social-links li {
	display: inline-block;
	margin: 0;
	padding: 0;
	margin-left: 32px;
}

.social-links li a {
	color: rgba(255, 255, 255, 0.1);
}

.social-links li a:hover {
	color: white;
}

.social-links li:first-child {
	margin-left: 0;
}

/* media queries - .social-links */

@media only screen and (max-width:600px) {
	footer .social-links {
		font-size: 32px;
	}

	footer .social-links li {
		margin-left: 18px;
	}

}

@media only screen and (max-width:450px) {
	footer .social-links {
		font-size: 28px;
	}

	footer .social-links li {
		margin-left: 14px;
	}

}

@media only screen and (max-width:400px) {
	footer .social-links {
		font-size: 25px;
	}

	footer .social-links li {
		margin-left: 12px;
	}

}

@media only screen and (max-width:350px) {
	footer .social-links {
		font-size: 22px;
	}

	footer .social-links li {
		margin-left: 10px;
	}

}

/* Flicker/Glitch effect */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 
      0 0 5px var(--red),
      0 0 10px var(--red),
      0 0 20px var(--red),
      0 0 40px #ff1a1a;
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: none;
    opacity: 0.6;
  }
}

.footer-socials {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.social-icons a {
  margin-left: 12px;
  color: var(--muted);
  display: inline-flex;
  transition: 0.3s;
}
.social-icons svg {
  width: 28px;
  height: 28px;
}
.social-icons a:hover {
  color: var(--red);
  text-shadow: 0 0 8px var(--red), 0 0 16px #ff1a1a;
}

/* Mobile Friendly + Hamburger + Glitch Neon Styles */
body {
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

nav a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  position: relative;
}

nav a.active::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #ff004c, #00e0ff);
  box-shadow: 0 0 10px #ff004c, 0 0 20px #00e0ff;
  animation: glitchGlow 1.5s infinite;
}

@keyframes glitchGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.hamburger {
  display: none;
  cursor: pointer;
  font-size: 28px;
  color: #0ff;
  text-shadow: 0 0 10px #0ff, 0 0 20px #f0f;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background: #0a0a0a;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 15px;
}

.mobile-menu a {
  padding: 12px;
  text-align: center;
  font-size: 18px;
  color: #0ff;
  text-shadow: 0 0 10px #0ff, 0 0 20px #f0f;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-menu a:hover {
  background: rgba(255,0,76,0.1);
  color: #ff004c;
  text-shadow: 0 0 10px #ff004c, 0 0 20px #00e0ff;
}

/* Responsive */
@media (max-width: 768px) {
  nav {
    display: none;
  }
  .hamburger {
    display: block;
    position: absolute;
    top: 15px;
    right: 20px;
  }
  .mobile-menu.show {
    display: flex;
    animation: menuSlide 0.3s ease forwards;
  }
}

@keyframes menuSlide {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}