/* styles.css (Vanilla) */
/* Variables */
:root{
  --bg:#000000;
  --neon:#00FFFF;
  --muted:#9aa4a4;
  --accent: rgba(0,255,255,0.12);
  --font-main: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  --font-display: 'Orbitron', sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-main);
  background:var(--bg);
  color:#dff9fb;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding-bottom:40px;
}

/* background subtle grid */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    repeating-linear-gradient(0deg, rgba(0,255,255,0.02) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,255,255,0.01) 0 1px, transparent 1px 6px);
  pointer-events:none;
}

/* Header nav */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.35));
  backdrop-filter: blur(2px);
}
.nav-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  padding: .8rem;
  max-width:1160px;
  margin:0 auto;
}
.brand .brand-link{
  font-family:var(--font-display);
  color:var(--neon);
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.06em;
  text-shadow:0 0 8px rgba(0,255,255,0.12);
}

/* hamburger */
.hamburger{
  border:0;
  background:transparent;
  width:40px;
  height:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:0;
  margin-left:auto;
  cursor:pointer;
}
.hamburger span{
  display:block;
  height:3px;
  background:rgba(255,255,255,0.12);
  border-radius:2px;
}

/* nav default (hidden on mobile) */
.main-nav{
  position: absolute;
  top:100%;
  left:0;
  right:0;
  background: rgba(0,0,0,0.9);
  display:none;
  padding:1rem;
}
.main-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.main-nav a{
  color:#cffeff;
  text-decoration:none;
  font-weight:600;
}

/* nav-cta shown beside brand on wide screens */
.nav-cta{ display:none; }

/* Hero */
.hero-section{ padding:2.4rem 1rem; }
.container{
  width:100%;
  max-width:1160px;
  margin:0 auto;
}
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:1.25rem;
  align-items:center;
}
.hero-title{
  font-family:var(--font-display);
  color:var(--neon);
  font-size:clamp(1.6rem,5vw,3.2rem);
  margin:0 0 .5rem 0;
}
.hero-sub{ margin:0 0 1rem 0; color:#bfeff0; font-size:1rem; }
.hero-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.btn{
  display:inline-block;
  padding:.6rem .9rem;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  text-align:center;
  border:1px solid rgba(255,255,255,0.06);
}
.btn.primary{
  background: linear-gradient(90deg, var(--neon), rgba(0,255,255,0.7));
  color:#001517;
  box-shadow: 0 6px 18px rgba(0,255,255,0.08);
}
.btn.ghost{
  background:transparent;
  color:#cfeff0;
  border:1px solid rgba(0,255,255,0.06);
}
.hero-meta{ margin-top:1rem; list-style:none; padding:0; color:#bfeff0; }

/* monitor visual */
.monitor{
  width:100%;
  max-width:360px;
  margin:0 auto;
  border-radius:8px;
  border:1px solid rgba(0,255,255,0.06);
  padding:10px;
  background:linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.75));
}
.monitor-grid{
  width:100%;
  height:180px;
  border-radius:4px;
  background: repeating-linear-gradient(180deg, rgba(0,255,255,0.03) 0 2px, rgba(0,0,0,0.45) 2px 6px);
}

/* Cards grid */
.cards-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:1rem;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
  border:1px solid rgba(0,255,255,0.12);
  padding:1rem;
  border-radius:8px;
}

/* Sections */
.section-panel{ padding:1.6rem 1rem; }
.section-title{ font-family:var(--font-display); color:var(--neon); text-align:center; margin:0 0 .4rem 0; }
.section-sub{ color:#bfeff0; text-align:center; margin-bottom:1rem; }

/* Videos grid */
.videos-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.video-card{
  border:1px solid rgba(0,255,255,0.06);
  padding:.8rem;
  border-radius:6px;
}
.video-placeholder{
  width:100%;
  padding-top:56.25%;
  position:relative;
  background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.6));
  border-radius:4px;
  overflow:hidden;
  cursor:pointer;
}
.video-placeholder .video-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:2rem;
  color:var(--neon);
}

/* Footer */
.site-footer{
  padding:1rem;
  margin-top:1.6rem;
  border-top:1px solid rgba(0,255,255,0.04);
}
.footer-grid{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

/* CTA glitch mechanics reused */
.cta-btn{
  position:relative;
  overflow:visible;
  transition: transform .12s;
}
.cta-btn.glitch::before,
.cta-btn.glitch::after{
  content: attr(data-text);
  position:absolute;
  inset:0;
  left:0;
  top:0;
  color:transparent;
  pointer-events:none;
  opacity:0;
}
.cta-btn.glitch::before{
  left:2px;
  text-shadow:-2px 0 var(--neon);
  clip-path: inset(0 0 50% 0);
  animation: glitchTop .4s linear infinite;
  opacity:.9;
}
.cta-btn.glitch::after{
  left:-2px;
  text-shadow:2px 0 rgba(0,230,255,0.8);
  clip-path: inset(50% 0 0 0);
  animation: glitchBottom .45s linear infinite;
  opacity:.9;
}
@keyframes glitchTop {
  0% { transform: translate(0,0) }
  20% { transform: translate(-2px,-2px) }
  40% { transform: translate(1px,1px) }
  60% { transform: translate(-1px,0) }
  100% { transform: translate(0,0) }
}
@keyframes glitchBottom {
  0% { transform: translate(0,0) }
  20% { transform: translate(2px,2px) }
  40% { transform: translate(-1px,-1px) }
  60% { transform: translate(1px,0) }
  100% { transform: translate(0,0) }
}

/* Larger CTA */
.large{ padding:.95rem 1.3rem; font-weight:800; }

/* Responsive layout for larger screens */
@media(min-width:720px){
  .grid{ grid-template-columns: 1fr 420px; }
  .main-nav{
    position:static;
    display:block !important;
    background:transparent;
    padding:0;
  }
  .main-nav ul{ flex-direction:row; gap:1rem; }
  .main-nav a{ color:#cffeff; }
  .hamburger{ display:none; }
  .nav-cta{ display:block; margin-left:auto; }
  .cards-grid{ grid-template-columns: repeat(3, 1fr); }
  .videos-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-grid{ gap:20px; }
}

/* larger screens */
@media(min-width:1024px){
  .container{ padding:0 1rem;}
}

/* --- HERO MONITOR IMAGE --- */
.monitor-frame {
  position: relative;
  display: inline-block;
  padding: 10px;
  border: 2px solid #00ffff;
  border-radius: 8px;
  box-shadow: 0 0 20px #00ffff55, inset 0 0 10px #00ffff22;
  background-color: rgba(0, 0, 0, 0.6);
  max-width: 90%;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.monitor-frame:hover {
  transform: scale(1.03);
  box-shadow: 0 0 30px #00ffffaa, inset 0 0 15px #00ffff44;
}

.monitor-frame img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  filter: brightness(0.85) contrast(1.2);
}