* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --green: #39ff14;
  --green-bright: #6dff52;
  --green-dim: rgba(57, 255, 20, 0.32);
  --green-faint: rgba(57, 255, 20, 0.1);

  --black: #000;
  --bg: #050705;
  --bg2: #090d09;

  --panel: #101610;
  --panel2: #151d15;

  --text: #f2f2f2;
  --muted: #bcbcbc;

  --border: rgba(57, 255, 20, 0.22);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;

  background-image:
    radial-gradient(circle at 20% 20%, rgba(57,255,20,0.03), transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(57,255,20,0.025), transparent 30%);
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================
   HERO
========================================= */

.hero {
  position: relative;
  overflow: hidden;

  min-height: 100vh;
  padding: 0 6%;

  background:
    radial-gradient(circle at 75% 45%, rgba(57,255,20,0.12), transparent 34%),
    linear-gradient(180deg, #020302 0%, #071007 100%);
}

/* RANDOM GREEN PARTICLE DUST */

.hero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;
  z-index: 0;

  opacity: 0.22;

  background-image:
    radial-gradient(circle, rgba(57,255,20,0.85) 1px, transparent 1.7px),
    radial-gradient(circle, rgba(57,255,20,0.45) 1.6px, transparent 2.5px),
    radial-gradient(circle, rgba(255,255,255,0.22) 0.8px, transparent 1.4px),
    radial-gradient(circle, rgba(57,255,20,0.28) 2.4px, transparent 3.5px),
    radial-gradient(circle, rgba(255,255,255,0.10) 1.2px, transparent 2px),
    radial-gradient(circle, rgba(57,255,20,0.18) 3px, transparent 4.5px),
    radial-gradient(circle, rgba(57,255,20,0.30) 1.3px, transparent 2.2px),
    radial-gradient(circle, rgba(255,255,255,0.08) 2px, transparent 3px);

  background-size:
    83px 147px,
    191px 113px,
    257px 199px,
    337px 281px,
    421px 367px,
    563px 449px,
    149px 271px,
    617px 523px;

  background-position:
    17px 31px,
    89px 7px,
    143px 211px,
    277px 61px,
    33px 307px,
    401px 173px,
    511px 91px,
    73px 467px;

  animation: garageDust 28s linear infinite;
}

/* SUBTLE CRT SCANLINES */

.hero::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;
  z-index: 0;

  opacity: 0.035;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 5px,
      rgba(57,255,20,0.1) 6px
    );

  animation: scanlineDrift 14s linear infinite;
}

.hero > * {
  position: relative;
  z-index: 1;
}

@keyframes garageDust {
  0% {
    background-position:
      17px 31px,
      89px 7px,
      143px 211px,
      277px 61px,
      33px 307px,
      401px 173px,
      511px 91px,
      73px 467px;
  }

  25% {
    background-position:
      126px 173px,
      -41px 117px,
      288px 124px,
      177px 291px,
      299px 198px,
      221px 319px,
      701px 177px,
      -91px 581px;
  }

  50% {
    background-position:
      194px 287px,
      -71px 219px,
      317px 93px,
      121px 389px,
      511px 44px,
      -129px 318px,
      931px 322px,
      -213px 702px;
  }

  75% {
    background-position:
      287px 421px,
      -177px 338px,
      409px -11px,
      12px 587px,
      771px -88px,
      -403px 447px,
      1177px 488px,
      -379px 861px;
  }

  100% {
    background-position:
      361px 544px,
      -244px 431px,
      492px -26px,
      -33px 721px,
      989px -221px,
      -657px 462px,
      1411px 644px,
      -541px 1044px;
  }
}

@keyframes scanlineDrift {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(20px);
  }
}

/* =========================================
   NAVBAR
========================================= */

.navbar {
  min-height: 125px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.brand-logo {
  width: 110px;

  filter:
    drop-shadow(0 0 10px rgba(57,255,20,0.18))
    drop-shadow(0 0 22px rgba(57,255,20,0.12));
}

.brand-wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;

  text-transform: uppercase;
  line-height: 0.92;
}

.brand-main {
  color: var(--green);

  font-size: 2.2rem;
  font-weight: 900;

  letter-spacing: 3px;

  text-shadow:
    0 0 12px rgba(57,255,20,0.22),
    0 0 28px rgba(57,255,20,0.08);
}

.brand-sub {
  color: #d0d0d0;

  font-size: 1rem;
  letter-spacing: 7px;

  margin-top: 0.25rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.4rem;

  list-style: none;
}

.nav-links a {
  color: var(--text);

  text-transform: uppercase;
  font-size: 0.86rem;
  letter-spacing: 1px;

  opacity: 0.82;

  transition: 0.25s ease;
}

.nav-links a:hover {
  color: var(--green);
  opacity: 1;

  text-shadow: 0 0 12px rgba(57,255,20,0.35);
}

/* =========================================
   HERO CONTENT
========================================= */

.hero-inner {
  min-height: calc(100vh - 125px);

  display: grid;
  grid-template-columns: 1.05fr 0.95fr;

  align-items: center;
  gap: 4rem;
}

.eyebrow {
  color: var(--green);

  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.82rem;
  font-weight: 800;

  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(3rem, 7vw, 6.8rem);

  line-height: 0.92;
  text-transform: uppercase;

  margin-bottom: 1.5rem;
}

.hero-content p {
  max-width: 620px;

  color: var(--muted);
  font-size: 1.15rem;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  margin-top: 2rem;
}

/* =========================================
   BUTTONS
========================================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.95rem 1.35rem;

  border-radius: 999px;
  border: 1px solid var(--green);

  background: var(--green);
  color: #000;

  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;

  transition: 0.25s ease;
}

.button.secondary {
  background: transparent;
  color: var(--green);
}

.button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 0 20px rgba(57,255,20,0.18),
    0 0 40px rgba(57,255,20,0.08);
}

.button.secondary:hover {
  background: var(--green);
  color: #000;
}

/* =========================================
   MAIN ZUGGY
========================================= */

.zuggy-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.zuggy {
  width: min(480px, 100%);

  filter:
    drop-shadow(0 0 18px rgba(57,255,20,0.22))
    drop-shadow(0 0 36px rgba(57,255,20,0.10));

  animation: zugPulse 6s ease-in-out infinite;
}

@keyframes zugPulse {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* =========================================
   GLOBAL SECTIONS
========================================= */

.section {
  padding: 6rem 6%;

  background:
    radial-gradient(circle at top center, rgba(57,255,20,0.045), transparent 34%),
    var(--bg);

  border-top: 1px solid rgba(57,255,20,0.08);

  text-align: center;
}

.section.dark {
  background:
    radial-gradient(circle at top center, rgba(57,255,20,0.05), transparent 34%),
    var(--bg2);
}

.section h2 {
  color: var(--green);

  font-size: clamp(2rem, 4vw, 3.4rem);

  text-transform: uppercase;
  letter-spacing: 2px;

  margin-bottom: 1rem;
}

.section > p {
  max-width: 720px;

  margin: 0 auto 2.5rem;

  color: var(--muted);
  font-size: 1.08rem;
}

/* =========================================
   PANELS
========================================= */

.card,
.merch-box,
.contact-form-box,
.about-image-box {
  background:
    linear-gradient(145deg, var(--panel2), #070907);

  border: 1px solid var(--border);
  border-radius: 22px;

  box-shadow:
    0 0 24px rgba(57,255,20,0.06),
    inset 0 0 18px rgba(57,255,20,0.02);
}

/* =========================================
   PROJECT CARDS
========================================= */

.card-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(260px, 1fr));

  gap: 1.5rem;
}

.card {
  overflow: hidden;

  text-align: left;

  transition: 0.3s ease;
}

.card:hover,
.merch-box:hover {
  transform: translateY(-6px);

  border-color: rgba(57,255,20,0.55);

  box-shadow:
    0 0 34px rgba(57,255,20,0.14),
    inset 0 0 22px rgba(57,255,20,0.03);
}

.card-image {
  width: 100%;
  height: 230px;

  object-fit: cover;
  background: #000;
}

.card-content {
  padding: 1.4rem;
}

.card-content h3,
.merch-box h3 {
  color: var(--green);

  font-size: 1.3rem;

  margin-bottom: 0.65rem;
}

.card-content p,
.merch-box p {
  color: var(--muted);

  font-size: 0.98rem;
}

/* =========================================
   ABOUT
========================================= */

.about-section {
  text-align: left;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 3rem;
  align-items: center;
}

.about-content h2 {
  margin-bottom: 1.4rem;
}

.about-content p {
  color: var(--muted);

  margin-bottom: 1rem;

  font-size: 1.05rem;
}

.about-image-box {
  overflow: hidden;
}

.about-image {
  width: 100%;
  height: 430px;

  object-fit: cover;
}

/* =========================================
   VIDEOS SECTION
========================================= */

.videos-section {
  text-align: left;
  overflow: hidden;
}

.videos-grid {
  display: grid;
  grid-template-columns: 360px 1fr;

  gap: 3rem;
  align-items: center;

  max-width: 1200px;
  margin: 0 auto;

  background: transparent !important;
}

.videos-zuggy {
  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
  overflow: visible;

  min-height: 420px;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Synth/warp tunnel effect removed */

.video-zuggy-image {
  width: min(420px, 100%);
  max-width: 420px;

  display: block;

  position: relative;
  z-index: 2;

  background: transparent !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  filter:
    drop-shadow(0 0 18px rgba(255,0,180,0.28))
    drop-shadow(0 0 36px rgba(180,0,255,0.22))
    drop-shadow(0 0 80px rgba(255,0,180,0.12));

  animation:
    zugPulse 6s ease-in-out infinite,
    zugGlitch 8s infinite;
}

/* =========================================
   SYNTH ZUGGY GLITCH
========================================= */

@keyframes zugGlitch {

  0%, 100% {
    transform: translate(0,0);
    opacity: 1;
  }

  2% {
    transform: translate(-2px,1px);
  }

  2.5% {
    transform: translate(2px,-1px);
  }

  3% {
    transform: translate(0,0);
  }

  18.3% {
    transform: translate(1px,-2px);

    filter:
      brightness(1.15)
      hue-rotate(-8deg)
      drop-shadow(-4px 0 rgba(255,0,180,0.35))
      drop-shadow(4px 0 rgba(0,255,255,0.25))
      drop-shadow(0 0 24px rgba(255,0,180,0.22));
  }

  18.7% {
    transform: translate(-1px,1px);
  }

  19% {
    transform: translate(0,0);
  }

  41.4% {
    transform: skewX(1deg) translateX(-2px);
  }

  41.8% {
    transform: skewX(-1deg) translateX(2px);
  }

  42% {
    transform: translate(0,0);
  }

  63.3% {
    opacity: 0.88;
  }

  63.6% {
    opacity: 1;
  }

  79.4% {
    transform: translate(1px,-1px) scale(1.01);

    filter:
      brightness(1.2)
      contrast(1.08)
      drop-shadow(-3px 0 rgba(255,0,180,0.3))
      drop-shadow(3px 0 rgba(0,255,255,0.22))
      drop-shadow(0 0 30px rgba(255,0,180,0.25));
  }

  79.8% {
    transform: translate(-1px,1px);
  }

  80% {
    transform: translate(0,0);
  }

}

.videos-content h2 {
  margin-bottom: 1rem;
}

.videos-content p {
  max-width: 620px;

  color: var(--muted);

  margin-bottom: 2rem;

  font-size: 1.05rem;
  line-height: 1.7;
}

/* =========================================
   MERCH
========================================= */

.merch-box {
  display: block;

  max-width: 680px;

  margin: 2rem auto 0;
  padding: 2.4rem;

  transition: 0.3s ease;
}

.merch-box::before {
  content: "OFFICIAL SHOP";

  display: block;

  color: rgba(57,255,20,0.55);

  font-size: 0.78rem;
  letter-spacing: 5px;
  font-weight: 900;

  margin-bottom: 1rem;
}

.merch-box h3 {
  font-size: 1.8rem;
  text-transform: uppercase;
}

.merch-box p {
  max-width: 520px;

  margin: 0 auto;

  line-height: 1.7;
}

/* =========================================
   CONTACT
========================================= */

.contact-form-box {
  max-width: 760px;

  margin: 0 auto;
  padding: 2rem;

  text-align: left;
}

/* =========================================
   WPFORMS
========================================= */

.wpforms-container {
  margin: 0 !important;
}

.wpforms-field-label,
.wpforms-field-sublabel {
  color: var(--text) !important;
}

.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  background: #050705 !important;

  color: var(--text) !important;

  border: 1px solid rgba(57,255,20,0.35) !important;

  border-radius: 10px !important;

  padding: 0.9rem !important;
}

.wpforms-field input::placeholder,
.wpforms-field textarea::placeholder {
  color: #8f8f8f !important;
}

.wpforms-submit {
  background: var(--green) !important;

  color: #000 !important;

  border: none !important;

  border-radius: 999px !important;

  padding: 0.95rem 1.5rem !important;

  font-weight: 900 !important;

  text-transform: uppercase !important;

  letter-spacing: 1px !important;
}

/* =========================================
   FOOTER
========================================= */

footer {
  padding: 2rem 6%;

  background: #000;

  text-align: center;

  border-top: 1px solid rgba(57,255,20,0.14);
}

footer p {
  color: var(--muted);
  font-size: 0.9rem;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

  .navbar {
    flex-direction: column;
    padding: 1.3rem 0;
  }

  .brand {
    justify-content: center;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-inner {
    grid-template-columns: 1fr;

    text-align: center;

    gap: 2rem;

    padding: 3rem 0;
  }

  .hero-content p {
    margin: 0 auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .zuggy {
    width: min(340px, 90%);
  }

  .about-grid,
  .videos-grid {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .videos-section {
    text-align: center;
  }

  .videos-zuggy {
    min-height: 360px;
  }

  .videos-content p {
    margin: 0 auto 2rem;
  }

  .video-zuggy-image {
    max-width: 260px;
  }

  .about-section {
    text-align: center;
  }

  .about-image {
    height: 300px;
  }
}

@media (max-width: 600px) {

  .hero,
  .section {
    padding-left: 5%;
    padding-right: 5%;
  }

  .brand-logo {
    width: 80px;
  }

  .brand-main {
    font-size: 1.45rem;
    letter-spacing: 2px;
  }

  .brand-sub {
    font-size: 0.72rem;
    letter-spacing: 4px;
  }

  .hero h1 {
    font-size: 2.65rem;
  }

  .card-image {
    height: 200px;
  }

  .merch-box,
  .contact-form-box {
    padding: 1.4rem;
  }

  .merch-box h3 {
    font-size: 1.35rem;
  }

  .videos-zuggy {
    min-height: 300px;
  }
}