:root {
  --bg: #03070b;
  --bg2: #071018;
  --panel: rgba(7,18,27,.92);
  --panel2: rgba(9,26,38,.94);
  --cyan: #56efff;
  --cyan2: #b9fbff;
  --green: #86ff4c;
  --orange: #ffb83f;
  --purple: #b268ff;
  --red: #ff5d55;
  --text: #edf8fa;
  --muted: #9db3b9;
  --line: rgba(86,239,255,.19);
  --line2: rgba(134,255,76,.16);
  --shadow: 0 24px 70px rgba(0,0,0,.48);
  --radius: 18px;
  --mono: "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -10%, rgba(86,239,255,.10), transparent 30%),
    radial-gradient(circle at 95% 10%, rgba(134,255,76,.06), transparent 30%),
    #03070b;
  font-family: var(--sans);
  line-height: 1.6;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  opacity:.13;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.055) 0, rgba(255,255,255,.055) 1px, transparent 1px, transparent 4px);
  mix-blend-mode:soft-light;
}
img { display:block; max-width:100%; }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
button { color:inherit; }
.container { width:min(1200px, calc(100% - 40px)); margin:0 auto; }
.section { padding:92px 0; position:relative; }
.divider { height:1px; background:linear-gradient(90deg, transparent, rgba(86,239,255,.35), transparent); }
.eyebrow {
  color:var(--cyan);
  margin:0 0 10px;
  font:800 .74rem/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}
h1,h2,h3,h4 { line-height:1.06; letter-spacing:-.03em; margin-top:0; }
h1 { font-size:clamp(3.1rem, 8vw, 7.1rem); }
h2 { font-size:clamp(2rem, 4.5vw, 4rem); }
h3 { font-size:clamp(1.25rem, 2.4vw, 1.8rem); }
p { color:#c4d3d7; }
.lead { max-width:820px; font-size:clamp(1.05rem,2vw,1.3rem); }
.card {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(10,27,38,.86), rgba(4,13,20,.94));
  box-shadow:0 15px 50px rgba(0,0,0,.25);
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:47px;
  padding:0 19px;
  border-radius:9px;
  border:1px solid var(--line);
  text-decoration:none;
  font-weight:850;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary {
  color:#021013;
  border-color:var(--cyan);
  background:linear-gradient(135deg,#c8fdff,#59ecff);
  box-shadow:0 0 28px rgba(86,239,255,.17);
}
.btn-secondary { color:var(--cyan2); background:rgba(5,19,28,.85); }
.btn-green { color:#061105; border-color:var(--green); background:linear-gradient(135deg,#c4ff9c,#7cff42); }
.tag {
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border-radius:7px;
  border:1px solid rgba(86,239,255,.16);
  color:#b9d1d6;
  background:rgba(3,13,19,.7);
  font:750 .66rem/1 var(--mono);
  letter-spacing:.03em;
}
.section-heading { max-width:850px; margin-bottom:42px; }
.section-heading p:last-child { margin-bottom:0; }

.site-header {
  position:sticky;
  top:0;
  z-index:90;
  background:rgba(3,7,11,.8);
  border-bottom:1px solid rgba(86,239,255,.13);
  backdrop-filter:blur(18px);
}
.nav { min-height:72px; display:flex; align-items:center; gap:22px; }
.brand { margin-right:auto; text-decoration:none; }
.brand strong {
  display:block;
  color:#eafcff;
  font:900 .94rem/1.15 var(--mono);
  letter-spacing:.07em;
}
.brand span {
  display:block;
  color:#728991;
  margin-top:5px;
  font:700 .61rem/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nav-links { display:flex; align-items:center; gap:20px; }
.nav-links a { color:#bed0d5; text-decoration:none; font-size:.87rem; font-weight:800; }
.nav-links a:hover { color:var(--cyan); }
.nav-cta { margin-left:4px; }
.menu-toggle {
  display:none;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--cyan);
  background:#06131c;
}

.hero {
  min-height:calc(100vh - 72px);
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:url("../images/branding/maker-space-defenders-hero.png") center top/cover no-repeat;
}
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg, rgba(3,7,11,.94) 0%, rgba(3,7,11,.73) 35%, rgba(3,7,11,.12) 68%, rgba(3,7,11,.28) 100%),
    linear-gradient(0deg, #03070b 0%, transparent 34%);
}
.hero-copy {
  width:min(690px, 100%);
  padding:80px 0 100px;
}
.boot {
  margin-bottom:22px;
  color:#8ca9b0;
  font:700 .73rem/1.7 var(--mono);
}
.boot .ok { color:var(--green); }
.hero h1 {
  margin-bottom:17px;
  font-family:var(--mono);
  text-transform:uppercase;
  text-shadow:0 0 30px rgba(86,239,255,.14);
}
.hero h1 span { display:block; }
.hero h1 .top { color:#effcff; }
.hero h1 .bottom { color:var(--green); }
.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:28px; }
.scroll-cue {
  position:absolute;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  color:#789097;
  font:700 .65rem/1 var(--mono);
  letter-spacing:.15em;
  text-transform:uppercase;
}
.scroll-cue::after {
  content:"";
  display:block;
  width:1px;
  height:30px;
  margin:10px auto 0;
  background:linear-gradient(var(--cyan),transparent);
}

.briefing-layout {
  display:grid;
  grid-template-columns:.74fr 1.26fr;
  gap:28px;
  align-items:start;
}
.briefing-intro { padding:30px; position:sticky; top:96px; }
.briefing-terminal {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(86,239,255,.26);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 10%, rgba(86,239,255,.05), transparent 42%),
    #041017;
  box-shadow:var(--shadow), inset 0 0 60px rgba(86,239,255,.035);
}
.briefing-terminal::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(transparent 50%,rgba(0,0,0,.09) 50%);
  background-size:100% 4px;
  opacity:.45;
}
.terminal-head {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid rgba(86,239,255,.16);
  color:#74939a;
  font:800 .66rem/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.terminal-status { display:flex; align-items:center; gap:8px; }
.status-dot { width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 13px var(--green); }
.terminal-body {
  position:relative;
  z-index:2;
  min-height:520px;
  padding:30px 34px 24px;
}
.briefing-title {
  color:var(--cyan);
  font:900 1rem/1.2 var(--mono);
  letter-spacing:.10em;
  text-transform:uppercase;
}
.briefing-text {
  min-height:340px;
  margin-top:26px;
  color:#d9f1f4;
  white-space:pre-line;
  font:650 .91rem/1.85 var(--mono);
}
.cursor { color:var(--green); animation:blink .8s steps(1,end) infinite; }
@keyframes blink { 50% { opacity:0; } }
.briefing-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid rgba(86,239,255,.11);
  padding-top:18px;
}
.briefing-controls button {
  border:1px solid rgba(86,239,255,.2);
  border-radius:8px;
  background:#061923;
  color:var(--cyan2);
  padding:10px 13px;
  cursor:pointer;
  font:800 .67rem/1 var(--mono);
}
.briefing-controls button:hover { border-color:var(--cyan); }
.briefing-progress { color:#758f96; font:800 .65rem/1 var(--mono); }

.stage-list { display:grid; gap:22px; }
.stage {
  display:grid;
  grid-template-columns:1.18fr .82fr;
  min-height:390px;
  overflow:hidden;
}
.stage-art { position:relative; min-height:390px; }
.stage-art .bg { width:100%;height:100%;object-fit:cover;position:absolute;inset:0; }
.stage-art::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 50%,rgba(4,13,20,.94) 100%);
}
.stage-boss {
  position:absolute;
  z-index:2;
  bottom:0;
  right:2%;
  max-width:43%;
  max-height:87%;
  object-fit:contain;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.58));
}
.stage-copy { padding:34px; display:flex; flex-direction:column; justify-content:center; }
.stage-code { color:var(--orange); font:850 .71rem/1 var(--mono); letter-spacing:.14em; }
.stage-copy h3 { margin:10px 0 12px; font-size:clamp(1.7rem,3vw,2.7rem); }
.stage-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }

.defender-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.defender { overflow:hidden; padding:24px; }
.defender-image {
  margin:-24px -24px 20px;
  min-height:270px;
  display:grid;
  place-items:center;
  background:radial-gradient(circle,rgba(86,239,255,.13),transparent 60%),linear-gradient(180deg,#0a2330,#051018);
  border-bottom:1px solid rgba(86,239,255,.14);
}
.defender-image img { width:82%; height:245px; object-fit:contain; filter:drop-shadow(0 16px 30px rgba(0,0,0,.5)); }
.db-code { color:var(--green); font:800 .68rem/1 var(--mono); letter-spacing:.13em; }
.stat { margin-top:13px; }
.stat label { display:flex;justify-content:space-between;color:#8fa8af;font:750 .63rem/1 var(--mono); }
.stat-track { height:5px;border-radius:99px;background:#0a1820;overflow:hidden;margin-top:7px; }
.stat-track i { display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green)); }

.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card { padding:22px; }
.feature-image {
  height:190px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  border-radius:13px;
  background:radial-gradient(circle,rgba(86,239,255,.11),transparent 63%),#06131b;
}
.feature-image img { max-width:74%; max-height:165px; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
.feature-card h3 { margin-bottom:7px; }
.feature-card p { margin-bottom:0; font-size:.9rem; }

.supply-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.weapon { padding:18px; position:relative; overflow:hidden; }
.weapon::before {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(140deg,rgba(134,255,76,.035),transparent 50%);
  pointer-events:none;
}
.weapon-image { height:160px; display:grid;place-items:center; }
.weapon-image img { max-width:88%;max-height:145px;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5)); }
.price-line { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px; }
.token { color:var(--orange); font:850 .66rem/1 var(--mono); }
.weapon small { color:#738c93; font:750 .62rem/1 var(--mono); }
.weapon h3 { margin:8px 0 5px; font-size:1.05rem; }
.weapon p { margin:0; color:#96aeb4; font-size:.82rem; }

.database-toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
}
.database-toolbar button {
  border:1px solid rgba(86,239,255,.18);
  border-radius:8px;
  background:#071923;
  color:#a9c0c6;
  padding:9px 12px;
  cursor:pointer;
  font:800 .66rem/1 var(--mono);
}
.database-toolbar button.active,
.database-toolbar button:hover { color:#061015;background:var(--cyan);border-color:var(--cyan); }
.hostile-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:15px; }
.hostile {
  padding:15px;
  min-height:290px;
  transition:transform .18s ease,border-color .18s ease;
}
.hostile:hover { transform:translateY(-3px);border-color:rgba(86,239,255,.38); }
.hostile-image {
  height:165px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:radial-gradient(circle,rgba(255,93,85,.085),transparent 62%),#06121a;
}
.hostile-image img { max-width:90%;max-height:150px;object-fit:contain; }
.hostile small { display:block;margin-top:12px;color:#788f96;font:800 .6rem/1 var(--mono);letter-spacing:.09em; }
.hostile h3 { margin:8px 0 6px;font-size:1rem; }
.hostile p { margin:0;color:#91a7ae;font-size:.8rem; }
.hostile.boss { border-color:rgba(255,184,63,.25); }
.hostile.boss small { color:var(--orange); }
.hostile.hidden { display:none; }

.box-section {
  overflow:hidden;
  background:linear-gradient(180deg,rgba(9,21,30,.3),rgba(4,8,12,.6));
}
.box-layout { display:grid;grid-template-columns:1fr .72fr;gap:46px;align-items:center; }
.box-art {
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,184,63,.2);
  box-shadow:var(--shadow);
}
.box-copy .feature-list { display:grid;gap:11px;margin:24px 0 28px; }
.feature-row {
  padding:13px 15px;
  border:1px solid rgba(86,239,255,.13);
  border-radius:9px;
  background:rgba(5,17,24,.6);
  color:#b7cbd0;
  font-size:.88rem;
}

.makerspace-band { position:relative;overflow:hidden; }
.makerspace-band::before {
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,7,11,.97),rgba(3,7,11,.73),rgba(3,7,11,.91)),url("../images/backgrounds/makerspace_ending.png") center/cover no-repeat;
}
.makerspace-content { position:relative;z-index:2;min-height:560px;display:flex;align-items:center; }
.makerspace-box {
  max-width:790px;padding:38px;border-radius:19px;border:1px solid rgba(86,239,255,.22);background:rgba(3,12,18,.8);backdrop-filter:blur(8px);
}
.use-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:24px 0 29px; }
.use-grid div { padding:13px;border-radius:9px;border:1px solid rgba(86,239,255,.12);background:rgba(6,20,28,.72);color:#b9ccd0;font-size:.8rem;font-weight:800; }

.gallery-grid { display:grid;grid-template-columns:repeat(12,1fr);gap:14px; }
.gallery-item { min-height:230px;overflow:hidden;border-radius:15px;border:1px solid rgba(86,239,255,.12);background:#061119; }
.gallery-item img { width:100%;height:100%;object-fit:cover;transition:transform .35s ease; }
.gallery-item:hover img { transform:scale(1.03); }
.gallery-item:nth-child(1){grid-column:span 7}
.gallery-item:nth-child(2){grid-column:span 5}
.gallery-item:nth-child(3),.gallery-item:nth-child(4),.gallery-item:nth-child(5){grid-column:span 4}
.gallery-item:nth-child(6),.gallery-item:nth-child(7){grid-column:span 6}

.page-hero {
  min-height:500px;
  display:flex;
  align-items:end;
  padding:100px 0 68px;
  background:linear-gradient(0deg,#03070b,transparent 48%),linear-gradient(90deg,rgba(3,7,11,.95),rgba(3,7,11,.4)),url("../images/branding/maker-space-defenders-hero.png") center top/cover no-repeat;
}
.page-hero h1 { max-width:900px; }
.partner-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.partner-card { padding:25px; }
.partner-card strong { color:var(--cyan);font:850 .68rem/1 var(--mono); }
.timeline { display:grid;gap:11px;counter-reset:steps; }
.timeline-row {
  display:grid;grid-template-columns:62px 1fr;gap:18px;padding:18px;border-radius:13px;border:1px solid rgba(86,239,255,.12);background:rgba(7,21,30,.68);
}
.timeline-row::before {
  counter-increment:steps;content:"0" counter(steps);width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:rgba(86,239,255,.09);color:var(--cyan);font:850 .76rem/1 var(--mono);
}
.timeline-row h3 { margin:4px 0 5px; }

.contact-grid { display:grid;grid-template-columns:.78fr 1.22fr;gap:30px;align-items:start; }
.contact-copy { padding:30px; }
.contact-form { padding:28px; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:13px; }
.form-grid .full { grid-column:1/-1; }
.contact-form label { display:block;color:#a9bfc5;font:800 .64rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px; }
.contact-form input,.contact-form select,.contact-form textarea {
  width:100%;
  border:1px solid rgba(86,239,255,.17);
  border-radius:9px;
  background:#04131b;
  color:#e8f7f9;
  padding:12px 13px;
  outline:none;
}
.contact-form textarea { min-height:165px;resize:vertical; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--cyan);box-shadow:0 0 0 3px rgba(86,239,255,.07); }
.form-status { min-height:22px;margin-top:12px;color:#91a8ae;font-size:.82rem; }
.honeypot { position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important; }

.footer { padding:33px 0 42px;border-top:1px solid rgba(86,239,255,.11);color:#708890;font-size:.8rem; }
.footer-row { display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap; }

.reveal { opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1;transform:none; }

@media(max-width:1000px){
  .briefing-layout,.stage,.box-layout,.contact-grid { grid-template-columns:1fr; }
  .briefing-intro { position:static; }
  .stage-art::after { background:linear-gradient(0deg,rgba(4,13,20,.95),transparent 52%); }
  .defender-grid,.partner-grid { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .supply-grid,.hostile-grid { grid-template-columns:1fr 1fr; }
  .use-grid { grid-template-columns:1fr 1fr; }
  .nav-links {
    display:none;position:absolute;left:20px;right:20px;top:64px;padding:15px;border-radius:12px;border:1px solid var(--line);background:rgba(3,11,17,.98);flex-direction:column;align-items:stretch;
  }
  .nav-links.open { display:flex; }
  .nav-cta { display:none; }
  .menu-toggle { display:block; }
}
@media(max-width:680px){
  .container { width:min(100% - 26px,1200px); }
  .section { padding:68px 0; }
  .hero { min-height:720px;align-items:end; }
  .hero::before { background-position:64% top; }
  .hero::after { background:linear-gradient(0deg,#03070b 0%,rgba(3,7,11,.92) 36%,rgba(3,7,11,.28) 100%); }
  .hero-copy { padding:120px 0 84px; }
  .terminal-body { padding:24px 19px 20px;min-height:590px; }
  .briefing-text { min-height:420px;font-size:.8rem;line-height:1.75; }
  .briefing-controls { align-items:flex-start;flex-direction:column; }
  .stage-art { min-height:300px; }
  .stage-copy { padding:24px; }
  .feature-grid,.supply-grid,.hostile-grid,.use-grid { grid-template-columns:1fr; }
  .gallery-item { grid-column:span 12!important;min-height:240px; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .full { grid-column:auto; }
}


/* =========================================================
   V3 HERO COMPOSITION
   Keeps the artwork title visible and crops the lower Maker Mode strip.
   ========================================================= */
.hero::before {
  background-position: center top;
}

@media (min-width: 1001px) {
  .hero-copy {
    padding-top: 145px;
  }
}

@media (max-width: 680px) {
  .hero::before {
    background-position: 64% top;
  }
}


/* =========================================================
   V3 CONDENSED HEADER
   ========================================================= */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: #bed0d5;
  cursor: pointer;
  font-size: .87rem;
  font-weight: 800;
}

.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle {
  color: var(--cyan);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 110;
  display: none;
  width: 235px;
  padding: 8px;
  border: 1px solid rgba(86,239,255,.20);
  border-radius: 12px;
  background: rgba(3,11,17,.98);
  box-shadow: 0 20px 55px rgba(0,0,0,.48);
  transform: translateX(-50%);
}

.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu {
  display: grid;
}

.nav-dropdown-menu a {
  display: block;
  padding: 11px 12px;
  border-radius: 8px;
  color: #b8cbd0;
  font: 750 .76rem/1.25 var(--mono);
}

.nav-dropdown-menu a:hover {
  color: #031015;
  background: var(--cyan);
}

@media (max-width: 1000px) {
  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0;
  }

  .nav-dropdown-menu {
    position: static;
    width: 100%;
    margin-top: 10px;
    padding: 7px;
    transform: none;
    box-shadow: none;
    background: rgba(7,21,30,.75);
  }

  .nav-dropdown:hover .nav-dropdown-menu {
    display: none;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    display: grid;
  }
}


/* =========================================================
   V4 VIDEO TERMINAL EXPERIENCE
   ========================================================= */

.video-hero {
  position: relative;
  min-height: calc(100vh - 72px);
  background: #03070b;
}

.video-hero::before,
.video-hero::after {
  content: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #03070b;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(3,7,11,.94) 0%, rgba(3,7,11,.72) 36%, rgba(3,7,11,.20) 70%, rgba(3,7,11,.30) 100%),
    linear-gradient(0deg, #03070b 0%, transparent 38%);
}

.video-hero-copy {
  position: relative;
  z-index: 2;
  padding-top: 120px;
}

.defender-grid {
  grid-template-columns: 1fr;
}

.defender-video-card {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
  padding: 0;
  overflow: hidden;
}

.defender-video-frame {
  position: relative;
  min-height: 420px;
  background: #02070b;
  border-right: 1px solid rgba(86,239,255,.16);
}

.defender-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #02070b;
}

.video-terminal-label {
  position: absolute;
  left: 15px;
  bottom: 15px;
  padding: 7px 9px;
  border: 1px solid rgba(86,239,255,.28);
  border-radius: 7px;
  color: var(--cyan2);
  background: rgba(2,10,15,.78);
  backdrop-filter: blur(5px);
  font: 800 .63rem/1 var(--mono);
  letter-spacing: .09em;
}

.defender-copy {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.defender-video-card:hover {
  border-color: rgba(86,239,255,.40);
  box-shadow: 0 20px 65px rgba(0,0,0,.36), 0 0 35px rgba(86,239,255,.045);
}

.final-poster {
  position: relative;
  min-height: 700px;
  display: flex;
  align-items: end;
  overflow: hidden;
  background: url("../images/branding/maker-space-defenders-hero.png") center top/cover no-repeat;
}

.final-poster-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(3,7,11,.96) 0%, rgba(3,7,11,.40) 50%, rgba(3,7,11,.14) 100%),
    linear-gradient(90deg, rgba(3,7,11,.76), transparent 62%);
}

.final-poster-content {
  position: relative;
  z-index: 2;
  padding-bottom: 70px;
}

.final-poster h2 {
  margin-bottom: 12px;
  font: 900 clamp(3rem,7vw,6.4rem)/.95 var(--mono);
  text-transform: uppercase;
  letter-spacing: -.05em;
}

.final-poster h2 span {
  color: var(--green);
}

.final-poster-content > p:not(.eyebrow) {
  color: #c6d5d9;
  font: 800 1rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 1000px) {
  .defender-video-card {
    grid-template-columns: 1fr;
  }

  .defender-video-frame {
    border-right: 0;
    border-bottom: 1px solid rgba(86,239,255,.16);
  }
}

@media (max-width: 680px) {
  .video-hero {
    min-height: 720px;
  }

  .hero-video {
    object-position: center center;
  }

  .hero-video-overlay {
    background:
      linear-gradient(0deg, #03070b 0%, rgba(3,7,11,.90) 42%, rgba(3,7,11,.28) 100%);
  }

  .video-hero-copy {
    padding-top: 120px;
  }

  .defender-video-frame,
  .defender-video-frame video {
    min-height: 0;
  }

  .final-poster {
    min-height: 620px;
    background-position: 64% top;
  }
}


/* =========================================================
   V5 INTERACTIVE TERMINAL POLISH
   ========================================================= */

.command-btn {
  font-family: var(--mono);
  letter-spacing: .05em;
}

.defender-video-card {
  position: relative;
}

.defender-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px transparent;
  transition:
    box-shadow 180ms ease,
    background 180ms ease;
}

.defender-video-card:hover::after {
  box-shadow:
    inset 0 0 0 1px rgba(86,239,255,.34),
    inset 0 0 32px rgba(86,239,255,.035);
}

.defender-status-overlay {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;
  padding: 7px 10px;
  border: 1px solid rgba(134,255,76,.26);
  border-radius: 7px;
  color: var(--green);
  background: rgba(2,10,15,.78);
  opacity: 0;
  transform: translateY(-5px);
  backdrop-filter: blur(5px);
  font: 850 .62rem/1 var(--mono);
  letter-spacing: .07em;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.defender-video-card:hover .defender-status-overlay {
  opacity: 1;
  transform: translateY(0);
}

.defender-video-card:hover .video-terminal-label {
  border-color: rgba(86,239,255,.48);
  box-shadow: 0 0 18px rgba(86,239,255,.09);
}

.defender-video-card:hover video {
  filter: saturate(1.08) brightness(1.03);
}

.defender-video-frame video {
  transition: filter 180ms ease;
}

.sound-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  padding: 9px 11px;
  border: 1px solid rgba(86,239,255,.20);
  border-radius: 9px;
  color: #8fa9b0;
  background: rgba(3,11,17,.88);
  cursor: pointer;
  font: 800 .61rem/1 var(--mono);
  letter-spacing: .06em;
  backdrop-filter: blur(8px);
}

.sound-toggle:hover {
  color: var(--cyan);
  border-color: rgba(86,239,255,.42);
}

.sound-toggle.enabled {
  color: var(--green);
  border-color: rgba(134,255,76,.35);
}

@media (max-width: 680px) {
  .defender-status-overlay {
    opacity: 1;
    transform: none;
  }

  .sound-toggle {
    right: 12px;
    bottom: 12px;
  }
}