/* ============================================
   HASHTRON BASE STYLES
   ============================================ */
a.floating-youtube-btn i {
  font-size: 20px;
}

#episodes .cyan-text {
    color: #FF4D00;
}

a.floating-youtube-btn:visited {
  color: #00EEFF;
}

:root {
  --cyan: #00EEFF;
  --orange: #FF4D00;
  --bg: #060B18;
  --panel: #0D1B2A;
  --white: #FFFFFF;
  --cyan-glow: 0 0 10px #00EEFF, 0 0 30px #00EEFF55;
  --orange-glow: 0 0 10px #FF4D00, 0 0 30px #FF4D0055;
}

/* Prevent default visited link colors from turning purple */
a:visited {
  color: #0d6efd;
  /* Fallback to Bootstrap's default link color */
}

.copyright-bar a {
  color: var(--orange);
}

.cmf-card:hover .redacted {
  background: rgb(255 255 255 / 0%) !important;
  color: #ff0000 !important;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  overflow-x: hidden;
}

/* SCROLLBAR */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #060B18;
}

::-webkit-scrollbar-thumb {
  background: var(--cyan);
  border-radius: 3px;
}

/* GRID OVERLAY */
.grid-bg {
  position: relative;
}

.grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 238, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 238, 255, .05) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

/* SECTION DIVIDER */
.section-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: var(--cyan-glow);
  margin: 0;
}

/* TYPOGRAPHY */
.orbitron {
  font-family: 'Orbitron', sans-serif;
}

.section-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.cyan-text {
  color: var(--cyan);
}

.orange-text {
  color: var(--orange);
}

.title-bar {
  display: inline-block;
  height: 3px;
  width: 80px;
  background: var(--cyan);
  box-shadow: var(--cyan-glow);
  margin-bottom: 10px;
  border-radius: 2px;
}

/* ANIMATIONS */
@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 8px var(--cyan), 0 0 20px #00EEFF44;
  }

  50% {
    box-shadow: 0 0 20px var(--cyan), 0 0 50px #00EEFF88;
  }
}

@keyframes float {

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

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

@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100vh);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flicker {

  0%,
  100% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  93% {
    opacity: .7;
  }

  94% {
    opacity: 1;
  }

  96% {
    opacity: .8;
  }

  97% {
    opacity: 1;
  }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== NAVBAR ==================== */
#mainNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: all .4s ease;
  padding: .8rem 0;
}

#mainNav.solid-nav,
#mainNav.scrolled {
  background: rgba(6, 11, 24, .92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 238, 255, .2);
  padding: .5rem 0;
}

.nav-logo {
  text-decoration: none;
}

.nav-logo img,
.custom-logo-link img {
  transition: transform 0.3s ease, filter 0.3s ease;
  height: 40px;
  width: auto;
  max-width: 100%;
}

.nav-logo img:hover,
.custom-logo-link img:hover {
  transform: scale(1.05);
  filter: drop-shadow(var(--cyan-glow));
}

.navbar-nav .nav-link,
.navbar-nav .nav-link:visited {
  font-family: 'Orbitron', sans-serif;
  font-size: .72rem;
  letter-spacing: .12em;
  color: #fff !important;
  text-transform: uppercase;
  padding: .4rem 1rem !important;
  transition: color .3s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
  color: var(--cyan) !important;
  text-shadow: 0 0 8px var(--cyan);
}

.btn-nav-cta,
.btn-nav-cta:visited {
  font-family: 'Orbitron', sans-serif;
  font-size: .7rem;
  letter-spacing: .1em;
  background: var(--orange);
  color: #fff !important;
  border: none;
  padding: .45rem 1.1rem;
  border-radius: 3px;
  text-decoration: none;
  transition: all .3s;
  text-transform: uppercase;
  display: inline-block;
}

.btn-nav-cta:hover {
  background: #ff6622;
  box-shadow: var(--orange-glow);
}

.header-social-links {
  display: flex;
  align-items: center;
}

@media (max-width: 991.98px) {
  .header-social-links {
    justify-content: start;
    margin-top: 5px;
  }
}

.navbar-toggler {
  position: relative;
  width: 44px;
  height: 38px;
  border: 1px solid rgba(0, 238, 255, .5);
  border-radius: 4px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.3s ease;
  padding: 0;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  border-color: var(--cyan);
  box-shadow: var(--cyan-glow) !important;
}

.toggler-icon-wrapper {
  position: relative;
  width: 20px;
  height: 14px;
}

.toggler-icon-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--cyan);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s ease;
  border-radius: 2px;
}

.top-bar {
  top: 0px;
}

.middle-bar {
  top: 6px;
}

.bottom-bar {
  top: 12px;
}

/* Form an 'X' when menu is open (not collapsed) */
.navbar-toggler:not(.collapsed) .top-bar {
  transform: translateY(6px) rotate(45deg);
}

.navbar-toggler:not(.collapsed) .middle-bar {
  opacity: 0;
  transform: scale(0);
}

.navbar-toggler:not(.collapsed) .bottom-bar {
  transform: translateY(-6px) rotate(-45deg);
}

/* ==================== HERO ==================== */
#hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #060B18;
}

.hero-bg {
  position: absolute;
  inset: 0;
  /* background-image: url('/wp-content/uploads/2026/06/Harvie-hashtron-Hero-Image-scaled.webp'); */
  background-image: url('/wp-content/uploads/2026/06/Harvie-hashtron-Banner-Image-scaled.webp');
  background-size: cover;
  background-position: center;
  /* filter: brightness(.45) saturate(1.3); */
  filter: brightness(.75) saturate(1.3);
}

/* .hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6, 11, 24, .3) 0%, rgba(6, 11, 24, .6) 60%, rgba(6, 11, 24, 1) 100%);
} */

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(6 11 24 / 0%) 0%, rgb(6 11 24 / 46%) 60%, rgb(6 11 24 / 0%) 100%);
}

.scanline-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.scanline-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(transparent, rgba(0, 238, 255, .04), transparent);
  animation: scanline 6s linear infinite;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 2rem;
}

.hero-subtitle {
  font-family: 'Orbitron', sans-serif;
  font-size: .7rem;
  letter-spacing: .4em;
  /* color: rgba(0, 238, 255, .6); */
  color: rgb(255 255 255);
  margin-bottom: -10px;
  text-transform: uppercase;
}

.hero-new-badge {
  display: inline-block;
  margin: 0.5rem auto 1.5rem;
  z-index: 10;
  border: 1px solid var(--cyan);
  background: rgba(0, 238, 255, .1);
  padding: .4rem .9rem;
  border-radius: 3px;
  font-family: 'Orbitron', sans-serif;
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--cyan);
  animation: pulse-glow 2s infinite;
  width: 516px;
  max-width: 90%;
  box-sizing: border-box;
  text-align: center;
}

.hero-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 7.5rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 20px #00EEFF, 0 0 60px #00EEFF88, 0 0 120px #00EEFF44;
  line-height: 1;
  animation: flicker 5s infinite;
}

.hero-tagline {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.7rem, 2.2vw, 1.15rem);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--orange);
    margin: 0rem 0 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 6px #000, 0 0 15px var(--orange), 0 0 30px rgba(255, 77, 0, 0.6);
}

.btn-watch,
.btn-watch:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  gap: .5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: .78rem;
  letter-spacing: .1em;
  background: var(--cyan);
  color: #060B18;
  font-weight: 700;
  padding: .75rem 2rem;
  border-radius: 3px;
  text-decoration: none;
  transition: all .3s;
  text-transform: uppercase;
  border: none;
}

.btn-watch:hover {
  background: #00ccdd;
  box-shadow: var(--cyan-glow);
  color: #060B18;
}

.btn-episodes,
.btn-episodes:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  gap: .5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: .78rem;
  letter-spacing: .1em;
  border: 2px solid var(--orange);
  color: var(--orange);
  padding: .75rem 2rem;
  border-radius: 3px;
  text-decoration: none;
  transition: all .3s;
  text-transform: uppercase;
  background: transparent;
}

.btn-episodes:hover {
  background: var(--orange);
  color: #fff;
  box-shadow: var(--orange-glow);
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: float linear infinite;
}

/* ==================== ABOUT ==================== */
#about {
  padding: 100px 0;
  position: relative;
  background: var(--bg);
}

.about-panel {
  background: rgba(13, 27, 42, .8);
  border: 1px solid rgba(0, 238, 255, .15);
  border-radius: 8px;
  padding: 2.5rem;
  backdrop-filter: blur(8px);
}

.about-synopsis {
  font-size: 1.1rem;
  line-height: 1.9;
  color: #fff;
}

.hud-badge {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(0, 238, 255, .05);
  border: 1px solid rgba(0, 238, 255, .2);
  border-left: 3px solid var(--cyan);
  border-radius: 5px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  transition: all .3s;
}

.hud-badge:hover {
  background: rgba(0, 238, 255, .1);
  border-left-color: var(--cyan);
  box-shadow: inset 3px 0 0 var(--cyan);
}

.hud-icon {
  font-size: 1.5rem;
  color: var(--cyan);
  flex-shrink: 0;
  margin-top: .1rem;
}

.hud-label {
  font-family: 'Orbitron', sans-serif;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--cyan);
  margin-bottom: .2rem;
}

.hud-desc {
  font-size: .9rem;
  color: rgba(255, 255, 255, .65);
}

/* Shared Section Container styling to eliminate inline style="z-index: 1;" */
#about .container,
#characters .container,
#episodes .container,
#media .container,
#features .container,
#classified .container {
  position: relative;
  z-index: 1;
}

.strong-cyan {
  color: var(--cyan) !important;
}

.strong-red {
  color: #ff5555 !important;
}

/* ==================== CHARACTERS ==================== */
#characters {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--bg) 0%, #07111f 100%);
}

.char-card {
  background: rgba(13, 27, 42, .85);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
  cursor: pointer;
  height: 100%;
  position: relative;
}

.char-card.hero-card {
  border: 1px solid rgba(0, 238, 255, .3);
}

.char-card.villain-card {
  border: 1px solid rgba(255, 50, 50, .3);
}

.char-card:hover {
  transform: translateY(-10px);
}

.char-card.hero-card:hover {
  box-shadow:
    0 20px 55px rgba(0, 238, 255, .18),
    0 0 0 1px rgba(0, 238, 255, .65),
    0 0 22px rgba(0, 238, 255, .12);
}

.char-card.villain-card:hover {
  box-shadow:
    0 20px 55px rgba(255, 50, 50, .18),
    0 0 0 1px rgba(255, 50, 50, .65),
    0 0 22px rgba(255, 50, 50, .12);
}

.char-img-wrap {
  height: 280px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.char-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .45s ease, filter .3s ease;
}

.char-img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(transparent, rgba(13, 27, 42, .95));
}

.villain-card .char-img-overlay {
  background: linear-gradient(transparent, rgba(40, 5, 5, .95)) !important;
}

.char-body {
  padding: 1.2rem;
  transition: opacity .25s ease, transform .35s ease;
}

.char-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: .1em;
  margin-bottom: .2rem;
}

.hero-card .char-name {
  color: var(--cyan);
}

.villain-card .char-name {
  color: #ff5555;
}

.char-role {
  font-size: .85rem;
  color: #fff;
  margin-bottom: .7rem;
}

.char-hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .95rem 1rem 1rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .2, 1);
  pointer-events: none;
}

.char-card.hero-card .char-hover-overlay {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 238, 255, .22), rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, rgba(5, 12, 20, .25), rgba(13, 27, 42, .88) 45%, rgba(13, 27, 42, .98));
  backdrop-filter: blur(6px);
}

.char-card.villain-card .char-hover-overlay {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 50, 50, .22), rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, rgba(20, 6, 6, .25), rgba(40, 5, 5, .88) 45%, rgba(40, 5, 5, .98));
  backdrop-filter: blur(6px);
}

.char-card:hover .char-hover-overlay,
.char-card:focus-visible .char-hover-overlay {
  opacity: 1;
  transform: translateY(0);
}

.char-hover-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, .06) 0px,
      rgba(255, 255, 255, .02) 2px,
      rgba(0, 0, 0, 0) 6px);
  opacity: .18;
  mix-blend-mode: overlay;
}

.char-hover-overlay::after {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0) 65%);
  transform: translateX(-30%) rotate(8deg);
  opacity: 0;
  transition: opacity .2s ease;
}

.char-card:hover .char-hover-overlay::after,
.char-card:focus-visible .char-hover-overlay::after {
  opacity: .55;
  animation: charOverlaySweep 1.15s ease forwards;
}

.char-hover-overlay>* {
  position: relative;
  z-index: 1;
}

.char-hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .4rem .55rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  background: rgba(0, 0, 0, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

.char-hud-id {
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}

.char-hud-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .22rem .55rem;
  border-radius: 999px;
  font-family: 'Orbitron', sans-serif;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .15);
}

.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.chip-ally {
  color: var(--cyan);
  border-color: rgba(0, 238, 255, .45);
}

.chip-hostile {
  color: #ff8a3d;
  border-color: rgba(255, 138, 61, .5);
}

.char-hud-body {
  padding: .9rem .55rem .6rem;
}

.char-hud-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  letter-spacing: .16em;
  font-size: 1.15rem;
  margin-bottom: .55rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 0 22px rgba(255, 255, 255, .12);
}

.char-card.hero-card .char-hud-name {
  color: rgba(210, 255, 255, .98);
  text-shadow: 0 0 18px rgba(0, 238, 255, .25);
}

.char-card.villain-card .char-hud-name {
  color: rgba(255, 230, 220, .98);
  text-shadow: 0 0 18px rgba(255, 138, 61, .25);
}

.char-hover-info {
  margin: 0;
}

.char-hover-info p {
  font-size: 17px;
  line-height: 1.45;
  color: rgb(255 255 255);
  margin: .35rem 0;
}

.char-card:hover .char-img-wrap img,
.char-card:focus-visible .char-img-wrap img {
  filter: saturate(1.1) contrast(1.08) brightness(.75);
  transform: scale(1.03);
}

.char-card:hover .char-body,
.char-card:focus-visible .char-body {
  opacity: 0;
  transform: translateY(14px);
}

@keyframes charOverlaySweep {
  0% {
    transform: translateX(-35%) rotate(8deg);
  }

  100% {
    transform: translateX(35%) rotate(8deg);
  }
}

.char-card:hover .char-hover-info p,
.char-card:focus-visible .char-hover-info p {
  animation: charInfoPop .35s ease both;
}

.char-card:hover .char-hover-info p:nth-of-type(2),
.char-card:focus-visible .char-hover-info p:nth-of-type(2) {
  animation-delay: .06s;
}

.char-card:hover .char-hover-info p:nth-of-type(3),
.char-card:focus-visible .char-hover-info p:nth-of-type(3) {
  animation-delay: .12s;
}

@keyframes charInfoPop {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.char-card:focus-visible {
  outline: none;
}

.char-card.hero-card:focus-visible {
  box-shadow:
    0 20px 55px rgba(0, 238, 255, .18),
    0 0 0 1px rgba(0, 238, 255, .65),
    0 0 22px rgba(0, 238, 255, .12);
}

.char-card.villain-card:focus-visible {
  box-shadow:
    0 20px 55px rgba(255, 50, 50, .18),
    0 0 0 1px rgba(255, 50, 50, .65),
    0 0 22px rgba(255, 50, 50, .12);
}

.faction-tag {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: .6rem;
  letter-spacing: .15em;
  padding: .25rem .7rem;
  border-radius: 2px;
}

.faction-hero {
  background: rgba(0, 238, 255, .1);
  border: 1px solid var(--cyan);
  color: var(--cyan);
}

.faction-villain {
  background: rgba(255, 50, 50, .1);
  border: 1px solid #ff3232;
  color: #ff5555;
}

/* ==================== EPISODES ==================== */
#episodes {
  padding: 100px 0;
  background: var(--bg);
}

.episode-sidebar {
  background: rgba(13, 27, 42, .9);
  border: 1px solid rgba(0, 238, 255, .15);
  border-radius: 8px;
  overflow-y: auto;
  max-height: 420px;
}

.episode-sidebar::-webkit-scrollbar {
  width: 4px;
}

.episode-sidebar::-webkit-scrollbar-thumb {
  background: var(--cyan);
}

.ep-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all .3s;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ep-item:hover {
  background: rgba(0, 238, 255, .07);
}

.ep-item.active {
  border-left-color: var(--cyan);
  background: rgba(0, 238, 255, .1);
}

.ep-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 238, 255, .15);
  border: 1px solid var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: .7rem;
  color: var(--cyan);
  flex-shrink: 0;
}

.ep-item.active .ep-num {
  background: var(--cyan);
  color: #060B18;
}

.ep-info {
  flex: 1;
  min-width: 0;
}

.ep-title {
  font-family: 'Orbitron', sans-serif;
  font-size: .75rem;
  letter-spacing: .05em;
  color: var(--white);
  margin-bottom: .2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-desc {
  font-size: .8rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .3rem;
}

.ep-duration {
  font-size: .7rem;
  background: rgba(0, 238, 255, .1);
  border: 1px solid rgba(0, 238, 255, .2);
  color: var(--cyan);
  padding: .1rem .4rem;
  border-radius: 10px;
}

.ep-play {
  color: rgba(255, 255, 255, .3);
  transition: color .3s;
  font-size: 1rem;
}

.ep-item:hover .ep-play,
.ep-item.active .ep-play {
  color: var(--cyan);
}

.video-preview-card {
  background: rgba(13, 27, 42, 0.85);
  border: 1px solid rgba(0, 238, 255, 0.2);
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.video-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
  border-bottom: 1px solid rgba(0, 238, 255, 0.15);
}

.video-preview-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video-preview-wrap:hover img {
  transform: scale(1.03);
}

.video-preview-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 11, 24, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.video-preview-wrap:hover .video-preview-overlay {
  background: rgba(6, 11, 24, 0.6);
}

.video-play-btn {
  position: relative;
  width: 56px;
  height: 56px;
  background: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #fff;
  box-shadow: var(--orange-glow);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-bottom: 0.8rem;
  padding-left: 4px;
  z-index: 2;
}

.video-play-btn::before,
.video-play-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
}

.video-play-btn::before {
  animation: playRipple 2s infinite ease-out;
}

.video-play-btn::after {
  animation: playRipple 2s infinite ease-out 1s;
}

@keyframes playRipple {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.video-preview-wrap:hover .video-play-btn {
  transform: scale(1.15);
}

.video-play-hint {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--white);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  opacity: 0.8;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.video-preview-wrap:hover .video-play-hint {
  opacity: 1;
  color: var(--cyan);
  text-shadow: var(--cyan-glow);
}

.video-preview-info {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.video-preview-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 238, 255, 0.3);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.video-preview-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #fff;
  margin-bottom: 0;
}

.btn-youtube,
.btn-youtube:visited {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Orbitron', sans-serif;
  font-size: .78rem;
  letter-spacing: .08em;
  background: #FF0000;
  color: #fff;
  padding: .75rem 1.8rem;
  border-radius: 4px;
  text-decoration: none;
  border: none;
  transition: all .3s;
  text-transform: uppercase;
  cursor: pointer;
}

.btn-youtube:hover {
  background: #cc0000;
  box-shadow: 0 0 20px #FF000066;
  color: #fff;
}

/* Static Episode Banner Styles */
.video-preview-wrap.no-redirect {
  cursor: default !important;
}

.video-preview-wrap.no-redirect:hover img {
  transform: none !important;
}

/* ==================== OFFICIAL MEDIA ==================== */
#media {
  padding: 100px 0;
  background: linear-gradient(180deg, #07111f 0%, var(--bg) 100%);
  overflow: hidden;
}

.poster-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(0, 238, 255, 0.2);
  box-shadow: 0 10px 35px rgba(0, 238, 255, 0.15);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  aspect-ratio: 2 / 3;
  background: rgba(13, 27, 42, 0.5);
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.poster-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--cyan);
  box-shadow: var(--cyan-glow);
}

.poster-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card {
  background: rgba(13, 27, 42, 0.8);
  border: 1px solid rgba(0, 238, 255, 0.15);
  border-radius: 10px;
  padding: 2.2rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
}

.media-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  transition: all 0.3s ease;
}

.media-card.youtube-card::before {
  background: linear-gradient(90deg, #ff0000, #ff5555);
}

.media-card.instagram-card::before {
  background: linear-gradient(90deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.media-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 238, 255, 0.3);
}

.media-card.youtube-card:hover {
  box-shadow: 0 15px 35px rgba(255, 0, 0, 0.2), 0 0 15px rgba(255, 0, 0, 0.1);
}

.media-card.instagram-card:hover {
  box-shadow: 0 15px 35px rgba(220, 39, 67, 0.2), 0 0 15px rgba(220, 39, 67, 0.1);
}

.media-icon {
  font-size: 2.8rem;
  margin-bottom: 1.2rem;
}

.youtube-card .media-icon {
  color: #FF0000;
  text-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

.instagram-card .media-icon {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(214, 36, 159, 0.3));
}

.media-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.8rem;
  color: var(--white);
}

.media-desc {
  font-size: 0.92rem;
  color: #fff;
  line-height: 1.6;
  margin-bottom: 1.8rem;
}

.media-action-btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
  text-align: center;
  display: inline-block;
  width: 100%;
}

.youtube-card .media-action-btn,
.youtube-card .media-action-btn:visited {
  background: #FF0000;
  color: #fff;
  border: 1px solid #FF0000;
}

.youtube-card .media-action-btn:hover {
  background: transparent;
  color: #FF0000;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
}

.instagram-card .media-action-btn,
.instagram-card .media-action-btn:visited {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border: 1px solid transparent;
}

.instagram-card .media-action-btn:hover {
  background: transparent;
  color: #dc2743;
  border-color: #dc2743;
  box-shadow: 0 0 15px rgba(220, 39, 67, 0.5);
}

/* ==================== FOOTER ==================== */
#footer {
  background: var(--bg);
  border-top: 2px solid var(--cyan);
  box-shadow: 0 -4px 30px rgba(0, 238, 255, .2);
}

.footer-cta {
  padding: 70px 0;
  text-align: center;
  border-bottom: 1px solid rgba(0, 238, 255, .1);
}

.footer-cta-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--white);
  margin-bottom: .7rem;
}

.footer-cta-sub {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 2rem;
}

.footer-email-form {
  display: flex;
  gap: .8rem;
  max-width: 480px;
  margin: 0 auto;
}

.footer-email-input {
  flex: 1;
  background: rgba(13, 27, 42, .9);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  padding: .75rem 1.2rem;
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: box-shadow .3s;
}

.footer-email-input:focus {
  box-shadow: var(--cyan-glow);
}

.footer-email-input::placeholder {
  color: rgba(255, 255, 255, .35);
}

.btn-join {
  font-family: 'Orbitron', sans-serif;
  font-size: .75rem;
  letter-spacing: .1em;
  background: var(--orange);
  color: #fff;
  border: none;
  padding: .75rem 1.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all .3s;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-join:hover {
  background: #ff6622;
  box-shadow: var(--orange-glow);
}

.footer-bottom {
  padding: 50px 0 20px;
}

.footer-logo img {
  transition: transform 0.3s ease, filter 0.3s ease;
  height: 48px;
  width: auto;
  max-width: 100%;
  margin-bottom: 0.8rem;
  filter: drop-shadow(0 0 5px rgba(0, 238, 255, 0.2));
}

.footer-logo img:hover {
  transform: scale(1.03);
  filter: drop-shadow(var(--cyan-glow));
}

.footer-tagline {
  color: #fff;
  font-size: .85rem;
  margin-top: .4rem;
}

.footer-tagline-desc {
  color: #fff;
  font-size: .85rem;
  margin-top: 1rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  display: inline-block;
  text-align: left;
}

.footer-links li {
  margin-bottom: .6rem;
}

.footer-links a,
.footer-links a:visited {
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  transition: color .3s;
}

.footer-links a:hover {
  color: var(--cyan);
}

.footer-links-title {
  font-family: 'Orbitron', sans-serif;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--cyan);
  margin-bottom: 1.2rem;
}

.social-btn, .social-btn:visited {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #FF4D00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FF4D00;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all .3s;
    margin: .25rem;
}

.social-btn i,
.floating-youtube-btn i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1em;
  height: 1em;
  line-height: 1;
}

/* YouTube play icon has a slightly bottom-heavy visual weight, shift it up slightly */
.social-btn .bi-youtube,
.floating-youtube-btn .bi-youtube {
  transform: translateY(-0.03em);
}

/* Instagram icon has a slightly top-heavy visual weight, shift it down slightly */
.social-btn .bi-instagram {
  transform: translateY(-1px);
}

.social-btn:hover {
    background: #ff4d00e0;
    color: #ffffff;
    border-color: #FF4D00;
    box-shadow: 0 0 15px #ff4d00b5;
}

.copyright-bar {
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
  padding: 15px 0px 0px 0px;
  color: #fff;
  font-size: 16px;
  margin-top: 2rem;
}

/* ==================== GAME FEATURES ==================== */
#features {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--bg) 0%, #07111f 100%);
  position: relative;
}

.grid-bg-absolute {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#classified .grid-bg-absolute {
  opacity: 0.5;
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.feat-card {
  perspective: 900px;
  height: 210px;
  cursor: pointer;
}

.feat-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
  transform-style: preserve-3d;
}

.feat-card:hover .feat-card-inner {
  transform: rotateY(180deg);
}

.feat-front,
.feat-back {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
  text-align: center;
}

.feat-front {
  background: rgba(13, 27, 42, .9);
  border: 1px solid rgba(0, 238, 255, .2);
}

.feat-back {
  background: rgba(0, 238, 255, .08);
  border: 1px solid var(--cyan);
  transform: rotateY(180deg);
}

.feat-icon {
  font-size: 2.4rem;
  margin-bottom: .7rem;
  filter: drop-shadow(0 0 10px var(--cyan));
}

.feat-title {
  font-family: 'Orbitron', sans-serif;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--cyan);
  margin-bottom: .4rem;
}

.feat-front p {
  font-size: .82rem;
  color: rgba(255, 255, 255, .5);
}

.feat-back p {
  font-size: .86rem;
  color: rgba(255, 255, 255, .85);
  line-height: 1.7;
}

.feat-back-tag {
  font-family: 'Orbitron', sans-serif;
  font-size: .6rem;
  letter-spacing: .15em;
  color: var(--orange);
  margin-bottom: .6rem;
  border: 1px solid var(--orange);
  padding: .2rem .6rem;
  border-radius: 2px;
}

/* ==================== CLASSIFIED MISSION FILES ==================== */
#classified {
  padding: 100px 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.scanline-grid-effect {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 238, 255, .03) 2px, rgba(0, 238, 255, .03) 4px);
  pointer-events: none;
  z-index: 0;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.mission-card {
  position: relative;
  background: rgba(6, 11, 24, .8);
  border: 1px solid rgba(0, 238, 255, .2);
  padding: 2rem;
  border-radius: 5px;
  overflow: hidden;
  cursor: crosshair;
  transition: all .3s;
}

.mission-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--orange);
  opacity: 0.5;
  transition: all .3s;
}

.mission-card:hover {
  border-color: var(--orange);
  box-shadow: 0 0 20px rgba(255, 77, 0, .15);
  transform: translateY(-5px);
}

.mission-card:hover::before {
  opacity: 1;
  box-shadow: 0 0 10px var(--orange);
}

.m-status {
  font-family: 'Orbitron', sans-serif;
  font-size: .65rem;
  color: #FF4D00;
  letter-spacing: .2em;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-status-dot {
  width: 8px;
  height: 8px;
  background: #FF4D00;
  border-radius: 50%;
  box-shadow: 0 0 8px #FF4D00;
  animation: pulse 2s infinite;
}

.m-status-dot.cyan-dot {
  background: #00EEFF;
  box-shadow: 0 0 8px #00EEFF;
}

.m-code {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  color: var(--white);
  letter-spacing: .1em;
  margin-bottom: .5rem;
}

.m-target {
  font-size: .85rem;
  color: rgba(0, 238, 255, .7);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.m-redacted-block {
  background: rgba(255, 255, 255, .05);
  padding: 1rem;
  border-left: 2px solid rgba(255, 255, 255, .1);
}

.m-text {
  font-size: .9rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.6;
}

.redacted {
  background: rgba(255, 255, 255, .8);
  color: transparent;
  user-select: none;
  transition: all .3s;
  border-radius: 2px;
}

.mission-card:hover .redacted {
  background: transparent;
  color: var(--cyan);
  text-shadow: 0 0 5px rgba(0, 238, 255, .5);
}

.m-barcode {
  height: 20px;
  width: 100%;
  background: repeating-linear-gradient(90deg, var(--cyan), var(--cyan) 2px, transparent 2px, transparent 4px, var(--cyan) 4px, var(--cyan) 5px, transparent 5px, transparent 8px);
  opacity: 0.2;
  margin-top: 1.5rem;
  transition: opacity .3s;
}

.mission-card:hover .m-barcode {
  opacity: 0.6;
}

.title-bar.orange-bar {
  background: var(--orange);
  box-shadow: var(--orange-glow);
}

/* ==================== FUTURISTIC DROPDOWN MENUS ==================== */
.navbar-nav .dropdown-menu {
  background: rgba(13, 27, 42, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 238, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 238, 255, 0.15);
  padding: 0.5rem 0;
  border-radius: 4px;
  animation: fadeUp 0.3s ease-out;
}

.navbar-nav .dropdown-item,
.navbar-nav .dropdown-item:visited {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  padding: 0.6rem 1.5rem;
  transition: all 0.3s ease;
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  background: rgba(0, 238, 255, 0.1);
  color: var(--cyan);
  text-shadow: 0 0 5px var(--cyan);
}

.navbar-nav .dropdown-item.active,
.navbar-nav .dropdown-item:active {
  background: rgba(0, 238, 255, 0.2);
  color: var(--white);
}

.navbar-nav .dropdown-toggle::after {
  vertical-align: middle;
  margin-left: 0.4em;
  transition: transform 0.3s ease;
}

.navbar-nav .show>.dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Level 3 Submenus positioning */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}

/* ==================== STANDARD PAGES & POSTS STYLING ==================== */
.site-main article {
  background: rgba(13, 27, 42, 0.8);
  border: 1px solid rgba(0, 238, 255, 0.15);
  border-radius: 8px;
  padding: 3rem;
  backdrop-filter: blur(8px);
  margin-bottom: 2rem;
}

.entry-header {
  margin-bottom: 1.5rem;
}

.entry-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: .05em;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 238, 255, 0.3);
  margin-bottom: 0;
  text-transform: uppercase;
}

.entry-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}

.entry-content p {
  margin-bottom: 1.5rem;
}

.entry-content a,
.entry-content a:visited {
  color: var(--cyan);
  text-decoration: none;
  transition: all 0.3s ease;
}

.entry-content a:hover {
  color: #fff;
  text-shadow: var(--cyan-glow);
}

/* Form inputs styling for standard pages */
.site-main input[type="text"],
.site-main input[type="email"],
.site-main input[type="search"],
.site-main textarea {
  background: rgba(13, 27, 42, .9);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  padding: .75rem 1.2rem;
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: box-shadow .3s;
  max-width: 100%;
}

.site-main input[type="text"]:focus,
.site-main input[type="email"]:focus,
.site-main input[type="search"]:focus,
.site-main textarea:focus {
  box-shadow: var(--cyan-glow);
}

.site-main button,
.site-main input[type="submit"] {
  font-family: 'Orbitron', sans-serif;
  font-size: .75rem;
  letter-spacing: .1em;
  background: var(--orange);
  color: #fff;
  border: none;
  padding: .75rem 1.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all .3s;
  text-transform: uppercase;
}

.site-main button:hover,
.site-main input[type="submit"]:hover {
  background: #ff6622;
  box-shadow: var(--orange-glow);
}

.site-main .widget-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

/* ==================== SEAMLESS MEDIA MARQUEE SLIDER ==================== */
#media-slider-section {
  background: var(--bg);
  padding: 10px 0;
  position: relative;
  overflow: hidden;
}

/* Gradient fades on the edges for premium transition look */
#media-slider-section::before,
#media-slider-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 5;
  pointer-events: none;
}

#media-slider-section::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}

#media-slider-section::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}

.marquee-wrapper {
  display: flex;
  overflow: hidden;
  width: 100%;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 25s linear infinite;
  padding: 10px;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-slide {
  position: relative;
  width: 320px;
  height: auto;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 238, 255, 0.15);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 1.5rem;
  background: rgba(13, 27, 42, 0.85);
  /* Premium dark panel background */
}

.marquee-slide img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.marquee-slide img.img-contain {
  object-fit: contain;
  padding: 0px;
  object-position: center;
}

.marquee-slide img.img-cover {
  object-fit: cover;
  object-position: center;
}

.marquee-slide:hover {
  border-color: var(--cyan);
  box-shadow: var(--cyan-glow);
  transform: translateY(-5px);
}

.marquee-slide:hover img {
  transform: scale(1.05);
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ==================== CUSTOM HELIX CURSOR ==================== */
body.custom-cursor-enabled,
body.custom-cursor-enabled a,
body.custom-cursor-enabled button,
body.custom-cursor-enabled [role="button"],
body.custom-cursor-enabled .ep-item,
body.custom-cursor-enabled .feat-card,
body.custom-cursor-enabled .poster-card,
body.custom-cursor-enabled .media-card,
body.custom-cursor-enabled .video-preview-wrap,
body.custom-cursor-enabled .video-play-btn {
  cursor: none !important;
}

/* Center dot: glowing cyan circle */
.custom-cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--cyan);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.custom-cursor-dot.is-hovered {
  transform: translate(-50%, -50%) scale(1.6) !important;
  opacity: 1 !important;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

/* Trailing outer cursor containing the Helix image */
.custom-cursor-ring {
  width: 48px;
  height: 48px;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cursor-helix-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(0, 238, 255, 0.4)) drop-shadow(0 0 10px rgba(255, 77, 0, 0.2));
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.25s ease;
  animation: cursorFloat 3s infinite ease-in-out alternate;
}

/* Floating animation for the trailing Helix robot image to make it feel alive */
@keyframes cursorFloat {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  100% {
    transform: translateY(-4px) rotate(3deg);
  }
}

/* Hover state behavior for the Helix image (hidden, leaving only the dot cursor) */
.custom-cursor-ring.is-hovered {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.1) !important;
}

@keyframes cursorWobble {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-6deg);
  }

  75% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Nitro blue trail particles */
.cursor-trail-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(0, 238, 255, 0.9) 0%, rgba(0, 204, 221, 0.4) 50%, transparent 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(0, 238, 255, 0.6), 0 0 16px rgba(0, 238, 255, 0.3);
  animation: nitroTrail 0.6s forwards ease-out;
}

@keyframes nitroTrail {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }

  100% {
    transform: translate(-50%, -50%) scale(0.1) translateY(4px);
    opacity: 0;
  }
}

/* Text-hover states to ensure readability of text beneath the cursor */
.custom-cursor-ring.is-over-text {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.1) !important;
}

.custom-cursor-dot.is-over-text {
  transform: translate(-50%, -50%) scale(1.2) !important;
  opacity: 1 !important;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.cursor-trail-particle.is-over-text {
  opacity: 0 !important;
  /* Hide trail particles completely when cursor is above text */
}

/* Input-hover states to restore native text cursor inside form inputs */
.custom-cursor-ring.is-on-input,
.custom-cursor-dot.is-on-input {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.custom-cursor-enabled input,
body.custom-cursor-enabled textarea,
body.custom-cursor-enabled select {
  cursor: text !important;
}

/* ==================== 404 PAGE ==================== */
.error-404-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.cyber-panel-404 {
  background: rgba(13, 27, 42, 0.85);
  border: 1px solid rgba(0, 238, 255, 0.25);
  box-shadow: 0 15px 40px rgba(0, 238, 255, 0.1), inset 0 0 20px rgba(0, 238, 255, 0.05);
  border-radius: 12px;
  padding: 3.5rem 2.5rem;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
}

.cyber-panel-404::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--orange), var(--cyan));
  box-shadow: var(--cyan-glow);
}

.cyber-panel-404 .m-barcode {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 25px;
  background: repeating-linear-gradient(90deg,
      var(--cyan),
      var(--cyan) 2px,
      transparent 2px,
      transparent 6px,
      var(--cyan) 6px,
      var(--cyan) 10px,
      transparent 10px,
      transparent 12px);
  opacity: 0.3;
  pointer-events: none;
}

.glitch-title-404 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  /* font-size: clamp(6rem, 18vw, 9.5rem); */
  font-size: clamp(3rem, 10vw, 4.5rem);
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-shadow: var(--cyan-glow);
  line-height: 1;
  margin-bottom: 0.5rem;
  animation: cyberGlitch 4s infinite;
  user-select: none;
}

.cyber-error-subtitle {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--orange);
  text-shadow: var(--orange-glow);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.cyber-status-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(255, 77, 0, 0.08);
  border: 1px solid rgba(255, 77, 0, 0.3);
  border-left: 4px solid var(--orange);
  border-radius: 4px;
  padding: 0.6rem 1.2rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 2rem;
}

.cyber-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: var(--orange-glow);
  animation: cyberBlink 1.5s infinite;
}

.cyber-panel-404 p.error-desc {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

/* 404 Search Form */
.cyber-search-form {
  max-width: 500px;
  margin: 0 auto 3rem;
}

.cyber-search-group {
  display: flex;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0, 238, 255, 0.3);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(6, 11, 24, 0.6);
}

.cyber-search-group:focus-within {
  border-color: var(--cyan);
  box-shadow: var(--cyan-glow);
}

.cyber-search-input {
  flex: 1;
  background: rgba(6, 11, 24, 0.85);
  border: none;
  padding: 0.9rem 1.2rem;
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  outline: none;
  width: 100%;
}

.cyber-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}

.cyber-search-btn {
  background: var(--cyan);
  border: none;
  color: #060B18;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  padding: 0 1.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.cyber-search-btn:hover {
  background: #fff;
  color: #060B18;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.cyber-btn-group {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Animations */
@keyframes cyberBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes cyberGlitch {

  0%,
  100% {
    text-shadow: var(--cyan-glow);
    transform: skew(0deg);
  }

  92% {
    text-shadow: var(--cyan-glow);
    transform: skew(0deg);
  }

  93% {
    text-shadow: 3px 0 var(--orange), -3px 0 var(--cyan);
    transform: skew(4deg);
    color: #fff;
  }

  94% {
    text-shadow: -3px 0 var(--orange), 3px 0 var(--cyan);
    transform: skew(-3deg);
  }

  95% {
    text-shadow: var(--cyan-glow);
    transform: skew(0deg);
  }

  97% {
    text-shadow: 4px 0 var(--orange), -2px 0 var(--cyan);
    transform: skew(2deg);
  }

  98% {
    text-shadow: -2px 0 var(--orange), 4px 0 var(--cyan);
    transform: skew(-2deg);
  }
}

.tech-metadata-404 {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(0, 238, 255, 0.4);
  text-align: left;
  margin-top: 1rem;
  border-top: 1px solid rgba(0, 238, 255, 0.1);
  padding-top: 0.8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ==================== DUO SECTION ==================== */
#duo-profile {
  padding: 100px 0;
  background: linear-gradient(180deg, #07111f 0%, var(--bg) 100%);
  position: relative;
  overflow: hidden;
}

.duo-subtitle-wrap {
  display: inline-block;
  background: rgba(0, 238, 255, 0.05);
  border: 1px solid rgba(0, 238, 255, 0.2);
  padding: .3rem .8rem;
  border-radius: 4px;
}

.duo-corner-tag {
  font-family: 'Orbitron', sans-serif;
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--cyan);
  text-shadow: 0 0 5px rgba(0, 238, 255, 0.5);
}

.duo-cards-wrapper {
  perspective: 1000px;
}

.duo-card {
  background: rgba(13, 27, 42, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.duo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 4px;
  opacity: 0.3;
  pointer-events: none;
}

/* Card Borders & Glows (Inactive States) */
#duo-card-harvie {
  border-left: 3px solid rgba(0, 238, 255, 0.4);
}

#duo-card-hashtron {
  border-left: 3px solid rgba(255, 77, 0, 0.4);
}

.duo-card:hover {
  transform: translateY(-5px);
  background: rgba(13, 27, 42, 0.85);
}

#duo-card-harvie:hover {
  border-color: var(--cyan);
  box-shadow: 0 10px 30px rgba(0, 238, 255, 0.15);
}

#duo-card-hashtron:hover {
  border-color: var(--orange);
  box-shadow: 0 10px 30px rgba(255, 77, 0, 0.15);
}

/* Card Active States */
#duo-card-harvie.active {
  background: rgba(0, 238, 255, 0.07);
  border: 1px solid var(--cyan);
  border-left: 4px solid var(--cyan);
  box-shadow: var(--cyan-glow), inset 0 0 15px rgba(0, 238, 255, 0.1);
}

#duo-card-hashtron.active {
  background: rgba(255, 77, 0, 0.07);
  border: 1px solid var(--orange);
  border-left: 4px solid var(--orange);
  box-shadow: var(--orange-glow), inset 0 0 15px rgba(255, 77, 0, 0.1);
}

/* Dim states for other card when one is active - removed blur/grayscale as requested */
.duo-cards-wrapper.has-active .duo-card:not(.active) {
  /* No dimming, active tab is highlighted by box-shadow */
}

.duo-card-tag {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.4);
  display: block;
  margin-bottom: 0.3rem;
  transition: color 0.3s ease;
}

#duo-card-harvie.active .duo-card-tag {
  color: var(--cyan);
}

#duo-card-hashtron.active .duo-card-tag {
  color: var(--orange);
}

.duo-card-name {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

#duo-card-harvie .duo-card-name {
  color: rgba(255, 255, 255, 0.95);
}

#duo-card-harvie.active .duo-card-name {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 238, 255, 0.5);
}

#duo-card-hashtron .duo-card-name {
  color: rgba(255, 255, 255, 0.95);
}

#duo-card-hashtron.active .duo-card-name {
  color: var(--orange);
  text-shadow: 0 0 8px rgba(255, 77, 0, 0.5);
}

.duo-card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #fff;
  margin-bottom: 1.5rem;
}

.duo-traits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.duo-traits-list li {
  font-size: 0.85rem;
  margin-bottom: 0.65rem;
  display: flex;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

.trait-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 105px;
  flex-shrink: 0;
  margin-right: 15px;
}

.trait-icon {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.3s ease;
}

#duo-card-harvie.active .trait-icon {
  color: var(--cyan);
}

#duo-card-hashtron.active .trait-icon {
  color: var(--orange);
}

.trait-label {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease;
}

#duo-card-harvie.active .trait-label {
  color: var(--cyan);
}

#duo-card-hashtron.active .trait-label {
  color: var(--orange);
}

.trait-desc {
  display: flex;
  gap: 0.35rem;
  color: #fff;
}

.trait-dot {
  font-weight: bold;
  color: #fff;
}

.trait-text {
  flex: 1;
  font-family: 'Rajdhani', sans-serif;
}

/* ==================== HUD VISUALIZER ==================== */
.duo-visualizer-container {
  position: relative;
  background: rgba(6, 11, 24, 0.85);
  border: 1px solid rgba(0, 238, 255, 0.15);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.duo-visualizer-container.theme-harvie {
  border-color: rgba(0, 238, 255, 0.4);
  box-shadow: 0 15px 40px rgba(0, 238, 255, 0.08), 0 0 15px rgba(0, 238, 255, 0.05);
}

.duo-visualizer-container.theme-hashtron {
  border-color: rgba(255, 77, 0, 0.4);
  box-shadow: 0 15px 40px rgba(255, 77, 0, 0.08), 0 0 15px rgba(255, 77, 0, 0.05);
}

/* HUD Decorative Corners */
.hud-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 5;
  transition: border-color 0.4s ease;
}

.hud-corner.top-left {
  top: 6px;
  left: 6px;
  border-top: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}

.hud-corner.top-right {
  top: 6px;
  right: 6px;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
}

.hud-corner.bottom-left {
  bottom: 6px;
  left: 6px;
  border-bottom: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}

.hud-corner.bottom-right {
  bottom: 6px;
  right: 6px;
  border-bottom: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
}

.duo-visualizer-container.theme-hashtron .hud-corner {
  border-color: var(--orange);
}

/* HUD overlays */
.hud-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.5;
}

.hud-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(0, 238, 255, 0.15);
  box-shadow: 0 0 10px rgba(0, 238, 255, 0.5);
  z-index: 3;
  pointer-events: none;
  animation: hudScanline 4s linear infinite;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.duo-visualizer-container.theme-hashtron .hud-scanline {
  background: rgba(255, 77, 0, 0.15);
  box-shadow: 0 0 10px rgba(255, 77, 0, 0.5);
}

@keyframes hudScanline {
  0% {
    top: 0%;
  }

  100% {
    top: 100%;
  }
}

.duo-visualizer-img-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 27, 42, 0.2);
}

.duo-viz-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 1;
  padding: 0;
}

.duo-viz-img.active {
  opacity: 1;
  z-index: 2;
}

.hud-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 60%, rgba(6, 11, 24, 0.8) 100%);
  z-index: 3;
  pointer-events: none;
}

/* Removed glitch keyframes to ensure smooth hover transitions */

.hud-info-footer {
  background: rgba(13, 27, 42, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 4;
  position: relative;
}

#hud-info-sub {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: var(--cyan);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.1rem;
  transition: color 0.4s ease;
}

.duo-visualizer-container.theme-hashtron #hud-info-sub {
  color: var(--orange);
}

#hud-info-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white);
  text-transform: uppercase;
}

.hud-radar-reticle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 238, 255, 0.3);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: radarRotate 6s linear infinite;
  transition: border-color 0.4s ease;
}

.duo-visualizer-container.theme-hashtron .hud-radar-reticle {
  border-color: rgba(255, 77, 0, 0.3);
}

.radar-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 238, 255, 0.15);
  transition: border-color 0.4s ease;
}

.duo-visualizer-container.theme-hashtron .radar-circle {
  border-color: rgba(255, 77, 0, 0.15);
}

.radar-dot {
  width: 4px;
  height: 4px;
  background: var(--cyan);
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 14px;
  box-shadow: 0 0 8px var(--cyan);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.duo-visualizer-container.theme-hashtron .radar-dot {
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
}

@keyframes radarRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ==================== MOBILE DUO IMAGE SLOT ==================== */
/* Mobile image slot between cards — d-lg-none handles display:none on desktop */
.duo-mobile-img-slot {
  padding: 0.5rem 1rem;
}

.duo-mobile-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(0, 238, 255, 0.3);
  background: rgba(6, 11, 24, 0.85);
  box-shadow: 0 0 20px rgba(0, 238, 255, 0.07);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Orange border when Hashtron is active */
.duo-mobile-img-wrap.theme-hashtron {
  border-color: rgba(255, 77, 0, 0.35);
  box-shadow: 0 0 20px rgba(255, 77, 0, 0.07);
}

/* Stacked images — same cross-fade pattern as the right HUD column */
.duo-viz-img-m {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
}

.duo-viz-img-m.active {
  opacity: 1;
  z-index: 2;
}

/* ==================== WORKSHOP SECTION ==================== */
#workshop {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, #070e1e 100%);
}

/* Tag line above headline */
.workshop-tag-wrap {
  margin-bottom: 1.2rem;
}

.workshop-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  color: var(--cyan);
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0, 238, 255, 0.4);
}

.workshop-tag-line {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

/* Big display headline */
.workshop-headline {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.5rem;
}

/* Body paragraphs */
.workshop-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #fff;
  margin-bottom: 1rem;
  max-width: 480px;
}

/* ── Stage Cards 2×2 Grid ── */
.workshop-stages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2rem;
  /* border: 1px solid rgba(0, 238, 255, 0.15);
border-radius: 6px; */
  overflow: hidden;
}

.ws-card {
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(0, 238, 255, 0.1);
  background: rgba(13, 27, 42, 0.5);
  backdrop-filter: blur(6px);
  border-left: 3px solid rgba(0, 238, 255, 0.5);
  transition: background 0.4s ease, border-left-color 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
  position: relative;
  cursor: pointer;
}

.ws-card:hover,
.ws-card.active {
  background: rgba(0, 238, 255, 0.08);
  border-left-color: var(--cyan);
  border-color: rgba(0, 238, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 238, 255, 0.12);
  z-index: 10;
}

.ws-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: 0.3;
}

.ws-stage-num {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--cyan);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.ws-stage-title {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.ws-stage-desc {
  font-size: 0.8rem;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}

/* ── Orbital Orrery ── */
.ws-orrery {
  position: relative;
  width: 420px;
  height: 420px;
  flex-shrink: 0;
}

/* Central glowing planet */
.ws-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%,
      #ff8c40 0%,
      var(--orange) 45%,
      #a82800 80%,
      #5a1000 100%);
  box-shadow:
    0 0 40px rgba(255, 77, 0, 0.6),
    0 0 80px rgba(255, 77, 0, 0.25),
    inset -20px -15px 40px rgba(0, 0, 0, 0.5);
  animation: planetPulse 4s ease-in-out infinite;
  z-index: 4;
}

.ws-planet-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 77, 0, 0.18) 0%, transparent 70%);
  animation: planetPulse 4s ease-in-out infinite reverse;
  z-index: 3;
}

@keyframes planetPulse {

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

  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

/* Orbit rings — dashed concentric circles that rotate */
.ws-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border-style: dashed;
  transform-origin: center center;
}

.ws-orbit-1 {
  width: 230px;
  height: 230px;
  margin-top: -115px;
  margin-left: -115px;
  border-width: 1px;
  border-color: rgba(0, 238, 255, 0.45);
  animation: orbitSpin 18s linear infinite;
  z-index: 2;
}

.ws-orbit-2 {
  width: 320px;
  height: 320px;
  margin-top: -160px;
  margin-left: -160px;
  border-width: 1px;
  border-color: rgba(0, 238, 255, 0.35);
  animation: orbitSpin 28s linear infinite reverse;
  z-index: 2;
}

.ws-orbit-3 {
  width: 405px;
  height: 405px;
  margin-top: -202px;
  margin-left: -202px;
  border-width: 1px;
  border-color: rgba(0, 238, 255, 0.22);
  animation: orbitSpin 42s linear infinite;
  z-index: 2;
}

@keyframes orbitSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Orbit nodes container wrapper */
.ws-nodes-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  z-index: 5;
}

/* Orbit nodes — dots + labels positioned absolutely */
.ws-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 5;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease, filter 0.5s ease;
}

.ws-node.inactive {
  opacity: 0.5;
  filter: none;
}

.ws-node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan), 0 0 16px rgba(0, 238, 255, 0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
}

.ws-node.active .ws-node-dot {
  transform: scale(1.4);
  background-color: #fff;
  box-shadow: 0 0 15px var(--cyan), 0 0 30px rgba(0, 238, 255, 0.6);
}

.ws-node-dot--orange {
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange), 0 0 16px rgba(255, 77, 0, 0.4);
}

.ws-node.active .ws-node-dot--orange {
  box-shadow: 0 0 15px var(--orange), 0 0 30px rgba(255, 77, 0, 0.6);
}

.ws-node-label {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: rgba(0, 238, 255, 0.95);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

.ws-node.active .ws-node-label {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 238, 255, 0.9), 0 0 15px rgba(0, 238, 255, 0.6);
  font-weight: 700;
  animation: nodeLabelPulse 2s ease-in-out infinite;
}

.ws-node-animate.active .ws-node-label {
  text-shadow: 0 0 8px rgba(255, 77, 0, 0.9), 0 0 15px rgba(255, 77, 0, 0.6);
}

@keyframes nodeLabelPulse {

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

  50% {
    transform: scale(1.05);
  }
}

/* Node positions — CONCEPT top, ANIMATE right, SCORE left, COMPOSITE bottom */
.ws-node-concept {
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.ws-node-animate {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.ws-node-animate .ws-node-label {
  color: rgba(255, 77, 0, 0.95);
}

.ws-node-score {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.ws-node-composite {
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
}

/* Active central planet pulses */
.ws-orrery.active-stage .ws-planet {
  animation: planetPulseActive 2s ease-in-out infinite;
}

@keyframes planetPulseActive {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1.02);
    box-shadow:
      0 0 50px rgba(255, 77, 0, 0.8),
      0 0 100px rgba(255, 77, 0, 0.4),
      inset -20px -15px 40px rgba(0, 0, 0, 0.5);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow:
      0 0 60px rgba(255, 77, 0, 0.9),
      0 0 120px rgba(255, 77, 0, 0.5),
      inset -20px -15px 40px rgba(0, 0, 0, 0.5);
  }
}

/* ==================== CLASSIFIED MISSION FILES — REDESIGNED ==================== */
#classified {
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #060d1a 0%, var(--bg) 100%);
}

/* ── Hero Header ── */
.cmf-hero {
  margin-bottom: 3rem;
}

.cmf-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-shadow: 0 0 8px rgba(255, 77, 0, 0.5);
}

.cmf-tag-bar {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--orange);
  box-shadow: 0 0 6px var(--orange);
}

.cmf-hero-headline {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.2rem;
}

.cmf-hero-sub {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #fff;
  max-width: 640px;
  margin: 0 auto;
}

/* ── Featured Mission Panel ── */
.cmf-featured {
  position: relative;
  border: 1px solid rgba(0, 238, 255, 0.2);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(10, 18, 34, 0.9);
  margin-bottom: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 238, 255, 0.04);
}

/* HUD corner brackets */
.cmf-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 5;
}

.cmf-corner--tl {
  top: 7px;
  left: 7px;
  border-top: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}

.cmf-corner--tr {
  top: 7px;
  right: 7px;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
}

.cmf-corner--bl {
  bottom: 7px;
  left: 7px;
  border-bottom: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}

.cmf-corner--br {
  bottom: 7px;
  right: 7px;
  border-bottom: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
}

/* Featured image column */
.cmf-feat-img-col {
  min-height: 360px;
}

.cmf-feat-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
}

.cmf-feat-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.6s ease;
}

.cmf-featured:hover .cmf-feat-img-wrap img {
  transform: scale(1.04);
}

.cmf-feat-img-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(10, 18, 34, 0.95) 100%),
    linear-gradient(180deg, transparent 60%, rgba(10, 18, 34, 0.7) 100%);
  z-index: 2;
}

.cmf-feat-img-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--orange);
  background: rgba(255, 77, 0, 0.1);
  border: 1px solid rgba(255, 77, 0, 0.3);
  padding: 4px 10px;
  border-radius: 3px;
  z-index: 3;
  text-transform: uppercase;
}

/* Featured content column */
.cmf-feat-content {
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cmf-feat-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.cmf-meta-tag {
  color: var(--cyan);
}

.cmf-meta-sep {
  color: #fff;
}

.cmf-feat-headline {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1rem;
}

.cmf-feat-body {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #fff;
  margin-bottom: 2rem;
}

/* Stats Row */
.cmf-stats-row {
  display: flex;
  align-items: center;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.5rem;
  flex-wrap: wrap;
}

.cmf-stat {
  text-align: left;
  padding-right: 1.5rem;
}

.cmf-stat-val {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.cmf-stat-val--orange {
  color: var(--orange);
  text-shadow: 0 0 10px rgba(255, 77, 0, 0.4);
}

.cmf-stat-label {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}

.cmf-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 1.5rem;
  flex-shrink: 0;
}

/* ── Mission File Cards Row ── */
.cmf-cards-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  border-radius: 6px;
  overflow: hidden;
}

.cmf-card {
  padding: 1.3rem 1.2rem;
  background: rgba(13, 27, 42, 0.5);
  border-right: 1px solid rgba(0, 238, 255, 0.1);
  border-top: 3px solid rgba(0, 238, 255, 0.3);
  transition: background 0.3s ease, border-top-color 0.3s ease;
  position: relative;
  cursor: default;
}

.cmf-card:last-child {
  border-right: none;
}

.cmf-card:hover {
  background: rgba(0, 238, 255, 0.05);
  border-top-color: var(--cyan);
}

.cmf-card--final {
  border-top-color: rgba(0, 238, 255, 0.5);
}

.cmf-card--final:hover {
  border-top-color: var(--cyan);
  background: rgba(0, 238, 255, 0.07);
}

.cmf-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.cmf-card-num {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: #fff;
}

.cmf-card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  animation: dotPulse 2s ease-in-out infinite;
}

.cmf-card-dot--orange {
  background: var(--orange);
  box-shadow: 0 0 6px var(--orange);
}

.cmf-card-dot--cyan {
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

@keyframes dotPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.cmf-card-code {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.cmf-card-text {
  font-size: 0.75rem;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 0.8rem;
}

.cmf-card-threat {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;
}

/* ==================== TEXT GLITCH HOVER EFFECT ==================== */
.duo-card-name {
  position: relative;
}

/* Skew parent text slightly on hover */
.duo-card:hover .duo-card-name {
  animation: text-skew 0.8s infinite linear;
}

/* Base style for pseudo elements */
.duo-card-name::before,
.duo-card-name::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: inherit;
  opacity: 0;
  pointer-events: none;
}

/* Left slice / Cyan glitch shadow */
.duo-card:hover .duo-card-name::before {
  opacity: 0.8;
  left: -2px;
  text-shadow: 2px 0 var(--cyan);
  animation: glitch-anim-1 1s infinite linear alternate-reverse;
}

/* Right slice / Orange glitch shadow */
.duo-card:hover .duo-card-name::after {
  opacity: 0.8;
  left: 2px;
  text-shadow: -2px 0 var(--orange);
  animation: glitch-anim-2 1.2s infinite linear alternate-reverse;
}

@keyframes text-skew {

  0%,
  100% {
    transform: skew(0deg);
  }

  20% {
    transform: skew(1.5deg);
  }

  25% {
    transform: skew(-2deg) scaleY(0.95);
  }

  30% {
    transform: skew(0deg);
  }

  60% {
    transform: skew(-1deg);
  }

  65% {
    transform: skew(2.5deg) scaleY(1.05);
  }

  70% {
    transform: skew(0deg);
  }
}

@keyframes glitch-anim-1 {
  0% {
    clip-path: inset(20% 0 70% 0);
    transform: skew(0.5deg);
  }

  10% {
    clip-path: inset(40% 0 43% 0);
    transform: skew(-1.5deg);
  }

  20% {
    clip-path: inset(80% 0 10% 0);
    transform: skew(1deg);
  }

  30% {
    clip-path: inset(5% 0 85% 0);
    transform: skew(-0.8deg);
  }

  40% {
    clip-path: inset(60% 0 35% 0);
    transform: skew(1.5deg);
  }

  50% {
    clip-path: inset(15% 0 80% 0);
    transform: skew(-1deg);
  }

  60% {
    clip-path: inset(70% 0 20% 0);
    transform: skew(0.8deg);
  }

  70% {
    clip-path: inset(30% 0 60% 0);
    transform: skew(-2deg);
  }

  80% {
    clip-path: inset(90% 0 5% 0);
    transform: skew(1.2deg);
  }

  90% {
    clip-path: inset(50% 0 40% 0);
    transform: skew(-0.4deg);
  }

  100% {
    clip-path: inset(10% 0 85% 0);
    transform: skew(0deg);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip-path: inset(10% 0 85% 0);
    transform: skew(-0.8deg);
  }

  10% {
    clip-path: inset(85% 0 5% 0);
    transform: skew(2deg);
  }

  20% {
    clip-path: inset(35% 0 60% 0);
    transform: skew(-1deg);
  }

  30% {
    clip-path: inset(75% 0 15% 0);
    transform: skew(0.8deg);
  }

  40% {
    clip-path: inset(5% 0 90% 0);
    transform: skew(-1.5deg);
  }

  50% {
    clip-path: inset(55% 0 40% 0);
    transform: skew(1deg);
  }

  60% {
    clip-path: inset(25% 0 70% 0);
    transform: skew(-0.8deg);
  }

  70% {
    clip-path: inset(65% 0 30% 0);
    transform: skew(1.2deg);
  }

  80% {
    clip-path: inset(15% 0 80% 0);
    transform: skew(-1.2deg);
  }

  90% {
    clip-path: inset(80% 0 15% 0);
    transform: skew(0.5deg);
  }

  100% {
    clip-path: inset(45% 0 50% 0);
    transform: skew(0deg);
  }
}

/* ==================== CONTACT FORM 7 FOOTER INTEGRATION ==================== */
.footer-cta .wpcf7 {
  margin: 0 auto !important;
  max-width: 480px !important;
  width: 100% !important;
  display: block !important;
}

.footer-cta .wpcf7-form {
  margin: 0 auto !important;
  width: 100% !important;
}

.wpcf7 .footer-email-form,
.wpcf7-form .footer-email-form {
  display: flex !important;
  gap: .8rem !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  /*   justify-content: center !important; */
  width: 100% !important;
}

/* Bypass auto paragraphs and line breaks inside the form container */
.wpcf7 .footer-email-form p,
.wpcf7-form .footer-email-form p {
  display: contents !important;
}

.wpcf7 .footer-email-form br,
.wpcf7-form .footer-email-form br {
  display: none !important;
}

.wpcf7 .footer-email-form .wpcf7-form-control-wrap {
  flex: 1 !important;
  display: block !important;
}

/* Inputs and Buttons exact styling */
.wpcf7 .footer-email-form .footer-email-input {
  /* width: 100% !important; */
  box-sizing: border-box !important;
  height: 48px !important;
  background: rgba(13, 27, 42, .9) !important;
  border: 1px solid var(--cyan) !important;
  border-radius: 4px !important;
  padding: .75rem 1.2rem !important;
  color: var(--white) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1rem !important;
  outline: none !important;
  transition: box-shadow .3s !important;
}

.wpcf7 .footer-email-form .footer-email-input:focus {
  border-color: var(--cyan) !important;
  box-shadow: var(--cyan-glow) !important;
}

.wpcf7 .footer-email-form .btn-join {
  height: 48px !important;
  padding: 0 1.8rem !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: .75rem !important;
  letter-spacing: .1em !important;
  background: var(--orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all .3s !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}

.wpcf7 .footer-email-form .btn-join:hover {
  background: #ff6622 !important;
  box-shadow: var(--orange-glow) !important;
}

/* Contact Form 7 Response Output / Success / Error Alerts */
div.wpcf7 .wpcf7-response-output,
.wpcf7-response-output {
  /* margin: 1.5rem auto 0 !important; */
  margin-left: 0px;
  padding: .8rem 1.2rem !important;
  border-radius: 4px !important;
  font-family: 'Rajdhani', sans-serif;
  font-size: .95rem;
  font-weight: 500;
  max-width: 480px;
  text-align: center;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Success status */
div.wpcf7[data-status="sent"] .wpcf7-response-output,
div.wpcf7 .wpcf7-form.sent .wpcf7-response-output,
div.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
  background: rgba(0, 238, 255, 0.1) !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 15px rgba(0, 238, 255, 0.2) !important;
  color: var(--cyan) !important;
}

/* Invalid / Failure status */
div.wpcf7[data-status="invalid"] .wpcf7-response-output,
div.wpcf7[data-status="failed"] .wpcf7-response-output,
div.wpcf7 .wpcf7-form.invalid .wpcf7-response-output,
div.wpcf7 .wpcf7-form.unaccepted .wpcf7-response-output,
div.wpcf7 .wpcf7-form.failed .wpcf7-response-output,
div.wpcf7 .wpcf7-form.aborted .wpcf7-response-output,
div.wpcf7 .wpcf7-response-output.wpcf7-validation-errors,
div.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ng {
  background: rgba(255, 77, 0, 0.1) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 0 15px rgba(255, 77, 0, 0.2) !important;
  color: var(--orange) !important;
}

/* Inline validation tip */
span.wpcf7-not-valid-tip,
.wpcf7-not-valid-tip {
  color: #ff4d00 !important;
  font-family: 'Rajdhani', sans-serif;
  font-size: .85rem !important;
  margin-top: .4rem !important;
  text-align: left !important;
  display: block !important;
  font-weight: 500 !important;
}

/* ============================================
   RESPONSIVE MEDIA QUERIES
   All media queries consolidated at the bottom
   ============================================ */

/* ============================================
   LARGE DESKTOPS (min-width: 1200px)
   ============================================ */
@media (min-width: 1200px) {
  .duo-visualizer-container {
    height: 100%;
  }
}

/* ============================================
   DESKTOPS & LAPTOPS (992px - 1199px)
   ============================================ */
@media (min-width: 992px) {

  /* Level 2 dropdown show on hover */
  .navbar-nav .dropdown:hover>.dropdown-menu {
    display: block;
    margin-top: 0;
  }

  .navbar-nav .dropdown:hover>.dropdown-toggle::after {
    transform: rotate(180deg);
  }

  /* Level 3 submenu show on hover */
  .dropdown-submenu:hover>.dropdown-menu {
    display: block;
  }

  .dropdown-submenu>.dropdown-toggle::after {
    border-top: 0.3em solid transparent;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
    border-right: 0;
    vertical-align: middle;
    float: right;
    margin-top: 0.35rem;
    margin-left: 0.8rem;
    transition: transform 0.3s ease;
  }

  .dropdown-submenu:hover>.dropdown-toggle::after {
    transform: rotate(90deg);
  }
}

/* ============================================
   TABLETS (768px - 991px)
   ============================================ */
@media (max-width: 991.98px) {
  .navbar-nav .dropdown-menu {
    background: rgba(8, 16, 30, 0.95);
    border-color: rgba(0, 238, 255, 0.15);
    box-shadow: none;
    padding-left: 1rem;
  }

  .dropdown-submenu>.dropdown-menu {
    position: static;
    margin-top: 0;
    margin-left: 1rem;
    border: none;
    background: rgba(0, 238, 255, 0.03);
  }
}

@media (max-width: 991px) {
  .ws-orrery {
    width: 300px;
    height: 300px;
  }

  .ws-planet {
    width: 110px;
    height: 110px;
  }

  .ws-planet-glow {
    width: 160px;
    height: 160px;
  }

  .ws-orbit-1 {
    width: 170px;
    height: 170px;
    margin-top: -85px;
    margin-left: -85px;
  }

  .ws-orbit-2 {
    width: 230px;
    height: 230px;
    margin-top: -115px;
    margin-left: -115px;
  }

  .ws-orbit-3 {
    width: 295px;
    height: 295px;
    margin-top: -147px;
    margin-left: -147px;
  }

  .workshop-stages {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .workshop-body {
    max-width: 100%;
  }
}

/* ============================================
   TABLETS & LARGER MOBILES (max-width: 1199px)
   ============================================ */
@media (max-width: 1199px) {
  .cmf-cards-track {
    grid-template-columns: repeat(3, 1fr);
  }

  .cmf-card:nth-child(3) {
    border-right: none;
  }

  .cmf-card:nth-child(4),
  .cmf-card:nth-child(5),
  .cmf-card:nth-child(6) {
    border-top: 1px solid rgba(0, 238, 255, 0.1);
  }
}

/* ============================================
   Pranav Media Query MOBILES (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
	
	.section-title {
    font-size: 22px;
}

  .hero-new-badge {
   font-size: 9px;
    width: 100%;
    max-width: 280px;
  }

  .video-preview-title {
    font-size: 13px;
    line-height: 25px;
  }

  .hero-bg {
    background-image: url('/wp-content/uploads/2026/06/Harvie-Mobile-Banner-Image.webp');
    background-size: cover;
    background-position: center;
  }

  /* Mobile Banner Optimization	 */
  .home .glitch-title-404 {
    font-size: 21px;
    line-height: 30px;
  }

  .hero-logo-img {
    max-width: 320px;
    width: 90%;
  }

  .home .hero-content {
    padding: 0;
  }


  .home .hero-tagline {
    margin: 1rem 0 1.5rem;
  }

  .home .hero-content {
	margin-top: 250px;
  }

  /* End Mobile Banner Optimization */


  .footer-cta {
    padding: 70px 0 0 0;
  }

  div.wpcf7 .wpcf7-response-output,
  .wpcf7-response-output {
    margin-left: 0 !important;
  }

  .wpcf7 .footer-email-form .footer-email-input {
    width: 100% !important;
  }

  .footer-email-form {
    flex-direction: column;
  }

  .btn-join {
    width: 100%;
  }

  .btn-watch,
  .btn-episodes {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* 404 Page Mobile Styles */
  .glitch-title-404 {
    font-size: 35px;
    line-height: 45px;
  }

  .cyber-panel-404 {
    padding: 2.5rem 1.5rem;
  }

  .cyber-search-group {
    flex-direction: column;
    border: none;
    background: transparent;
    gap: 10px;
    box-shadow: none;
  }

  .cyber-search-input {
    border: 1px solid rgba(0, 238, 255, 0.3);
    border-radius: 4px;
    padding: 0.75rem 1rem;
  }

  .cyber-search-input:focus {
    border-color: var(--cyan);
    box-shadow: var(--cyan-glow);
  }

  .cyber-search-btn {
    border-radius: 4px;
    padding: 0.75rem;
  }

  .cyber-btn-group a {
    width: 100%;
  }
}

/* ============================================
   SMALL MOBILES (max-width: 767px)
   ============================================ */
@media (max-width: 767px) {
  .cmf-cards-track {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .cmf-card:nth-child(odd) {
    border-right: 1px solid rgba(0, 238, 255, 0.1);
  }

  .cmf-feat-content {
    padding: 1.5rem;
  }

  .cmf-stats-row {
    gap: 0.5rem;
  }

  .cmf-stat-divider {
    display: none;
  }

  .cmf-stat {
    padding-right: 1rem;
  }

  .cmf-hero-sub {
    max-width: 100%;
  }

  .workshop-headline {
    font-size: 28px;
    line-height: 40px;
  }

  .cmf-hero-headline {
    font-size: 22px;
    line-height: 30px;
  }

  .navbar.navbar-expand-lg #navMenu {
    background-color: #00000059;
    backdrop-filter: blur(5px);
    margin: 10px;
    padding: 10px 0px 20px 20px;
    border-radius: 20px;
  }
}

/* Sticky YouTube Floating Button */
.floating-youtube-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  width: 45px;
  height: 45px;
  color: var(--cyan);
  border: 1.5px solid var(--cyan);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: var(--cyan-glow);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
}

.floating-youtube-btn::after {
  content: '';
  position: absolute;
  top: -1.5px;
  left: -1.5px;
  right: -1.5px;
  bottom: -1.5px;
  border: 1.5px solid var(--cyan);
  border-radius: 50%;
  animation: ytRipple 2s infinite ease-out;
  pointer-events: none;
  z-index: -1;
}

.floating-youtube-btn:hover {
  background: #00eeff33;
  transform: translateY(-5px) scale(1.08);
  box-shadow: 0 0 30px var(--cyan);
}

@keyframes ytRipple {
  0% {
    transform: scale(1);
    opacity: 0.8;
    box-shadow: 0 0 0 var(--cyan);
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
    box-shadow: 0 0 15px var(--cyan);
  }
}

/* Outline YouTube Icon (matches Instagram outline styling) only in OFFICIAL MEDIA cards */
.media-icon .bi-youtube {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.8px currentColor;
}

/* Hero Banner Logo Styling & Electric Lighting Effects */
.hero-logo-wrap {
    text-align: center;
    margin-bottom: 10px;
    width: 100%;
}

.hero-logo-img {
    width: 560px;
    max-width: 100%;
    height: auto;
    user-select: none;
    filter: drop-shadow(0 0 10px rgba(0, 238, 255, 0.7)) drop-shadow(0 0 20px rgba(0, 238, 255, 0.4));
    animation: electricGlow 3s infinite alternate, electricFlicker 8s infinite;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.hero-logo-img:hover {
  transform: scale(1.03) rotate(-0.5deg);
  filter: drop-shadow(0 0 15px rgba(0, 238, 255, 0.9)) drop-shadow(0 0 35px rgba(0, 238, 255, 0.6)) drop-shadow(0 0 50px rgba(255, 77, 0, 0.3));
}

@keyframes electricGlow {
  0% {
    filter: drop-shadow(0 0 10px rgba(0, 238, 255, 0.6)) drop-shadow(0 0 20px rgba(0, 238, 255, 0.3));
  }

  50% {
    filter: drop-shadow(0 0 15px rgba(0, 238, 255, 0.8)) drop-shadow(0 0 30px rgba(0, 238, 255, 0.5)) drop-shadow(0 0 45px rgba(255, 77, 0, 0.2));
  }

  100% {
    filter: drop-shadow(0 0 8px rgba(0, 238, 255, 0.5)) drop-shadow(0 0 15px rgba(0, 238, 255, 0.2));
  }
}

@keyframes electricFlicker {

  0%,
  19.99%,
  22%,
  62.99%,
  64%,
  64.99%,
  70%,
  100% {
    opacity: 1;
  }

  20%,
  21.99%,
  63%,
  63.99%,
  65%,
  69.99% {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(0, 238, 255, 0.4)) drop-shadow(0 0 12px rgba(0, 238, 255, 0.2));
  }
}

/* Hero section specific button overrides */
#hero .btn-watch {
    background: #FF4D00;
    color: #fff;
    border: 1px solid #FF4D00;
}

#hero .btn-watch:hover {
   background: #FF4D00;
  color: #fff;
  border-color: #FF4D00;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
}

#hero .btn-episodes {
    /* background: #00EEFF; */
    color: #00EEFF;
    border: 1px solid #00EEFF;
    font-weight: 700;
}

#hero .btn-episodes:hover {
  background: #00D5E5;
  color: #060B18;
  border-color: #00D5E5;
  box-shadow: 0 0 20px rgba(0, 238, 255, 0.7);
}

/* Header specific social buttons */
.header-social-links .social-btn {
/* background: #FF0000; */
color: #FF4D00;
border: 1px solid #FF4D00;
}

.header-social-links .social-btn:hover {
    background: #ff4d00e0;
    color: #ffffff;
    border-color: #FF4D00;
    box-shadow: 0 0 15px #ff4d00b5;
}